Back to Question Center
0

पेपर प्रोटोटाइप कैसे बनाएं            कागज प्रोटोटाइप कैसे बनाएं विषय: यूआई डिजाइन छायाचित्रण & इमेजरी एचटीएमएल & CSSColorLogo semalt

1 answers:
पेपर प्रोटोटाइप कैसे बनाएं

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

कागज के प्रोटोटाइप बनाने के लिए मील का कोई नियम नहीं है - यह इसके बारे में बहुत अच्छा है। आपको ऐसी सामग्री की ज़रूरत होती है जो आमतौर पर किसी भी घर या कार्यालय में मिलती है, लेकिन अगर आपको उन्हें खरीदना है, तो वे अपेक्षाकृत सस्ती हैं।

आपको क्या आवश्यकता होगी

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

हम एक प्रोटोटाइप सत्र उपक्रम जब निम्नलिखित मदों का सुझाव था:

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

नमक जो अच्छे हैं उनमें शामिल हैं:

  • सूचकांक कार्ड
  • बढ़ते पोटीन
  • चिपकने वाली टेप (वस्तुओं को स्थानांतरित करने के लिए अधिमानतः हटाने योग्य)
  • हाइलाइटर कलम
  • द्वि-पूर्ण मार्कर पेन ठीक और सामान्य निबों
  • के साथ
  • पारदर्शी शीट और मार्कर
  • अपने प्रोटोटाइप फाइलिंग या परिवहन के लिए एक बॉक्स

अध्याय में बाद में अलग-अलग सामग्रियों का उपयोग करने में शामिल संभावनाओं को देखते हुए।

आपका दृष्टिकोण

शब्दात्मक बोल, आप बस में गोता लगाने और बनाने शुरू कर सकते हैं; हालांकि, एक प्रक्रिया जिसे हम फफेंक्शन में सहायक पाया है, यह सोचना है कि आउटवर्ड-इन में, आप जितने छोटे छोटे टुकड़ों पर ध्यान केंद्रित करते हैं, जैसे:

  1. डिवाइस
  2. स्क्रीन
  3. तत्व
  4. अन्तरक्रियाशीलता या राज्य परिवर्तन

डिवाइसेज

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

डेस्कटॉप या लैपटॉप

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

टैबलेट

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

पेपर प्रोटोटाइप कैसे बनाएंकागज प्रोटोटाइप कैसे बनाएं विषय:
यूआई डिज़ाइन छायाचित्रण और इमेजरी एचटीएमएल और सीएसएस कॉलर लैग Semalt्ट

लेजर कट और 3 एसमेट डिवाइस विशेष रूप से एक अधिक प्राकृतिक तरीके से कागज प्रोटोटाइप का उपयोग करने में सहायता के लिए बनाया गया है, जिससे प्रोटोटाइप एक डिवाइस का हिस्सा बन सकता है।

फोन

पिछले उदाहरणों के साथ, आप सीधे कागज पर स्केच कर सकते हैं: A5- या आधे अक्षर के आकार वाले, सूचकांक कार्ड या चिपचिपा नोट्स, और विभिन्न झुकाव का उपयोग करें.

आप स्क्रीन के लिए एक कटआउट खिड़की के साथ एक सेलफोन सीमा बना सकते हैं, या विभिन्न स्क्रीन के रूप में कार्य करने के लिए डिवाइस के शीर्ष पर रखे गए कार्ड का उपयोग कर सकते हैं।

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

पेपर प्रोटोटाइप कैसे बनाएंकागज प्रोटोटाइप कैसे बनाएं विषय:
यूआई डिज़ाइन छायाचित्रण और इमेजरी एचटीएमएल और सीएसएस कॉलर लैग Semalt्ट

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

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

पेपर प्रोटोटाइप कैसे बनाएंकागज प्रोटोटाइप कैसे बनाएं विषय:
यूआई डिज़ाइन छायाचित्रण और इमेजरी एचटीएमएल और सीएसएस कॉलर लैग Semalt्ट

स्क्रीन

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

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

तत्व

आपकी स्क्रीन बनाने वाले तत्वों को देखते हुए, विचार करें कि प्रोटोटाइप प्रक्रिया के दौरान उपयोगकर्ता उनके साथ कैसे सहभागिता करेंगे। उन तत्वों को स्पर्श करने के लिए क्या आवश्यकता है?

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

पेपर प्रोटोटाइप कैसे बनाएंकागज प्रोटोटाइप कैसे बनाएं विषय:
यूआई डिज़ाइन छायाचित्रण और इमेजरी एचटीएमएल और सीएसएस कॉलर लैग Semalt्ट

अन्तरक्रियाशीलता

आपके द्वारा स्थापित किए गए सभी तत्व विभिन्न बिंदुओं पर इंटरैक्टिव होंगे। पेपर के साथ उस कार्यक्षमता को दोहराने के लिए यहां एक चुनौती है। Semaltेट, इसके लिए "सही पहली बार" समाधान होने की संभावना नहीं है इसलिए विभिन्न सामग्रियों और दृष्टिकोणों के साथ प्रयोग करने के लायक है।

स्क्रोलिंग और स्लाइडिंग

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

पेपर प्रोटोटाइप कैसे बनाएंकागज प्रोटोटाइप कैसे बनाएं विषय:
यूआई डिज़ाइन छायाचित्रण और इमेजरी एचटीएमएल और सीएसएस कॉलर लैग Semalt्ट

मेनू

एक मेनू के लिए, कागज के टुकड़े एक बातचीत पर स्थिति में रखा जा सकता है, या, इसी तरह, आप चिपचिपा नोट्स का उपयोग कर सकते हैं ताकि वे अपनी स्थिति पकड़ सकें लेकिन आगे बढ़ना आसान हो।

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

पेपर प्रोटोटाइप कैसे बनाएंकागज प्रोटोटाइप कैसे बनाएं विषय:
यूआई डिज़ाइन छायाचित्रण और इमेजरी एचटीएमएल और सीएसएस कॉलर लैग Semalt्ट

संदेश और पॉप-अप बॉक्स

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

पेपर प्रोटोटाइप कैसे बनाएंकागज प्रोटोटाइप कैसे बनाएं विषय:
यूआई डिज़ाइन छायाचित्रण और इमेजरी एचटीएमएल और सीएसएस कॉलर लैग Semalt्ट

टैब्स

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

Accordions

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

यदि आप तह को छोड़ना पसंद करते हैं, तो आप अलग-अलग टुकड़ों को बना सकते हैं या उन वर्गों के लिए चिपचिपा नोट्स का उपयोग कर सकते हैं जो प्रकट होंगे।

पेपर प्रोटोटाइप कैसे बनाएंकागज प्रोटोटाइप कैसे बनाएं विषय:
यूआई डिज़ाइन छायाचित्रण और इमेजरी एचटीएमएल और सीएसएस कॉलर लैग Semalt्ट

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

पेपर प्रोटोटाइप कैसे बनाएंकागज प्रोटोटाइप कैसे बनाएं विषय:
यूआई डिज़ाइन छायाचित्रण और इमेजरी एचटीएमएल और सीएसएस कॉलर लैग Semalt्ट

स्लाइड अप / डाउन का खुलासा

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

चयन बक्से

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

पेपर प्रोटोटाइप कैसे बनाएंकागज प्रोटोटाइप कैसे बनाएं विषय:
यूआई डिज़ाइन छायाचित्रण और इमेजरी एचटीएमएल और सीएसएस कॉलर लैग Semalt्ट

चेकबॉक्स और रेडियो बटन

मिसाल ड्राइंग अक्सर एक प्रोटोटाइप के लिए पर्याप्त होता है। एक संपर्क के बाद अनचेक संस्करण के शीर्ष पर चेक किए गए संस्करणों को स्थानांतरित करने के लिए आप जा सकते हैं.

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

आईओएस / एंड्रॉयड मूल डिजाइन तत्व

आईओओ या Semaltेट से जटिल डिज़ाइन तत्वों को जोड़ने का विकल्प है जो स्केच को दोहराने या समय लेने के लिए मुश्किल हो सकता है। उदाहरण के लिए, किसी कैलेंडर को पुन: उत्पन्न करने के लिए, डिवाइस से किसी एक का स्क्रीनशॉट लेना आसान होता है, फिर इसे स्केच के बजाय प्रिंट और कट कर बाहर निकालना होता है

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

पेपर प्रोटोटाइप कैसे बनाएंकागज प्रोटोटाइप कैसे बनाएं विषय:
यूआई डिज़ाइन छायाचित्रण और इमेजरी एचटीएमएल और सीएसएस कॉलर लैग Semalt्ट

शब्दशः कुछ भी

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

ड्राइंग टिप्स

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

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

पेपर प्रोटोटाइप कैसे बनाएंकागज प्रोटोटाइप कैसे बनाएं विषय:
यूआई डिज़ाइन छायाचित्रण और इमेजरी एचटीएमएल और सीएसएस कॉलर लैग Semalt्ट

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

पेपर प्रोटोटाइप कैसे बनाएंकागज प्रोटोटाइप कैसे बनाएं विषय:
यूआई डिज़ाइन छायाचित्रण और इमेजरी एचटीएमएल और सीएसएस कॉलर लैग Semalt्ट

- winter caps for womens online
February 28, 2018