Figma में लेआउट तैयार करने के नियम

एक परियोजना के साथ दर्द ने हमें काम के नियमों को लिखने के निर्णय के लिए प्रेरित किया

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

डिजाइन और विकास के विभागों के बीच रेक को चलाने का नतीजा यह था कि नियमों को तैयार करने, उन्हें पत्थर में तराशने, एक पीडीएफ फाइल में डालने और "फॉलो" निर्देश के साथ प्रक्रिया में सभी प्रतिभागियों को वितरित करने का विचार था।



1. ग्रिड का उपयोग करें

ग्रिड तत्वों को व्यवस्थित करने में मदद करता है। संगीत में एक मेट्रोनोम की तरह, ताल सेट करता है। लेआउट में आदेश की धारणा, साथ ही वास्तविकता में, आंख को प्रसन्न है, "गैर-आयामीता" की भावना पैदा करता है।



ग्रिड के बारे में अच्छा लेख ।

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

पाठ फ़्रेम, आइकन, मेनू, पॉपअप, ड्रॉपडाउन, नियंत्रण, यह सब ग्रिड मॉड्यूल का एक बहु होना चाहिए। या कम से कम इसके लिए प्रयास करते हैं।



यहाँ विकास विभाग के लोग ग्रिड के बारे में क्या कहते हैं:

बेशक, जब ऑर्डर लेआउट में दिखाई दिए, तो यह आसान हो गया। अब हम प्रत्येक इंडेंट को मैन्युअल रूप से मापते हैं।

2. सचेत आकारों में पाठ ब्लॉक सेट करें



यहाँ दो समान रूप से पाठ ब्लॉक हैं। विवरण और कीमत। लेकिन अगर आप यह देखते हैं कि वे लेआउट में कैसे दिखते हैं, तो अंतर तुरंत दिखाई देता है।



विटाली, डेवलपर:

जब मैं ब्लॉक के बीच अलग-अलग संकेत के साथ लेआउट देखता हूं, तो मैं पहले से ही हिला रहा हूं !!! डिजाइनर, यह करना बंद करो, यह भयानक है।

3. साइड पैडिंग का पालन करें



अंतर को कुछ के द्वारा उचित ठहराया जाना चाहिए, यादृच्छिक मूल्यों को प्राप्त नहीं किया जाना चाहिए।

विटाली, डेवलपर:

यदि ब्लॉक में इंडेंटेशन समान है, तो पैरेंट ब्लॉक में इंडेंटेशन सेट करने वाली संपत्ति पेडिंग है: 0, 24।

दूसरे मामले में, इंडेंटेशन के पैटर्न को समझने के लिए, आपको डिजाइनर के साथ संवाद करना होगा और स्पष्ट करना होगा: इस शापित अराजकता से क्या मतलब था।

4. टेक्स्ट ब्लॉक के लिए वर्टिकल का उपयोग करें



विटाली, डेवलपर:

यह अच्छा है जब ऊंचाई में पाठ ब्लॉक के आकार स्वचालित रूप से बदलते हैं। ऐसे ब्लॉकों में, आप तुरंत गुणों के माध्यम से सही ऊंचाई प्राप्त कर सकते हैं। सही उदाहरण के विपरीत, जहां ब्लॉक की ऊंचाई 27 पीएक्स है, और वास्तव में यह 70 पीएक्स होना चाहिए।

5. पिक्सेल में पूर्णांक मानों का निरीक्षण करें

वस्तुओं के बीच अंतर पूर्णांक मूल्यों में व्यक्त किया जाना चाहिए। साथ ही वस्तुओं का आकार भी।



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

विटाली, डेवलपर:

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

6. घटकों का उपयोग करें

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

या घटकों और उनके पुन: उपयोग के रूप में व्यक्तिगत ब्लॉकों का निर्माण । मुख्य बात यह है कि चुने हुए दृष्टिकोण उन लोगों के लिए तार्किक और समझ में आता है जो आपके साथ या साथ काम करेंगे। हम आमतौर पर परियोजना की जटिलता के आधार पर घटकों का उपयोग करते हैं।



अवयव और उनका उपयोग अलग-अलग लेखों के लिए समर्पित है। घटकों के अंदर बाधाओं और ग्रिड के काम का वर्णन करने के साथ।

7. नाम समूहों और फ्रेम सार्थक

समझने योग्य नाम दूसरों को आपके लेआउट को समझने में मदद करेंगे और आपको "गर्म" शब्दों के साथ याद नहीं करेंगे।



विटाली, डेवलपर:

डेवलपर्स के बीच, चर और फ़ंक्शन नाम लिखने की संस्कृति है। और आप डिजाइनरों, बेहतर? आप आसानी से बिना नाम के नामों के लेआउट क्यों देते हैं? स्पष्ट रूप से और स्पष्ट रूप से फ़्रेम और घटकों के नाम पर हस्ताक्षर करें।

8. आकार में डबल या ट्रिपल मार्जिन के साथ एक रेखापुंज बनाओ।

पिक्सेल घनत्व में वृद्धि के साथ कई मॉनिटर हैं। एक डिजाइनर के लिए इसका क्या मतलब है?

एक ही भौतिक स्क्रीन आकार के साथ, उनमें से प्रत्येक पर एक अलग संख्या में पिक्सेल रखे जाते हैं। और यदि आप एक सामान्य मॉनिटर 1: 1 के लिए एक बिटमैप छवि तैयार करते हैं, तो रेटिना पर यह धुंधला दिखाई देगा।



विटाली, डेवलपर:

मुझे याद है कि कैसे 2000 में मैं 14,400 बिट / सेकंड की गति से अच्छे पुराने यूएस रोबोटिक्स कूरियर के माध्यम से ऑनलाइन गया था ... तब ग्राफिक्स 1v1 थे, वेबसाइटें तालिकाओं के साथ बनाई गई थीं, कोई रेटिन और अन्य स्मार्टफोन नहीं थे। सामान्य तौर पर, वे शोक नहीं करते थे। अब CSS pseudo-classes बच्चों को रेटिना और अन्य हाई-एंड डिस्प्ले के साथ विशेष रूप से डिज़ाइन किए गए रेखापुंज छवियों को उनके लिए लोड करने की अनुमति देता है। इसी समय, उन्हें हर किसी के लिए जहाज न करें।