सपाट और पतला

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


विंडोज फोन 8 और एप्पल आईओएस 7 पर इंटरफेस

क्या हुआ?

तो, सामूहिक चेतना बनावट, मात्रा और छाया के प्यार से सपाट रंग और सरल लेआउट में कैसे चली गई? यह संक्रमण कई कारकों के कारण हुआ था, लेकिन यहां उनमें से सबसे उल्लेखनीय हैं।

जानकारी अधिभार

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



कोई अनावश्यक चीजें नहीं: गेकोबार्ड विज़ुअलाइज़ेशन को मुख्य डेटा को एक नज़र में आसानी से दिखाई देने के लिए डिज़ाइन किया गया है।

सादगी सबसे ज्यादा मायने रखती है

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



एक सुंदर और न्यूनतर ओक ब्लू मौसम ऐप।

कंटेंट हर चीज का प्रमुख होता है

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

तकनीकी साक्षरता

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



फिटबिट डैशबोर्ड को उज्ज्वल, बोल्ड और समझने योग्य दृश्य तरीके से प्रस्तुत किया गया है।

प्रौद्योगिकी प्रभाव

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



वॉलमोब से वास्तविक समय की बिक्री की निगरानी: किसी भी डिवाइस से डेटा की निगरानी करता है जिस पर ब्राउज़र स्थापित है।

उत्तरदायी डिजाइन

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



कंक्रीट और सरल: ऑनसाइट ( बड़े आकार )।

शीर्ष उपकरण

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

शुरू करने से पहले

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

प्रक्रिया है

प्रक्रिया का पालन करना बहुत महत्वपूर्ण है, इससे कोई फर्क नहीं पड़ता कि आप किस शैली का उपयोग करते हैं। सादगी के लिए प्रयास करते समय ध्यान में रखने के लिए यहां कुछ विचार दिए गए हैं।

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

ग्लोबल कोठरी : कार्यशाला द्वारा राष्ट्रीय भौगोलिक शिक्षा के लिए एक इंटरैक्टिव खेल।

जाल

किसी भी तरह के इंटरफ़ेस डिज़ाइन में ग्रिड महत्वपूर्ण है, और न्यूनतर डिज़ाइन कोई अपवाद नहीं है। यदि आप दृश्य तत्वों के सीमित सेट के साथ उपयोग को साफ और सहज बनाने की कोशिश कर रहे हैं, तो ग्रिड आपकी मदद करेगा।

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

रोसुल डिजाइन से आईपैड के लिए लाइव स्कूल ऐप।

रंग

स्पष्ट रूप से, रंग दृश्य डिजाइन का एक प्रमुख घटक है। न्यूनतम इंटरफेस में, यह और भी महत्वपूर्ण है।

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

ट्रिप्लगेंट का दृश्य डिजाइन एक आश्चर्यजनक रंग पैलेट का उपयोग करता है।

टाइपोग्राफी

टाइपोग्राफी फ्लैट सामग्री साइटों की बात आती है।

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

Siteleaf पर स्वच्छ और सुपाठ्य लेआउट।

बातचीत

एक फ्लैट यूजर इंटरफेस में, यह दिखाना मुश्किल हो सकता है कि एक तत्व इंटरैक्टिव है। यहाँ कुछ विधियाँ हैं जिनका मैं उपयोग करता हूँ।

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

एक साधारण लेआउट में और इष्टतम विपरीत के साथ डिजाइन तत्व: तास्की ।

निष्कर्ष

मैं सख्त डिजाइन नियमों में विश्वास नहीं करता। और मुझे यह पसंद है कि डिजाइनर स्वच्छ और सरल इंटरफेस बनाने के लिए इतनी कोशिश कर रहे हैं। क्या फ्लैट डिजाइन ग्रेडिएंट और छाया को बाहर करता है? बिल्कुल नहीं। वास्तव में, कुछ सबसे दिलचस्प काम मैंने फ्लैट और वॉल्यूमेट्रिक डिज़ाइन के बीच हाल ही में संतुलन देखा है, बुद्धिमानी से सामग्री पेश करते हैं और बातचीत को सहज रखते हैं।

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

अनुवादक से

अच्छे फ्लैट इंटरफेस के उदाहरण:
विक्टर Erixon द्वारा
जैकब एंटालिक द्वारा
तिबेरिउ नेमू द्वारा