मुझे लो-फाई (गैर-संवादात्मक) UI प्रोटोटाइप कैसे बनाना चाहिए?


10

मैं वर्तमान में कुछ बुनियादी प्रोटोटाइप को फेंकने पर काम कर रहा हूं, आंशिक रूप से आवश्यकताओं को इकट्ठा करने के लिए और अंतिम यूआई को डिजाइन करने के लिए।

फिलहाल मैं पोस्ट-इट नोट्स का उपयोग करके स्क्रीन बनाने की कोशिश कर रहा हूं, जानकारी के लिए पीले नोट और कार्रवाई के लिए गुलाबी (बटन या मेनू)। यह विचार कि आप आसानी से जानकारी को स्थानांतरित कर सकते हैं, हटा सकते हैं और जोड़ सकते हैं। लेकिन मुझे यकीन है कि वहाँ और अधिक कुशल तरीके हैं।

डेवलपर्स के लिए कुशलतापूर्वक गैर-इंटरैक्टिव यूआई प्रोटोटाइप बनाने के लिए अनुशंसित तरीका क्या है?

और क्यों?


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


1
"काश, कुछ लोगों को अभी भी इस विचार के साथ समस्या हो रही है कि पहले एक को यह विचार करना चाहिए कि आवेदन क्या करना चाहिए" - वास्तव में एक संवाद संपादक उपयोगकर्ता इंटरफ़ेस को प्रोटोटाइप करने का सबसे तेज़ तरीका हो सकता है। यह हमेशा आदर्श नहीं होता है, लेकिन जब तक आप पहले कुछ संस्करणों को फेंकने के लिए तैयार नहीं होते हैं और आपका ग्राहक जानता है कि स्क्रीन लेआउट का मतलब यह नहीं है कि आप 99% हो चुके हैं ...
स्टीव 314

1
हाय @ एमएलके, मैं देख रहा हूं कि आपका प्रश्न बंद हो गया क्योंकि यह एक सर्वेक्षण था, इसलिए मैंने इस प्रश्न को एक सर्वेक्षण से बदलने के लिए संपादित किया, जिसमें पूछा गया कि हर कोई एक ठोस एसई के लिए अपने प्रोटोटाइप को कैसे करता है, इस बारे में कि कुशलतापूर्वक गैर-संवादात्मक UI के लिए कैसे कुशल है? । यदि मैंने इसे बहुत बदल दिया है, तो इसे आगे संपादित करने या परिवर्तनों को वापस लेने के लिए स्वतंत्र महसूस करें । मैंने इसे फिर से खोलने के लिए मतदान किया है, लेकिन इसे फिर से खोलने के लिए समुदाय से कुछ अन्य वोटों की आवश्यकता है :)
राहेल

जवाबों:


14

मुझे व्हाइटबोर्ड पसंद है।

यह पूरी तरह से फिर से परिभाषित किए बिना निर्णय लेना आसान बनाता है। अन्य (पास) डेवलपर्स के साथ साझा करना आसान है। स्टिकी-नोट्स या अन्य रंगों का उपयोग करके एनोटेट करना आसान है।


1
+1। मार्कर का रंग प्राप्त करें और फिर () या दो (या अधिक !!) को लटकाने की कोशिश करें। जब आप चर्चा में गियर स्विच करते हैं (कहते हैं, जब आप इस बारे में बात करने से स्विच करते हैं कि विगेट्स को कहां जाना चाहिए, इस बारे में बात करने के लिए कि उन्हें कैसे बातचीत करनी चाहिए, रंग बदलते हैं।) उन्हें ताज़ा रखें, ताकि लोग वास्तव में पढ़ सकें।
माइक क्लार्क

+1 के रूप में, यह लगभग बाल्सामीक के रूप में कल्पना नहीं करता है, लेकिन इससे अधिक स्वतंत्रता इसके लिए है - एक विजेट के लिए कोई खोज या उस कार्यक्रम द्वारा उपलब्ध होने तक सीमित नहीं है।
इज़्काता Iz

7

बाल्समीक मॉकअप आमतौर पर कॉल का पहला पोर्ट है, लगभग एक पेन और पेपर और पुन: प्रयोज्य के रूप में त्वरित रूप से।

साथ ही यदि आप चाहें तो कुछ हद तक अन्तरक्रियाशीलता जोड़ सकते हैं, उदाहरण के लिए पृष्ठों को एक साथ जोड़ना।

http://balsamiq.com/


5

पेंसिल प्रोजेक्ट एक फ़ायरफ़ॉक्स एडिन है जो अच्छा और सरल मॉकअप करता है।

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

ड्राइंग ऑपरेशन को सरल बनाने के लिए पेंसिल में लोकप्रिय ड्रॉइंग फीचर्स भी लागू किए गए हैं ...


5

मैं एमएस पेंट और विजुअल स्टूडियो के संयोजन का उपयोग करता हूं। मैं वी.एस. का उपयोग उन सभी नियंत्रणों को खींचने / छोड़ने के लिए करता हूँ, जिन्हें मैं एक फॉर्म पर चाहता हूँ, फिर इसे एमएस पेंट में स्क्रीनशॉट करें जब तक कि वे मुझे पसंद न करें तब तक उन्हें पुनर्व्यवस्थित करें।

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

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

मैं अभी भी MSPaint या पेन / पेपर को मौके पर बाहर निकालता हूं, लेकिन यह आमतौर पर केवल तब होता है जब मैं अपने संदर्भ के लिए बुनियादी UI डिज़ाइन का स्केच कर रहा होता हूं, या यदि मैं क्लाइंट को पूर्ण स्क्रीन के लिए दो विकल्प प्रस्तुत करना चाहता हूं (उदा। "क्या आप बटन यहाँ या यहाँ चाहते हैं? " )


2

ऐसा लगता है कि आप अच्छे तरीकों का उपयोग कर रहे हैं, लेकिन आप प्रतिरोध में भाग रहे हैं ताकि लोग तेजी से प्रोटोटाइप की उपयोगिता को स्वीकार कर सकें। हर कोई कोड को प्यार करता है, लेकिन अगर आधे घंटे में, वे अभी भी JScrollBars के साथ लड़ रहे हैं और आपने 12 मॉकअप उत्पन्न किए हैं, तो वे समझ सकते हैं कि इन उपकरणों की ताकत तेजी से पुनरावृत्ति में है

कहा जा रहा है, विभिन्न लो-फाई दृष्टिकोण अलग-अलग ताकत है:

  • व्हाइटबोर्ड प्रोटोटाइप उपयोगी है क्योंकि कोई भी भाग ले सकता है और यह जमीनी विचारों में मदद करता है, लेकिन यह केवल एक चर्चा उपकरण है। यदि आप किसी डिज़ाइन पर पुनरावृति करने जा रहे हैं, तो केवल एक कदम आगे चाहते हैं, यदि केवल इसलिए कि पुराने मार्कर को मिटाना कठिन हो। ;)

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

  • बालसामी तेजी से पेपर प्रोटोटाइप बनाने के लिए एक शॉर्टकट है जो पुन: प्रयोज्य हैं। मैं स्क्रीनशॉट्स प्रिंट करता हूं और उन्हें पेपर प्रोटोटाइप के रूप में उपयोग करता हूं। मैं बैठकों के दौरान इसका उपयोग विचारों को मॉक करने में मदद करने के लिए भी करता हूं जैसा कि हमारे पास है - व्हाइटबोर्ड प्रोटोटाइप के समान। मैंने इसके लिए Visio और OmniGraffle का भी उपयोग किया है।

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

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


2

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

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


1

मैं पहले पेन और पेपर का उपयोग करता हूं, फिर कुछ त्वरित समय में यूआई को खींचने के बाद, मैं इसे 2 या 3 बार पावरपॉइंट में बनाने की कोशिश करता हूं। वास्तविक संपादक में आने से पहले 5 या 6 पुनरावृत्तियाँ होने से मुझे अयोग्य यूआई पर कटौती करने में मदद मिलती है (जैसे कि टेक्स्टबॉक्स एक्स पर आधारित सामग्री वाई उत्पन्न करना जब उपयोगकर्ता ने अभी तक एक्स नहीं देखा है)। मैं इसे तुरंत बेवकूफों से बाहर निकलने के एक अवसर के रूप में देखता हूं।


1

पेन और पेपर / व्हाइटबोर्ड, और आप Visio या कुछ समान का उपयोग भी कर सकते हैं (Visio सामान्य नियंत्रण के लिए UI टेम्पलेट के साथ आता है)। कभी-कभी मैं मौजूदा (समान) यूआई के शॉट लेता हूं जो हमारे पास है और पेंट.नेट जैसे पेंट प्रोग्राम का उपयोग करके उस पर नए यूआई को काटें और पेस्ट करें।


1

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

मैंने स्नेहा एक्सट डिज़ाइनर के साथ भी ऐसा ही करने की कोशिश की है, लेकिन एक्सट जेएस का लेआउट सिस्टम उपयोग करने के लिए कठिन है, और यह तेजी से विचारों को प्रसारित करने के लिए एक सुविधा की तुलना में अधिक बोझ की तरह लगा।


1

मैं हमेशा एक ही दृष्टिकोण का उपयोग नहीं करता हूं। मेरे द्वारा उपयोग की जाने वाली कुछ तकनीकें हैं (आवृत्ति के मोटे क्रम में):

  • व्हाइटबोर्ड (अंतःक्रियात्मक रूप से / चर्चा के लिए)

  • RAD- शैली GUI डिज़ाइनर (विजुअल स्टूडियो, नेटबीन्स, डेल्फी)

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

  • कागज और कलम / पेंसिल (आमतौर पर खुद के लिए बुद्धिशीलता के लिए)

  • स्टेटिक HTML / CSS / JS फाइल डिस्क पर

    • मुझे लगता है कि एक WYSIWYG डिजाइन एप्लिकेशन को यहां चोट नहीं पहुंचेगी, लेकिन मैं आमतौर पर कच्चे एचटीएमएल पर हैक करता हूं। मैं इनमें से बहुत कुछ नहीं करता, वैसे भी।

  • वेक्टर ड्राइंग टूल्स - इलस्ट्रेटर / इंकस्केप / विसिओ / पावरपॉइंट / इंप्रेशन

  • रेखापुंज ग्राफिक्स उपकरण - फोटोशॉप / जिम्प

  • ASCII कला ;-)

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.