दोस्तों को एक डिज़ाइन सिस्टम, क्राउबर और कुछ प्रकार की माँ ™ का उपयोग करके एक डिज़ाइनर, लेआउट डिज़ाइनर और "अंजीर" कैसे बनाया जाए

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

संघर्ष समाधान के साधन के रूप में डिजाइन प्रणाली

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

पहला संघर्ष। दूरियाँ, आकार और संकेत

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

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

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

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

4px। बहुलता - प्रतिभा की बहन

पहली मेष परत हमेशा एक समान होती है: 4px ग्रिड। वास्तव में, मैं "स्केल पिक्सल" के साथ काम करता हूं, जिसमें 4x4 नियमित होते हैं। नतीजतन, लेआउट के किसी भी तत्व, लाइनों (स्ट्रोक, बॉर्डर, ऑफ़लाइन लाइनें, hr, आदि) को छोड़कर हमेशा एक आकार होता है जो चार में से कई होता है।



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

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

आखिर 4 क्यों?

क्योंकि। सिद्धांत रूप में, यह कोई भी संख्या हो सकती है: कम से कम 5, कम से कम 3, कम से कम 10. एकमात्र मानदंड: उपयोग में आसानी। यहां तक ​​कि संख्याएं अधिक सुविधाजनक हैं, क्योंकि व्यूपोर्ट और कैरियर्स के आकार लगभग हमेशा समान संख्या में व्यक्त किए जाते हैं (और अक्सर चार के कई)। इसके अलावा, रैस्टर को स्केल करते समय अभी भी प्रक्षेप होता है, लेकिन यह इतना महत्वपूर्ण नहीं है।

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

लंबवत लय

बेसिक लीडिंग

अब आपको मूल अग्रणी - लाइन की ऊंचाई निर्धारित करने की आवश्यकता है, जो एक ऊर्ध्वाधर लय बनाएगा और बाद में अधिकांश तत्वों की ऊंचाई को प्रभावित करेगा। नतीजतन, हम लेआउट को लंबवत "पंक्तिबद्ध" करते हैं।

(यदि आप ऊर्ध्वाधर लय, मूल फ़ॉन्ट और मॉड्यूल की अवधारणाओं से परिचित नहीं हैं, तो फिर से, ग्रिड के बारे में लेख देखें - यह यहां से भी अधिक उबाऊ कहता है, लेकिन वहां आपके पास है)।

विभिन्न परियोजनाओं में अग्रणी भिन्न हो सकते हैं। लेकिन सबसे अधिक बार मैं 16px या 24px का उपयोग करता हूं । आप अपने खुद के कुछ के साथ आ सकते हैं, यह ध्यान में रखते हुए कि संख्या आपके आधार पिक्सेल ग्रिड के गुणकों की होनी चाहिए।





कृपया ध्यान दें कि 16px पर पाठ वास्तव में एक पंक्ति नहीं, बल्कि दो लेता है। इसलिए औपचारिक रूप से हम 32px लीड का उपयोग करते हैं। लेकिन लय के संदर्भ में, यह एक और एक ही है। छोटे तत्वों के साथ काम करना आसान बनाने के लिए बस प्रत्येक पंक्ति को आधे में विभाजित करें।

मानक ऊंचाइयों

सत्तारूढ़ होने के परिणामस्वरूप, "जादू" संख्याएं प्राप्त की जाती हैं, जिसे मानक ऊर्ध्वाधर ब्लॉक आकार माना जाएगा। हम मध्यवर्ती मामलों के लिए आधे और डेढ़ अंतराल का उपयोग करने की संभावना के बारे में नहीं भूलते हैं, जैसे पैडिंग या छोटे पाठ। पेपर टाइपिंग के बाद से यह एक आम बात है।



छवियों और अंकगणित लोड करने की समस्याओं के मामले में:

इन दोनों शासकों के ठीक-ठीक प्रेम करने का एक और कारण यह है कि वे एक-दूसरे के समानुपाती हैं: तीन 16px लाइनें दो 24px लाइनों (16 * 3 = 24 * 2) के बराबर होती हैं। यह आपको समग्र ताल खोए बिना उनके बीच कुछ घटकों को खींचने की अनुमति देता है। उदाहरण के लिए, 48x48 आइकन दोनों ग्रिड पर पूरी तरह से फिट हैं। जैसा कि आप अनुमान लगा सकते हैं, 48: 96, 144, 192, आदि के सभी गुणक सार्वभौमिक होंगे।

असामान्य संख्याओं के अंधेरे से डरने की जरूरत नहीं है। व्यवहार में, 2-3 परियोजनाओं के बाद, वे आपके मस्तिष्क को गुलाम बनाते हैं और उपकेंद्र में दृढ़ता से छाप देते हैं।

मॉड्यूल और ग्राफ्ट ऊंचाई

मैं ध्यान देता हूं कि मानकीकरण का मतलब कुल एकरूपता नहीं है। हम आधार रेखा समायोजित करते हैं, हाँ। लेकिन कोई भी मॉड्यूल के अनुपात को अलग करने के लिए आपको परेशान नहीं करता है जैसा आप चाहते हैं। तुलना के लिए यहां दो उदाहरण दिए गए हैं:



बाईं ओर, हमने मॉड्यूल की ऊँचाई को दो पंक्तियों के बराबर कर दिया और एक बहुत ही "फ्लैट" ग्रिड प्राप्त किया, जो टाइप बैठाने वाले रूपों, तालिकाओं, सूची इंटरफेस और अन्य समान चीजों के लिए सुविधाजनक है। और दाईं ओर, मॉड्यूल अधिक है, 5 लाइनें। उन लेआउट में उपयुक्त जहां बहुत सी दीर्घाएं, क्षैतिज कार्ड, बैनर ब्लॉक, चित्र हैं।

गटर [अभियांत्रिकी। गटर - "गटर", "ग्रूव"] - यह वह है जिसे आमतौर पर इंटरमॉड्यूलर दूरी कहा जाता है। इसकी ऊँचाई को हमेशा आधार लीड के कई के रूप में भी किया जाता है। ज्यादातर अक्सर यह 1 लाइन होगी। लेकिन अगर, उदाहरण के लिए, लेआउट दयनीय है और इसमें मुख्य रूप से विशाल चित्र हैं, तो आप उन्हें कई लाइनों में एक उच्च श्रेणी के साथ अलग कर सकते हैं।

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

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

एक छोटे से उदाहरण के साथ परीक्षण करते हैं। तो, 16px अग्रणी के साथ 2 मानक मेष हैं। गैटर की ऊँचाई - 1 पंक्ति (16px)। बाएं लेआउट में मॉड्यूल की ऊंचाई 2 लाइनें है, दाईं ओर - 5 लाइनें। क्या हम अब उनके गुणों को देखे बिना तत्वों के सही ऊर्ध्वाधर आकार / संकेत निर्धारित कर सकते हैं?



मुझे लगता है कि हम कर सकते हैं। विशेष रूप से जटिल कुछ भी नहीं है: लाइनों की संख्या का अनुमान लगाएं और मूल अग्रणी द्वारा गुणा करें। वह सब है। इसके अलावा, इन नंबरों को "मानक" श्रृंखला में शामिल किए जाने की गारंटी है। यही है, जैसा कि अभ्यास अंकगणित जल्दी से ऑटोमेटिज्म में लाया जाता है। क्या यहाँ फ़ोटोशॉप लाइन की आवश्यकता है? मुझे नहीं लगता। यहां तक ​​कि अगर कुछ मन में गिनना मुश्किल है, तो गुणों में झांकना कोई समस्या नहीं है।

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

क्षैतिज लय: गटर, स्पीकर, फ़ील्ड

नाली

इसी तरह, क्षैतिज गैटर आकार 4px के कई का चयन करें। अक्सर मैं गैटर स्क्वायर (16x16) बनाता हूं । लेकिन अगर आपको कॉलम के बीच व्यापक इंडेंटेशन की आवश्यकता है, तो आप कोई अन्य मूल्य ले सकते हैं: 20px, 24px, 28px, 32px: आदि।

इस मामले में, गैटर अग्रणी के साथ सादृश्य द्वारा क्षैतिज दूरियों का आधार बन जाता है। यदि आप इसकी चौड़ाई 20 पीएक्स के बराबर कर देते हैं, तो समोच्च लाइनों के लिए संपूर्ण "मैजिक मानक" बदलकर "10, 20, 30, 40 ..." हो जाएगा। लेकिन, स्पष्ट रूप से, ये असुविधाजनक संख्याएं हैं, छोटे पैडिंग और यह सब संभवतः याद किया जाएगा। सामान्य तौर पर, मैं सुझाव दूंगा कि स्मार्ट न बनें और गैटर को या तो चौकोर या कई अग्रणी बना दें। दो की तुलना में मानक संख्या के एक सेट के साथ काम करना आसान है।

कॉलम और उनकी जवाबदेही

"जादू मानक" पर निर्णय लेने के बाद, हम कॉलम को कैनवास या ब्रेकप्वाइंट के आकार के अनुसार समायोजित करते हैं, जिसके बारे में हम थोड़ी देर बाद बात करेंगे।

ग्रिड को पूरी तरह से उत्तरदायी बनाया जा सकता है, फिर कॉलम रबर होगा: चौड़ाई "खिंचाव" है, संख्या मनमानी है - उदाहरण के लिए, 12।



या आप अलग-अलग व्यूपोर्ट पर कॉलम की एक अलग संख्या (क्लासिक: 4 मोबाइल पर, 8 "टैबलेट", 12 डेस्कटॉप पर, 16 वाइड स्क्रीन पर) प्राप्त करने के लिए कॉलम की चौड़ाई को मैन्युअल रूप से सेट कर सकते हैं। ग्रिड सेटिंग्स में, यह इस तरह दिखता है: "ऑटो" की संख्या, चौड़ाई एक मनमानी संख्या है, जिसे आर्टबोर्ड और गैटर के आकार के आधार पर चुना जाता है।



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

कौन तय करता है कि ग्रिड कैसे व्यवहार करता है

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

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

इसलिए, गैटर के आकार का अंदाजा लगाते हुए + कॉलम के विभाजन के सिद्धांत + "जादू मानक", हम, फिर से, शुद्ध अंकगणित वाले तत्वों के क्षैतिज आकार निर्धारित कर सकते हैं। यहां अब विशेष संघर्ष नहीं होना चाहिए।

मुख्य फ्रेम के ब्रेकप्वाइंट और आकार

एक और संभावित ठोकरें खाने वाला ब्लॉक: किस आकार का लेआउट होना चाहिए, ब्रेकपॉइंट्स का चयन कैसे करें, जो ड्रॉ करने का व्यूपोर्ट करता है, और जहां "सब कुछ पहले से ही स्पष्ट है।"

फ़ोटोशॉप के युग में, और अभी भी एक साल पहले, यह कई लोगों के लिए एक समस्या थी:



अंजीर के साथ, यह परिमाण का एक क्रम आसान हो गया है क्योंकि कैनवास उत्तरदायी है। वर्नाकुलर में, "रबर" फैला है। लेकिन कुछ सवाल अभी भी बने हुए थे।

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

मनमाने आकार के आर्टबोर्ड क्यों

सबसे पहले, मुझे लगता है कि व्यूपोर्ट के नीचे एक रबर लेआउट खींचना सही नहीं है। कुछ साल पहले मैंने उत्कृष्ट लेख " सीएसएस ब्रेकपॉइंट करने का 100% सही तरीका " पढ़ा। मैं लंबे समय तक चबाता रहा, लेकिन अंत में मैंने लेखक के दृष्टिकोण को स्वीकार किया। संक्षेप में: ब्रेकपॉइंट बिंदुओं पर सामान्य दृष्टिकोण के साथ, सभी लेआउट तत्व चरम स्थिति (न्यूनतम चौड़ाई या अधिकतम चौड़ाई) में हैं, जबकि लोकप्रिय व्यूपोर्ट के लिए मैं "सामान्य" औसत मूल्य, अधिक प्राकृतिक प्राप्त करना चाहूंगा। इसलिए, ब्रेकप्वाइंट को सबसे लोकप्रिय स्क्रीन चौड़ाई के बीच रखा जाता है, और उन पर बिल्कुल नहीं। तदनुसार, लेआउट की न्यूनतम चौड़ाई व्यूपोर्ट की तुलना में थोड़ी कम ली गई है, और यह थोड़ा आगे बढ़ाती है। यह उलझन में लगता है, लेकिन यह समझ में आता है।

दूसरे, मैं लगभग बूटस्ट्रैप का सामना नहीं करता हूं और मैनुअल लेआउट के साथ कोई समस्या नहीं है, इसलिए मुझे किसी भी बाहरी मानकों पर सख्ती से ध्यान नहीं देना है।

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

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

लेआउट की इष्टतम चौड़ाई की गणना

1. निकटतम व्यूपोर्ट के लिए अनुमानित वांछित चौड़ाई निर्धारित करें। उदाहरण के लिए, न्यूनतम स्क्रीन के रूप में, 290-320 पीएक्स की सीमा में कोई भी चौड़ाई मुझे सूट करती है, और डेस्कटॉप के लिए, 1100-1300px कहो। मुख्य रूप से निचले बार में रुचि रखते हैं, क्योंकि कॉलम को प्लस में जोड़ना या "कान" जोड़ना कोई समस्या नहीं है।
2. हम स्तंभों की वांछित संख्या का अनुमान लगाते हैं। मोबाइल के लिए, मैं आमतौर पर 3 या 4 (सामग्री से, जो कि यहां तक ​​कि: सम या विषम) है, और डेस्कटॉप के लिए ले जाता है - 12. (ग्रिड के बारे में लेख में, मैंने पहले से ही एक दिलचस्प 24-कॉलम संस्करण के बारे में बात की थी, लेकिन यह विशिष्ट है, सरलता के लिए हम इसे नहीं लेते हैं। गणना)।
3. वांछित चौड़ाई से सभी गैटर और खेतों को घटाएं (कॉलम की तुलना में 1 कम गैटर हैं, और दो फ़ील्ड - कैप के नोट)।
4. शेष संख्या को स्तंभों की संख्या से विभाजित किया जाता है, हमें अनुमानित आवश्यक स्तंभ चौड़ाई मिलती है।
5. निकटतम मानक "जादू" संख्या के लिए अनुमानित स्तंभ चौड़ाई को गोल करें। हमें एक सुविधाजनक कॉलम चौड़ाई मिलती है।
6. हम इष्टतम लेआउट चौड़ाई पर विचार करते हैं: सभी सुविधाजनक कॉलम + सभी गैटर + फ़ील्ड।

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

सबसे अधिक बार, वेब के लिए मैं 80px चौड़े कॉलम का उपयोग करता हूं । और 16px का एक वर्ग ग्राफ्ट। नतीजतन, आर्टबोर्ड की विशिष्ट चौड़ाई होगी: 304px, 592px, 1168px, 1552px। स्वाभाविक रूप से, प्रत्येक लेआउट आसानी से ऊपर की ओर फैलता है। पृष्ठभूमि बिटमैप छवियां एक मार्जिन के साथ तैयार की जाती हैं। आसानी से, इस बारे में आमतौर पर कोई शिकायत नहीं है।

अतिरिक्त ग्रिड परतें

कभी-कभी, सामान्य गाइड के शीर्ष पर अतिरिक्त मार्गदर्शिकाएँ लगाई जाती हैं, जो दूरी को अधिक लचीले ढंग से नियंत्रित करने में मदद करती हैं या कुछ प्रकार के प्रतिबंधों को दिखाती हैं। उदाहरण के लिए, मेरे एक मानक मोबाइल आर्टबोर्ड (304px) में आइकन और टेक्स्ट को अधिक आरामदायक बनाने के लिए 16px और 48px इंडेंटेशन "रेल्स" शामिल हैं। "पहली स्क्रीन" का एक अपेक्षाकृत सुरक्षित क्षेत्र एक हरे रंग की क्षैतिज रेखा द्वारा चिह्नित है।



सिद्धांत समान है: पैटर्न और ग्रिड डिजाइन करने के लिए ताकि सभी विशिष्ट स्थितियों, समाधानों और घटकों के लिए एक तैयार जगह हो।

माउस

प्रतीक एक अलग ग्रिड पर संग्रहीत होते हैं और एक मध्यवर्ती आवरण घटक के माध्यम से एकत्र किए जाते हैं। प्रतीक स्वयं स्केल किए जाते हैं। कभी-कभी उनमें से कुछ का चित्रण, गोली आदि के रूप में उपयोग करना आवश्यक होता है। लेकिन आवरण हमेशा अपने आकार को पकड़ता है और सुरक्षा मार्जिन प्रदान करता है। () , , .. «center», a «scale». .



, , , .



( — . ).

-

, «» . , , («grow horizontally»). «» ( «Arrange -> Ditribute horizontal spacing») (flex', ). . , — - , . . ( , , — , ).



«» , , . , . , space-between, space-around. , . — , , . , .

,

• ( ). , - , ( ). , , .
• . , — , .
• - () — , . -, .
• -. ( , ). , -, .
• , -. - (, , ).

, . , , - , . , 3-5 ) : , ) , , «» — , .

. (, , , )

. . «Rectangle1, Rectangle2, ...». . , .

. (, ). (, ). «» , . .

,

- , . .

-, : , — .

-, , - , , - .

, . : «No one thinks a toilet paper is a perfect gift until they need one».

. -

.

?

• (CSS), «» , , CSS- GUI.
• . , , . ( , ; , . — , . , , - ).
• «» ( ., . ).
• «» ( , , ..).
• : , , .

, , . CSS: . .

, () () . 10 . , «nav-menu-item_active», , . , . «» , . , , .

- , «». , - . , . , :)

. , .

(&) Stylus (sass/less), . «&__» , « » ( ). , , Stylus :

.widget-heading &__title … &__icon-menu … 

बी ईएम के संदर्भ में प्रत्येक घटक को बी लॉक माना जाता है। इसलिए, यदि आप क्लासिक सिंटैक्स का उपयोग करते हैं, तो शीर्षक में केवल हाइफ़न और लैटिन का उपयोग किया जाता है।

BE M के एक ही क्लासिक सिंटैक्स में एक एकल अंडरस्कोर ("_") का उपयोग एम ओडिफायर को निरूपित करने के लिए किया जाता है। उदाहरण के लिए, "block_hover" राज्य में "ब्लॉक" घटक है: होवर, और "widget_collapsed" न्यूनतम स्थिति में विजेट घटक है।

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

स्लैश, आकृतियों द्वारा आरक्षित प्रतीक हैं जो आपको समूह घटकों की अनुमति देते हैं। नीचे देखें। मैं उन्हें सम्मिलित करता हूं ताकि तत्वों (हॉवर, फ़ोकस, आदि) के राज्यों को स्विच करना सुविधाजनक हो।

खैर, वर्ग कोष्ठक केवल एक तकनीकी चिह्न है, जो कहता है कि यह परत एक दृश्य बैसाखी है (जैसे कि पृष्ठभूमि पर गोल कोनों) और इसे मार्कअप में जोड़ने की आवश्यकता नहीं है।

क्या और कब नाम देना है और क्या स्कोर करना है

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

सख्ती से संदर्भित:

• आर्टबोर्ड (रूट स्तर के फ्रेम)।
• मास्टर घटक।
• सभी परतें जो मास्टर घटक का हिस्सा हैं। (लाइफ हैक: यह रचनात्मक खोज के चरण में नहीं किया जाता है, लेकिन घटक निर्माण के समय, जब आप पहले से ही पर्याप्त और कमोबेश अंत में संरचना पर निर्णय ले चुके होते हैं)।
• पाठ, प्रभाव, नामित रंगों की शैलियाँ - जिसे "चित्रा" द्वारा संरचित किया जाता है या पूर्वप्रक्रमकों में चर या मिक्सिन के रूप में उपयोग किया जाता है।
• वे परतें जिनका अर्थ महत्वपूर्ण है, लेकिन संदर्भ से स्पष्ट नहीं है। उदाहरण के लिए, यदि आप पृष्ठभूमि पर एक विशाल अक्षर रखना चाहते हैं या "x" को एक आइकन (जैसे स्वयं) के रूप में उपयोग करना चाहते हैं - तो इस परत को सार्थक रूप से नाम देना बेहतर है, क्योंकि यह एक विशेष मार्कअप तत्व है, न कि केवल एक अक्षर पाठ।
• सामग्री-युक्त परतें जो सीधे निर्यात और लेआउट के लिए उपयोग की जाती हैं: बिटमैप छवियां, एसवीजी, आदि।
• फ़्रेम जिन्हें लेआउट के दौरान मार्कअप में शामिल किया जाना चाहिए (फ्लेक्स रैपर, लेआउट के तार्किक भाग, जैसे साइडबार, एक तरफ, अनुभाग, आदि)।

आम तौर पर नाम नहीं:

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

"मेरे पास नहीं है, मेरे पास पंजे हैं"

कभी-कभी डिजाइनर तकनीकी हिस्से में तल्लीन होने के लिए बहुत आलसी होते हैं।

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

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

चिप्स और प्लगइन्स

यह माना जाता है कि आप " सर्वोत्तम प्रथाओं: घटकों, शैलियों और साझा पुस्तकालयों " से परिचित हैं। और यह कि आप पहले से ही एक वयस्क लड़का / लड़की हैं, उनमें से कई पर दो साइकिल चलाने और सवारी करने के लिए पर्याप्त है।

समूहीकरण घटक, शैली और प्रभाव

किसी भी मामले में, हम हमेशा "फिम्मा" से स्लैश लेते हैं। स्लैश हमारे सब कुछ हैं:

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

तो, स्लैश "समूह" और वास्तविक "नाम" को अलग करता है।

[अपवाद स्लैश हडसन है, जो गन एंड रोज़ेस को एक समूह और अपने स्वयं के नाम में विभाजित करता है, लेकिन फिर अपना दिमाग बदल देता है]।

उदाहरण के लिए, "बटन / भूत" और "बटन / सीटीए" परतें नामित समूह को "बटन" घोषित करती हैं, और "मोबाइल / पैराग्राफ" और "मोबाइल / एच 1" को "मोबाइल" समूह घोषित करती हैं। सिद्धांत रूप में, यदि आप बहुत चतुर हैं, तो इस प्रणाली को वर्गीकरण, और समूह - कर कहा जा सकता है। फिर आप परतों के सामान्य समूहन के साथ यह सब भ्रमित नहीं करेंगे, जिसे "Ctrl / Cmd + G" द्वारा सरल बनाया गया है।

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

प्लगइन्स में नामकरण

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

एक आकर्षक उदाहरण Google पत्रक सिंक प्लगइन है, जो दिखने में शक्तिशाली है, जो आपको खुले Google तालिकाओं से डेटा को विभिन्न घटक परतों () में खींचने की अनुमति देता है। यही है, हम घटक के एक दर्जन उदाहरणों को एक दर्जन परतों के साथ लेते हैं, प्लगइन की आवश्यकताओं के अनुसार सब कुछ नाम देते हैं, और यह तालिका से मूल्यों को क्रमिक रूप से ऊपर खींचता है: ग्रंथों, संख्याओं और यहां तक ​​कि चित्र भी। वाक्य विन्यास सरल है: जाली (ठीक है, ऑक्टोर्प) + परत का नाम। मैंने अभी तक इस प्लगइन का उपयोग नहीं किया है, लेकिन यह बहुत अच्छा और आशाजनक लगता है। तुरंत उत्पाद कार्ड, उपयोगकर्ता प्रोफाइल और अन्य दोहराए जाने वाले "मछली" के मैनुअल भरने के साथ बहुत सारी समस्याओं का हल करता है। सिद्धांत रूप में, वह मेरी प्रणाली को नहीं तोड़ता, क्योंकि एक पंक्ति की शुरुआत में एक ग्रिड जोड़ना आसान है।

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

पेज और फ्रेम्स

घटक पदानुक्रम

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



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

पृष्ठ उपसर्ग

जैसा कि पहले ही उल्लेख किया गया है, मैं लेबल के रूप में वर्ग कोष्ठक का उपयोग करता हूं - जहां मुझे यह दिखाने की आवश्यकता है कि कुछ सीधे मुख्य संदर्भ से संबंधित नहीं है और कुछ तकनीकी बिंदु हैं। यह पृष्ठ उपसर्गों पर भी लागू होता है। वे अलग-अलग हैं: [अंजीर], [मसौदा], [घटक], [प्रोटोटाइप], आदि। उनमें से प्रत्येक का मतलब लेआउट डिजाइनर के लिए कुछ है।

उदाहरण के लिए, "[ड्राफ्ट]" (ड्राफ्ट), का अर्थ है कि पृष्ठ समाप्त नहीं हुआ है - सब कुछ किसी भी समय बदल सकता है, जिसका अर्थ है कि इसकी सामग्री को अब अनदेखा करने की आवश्यकता है। "प्रोटोटाइप"] आमतौर पर एक ही प्रकार के फ़्रेमों का एक गुच्छा होता है, जो प्रोटोटाइप के लिए अंतर्निहित "आंकड़े" टूल का उपयोग करके एकल नोड (टोकरी, उपयोगकर्ता खाता, पंजीकरण प्रणाली, आदि) के तर्क को प्रदर्शित करता है।

और "[चित्र]" का अर्थ है कि इस पृष्ठ को केवल "चित्र" के कुछ टुकड़ों के साथ संगतता के लिए आवश्यक है। आमतौर पर पहली बार मेरे पास प्रोजेक्ट का "कवर" होता है - एक पेज जिसे "[अंजीर] कवर" कहा जाता है। सामान्य सूची में फ़ाइल का एक थंबनेल वहां से लिया जाता है + कभी-कभी क्लाइंट के सामने प्रस्तुति के लिए कुछ दिखावा किया जाता है।

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

रूट फ्रेम

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

टाइपोग्राफी (पाठ शैली)

फिर से, स्लैश। मैं तीन मुख्य सेटों में समूह:

• डेस्कटॉप - टाइपोग्राफी नियमित डेस्कटॉप सामग्री के लिए उचित;
• मोबाइल - अनुमान;
• ui ऐसी पाठ शैलियाँ हैं जो विशिष्ट इंटरफ़ेस तत्वों में उपयोग की जाती हैं और वे व्यूपोर्ट (उदाहरण के लिए, स्टॉपवॉच अंक या इनपुट फ़ॉन्ट) पर निर्भर नहीं होती हैं।

तदनुसार, नाम "डेस्कटॉप / पैराग्राफ", "मोबाइल / एच 2", "यूआई / टाइमर", "यूआई / बेसफोन", "यूआई / विजेट-हेडिंग_एक्टिव" आदि जैसे दिखते हैं।

कलर पिकर, इफ़ेक्ट स्टाइल्स

मेरे पास निम्नलिखित पट्टियाँ हैं:

• विषय - शैली बनाने वाले रंग, मुख्य गामा;
• तटस्थ - सशर्त ग्रे शेड्स जो पाठ, पासा, सीमाओं के लिए उपयोग किए जाते हैं;
• कार्यात्मक - ऐसे रंग जिनका एक कार्यात्मक अर्थ है ("त्रुटि", "सफलता", लिंक और बटन की स्थिति);
• अतिरिक्त - संभावित विभिन्न रंगों का एक सेट, मुख्य सरगम ​​के साथ कम या ज्यादा संयुक्त, जो किसी भी सूची तत्वों, बैनरों को उजागर करने, स्थिति, संकेतक को चिह्नित करने के लिए इंटरफेस में उपयोग किया जाता है।
• ग्रेडिएंट - कभी-कभी ग्रेडिएंट और बैकग्राउंड एक अलग समूह में आवंटित किए जाते हैं, बस इसलिए कि उन्हें सामान्य भराव के साथ भ्रमित न करें और सीएसएस चर में उन्हें डालना अधिक सुविधाजनक है।

नामकरण समान है: समूह + स्लैश + नाम + संशोधक। उदाहरण के लिए, "थीम / प्राइमरी", "थीम / पेज-बैकग्राउंड", "फंक / लिंक_विसाइड", "फंक / वार्निंग_लाइट"।

प्रभाव प्रकार द्वारा समूहीकृत होते हैं। मैं इतना नहीं उपयोग करता हूं, अधिकांश भाग के लिए, दो या तीन प्रकार की गहराई "छाया / _depth_deep" (पॉप-अप), "छाया / _depth_minimal" (बटन की छोटी छाया, आदि), "छाया / _depth_mid" (मध्यम) ड्रॉप-डाउन सूची, पैनल)। अंदरूनी छाया के लिए एक इनसेट संशोधक जोड़ा जाता है।

वैसे, दूसरा संशोधक हमेशा एक प्लस ("ब्लॉक / _mod1 + _mod2 + _mod3") द्वारा अलग किया जाता है, ताकि मानक निर्माण "_modifier_value" के साथ भ्रमित न हों। लेकिन, सामान्य तौर पर, इस तरह के अश्लील साहित्य से बचा जाता है। यदि परियोजना में बहुत सी ऐसी चीजें हैं, तो आप एक सामान्य अर्थपूर्ण नाम के साथ संशोधक का एक गुच्छा बदल सकते हैं। एक ला "छाया / _ सक्रिय-बटन"।

ध्यान से बचने की बातें

• रंगों के नाम (पहचानकर्ता) को विशिष्ट रंग मूल्यों ("लाल", "मांसल", "नीला", आदि) से न बांधने की अत्यधिक अनुशंसा की जाती है। नाम को फ़ंक्शन या दायरे को प्रतिबिंबित करना चाहिए, न कि वास्तविक छाया को। रंग मान किसी भी समय बदल सकता है: रिडिजाइन, रिब्रांडिंग, क्लाइंट में एक नया प्रबंधक। इसलिए, "बटन / लाल" या "बीजी / पीला" जैसे नाम ज्यादातर मामलों में रोल नहीं करते हैं।
• एक पैलेट से दूसरे के लिए रंगों का उपयोग करने की आवश्यकता नहीं है। उदाहरण के लिए, यदि आपके पास ब्रांड में सफेद है और तटस्थ सरगम ​​में समान सफेद है, तो तकनीकी रूप से यह दो अलग-अलग रंग (दो वेरिएंट) होना चाहिए। अब वे मैच करते हैं, हां। और एक साल में? और एक अंधेरे विषय में?
• यह भी सलाह दी जाती है कि ब्रांड के रंगों को कार्यात्मक लोगों से मेल न खाने दें। "ब्रांड" लिंक की आवश्यकता नहीं है - उन्हें क्लासिक नीले और नीले रंग के साथ छोड़ दें, केवल छाया को समायोजित करें। यदि ब्रांड का सरगम ​​अभी भी कुछ (लाल ब्रांड और लाल त्रुटि संदेश) के साथ मेल खाता है, तो कम से कम संतृप्ति और चमक के मामले में अपने रंगों को अधिकतम करना उचित है।

तीसरा संघर्ष। अस्थिर शैलियाँ और प्रभाव

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

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

कैसे डिजाइन प्रणाली यहाँ मदद करता है

सामान्य तौर पर, यह सभी के लिए होता है, क्योंकि पारदर्शिता एक रंग या ढाल को "पतला" करने का सबसे सुविधाजनक तरीका है। और जब से पहली बार छाया को उठाना संभव नहीं है, आप विकल्पों को स्केच करते हैं, और फिर आप कुछ कदम आगे और पीछे की ओर लुढ़क जाते हैं - आप कुछ स्थानों को याद करते हैं, "प्रयोगात्मक परिणाम" हैं।

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

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

स्टाइल्स "आंकड़े" विधानसभा के लिए चर के लार्वा हैं

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

 // named colors $clr-aqua = #057f99 $clr-aqua-light = #3ebca6 $clr-aqua-dark = #006B81 $clr-violet = #89288f $clr-violet-deep = #361946 $clr-white = #fff $clr-white-alt = #f1f4f6 $clr-gray-lightest = #e0f1f1 $clr-gray-light = #dde9f0 $clr-indigo = #5f2d7b $clr-purple-pink = #a93897 $clr-purple = #89288f // default theme palette $clr-primary = $clr-aqua $clr-primary_light = $clr-aqua-light $clr-primary_dark = $clr-aqua-dark $clr-secondary = $clr-violet $clr-secondary_dark = $clr-violet-deep $clr-bg-primary = $clr-white $clr-bg-primary_interlaced = $clr-white-alt // typography $clr-basefont = #1b262d $clr-basefont_mid = #465666 $clr-basefont_light = #607080 $clr-basefont_pale = #b9c0c0 $clr-basefont_invert = #f1f4f6 $clr-link = #1383B4 $clr-headings = $clr-violet-deep // gradients $grad-primary = linear-gradient( -45deg, $clr-primary-light 0%, $clr-primary 50%, $clr-primary-dark 100% ) // Transparent main gradient is used as an overlay $grad-primary_overlay = linear-gradient( -45deg, rgba($clr-primary-light,.5) 0%, rgba($clr-primary,.5) 50%, rgba($clr-primary-dark,.5) 100% ) // shadows $shadow-glow_mid = 0px 8px 16px rgba($clr-primary-dark, 0.3) //... 

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

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

अपूर्णता और पूर्णतावाद के बारे में

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

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

चौथा संघर्ष। ग्राफिक्स निर्यात

. , ( , , ). , , .

. ( ) ( ) . , , : , ..

, , jpeg/png , . .

« »

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

और डिजाइनर अचानक निर्यात में क्यों लगा हुआ है?

, ( ). -, . -, , (, , - ..). -, - - - , , , — . .

?

, . , , . , . , , «» ? , . .

• , .
• . , , assets - . ..
• [] — semver . , — , — , — . .. .

. «»: ,

. . «» («»). , - .


. - ( «»), « » — , . , « »: , «Duplicate to drafts», «». , . pro- «» ( :) , .

, , , «» . , , -, , 99% , .psd-.

, , , «», «» . : , , . . , «» « » . . , «Ctrl/Cmd + Click», «Enter», «Shift + Enter» , . must have.

.

. , , . , «» .

. ( , ). , .

: , . -, , « ». , , :

. , «» . , . , . , 80: , , ( % ), — .

, ( ) — .

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

यह कार्य उस व्यक्ति द्वारा नहीं किया जाता है, जिसे "दोष" या "दोष" देना चाहिए, लेकिन उस व्यक्ति द्वारा जो अधिक सहज और आसान परिणाम प्राप्त करने के लिए है

, -, .. — , , . , jpeg' , , , , CSS/JS .

« » «, , , ». . , , ( :)

, - . . , «» , , . , , — , , ) ?

№ 1

, «» — . . - , , . . , . ? , «». , -. .

: , : «», «», «» . . - , .

, — .

№ 2

. - : . , , . , . (): « *. . , , ». , .

, — .

, , , - . : , «Rectangle 1» «Button».

कुल मिलाकर

- :

• «» .
• .
• .
• .
• - ( ).
• .

(, . ).

, . , - .

, , , , :
kamushken — - «»;
mkoloskov — ;
vasyay — .

PS , — , - .

!