विषय
- 01. अपनी टाइपोग्राफी चुनें
- 02. सही पैलेट चुनें
- 03. स्टाइल लिंक और बटन
- 04. अपने घटक बनाएं
- 05. दस्तावेज़ और सहयोग
यूजर इंटरफेस डिजाइन क्या है? एक बेहतर सवाल यह होगा कि यूजर इंटरफेस के डिजाइन में वास्तव में क्या जाता है? सौंदर्यशास्त्र? उपयोगिता? अभिगम्यता? उन सभी को? इष्टतम उपयोगकर्ता अनुभव को सक्षम करने के लिए ये सभी कारक कैसे एकजुट होते हैं और कौन सा पहले आना चाहिए?
सुलभता हमेशा पहले आनी चाहिए, इष्टतम उपयोगिता के लिए नींव रखना (एक शीर्ष वेबसाइट बिल्डर का उपयोग करना यहां मदद करेगा)। और फिर, जब एक यूआई सुलभ और प्रयोग करने योग्य दोनों होता है, तो इसे सौंदर्यशास्त्र के मामले में पहले से ही सभ्य दिखना चाहिए (यूआई डिज़ाइन टूल यहां मदद करेंगे)। फिर, यह सुनिश्चित करने के लिए कि आपका डिज़ाइन सभी स्तरों पर काम करता है, आपको इसका पूरी तरह से परीक्षण करने की आवश्यकता होगी, जो आप हमारे सर्वोत्तम उपयोगकर्ता परीक्षण टूल के चयन के साथ कर सकते हैं। आइए अधिकांश डिज़ाइनों के मूलभूत तत्वों पर करीब से नज़र डालें और दृश्य स्थिरता सुनिश्चित करने के लिए क्या किया जा सकता है।
01. अपनी टाइपोग्राफी चुनें
महान टाइपोग्राफी (डिजाइन के कई पहलुओं की तरह) अभिगम्यता के लिए उबलती है। विज़ुअल डिज़ाइन निश्चित रूप से उपयोगकर्ता के समग्र अनुभव में जोड़ता है लेकिन दिन के अंत में, उपयोगकर्ता UI के साथ इंटरैक्ट कर रहे हैं, इसे कला के रूप में नहीं देख रहे हैं। सुपाठ्य अक्षरों से स्पष्टता आती है और पठनीय शब्द ही उपयोगकर्ताओं को सामग्री को कुशलतापूर्वक पचाने में मदद करते हैं। दोनों किसी भी दृश्य सौंदर्य से अधिक महत्वपूर्ण हैं।
हालाँकि, अच्छी तरह से डिज़ाइन की गई टाइपोग्राफी अभी भी सौंदर्य की दृष्टि से संतोषजनक हो सकती है। ब्लैक-ऑन-व्हाइट हेल्वेटिका (या एक समान फ़ॉन्ट) केवल कुछ सरल टाइपोग्राफ़िक संवर्द्धन के बाद सुंदरता की बात हो सकती है। एन्हांसमेंट से हमारा मतलब है कि फॉन्ट साइज, लाइन हाइट, लेटर स्पेसिंग आदि में बदलाव करना - टेक्स्ट का फॉन्ट या रंग नहीं।
'सुंदर' टाइपोग्राफी वास्तव में बदसूरत है जब यह अपठनीय है क्योंकि निराशा हमेशा सौंदर्यशास्त्र को रौंद देती है। महान डिजाइन संतुलित और सामंजस्यपूर्ण है।
UI डिज़ाइन के कई पहलुओं की तरह, एक्सेसिबिलिटी और सौंदर्यशास्त्र को संतुलित करने के लिए दृश्यों को ठीक करना कोई चुनौती नहीं है। चुनौती पूरे डिजाइन में निरंतरता बनाए रखना है। संगति अलग-अलग महत्व के तत्वों के बीच स्पष्ट पदानुक्रम स्थापित करती है, जो बदले में उपयोगकर्ताओं को UI को तेज़ी से समझने और सामग्री को अधिक कुशलता से पचाने में मदद करती है।
जब सुपाठ्यता और पठनीयता की बात आती है, तो WCAG 2.0 वेब सामग्री अभिगम्यता दिशानिर्देशों द्वारा परिभाषित न्यूनतम स्वीकार्य फ़ॉन्ट आकार 18pt (या 14pt बोल्ड) है। उपयोग करने के लिए सबसे अच्छा फ़ॉन्ट आकार काफी हद तक फ़ॉन्ट पर ही निर्भर करता है लेकिन दृश्य पदानुक्रम से सावधान रहना महत्वपूर्ण है और यह आधार आकार खुद को सारांश और शीर्षकों से कैसे अलग करता है (यानी h1>, h2>, h3>).
अपनी पसंद के UI डिज़ाइन टूल के साथ (हम InVision Studio का उपयोग करेंगे), टेक्स्ट लेयर्स की एक श्रृंखला बनाएं (टी) और फिर सभी आकारों को निम्न टेम्पलेट के साथ सहसंबंधित करने के लिए समायोजित करें:
- h1>: ४४पीएक्स
- h2>: 33px
- h3>: २२पीएक्स
- पी>: १८पीएक्स
इनविज़न स्टूडियो (और अन्य सभी UI डिज़ाइन टूल) के साथ, यह दाईं ओर इंस्पेक्टर पैनल का उपयोग करके शैलियों को समायोजित करके किया जाता है।
अगला अपना फ़ॉन्ट चुनें, लेकिन सावधान रहें क्योंकि कुछ फोंट के साथ आप जो नोटिस कर सकते हैं वह है 18px पी> और 22px h3> यह सब अलग नहीं दिखता। हमारे पास दो विकल्प हैं: फ़ॉन्ट आकार में बदलाव करें या शीर्षकों के लिए किसी भिन्न फ़ॉन्ट पर विचार करें। बाद वाले के साथ जाएं यदि आप अनुमान लगाते हैं कि आपका डिज़ाइन टेक्स्ट-भारी होगा।
ध्यान रखें कि:
- विज़ुअल यूआई डिज़ाइन अक्सर एक आंत-महसूस करने वाला दृष्टिकोण होता है
- कुछ भी तय नहीं है; सब कुछ परिवर्तन के अधीन है
ऊंची लाईन
इष्टतम लाइन ऊंचाई यह सुनिश्चित करती है कि पठनीयता के सभ्य स्तरों को प्राप्त करने के लिए पाठ की पंक्तियों में उनके बीच पर्याप्त अंतर हो। यह 'मानक' के रूप में अधिक से अधिक पहचाना जा रहा है; Google का लाइटहाउस ऑडिट टूल इसे मैन्युअल जांच के रूप में भी सुझाता है (या यहां तक कि एक ध्वज यदि टेक्स्ट में लिंक होते हैं जो उप-रेखा की ऊंचाई के परिणामस्वरूप एक साथ बहुत करीब हो सकते हैं)।
एक बार फिर, डब्ल्यूसीएजी इस में हमारी मदद करता है, यह घोषणा करते हुए कि लाइन की ऊंचाई 1.5x फ़ॉन्ट आकार होनी चाहिए। तो, आपके UI डिज़ाइन टूल में 'लाइन' (या समान) के अंतर्गत, बस फ़ॉन्ट आकार को - कम से कम - 1.5 से गुणा करें। उदाहरण के तौर पर, अगर बॉडी टेक्स्ट 18px है, तो लाइन की ऊंचाई 27px (18*1.5 - आप सीधे इंस्पेक्टर में भी मैथ्स ऑपरेशन निष्पादित कर सकते हैं) होगी। फिर भी, सावधान रहें - यदि 1.6x बेहतर फिट लगता है, तो 1.6x का उपयोग करें। याद रखें कि अलग-अलग फोंट अलग-अलग परिणाम देंगे।
हमारे डिजाइन में वास्तविक डेटा का उपयोग करने के बारे में सोचना जल्दबाजी होगी लेकिन, बहुत कम से कम, हमें अभी भी कुछ हद तक यथार्थवादी डेटा (यहां तक कि लोरेम इप्सम) का उपयोग करना चाहिए। इनविज़न स्टूडियो में एक मूल वास्तविक डेटा ऐप है जो हमें यह देखने में मदद करता है कि हमारी टाइपोग्राफी वास्तव में कैसी दिख सकती है।
पैराग्राफ रिक्ति
पैराग्राफ रिक्ति एक शैली नहीं है जिसे हम InVision Studio के इंस्पेक्टर का उपयोग करके घोषित कर सकते हैं। इसके बजाय, हमें स्मार्ट गाइड (⌥) का उपयोग करके परतों को मैन्युअल रूप से संरेखित करने की आवश्यकता होगी। लाइन की ऊंचाई के समान, जादुई गुणक 2x (फ़ॉन्ट आकार को दोगुना) है। उदाहरण के तौर पर, यदि फ़ॉन्ट का आकार 18px है, तो अगले टेक्स्ट ब्लॉक में जाने से पहले कम से कम 36px स्थान होना चाहिए। अक्षरों का अंतर कम से कम 0.12 होना चाहिए।
हालाँकि, हमें इसके बारे में तब तक चिंता करने की ज़रूरत नहीं है जब तक हम घटक बनाना शुरू नहीं कर देते।
साझा शैलियाँ
यदि आपका UI डिज़ाइन टूल इसका समर्थन करता है (InVision Studio अभी तक नहीं करता है), तो इन टाइपोग्राफ़िक शैलियों को 'साझा शैलियों' में बदलने पर विचार करें ताकि दृश्य स्थिरता सुनिश्चित करते हुए उन्हें तेजी से पुन: प्रयोज्य बनाया जा सके। यह आमतौर पर निरीक्षक के माध्यम से पूरा किया जाता है।
02. सही पैलेट चुनें
अपने डिज़ाइन के लिए सही रंगों का चयन करना सौंदर्यशास्त्र से बहुत आगे जाता है: यह आपकी साइट के संपूर्ण पदानुक्रम को सूचित कर सकता है।
जब यूआई डिज़ाइन की बात आती है, तो रंग आदतन उन पहली चीज़ों में से एक है, जिनके साथ हम डबिंग करना पसंद करते हैं, लेकिन हमें सिखाया जाता है कि सीधे विज़ुअल डिज़ाइन में गोता लगाना एक बुरी बात है। यह निश्चित रूप से सच है, हालांकि जब दृश्य स्थिरता की बात आती है, तो रंग एक शीर्ष चिंता का विषय होना चाहिए क्योंकि यह अन्य भूमिकाएं निभाता है।
UI डिज़ाइन में रंग बहुत प्रभावी हो सकता है लेकिन चूंकि कुछ उपयोगकर्ता (कई, वास्तव में) विभिन्न प्रकार की दृश्य अक्षमताओं से पीड़ित हैं, यह हमेशा विश्वसनीय नहीं होता है। कहा जा रहा है, यह आवश्यक रूप से उस विशिष्ट रंग के बारे में नहीं है जिसका उपयोग किया जा रहा है, बल्कि रंग के प्रकार के बारे में है। जब ब्रांडिंग की बात आती है तो यह सच नहीं हो सकता है क्योंकि इस संबंध में भावनात्मक प्रभाव के लिए रंग का उपयोग किया जाता है, लेकिन UI डिज़ाइन में, रंग का उपयोग इरादे, अर्थ और निश्चित रूप से, दृश्य पदानुक्रम को संप्रेषित करने के लिए भी किया जाता है।
शीर्ष उपकरण और संसाधन01. निरा
स्टार्क प्लगइन स्केच और एडोब एक्सडी के साथ संगत है और आपको रंग कंट्रास्ट की जांच करने और सीधे कैनवास से कलर ब्लाइंडनेस का अनुकरण करने में मदद करता है। Figma और InVision Studio के लिए समर्थन बहुत जल्द आ रहा है।
02.रंग की
रंग 90 रंग संयोजनों का एक सेट है जिसमें WCAG 2.0 दिशानिर्देशों को पूरा करने के लिए उचित मात्रा में रंग विपरीत होते हैं - उनमें से कुछ एएए मानक को पूरा करने का प्रबंधन भी करते हैं।
03. A11y प्रोजेक्ट
A11y प्रोजेक्ट एक्सेसिबिलिटी से संबंधित सभी चीजों के लिए एक विशाल केंद्र है। इसमें संसाधन, उपकरण, टिप्स, ट्यूटोरियल शामिल हैं और यह स्टार्क प्लगइन के निर्माता द्वारा बनाया गया है और इनविज़न से धन प्राप्त करता है।
तीन प्रकार के रंग
रंग अर्थ रखते हैं, इसलिए यह महत्वपूर्ण है कि उनमें से बहुत सारे न हों। बहुत सारे अर्थों के परिणामस्वरूप अधिक चीजें होती हैं जिन्हें उपयोगकर्ता को समझना और याद रखना होता है - हमारे लिए चिंता करने के लिए और अधिक रंग संयोजनों का उल्लेख नहीं करना। सामान्यतया, यह अनुशंसित प्रारूप होगा:
- कॉल-टू-एक्शन रंग (मुख्य ब्रांड रंग भी)
- एक तटस्थ गहरा रंग (यूआई तत्वों या डार्क मोड के लिए बेहतर)
- उपरोक्त सभी के लिए, थोड़ा हल्का और गहरा बदलाव
यह निम्नलिखित को सक्षम बनाता है:
- डार्क मोड आसानी से मिल जाएगा
- हमारा सीटीए रंग कभी भी अन्य रंगों के साथ संघर्ष नहीं करेगा
- किसी भी परिदृश्य में हम जोर देने और कम करने में सक्षम होंगे
अपना पैलेट सेट करें
अपनी पसंद के यूआई डिज़ाइन टूल के साथ, प्रत्येक रंग के लिए एक काफी बड़ा आर्टबोर्ड (टैप ए) बनाएं (नाम 'ब्रांड', 'न्यूट्रल / लाइट' और 'न्यूट्रल / डार्क')। फिर, प्रत्येक आर्टबोर्ड में, रंग के गहरे और हल्के बदलावों को प्रदर्शित करने वाले अतिरिक्त छोटे आयत बनाएं और साथ ही अन्य रंग भी।
हम थोड़े हल्के और गहरे रंग को क्रमशः 10 प्रतिशत अतिरिक्त सफेद और 10 प्रतिशत अतिरिक्त काला मानेंगे। जब आप काम पूरा कर लें, तो प्रत्येक आर्टबोर्ड पर टाइपोग्राफिक शैलियों की एक प्रति प्रदर्शित करें। इन टेक्स्ट लेयर्स का रंग न्यूट्रल लाइट होना चाहिए, न्यूट्रल लाइट आर्टबोर्ड को छोड़कर जहां उन्हें न्यूट्रल डार्क होना चाहिए।
कंट्रास्ट
आगे हमें इष्टतम रंग कंट्रास्ट के लिए अपने रंगों की जांच करनी होगी। ऐसे कई उपकरण हैं जो ऐसा कर सकते हैं, उदाहरण के लिए स्केच और एडोब एक्सडी के लिए स्टार्क प्लगइन या मैकोज़ के लिए कंट्रास्ट - हालांकि, कंट्रास्ट चेकर या कलर कंट्रास्ट चेकर जैसे ऑनलाइन समाधान ठीक काम करेंगे।
प्रत्येक संयोजन के लिए रंग कंट्रास्ट की जाँच करें और उसके अनुसार रंगों में बदलाव करें। यदि आप सुनिश्चित नहीं हैं कि किस रंग का उपयोग करना है, तो कलर सेफ की सिफारिशों का उपयोग करने का प्रयास करें।
03. स्टाइल लिंक और बटन
आकार
टाइपोग्राफी की तरह ही बटन और लिंक में कुछ बदलाव होने चाहिए। आखिरकार, सभी क्रियाएं समान स्तर के महत्व के नहीं हैं और जैसा कि हमने पहले चर्चा की, रंग संचार का एक अविश्वसनीय तरीका है, इसलिए यह दृश्य पदानुक्रम को प्रभावित करने का मुख्य तरीका नहीं हो सकता है। हमें आकार के साथ खिलौना भी चाहिए।
दृश्य सामर्थ्य परीक्षण क्या है?एक दृश्य क्षमता परीक्षण एक उपयोगिता परीक्षण है जिसका उपयोग यह निर्धारित करने के लिए किया जाता है कि टैप लक्ष्य क्लिक करने योग्य प्रतीत होते हैं या नहीं। स्टूडियो से फ्रीहैंड में डिज़ाइन को सिंक करें (एफ), परिणामी URL को परीक्षकों को भेजें और उन्हें उन तत्वों पर घेरा दें जिन्हें वे क्लिक करने योग्य मानते हैं।
गैर-इनविज़न स्टूडियो उपयोगकर्ता फ्रीहैंड का भी उपयोग कर सकते हैं, लेकिन इनविज़न स्टूडियो के उपयोगकर्ता इनविज़न स्टूडियो से अपने डिज़ाइन को बिना किसी बाधा के फ्रीहैंड में लॉन्च कर सकते हैं, जो उपयोगकर्ताओं से विज़ुअल फीडबैक प्राप्त करने का सबसे तेज़ और सबसे कुशल तरीका है।
आम तौर पर, हम अनुशंसा करते हैं कि बटन टेक्स्ट को 18px (बॉडी टेक्स्ट के समान) के रूप में घोषित किया जाए, लेकिन बटन के आकार में तीन भिन्नताएं हैं:
- सामान्य: ऊंचाई में 44px (गोल कोने: 5px)
- विशाल: ऊंचाई में 54px (गोल कोने: 10px)
- एक्स्ट्रा लार्ज: ऊंचाई में 64px (गोल कोने: 15px)
यह हमें कुछ बटनों को रंग और नेस्ट बटन पर निर्भर किए बिना अधिक महत्वपूर्ण प्रतीत होने में सक्षम बनाता है (उदाहरण के लिए, न्यूनतम दिखने वाले फॉर्म फ़ील्ड के अंदर एक बटन का उपयोग करें)।
गहराई
भले ही टैप लक्ष्य एक बटन हो या एक प्रपत्र फ़ील्ड, छाया का उपयोग गहराई बढ़ाने के लिए किया जाना चाहिए और इसलिए अन्तरक्रियाशीलता का सुझाव देना चाहिए। बटन और प्रपत्र फ़ील्ड के सभी प्रकारों के लिए एकल छाया शैली ठीक है।
अन्तरक्रियाशीलता
प्रत्येक बटन प्रकार को अपनी होवर स्थिति को इंगित करने के लिए भिन्नता की आवश्यकता होती है। यह उपयोगकर्ता को स्पष्ट करता है कि उन्होंने जो करने का प्रयास किया है वह पूरी तरह से ठीक है और यह सुनिश्चित करता है कि वे बिना किसी देरी के चलते रहें।
यह वास्तव में दृश्य स्थिरता बनाए रखने के अधिक जटिल पहलुओं में से एक है क्योंकि जब राज्य बनाने की बात आती है तो रंग अक्सर पसंदीदा शैली होती है। शुक्र है, ये राज्य परिवर्तन अपेक्षाकृत सूक्ष्म हो सकते हैं, इसलिए रंग को इसके थोड़े हल्के या गहरे रंग में बदलना ठीक है - यही वह है जिसके लिए वे हैं। यह लिंक पर भी लागू होता है।
इसके खिलाफ निर्णय लेने से हम ऐसे रंग का उपयोग करेंगे जिसका या तो पहले से ही महत्वपूर्ण अर्थ है, जिसके परिणामस्वरूप उपयोगकर्ता भ्रमित हो जाते हैं, या फिर किसी अन्य रंग के साथ आने का निर्णय लेते हैं। द्वितीयक रंग का उपयोग करने का निर्णय लेना पूरी तरह से ठीक है लेकिन इसे UI तत्वों के बजाय मार्केटिंग विज़ुअल के लिए सहेजा जाना चाहिए। कम अधिक है (और आसान)।
प्रत्येक आर्टबोर्ड के लिए इस चरण को दोहराना याद रखें। ब्रांड आर्टबोर्ड पर ब्रांडेड CTA बटन शामिल न करें - बाद में हम कवर करेंगे कि क्या होता है जब कुछ संयोजन काम नहीं करते हैं।
04. अपने घटक बनाएं
घटक एक बहुत बड़ा समय बचाने वाले हैं और सभी UI डिज़ाइन टूल इस सुविधा की पेशकश करते हैं (उदाहरण के लिए स्केच में, उन्हें प्रतीक कहा जाता है)। स्टूडियो में हम उन सभी परतों का चयन करके घटक बना सकते हैं जो घटक बनाना चाहिए और . का उपयोग करना चाहिएक छोटा रास्ता।
घटकों का उपयोग करना
वायरफ्रेम का उपयोगवायरफ्रेम बहुत उपयोगी हैं, न केवल उच्च-उपयोगिता वाले UI को डिज़ाइन करने के लिए बल्कि यह पता लगाने के लिए भी कि हमारे UI को लंबे समय में क्या आवश्यकता होगी। यह फ्यूचर-प्रूफिंग की तरह है।
इसका मतलब यह नहीं है कि हमें कई घटकों को डिजाइन करने या किसी भी संभावित परिदृश्य के लिए तैयार रहने की आवश्यकता है, लेकिन इसका मतलब यह है कि हमें 'क्या होगा?' रवैया अपनाने की जरूरत है।
उदाहरण के लिए, यदि हमारा वायरफ्रेम 3x1 घटक के लिए कहता है लेकिन हम जानते हैं कि सामग्री पत्थर में सेट नहीं है, तो थोड़ा चिंतन हमें आश्चर्यचकित कर सकता है: 'क्या होगा यदि यह घटक 4x1 हो जाए?'। नियम का अंगूठा है: केवल उपयोगकर्ता की जरूरतों के लिए डिज़ाइन जो पहले से मौजूद है लेकिन समाधानों को अपेक्षाकृत लचीला बनाने का प्रयास करें। अन्यथा, हम बाद में लाइन के नीचे कुछ बहुत ही गन्दा 'डिज़ाइन ऋण' के साथ समाप्त हो जाएंगे।
अब हम इस घटक को लाइब्रेरी> दस्तावेज़ से बाईं ओर कैनवास पर खींचकर पुन: उपयोग कर सकते हैं, हालांकि ध्यान रखें कि यह वर्कफ़्लो आपके UI टूल के आधार पर भिन्न हो सकता है।
स्टाइल गाइड बनाने की यह विधि (और अंततः स्वयं डिज़ाइन बनाना) मॉड्यूलर/कार्ड-आधारित लेआउट के साथ विशेष रूप से अच्छी तरह से काम करती है, हालांकि हेडर, फ़ुटर और नेविगेशन जैसे 'सामान्य क्षेत्र' भी एक घटक के लिए उत्कृष्ट उम्मीदवार हैं।
जैसे हमने अपनी टाइपोग्राफिक शैलियों, रंगों और बटनों के साथ किया है, हमें अपने घटकों को सावधानीपूर्वक व्यवस्थित करना याद रखना चाहिए।
हमारे नियमों का उपयोग
इससे पहले हमने ब्रांड रंग के ऊपर ब्रांडेड CTA बटन का उपयोग नहीं करने के बारे में एक टिप्पणी की थी, क्योंकि ब्रांडेड CTA बटनों को स्पष्ट रूप से बाकी सब चीजों से अलग होना चाहिए। तो ब्रांडेड सीटीए बटन का उपयोग करने में सक्षम होने के बावजूद हम ब्रांडेड घटक बनाने के बारे में कैसे जाते हैं? आखिरकार, अगर हम न्यूट्रल डार्क बटन का उपयोग कर रहे हैं, तो मान लें, नेविगेशनल बटन या बस कम-महत्वपूर्ण बटन, यह सिर्फ एक विकल्प नहीं होगा, है ना?
सही। तो यह एक घटक बनाने का एक आदर्श अवसर होगा - विशेष रूप से, एक शीर्षक + टेक्स्ट + बटन संयोजन। ध्यान दें कि मैंने ब्रांडेड बटन के उपयोग को सक्षम करने के लिए एक न्यूट्रल लाइट 'कार्ड' बैकड्रॉप कैसे बनाया है। इसी तरह, न्यूट्रल लाइट फॉर्म फील्ड (फॉर्म फील्ड आमतौर पर सफेद होते हैं क्योंकि मानसिक मॉडल ऐतिहासिक रूप से पेपर फॉर्म का पर्यायवाची है) न्यूट्रल लाइट बैकग्राउंड पर अद्भुत नहीं दिखता है, इसलिए उनका उपयोग केवल न्यूट्रल डार्क बैकग्राउंड पर किया जा सकता है - या तो सीधे या भीतर एक तटस्थ अंधेरा घटक। इस तरह हम अपने नियमों का पालन करते हुए और निरंतरता बनाए रखते हुए अपने डिजाइन को लचीला बनाते हैं।
तनाव परीक्षण
आदर्श रूप से, हमारे डिजाइन में मजबूती सुनिश्चित करने का सबसे तेज और सबसे प्रभावी तरीका तनाव परीक्षण है। परीक्षण के लिए एक डिजाइन डालने का मतलब है क्रूर होना। मान लें कि हमारे पास नेविगेशन आइटम की एक्स मात्रा के साथ एक नेविगेशन है क्योंकि यह आवश्यकता थी; वास्तव में लचीलेपन को सुनिश्चित करने के लिए, इन आवश्यकताओं को और अधिक एनएवी आइटम जोड़कर बदलने का प्रयास करें या, वास्तव में कार्यों में एक स्पैनर को फेंकने के लिए, अन्य की तुलना में उच्च दृश्य पदानुक्रम के साथ एक एनएवी आइटम जोड़ने का भी प्रयास करें। क्या हमारे आकार, टाइपोग्राफी और रंग नियम कुछ इस तरह की अनुमति देते हैं? या इष्टतम उपयोगिता प्रदान करने के लिए क्या हमें किसी अन्य नियम की आवश्यकता है?
ध्यान रखें कि नियम जोड़ने और नियमों को मोड़ने में अंतर है। अधिक किनारे के मामलों का मतलब कम स्थिरता है, इसलिए अधिकांश समय यह उपयोगिता के लिए घटक पर पुनर्विचार करने के लिए बेहतर है।
05. दस्तावेज़ और सहयोग
हम अपनी डिज़ाइन फ़ाइलों को स्वयं और किसी भी अन्य डिज़ाइनर के लिए उपयोग करना आसान कैसे बनाते हैं जो हमारी डिज़ाइन फ़ाइल का उपयोग कर सकते हैं? ठीक है, उन्हें विश्वसनीय, साझा क्लाउड स्टोरेज में सुरक्षित रूप से संग्रहीत रखना महत्वपूर्ण है, जैसा कि आपको पता चल जाएगा।
रंग की
पहला कदम सभी रंगों को 'डॉक्यूमेंट कलर्स' स्वैच में सहेजना है यदि हमने पहले से ऐसा नहीं किया है - इससे उन्हें हमारे डिजाइन में लागू करने की आवश्यकता होने पर उन्हें एक्सेस करना आसान हो जाएगा।ऐसा करने के लिए, इंस्पेक्टर से रंग चयनकर्ता विजेट खोलें, ड्रॉपडाउन से 'दस्तावेज़ रंग' चुनें और फिर नमूने में रंग जोड़ने के लिए + आइकन पर क्लिक करें। यह अधिकांश UI टूल में उसी तरह काम करता है।
साझा पुस्तकालय
इसके बाद, हमें अपने दस्तावेज़ को - टाइपोग्राफ़िक शैलियों, रंगों, बटनों, सामान्य क्षेत्रों और बुनियादी घटकों के साथ पूर्ण - एक साझा पुस्तकालय में बदलने की आवश्यकता है।
अनिवार्य रूप से इसका मतलब है कि प्रत्येक तत्व को एक घटक होना चाहिए, भले ही इसमें केवल एक परत हो। बाईं ओर लाइब्रेरी साइडबार में + बटन पर क्लिक करें और फिर इस दस्तावेज़ को एक नए दस्तावेज़ में आयात करें। यह सही है: हमारा दस्तावेज़ अब एक पुस्तकालय है और गारंटीकृत स्थिरता के साथ UI को डिज़ाइन करने के लिए उपयोग के लिए तैयार है।
इनविज़न स्टूडियो कुछ हद तक इस मायने में सीमित है कि यह अभी तक इनविज़न के आधिकारिक डिज़ाइन सिस्टम मैनेजर टूल के साथ सिंक नहीं हुआ है, लेकिन अन्य डिजाइनरों के लिए समय के साथ उपयोग और अपडेट करने के लिए ड्रॉपबॉक्स में लाइब्रेरी को रखना काफी आसान है। जब कोई परिवर्तन किया जाता है (स्थानीय रूप से या दूरस्थ रूप से), तो प्रत्येक स्टूडियो फ़ाइल जो लाइब्रेरी का उपयोग करती है (फिर से, स्थानीय रूप से या दूरस्थ रूप से) पूछेगी कि क्या आप रंगों और घटकों को अपडेट करना चाहते हैं। इस प्रकार टीमों में डिज़ाइन पुस्तकालयों को बनाए रखा जाता है।
सब कुछ रीसायकल करेंजब दृष्टि से सुसंगत यूजर इंटरफेस डिजाइन करने की बात आती है, तो हर चीज का पुन: उपयोग करें। बटन डिज़ाइन करें, फिर बटन घटक बनाने के लिए बटन का उपयोग करें, फिर उपयोग करें
अन्य घटकों जैसे अलर्ट और संवाद बनाने के लिए बटन घटक।
बस ऐसे घटक न बनाएं जिनकी आवश्यकता नहीं है। याद रखें, पुस्तकालय का निर्माण एक सतत, सहयोगात्मक प्रयास है। इसे एक बार में पूरा करना जरूरी नहीं है, अकेले आपके द्वारा पूरा किया गया है या कभी भी पूरा किया गया है। इसे केवल एक भाषा व्यक्त करनी है।
पैमाने पर डिजाइन
जैसे-जैसे डिज़ाइन का विस्तार होता है, इसे प्रबंधित करना कठिन होता जाता है। ऐसे कई समायोजन हैं जिन्हें हम इसे कुशल और रखरखाव योग्य रखने के लिए करना चाहते हैं, खासकर जब से इनविज़न का डीएसएम स्टूडियो के साथ काम नहीं करता है।
उदाहरण के लिए, हम विभिन्न तत्वों के उपयोग-मामलों को समझाने के साधन के रूप में अपनी लाइब्रेरी को एनोटेट करने के लिए टेक्स्ट लेयर्स का उपयोग करना चाह सकते हैं। टंकण शैलियों के लिए, हम पाठ को अधिक वर्णनात्मक बनाने के लिए संपादित भी कर सकते हैं (उदाहरण के लिए "h1> / 1.3 / 44px")। यह कहता है कि h1>s ४४px का होना चाहिए और उसकी पंक्ति की ऊंचाई १.३ होनी चाहिए।
डिजाइन हैंडऑफ
डिज़ाइन हैंडऑफ़ उपकरण डिज़ाइन में प्रत्येक तत्व द्वारा उपयोग की जाने वाली विभिन्न शैलियों को प्रदर्शित करते हैं ताकि डेवलपर्स ऐप या वेबसाइट बना सकें। इन उपकरणों में शैलियों का एक सिंहावलोकन और 'दस्तावेज़ रंग' नमूने की एक प्रति भी शामिल है। डेवलपर्स इन शैलियों को कोड के रूप में भी कॉपी कर सकते हैं, जो उत्कृष्ट है यदि आपने कोई लिखित डिज़ाइन दस्तावेज़ बनाने का निर्णय लिया है और आप घटकों के कोड स्निपेट प्रतिनिधित्व को शामिल करना चाहते हैं।
यदि आप किसी वेबसाइट के समस्या निवारण और प्रबंधन के बारे में चिंतित हैं, तो सुनिश्चित करें कि आपको सही वेब होस्टिंग सेवा मिल गई है, लेकिन आपके डिज़ाइन सिस्टम के लिए, InVision का डिज़ाइन हैंडऑफ़ टूल, निरीक्षण, उपयोग करने वाली चीज़ है। इसका उपयोग करने के लिए, हम इनविज़न स्टूडियो में 'पब्लिश टू इनविज़न' बटन/आइकन पर क्लिक करते हैं, परिणामी यूआरएल खोलते हैं और फिर निरीक्षण मोड पर स्विच करने के लिए टैप करते हैं। यह वास्तव में सुविधाजनक है।
यह सामग्री मूल रूप से नेट पत्रिका में छपी थी।
