अंतिम यूआय डिझाइन मार्गदर्शक

सामग्री

• 01. आपली टायपोग्राफी निवडा
• 02. योग्य पॅलेट निवडा
• 03. शैली दुवे आणि बटणे
• 04. आपले घटक तयार करा
• 05. दस्तऐवज आणि सहयोग

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

Ibilityक्सेसीबीलिटी नेहमीच प्रथम असावी, इष्टतम प्रयोज्यतेसाठी पाया घातली पाहिजे (शीर्ष वेबसाइट बिल्डर वापरुन येथे मदत होईल). आणि मग, जेव्हा एक यूआय प्रवेशयोग्य आणि वापरण्यायोग्य दोन्ही असेल तेव्हा सौंदर्यशास्त्रच्या दृष्टीने ते आधीपासूनच सभ्य दिसले पाहिजे (यूआय डिझाइन साधने येथे मदत करतील). त्यानंतर, आपले डिझाइन सर्व स्तरांवर कार्य करत आहे हे सुनिश्चित करण्यासाठी, आपल्याला याची संपूर्ण चाचणी घेण्याची आवश्यकता आहे, जे आपण आमच्या सर्वोत्कृष्ट वापरकर्ता चाचणी साधनांच्या निवडीसह करू शकता. चला बहुतेक डिझाइनच्या मूलभूत घटकांवर आणि दृष्य सुसंगततेसाठी काय केले जाऊ शकते यावर बारकाईने नजर टाकूया.

01. आपली टायपोग्राफी निवडा

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

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

‘सुंदर’ टायपोग्राफी अवाचनीय असते तेव्हा ते खरोखरच कुरुप असते कारण निराशा नेहमीच सौंदर्याचा सौंदर्य ओढवते. उत्तम डिझाइन संतुलित आणि कर्णमधुर आहे.

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

जेव्हा सुवाच्यता आणि वाचनीयता येते तेव्हा डब्ल्यूसीएजी 2.0 वेब सामग्री प्रवेशयोग्यता मार्गदर्शक तत्त्वांनी परिभाषित केल्यानुसार किमान स्वीकार्य फॉन्ट आकार 18pt (किंवा 14pt ठळक) असतो. वापरण्यासाठी सर्वोत्तम फॉन्ट आकार मोठ्या प्रमाणात फॉन्टवर अवलंबून असतो परंतु व्हिज्युअल श्रेणीक्रम लक्षात ठेवणे महत्वाचे आहे आणि हा आधार आकार सारांश आणि मथळ्यापासून स्वतःला कसा वेगळे करतो (उदा. एच 1>, एच 2>, h3>).

आपल्या पसंतीच्या यूआय डिझाइन टूलसह (आम्ही इनव्हिजन स्टुडिओ वापरणार आहोत), मजकूर स्तरांची मालिका तयार करा (ट) आणि नंतर खालील टेम्पलेटसह परस्पर संबंध ठेवण्यासाठी सर्व आकार समायोजित करा:

• एच 1>: 44px
• h2>: 33px
• h3>: 22px
• p>: 18px

इनव्हिजन स्टुडिओ (आणि इतर सर्व UI डिझाइन टूल्स) सह, उजवीकडील इन्स्पेक्टर पॅनेल वापरुन शैली समायोजित करुन हे केले जाते.

पुढे आपला फॉन्ट निवडा, परंतु सावधगिरी बाळगा कारण आपण काही फॉन्टसह जे कदाचित लक्षात घेत आहात ते ते 18px आहे p> आणि 22px h3> सर्व काही वेगळे दिसत नाही. आमच्याकडे दोन पर्याय आहेत: फॉन्ट आकार चिमटा किंवा शीर्षकासाठी भिन्न फॉन्टचा विचार करा. आपली रचना मजकूर-भारी असेल असा अंदाज आल्यास नंतर जा.

हे लक्षात ठेवा:

• व्हिज्युअल यूआय डिझाइन बहुतेक वेळा आतड्यात जाणारा दृष्टीकोन असतो
• काहीही ठरलेले नाही; प्रत्येक गोष्ट बदलण्याच्या अधीन आहे

ओळीची उंची

चांगल्या ओळीची उंची हे सुनिश्चित करते की वाचनीयतेचे सभ्य स्तर मिळविण्यासाठी मजकूरांच्या ओळींमध्ये त्यांच्यात पुरेसे अंतर आहे. हे ‘मानक’ म्हणून अधिकाधिक ओळखले जात आहे; गुगलचे लाइटहाऊस ऑडिट टूल अगदी मॅन्युअल चेक म्हणून सुचवते (किंवा मजकूरात दुवे असलेले सबॉप्टिमल लाईन उंचीच्या परिणामी खूप जवळील असू शकतात अशा ध्वजांकनाप्रमाणेही).

पुन्हा एकदा, डब्ल्यूसीएजी आम्हाला यासह मदत करते, हे घोषित करते की लाइनची उंची फॉन्ट आकार 1.5x असावी. तर, ‘लाइन’ (किंवा तत्सम) अंतर्गत आपल्या यूआय डिझाइन टूलमध्ये, फॉन्टचा आकार - किमान - 1.5 ने गुणाकार करा. उदाहरणार्थ, जर मुख्य मजकूर 18px असेल तर ओळीची उंची 27px असेल (18 * 1.5 - आपण गणिताचे ऑपरेशन थेट इन्स्पेक्टरमध्ये देखील करू शकता). पुन्हा, तथापि, लक्षात ठेवा - 1.6x चांगले फिट वाटत असल्यास, 1.6x वापरा. लक्षात ठेवा भिन्न फॉन्ट भिन्न परिणाम देतील.

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

परिच्छेद अंतर

परिच्छेद अंतर ही एक शैली नाही जी आम्ही इनव्हिजन स्टुडिओच्या निरीक्षकाद्वारे घोषित करू शकतो. त्याऐवजी, आम्हाला स्मार्ट मार्गदर्शक (⌥) वापरून थर व्यक्तिचलितपणे संरेखित करण्याची आवश्यकता आहे. लाइन उंची प्रमाणेच, जादू गुणक 2x (फॉन्ट आकाराने दुप्पट) आहे. उदाहरणार्थ, जर फॉन्टचा आकार 18px असेल तर पुढील टेक्स्ट ब्लॉकमध्ये जाण्यापूर्वी किमान 36px जागा असावी. अक्षरांचे अंतर कमीतकमी 0.12 असावे.

तथापि, आम्ही घटक तयार होईपर्यंत आम्हाला याची चिंता करण्याची आवश्यकता नाही.

सामायिक शैली

आपले यूआय डिझाइन टूल त्याला समर्थन देत असल्यास (इनव्हिजन स्टुडिओ अद्याप नाही), व्हिज्युअल सुसंगतता सुनिश्चित करताना या टायपोग्राफिक शैली वेगाने पुन्हा वापरण्यायोग्य बनविण्यासाठी त्यांना ‘सामायिक शैली’ मध्ये बदलण्याचा विचार करा. हे सहसा निरीक्षकाद्वारे पूर्ण केले जाते.

02. योग्य पॅलेट निवडा

आपल्या डिझाइनसाठी परिपूर्ण रंग निवडणे सौंदर्यप्रसाधनांच्या पलीकडे नाही: ते आपल्या साइटच्या संपूर्ण श्रेणीरचनाबद्दल माहिती देऊ शकते.

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

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

01. पूर्ण
स्टार्क प्लगइन स्केच आणि अडोब एक्सडीशी सुसंगत आहे आणि आपल्याला कॅनव्हासवरून रंग तीव्रता आणि रंग अंधत्व अनुकरण करण्यात मदत करते. फिगमा आणि इनव्हीशन स्टुडिओसाठी लवकरच समर्थन.
02.रंग
रंग 90 ० रंगसंगतींचा एक संच आहे ज्यात डब्ल्यूसीएजी २.० मार्गदर्शक तत्त्वांची पूर्तता करण्यासाठी योग्य प्रमाणात कॉन्ट्रास्ट आहे - त्यातील काही एएए मानक पूर्ण करण्यासाठी व्यवस्थापित करतात.
03. A11y प्रकल्प
A11y प्रोजेक्ट संबंधित सर्व गोष्टींच्या प्रवेशयोग्यतेसाठी एक भव्य केंद्र आहे. यात संसाधने, साधने, टिपा, शिकवण्या समाविष्ट आहेत आणि स्टार्क प्लगइनच्या निर्मात्याने तयार केले आहे आणि इनव्हीशनकडून निधी प्राप्त केला आहे.

रंगाचे तीन प्रकार

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

• कॉल-टू-colorक्शन रंग (मुख्य ब्रँड रंग देखील)
• एक तटस्थ गडद रंग (यूआय घटक किंवा गडद मोडसाठी चांगले)
• वरील सर्वांसाठी, किंचित फिकट आणि गडद फरक

हे खालील सक्षम करते:

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

आपले पॅलेट सेट अप करा

आपल्या पसंतीच्या यूआय डिझाइन टूलसह, प्रत्येक रंगासाठी एक (एक 'टॅप ए' मोठा तयार करा (नावाचा ‘ब्रँड’, ‘तटस्थ / प्रकाश’ आणि ‘तटस्थ / गडद’). त्यानंतर, प्रत्येक आर्टबोर्डमध्ये, गडद आणि फिकट रंगाचे भिन्न रंग आणि स्वतःच इतर रंग दर्शविणारी अतिरिक्त लहान आयत तयार करा.

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

कॉन्ट्रास्ट

पुढे आम्हाला चांगल्या रंगांच्या कॉन्ट्रास्टसाठी आमचे रंग तपासण्याची आवश्यकता आहे. असे विविध प्रकारची साधने केली जाऊ शकतात, उदाहरणार्थ स्केचसाठी स्टार्क प्लगइन किंवा मॅकोससाठी अ‍ॅडॉब एक्सडी किंवा कॉन्ट्रास्ट - तथापि, कॉन्ट्रास्ट चेकर किंवा रंग कॉन्ट्रास्ट तपासक यासारखे ऑनलाइन समाधान अगदी चांगले करेल.

प्रत्येक संयोजनासाठी रंग तीव्रता तपासा आणि त्यानुसार रंग चिमटा. कोणते रंग वापरायचे याची आपल्याला खात्री नसल्यास कलर सेफच्या शिफारसी वापरुन पहा.

03. शैली दुवे आणि बटणे

आकार

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

व्हिज्युअल परवडणारी चाचणी ही टॅप लक्ष्ये क्लिक करण्यायोग्य असल्याचे दिसून येण्यासाठी वापरली जाणारी चाचणी आहे. स्टुडिओपासून फ्रीहँडवर डिझाइन संकालित करा (.F), परीक्षकांना परिणामी URL पाठवा आणि त्यांना क्लिक करण्यायोग्य असल्याचा विश्वास असलेल्या घटकांवर मंडळा आणा.

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

सामान्यत: आम्ही अशी शिफारस करतो की बटण मजकूर 18px म्हणून घोषित करावा (मुख्य मजकूराप्रमाणेच) परंतु त्या बटणांचे स्वतःचे आकार तीन भिन्न आहेतः

• सामान्य: उंची 44px (गोलाकार कोप: 5px)
• मोठा: 54px उंची (गोलाकार कोप: 10px)
• जास्त मोठं: उंची 64px (गोलाकार कोप: 15px)

हे आम्हाला रंगांवर अवलंबून न राहता काही बटणे अधिक महत्त्वाचे असल्याचे दिसू देते आणि घरटे बटणे देखील (उदाहरणार्थ, कमीतकमी दिसणार्‍या फॉर्म फील्डमध्ये बटण वापरा).

खोली

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

परस्परसंवाद

प्रत्येक बटणाच्या प्रकारास त्याची होव्हर स्थिती दर्शविण्यासाठी भिन्नता आवश्यक आहे. हे वापरकर्त्यास हे स्पष्ट करते की त्यांनी प्रयत्न करण्याचा प्रयत्न केला की ते पूर्णपणे ठीक आहे आणि हे सुनिश्चित करते की त्यांनी विलंब न करता सुरू ठेवली.

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

याचा निर्णय घेतल्यामुळे आम्हाला एक रंग वापरण्यास प्रवृत्त करेल ज्याचा एकतर आधीच अर्थपूर्ण अर्थ आहे, परिणामी वापरकर्ते गोंधळात पडतात किंवा अन्यथा रंग घेण्याचा निर्णय घेतात. दुय्यम रंग वापरण्याचा निर्णय घेणे पूर्णपणे ठीक आहे परंतु ते यूआय घटकांऐवजी विपणन व्हिज्युअलसाठी जतन केले जावे. कमी अधिक आहे (आणि सोपे आहे).

प्रत्येक आर्टबोर्डसाठी ही पद्धत पुन्हा सांगा. ब्रँड आर्टबोर्डवर ब्रँडेड सीटीए बटणे समाविष्ट करू नका - नंतर जेव्हा काही जोड्या कार्य करत नाहीत तेव्हा काय होते ते आम्ही लपवू.

04. आपले घटक तयार करा

घटक एक प्रचंड वेळ बचतकर्ता असतात आणि सर्व UI डिझाइन टूल्स हे वैशिष्ट्य ऑफर करतात (उदा. स्केचमध्ये, त्यांना प्रतीक म्हणतात)). स्टुडिओमध्ये घटक बनवायला हवे असे सर्व थर निवडून आणि using वापरून घटक तयार करू शकतोके शॉर्टकट

घटक वापरणे

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

याचा अर्थ असा नाही की आपल्याला घटकांचे बरेच डिझाइन करणे आवश्यक आहे किंवा कोणत्याही संभाव्य परिस्थितीसाठी तयार असणे आवश्यक आहे परंतु याचा अर्थ असा नाही की आपल्याला ‘काय असेल तर?’ वृत्ती वापरण्याची आवश्यकता आहे.

उदाहरणार्थ, जर आमची वायरफ्रेम एक 3x1 घटकासाठी कॉल करते परंतु आपल्याला हे माहित आहे की सामग्री दगडात नाही, तर थोडासा विचार केल्यास आम्हाला आश्चर्य वाटेल: ’हे घटक 4x1 पर्यंत संपले तर काय?’. अंगठा नियम आहेः केवळ वापरकर्त्याच्या आवश्यकतेसाठी डिझाइन केलेले आधीपासूनच अस्तित्वात आहे परंतु निराकरणे तुलनेने लवचिक बनवण्याचा प्रयत्न करा. अन्यथा, आम्ही नंतर अगदी ओलांडून काही अतिशय गोंधळलेले ‘डिझाइन कर्ज’ उडवून देऊ.

आता आम्ही हा घटक डावीकडील लायब्ररी> कागदजत्रातून कॅनव्हासवर ड्रॅग करून पुन्हा वापरु शकतो, हे लक्षात ठेवून जरी हे वर्कफ्लो आपल्या यूआय टूलवर अवलंबून भिन्न असू शकते.

शैली मार्गदर्शक तयार करण्याची ही पद्धत (आणि अखेरीस स्वतः डिझाइन तयार करणे) मॉड्यूलर / कार्ड-आधारित लेआउट्ससह चांगले कार्य करते, जरी हेडर, फूटर आणि नॅव्हिगेशन यासारख्या ‘सामान्य क्षेत्रे’ देखील घटकांसाठी उत्कृष्ट उमेदवार आहेत.

जसे आपण आमच्या टायपोग्राफिक शैली, रंग आणि बटणे पूर्ण केली आहेत, त्याप्रमाणे आपले घटक काळजीपूर्वक आयोजित करणे आपण लक्षात ठेवले पाहिजे.

आमच्या नियमांचा उपयोग करीत आहोत

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

बरोबर. म्हणून घटक तयार करण्याची ही एक आदर्श संधी असेल - विशेषतः, हेडिंग + टेक्स्ट + बटण संयोजन. ब्रांडेड बटणाचा वापर सक्षम करण्यासाठी मी तटस्थ लाइट ’कार्ड’ पार्श्वभूमी कशी तयार केली आहे ते पहा. त्याचप्रमाणे तटस्थ प्रकाश फॉर्म फील्ड (कागदाच्या स्वरूपाचे ऐतिहासिक प्रतिशब्द मानसिक मॉडेलमुळे फॉर्म फील्ड सहसा पांढरे असतात) तटस्थ प्रकाश पार्श्वभूमीवर आश्चर्यकारक दिसत नाही म्हणून ते फक्त तटस्थ गडद पार्श्वभूमीवर वापरले जाऊ शकतात - एकतर थेट किंवा आत एक तटस्थ गडद घटक. आमच्या नियमांचे पालन करताना आणि सुसंगतता टिकवून ठेवण्याद्वारे आम्ही आमचे डिझाइन लवचिक बनवितो.

ताण चाचणी

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

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

05. दस्तऐवज आणि सहयोग

आम्ही आमच्या डिझाइन फायली आमच्या आणि आमच्या डिझाइन फायली वापरू शकणार्‍या कोणत्याही इतर डिझाइनर दोघांसाठीही सुलभ कसे करू? ठीक आहे, त्यांना विश्वसनीय, सामायिक मेघ संचयनात सुरक्षितपणे संग्रहित ठेवणे महत्त्वाचे आहे, जसे आपल्याला सापडेल.

रंग

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

सामायिक लायब्ररी

पुढे, आम्हाला आमचा कागदजत्र - टायपोग्राफिक शैली, रंग, बटणे, सामान्य क्षेत्र आणि मूलभूत घटकांसह - सामायिक लायब्ररीत रूपांतरित करणे आवश्यक आहे.

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

InVision स्टुडिओ हे काही प्रमाणात मर्यादित आहे जेणेकरून ते अद्याप InVision च्या अधिकृत डिझाइन सिस्टम मॅनेजर टूलसह समक्रमित होत नाही परंतु ड्रॉपबॉक्समध्ये लायब्ररी ड्रॉपबॉक्समध्ये वापरणे आणि वेळोवेळी अद्यतनित करणे इतके सोपे आहे. जेव्हा एखादा बदल (स्थानिक पातळीवर किंवा दूरस्थपणे) केला जाईल, तेव्हा प्रत्येक स्टुडिओ फाईल जी लायब्ररी वापरते (पुन्हा, स्थानिक किंवा दूरस्थपणे) आपण रंग आणि घटक अद्यतनित करू इच्छित असल्यास विचारेल. टीममधील डिझाइन लायब्ररी अशा प्रकारे देखरेखीखाली ठेवल्या जातात.

जेव्हा दृष्यदृष्ट्या सुसंगत वापरकर्ता इंटरफेस डिझाइन करण्यासाठी येते तेव्हा सर्वकाही पुन्हा वापरा. बटणे डिझाइन करा, नंतर बटण घटक तयार करण्यासाठी बटणे वापरा, नंतर वापरा
सतर्कता आणि संवाद यासारखे घटक बनविण्यासाठी बटणाचे घटक.

फक्त आवश्यक नसलेले घटक तयार करू नका. लक्षात ठेवा, लायब्ररी बनविणे हा एक सतत चालू असलेला आणि सहयोगी प्रयत्न आहे. हे सर्व एकाच वेळी पूर्ण करणे आवश्यक नाही, आपण एकटेच पूर्ण केले किंवा कधीही पूर्ण केले नाही. ती फक्त एक भाषा व्यक्त करावी लागेल.

स्केलवर डिझाइन

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

उदाहरणार्थ, आम्ही आमच्या लायब्ररीमध्ये विविध घटकांच्या वापराच्या प्रकरणांचे स्पष्टीकरण देण्याकरिता भाष्य करण्यासाठी मजकूर स्तर वापरू इच्छित असू शकतो. टायपोग्राफिक शैलीसाठी आम्ही मजकूर अधिक वर्णनात्मक म्हणून संपादित करू शकतो (उदा. "एच 1> / 1.3 / 44px"). असे ते म्हणतात एच 1>s 44px आणि त्याची ओळ उंची 1.3 असावी.

डिझाइन हँडऑफ

डिझाइन हँडऑफ टूल्स डिझाइनमधील प्रत्येक घटकाद्वारे वापरल्या जाणार्‍या विविध शैली प्रदर्शित करतात जेणेकरुन विकसक अ‍ॅप किंवा वेबसाइट तयार करु शकतील. या साधनांमध्ये शैलींचे विहंगावलोकन आणि ’दस्तऐवज रंग’ स्वॅचची प्रत देखील समाविष्ट आहे. विकसक या शैलींना कोड म्हणून कॉपी देखील करु शकतात, आपण कोणतेही लेखी डिझाइन दस्तऐवजीकरण तयार करण्याचा निर्णय घेतला असेल तर त्या घटकांच्या कोड स्निपेट सादरीकरणास आपण समाविष्ट करू इच्छित असाल तर उत्कृष्ट आहे.

आपण समस्या निवारण आणि वेबसाइट व्यवस्थापित करण्याबद्दल काळजीत असाल तर, आपल्याला योग्य वेब होस्टिंग सेवा मिळाली आहे याची खात्री करुन घेण्यास मदत होईल, परंतु आपल्या डिझाइन सिस्टमसाठी, इनव्हिजनचे डिझाइन हँडऑफ टूल, इन्स्पेक्ट ही वापरण्याची गोष्ट आहे. त्याचा उपयोग करण्यासाठी, आम्ही इनव्हिजन स्टुडिओमधील ‘इनव्हिजनवर प्रकाशित करा’ बटणावर / चिन्हावर क्लिक करा, परिणामी URL उघडा आणि नंतर तपासणी मोडवर स्विच करण्यासाठी टॅप करा. हे खरोखर सोयीस्कर आहे.

ही सामग्री मूलतः नेट मासिकामध्ये आली.