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

यह इंटरफ़ेस के कार्यान्वयन के लिए आता है और डेवलपर को इन खामियों का सामना करना पड़ता है।

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

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

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

मैंने कई सिद्धांतों को एक साथ रखा है जो इन बहुत समस्याग्रस्त स्थानों को खोजने में मदद करेंगे और यहां तक ​​कि तैयार समाधान के साथ डिजाइनर के पास आएंगे, और नंगे हाथों से नहीं।

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

सिद्धांतों को किसी विशेष क्रम में नहीं दिया जाता है।

समूह

देख

मस्तिष्क चीजों को एक साथ समूहित करता है अगर वे एक दूसरे के साथ निकट, समान या संरेखित होते हैं।

सिद्धांत

तत्वों का समूह पृष्ठ पदानुक्रम में उनके संबंध और स्थिति को दर्शाता है।

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

मैक पर नीटली ग्रुप सेटिंग्स

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

समूहीकरण का सिद्धांत भी डिजाइनर के खिलाफ काम करता है। आकस्मिक संरेखण या निकटता दो घटकों को संयोजित कर सकती है जो कि समूहीकृत नहीं होने चाहिए और उपयोगकर्ता को भ्रमित कर सकते हैं।

फ़ायरफ़ॉक्स सेटिंग्स यहां सब कुछ बहुत बुरा है। उदाहरण के लिए, यह अनुमान लगाने का प्रयास करें कि दाईं ओर के तीन बटन किसके हैं।

कैसे करें आवेदन

यह सिद्धांत उन तत्वों के समूह में समस्याओं को खोजने में मदद करता है जो डिजाइनर से चूक गए थे।

उदाहरण के लिए, इस मेनू में, एकल-स्तरीय ब्लॉक के अलग-अलग संकेत हैं। यह ओवरसाइट लेआउट स्तर पर स्पॉट और फिक्स करना आसान है।

घर में पढ़ना

• समूहन सिद्धांत
• Artemy Lebedev के निर्माण में सिद्धांत
• इल्या बिरमन विषय विकसित करता है । गोर्बुनोव की व्याख्या । और एक और ।

अनुक्रम

देख

जिन वस्तुओं के साथ एक व्यक्ति पहले से परिचित है, उन्हें तेजी से और अधिक सटीक रूप से पहचाना जाता है । एक परिचित संदर्भ भी मान्यता को आसान बनाता है।

सिद्धांत

साइट के मानक तत्वों को प्रचलित पैटर्न का पालन करना चाहिए।

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

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

जावा सेटिंग्स से अविश्वसनीय नियंत्रण - एक अलग विंडो में पुष्टि के साथ चेकबॉक्स। नाम के बावजूद बड़ा नीला बटन, का अर्थ है कार्रवाई को रद्द करना।

कैसे करें आवेदन

डिफ़ॉल्ट और कस्टम तत्वों का उपयोग करें यदि बिल्कुल आवश्यक हो। वे अधिक समझने और लागू करने में आसान होते हैं।

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

घर में पढ़ना

अपनी मान्यता पर किसी वस्तु के साथ संदर्भ और परिचित का प्रभाव

रंग और इसके विपरीत

देख

अध्ययन कहते हैं कि पृष्ठभूमि और पाठ की टोन और संतृप्ति में अंतर पठनीयता पर बहुत कम प्रभाव डालता है, लेकिन प्रकाश व्यवस्था में इसके विपरीत प्रत्यक्ष है। इसके अलावा, लगभग 4% लोग रंग धारणा विकारों से पीड़ित हैं।

सिद्धांत

हमेशा टेक्स्ट कंट्रास्ट चेक करें।

W3C सामान्य को 1: 4.5 के विपरीत नियमित आकार के पाठ के लिए और 1: 3 को 24px या बड़े पाठ के लिए मानता है।

विशेष रूप से अक्सर समस्याएं एक रंगीन पृष्ठभूमि पर सफेद पाठ और ग्रे पर ग्रे के साथ होती हैं। डिजाइनर को यह पता नहीं हो सकता है कि संयोजन समस्याग्रस्त है, और उपयोगकर्ता तनाव करेंगे।

सबसे खराब, सफेद पाठ पीले रंग की पृष्ठभूमि पर दिखता है, सबसे अच्छा - नीले रंग पर।

कैसे करें आवेदन

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

दो रंगों के विपरीत को जल्दी से जांचने के लिए, विपरीत अनुपात सेवा उपयुक्त है।

Google मुखपृष्ठ। इसके विपरीत लगभग जगह से बाहर है

घर में पढ़ना

• पढ़ने पर इसके विपरीत के प्रभाव का अध्ययन
• W3C अनुशंसाएँ

निष्कर्ष

1. डिजाइनर के साथ उन जगहों पर चर्चा करें जिन्हें आप सोचते हैं कि समस्याग्रस्त हैं।
2. जांचें कि तत्वों के बीच की दूरी पदानुक्रम में उनकी स्थिति के अनुरूप है।
3. मानक तरीके से मानक नियंत्रण का उपयोग करें।
4. स्वचालित विपरीत जाँच।

दूसरे भाग में मैं शब्दार्थ, राज्यों, प्रदर्शन और आकार के बारे में बात करूँगा।