Mockups: कोडिंग बनाम ड्राइंग?


9

यह वेब डिज़ाइन के बारे में नहीं है, लेकिन सामान्य रूप से इंटरफ़ेस डिज़ाइन के बारे में है। इंटरफ़ेस मॉकअप को कोड करना बेहतर है या उन्हें एक ग्राफिक्स प्रोग्राम में "ड्रा" करें, जैसे कि जीआईएमपी, फोटोशॉप, आदि?


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

1
यह पूरी तरह से परियोजना पर निर्भर है। कोई सार्वभौमिक 'सर्वश्रेष्ठ' उत्तर नहीं है।
DA01

जवाबों:


14

अपने आप से ये सवाल पूछें:

  • कितने यूआई लेआउट / विकल्प आप 30 मिनट में कोडिंग द्वारा खोज सकते हैं? आप स्केचिंग करके कितने का पता लगा सकते हैं?

  • कितनी बार आपको यूआई डिज़ाइन मिलता है जो पहले ही प्रयास में बिल्कुल सही है? यदि बहुत बार नहीं, तो स्केच बनाम कोडित मॉकअप को बदलना कितना आसान / आसान है?

  • क्या आप तुरंत उसके हेक्स / आरजीबी कोड (न केवल एक बॉलपार्क अनुमान, बल्कि सटीक छाया / रंग) को देखकर एक रंग की पहचान कर सकते हैं? जब आप अपने दिमाग में रंग डालते हैं, तो क्या आप तुरंत उस हेक्स का अनुवाद कर सकते हैं? हेक्स कोड बनाम वास्तविक रंग बीनने वाले का उपयोग करके आप कितनी तेजी से रंग योजना चुन सकते हैं?

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

इसी तरह, यदि आप वास्तव में अपने यूआई को डिजाइन किए बिना कोड के लिए सीधे कूदते हैं , तो परिणाम बहुत सुंदर नहीं होंगे, यदि केवल इसलिए कि यह नेत्रहीन कोडिंग द्वारा एक अच्छे डिजाइन को पूर्ण करने के लिए अव्यावहारिक है।


एक WYSIWYG कोड संपादक का उपयोग करने के बारे में ओपी टैलिंक हो सकता है, इसके साथ आप रंग ले सकते हैं या वस्तुओं को "आकर्षित" भी कर सकते हैं ...
jackJoe

2
दरअसल, पहले यूआई डिजाइन किए बिना कोडिंग काफी मान्य तकनीक है। बेशक, अगर "कोडिंग" का अर्थ यूआई या यूएक्स पार्ट्स नहीं है :)। अधिकांश API और लाइब्रेरी वास्तव में UI को ध्यान में रखे बिना डिज़ाइन किए गए हैं - जो कि केवल अव्यावहारिक होगा।
thebodzio

1
@ ठीक है, आप एक झरना विधि पिच कर रहे हैं। जो ठीक हो सकता है, लेकिन इन दिनों का चलन चुस्त है, जिसमें यह बहुत संभावना है कि आप पहले दिन से कोड में काम कर रहे हैं।
DA01

@ DA01: आप पहले दिन से कोड पर काम कर रहे हैं, लेकिन आप अभी भी एक टॉप-डाउन कार्यप्रणाली लागू कर रहे हैं। फुर्तीली में ऐसा कुछ भी नहीं है जो कहता है कि आप अपने डेटा आर्किटेक्चर की योजना नहीं बना सकते हैं या कोडिंग करने से पहले यूआई-पहले को परिभाषित कर सकते हैं (जो मुझे लगता है कि ज्यादातर चुस्त फर्म यूएमएल, वर्ग आरेख, आदि पर पसंद करते हैं)।
लेजे मेजेस्टे

2
@thebodzio: हां, निश्चित रूप से, यह चिंता का अलगाव है। लेकिन मैं बैकएंड को कोड करने की बात नहीं कर रहा हूं। जब मैं प्रश्न के डिजाइनिंग भाग के संदर्भ में कोडिंग कहता हूं (न कि प्रोग्रामिंग सादृश्य मैं बिंदु का वर्णन करता था - मुझे पता है, थोड़ा भ्रमित), मेरा मतलब है मॉकअप (सीएसएस + एचटीएमएल या आपकी यूआई भाषा जो भी हो सकती है कोडिंग )।
लेजे मेजेस्टे

5

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

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


2
"और आप परिचित हैं और" कोड "स्तर पर काम करने के आदी हैं -> यह महत्वपूर्ण है कि यूआई / यूएक्स टीम कोड स्तर पर काम कर सकती है। प्रत्येक डिज़ाइनर को कोडर होना आवश्यक नहीं है, लेकिन टीम को वे सब कुछ बनाने में सक्षम होना चाहिए जो वे डिज़ाइन करते हैं और इंजीनियरिंग को दृश्य डिजाइन के रूप में समझते हैं।
DA01

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

1
मैं 'होल्ड यू बैक' तर्क को बहुत सुनता हूं, लेकिन यह केवल उन दृश्य डिजाइनरों से आता है जो प्रस्तुति परत कोड सीखने के प्रति हठी होते हैं। ये लोग फ्लैश में सब कुछ करने की ओर भी प्रवृत्त होते हैं। :) मुझे यह सुझाव देना पसंद है कि यह प्रिंट डिजाइन से अलग नहीं है। यह जानते हुए कि कैसे मुद्रण कार्य प्रिंट डिजाइनर के रूप में 'आपको वापस पकड़ नहीं पाता' है। बल्कि, यह आपको उन फ़ाइलों को बनाने से रोकता है जो RIP को चोक कर देंगी या प्रिंटर को 300% इंक कवरेज के लिए आप पर चिल्लाएगी। यह सिर्फ माध्यम और उससे जुड़ी बाधाओं को समझने के बारे में है।
DA01

1
WYSIWYG 'विज़ुअल थिंकिंग' की सुविधा के लिए नहीं है। यह उन लोगों को देने के लिए है जो कुछ लंगड़ा साथ नहीं सीखना चाहते हैं। ;) बाधाओं के लिए, वे माध्यम को परिभाषित करते हैं। एक वास्तुकार जो शानदार तस्वीरें खींच सकता है, लेकिन यह समझ नहीं पाता है कि लोड और स्पैन की मूल बातें बहुत हद तक वापस रखी जाती हैं ... जैसा कि वे आकर्षित करते हैं वास्तव में कुछ भी नहीं बनाया जा सकता है।
1901 में DA01

1
(और मेरी बहुत सी राय UX टीमों के साथ या तो काम करने के लिए बनाई गई है, जिनके बारे में कुछ भी पता नहीं है कि वे कैसे कुछ भी बना सकते हैं। वे ज्यादातर समय नवाचार नहीं कर रहे हैं ... बल्कि केवल आधे-विचार को डिजाइन करते हैं। समाधान जो कार्यान्वयन, समयरेखा, उपयोगकर्ताओं या बजट के संदर्भ में व्यावहारिक नहीं हैं [जो कि सभी अतिरिक्त बाधाएं हैं जो 'दीवारें' होने के बजाय डिजाइन समाधान को परिभाषित करने में मदद करती हैं]) PS: अच्छी चर्चा!
डीए 01

3

UI डिज़ाइन के लिए मेरे पास विभिन्न उद्देश्यों के साथ तीन चरण हैं:

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

व्हाइटबोर्ड वायरफ्रेम की तस्वीर

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

  2. (३!) लागू करना। अंत में, आप इस बात को लागू करते हैं और इसे इस तरह से करने का लक्ष्य रखते हैं जिससे आप जल्दी और अक्सर प्रतिक्रिया प्राप्त कर सकें।

परियोजना चक्र के इन तीन भागों में अलग-अलग उद्देश्य हैं, इसलिए यदि यह एक बड़ी परियोजना है, तो यह प्रत्येक चरण में नौकरी के लिए सबसे उपयुक्त उपकरण का उपयोग करने के लिए समझ में आता है।


2

यह प्रश्न थोड़ा अस्पष्ट है और, जैसे कि, उत्तर हैं।

टीमों के रूप में, शीर्ष पर, परियोजनाओं में बेतहाशा भिन्नता होगी।

उन्होंने कहा, कोई 'सर्वश्रेष्ठ' नहीं है। यह एक कार्यप्रवाह में सभी उपकरणों का उपयोग करने के बारे में है जो आपके और आपकी टीम के लिए सबसे अधिक समझ में आता है।

आम तौर पर बोल रहा हूं, मैं कहूंगा कि यह उस प्रकार का वर्कफ़्लो है जिसके लिए आपको लक्ष्य बनाना चाहिए:

  1. स्केच। पेंसिल + कागज। व्हाइटबोर्ड। दोहराएं। टीम के कई सदस्यों के साथ काम करें जितना आप कर सकते हैं।
  2. लो-फाई मॉक-अप्स। PSD हो सकता है, विज़ियो हो सकता है। कागज हो सकता है। उपयोगकर्ता इनका परीक्षण करते हैं।
  3. प्रोटोटाइप बनाने के लिए जाओ। यह वह जगह है जहाँ आप काम करने वाले कोड में जितना करना शुरू कर सकते हैं करना चाहते हैं। अपनी आवश्यकता के अनुसार फ़ोटोशॉप में कूदें और जितनी जल्दी हो सके सामान बाहर से कोड में प्राप्त करें। उपयोगकर्ता परीक्षण / पुनरावृति जारी रखें।

0

मेरे लिए जो काम करता है वह एक प्रोग्राम का उपयोग करके मॉकअप बनाना है जो पिक्सेल-परफेक्ट लेआउट नहीं बनाने पर जोर देता है । मेरे लिए वह बालसामी मॉकअप है, जिसे आप http://www.balsamiq.com/products/mockups पर देख सकते हैं

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