मैं वायरफ्रेम और मॉकअप के बीच अंतर जानना चाहूंगा। मैं अंतर की एक साधारण समझ हासिल करने की उम्मीद कर रहा हूं या निश्चित रूप से जानता हूं कि दोनों समान हैं।
मैंने इसे देखा, लेकिन मैं समझ नहीं पाया कि वास्तव में क्या अंतर है, मैं इसकी सराहना करूंगा अगर कोई इसे मुझे स्पष्ट रूप से समझा सके।
जवाबों:
एक वायरफ्रेम कार्यक्षमता के बारे में है। यह वास्तव में सरल स्केच हो सकता है जो दर्शाता है कि आप अपने डिजाइन में किस तरह की चीजें कर सकते हैं। उदाहरण के लिए, एक वेबसाइट का एक वायरफ्रेम नेविगेशन, मुख्य बटन, कॉलम, विभिन्न तत्वों को रखेगा। आप इसे एक वेबसाइट के लिए खाका के रूप में सोच सकते हैं।
एक मॉकअप इस मामले में उत्पाद की तरह दिखने वाला एक यथार्थवादी प्रतिनिधित्व है: एक वेबसाइट। अंतिम परिणाम बिल्कुल मॉकअप की तरह लग सकता है, या संस्करण संशोधन के बाद इसका एक रूप हो सकता है। जबकि कुछ लोग ग्राफिक्स सॉफ़्टवेयर का उपयोग करके मॉकअप बनाना पसंद करते हैं, अन्य लोग इसे सीधे HTML / CSS में करते हैं।
मैं वायरफ्रेम के लिए बाल्समीक का उपयोग करता हूं, और या तो फोटोशॉप / इलस्ट्रेटर या एचटीएमएल + सीएसएस (जटिलता के आधार पर) मॉकअप के लिए।
वायरफ्रेम का एक उदाहरण:
वायरफ्रेम रडिमेंटरी शेप या रेखाएं हैं जिनका उपयोग केवल स्थिति और / या आकार को नामित करने के लिए किया जाता है। किसी भी वायरफ्रेम का लक्ष्य तत्वों को एक लेआउट में "फिट" करना है, यह इंगित नहीं करता है कि तत्व वास्तव में अंतिम डिजाइन में कैसे दिखाई दे सकते हैं, केवल वे जहां स्थित होंगे।
मॉकअप वायरफ्रेम के शीर्ष पर बनाए गए हैं और एक डिजाइन के समग्र स्वरूप पहलुओं को दिखाने के लिए आगे बढ़ते हैं, जिसमें प्रकार के विकल्प, रंग विकल्प, आदि शामिल हैं। मॉक अप का लक्ष्य यह दिखाना है, जितना संभव हो उतना करीब, कैसे सभी अंतिम दिखावे का प्रतिपादन किया जाएगा।
मैं निम्नलिखित प्रस्तुति में उजागर इस दृष्टि को जोड़ने के लिए, @ यिसेला के विस्तृत उत्तर का समर्थन करता हूं
यहाँ Marcin Treder के एक लेख का संक्षिप्त सारांश दिया गया है :
वायरफ़्रेम
एक वायरफ्रेम एक डिजाइन की एक कम निष्ठा प्रतिनिधित्व है। यह स्पष्ट रूप से दिखाना चाहिए:
• सूचना की संरचना (कहाँ?)
• उपयोगकर्ता का एक विवरण और मूल दृश्य - इंटरफ़ेस इंटरैक्शन (कैसे?)
नकली
वायरफ्रेम का उपयोग रूपरेखा को परिभाषित करने के लिए किया जाता है, सूचना पदानुक्रम, वर्कफ़्लो प्रदर्शित करता है, स्क्रीन पर क्या है, और एक घटक कैसे काम करता है (एनोटेशन) पर एक विवरण प्रदान करता है। आवेदन या साइट की जटिलता के आधार पर, वायरफ्रेम को एक और आवश्यकता पर वितरित किया जाना चाहिए; प्रक्रिया मॉडल। वायरफ्रेम का उपयोग ग्राहक से आवश्यकताओं को पूरा करने के लिए किया जा सकता है, और अंततः ग्राहक के साथ आवश्यकताओं की पुष्टि कर सकता है। वायरफ्रेम एक साइट या एप्लिकेशन की संरचना का एक दृश्य मॉडल है। वे उस फ़ॉन्ट को परिभाषित नहीं करते हैं जिसका उपयोग किया जाएगा, गद्दी, रंग, शैली आदि। वे पैमाने पर नहीं हैं, और उनके पास कोई टन या ग्रेडिएंट नहीं हैं। इसके लिए सभी को क्लाइंट के साथ संवाद करने की आवश्यकता होती है, ताकि वे अन्य आवश्यकता के वितरण के साथ संयोजन के रूप में प्रक्रिया और वायरफ्रेम के संदर्भ को समझ सकें।
फ़ोटोशॉप में एक मॉक-अप आम तौर पर बनाया जाता है और जब यह पुष्टि योग्य वायरफ्रेम की संरचना, या रूपरेखा पर आधारित होता है, तो यह एक अलग वितरण होता है, जिसमें एक अलग शेड्यूल और अनुमोदन प्रक्रिया होती है। मॉक-अप या कंप्स, दृश्य शैली या इंटरफ़ेस के स्वर को परिभाषित करते हैं। एक बार स्वीकार किए जाने के बाद, मॉक-अप कई अतिरिक्त आवश्यकताओं या कार्य उत्पादों में अनुवाद करता है, जैसे सीएसएस कोड, स्टाइल गाइड, चित्रमय संपत्ति, आदि।
वायरफ्रेम कभी भी नकली नहीं होते हैं। मॉक-अप को वायरफ्रेम के रूप में इस्तेमाल किया जा सकता है, लेकिन इसके लिए किसी भी संशोधन की आवश्यकता होगी और आपके बजट को महत्वपूर्ण रूप से प्रभावित कर सकता है।
स्रोत: संचार डिजाइनर, UX लीड, एक कॉर्पोरेट वातावरण में व्यावसायिक विश्लेषक के रूप में 15 साल वेबसाइटों और अनुप्रयोगों के विकास में। और प्यारे बाबोक
मुझे डेव काये की प्रतिक्रिया पर टिप्पणी करने के लिए अभी तक प्रतिष्ठा नहीं मिली है, इसलिए मुझे सीधे जवाब देना होगा। यह रचुरू के शानदार जवाब की तुलना में उनके जवाब को ध्यान देने योग्य है।
आधुनिक वाक्यांशों की व्याख्या में, आम आदमी की व्याख्या / होनी चाहिए;
वास्तविक शब्दावली 80 के दशक से उत्पन्न होती है। उस समय, आप वास्तविक समय कल्पना का उत्पादन करने के कंप्यूटिंग शक्ति नहीं था, लेकिन आप सकता है वास्तविक समय में स्क्रीन पर चारों ओर चल ग्राफिक्स के "wireframes" देखते हैं। रात भर प्रतिपादन आदि के लिए एक उचित "डेमो" की आवश्यकता होती है।
इन समयों में, एक "वायरफ्रेम" एक कंकाल "डिजाइन" का प्रतिनिधित्व करता है और, एक अच्छी पुनरावृत्त डिजाइन प्रक्रिया के साथ, लोगों को वायरफ्रेम से मॉकअप उत्पन्न करना चाहिए, प्रतिक्रिया प्राप्त करना और वायरफ्रेम डिजाइन में सुधार करने के लिए वापस पारित करना चाहिए।
दुर्भाग्य से, आजकल ग्राहकों के लिए बहुत सारे सॉफ़्टवेयर उपलब्ध हैं जो उन्हें मॉकअप डिज़ाइन करने की अनुमति देते हैं जो कि प्रोग्रामर द्वारा सीधे उपयोग करने योग्य किसी भी चीज़ का उपयोग नहीं करते हैं। अक्सर, उनके डिजाइन दूसरों के द्वारा बनाए जाते हैं, इसलिए मॉकअप प्रोग्रामर को भव्य डिजाइनों में कारक के रूप में वापस लाने के बजाय निजी रूप से संवर्धित हो जाता है।
मुझे लगता है कि प्रभावी रूप से डेव का उल्लेख करने के बारे में थोड़ा और विनम्र था :-)
कीथ
इसे सरल करने के लिए:
वायरफ्रेम : कंकाल / संरचना
मॉकअप : त्वचा / दृश्य पहलू
जैसा कि कुछ लोगों ने उल्लेख किया है, आजकल वायरफ्रेम को अधिक महत्व मिल रहा है जबकि मॉकअप प्रोटोटाइप में फ्यूज हो रहा है।
लोगों द्वारा किए गए एक बिंदु को जोड़ना होगा ... ये उत्तर सभी को तकनीकी विवरण देते हैं लेकिन काम के माहौल में अंतर हमेशा इतना स्पष्ट नहीं होता है। कुछ कंपनियां मॉकअप में कार्यक्षमता जोड़ सकती हैं और कुछ उच्च स्तरीय डिजाइन आवश्यकताओं को वायरफ्रेम में डाल सकती हैं। मुझे इस बात का ध्यान रखना चाहिए कि जिन चीज़ों के बारे में "बंद होना चाहिए" के रूप में बहुत पहले कंपनी के रूप में आप कुछ ऐसा कर सकते हैं जो इन दोनों में से कुछ भी नहीं है!
मेरी जानकारी के अनुसार मॉकअप स्क्रीन यूआई, लुक और फील का अंतिम पुनरावृत्ति है। सामान्य प्रवाह क्या होगा और वैकल्पिक प्रवाह क्या होगा। मुझे लगता है कि यह HTML और CSS में निर्मित वेब प्रोटोटाइप की तरह हो सकता है। हम तब ज्यादातर HLD चरण के दौरान दिखाने के लिए और ग्राहक से स्वीकृति है।
वायरफ्रेम तुलना में प्रवाह की तरह अधिक ध्यान केंद्रित करते हैं जहां एक सामान्य विवरण होता है। यदि कुछ विवरणों का प्रतिनिधित्व नहीं करता है, जैसे घटना, परिवर्तन घटना और इसी तरह की चीजों पर क्लिक करने पर क्या होता है। वे ज्यादातर एसए / बीए द्वारा किए जाते हैं और डिजाइनर / डेवलपर्स द्वारा मॉक अप किया जाता है। अधिक से अधिक कुछ लोग वायरफ्रेम के साथ तकनीकी विनिर्देश संलग्न करते हैं जैसे डीबी उस विशेष यूआई के साथ शामिल होता है।
लेकिन फिर से यह परियोजना से परियोजना पर निर्भर करता है। हमारे मामले में वायरफ्रेम सच्चाई का स्रोत हैं।
यही मैं उनके अंतर के रूप में समझता हूं
वायरफ्रेम एक मॉकअप हो सकता है। एक मॉकअप को वायरफ्रेम माना जाता है। हालांकि वे कभी-कभी अलग चीजें होती हैं (जैसा कि अन्य लोगों ने कहा है) वे बस अलग-अलग चीजें हैं।
एक समय पर, कोई भी वायरफ्रेम पर विचार कर सकता है कि Visio क्या बनायेगा। और मॉकअप वह होगा जो फोटोशॉप बनाएगा।
लेकिन आज, हमारे पास जितने उपकरण हैं, वे अक्सर एक ही वास्तविक दस्तावेज होते हैं। शुरुआत में वे वायरफ्रेम (विशुद्ध रूप से लेआउट और फ़ंक्शन) के रूप में शुरू कर सकते हैं लेकिन समय के साथ अधिक से अधिक उस बिंदु तक विस्तृत हो जाते हैं जहां उन्हें मॉकअप माना जा सकता है। और अगर एक इंटरेक्टिव टूल जैसे कि एक्सुर, एक निश्चित बिंदु पर उपयोग किया जाता है, तो कोई इसे प्रोटोटाइप मान सकता है।
इसलिए यह ओवरलैप वाला एक स्पेक्ट्रम है।
wireframes
जब आप एक मोबाइल एप्लिकेशन या एक वेब एप्लिकेशन डिजाइन करने का इरादा रखते हैं, तो आपको पहले एक स्केच की आवश्यकता होगी कि प्रत्येक पृष्ठ कैसा दिख रहा है। केवल व्यावसायिक अवधारणाओं के आधार पर, एक डिज़ाइनर एप्लिकेशन फ्लो और डिज़ाइन के पहले ड्राफ्ट को परिभाषित कर सकता है, जिसमें यह स्केच होता है कि यह कैसा दिखेगा, इसमें कौन से बटन होंगे, कौन से क्षेत्र होंगे, आदि है जो वायरफ्रेम है। इसके लिए बना है।
मॉक-अप
मॉकअप अधिक जीवंत चित्र हैं। वे नेत्रहीन रूप से अधिक आकर्षक हैं, रंग, फोंट, थीम, बटन, लोगो, आदि हैं। इस स्तर पर खेतों के लेबल, नोट्स, फ़ॉन्ट प्रकार, नेविगेशन मेनू, आदि डिज़ाइन में निर्दिष्ट हैं। यह एक सटीक प्रतिनिधित्व है कि मोबाइल ऐप कैसा दिखेगा या वेब पेज कैसा दिखेगा।
आप इस जानकारीपूर्ण लेख में वायरफ्रेम और मॉकअप के बीच विस्तृत तुलना पा सकते हैं: द डिफरेंस बिटवीन वायरफ्रेम, मॉकअप और प्रोटोटाइप