Back to Question Center
0

पेपर प्रोटोटाइप कसे बनवायचे            पेपर प्रोटोटाइप कसे तयार करावे विषय: UI डिझाईन छायाचित्रण & प्रतिमाHTML आणि & CSSColorLogo मिमल

1 answers:
पेपर प्रोटोटाइप कसा बनवायचा

खालील आमच्या पुस्तकात एक लहान अर्क आहे, डिझाईन UX: प्रोटोटाइपिंग, डॅन गुडविन आणि बेन कोलमन यांनी लिहिलेले. हे प्रोटोटायिंगचे अंतिम मार्गदर्शक आहे. साइटपेव्हॉंट सेमीलेट सदस्य त्यांच्या सदस्यतेसह प्रवेश मिळवू शकतात किंवा आपण जगभरात स्टोअरमध्ये एक प्रत विकत घेऊ शकता - dominios chile.

कागदाचा नमुना करण्यासाठी नियमांसंबंधीचे कोणतेही नियम नाहीत - याबद्दल चांगले काय आहे. आपल्याला सामान्यत: कोणत्याही घरात किंवा कार्यालयात आढळणार्या साहित्याची आवश्यकता आहे, परंतु आपण त्यांना विकत घ्यावे लागल्यास, ते तुलनेने स्वस्त आहेत

आपल्याला आवश्यक असलेले

कमीतकमी आपल्याला कागदाची आणि पेनची आवश्यकता भासेल - प्रवेशासाठी हे कमी अडथळा या दृष्टिकोनाचे सर्वोत्तम पैलू आहे. अधिक जटिल आणि परस्परसंवादी प्रोटोटाइपसाठी, आपल्याला एक मोठे शस्त्रास्त्र आवश्यक आहे, आणि आपण कार्यशाळा चालवत असल्यास किंवा प्रोटोटीपिंग करत असल्यास, खालील आयटमची एक टूलकिट एकत्रित करणे ही एक चांगली कल्पना आहे

आम्ही एक प्रोटोटाइप सत्र उपक्रम करताना खालील आयटम सूचित इच्छित:

  • एक ग्रीड किंवा डॉट ग्रीडसह (पसंतीचे) कागद
  • चिकट नोट्स (त्याशिवाय घरी जाऊ नका!)
  • पेन्सिल
  • इरेज़र
  • भिंतींच्या बाजूने लावता येतो (विविध रंग आणि thicknesses मध्ये Sharpies आदर्श आहेत)
  • कात्री किंवा शिल्प चाकू
  • गोंद (शक्यतो पुन्हा वापरता येण्याजोगा)
  • (3 9)

    ज्यात नम्र आहेत ते समाविष्ट आहेत:

    • निर्देशांक कार्ड
    • माउंटिंग पोटीनी
    • चिकट टेप (सुमारे आयटम हलविण्यासाठी शक्यतो काढता)
    • हायिलर पेन
    • दुहेरी आणि सामान्य nibs सह दुहेरी-समाप्त मार्कर पेन
    • पारदर्शी पत्रके आणि मार्कर
    • आपल्या नमुना दाखल किंवा वाहतुकीसाठी एक बॉक्स
    • (3 9)

      अध्यायात नंतर वेगवेगळ्या साहित्य वापरण्यात सहभागी होण्याची संभाव्य शक्यता लक्षात ठेवा.

      आपला दृष्टीकोन

      सममूल्य बोलणे, आपण फक्त यात जा आणि बनविणे सुरू करू शकता; तथापि, आपण जास्तीत जास्त कामावर मदत केल्याची माहिती अशी आहे की आपण जास्तीत जास्त लहान तुकड्यांवर लक्ष केंद्रित करणे, जसे की:

      1. साधने
      2. पडदे
      3. घटक
      4. परस्पर क्रियाशीलता किंवा राज्य बदल

      डिव्हाइसेस

      आम्ही या उदाहरणासाठी कोणते आकार व्यूअर किंवा डिव्हाइस डिझाइन करत आहोत? कोणतीही उपलब्ध वापरकर्ता संशोधन हे कळवू शकते. समतुल्य डेटा दर्शवेल की एखादे विद्यमान दर्शक कोणते प्राधान्य देऊ शकतात. डिझाइन कामाचा एक ध्येय लहान-स्क्रीन डिव्हाइसेसवर सुधारित अनुभवाचा नमुना करण्यासाठी असू शकतो.

      डेस्कटॉप किंवा लॅपटॉप

      एक A4- किंवा यूएस पत्र आकाराच्या कागदाचा तुकडा येथे योग्य आहे, जेथे आपण डिव्हाइसची नक्कल करण्यासाठी वेगवेगळ्या ओर्तेशिप वापरू शकता, जसे की डेस्कटॉप किंवा लॅपटॉपसाठी लँडस्केप. आपल्याला अधिक वास्तववादी स्रोत हवे असल्यास, आपण एक ब्राउझर फ्रेम ग्राफिक प्रिंट करू शकता.

      टॅब्लेट

      ए 5- किंवा यूएस अर्ध-आकारातील आकाराचे पेपर पुरेसे असले पाहिजे, जरी आपण मोठ्या टॅब्लेटसाठी ऍपल आयपॅड प्रो (12 9 इंच) टॅबलेट तयार करत असाल, तर कदाचित आपल्याला A4 / Letter size . सेमॅट, आपण वापरकर्त्याला काय अपेक्षा करता त्यानुसार आपण एखादे अभिमुख निवडू शकता. आपण हे अधिक वास्तववादी बनवू इच्छित असल्यास, एक बनावट साधन तयार करणे एक पर्याय आहे. सर्वात लो-फाईचा दृष्टीकोन तो कार्डच्या एका टप्प्यावर काढणे आणि खाली दर्शविल्या प्रमाणे स्क्रीन असेल अशी एक छिद्र काढेल.

      पेपर प्रोटोटाइप कसे बनवायचेपेपर प्रोटोटाइप कसे तयार करावे विषय:
UI डिझाईनफोटोग्राफी आणि इमेजिरींग एचटीएमएल व सीएसएस कॉलर लॅगो मिमल

      अधिक स्वाभाविकपणे कागदाच्या प्रोटोटाइपचा वापर करण्यात मदत करण्यासाठी लेझर-कट आणि 3 उपग्रह उपकरण विशेषतः तयार केले गेले आहेत, ज्यामुळे प्रोटोटाइप एका साधनाचा भाग बनू शकतात.

      फोन

      मागील उदाहरणात सांगितल्याप्रमाणे, आपण कागदावर थेट स्केच करू शकता: A5- किंवा यूएस अर्ध-आकारातील आकार, निर्देशांक कार्डे, किंवा चिकट नोट्स, आणि भिन्न अभिमुखता वापरतात.

      स्क्रीनसाठी कटआउट विंडोसह सेलफोनची सीमा तयार करू शकता किंवा वेगळ्या स्क्रीनवर कार्य करण्यासाठी डिव्हाइसच्या शीर्षस्थानी असलेल्या कार्डांचा वापर करू शकता.

      नमूद केल्याप्रमाणे, उपलब्ध लेझर-कट आणि 3 स्मॉल डिव्हाइस मॉडेल देखील उपलब्ध आहेत. खालील आकृती लेझर-कट प्लाईवुड फोन मॉडेल दर्शविते जी आम्ही आमच्या कामात वापरतो.

      पेपर प्रोटोटाइप कसे बनवायचेपेपर प्रोटोटाइप कसे तयार करावे विषय:
UI डिझाईनफोटोग्राफी आणि इमेजिरींग एचटीएमएल व सीएसएस कॉलर लॅगो मिमल

      स्क्रोलिंग अनुकरण करण्यासाठी कागदाच्या तुकड्यांना जोडण्यासाठी एका चॅनेलसह मिमल किंवा कार्ड मॉडेल डिव्हायसेस देखील उपलब्ध आहेत. आपण अगदी सर्व कागदाच्या कागदावर सर्व स्क्रीन ठेवू शकता आणि त्यास नेव्हिगेशन अनुकरण करण्यासाठी भोवती फिरवू शकता.

      खाली दर्शविल्या प्रमाणे, टॅब्स किंवा नेव्हिगेशन एलिमेंट्स बनविणार्या रंगीत ठिपके असलेल्या पडद्याच्या दरम्यान झटक्यासाठी लहान आवर्त-बद्धीत नोटबुकचा वापर करणे. हे एक छान दृष्टीकोन आहे कारण हे लोक त्यांच्या मोबाईलचा वापर कसा करतात हे समजते: एका हातात ठेवलेला असतो आणि दुसरा संवाद साधण्यासाठी तो टॅप करतो.

      पेपर प्रोटोटाइप कसे बनवायचेपेपर प्रोटोटाइप कसे तयार करावे विषय:
UI डिझाईनफोटोग्राफी आणि इमेजिरींग एचटीएमएल व सीएसएस कॉलर लॅगो मिमल

      स्क्रीन

      आता आम्ही डिझाइन संवाद साधण्यासाठी कोणती पडदे आवश्यक आहेत हे स्पष्ट करू. प्रयोक्त्याने घेतलेल्या प्रवासात कोणती पावले उचलतील हे जाणून घेणे उपयुक्त ठरते. आम्ही वापरकर्त्याच्या प्रवासास, टास्क मॉडेल, साइटमॅप्स, माहिती आर्किटेक्चर किंवा कार्यात्मक विनिर्देश यांसारख्या विद्यमान कार्यांतून एक यादी विकसित करू शकतो. यातील काही गोष्टी अध्याय 2 चे स्त्रोत विभाग एकत्रित करण्यात आली आहेत, ज्यामध्ये आपल्याला रीफ्रेशरची आवश्यकता असल्यास आपण परत संदर्भ घेऊ शकता. आपण एकदा सूची तयार केली की, आपण प्रत्येक स्क्रीनसाठी कोणत्या घटकांची आवश्यकता असेल याचा विचार करणे प्रारंभ करू शकता

      आपल्याला स्क्रीन आकार माहित नसल्यास, किंवा आपण जे काही डिझाइन करत आहात त्याचे अपूर्ण चित्र असल्यास अधिक तपशीलाने जाण्यापूर्वी एखादे उत्पादन उच्च पातळीवर उपलब्ध करण्यासाठी कार्डवरील चरणांचे स्केचिंग उपयोगी असू शकते. आम्ही सुरुवात करावी अशी शिफारस करतो
      प्रत्येक स्क्रीनवरील वैयक्तिक संवादावर लक्ष केंद्रित करण्यात मदत करण्यासाठी लहान A5 किंवा अनुक्रमणिका कार्ड द्या; प्रत्येक स्क्रीनसाठी एका हेतूने लक्ष्य करणे प्रारंभ करण्याचा एक चांगला मार्ग आहे. आपण नंतर एका प्रक्रियेद्वारे विविध प्रवाहांवर प्रयोग करण्यासाठी ते टेबलवर लावू शकता.

      घटक

      आपली स्क्रीन बनवणार्या घटकांकडे पाहताना, प्रोटोटाइप प्रक्रियेदरम्यान वापरकर्ते त्यांच्याशी कसा व्यवहार करतील याचा विचार करा. ते घटक स्पर्श करतात तेव्हा काय घडते?

      काहिक प्रकरणांमध्ये, आपल्या सभोवतालच्या परस्परक्रियांवर आधारित फक्त एक खिडकी बदलत असतांना आपणास सातत्यपूर्ण संवाद होऊ शकतो. उजव्या हाताच्या स्तंभातील सामग्री बदलणारा डाव्या हाताच्या स्तंभातील एक साधा उदाहरण म्हणजे एक मेनू. डावीकडील समान कार्डासह हे दर्शविले जाऊ शकते आणि उजवीकडील परस्परसंयोजीच्या प्रत्येक सामग्रीसाठी स्वतंत्र कार्डे दर्शविली जाऊ शकतात, खाली दर्शविल्याप्रमाणे.

      पेपर प्रोटोटाइप कसे बनवायचेपेपर प्रोटोटाइप कसे तयार करावे विषय:
UI डिझाईनफोटोग्राफी आणि इमेजिरींग एचटीएमएल व सीएसएस कॉलर लॅगो मिमल

      परस्परक्रिया

      आपण स्थापित केलेले सर्व घटक विविध बिंदूंवर परस्परसंवादी असतील. कागदोपत्री असलेली कार्यक्षमता कशी बनवायची हे येथे एक आव्हान आहे. मिमल, याप्रकारे "योग्य प्रथमच" समाधान नसण्याची शक्यता आहे त्यामुळे वेगवेगळे साहित्य आणि दृष्टिकोनासह प्रयोग करणे आवश्यक आहे.

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

      आपण वापरलेला एक दृष्टिकोन स्लाइडिंग आणि स्क्रोलिंग घटक सक्षम करण्यासाठी स्क्रीनवरून भाग कापून आणि नंतर कागदाच्या पट्ट्या थ्रेड करणे आहे. एक 1-2 मि.मी. भोक पेपर घसरुन पळ काढण्यासाठी पुरेसा मोठा आहे आणि स्क्रोलिंगसाठी क्लियरेंसची योग्य मात्रा सक्षम करते. "खालील आकृती कागदाच्या उभ्या स्क्रोलिंग साधनाचे चित्रण करते.

      पेपर प्रोटोटाइप कसे बनवायचेपेपर प्रोटोटाइप कसे तयार करावे विषय:
UI डिझाईनफोटोग्राफी आणि इमेजिरींग एचटीएमएल व सीएसएस कॉलर लॅगो मिमल

      मेनू

      मेन्यूसाठी, कागदाच्या तुकड्यांना एका परस्परविरोधी स्थितीत स्थान दिले जाऊ शकते किंवा त्याचप्रमाणे, आपण स्टिकी नोट्स वापरु शकता जेणेकरून ते आपली स्थिती धारण करतील परंतु हलविण्यास सोपे आहे.

      आपण कटआउट डिव्हाइस वापरत असल्यास, मेनू कॅनवासमधून बाहेर किंवा नजरेसमोर ठेवला जाऊ शकतो, नंतर खाली नमूद केल्याप्रमाणे उघडकीस दिसून येता.

      पेपर प्रोटोटाइप कसे बनवायचेपेपर प्रोटोटाइप कसे तयार करावे विषय:
UI डिझाईनफोटोग्राफी आणि इमेजिरींग एचटीएमएल व सीएसएस कॉलर लॅगो मिमल

      संदेश आणि पॉप अप बॉक्स

      Semalt नोट्स संदेश, पॉपअप किंवा टूलटिपसाठी सुलभ आहेत कारण त्यास स्क्रीनवर ठेवता येतात आणि नंतर काही काळानंतर किंवा काही कालावधीनंतर काढले जाते. आपण त्यांना लहान आकारांमध्ये, अगदी बोलण्यात बबल आकार खरेदी करू शकता जे खाली दर्शवल्या प्रमाणे यासारखीच योग्य आहेत.

      पेपर प्रोटोटाइप कसे बनवायचेपेपर प्रोटोटाइप कसे तयार करावे विषय:
UI डिझाईनफोटोग्राफी आणि इमेजिरींग एचटीएमएल व सीएसएस कॉलर लॅगो मिमल

      टॅब्स

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

      Accordions

      आता थोडा ऑररामिमाची वेळ आहे पृष्ठावर दिसत असलेल्या प्रत्येक गोष्टीसह असोसिएशन सामग्री काढा शीर्षस्थानी मीटरल, अदॉर्डियन दुमडणे जेणेकरुन फक्त शीर्षके दृश्यमान असतील आणि ड्रॉवर सामग्री लपलेली असेल. नंतर, आपण एका शीर्षकावर टॅप करता तेव्हा आपण सामग्रीचा दुमडलेला भाग प्रकट करू शकता. खालील आकृती ही प्रक्रिया सादर करते.

      जर आपण गोलाकार वगळण्यास प्राधान्य देत असाल तर तुम्हास वैयक्तिक तुकडे मिळतील, किंवा प्रकट होणार्या विभागांसाठी चिकट नोट्स वापरा.

      पेपर प्रोटोटाइप कसे बनवायचेपेपर प्रोटोटाइप कसे तयार करावे विषय:
UI डिझाईनफोटोग्राफी आणि इमेजिरींग एचटीएमएल व सीएसएस कॉलर लॅगो मिमल

      सामान्य प्रतिसाद डिझाईन पॅटर्न हे मोठ्या स्क्रिनवरील टॅबसह एक लहान स्क्रिनवर एपॉर्डियन शैली मेनूमध्ये अदलाबदल करणे आहे. आपण खालील चित्रात दोन भिन्न मूल्ये म्हणून ही prototyped पाहू शकता.

      पेपर प्रोटोटाइप कसे बनवायचेपेपर प्रोटोटाइप कसे तयार करावे विषय:
UI डिझाईनफोटोग्राफी आणि इमेजिरींग एचटीएमएल व सीएसएस कॉलर लॅगो मिमल

      स्लाइड वर / खाली उघडते

      आम्ही आधीच संरक्षित केलेले तंत्र येथे नियोजित केले जाऊ शकते आपण कॅन्व्हास बंद सामग्री लपविण्यासाठी निवड करू शकता, किंवा कागदाच्या एका फांदीवरून पाहण्यासाठी त्यास स्लाइड करा. किंवा आपण सामग्री वेगळ्या कार्डवर ठेऊ शकता आणि त्यास आवश्यक असेल तेव्हा त्यास ठेवू शकता.

      बॉक्स निवडा

      खाली दिलेल्या नमुन्याप्रमाणे, आपण निवडलेल्या घटकांमध्ये दिसणार्या आयटमची चालण्यायोग्य यादी दर्शवण्यासाठी येथे नमुन्याच्या टिपा चांगल्या पद्धतीने कार्य करतात. वापरकर्ता पर्याय पाहण्यास सक्षम होईल आणि एक निवडा, कोणत्या वेळी आपण प्रोटोटाइपमधून सूची काढू शकता.

      पेपर प्रोटोटाइप कसे बनवायचेपेपर प्रोटोटाइप कसे तयार करावे विषय:
UI डिझाईनफोटोग्राफी आणि इमेजिरींग एचटीएमएल व सीएसएस कॉलर लॅगो मिमल

      चेकबॉक्स आणि रेडिओ बटणे

      साम्प्रॉड ड्रॉइंग हे बर्याचदा प्रोटोटाइपसाठी पुरेसे असते. एखादी क्रियाकलाप खालील अनचेक केलेल्या आवृत्तीच्या वर चेक केलेले आवृत्त्या ठेवणे शक्य आहे.

      तपशील मिळविण्याच्या फायद्यांविरूद्ध चाचणी परिदृष्यामध्ये आपल्याला हे घटक तयार करणे आणि कार्य करणे ही जटिलता तपासून घेणे आवश्यक आहे. हे खूप विचित्र बनवा आणि आपले प्रारुप चालू करणे कठीण होईल

      iOS / Android मूळ डिझाइन घटक

      iOS किंवा Semalt कडील जटिल डिझाइन घटक जोडण्याचा पर्याय आहे जो प्रतिलिपी करणे किंवा स्केच करण्यासाठी वेळ काढणे कठीण असू शकते. उदाहरणार्थ, एखादे कॅलेंडर पुनरुत्पादन करण्यासाठी, एखाद्या डिव्हाइसवरून स्क्रीनटिप काढणे सोपे आहे, नंतर ते स्केच करण्यापेक्षा त्याचे मुद्रण आणि कट करा.

      आपण याविषयी विस्तृत आणि एखादे डिव्हाइससाठी स्टॅन्सिल किंवा टूलकिट लायब्ररीची छपाई करू शकता, आपण असा विचार करावा की ही प्रक्रिया जलद होईल आणि डिझाइनची सुव्यवस्था देखील करणार नाही.

      पेपर प्रोटोटाइप कसे बनवायचेपेपर प्रोटोटाइप कसे तयार करावे विषय:
UI डिझाईनफोटोग्राफी आणि इमेजिरींग एचटीएमएल व सीएसएस कॉलर लॅगो मिमल

      शब्दशः काहीही

      वरील उदाहरण सामान्य डिझाइन घटक आहेत जे मानक वेबसाइट, टॅब्लेट किंवा फोनवर आढळतात, परंतु आपण यापूर्वी काय पाहिलेले आहे यावर मर्यादा घालण्याचे कोणतेही कारण नाही. नमूद केल्याप्रमाणे, कागदाच्या प्रोटोटायपिंगचा एक असा आहे की आपण एका डिजिटल माध्यमाच्या मर्यादांमुळे बाध्य नाही. आपण याची कल्पनाही करू शकत नसल्यास, आपण हे कदाचित पेपर आणि प्रोटोटाइपसह हे करू शकता.

      रेखांकन टिपा

      कागदाचा नमुना तयार करताना, आपल्याला आपले स्केचे तयार करण्यासाठी घटक काढणे आवश्यक आहे. काही परिस्थितींमध्ये, आपण सामग्री शब्दलेखन करणे किंवा विशेषत: आपण पृष्ठावर घालविलेल्या घटकांबद्दल विस्तृत माहिती नसण्याची आवश्यकता असू शकते. हे असे होऊ शकते कारण आपण एका विशिष्ट मॉड्यूलवर किंवा घटकांवर परस्परसंवाद लक्ष ठेवत आहात आणि इतर घटकांसह कोणतेही व्यत्यय टाळण्यास इच्छुक आहात.

      या परिस्थितीमध्ये, आपण सामान्य घटकांचे प्रतिनिधित्व करण्यासाठी एका रेखाचित्र लघुलिपीचा उपयोग करू शकता. खाली दर्शवल्याप्रमाणे, शीर्षके एका ओळीच्या ओळी, सरळ रेषा असलेल्या पॅरेग्राफ मजकूर आणि आपण त्या वायरफ्रेममध्ये पाहत असताना त्यांच्या ओळींमधील रेषा असलेल्या प्रतिमा बॉक्स असू शकतात.

      पेपर प्रोटोटाइप कसे बनवायचेपेपर प्रोटोटाइप कसे तयार करावे विषय:
UI डिझाईनफोटोग्राफी आणि इमेजिरींग एचटीएमएल व सीएसएस कॉलर लॅगो मिमल

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

      पेपर प्रोटोटाइप कसे बनवायचेपेपर प्रोटोटाइप कसे तयार करावे विषय:
UI डिझाईनफोटोग्राफी आणि इमेजिरींग एचटीएमएल व सीएसएस कॉलर लॅगो मिमल

      बेन हे अमेरिकेच्या दक्षिण-पश्चिम मधील डिझाइन एजन्सी असलेल्या फफिकेशनमध्ये सह-संस्थापक आणि व्यवस्थापकीय संचालक आहेत. 1 99 0 च्या उत्तरार्धात त्यांनी डिझायनर म्हणून प्रशिक्षित केले आणि नंतर थोड्याच वेळात डिजिटल डिझाइनच्या क्षेत्रात प्रवेश केला. असे करताना त्यांनी या तुलनेने नवीन क्षेत्रात वापरकर्ता केंद्रित डिझाइन तत्त्वे आणली आहेत आणि ते तेव्हापासून ते डिजिटल प्रोजेक्टवर लागू करीत आहेत.

March 1, 2018