मटेरियल डिझाइन. संकल्पनेचे तपशीलवार वर्णन. मोबाइल अनुप्रयोग मार्गदर्शक तत्त्वे

कीप आणि इनबॉक्स ऍप्लिकेशन्सच्या विकासामध्ये त्यांच्या तंत्रज्ञानाच्या वापरावर Google डिझाइन इव्हेंजलिस्ट मुस्तफा कुर्तुल्डू.

बुकमार्क

स्कायंग ऑनलाइन इंग्रजी शाळेच्या टीमने भाषांतर तयार केले आहे.

मटेरियल डिझाइन टूल्स आणि नियमांचा एक संच प्रदान करते जे तुम्हाला अनुप्रयोग इंटरफेस तयार करताना जाणीवपूर्वक UX डिझाइनकडे जाण्यास मदत करतात.

परंतु ही तत्त्वे एखाद्या विशिष्ट उत्पादनासाठी कार्य करत नसल्यास काय? आणि जेव्हा Google डिझाइनर क्लासिक मार्गदर्शक तत्त्वांच्या पलीकडे जाणारे उत्पादन विकसित करतात तेव्हा ते काय करतात?

साहित्य मार्गदर्शक तत्त्वे अनुकूल आहेत. या लेखात, आम्ही दोन Google ॲप्स पाहू, Keep आणि Inbox, ते केवळ काही नियमांपासून कसे विचलित होत नाहीत, तर मटेरियल डिझाइनच्या नवीन तत्त्वांना आकार देतात हे समजून घेण्यासाठी.

इनबॉक्स: मॉड्यूलर ग्रिड

नवीन ईमेल सेवा विकसित करणे हे Google साठी खूप महत्त्वाकांक्षी काम आहे, जीमेल बाजारात आधीच स्थापित आहे. मटेरियल डिझाइनच्या नवीन नियमांनुसार इंटरफेस डिझाइनमध्ये खोली जोडणे आणि एक अद्वितीय वापरकर्ता अनुभव आणि ब्रँड ओळख निर्माण करणे हे इनबॉक्सचे ध्येय होते.

जेव्हा इनबॉक्स टीम प्राथमिक डिझाईन्स एकत्र करत होती, तेव्हा मटेरियल डिझाइन संकल्पना विकसित होत होती. यामुळे UI मधील खोली आणि व्हॉल्यूमचे आव्हान हाताळताना मटेरियल डिझाइनसाठी मानके सेट करण्याची इनबॉक्सला उत्तम संधी मिळाली.

खोली

इनबॉक्सचे मूळ डिझाइन पुरेसे लवचिक नव्हते—ग्रिड स्पेसने केवळ सात ईमेल्स 13-इंच स्क्रीनवर बसू दिले. हे खूपच कमी होते, विशेषतः जीमेलच्या तुलनेत, जे 16-20 अक्षरांमध्ये बसते.

तुम्ही लगतच्या विंडोमध्ये Gmail आणि Inbox उघडल्यास, तुम्हाला व्हिज्युअल वेटमध्ये मोठा फरक दिसेल. आणि सर्वात मोठे आव्हान म्हणजे सामग्री आणि पांढर्या जागेत योग्य संतुलन शोधणे.

टिम स्मिथ

इनबॉक्समध्ये मुख्य डिझायनर

ग्रिड सेटिंग्ज, रेषेची उंची आणि फॉन्ट कसा दिसतो हे बदलून, इनबॉक्स डिझायनर्स इंटरफेसमध्ये इष्टतम खोली प्राप्त करू शकले आणि तरीही 12-17 अक्षरे प्रदर्शित करतात, प्रत्येक मटेरियल डिझाइन कार्डमध्ये. अनुप्रयोग इंटरफेस वापरकर्त्याच्या डिव्हाइसशी जुळवून घेतो. उदाहरणार्थ, "विषय" ओळीतील फॉन्ट स्क्रीनच्या आकारानुसार बदलतो.

रंग, प्रतिमा आणि चिन्ह

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

डाव्या नेव्हिगेशन बारवर अनेक चिन्हे आहेत, त्यांचे रंग अनुप्रयोगातील त्यांच्या कार्यांशी संबंधित आहेत. जेव्हा वापरकर्ता हिरव्या पूर्ण बटणावर क्लिक करतो, तेव्हा शीर्ष पट्टीची पार्श्वभूमी देखील हिरवी होते, संदर्भ बदलला आहे हे सूचित करते.

शीर्ष पॅनेल

टीमसाठी आणखी एक महत्त्वाचं काम म्हणजे ॲप्लिकेशनचा टॉप बार विकसित करणं. ब्राउझर विंडोच्या रुंदीमध्ये न पसरता बदलता येणारे पॅनेल तयार करण्याची सुरुवातीची कल्पना होती, परंतु सामग्रीनुसार बदलेल.

आपण आता पहात असलेल्या पूर्ण-स्क्रीन मोडवर आम्ही शेवटी पोहोचेपर्यंत या संकल्पनेच्या सुमारे डझनभर विविध बदलांवर काम केले. सर्वोत्तम शैली निवडण्यापूर्वी आम्ही अनेक शोध बार संकल्पना देखील तयार केल्या.

टिम स्मिथ

इनबॉक्समध्ये मुख्य डिझायनर

इनबॉक्समधील कार्डे विस्तृत आणि आकुंचन पावतात, म्हणजे वापरकर्ता ईमेलशी कसा संवाद साधतो यावर अवलंबून हेडरचे स्वरूप बदलते. शीर्ष पट्टी इतर Google ॲप्ससह शोध बार आणि मेनू देखील प्रदर्शित करते. हा दृष्टीकोन इनबॉक्सला इंटरफेस गुंतागुंत न करता अनुकूल राहण्याची परवानगी देतो.

ठेवा: प्रतिसादात्मक नेव्हिगेशन नमुने

Keep हे क्रॉस-प्लॅटफॉर्म नोट-टेकिंग ॲप आहे जे स्क्रीनवर कार्ड विस्तृत आणि कोलॅप्स करते, नवीन नोट जोडताना वापरकर्त्याचे लक्ष केंद्रित करते. तळाशी नेव्हिगेशन बार तुम्हाला एका क्लिकमध्ये त्वरीत नवीन नोट तयार करण्याची परवानगी देतो.

प्रतिबद्धता, रिक्त स्क्रीन आणि ॲनिमेशन

सामान्यतः, पृष्ठावर कोणतीही सामग्री नसताना वापरकर्त्याला रिक्त स्क्रीनचा सामना करावा लागतो. Keep मध्ये, ही स्क्रीन रिक्त कॅनव्हाससारखी दिसते जिथे वापरकर्ता त्यांच्या कल्पना त्वरीत लिहू शकतो.

व्हाईट स्पेस वापरकर्त्याला पॅनेलमधील मेनू आयटम एक्सप्लोर करण्यासाठी प्रोत्साहित करते जे चिन्ह म्हणून दर्शविलेले विविध फिल्टर प्रदर्शित करण्यासाठी विस्तृत होते; एक लेआउट मेनू जो तुम्हाला सूची आणि ग्रिड दरम्यान स्विच करू देतो आणि डावीकडे नेव्हिगेशन बार जिथे तुम्ही मूलभूत ॲप सेटिंग्ज बदलू शकता.

आम्ही ॲनिमेशनवर खूप काम केले - नोट्स प्रवाहाच्या रूपात कशा प्रदर्शित होतात, तुम्ही त्या उघडता आणि बंद करता तेव्हा त्या कशा हलतात.

जिनेव्हिव्ह क्युव्हास

योग्य साहित्य घटक निवडणे: तळाशी नेव्हिगेशन किंवा फ्लोटिंग ॲक्शन बटण

संक्षिप्तता आणि वापरण्यास सुलभता ही Keep ची प्रमुख वैशिष्ट्ये आहेत. ॲपच्या रीडिझाइन दरम्यान, विकसकांनी मटेरियल डिझाइन पॅटर्नचा अभ्यास केला आणि शेवटी कार्ड निवडले जे एकमेकांपासून नोट्स वेगळे करण्यात मदत करतात, एक डावा नेव्हिगेशन बार जो ॲप कस्टमाइझ करणे सोपे करतो आणि संदर्भ मेनू जो नोटच्या प्रकारानुसार बदलतो - जसे चेकबॉक्सेससह नोट्स जे सूचीमधील घटक तपासण्यासाठी आणि बदलण्यासाठी मेनू प्रदर्शित करतात.

एकत्रितपणे, हे घटक एक स्पष्ट आणि कार्यात्मक इंटरफेस तयार करतात, विशिष्ट परिस्थितीशी जुळवून घेतात. Keep पुन्हा डिझाइन करताना, निर्मात्यांनी अनुप्रयोगाच्या काही मूलभूत नेव्हिगेशन घटकांसह प्रयोग केले - विशेषतः, त्यांनी विद्यमान नेव्हिगेशन फ्लोटिंग ॲक्शन बटणासह बदलण्याचा प्रयत्न केला.

मूळ नेव्हिगेशनने तुम्हाला एका टॅपने नवीन नोट तयार करण्याची अनुमती दिली आणि फ्लोटिंग ॲक्शन बटणाला दोन क्लिकची आवश्यकता आहे: एक पर्याय दर्शविण्यासाठी आणि दुसरी टीप तयार करण्यासाठी.

जेव्हा आम्ही फ्लोटिंग बटण सादर केले, तेव्हा आमच्या काही वापरकर्त्यांनी तक्रार केली की दोन क्लिकमध्ये नोट तयार करणे तितकेसे सोयीचे नव्हते.

जिनेव्हिव्ह क्युव्हास

Google Keep सॉफ्टवेअर अभियंता

याआधी ॲप वापरणाऱ्या आणि एका-क्लिक नेव्हिगेशनसाठी वापरलेल्या अनेक वापरकर्त्यांनी हा बदल मंजूर केला नाही. चाचणी करून आणि शेवटी फ्लोटिंग बटण नाकारून, Keep डेव्हलपर त्यांच्या उत्पादनाच्या आवडींना अनुकूल असे समाधान निवडण्यास सक्षम होते.

मार्गदर्शक, नियमांचा संच नाही

Keep आणि Inbox संघांनी मार्गदर्शक तत्त्वे त्यांच्या अनुप्रयोगांसाठी आधार म्हणून वापरली. जेव्हा त्यांना वापरकर्त्याच्या परिस्थितीचा सामना करावा लागला जो कार्य करत नाही, तेव्हा ते वापरकर्त्यांच्या गरजा पूर्ण करण्यासाठी त्यांचे डिझाइन स्वीकारण्यास सक्षम होते.

मटेरियल डिझाईन Google च्या अनेक वर्षांच्या अनुभवावर आधारित मार्गदर्शन देते, परंतु ते पूर्णपणे प्रत्येक समस्या सोडवू शकत नाही. Keep आणि Inbox उदाहरणे दर्शविते की तुम्ही मटेरियल डिझाइन मार्गदर्शक तत्त्वे वापरू शकता, त्यांना तुमच्या उत्पादनासाठी आवश्यकतेनुसार बदलू शकता.

मटेरियल डिझाईन ही सेवा, इंटरफेस आणि इतर उत्पादने एकत्रित करण्यासाठी तयार केलेली डिझाइन संकल्पना आहे. ही संकल्पना Google ने विकसित केली होती आणि 25 जून 2014 रोजी Google I/O अधिवेशनात मोठ्या प्रेक्षकांसमोर सादर केली होती. विकास रंग योजना, गुणधर्म आणि डिझाइन ऑब्जेक्ट्सच्या घटकांवर आधारित आहे. मटेरियल डिझाईन नियमितपणे विकासकांद्वारे पूरक आणि अद्यतनित केले जाते. सोप्या भाषेत सांगायचे तर, मूळ कल्पना म्हणजे एक ब्लॉक डिझाइन जे शॅडो इफेक्ट वापरून कार्ड्सप्रमाणे क्यूब्समध्ये उघडते आणि दुमडते. कार्ड स्वतः आपापसांत सहजतेने स्विच केले पाहिजे.

या डिझाइनची रणनीती एक समग्र वापरकर्ता अनुभव तयार करण्यावर आधारित आहे, पीसी वापरकर्त्याच्या जीवनातील विविध क्षेत्रांमध्ये सेवांमध्ये प्रवेश करण्याची क्षमता.

वस्तू तयार करताना, आपण शतकानुशतके अनुभवातून पुढे जातो आणि त्यावर अवलंबून असतो. पण सॉफ्टवेअर डिझाईन अजूनही नवजात आणि पद्धतशीरपणे विकसित होणारे उत्पादन आहे. त्याकडे पूर्णपणे पाहून, आम्ही स्वतःला विचारले: त्यात काय समाविष्ट आहे?

- जॉन विली, चीफ डिझाईन ऑफिसर, गुगल सर्च

मुख्य तत्त्वे

मटेरियल डिझाइनच्या मुख्य तत्त्वांमध्ये स्पर्शिक पृष्ठभाग, मुद्रण डिझाइन, अर्थपूर्ण ॲनिमेशन आणि अनुकूली डिझाइन यांचा समावेश होतो.

स्पर्शिक पृष्ठभाग.इंटरफेसमध्ये "डिजिटल पेपर" असते. या "पेपर" चे स्तर एकावर एक ठेवलेले आहेत आणि सावल्या टाकल्या आहेत. या सावल्यांसाठी धन्यवाद, पीसी वापरकर्ते इंटरफेससह कार्य करण्याच्या मूलभूत गोष्टी चांगल्या प्रकारे समजतात.

प्रिंट डिझाइन."डिजिटल पेपर" "डिजिटल शाई" दाखवतो. डिजिटल शाई प्रतिमांसाठी, पारंपारिक मासिक किंवा पोस्टर डिझाइनचा दृष्टीकोन वापरला जातो. प्रिंट डिझाइनचे मुख्य घटक स्केल, ग्रिड, रंग आणि जागा आहेत. यातून फोकस, पदानुक्रम आणि अर्थ तयार होतो. रंग, फॉन्ट, आकार, पार्श्वभूमी आणि इतर घटकांबद्दल धन्यवाद, इंटरफेस डिझाइन स्वतः तयार केले आहे. त्याचा वापर करून मुख्य कार्यक्षमतेवर, उत्पादनाच्या किंवा सेवा व्यवस्थापनाच्या मुख्य मुद्द्यांवर लक्ष केंद्रित केले जाते.

अर्थपूर्ण ॲनिमेशन.ऍप्लिकेशन ॲनिमेशनची स्पष्टता आणि समजण्यायोग्यता वैयक्तिक संगणकाच्या वापरकर्त्याने या प्रोग्राममध्ये वापरलेल्या क्रियांचे परिणाम समजून घेण्यासाठी घालवलेला वेळ थेट निर्धारित करते. मटेरियल डिझाइन इंटरफेस व्यवस्थापित करण्यासाठी ॲनिमेशन हा एक प्रकारचा इशारा आहे.

प्रतिसादात्मक डिझाइन.मटेरियल डिझाईनच्या वैशिष्ट्यांपैकी एक म्हणजे त्याची अष्टपैलुत्व, म्हणजेच संगणक, फोन, टॅबलेट इत्यादी विविध उपकरणांवर वर वर्णन केलेले तीन घटक वापरण्याची क्षमता.

स्पर्शिक पृष्ठभाग

स्पर्शिक पृष्ठभाग हे "डिजिटल पेपर" चे तेच तुकडे आहेत ज्यात, नेहमीच्या कागदाच्या विपरीत, सुपरपॉवर असतात - ते त्यांचे आकार ताणू शकतात, कनेक्ट करू शकतात आणि बदलू शकतात.

पृष्ठभाग

पृष्ठभाग हा डिझाईन घटकाचा भाग असतो जो सावली टाकतो ज्यामुळे एक घटक दुसऱ्या घटकापेक्षा वेगळा होतो. मटेरियल डिझाइन जास्तीत जास्त साधेपणा आणि "स्वच्छ" डिझाइनसाठी प्रयत्न करते.

"शुद्ध" डिझाइनला सहसा रचना न वापरता ग्रेडियंट किंवा सावलीद्वारे ऑब्जेक्टचे गुणधर्म व्यक्त करण्याची क्षमता म्हणतात. सर्व पृष्ठभागांची स्वतःची सावली आणि विशिष्ट उंची असते.

खोली

"फ्लॅट डिझाइन" मध्ये ते व्हॉल्यूम दर्शविणाऱ्या सावल्या न वापरण्याचा प्रयत्न करतात. त्याच वेळी, छाया इंटरफेस घटकांची विशिष्ट पदानुक्रम आणि रचना परिभाषित करतात. खोल सावली मुख्य विषयावर प्रकाश टाकते आणि सूक्ष्म आणि मोहक मार्गाने त्यावर लक्ष केंद्रित करते.

खोली म्हणजे वस्तू कशा परस्परसंवाद करतात याबद्दल एक संकेत आहे. वापरकर्ता स्क्रोलिंगच्या क्षणी, हिरवी प्लेट शीर्ष स्तराशी संलग्न केली जाते आणि सावली बनवते. हे केवळ “शाई” ची हालचालच नाही तर खाली असलेल्या पांढऱ्या पार्श्वभूमीची हालचाल देखील स्पष्टपणे दर्शवते.

खोलीचा तळाचा थर "तळाशी" आहे.

• लॉजिस्टिक्स लक्षात ठेवा.विविध डायलॉग बॉक्स, फ्लोटिंग विंडो, टूलबार यांची विशिष्ट उंची असते. टक्कर टाळण्यासाठी, त्यांना वेळोवेळी Z अक्षाच्या बाजूने जाणे आवश्यक आहे.
• बटणे जबरदस्ती करू नका.तुम्ही फक्त तातडीच्या गरजेच्या वेळी फ्लोटिंग बटण वापरावे, कारण त्याचा वापर केल्याने लगेचच डिझाइनमध्ये मटेरियल डिझाइन प्रभाव येतो. तुम्ही कोणत्याही कृतीची पुष्टी करण्यासाठी किंवा विंडो बंद करण्यासाठी याचा वापर करू नये.
• सर्व काही कार्डवर असणे आवश्यक नाही.जेव्हा ऑब्जेक्टमध्ये अनेक फॉर्म आणि मोठ्या प्रमाणात सामग्री असते तेव्हाच कार्ड वापरणे योग्य आहे. इतर पर्यायांसाठी, पारंपारिक मजकूर किंवा सूची वापरणे अधिक अर्थपूर्ण आहे.
• डायलॉग बॉक्समध्ये मिनिमलिझम.जेव्हा प्रश्न उद्भवतात तेव्हाच वापरकर्त्याच्या क्रियांची पुष्टी करण्यासाठी डायलॉग बॉक्स वापरावे.

प्रिंट डिझाइन

मटेरियल डिझाइनच्या पृष्ठभागावर असलेल्या सर्व वस्तू "डिजिटल शाई" सह लागू केल्या जातात. या वस्तू प्रतिमा, चाचणी, चित्रग्राम आहेत. या वस्तूंची मांडणी मुद्रण डिझाइनच्या तत्त्वाचे पालन करते.

मोहक टायपोग्राफी

मुद्रण डिझाइनमध्ये टायपोग्राफी महत्त्वपूर्ण आहे. हे सामग्रीची रचना सेट करते आणि विशिष्ट ब्रँडच्या शैलीच्या निर्मितीवर प्रभाव पाडते.

टायपोग्राफी घटकांची एक रचना बनवते ज्यांचे स्वतःचे आकार, फॉन्ट, पदानुक्रम त्यांच्या मदतीने, कोणते घटक अधिक महत्त्वपूर्ण आहेत आणि त्यापैकी काही मुख्य आहेत आणि इतर दुय्यम का आहेत हे आपल्याला दृश्यमानपणे समजते.

विरोधाभासी टायपोग्राफी

मुद्रणाचा आणखी एक महत्त्वाचा सिद्धांत म्हणजे टायपोग्राफीचा विरोधाभास. हे पाहणे सोपे आहे की मोठ्या शीर्षकाचा आणि गडद फॉन्टचा अर्थ काहीतरी महत्त्वाचा आणि मूलभूत आहे, तर लहान मजकूर आणि हलका टोन म्हणजे दुय्यम माहिती. कॉन्ट्रास्ट आपल्याला सामग्रीचे संपूर्ण सौंदर्यशास्त्र देऊन मुख्य मुद्दे हायलाइट करण्यास अनुमती देते.

मॉड्यूलर ग्रिड आणि मार्गदर्शक

स्क्रीन डिझाइन मूलभूत ग्रिड वापरते, तर प्रिंट डिझाइन मॉड्यूलर ग्रिड वापरते. मटेरियल डिझाइनसाठी, 8dp च्या पायरीसह ग्रिड वापरला जातो.

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

भौमितिक आयकॉनोग्राफी

अँड्रॉइड सिस्टीमच्या आधारे सर्वात सोपी चिन्हे दीर्घकाळ वापरली जात आहेत. मटेरिअल डिझाईनमध्ये ते आणखी सोप्या आणि दृष्यदृष्ट्या अधिक सुखकारक दिसतात.

उदाहरणार्थ, निर्देशक आणि बटणे समृद्ध, चमकदार रंगांमध्ये हायलाइट केली जातात. या रंगांबद्दल धन्यवाद, ते मुख्य नियंत्रण घटकांवर (फ्लोटिंग बटणे इ.) जोर देतात. डिझाइनमध्ये अतिरिक्त रंग सादर करणे आवश्यक असल्यास, मूलभूत, विवेकपूर्ण शेड्स वापरण्याची शिफारस केली जाते.

विषयावरील चिन्ह डाउनलोड करा:

रंग

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

ॲक्शन बार मुख्य रंगाने रंगविला जातो आणि स्टेटस बार अधिक संतृप्त टोनने हायलाइट केला जातो. पट्टे, इंडिकेटर, फ्लोटिंग बटणांसाठी उच्चारण रंग वापरला जातो. हे मंडळाच्या मुख्य घटकांकडे लक्ष वेधते.

उच्चार बिंदूच्या दिशेने आणि कमी प्रमाणात ठेवले जातात. उर्वरित इंटरफेससाठी, नियमानुसार रंग वापरले जातात: मोठ्या प्रमाणात मजकूर (मेल अक्षरांची सूची) मानक आकारात सोडला जातो आणि पीसी वापरकर्त्याचे लक्ष वेधण्यासाठी रंग जोडला जातो; थोड्या प्रमाणात मजकूर (कॅल्क्युलेटर, फोटो) आकारात 2-3 वेळा वाढविला जातो आणि रंगीत डाय जोडले जातात.

अँड्रॉइड सिस्टममध्ये, तुम्ही इंटरफेसला डायनॅमिकली कलर करू शकता, म्हणजेच एकूण फोटोमधून मुख्य रंग हायलाइट करा.

सुंदर फोटो

मटेरियल डिझाईनमध्ये तुम्हाला विविध छायाचित्रे आणि चित्रे वापरण्याची आवश्यकता आहे. अनेकदा चित्रांना फ्रेम नसतात. प्रतिमांपासून लक्ष विचलित होऊ नये म्हणून स्टेटस बार स्वतःच रंगहीन बनविला जातो. "डिजिटल शाई" नेहमीच केवळ सौंदर्यासाठीच नव्हे तर डिझाइनच्या कार्यक्षमतेसाठी देखील वापरली जाते.

• ब्रँडिंगची शिफारस केली जाते.
• आम्ही इंडेंट्स आणि मोकळ्या जागेबद्दल विसरू नये (बेस ग्रिड 8dp साठी, इंडेंटसाठी - 72 dp).
• चमकदार प्रतिमा वापरा.

अर्थपूर्ण ॲनिमेशन

मटेरियल डिझाइन, भौतिक जगाप्रमाणे, वापरकर्त्याला क्षणात काय घडले हे दाखवण्यासाठी अर्थपूर्ण ॲनिमेशन वापरते. म्हणजेच, वापरकर्त्याने हे पाहिले पाहिजे की एकही वस्तू कोठूनही येत नाही आणि कोठेही अदृश्य होत नाही.

उदाहरण १.ॲनिमेशन दर्शविते की हे विशिष्ट कार्ड, क्लिक केल्यावर, अग्रभागी आले, उघडले आणि अधिक माहिती दृश्यमान झाली.

उदाहरण २.जेव्हा तुम्ही कॅलेंडरमधील तारखेवर क्लिक करता, तेव्हा एक इव्हेंट पॉप अप होतो, जो सामान्य कॅलेंडरमधून सहजतेने फाटलेला असतो, एका वेगळ्या ब्लॉकमध्ये बदलतो आणि या घटनेच्या वर्णनासह तपशीलवार वेगळ्या ब्लॉकमध्ये प्रकट होतो.

ॲनिमेशन वापरकर्त्याचे लक्ष एकाग्र करण्यात आणि इंटरफेसच्या क्रियांवर त्याचे लक्ष केंद्रित करण्यास मदत करते.

प्रतिक्रिया

मटेरियल डिझाईनमधील ॲनिमेशनचा आणखी एक महत्त्वाचा मुद्दा म्हणजे पीसी वापरकर्त्याच्या काही क्रियांची प्रतिक्रिया. तुमच्या बोटांना स्पर्श केल्यानंतर Android L इंटरफेसमध्ये बदल होतात. हे बदल लहरीसारख्या क्रियेत परावर्तित होतात.

मायक्रोॲनिमेशन

मायक्रो ॲनिमेशन अत्यंत महत्त्वाचे आहेत. ते सर्व वापरकर्त्यांच्या हाताळणीला प्रतिसाद म्हणून वापरले जातात. हे इंटरफेस अधिक तपशीलवार आणि प्रतिसाद देते.

स्पष्टता आणि तीक्ष्णता

ॲनिमेशनचे अंतिम तत्व म्हणजे स्पष्टता आणि कृतीची तीक्ष्णता. मटेरियल डिझाइनमध्ये मनोरंजक ॲनिमेशन वक्र आहे. सर्व ऑब्जेक्ट्स वापरकर्त्याच्या क्रियांना त्वरीत प्रतिसाद देतात, वेगाने परत येतात, परंतु गोठण्यास आणि अंतिम शांत स्थितीत संक्रमण होण्यास थोडा जास्त वेळ लागतो. शेवटी, वापरकर्ता प्रतीक्षा करण्यात वेळ वाया घालवत नाही, याचा अर्थ इंटरफेसशी संवाद साधताना तो नाराज होत नाही किंवा नकारात्मक भावना अनुभवत नाही.

• ॲनिमेशनचा आगाऊ विचार करा.
• ॲनिमेशनचा चांगल्या प्रकारे वापर करा (अति वापरास परावृत्त केले जाते, कारण सर्व ॲनिमेशन अर्थपूर्ण असणे आवश्यक आहे).

प्रतिसादात्मक डिझाइन

मटेरियल डिझाइनची अंतिम महत्त्वाची बाब म्हणजे प्रतिसादात्मक डिझाइनची संकल्पना. याचा अर्थ भिन्न डिव्हाइस स्क्रीनवर (फोन, पीसी, टीव्ही इ.) इतर तीन पैलू लागू करण्यासाठी पर्याय.

सामान्य ते विशिष्ट

स्क्रीन स्वतः संकुचित करण्याबरोबरच माहितीचे प्रमाण संकुचित करणे ही सर्वात लोकप्रिय पद्धत आहे. तुम्ही तुमच्या टीव्हीवर भरपूर सामग्री बसवू शकता. फोन प्रथम एक सूची प्रदर्शित करतो, ज्यावर क्लिक करून तपशीलवार माहिती उघड केली जाऊ शकते.

इंडेंटेशन

मोठ्या स्क्रीनवर, ब्लॉक्स वापरून सामग्री ठेवली जाते. ते मोकळी जागा भरतात आणि रुंदीमध्ये ताणले जाऊ शकतात. सामग्रीची वाचनीयता लक्षात घेऊन स्ट्रेचिंग होते. स्क्रीनच्या उर्वरित भागावर, इंडेंट तयार केले जातात ज्यावर फ्लोटिंग बटणे किंवा टाइल ठेवता येतात.

मार्गदर्शक

मार्गदर्शक वापरून इंडेंट सेट केले जातात. स्मार्टफोन, टॅब्लेट, संगणक आणि टीव्हीसाठी इंडेंटची रुंदी पूर्णपणे भिन्न असेल. तर, टॅब्लेटसाठी ते 80 डीपी आहे आणि स्मार्टफोन स्क्रीनसाठी ते केवळ 72 डीपी आहे.

परिमाण

सर्व इंटरफेस घटकांमध्ये अनेक प्रमाणात असणे आवश्यक आहे. टॅब्लेट आणि स्मार्टफोनचे स्क्रीन आकार एकमेकांपेक्षा भिन्न आहेत, परंतु एकाधिक पॅरामीटर्ससह घटक वापरणारे अनुप्रयोग कोणत्याही डिव्हाइस आकाराशी जुळवून घेतात.

अवरोध

ब्लॉक्सची मॉड्यूलर ग्रिड इष्टतम निर्णय घेण्यासाठी व्हिज्युअल लय सेट करण्यात मदत करते.

टूलबार

कृती बार- इंटरफेसच्या मुख्य घटकांपैकी एक. त्यात क्रिया बटणे आणि शीर्षके आहेत. अँड्रॉइड एल मध्ये, ॲक्शन बार एक आकर्षक आणि फंक्शनल कंट्रोल युनिट बनला आहे. टूलबारमध्ये फॉर्म, फ्लोटिंग बटणे आणि पुल-आउट नेव्हिगेशन सोयीस्कर नियंत्रणांसह ठेवता येतात या वस्तुस्थितीमुळे हे साध्य झाले.

• साध्या साधनांसाठी तुम्ही नेव्हिगेशन ड्रॉवर वापरू नये. ऍप्लिकेशनमधील अनेक कामांसाठी नेव्हिगेशन वापरण्याची शिफारस केली जाते.
• टूलबारसह बोल्ड व्हा.
• फ्लोटिंग बटण सर्वात इष्टतम ठिकाणी ठेवा. तळाशी कोपर्यात काटेकोरपणे स्नॅप करू नका.
• दोन्ही उभ्या आणि क्षैतिज डिव्हाइस स्क्रीनसाठी इंटरफेस घटकांचा सराव करा.

एक रूपक म्हणून साहित्य

Google डेव्हलपर्सने आधुनिक तंत्रज्ञान आणि विज्ञानाच्या नवकल्पनांसह चांगले, आकर्षक डिझाइन एकत्र केले आहे.

डिजिटल क्षेत्रात भौतिकवादाचा वापर होण्याची ही पहिलीच वेळ नाही. अशाप्रकारे, ऍपलने अलीकडेच इंटरफेस डिझाइनमध्ये स्क्युओमॉर्फिझम (आपल्या सभोवतालच्या भौतिक जगातून व्हिज्युअल वस्तूंच्या आकलनाचे अनुकरण) तत्त्वज्ञान वापरले.

याचे उत्तम उदाहरण म्हणजे न्यूजस्टँड ॲप. येथे आम्ही आम्हाला परिचित असलेल्या वस्तूंची कल्पना केली: वर्तमानपत्रे, मासिके जी शेल्फवर उभी आहेत. या मासिकांमधून फ्लिप करून, आपण दैनंदिन जीवनात सामान्य पुस्तकातून फ्लिप करण्याच्या वास्तविक कृतीचे अनुकरण करतो. अशा प्रकारे, पारंपारिक वास्तविक जीवन "डिजिटल" मध्ये डुप्लिकेट केले जाते.

डिजिटल डिझाइनचा विकास

बहुसंख्य वापरकर्ते दररोज डिजिटल वातावरणाशी संवाद साधतात. त्यांना यापुढे आभासी वस्तू आणि वास्तविक जग यांच्यातील अचूक समानतेची आवश्यकता नाही. जितक्या लवकर सर्व वापरकर्ते या क्षणाची सवय होतील, तितक्या लवकर डिजिटल डिझाइन सक्रियपणे पुढे जाण्यास प्रारंभ करू शकेल.

यावर आधारित, मटेरियल डिझाईन आता स्क्युओमॉर्फिझमने प्रभावित होत नाही. आता आभासी वस्तूंच्या उत्क्रांतीची ही एक नवीन पायरी आहे.

मूलभूत आधार म्हणून दृश्यमानता

मटेरिअल डिझाईनमधील विविध नियंत्रणांचे पृष्ठभाग आणि किनारे वास्तविक जीवनातील क्रियांप्रमाणेच इंटरफेस कसे नेव्हिगेट आणि हाताळायचे याचे संकेत तयार करतात.

वस्तूंची स्पर्शिक वैशिष्ट्ये मुख्य वस्तूंपासून अतिरिक्त वस्तूंमध्ये फरक करण्यास आणि त्यांच्यातील संबंध निर्धारित करण्यात मदत करतात.

मटेरियल डिझाइनच्या मूलभूत गोष्टींमध्ये प्रिंट डिझाइन तत्त्वांचाही समावेश होतो. केवळ सौंदर्यशास्त्रावरच भर दिला जात नाही तर एक विशेष रचना, पदानुक्रम तयार करणे आणि एक साधी व्यवस्थापन प्रणाली तयार करणे यावर देखील भर दिला जातो.

मटेरियल डिझाइनचा व्हिज्युअल घटक समृद्ध रंग, कुरकुरीत कडा, मोठे टायपोग्राफी आणि विविध घटकांमधील मोठ्या मोकळ्या जागांवर आधारित आहे.

अर्थपूर्ण गतिशीलता

मुख्य लक्ष वापरकर्त्याच्या वर्तनावर (क्रियांवर) केंद्रित आहे. डिझाईनसह त्याचा परस्परसंवाद संचित वापरकर्त्याच्या अनुभवाच्या आधारावर होतो आणि दुसरे काहीही नाही.

मटेरियल डिझाइन शैलीतील वेबसाइट्सची उदाहरणे

संकल्पना ऑनलाइन रिलीझ होताच, मटेरियल डिझाइनचे बरेच प्रतिनिधी ऑनलाइन दिसले.

उदाहरण साइट्स मटेरियल डिझाइनच्या मूलभूत तत्त्वांनुसार तयार केल्या आहेत. ते सोपे आणि स्पष्ट आहेत, त्यात फ्लोटिंग बटणे, सावल्या, चमकदार रंग आणि व्हिज्युअल इफेक्ट्स आणि गुळगुळीत नेव्हिगेशन आहेत. हे सर्व एक उत्तम वापरकर्ता अनुभव जोडते.

व्हिडिओ

मटेरियल डिझाईनने प्रचंड प्रेक्षक आकर्षित केले आहेत. तो अचूकपणे UI कसा तयार करायचा ते दाखवतो जेणेकरून ते वापरकर्त्याला पूर्णपणे समजण्याजोगे आणि स्पष्ट होईल, अगदी वास्तविक जगातील एखाद्या परिचित वस्तूप्रमाणे ज्याला तुम्ही तुमच्या हातांनी स्पर्श करू शकता.

Google टीममधील डिझायनर्सपैकी एक असलेल्या रोमन नुरिकने मटेरियल डिझाइनच्या तत्त्वांचे पालन करण्यासाठी विकास प्रक्रियेदरम्यान I/O 2014 अनुप्रयोग कसा बदलला हे स्पष्ट केले. आम्ही त्याचा व्हिडिओ खास तुमच्यासाठी अनुवादित केला आहे.

Google Design चॅनेलवरील व्हिडिओ.

• ट्यूटोरियल

"हा कंटाळवाणा संवाद खरोखर आवश्यक आहे का?"

या लेखात, मी मटेरियल डिझाइनची मुख्य तत्त्वे सांगितली आणि त्यांची अंमलबजावणी कशी करावी याबद्दल सल्ला दिला. मजकूर विकसकांसाठी मास्टर क्लासच्या पार्श्वभूमीवर लिहिला गेला होता, जो आम्ही, रोबोट्स, Google च्या रशियन ऑफिस (थिंक मोबाइल) सह एकत्रितपणे आयोजित केला होता.

एकेकाळी, सर्व Google उत्पादने वेगवेगळ्या प्रकारे खराब दिसत होती. एक उत्पादन देखील वेगवेगळ्या प्लॅटफॉर्मवर विसंगत दिसत होते.

2011 मध्ये सर्व काही बदलू लागले, जेव्हा Google ने त्याच्या उत्पादनांच्या इकोसिस्टमच्या दृश्य भागाला एकत्रित करण्यासाठी कठोर परिश्रम करण्यास सुरुवात केली आणि त्याला प्रोजेक्ट केनेडी म्हटले.

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

आख्यायिका अशी आहे: अध्यक्ष केनेडी यांनी एका माणसाला चंद्रावर उड्डाण करण्याचा कार्यक्रम सुरू केला (जर तुमचा विश्वास असेल की हे उड्डाण कधी झाले असेल). आणि Google मधील बिग बॉस, लॅरी पेज, या तत्त्वाचा दावा करतात की उत्पादनांमध्ये 10% सुधारणा करण्यात काही अर्थ नाही - ते प्रतिस्पर्ध्यांपेक्षा 10 पट चांगले असले पाहिजेत. तुम्ही एखादे उत्पादन लॉन्च करणार असाल तर थेट चंद्रावर जा. येथे देखील, सर्वकाही मूलभूतपणे पुन्हा करण्याचा निर्णय घेण्यात आला.

परिणामाचा प्रामुख्याने वेबवर परिणाम झाला, परंतु काही मोबाइल उत्पादनांवरही परिणाम झाला. त्याच वेळी, अँड्रॉइड - होलोच्या डिझाईनवर वेगळे काम सुरू होते, ज्याने जुन्या अँड्रॉइडचे फारसे सौंदर्यपूर्ण नसलेले इंटरफेस बदलले.
पण एक समस्या होती: होलो अजूनही प्रोजेक्ट केनेडीपेक्षा वेगळा होता.


वापरकर्त्यांना स्विच करताना नवीन इंटरफेसशी जुळवून घ्यावे लागले, देखावा, नियंत्रणे लेआउट इत्यादीची सवय लावावी लागली.
म्हणून, कधीतरी, Google च्या विविध भागांतील डिझाइनरचा एक गट एकत्र आला आणि या समस्येचे निराकरण करण्यासाठी कुस्ती सुरू केली.

2014 मध्ये, I/O कॉन्फरन्समध्ये, एक नवीन डिझाइन प्रणाली सादर केली गेली, ज्याला मटेरियल डिझाइन म्हणतात. नवीन डिझाईन प्रणाली तुम्हाला सर्व स्क्रीन्सवर सातत्यपूर्ण वापरकर्ता अनुभव तयार करण्याची परवानगी देते: डेस्कटॉप, स्मार्टफोन, टॅबलेट, घड्याळे, टीव्ही, कार. Android ॲप्ससाठी, मटेरियल डिझाइन हे Holo च्या व्हिज्युअल भाषा आणि डिझाइन मार्गदर्शक तत्त्वांची उत्क्रांती आहे. अनेक प्रकारे ही एक अधिक लवचिक प्रणाली आहे, जी इतर डिझाइनर वापरतील या अपेक्षेने डिझाइन केलेली आहे - Google हा फक्त पहिला वापरकर्ता होता.

मटेरियल डिझाईन तुम्हाला डिझाईन निर्णय घेण्यासाठी अधिक वस्तुनिष्ठ दृष्टीकोन घेण्यास अनुमती देते: काहीतरी कसे दिसते, काहीतरी कसे कार्य करते, ॲनिमेशन कसे केले जाते इ. हे वाजवी मर्यादा सेट करते, परंतु अनावश्यक निर्बंध नाही.

मटेरियल डिझाइनची 4 तत्त्वे

मटेरियल डिझाइन चार मुख्य तत्त्वांवर आधारित आहे:

1. स्पर्शिक पृष्ठभाग.मटेरियल डिझाइनमध्ये, इंटरफेस तथाकथित "डिजिटल पेपर" च्या मूर्त स्तरांनी बनलेला असतो. हे स्तर वेगवेगळ्या उंचीवर स्थित आहेत आणि एकमेकांवर छाया टाकतात, जे वापरकर्त्यांना इंटरफेसची शरीररचना आणि ते त्याच्याशी कसा संवाद साधतात हे चांगल्या प्रकारे समजून घेण्यास मदत करतात.
2. प्रिंट डिझाइन.जर आपण "डिजिटल पेपर" चे तुकडे म्हणून स्तरांचा विचार केला तर जेव्हा "डिजिटल शाई" ("डिजिटल पेपर" वर चित्रित केलेली प्रत्येक गोष्ट) येते तेव्हा, पारंपारिक ग्राफिक डिझाइनमधून घेतलेला दृष्टिकोन वापरला जातो: उदाहरणार्थ, मासिक आणि पोस्टर डिझाइन
3. अर्थपूर्ण ॲनिमेशन.वास्तविक जगात, वस्तू कोठेही दिसत नाहीत आणि कोठेही अदृश्य होत नाहीत - हे फक्त चित्रपटांमध्ये घडते. म्हणूनच मटेरिअल डिझाईनमध्ये इंटरफेस कसे कार्य करते याबद्दल वापरकर्त्यांना सूचना देण्यासाठी आम्ही सतत स्तर आणि डिजिटल शाईमध्ये ॲनिमेशन कसे वापरावे याचा विचार करत असतो.
4. प्रतिसादात्मक डिझाइन.आम्ही मागील तीन संकल्पना वेगवेगळ्या रिझोल्यूशन आणि स्क्रीन आकारांसह वेगवेगळ्या डिव्हाइसवर कशा लागू करतो याबद्दल आहे.

तर, क्रमाने पुढे जाऊया.

स्पर्शिक पृष्ठभाग

चला स्पर्शाच्या पृष्ठभागासह प्रारंभ करूया. हे "डिजिटल पेपर" चे समान तुकडे आहेत ज्यात, नियमित कागदाच्या विपरीत, महासत्ता आहेत - ते ताणू शकतात, कनेक्ट करू शकतात आणि त्यांचा आकार बदलू शकतात. अन्यथा, ते भौतिकशास्त्राच्या कायद्यांनुसार आणि रशियन फेडरेशनच्या कायद्यानुसार वागतात.

पृष्ठभाग

पृष्ठभाग म्हणजे काय? मुळात तो सावली असलेला “कंटेनर” आहे आणि दुसरे काहीही नाही. परंतु एक वस्तू दुसऱ्यापासून वेगळे करण्यासाठी आणि ते एकमेकांच्या तुलनेत कसे स्थित आहेत हे दर्शविण्यासाठी हे पुरेसे आहे. मटेरियल डिझाइन तत्त्वज्ञान साधेपणा आणि "स्वच्छ" डिझाइनसाठी प्रयत्न करते.

खूप दूर जाण्याची आणि पोत वापरण्याची किंवा chiaroscuro चित्रित करण्यासाठी ग्रेडियंट लागू करण्याची आवश्यकता नाही. आजीच्या अपार्टमेंटच्या दरवाजासारख्या त्वचेचे दृश्य गुणधर्म देण्याची गरज नाही - एक व्यवस्थित सावली खूप व्यक्त करू शकते. परंतु प्रत्येक पृष्ठभागाची स्वतःची उंची असते - झेड अक्षावर एक स्थान आणि प्रत्येक पृष्ठभाग वास्तविक जगाप्रमाणेच तळाशी सावली टाकते.

खोली

पारंपारिक "फ्लॅट डिझाईन" मध्ये अशा सावल्या खंडाचे कोणतेही प्रकटीकरण म्हणून टाळल्या जातात, परंतु ते स्क्रीनवरील घटकांची रचना आणि पदानुक्रम दर्शविण्याचे महत्त्वपूर्ण कार्य करतात. उदाहरणार्थ, जर एखाद्या घटकाचा उदय जास्त असेल तर त्याची सावली जास्त असेल. ही वाढलेली खोली वापरकर्त्याचे लक्ष गंभीर गोष्टींवर केंद्रित करण्यात मदत करते आणि ते सुंदरपणे करण्यास मदत करते.

खोली परस्परसंवादाबद्दल संकेत देखील प्रदान करते. येथे, वापरकर्ता स्क्रोल करत असताना, हिरवा पॅच वरच्या थराला चिकटतो आणि एक सावली जोडली जाते. हे दर्शवते की ती फक्त "शाई" हलत नाही, तर पांढरी पार्श्वभूमी खाली आहे आणि संपूर्णपणे हलत आहे.

हे लक्षात घेणे महत्वाचे आहे की खोलीला "तळाशी" आहे. असे गृहीत धरले जाते की ते मोबाइल डिव्हाइसच्या जाडीने मर्यादित आहे. म्हणजेच, जर स्मार्टफोनवर ते काचेपासून मागील भिंतीपर्यंत एक सेंटीमीटर असेल आणि तुमच्याकडे इंटरफेसमध्ये क्रेडिट कार्ड असेल, तर तुम्ही ते फक्त उलट करू शकत नाही - ते काचेच्या आणि मागील भिंतीच्या विरूद्ध विश्रांती घेईल.

NB!

1. खोलीला अर्थ असणे आवश्यक आहे.स्वतःला प्रश्न विचारा: "हे का आहे आणि अन्यथा नाही?" उत्तर नसेल तर दुसरा उपाय शोधण्यात अर्थ आहे.
2. लॉजिस्टिकची काळजी घ्या.फ्लोटिंग बटणे, टूलबार आणि डायलॉग बॉक्स एका विशिष्ट उंचीवर आहेत. काहीवेळा जेव्हा काहीतरी घडते तेव्हा टक्कर टाळण्यासाठी त्यांना Z अक्षाच्या बाजूने हलवावे लागते. या नृत्यदिग्दर्शनात तुम्ही अत्यंत सावधगिरी बाळगली पाहिजे.
3. बटण सक्ती करण्याची गरज नाही.फ्लोटिंग बटण हा एक अतिशय वैशिष्ट्यपूर्ण घटक आहे. बर्याच लोकांना असे वाटते की ते इंटरफेसमध्ये जोडणे योग्य आहे: हे त्वरित मटेरियल डिझाइन बनते. परंतु ते फक्त तुमच्या अर्जातील मुख्य क्रियेसाठी वापरले जावे. जर तुम्हाला विंडो बंद करायची असेल किंवा कृतीची पुष्टी करायची असेल, तर तुम्हाला फ्लोटिंग बटण वापरण्याची गरज नाही. यासाठी इतर घटक आहेत.
4. सर्व काही कार्डवर असणे आवश्यक नाही.जर एखाद्या वस्तूचे अनेक रूपे असतील आणि त्यात खूप भिन्न सामग्री असेल तर कार्ड योग्य आहे. आणि जर नसेल, तर कदाचित ते साध्या मजकूर किंवा मजकूर सूचीसह करणे चांगले होईल?
5. हा कंटाळवाणा संवाद खरोखर आवश्यक आहे का? Google डिझायनर्सनी डायलॉग बॉक्स अधिक चांगले बनवण्याचा प्रयत्न केला आहे, परंतु बॉटम शीट्स अजूनही बऱ्याच कामांसाठी योग्य आहेत. स्नॅकबार देखील आहेत. वापरकर्त्याला प्रश्न विचारण्यासाठी डायलॉग बॉक्सची आवश्यकता असते.
6. सूची विस्तार वापरा.हा एक अधोरेखित नमुना आहे, परंतु तो एक सामग्री आहे आणि समस्येचे निराकरण करते.

प्रिंट डिझाइन

मटेरियल डिझाइनमध्ये आम्ही पृष्ठभागांना "डिजिटल पेपर" म्हणतो, त्यानंतर त्यावर ठेवलेली प्रत्येक गोष्ट - मजकूर, प्रतिमा, चिन्ह - "डिजिटल शाई" सह मुद्रित केले जाते. आणि मटेरियल डिझाइन इंटरफेसच्या डिझाइनमध्ये प्रिंटिंग डिझाइनची शास्त्रीय तत्त्वे वापरते.

मोहक टायपोग्राफी

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


या स्क्रीनवर खूप मजकूर आहे. परंतु आपण चिन्हे टाकून दिल्यास आणि मजकूर राखाडी ब्लॉकमध्ये बदलल्यास, हे स्पष्ट होते की रचना अगदी दृश्यमान आहे.

आमच्याकडे एक मोठा शीर्षलेख आणि लहान घटकांचा एक संच आहे जो त्यांच्या संपृक्ततेद्वारे ओळखला जातो - अधिक महत्वाचे अधिक गडद आहेत. त्याच वेळी, काही आयत जवळ स्थित आहेत आणि ब्लॉक्समध्ये एक महत्त्वपूर्ण इंडेंट आहे या वस्तुस्थितीमुळे आम्ही गटबद्धता स्पष्टपणे वेगळे करतो. सर्वसाधारणपणे, सर्व काही सर्वोत्तम परंपरांमध्ये आहे!

फॉन्ट आकार

google.com/design/spec वेबसाइटमध्ये एक मानक फॉन्ट पॅलेट आहे जो तुम्ही सुरक्षितपणे वापरू शकता. पॅलेट रोबोटो फॉन्ट वापरते, परंतु ब्रँडला समर्थन देण्यासाठी आपल्या स्वत: च्या स्वाक्षरी फॉन्टसह बदलले जाऊ शकते. प्रत्येक गोष्टीची काळजीपूर्वक चाचणी करणे महत्त्वाचे आहे, कारण फॉन्ट रेंडरिंग वेगवेगळ्या डिव्हाइसेसवर वेगळ्या पद्धतीने कार्य करू शकते. सामान्यतः OTF फॉन्ट TTF पेक्षा चांगली कामगिरी करतात.

विरोधाभासी टायपोग्राफी

मटेरिअल डिझाईनमध्ये उत्तम प्रकारे बसणारे मुद्रणाच्या जगाचे आणखी एक तत्त्व म्हणजे विरोधाभासी टायपोग्राफी - शीर्षकाचा फॉन्ट आकार आणि टाइपसेटिंग मजकूर यांच्यातील खरोखर लक्षात येण्याजोगा फरक. हे सुंदर आहे आणि मुख्य गोष्ट हायलाइट करते.

मॉड्यूलर ग्रिड आणि मार्गदर्शक

आता स्क्रीनवरील सामग्रीच्या स्थानाकडे जा. प्रिंट डिझाइनमध्ये, स्क्रीन डिझाइनमध्ये मॉड्यूलर ग्रिड वापरले जातात, हे खूप लहान मॉड्यूल्ससह अधिक मूलभूत ग्रिड आहेत. अशा प्रकारे, मटेरियल डिझाइन 8dp च्या पायरीसह ग्रिड वापरते. DP हा घनता-स्वतंत्र पिक्सेल आहे, जो iOS मधील पॉइंट युनिटप्रमाणेच एक युनिट आहे.

परंतु मटेरियल डिझाइनच्या तत्त्वांनुसार सामग्री ठेवण्याचे मुख्य वैशिष्ट्य म्हणजे मुख्य मार्गदर्शकांची नियुक्ती. ते स्क्रीनच्या काठावरुन इंडेंटेशन सेट करतात, माहितीची रचना करतात आणि वापरकर्त्याच्या नजरेवर नियंत्रण ठेवतात. जर तुम्ही बहु-पृष्ठ प्रकाशनांच्या डिझाइनशी परिचित असाल किंवा Tschichold वाचले असेल, तर तुम्हाला कदाचित ग्रिड आणि मार्जिनबद्दल बरेच काही माहित असेल आणि पाय कोठून येतात हे समजेल.

खरं तर, आम्ही मध्यभागी मजकूराचा एक स्तंभ आणि डावीकडे एक मोठा मार्जिन पाहतो, ज्यामुळे मुख्य सामग्रीवर लक्ष केंद्रित करणे आणि मार्जिनमध्ये समर्थन घटक सोडणे शक्य होते.

भौमितिक आयकॉनोग्राफी

आयकॉनोग्राफीबद्दल बोलायचे झाले तर, काही काळ अँड्रॉइडमध्ये साधे चिन्ह वापरले गेले आहेत, परंतु मटेरियल डिझाइनमध्ये ते आणखी सोपे आणि मैत्रीपूर्ण झाले आहेत. अनधिकृत संसाधन materialdesignicons.com वर, डिझाइनर त्यांच्या उद्देशांसाठी चिन्हे शोधू शकतात आणि शक्य असेल तेथे योगदान देऊ शकतात.

रंग

प्रिंट डिझाइनप्रमाणे, इंटरफेस डिझाइनमध्ये रंग हे अभिव्यक्तीचे एक महत्त्वाचे माध्यम आहे. जुन्या Android मध्ये, रंग काहीतरी अतिरिक्त होते, परंतु आता ते अधिक प्रमुख भूमिका बजावते. मटेरियल डिझाइनमध्ये, मानक ॲप कलर पॅलेटमध्ये प्राथमिक रंग आणि उच्चारण रंग असतो.

मुख्य एक ॲक्शन बार सारख्या मोठ्या क्षेत्रासाठी वापरला जातो आणि स्टेटस बार त्याच्या गडद भिन्नतेमध्ये रंगविला जातो. नियंत्रणे, बटणे, पट्टे, इंडिकेटर इत्यादींवरील स्पॉट्समध्ये उजळ उच्चारण रंग वापरला जातो. फ्लोटिंग बटण सारख्या महत्त्वाच्या घटकांकडे वापरकर्त्याचे लक्ष वेधण्यासाठी उच्चारण रंग तयार केला आहे.

किती रंग वापरायचे? उच्चार कमी प्रमाणात, बिंदूच्या दिशेने ठेवलेले आहेत. उर्वरित इंटरफेस रंगविण्यासाठी एक साधा मूलभूत नियम आहे. जेव्हा मेल सूचीसारखा भरपूर मजकूर असतो, तेव्हा वापरकर्त्याला सामग्रीवर लक्ष केंद्रित करण्यास अनुमती देण्यासाठी ॲप बारला मानक आकारात सोडणे आणि रंग देणे योग्य आहे. जर तेथे जास्त सामग्री नसेल, उदाहरणार्थ, एका घटकाचे तपशीलवार दृश्य, फोटो किंवा कॅल्क्युलेटर, तर मोठ्या रंगीत टाइल्स वापरण्याची ही एक उत्कृष्ट संधी आहे - ॲप बारची उंची 2x किंवा 3x.

Android पॅलेट नावाच्या लायब्ररीला सपोर्ट करते जे तुम्हाला फोटोंमधून रंग काढण्याची परवानगी देते. म्हणजेच, ऍप्लिकेशनमधील फोटो चित्रांवर आधारित इंटरफेस डायनॅमिकली रंगविणे शक्य आहे.

आम्ही एक फोटो घेतला आणि अल्गोरिदमने त्यातील भिन्न वैशिष्ट्यांसह 6 रंग ओळखले:
- तेथे 3 समृद्ध आणि 3 निःशब्द रंग आहेत;
- ते प्रकाश, मानक आणि गडद टोनमध्ये विभागलेले आहेत;
- प्रत्येक पार्श्वभूमी रंगाचा स्वतःचा मजकूर रंग असतो, जो देखील वापरला जाऊ शकतो.

सुंदर फोटो

शेवटी, प्रिंट डिझाइनप्रमाणेच, मटेरियल डिझाईन देखील फोटोग्राफी आणि चित्रणाचा वापर करण्यास प्रोत्साहन देते. चित्रे बहुतेकदा फ्रेमशिवाय ठेवली जातात, बहुतेकदा “उजवीकडे”. स्टेटस बार देखील विशेष पारदर्शक बनवला आहे जेणेकरून हस्तक्षेप होऊ नये. शिवाय, स्क्रीनवरील “डिजिटल शाई” च्या प्रत्येक थेंबमध्ये एक कार्य असते;

NB!

1. आनंदाने ब्रँड.ब्रँडिंग म्हणून चमकदार रंग वापरण्यासाठी Google अधिक चांगल्या स्थितीत आहे, परंतु याला समस्या म्हणून पाहिले जाऊ नये. तुम्ही कॉर्पोरेट ब्रँड बुकमधून रंग निवडू शकता आणि लोगो पूर्णपणे वापरू शकता.
2. इंडेंटेशन विसरू नका आणि "काही हवा द्या." 8dp चा बेस ग्रिड आणि 72dp चा डावा मार्जिन हा नियम आहे. सामग्री चांगली आणि विनामूल्य असू द्या.
3. अर्थपूर्ण फोटो फरक करतात.अभिव्यक्तीचे माध्यम म्हणून छायाचित्रे आणि चित्रे ही आमची निवड आहे.

अर्थपूर्ण ॲनिमेशन

वास्तविक जगात, वस्तू कोठूनही बाहेर दिसू शकत नाहीत किंवा कोठेही अदृश्य होऊ शकत नाहीत. यामुळे गोंधळ होईल आणि लोकांचा गोंधळ उडेल. म्हणूनच नुकतेच काय घडले हे दाखवण्यासाठी मटेरियल डिझाइन अर्थपूर्ण ॲनिमेशन वापरते.

उदाहरण १.ॲनिमेशन दर्शविते की हे विशिष्ट कार्ड, क्लिक केल्यावर, अग्रभागी आले, उघडले आणि अधिक माहिती दृश्यमान झाली.

उदाहरण २.कॅलेंडरमधील एखादी घटना, क्लिक केल्यानंतर, पृष्ठभागावर येते, "पेपर" च्या एका वेगळ्या थरात बदलते, रूपांतरित होऊ लागते आणि इव्हेंटबद्दल तपशीलवार माहितीच्या स्वरूपात प्रकट होते.

मनोरंजक मुद्दा असा आहे की सक्रिय हालचाल डोळा आकर्षित करते - हे आपल्या दृष्टीसाठी नैसर्गिक आहे. ॲनिमेशन वापरून, आम्ही वापरकर्त्याचे लक्ष नियंत्रित करतो.

विषमता

यंत्राच्या जाडीने इंटरफेसची खोली मर्यादित असल्याने, सर्व वस्तूंचे परिवर्तन विमानातच करावे लागते. हे देखील वस्तुस्थितीकडे नेत आहे की परिवर्तन ॲनिमेशन असममित असणे आवश्यक आहे - म्हणजेच, ऑब्जेक्टच्या रुंदी आणि उंचीमधील बदल स्वतंत्र असणे आवश्यक आहे. अन्यथा, दर्शकापासून जवळ किंवा पुढे जाण्याचा भ्रम निर्माण होतो, आणि खूप मोठ्या अंतरावर.

प्रतिक्रिया

मटेरियल डिझाईनमधील ॲनिमेशनचे आणखी एक अतिशय महत्त्वाचे तत्त्व म्हणजे वापरकर्त्याच्या क्रियांना प्रतिसाद. जेथे शक्य असेल तेथे, इंटरफेस बदलांचे केंद्रस्थान डिव्हाइस स्क्रीनला स्पर्श करणे आवश्यक आहे. उदाहरणार्थ, बोटाच्या संपर्काच्या बिंदूपासून दिसणारी आणि जाणारी लहर. हा प्रभाव Android L मध्ये समस्यांशिवाय लागू केला जातो.

मायक्रोॲनिमेशन

Android L मध्ये, आम्ही ऍप्लिकेशनच्या प्रत्येक घटकाला ॲनिमेट करू शकतो - मग ते सामग्री किंवा लहान क्रिया चिन्हांमधील संक्रमण असो. ऍप्लिकेशनचा प्रत्येक तपशील महत्त्वाचा असतो आणि मायक्रो-ऍनिमेशन प्रत्येक वापरकर्त्याच्या कृतीमध्ये अधिक तपशील आणि प्रतिसाद जोडतात.

स्पष्टता आणि तीक्ष्णता

आणि ॲनिमेशनचे शेवटचे, मुख्य तत्त्व: हालचाल वेगवान आणि स्पष्ट असावी. सुरवातीला सामान्य प्रवेग आणि शेवटी मंदीच्या विपरीत, मटेरियल डिझाइनमधील ॲनिमेशन वक्र अधिक नैसर्गिक आणि मनोरंजक आहे. ऑब्जेक्ट्स वेगाने प्रतिक्रिया देतात आणि लक्ष्य स्थितीपर्यंत पोहोचतात, वेगाने परत येतात, परंतु शेवटी विश्रांतीच्या स्थितीपर्यंत पोहोचण्यासाठी थोडा जास्त वेळ लागतो. परिणामी, वापरकर्त्याला कमी प्रतीक्षा करावी लागते (कमी त्रासदायक). त्याच वेळी, जिथे ऑब्जेक्टने वापरकर्त्यांच्या स्वारस्यांचे क्षेत्र आधीच सोडले आहे, ते स्वतःला अधिक नैसर्गिकरित्या वागण्याची परवानगी देते.

NB!

1. शेवटपर्यंत ॲनिमेशन सोडू नका.ॲनिमेशन अगदी शेवटपर्यंत सोडले जाऊ नये - हे वापरकर्त्याच्या अनुभवातील एक प्रमुख घटक असू शकते आणि त्याचा आधीच विचार केला पाहिजे.
2. आपल्या मर्यादा जाणून घ्या.खूप जास्त ॲनिमेशन देखील वाईट आहे. स्वतःवर नियंत्रण ठेवा आणि लक्षात ठेवा की ते अर्थपूर्ण असले पाहिजे.

प्रतिसादात्मक डिझाइन

मटेरियल डिझाइनचा शेवटचा प्रमुख पैलू म्हणजे रिस्पॉन्सिव्ह डिझाइनची संकल्पना. म्हणजेच, आपण सर्व तीन पहिल्या संकल्पना वेगवेगळ्या उपकरणांवर आणि स्क्रीनवर वेगवेगळ्या स्वरूपाच्या घटकांमध्ये कशा लागू करू शकतो.

सामान्य ते विशिष्ट

स्क्रीन लहान करण्याबरोबरच स्क्रीनवर प्रदर्शित होणाऱ्या माहितीचे प्रमाण कमी करणे हे सर्वात सामान्य तंत्र आहे. मोठ्या स्क्रीनवर आम्ही निवडलेल्या घटकाची सूची आणि तपशीलवार माहिती दोन्ही दाखवू शकत असल्यास, स्मार्टफोनवर सूची प्रथम प्रदर्शित केली जाते आणि तपशीलांसाठी आम्हाला वेगळ्या स्क्रीनची आवश्यकता आहे. टॅब्लेटच्या बाबतीत, ॲप बार काहीवेळा कमीत कमी किंचित जास्त मोकळ्या जागेचा सामना करण्यासाठी मोठा केला जाऊ शकतो.

इंडेंटेशन

ब्लॉक्स वापरून सामग्री ठेवणे मोठ्या स्क्रीनवर मोकळ्या जागेसह कार्य करणे खूप सोपे करते. आम्हाला प्रत्येक ब्लॉकची सामग्री माहित आहे, वाचनीयता गमावू नये म्हणून ते किती रुंद असू शकते आणि जास्त गर्दी होऊ नये म्हणून किती अरुंद असू शकते हे आम्हाला समजते. रुंद स्क्रीनवर, ब्लॉक्स त्यांच्या वाचनीयतेच्या मर्यादेपर्यंत वाढवले ​​जातात आणि नंतर किनार्यांमधून मार्जिन जोडले जातात, जे कदाचित मोठे असू शकतात. ते फ्लोटिंग बटणाने भरले जाऊ शकतात आणि रंगीत डायज.

पांढरे फ्रेम्स

व्हाईटफ्रेम विभागातील google.com/design/spec या वेबसाइटवर वेगवेगळ्या स्क्रीनसाठी जागा आणि अंतर व्यवस्थित करण्याच्या कल्पना मिळू शकतात. प्रारंभ करण्यासाठी, सामान्य कल्पना मिळवण्यासाठी आणि नंतर आपले स्वतःचे प्रयोग सुरू ठेवण्यासाठी हे एक उत्तम ठिकाण आहे.

मार्गदर्शक

मार्गदर्शक आम्हाला "पेपर" च्या स्वतंत्र शीटवर "शाई" साठी इंडेंट देतात. स्मार्टफोनवर आमच्याकडे डावीकडे एक शीट आणि एक चांगले इंडेंटेशन आहे, परंतु टॅब्लेटवर त्यापैकी दोन आहेत आणि दोन्ही प्रकरणांमध्ये इंडेंटेशन आहे. या दोन फॉर्म घटकांसाठी इंडेंटेशन वेगळे असेल हे महत्त्वाचे आहे. टॅब्लेटवर ते 80dp आहे, आणि स्मार्टफोनवर ते 72dp आहे. पडद्याच्या काठावरील समास देखील भिन्न आहेत.

परिमाण

सर्व घटकांसाठी अनेक प्रमाणात घेण्याची शिफारस केली जाते. विशेषतः, ॲप बार आकार निवडणे अधिक सोयीस्कर आहे जर तुम्ही त्यास एकाधिक केले: 1x, 2x, 3x. स्मार्टफोन आणि टॅब्लेटवर हा आकार भिन्न आहे, परंतु अनुप्रयोग समस्यांशिवाय अनुकूल होतो.

अवरोध

ब्लॉक्समध्ये विचार करणे सामान्यतः उपयुक्त ठरू शकते. तुम्ही 8dp ने विभाज्य ब्लॉक्सची अशी मॉड्यूलर ग्रिड सेट केल्यास तुम्हाला उत्कृष्ट व्हिज्युअल लय मिळेल आणि निर्णय घेणे अधिक सोयीचे होईल. व्हाईटफ्रेमसह साइटवर जा आणि सामग्री पहा.

टूलबार

ऍक्शन बार इंटरफेसच्या सर्वात महत्वाच्या भागांपैकी एक आहे. यात शीर्षलेख, क्रिया बटणे आणि नेव्हिगेशन समाविष्ट आहे. अँड्रॉइड लॉलीपॉपमध्ये, ॲक्शन बार शीर्षस्थानी असलेल्या मर्यादित पट्टीपासून पूर्ण विजेटमध्ये बदलला आहे - एक कार्यशील आणि सुंदर अनुप्रयोग नियंत्रण ब्लॉक. हे या वस्तुस्थितीमुळे शक्य झाले आहे की आता आपण टूलबारमध्ये बरेच कार्यात्मक घटक ठेवू शकता ज्याचे आपण स्वप्न देखील पाहू शकत नाही:
- इनपुट फील्ड, फॉर्म;
- फ्लोटिंग मुख्य क्रिया बटण;
- टूलबार विस्तारित नेव्हिगेशनद्वारे लपलेले आहे, परंतु येथे आम्ही एक पूर्णपणे कार्यशील विजेट पाहतो;
- आवश्यक असल्यास टूलबार व्यवस्थापित करण्यासाठी सोयीस्कर आहे.

NB!

1. नेव्हिगेशन ड्रॉवर नेहमीच आवश्यक नसते. Google त्याच्या ॲप्समध्ये स्लाइड-आउट नेव्हिगेशनचा वापर पुष्कळ वेळा करते, म्हणून तुम्ही ते विविध उदाहरणांमध्ये पाहू शकता. परंतु Google च्या अनेक समस्या आहेत ज्या त्याच्या मदतीने सोडवल्या जाऊ शकतात: पोस्टिंग मदत, सेटिंग्ज, लॉगिन/लॉगआउट, वापरकर्ता माहिती इ. आपल्याकडे समान कार्ये असल्यास, सर्वकाही ठीक आहे, परंतु आपण एक साधे साधन बनवत असल्यास, ते फायदेशीर नाही.
2. टूलबारसह अधिक धाडसी आणि हुशार व्हा.टूलबारचा आकार डायनॅमिकपणे बदलण्याची क्षमता, ते दुप्पट किंवा तिप्पट बनवणे खूप छान आणि सोयीस्कर आहे. बहुतेक डिझाइनर यास सामोरे जाण्यास घाबरतात आणि एकदा आणि सर्वांसाठी एक आकार निवडतात, परंतु येथे आपण अधिक धाडसी होऊ शकता.
3. फ्लोटिंग बटणासाठी तळाच्या कोपऱ्यातून वस्ती बनवण्याची गरज नाही.फ्लोटिंग बटण कुठेही असू शकते: तळाशी, वर, उजवीकडे, डावीकडे. अर्थात, एखाद्या कोपर्यात पोहोचणे सोयीचे असेल, परंतु हा एकमेव पर्याय नाही. कार्यानुसार बटण एका ठिकाणाहून दुसरीकडे हलवता येते.
4. स्मार्टफोन आणि टॅब्लेट दोन्ही; अनुलंब आणि क्षैतिज दोन्ही. Android डिव्हाइसेसची श्रेणी मोठी आहे आणि यामुळे विकसकांसाठी जीवन सोपे होत नाही. परंतु सत्य हे आहे की वापरकर्त्यांकडे ही सर्व उपकरणे आहेत जी ते या मार्गाने वळतात आणि ते (जरी आपण स्मार्टफोनबद्दल बोलत असलो तरीही). या क्षणी काम करणे आवश्यक आहे.

हे मटेरियल डिझाइन आहे. प्रयोग करण्यास आणि चुका करण्यास घाबरू नका: विद्यमान सोल्यूशन्स कॉपी करण्यास थांबू नका. करून पहा!

टॅग: टॅग जोडा

तुमच्या स्वतःच्या टॅगसह पोस्ट टॅग करा स्वल्पविरामाने लेबले वेगळे करणे चांगले. उदाहरणार्थ: प्रोग्रामिंग, अल्गोरिदम

टिप्पण्या 121

• • • • • • • • • • तुम्ही, Google प्रमाणे, फक्त तुमचा फोन आडवा धरून ठेवता का?
                    

                    उभ्यामध्ये फक्त 50-70% स्क्रीन वापरली जाते

                    
                    

                    • या स्क्रीनवर खूप मजकूर आहे.

                      हा खूप मजकूर आहे का? ट्विटरने लोकांचे काय केले आहे...

मटेरियल डिझाइन म्हणजे काय? हा Google द्वारे विकसित केलेल्या शैली आणि ग्राफिक्सचा संच आहे, तसेच त्या शैलींचे पालन करण्यासाठी मार्गदर्शक तत्त्वे आणि नियम आहेत. 2014 च्या उन्हाळ्यात Google I/O या विकसक परिषदेत मटेरियल डिझाइन पहिल्यांदा दाखवण्यात आले. शैली "कार्ड" आणि "ब्लॉक्स" च्या स्वरूपावर आधारित आहे - साधे आणि लॅकोनिक फॉर्म आणि ग्राफिक घटक, तसेच डिझाइनची एकंदर साधेपणा आणि ताजेपणा - शांत, मऊ रंग, व्हॉल्यूमची कमतरता, लहान तपशील आणि तपशील. सामान्य मटेरियल डिझाईनसाठी पहिले "रिलीझ" Google Now सेवा लॉन्च झाल्यानंतर झाले आणि शैली अधिकृतपणे Android ऑपरेटिंग सिस्टमचा आधार बनली, अगदी अलीकडे आवृत्ती 5.0 मध्ये, ज्याला Android Lollipop देखील म्हटले जाते.

माझ्या मते, मटेरियल डिझाईनचे Google ने त्याच्या ऑपरेटिंग सिस्टीमचे डिझाइन आणि प्रोग्राम्सचे डिझाइन एका एकीकृत स्वरूपात आणण्याच्या मागील सर्व प्रयत्नांपेक्षा बरेच महत्वाचे फायदे आहेत, परंतु काही तोटे देखील आहेत. या छोट्या लेखात मी गुगलच्या नवीन डिझाईन लँग्वेजबद्दल माझे मत मांडण्याचा प्रयत्न करेन.

मटेरियल डिझाईन – वितर्क

नवीन शैलीच्या बाजूने पहिला आणि सर्वात महत्वाचा युक्तिवाद, माझ्या मते, त्याची अंमलबजावणी आहे. मला पुन्हा Apple च्या तंत्रज्ञानाचा आणि दृष्टिकोनाचा तिरस्कार वाटू इच्छित नाही, परंतु या प्रकरणात ते भितीदायक नाही, कारण मी फक्त माझा दृष्टिकोन व्यक्त करतो. तर, माझ्या मते, सातव्या आवृत्तीवर iOS अद्यतनित करणे आणि पाचव्या आवृत्तीवर Android अद्यतनित करणे हे दोन मोठे फरक आहेत.

ऍपलच्या बाबतीत, आम्ही मागील ग्राफिक्सचे सपाट स्वरुपात नेहमीचे हस्तांतरण पाहिले, कोणतीही नवीन कल्पना नाही, काहीतरी नवीन आणण्याची इच्छा नाही - त्यांनी फक्त विद्यमान इंटरफेस घेतला, तो क्रश केला, चिन्हे पुन्हा रेखाटली आणि इंद्रधनुष्य पार्श्वभूमी चित्रे जोडली. हे नवीन iOS 7 मधील पार्श्वभूमी प्रतिमा आणि मेनू पारदर्शकता प्रभाव आहेत जे वाईट चव आणि डिझाइनरच्या काहीतरी चांगले आणि दयाळूपणा करण्याची इच्छा दर्शवणारे आहेत, जसे मला वाटते. "सात" मध्ये त्यांनी सुंदर ॲनिमेशन इफेक्ट्स आणि नवीन इंटरफेसच्या सामान्य ब्राइटनेससह सर्वांचे डोळे सहज दाखवले. मला असे वाटते की हे सोयीस्कर असेल की नाही याबद्दल कोणीही खरोखर विचार केला नाही, कारण अन्यथा Appleपल डिझाइनरांनी इंद्रधनुष्याच्या डिझाइनऐवजी कार्यात्मक पैलूंवर अधिक लक्ष दिले असते.

वरून कॉल केलेले नोटिफिकेशन शेड आणि खालून कॉल केलेले कंट्रोल पॅनल, iOS7 मधील निरुपयोगी "अपग्रेड" चे स्पष्ट उदाहरण आहेत. पहिली कधीच स्पष्ट केली गेली नाही - सर्व सूचना गोंधळात टाकल्या गेल्या आहेत आणि त्यापैकी बऱ्याच आहेत, दुसरी अर्धवट झाली होती, स्विचेस तुम्हाला इंटरफेस चालू/बंद करण्याची परवानगी देतात, परंतु त्या सेट करण्यासाठी पुढे जाऊ नका आणि नेटवर्क निवडत आहे

Android 5.0 देखील 4.x च्या तुलनेत ग्राफिक्सच्या बाबतीत अतिशय गंभीरपणे अद्यतनित केले गेले आहे जे ऑपरेटिंग सिस्टमचे मटेरियल डिझाइनमध्ये हस्तांतरण करण्याच्या संदर्भात आहे. आणि, पहिल्या दृष्टीक्षेपात, येथे बदल iOS मध्ये घडलेल्या बदलांसारखेच आहेत - एक सपाट शैलीतील अंतिम बदल, एक हलकी संपूर्ण रचना, बाह्य साधेपणा. पण मग मतभेद सुरू होतात. Android 5.0 मध्ये, मटेरियल डिझाइनमुळे इंटरफेस अधिक समग्र आहे - सर्व काही एका शांत शैलीत केले जाते, काहीही वेगळे दिसत नाही आणि रंगीबेरंगी किंवा जास्त चमकदार दिसत नाही. मटेरियल डिझाईनचे मूळ तत्व इंटरफेसमधील ग्राफिक इफेक्ट्सचे प्राधान्य त्याच्या व्यावहारिकतेपेक्षा वगळते का? आणि ते खूप छान आहे.

पहिल्या युक्तिवादाचा सारांश देण्यासाठी - मटेरियल डिझाइन आधीपासूनच खूप समग्र दिसते, Google आणि CO च्या ऑपरेटिंग सिस्टममध्ये नेमके हेच आहे - अखंडता आणि सामान्यता. प्रत्येक वैयक्तिक प्रोग्राम उघडताना, ते संपर्क, ब्राउझर, ईमेल क्लायंट किंवा इतर काही असो, तुम्हाला तेच ॲनिमेशन, समान रंग पॅलेट आणि फक्त ओळखण्यायोग्य घटक दिसतात. यामुळे, नवीन OS ची सवय करणे सोपे आहे आणि त्यासह कार्य करणे सोपे आहे.

दुसरा युक्तिवाद असा आहे की जर तुम्ही आधीच लॉलीपॉपवर स्मार्टफोन वापरला असेल किंवा स्क्रीनशॉट पाहिले असतील, तर तुम्हाला कदाचित लक्षात आले असेल की इंटरफेस दृष्यदृष्ट्या मोठा झाला आहे. इंटरफेसचे एकत्रीकरण बर्याच काळापासून टच डिव्हाइसेसमध्ये चालू आहे. जर आपण Android च्या पहिल्या आवृत्त्यांची तुलना “तत्कालीन” Windows Mobile शी केली, तर हे स्पष्ट आहे की Android मोठे आणि सोपे होते, स्क्रीनवर कमी माहिती बसते, परंतु स्मार्टफोन नियंत्रित करणे देखील अधिक सोयीचे होते. मटेरियल डिझाइनमध्ये, काही घटक "कार्ड्स" ने बदलले गेले आहेत, फॉन्ट, चिन्ह आणि रेखा आकार किंचित वाढले आहेत आणि संपूर्णपणे इंटरफेस मोठा झाला आहे. मला कदाचित हे आवडेल कारण मी म्हातारा होत आहे, विनोद बाजूला ठेवतो, परंतु मी जितके मोठे होत जातो तितकी मला "मिलिसाइज्ड" चिन्हे आणि घटकांकडे पाहण्याची इच्छा कमी होते, अगदी चांगल्या दृष्टीसह. तसे, यामुळेच मला आयफोन 5 आणि त्याहून लहान काहीही आवडत नाही. कॉम्पॅक्टनेस कॉम्पॅक्ट आहे, परंतु 4.5" कर्ण स्क्रीनवर देखील, तुम्हाला सामान्य-आकाराचे घटक पहायचे आहेत, आणि भिंगाने त्याचा अभ्यास करू नका. हे बऱ्याच परिस्थितींमध्ये अधिक सोयीस्कर आहे, विशेषत: जाता जाता स्मार्टफोनसह काम करताना, उदाहरणार्थ. त्यामुळे, मटेरियल डिझाईनवर आधारित Android 5.0 मधील इंटरफेसचे सर्वसाधारण विस्तार हे मला एक चांगले पाऊल वाटते.

बाजूने तिसरा युक्तिवाद असा आहे की Google ने केवळ Android नवीन डिझाइनवर स्विच केले नाही तर सॉफ्टवेअर डेव्हलपर्ससाठी मुख्य घटकांची अंमलबजावणी दर्शविणारे आवश्यक व्हिज्युअल मार्गदर्शक देखील तयार केले. सोप्या भाषेत सांगायचे तर, जर तुम्ही नवीन प्रोग्राम बनवत असाल किंवा जुन्याला नवीन डिझाइनमध्ये रूपांतरित करू इच्छित असाल तर वेबसाइटआणि Google शिफारशींचा अभ्यास करा.

उदाहरणार्थ, कोणते रंग वापरायचे ते सांगते. फॉन्ट आणि ते कसे वापरायचे ते दाखवले आहे. आणि प्रोग्राममध्ये योग्य ग्राफिक प्रतिमा वापरण्यासाठी शिफारसी.

मटेरियल डिझाइन – विरुद्ध युक्तिवाद

तथापि, मटेरियल डिझाईनच्या बाजूने तिसरा युक्तिवाद देखील त्याच्या विरुद्ध युक्तिवाद आहे. होय, Google विकसकांना न सोडण्यासाठी आणि नवीन डिझाइन भाषेच्या योग्य वापराबद्दल सर्वसमावेशक मार्गदर्शन प्रदान करण्यासाठी चांगले होते, परंतु या प्रकरणात, ते वापरकर्त्यांचा विचार करण्यात अयशस्वी ठरले. मटेरियल डिझाइनच्या सर्व नियमांनुसार लिहिलेले किंवा Google च्या मार्गदर्शक तत्त्वांनुसार बाह्यरित्या सुधारित केलेले प्रोग्राम Android 5.0 मध्ये अतिशय सुसंवादी दिसतील आणि सिस्टमच्या पूर्वीच्या आवृत्त्यांमध्ये इतके दिसत नाहीत. आणि त्याउलट - मटेरियल डिझाइनच्या नियमांचे पालन न करणारे सर्व ॲप्लिकेशन्स Android Lollipop सह स्मार्टफोनवर काहीसे परदेशी दिसतील. आणि पुढील सहा महिन्यांत असे अनेक कार्यक्रम होतील, याचा अंदाज बांधण्याचा मी धाडस करेन. तरीही, लोकप्रिय प्रोग्रामचा प्रत्येक विकासक, विशेषत: जर तो जटिल असेल आणि सतत अद्यतने आणि सुधारणांची आवश्यकता असेल तर, सर्वकाही सोडणार नाही आणि ते मटेरियल डिझाइनमध्ये रूपांतरित करणे सुरू करेल.

अगदी वर्तमान प्रोग्राममधील जुन्या डिझाइनचे स्पष्ट उदाहरण - WhatsApp. अर्ज किती काळ एमडीकडे हस्तांतरित होणार नाही? चांगला प्रश्न

असे दिसून आले की काही विकसक आता खरोखर सर्वकाही सोडून देतील आणि त्यांचे प्रोग्राम मटेरियल डिझाइनमध्ये हस्तांतरित करतील, तर इतर तसे करणार नाहीत. आणि Google Play वर वृद्धांसह प्रोग्राम्स आहेत, समजा, डिझाइन करा, परंतु कधीकधी कामासाठी आवश्यक देखील असतात. परिणामी, असे दिसून आले की अँड्रॉइडला सामान्य स्वरूपात आणण्याची Google ची इच्छा (निःसंशयपणे योग्य!) शेकडो हजारो प्रोग्रामसह काहीतरी करणे आवश्यक आहे; प्रश्न - काय?

प्रिय वाचकांनो, मटेरियल डिझाइनचा आधार म्हणून वापर करून सर्व सेवा आणि ॲप्लिकेशन्स एका सामान्य स्वरूपात आणण्याच्या Google च्या कल्पनेबद्दल तुम्हाला काय वाटते?

हा लेख त्यांच्यासाठी आहे जे मोबाइल डेव्हलपमेंटमध्ये जाण्याची योजना करत आहेत. विकास व्यावसायिकांना हे सर्व आधीच माहित आहे.

सफरचंद

Apple च्या कदाचित सर्वात विस्तृत मार्गदर्शकासह प्रारंभ करूया. पहिल्या दृष्टीक्षेपात, प्रत्येक गोष्ट थोडीशी कंजूष दिसते, प्रत्येक साधन किंवा विभागासाठी 2-3 चित्रे आणि काही परिच्छेद आहेत: मजकूराच्या प्रति युनिट माहिती सादर करण्याच्या दृष्टीने मार्गदर्शक तत्त्वे खूप चांगली विकसित केली आहेत. आपण काही तासांत सर्व शिफारसी पूर्णपणे समजू शकता.

वजापैकी, रशियन भाषेची कमतरता लक्षात घेण्यासारखे आहे, परंतु एक हौशी भाषांतर आहे. वाचा: medium.com/ios-guidelines-in-russian.

iOS ॲप्स विकसित करण्यासाठी चरण-दर-चरण मार्गदर्शक पहा: https://developer.apple.com/library/ios/referencelibrary/GettingStarted/DevelopiOSAppsSwift/index.html. मार्गदर्शक एखाद्या व्यक्तीला, अगदी ऍप्लिकेशन डेव्हलपमेंटशी परिचित असलेल्या, विकासाच्या टप्प्यांशी परिचित होण्यास मदत करेल. हे करण्यासाठी, तुम्हाला प्रथम मुख्य Xcode विकसक साधन डाउनलोड करणे आवश्यक आहे, आणि नंतर चरण-दर-चरण सूचनांसह तुमची पहिली मिनी-मास्टरपीस तयार करा.

विकासकाच्या मार्गदर्शकासह मार्गदर्शक तत्त्वे एकत्रित करून, आपण iOS अनुप्रयोग विकसित करण्याबद्दल प्रारंभिक समज प्राप्त करू शकता. तुम्ही जे वाचता ते चघळण्यासह इतर सर्व गोष्टींसाठी एक व्यवसाय आहे - “”.

Google

अँड्रॉइडवरील मटेरियल डिझाइन हा एक वाक्यांश आहे जो इंटरनेटवर अनेकदा आढळतो, परंतु दुर्दैवाने, बरेच जण ते Google ग्राफिक ॲड-ऑन्सचा एक संच समजतात, आणखी काही नाही. खरं तर, ही बऱ्यापैकी कठोर शिफारस आहे जी तुमचा अनुप्रयोग स्पष्ट आणि वापरकर्त्यासाठी शिकण्यास सुलभ करण्यासाठी डिझाइन केलेली आहे.

मार्गदर्शन सामान्य परिचयापासून ते विशिष्ट साधनांच्या वापरापर्यंत आहे. विकसकाच्या मूलभूत गोष्टी आणि पहिल्या चरणांसह चित्रे आणि व्हिडिओ आहेत: हे लगेच स्पष्ट होते की Google ने या मॅन्युअलवर खूप मेहनत केली आहे.

सादर केलेल्या सामग्रीच्या उपयुक्ततेच्या दृष्टिकोनातून, कोणीही केवळ सकारात्मक मार्गाने बोलू शकतो: साधनाची प्रत्येक मालमत्ता, प्रत्येक कृती मजकूर आणि ग्राफिक वर्णन तसेच विकास मॅन्युअलच्या लिंकसह प्रदान केली जाते. म्हणूनच, कृतीसाठी विशिष्ट सूचना नसतानाही, नवशिक्या आणि तयार तज्ञ दोघेही एक गंभीर मटेरियल डिझाइन अनुप्रयोग तयार करू शकतात.

विंडोज फोन

Google आणि Apple च्या समान मार्गदर्शकांचा काळजीपूर्वक अभ्यास केल्यानंतर आणि काम केल्यानंतर, मी मदत करू शकत नाही परंतु Windows Phone मार्गदर्शक तत्त्व काहीसे "अनाडी" आहे असे मला वाटते. असे दिसते की निर्मात्यांना असे दस्तऐवजीकरण तयार करण्याच्या कॉर्पोरेट धोरणाचे खरोखर पालन करायचे नव्हते, परंतु बॉसने आग्रह धरला.

मार्गदर्शक तत्त्वाचा मुख्य फायदा म्हणजे रशियन भाषा. माहिती तपशीलवार सादर केली आहे, परंतु अशा मार्गदर्शकासाठी खूप "पाणी" आहे. तथापि, जर तुम्ही मार्गदर्शक तत्त्वे हे एक पाठ्यपुस्तक म्हणून न मानता जे तुम्ही आधी वाचले पाहिजे आणि नंतर विकसित करण्यास सुरुवात केली पाहिजे, परंतु एक पॉकेट संदर्भ पुस्तक म्हणून, तर तुम्ही हे मान्य करू शकता की असा अतिरेक उपयुक्त आहे.

लोकप्रिय मोबाइल प्लॅटफॉर्मच्या सर्व उत्पादकांनी मुख्य डिझाइन मार्गदर्शकाच्या विकासासाठी जबाबदार आणि बुद्धिमान दृष्टीकोन घेतला. त्या प्रत्येकासह काम करणे सोयीचे, आनंददायी आणि सर्वात महत्त्वाचे म्हणजे उपयुक्त आहे. तुम्हाला फक्त ऍप्लिकेशन्स कसे बनवायचे ते शिकायचे आहे, मग मार्गदर्शक तत्त्वे नक्कीच उपयोगी येतील.

मार्गदर्शक तत्त्वांबद्दल तुम्हाला काय वाटते? आम्हाला सांगा.

मार्गदर्शक तत्त्वांनुसार प्रशिक्षण: व्यवसाय.