प्रोटोटाइप, ब्लॉक आरेख, लेआउट - क्या चुनना है?

यह मूल लेख, "वायरफ्रैमिंग, प्रोटोटाइपिंग, मॉकअपिंग - क्या अंतर है?" का अनुवाद है ।

इतना

कुछ साल पहले, मुझे एहसास हुआ कि मेरे कई सहयोगियों (डिजाइनरों ने नहीं) मेरे काम के परिणामों के लिए अलग-अलग नाम हैं। उन्होंने सुझाव दिया कि ब्लॉक लेआउट (wireframe), प्रोटोटाइप (प्रोटोटाइप) और लेआउट (mockup) - एक ही बात - ग्रे का एक प्रकार, वर्ग, शानदार विचारों समझा स्केच।


इस सामान्यीकरण के साथ समस्या यह है कि वे हमेशा यह नहीं जानते कि यूएक्स डिजाइनरों (उपयोगकर्ता अनुभव डिजाइनरों) के काम से क्या उम्मीद की जाए, और इसलिए वे अक्सर भ्रमित होते हैं। "ठीक है"? क्यों नरक इस तत्व सक्रिय नहीं है है ", मुझे नहीं पता था कि क्या इस लिंक ..." पर एक क्लिक के बाद होने जा रहा था - UX डिजाइन परियोजनाओं में इसी तरह के कई टिप्पणियों में जलन पैदा ...

अवधारणाओं का एक मिश्रण, एक ब्लॉक आरेख और एक प्रोटोटाइप उसी के बराबर है जिसे वास्तुशिल्प डिजाइन माना जाता है और भवन के मुखौटे का स्केच समान है।
आप निश्चित रूप से, एक सुंदर तस्वीर के अंदर रहने की कोशिश कर सकते हैं। आप जानते हैं - अपनी सुंदरता के साथ यह किसी भी अन्य इमारत को ग्रहण करेगा। लेकिन आप एक वास्तुशिल्प परियोजना के बिना इसमें एक आरामदायक प्रवास पर भरोसा नहीं कर सकते हैं जो बताता है कि इसे कैसे बनाया जाए।
मुखौटा और वास्तुकला योजना के स्केच वास्तुकला में विभिन्न प्रकार के संचार हैं:
- वास्तुशिल्प डिजाइन एक विचार देता है कि इमारत कैसे बनाई जानी चाहिए;
- इमारत के मुखौटे का एक स्केच केवल यह दर्शाता है कि इमारत भविष्य के निवासियों को कैसे दिखाई देगी।

एक ही तुलना को आरेख, प्रोटोटाइप और लेआउट को अवरुद्ध करने के लिए लागू किया जा सकता है। वे अलग-अलग दिखते हैं और काम करते हैं, वे विभिन्न उद्देश्यों की पूर्ति करते हैं।
इमारत के मुखौटे का स्केच और वास्तुशिल्प डिजाइन वास्तव में बहुत कुछ है - वे दोनों अंतिम उत्पाद का प्रतिनिधित्व करते हैं - वास्तविक घर। प्रोटोटाइप, ब्लॉक आरेख और लेआउट के साथ एक ही - ये सभी दस्तावेज अंतिम उत्पाद की प्रस्तुति का एक रूप हैं।
मानो या न मानो, एक प्रोटोटाइप, एक ब्लॉक आरेख और एक लेआउट के बीच का अंतर हमेशा पहली चीजों में से एक था जिसे मैंने अपने यूएक्स डिजाइन टीम के सदस्यों को सिखाने की कोशिश की।
और यह वास्तव में महत्वपूर्ण है।
आइए समझने के लिए प्रत्येक दृष्टिकोण पर चर्चा करें कि क्या और कब उपयोग करना है।

ब्लॉक आरेख (वायरफ्रेम)

1. ब्लॉक आरेख क्या है?

ब्लॉक आरेख उत्पाद डिजाइन का एक कम-विस्तृत प्रतिनिधित्व है।
यह स्पष्ट रूप से दिखाना चाहिए:
- मुख्य सामग्री समूह (क्या?)
- सूचना संरचना (कहां?)
- उपयोगकर्ता और सिस्टम इंटरैक्शन का विवरण और मूल विज़ुअलाइज़ेशन (कैसे?)

एक ब्लॉक आरेख केवल ग्रे ब्लॉकों का अर्थहीन सेट नहीं है (हालांकि पहली नज़र में यह इस तरह लग सकता है)। उन्हें डिजाइन के आधार के रूप में माना जाना चाहिए और यह नहीं भूलना चाहिए कि योजना को अंतिम उत्पाद के सभी महत्वपूर्ण भागों को प्रतिबिंबित करना चाहिए।

"प्रस्तुति" यहां सबसे महत्वपूर्ण शब्दों में से एक है, जो आपको गति और प्रतिपादन की गुणवत्ता के संकेतकों का सही संतुलन खोजने में मदद करेगा। आप विवरण में नहीं जा सकते हैं, लेकिन दूसरी ओर, आपको अंतिम परियोजना के बारे में स्पष्ट दृष्टिकोण बनाना होगा, जो एक भी महत्वपूर्ण विवरण को याद नहीं करेगा। आप एक पूरे के रूप में और आपके साथ काम करने वाले लोगों (डेवलपर, डिज़ाइनर, कॉपीराइटर, प्रोजेक्ट मैनेजर - इन सभी को उच्च-गुणवत्ता वाली योजनाओं की आवश्यकता है) को दिशा देते हैं। वास्तव में, आप शहर का नक्शा बना रहे हैं। नक्शे पर दिखाई गई प्रत्येक सड़क बहुत सरल है। यदि आप मानचित्र को देखते हैं तो आप शहर की महानता को महसूस कर सकते हैं, लेकिन आप इसकी सुंदरता को महसूस नहीं कर सकते।
ब्लॉक आरेख को जल्दी से बनाया जाना चाहिए, और अधिकांश समय टीम के सदस्यों के साथ संवाद करने और विवरण के माध्यम से सोचने में खर्च किया जाना चाहिए। लेआउट का निर्माण बहुत तेज होना चाहिए।
विज़ुअलाइज़ेशन साफ-सुथरा होना चाहिए, लेकिन बहुत सरल। ब्लैक-ग्रे-व्हाइट गामा विशिष्ट है (कुछ मामलों में, आप लिंक इंगित करने के लिए नीला जोड़ सकते हैं)।
यदि किसी चीज़ में बहुत अधिक समय लगता है (उदाहरण के लिए, छवि अपलोड बटन के लिए एक आइकन का चयन करना), तो आपको इसे सरल रूप में प्रस्तुत करना होगा। एक आयत के रूप में इसे दो पार लाइनों के साथ आयताकार के रूप में बदलने की कोशिश करें और उचित विवरण जोड़ें।
हम यह विश्वास करने में इच्छुक हैं कि ब्लॉक आरेख वांछित परिणाम की पूरी तस्वीर नहीं देता है।
याद रखें - एक अच्छी तरह से बनाई गई योजना एक साफ डिजाइन का आधार है और पूरी टीम के लिए काम की दिशा निर्धारित करती है।

2. जब एक ब्लॉक आरेख का उपयोग किया जाता है।

ब्लॉक आरेख का उपयोग आमतौर पर परियोजना प्रलेखन के रूप में किया जाता है। चूंकि यह स्थिर और प्रदर्शित करता है एक विशेष समय के साथ बातचीत के लिए यूजर इंटरफेस है, सर्किट एक विवरण (- जटिल तकनीकी दस्तावेज करने के लिए बातचीत समझा लघु नोट से) के साथ होना चाहिए।
हालांकि, योजनाओं का उपयोग कम औपचारिक तरीके से किया जा सकता है। उनकी सादगी के कारण, वे टीम के सदस्यों की बातचीत में सुधार करने के लिए सेवा कर सकते हैं। यदि डेवलपर्स पूछते हैं कि यह या उस तंत्र को कैसे बनाया जाए, तो उनके लिए उत्तर एक त्वरित रूप से निर्मित ब्लॉक आरेख हो सकता है।

ब्लॉक आरेख का उपयोग प्रयोज्य परीक्षण के लिए लगभग कभी नहीं किया जाता है, हालांकि वे प्रारंभिक अवस्था में प्रतिक्रिया एकत्र करने में मदद कर सकते हैं। वे उन अध्ययनों के लिए उपयुक्त नहीं हैं जिनमें पद्धतिगत शुद्धता महत्वपूर्ण है। और कार्य की त्वरित समझ प्राप्त करने की कोशिश करने के लिए - पूरी तरह से।
संपूर्ण विकास प्रक्रिया के संदर्भ में ब्लॉकचेट्स आश्चर्यजनक रूप से कुशल हो सकते हैं। और, हालांकि हाल के वर्षों में उन्हें कुछ नकारात्मक समीक्षा मिली हैं, ब्लॉक आरेख अभी भी कई परियोजनाओं का एक अभिन्न अंग हैं।

प्रोटोटाइप (प्रोटोटाइप)

1. एक प्रोटोटाइप क्या है?

एक प्रोटोटाइप (अक्सर एक ब्लॉक आरेख के साथ भ्रमित) अंतिम उत्पाद का एक मध्यम या अत्यधिक विस्तृत प्रतिनिधित्व है जो उपयोगकर्ता की बातचीत की नकल करता है।

प्रोटोटाइप का उपयोग इसके लिए किया जाता है:
- उपयोगकर्ताओं के साथ बातचीत के मुख्य तरीकों का प्रतिबिंब;
- तैयार उत्पाद के रूप में उपयोगकर्ता के साथ विकसित प्रणाली की बातचीत का परीक्षण करना।
एक प्रोटोटाइप उपयोगकर्ता और कार्यक्रम के बीच अंतिम इंटरैक्शन की नकल है। यह अंतिम उत्पाद के समान नहीं लग सकता है, लेकिन पर्याप्त रूप से विस्तृत होना चाहिए।

विशेष रूप से अंतिम उत्पाद के साथ प्रोटोटाइप की समानता पर विशेष ध्यान दिया जाना चाहिए। इंटरफ़ेस आमतौर पर सॉफ़्टवेयर भाग से निकटता से जुड़ा होता है, इसलिए प्रोटोटाइप अक्सर लागत को कम करता है और विकास चक्र को गति देता है।

2. प्रोटोटाइप का उपयोग कब करें?

प्रयोज्य परीक्षण के दौरान प्रोटोटाइप की पूरी क्षमता का पता चलता है। उपयोगकर्ता के साथ सिस्टम के इंटरैक्शन का विस्तृत मॉडलिंग विकास शुरू होने से पहले ही इंटरफ़ेस की सुविधा को सत्यापित करना संभव बनाता है।
आमतौर पर, एक प्रोटोटाइप तैयार उत्पाद का "उचित" प्रदर्शन नहीं होता है। दूसरी ओर, प्रोटोटाइप परियोजना के प्रलेखन का सबसे आकर्षक रूप है, जो कार्य को संप्रेषित करने के लिए एक सुलभ रूप में अनुमति देता है।
याद रखें कि प्रोटोटाइप एक बहुत महंगी और समय लेने वाली गतिविधि है। मैं आपको ऐसे प्रोटोटाइप बनाने की सलाह दूंगा जिनका उपयोग विकास में किया जा सके (हां, इसका मतलब है कि आपको HTML, CSS कोड का हिस्सा लिखना होगा)। यह अपेक्षाकृत सरल परियोजनाओं में विशेष रूप से प्रभावी है।
यदि सब कुछ सही ढंग से किया जाता है, तो प्रयोज्य परीक्षण के संयोजन में, प्रोटोटाइप अच्छे परिणाम दे सकता है।

लेआउट (mockup)

1. लेआउट क्या है?

लेआउट एक मध्यम या अत्यधिक विस्तृत स्थिर डिज़ाइन डिज़ाइन है। बहुत बार, लेआउट भागों या पूरी परियोजना का अंतिम डिजाइन होता है।
गुणात्मक रूप से निर्मित लेआउट:
- जानकारी की संरचना को स्थानांतरित करता है, सामग्री की कल्पना करता है और सांख्यिकीय छवियों के रूप में बुनियादी कार्यक्षमता का प्रदर्शन करता है;
- लोगों को यह समझने की अनुमति देता है कि अंतिम उत्पाद कैसा दिखेगा।
कुछ कंपनियों के नाम ( gomockingbird.com , mockupbuilder.com ) के कारण लेआउट अक्सर ब्लॉक आरेखों के साथ भ्रमित होते हैं।

2. लेआउट का उपयोग कब करें।

यदि आप प्रारंभिक अवस्था में ग्राहकों के साथ परियोजना का समन्वय करना चाहते हैं तो लेआउट बनाना विशेष रूप से उपयोगी है। अधिक विस्तार के लिए धन्यवाद, लेआउट गलतफहमी और नकारात्मकता का कारण नहीं होगा, जैसा कि संरचनात्मक योजनाओं के मामले में हो सकता है। और उनके निर्माण में एक प्रोटोटाइप बनाने की तुलना में बहुत कम समय लगता है। लेआउट अच्छी प्रतिक्रिया देते हैं, उनका उपयोग तकनीकी दस्तावेज तैयार करने में भी किया जा सकता है।

परिणाम क्या है?

कहाँ से शुरू करें?

डिज़ाइन दृष्टिकोणों में से किसी एक को चुनने से पहले, आपको निम्न करने की आवश्यकता है:
- उन समस्याओं की पहचान करें जिन्हें आप हल करने की कोशिश कर रहे हैं;
- लक्षित दर्शकों से परिचित हों;
- इस क्षेत्र में प्रतियोगियों की उपलब्धियों को देखें
- सामान्य उत्पाद आवश्यकताओं को स्थापित करना

यह न्यूनतम है। अब विचार करें कि आपके लिए कौन से परिणाम सबसे उपयुक्त होंगे। अपने उत्पाद और टीम पर विचार करें। आप सभी के लिए क्या बेहतर होगा? औपचारिक प्रलेखन, या सहयोग, चर्चा के साथ अनौपचारिक ड्राफ्ट? क्या आपके पास पूरी तरह से प्रयोज्य परीक्षण के लिए समय और पैसा है, या क्या आप एक स्थानीय कैफे में कुछ फ्रीहैंड स्केच बनाने जा रहे हैं?
आपके पास क्या कौशल है? क्या आप कोड लिख सकते हैं?
एक पूरे के रूप में अपने आप को और पूरी टीम को देखने के बाद, आप आसानी से आपके लिए आवश्यक विधि निर्धारित कर सकते हैं।
आप निश्चित रूप से, उन सभी का लाभ उठा सकते हैं और ... ज्यादातर मामलों में, आप सफल होंगे! यह कदम उठाने से डरो मत। प्रत्येक विधि के अपने फायदे हैं, और यदि सब कुछ सही ढंग से किया जाता है, तो आपको एक शानदार डिजाइन मिलेगा।