विषय
- 01. मूल कैनवास
- 02. इंटरफ़ेस तत्व
- 03. उपयोगकर्ता जानकारी
- 04. इनबॉक्स लेआउट
- 05. ईमेल आइटम
- 06. नया बटन
- निष्कर्ष
हम Apple के नए मोबाइल ऑपरेटिंग सिस्टम की सबसे रोमांचक विशेषताओं का उपयोग करके एक iOS 7 एप्लिकेशन डिज़ाइन तैयार करेंगे। Apple का iOS 7 iPhone और iPad ऑपरेटिंग सिस्टम को एक नया रूप प्रदान करता है। IOS 7 एप्लिकेशन इंटरफ़ेस को डिज़ाइन करने के लिए सामान्य मार्गदर्शन को संक्षेप में प्रस्तुत किया जा सकता है:
- समतल - आईओएस 7 के लिए ऐप्पल डिज़ाइन दिशानिर्देश सादगी, उपयोगिता और उपयोग में आसान दृष्टिकोण को प्रोत्साहित करते हैं। कुछ नव-डिज़ाइन किए गए ऐप्स (और ऐप्पल की अपनी स्टाइल में) फ्लैट डिज़ाइन की कुछ विशेषताओं का मुकाबला करते हैं। लेकिन इसे बहुत शाब्दिक रूप से न लें। उदाहरण के लिए, दिखाए गए कीबोर्ड और बटन शत-प्रतिशत सपाट नहीं हैं; प्रत्येक अक्षर एक बटन के भीतर समाहित होता है जिस पर एक ड्रॉप शैडो होता है। इस सूक्ष्म प्रभाव के कुछ फायदे हैं और यही इसे पूरी तरह से सपाट दृष्टिकोण से अलग बनाता है।
- रंग की - आईओएस 7 अनुप्रयोगों के लिए रंग उज्ज्वल, अत्यधिक संतृप्त और आमंत्रित होने वाले हैं। हालाँकि, देशी iOS 7 ऐप हमेशा इसका पालन नहीं करते हैं। उदाहरण के लिए, ईमेल या संदेश ऐप देखें।
- टाइपोग्राफी - सामग्री में हल्के टाइपोग्राफी की सुविधा है। फ़ॉन्ट हेल्वेटिका न्यू लाइट है।
- ख़ाका - प्रकाश पर उच्चारण, उपयोग में आसान इंटरफ़ेस, न्यूनतम या बिना परत शैलियों के साथ।
एक बार जब आपके पास आपके वायरफ्रेम हो जाते हैं, तो हम डिज़ाइन बनाना शुरू कर सकते हैं।
01. मूल कैनवास
आइए UI तत्वों को रखने के लिए एक मूल कैनवास बनाएं। एक पारदर्शी पृष्ठभूमि के साथ फ़ोटोशॉप में 640x1138px कैनवास बनाएं। एप्लिकेशन को सुलभ, प्रयोग करने योग्य और सामग्री-उन्मुख माना जाता है, इसलिए हम पृष्ठभूमि के लिए पागल रंगों का उपयोग नहीं करेंगे।
इसके बजाय, हम अपने ब्रांड रंग (बैंगन बैंगनी) को शीर्ष बार के लिए सुरक्षित रखेंगे। शीर्ष बार की ऊंचाई आमतौर पर 100px होती है। (आईओएस 7 से शुरू करते समय, स्टेटस बार शीर्ष बार इंटरफ़ेस का हिस्सा होता है, इसलिए यदि आपने इसे पहले नहीं किया है तो इसे अपने डिज़ाइन में शामिल करना न भूलें।)
सबसे ऊपर 640x100px का ठोस आयत बनाएं। मैं आमतौर पर यह सुनिश्चित करने के लिए 3200% ज़ूम का उपयोग करता हूं कि डिज़ाइन पिक्सेल सही है।
यदि आप बुनियादी कीबोर्ड शॉर्टकट सीखते हैं, तो आप पलक झपकते ही इन दोहराने योग्य क्रियाओं को करने में सक्षम होंगे। एक पारदर्शी कैनवास से शुरू करें और कुछ स्क्रीन बनाएं जिनका उपयोग प्रवाह के विशिष्ट भागों में किया जाएगा।
02. इंटरफ़ेस तत्व
ऐप लोगो मंडलियों पर आधारित है, इसलिए मैंने इंटरफ़ेस तत्वों को सूचित करने के लिए इसका उपयोग करने का निर्णय लिया है। मेनू के लिए मानक तीन लंबवत रेखाएं रखने के बजाय, आइए रचनात्मक बनें! एक 12x12px वृत्त बनाएं, #fff से भरें, इसे तीन बार कॉपी करें और चित्र पर दिखाए अनुसार रखें। मंडलियों के बीच का स्थान 8px है।
दाईं ओर, हमारे पास 'सेटिंग' होगी। आइए सेटिंग आइकन के लिए कुछ ऐसा ही बनाएं: एक 10x10px सर्कल जिसमें बाहरी स्ट्रोक 4px चौड़ा हो। आप 42px व्यास वाला एक वृत्त खींचकर और 34px व्यास वाले आंतरिक वृत्त को घटाकर इस स्ट्रोक को बना सकते हैं। आइकनों को बाईं और दाईं ओर उचित रूप से रखें और प्रत्येक पक्ष पर 20px स्थान दें। इस पृष्ठ का शीर्षक 'प्रोफ़ाइल' है, जो क्षैतिज रूप से केंद्रित है। फ़ॉन्ट हेल्वेटिका लाइट है और फ़ॉन्ट का आकार 36px है।
अपने ऐप डिज़ाइन में ब्रांड रंगों के आधार के रूप में शीर्ष बार का उपयोग करने का प्रयास करें। इसके अच्छे उदाहरण फेसबुक और इंस्टाग्राम आईफोन ऐप में देखे जा सकते हैं।
03. उपयोगकर्ता जानकारी
आइए एक उपयोगकर्ता सूचना क्षेत्र बनाएं, जिसमें उपयोगकर्ता का नाम, स्थान और फोटो शामिल हो। पृष्ठभूमि एक वर्ग है जो 222px ऊँचा है। एक नमूना फोटोग्राफ रखें और क्लिपिंग मास्क टूल का उपयोग करके मास्क बनाएं। तस्वीर को उचित रूप से केन्द्रित करें।
फ़ोटोग्राफ़ी-आधारित लेआउट को लेआउट के उपयोग को ध्यान में रखते हुए सावधानीपूर्वक डिज़ाइन किया जाना चाहिए। हमारे पास इसके ऊपर टेक्स्ट होगा, इसलिए हमें यह सुनिश्चित करने की आवश्यकता है कि कंट्रास्ट अच्छा है और टेक्स्ट सुलभ है। सुनिश्चित करें कि आप पृष्ठभूमि में विभिन्न फ़ोटो के साथ टेक्स्ट दृश्यता का परीक्षण करते हैं। मैंने #fff और 1px ड्रॉप शैडो वाला टेक्स्ट चुना।
और भी अधिक कंट्रास्ट प्राप्त करने के लिए, हम पृष्ठभूमि में कुछ काले ग्रेडिएंट जोड़ेंगे। एक आयत बनाएं और उस पर क्लिपिंग मास्क लगाएं।
ट्रांसफ़ॉर्म टूल से फ़ोटोग्राफ़ी को कभी भी स्केल न करें। गुणवत्ता को जबरदस्त नुकसान होगा। इसके बजाय, इमेज साइज़ टूल का उपयोग करें और इसे अपनी ज़रूरत के आकार में स्केल करें। सर्वोत्तम परिणामों के लिए, Adobe Lightroom जैसे पेशेवर सॉफ़्टवेयर का उपयोग करें, जो फ़ाइल को एक निर्दिष्ट आकार में निर्यात करेगा।
बेहतर कंट्रास्ट प्राप्त करने के लिए इस तकनीक का उपयोग करें ताकि किसी भी फोटोग्राफी को पृष्ठभूमि के रूप में उपयोग किया जा सके, जिससे उपयोगकर्ता लचीलापन प्रदान कर सके।
04. इनबॉक्स लेआउट
अब हम इनबॉक्स लेआउट बनाने जा रहे हैं। इनबॉक्स अनुभाग के लिए शीर्ष पट्टी से प्रारंभ करें। पृष्ठभूमि के रूप में एक ठोस #3a3e4b के साथ 640x100px आयत बनाएं। इसका बायां हिस्सा इनबॉक्स मेनू पर वापस जाने के लिए एक तीर होने वाला है। एक ठोस #2e988d आयत बनाएं, जो कि 100x100px है।
यह वह जगह है जहाँ वायरफ्रेमिंग आसान है। आपके पास एक ही लेआउट के कई रूप हो सकते हैं, लेकिन सटीक इंटरैक्शन आपको बताएंगे कि कौन सा सबसे उपयोगी है।
अपने ऐप डिज़ाइन में पूरक रंगों का उपयोग करना अत्यंत महत्वपूर्ण है। कुछ रंगों के साथ खेलें, रंग सिद्धांत मार्गदर्शन का उपयोग करें और जाते समय ब्रांड रंगों का उपयोग करना न भूलें। (कुछ ऑनलाइन संसाधन हैं जो आपको रंग सिद्धांत के बारे में जानने में मदद कर सकते हैं और अपने UI के लिए रंगों को कैसे संयोजित करें। एप्लिकेशन डिज़ाइन के लिए मेरा व्यक्तिगत पसंदीदा रचनात्मक समुदाय साइट COLORlovers (colorlovers.com) है।)
एरो आइकन डिजाइन करने के लिए, 19x4px का आयत बनाएं। इसे ठोस #fff से भरें और ट्रांसफ़ॉर्म/रोटेट को 45 कोण पर लागू करें। आयत को कॉपी करें, ट्रांसफॉर्म/फ्लिप वर्टिकल लागू करें, इसे खींचें ताकि यह तीर का आकार बना सके। आकृतियों को मिलाएं। वोइला!
बाईं ओर से 'इनबॉक्स' शीर्षक 70px रखें। सुनिश्चित करें कि यह लंबवत रूप से संरेखित है। इसके बाद, #141516 बैकग्राउंड वाला एक सर्कल बनाएं, एक नंबर 8 को अंदर रखें और लंबवत और क्षैतिज रूप से संरेखित करें। यह नई ईमेल सूचना है।
05. ईमेल आइटम
एक आयत बनाएं और ठोस #fff से भरें। एक #e3e3e3 बॉर्डर बनाएं और इसे आयत के निचले किनारे पर रखें। एक 120x120px सर्कल बनाएं, ग्रे रंग से भरें, उपयोगकर्ता की एक तस्वीर लें, और इसे शीर्ष पर रखें, उस पर क्लिपिंग मास्क लगाएं।
क्षैतिज और लंबवत केंद्र। सुनिश्चित करें कि बाईं और दाईं ओर 25px आरक्षित है। भेजने वाले का नाम #000 में और मैसेज की कॉपी #868b98 में जोड़ें। उचित स्थिति। दिनांक भी #000 में है और हल्के फ़ॉन्ट भार में, दाईं ओर संरेखित है। तीन बार दोहराएं।
सम आइटम के लिए, #fafafa को पृष्ठभूमि रंग के रूप में उपयोग करें। सामग्री-उन्मुख लेआउट (पाठक, ईमेल क्लाइंट, समाचार पत्र) के लिए हल्के पृष्ठभूमि और ग्रे टेक्स्ट का उपयोग करें ताकि यह सुनिश्चित हो सके कि यह छोटी स्क्रीन पर सुलभ और पढ़ने में आसान है।
06. नया बटन
102px व्यास का एक वृत्त बनाएं और ठोस #ec2e49 से भरें। इसे नीचे दाईं ओर रखें। 40x40px के आकार के साथ पेन आइकन डिज़ाइन करें। एक सर्कल पर रखें और लंबवत और क्षैतिज रूप से संरेखित करें। आइकन को 90% अस्पष्टता दें। अपने केक में एक चेरी जोड़ने के लिए, एक बटन जो समग्र प्रकाश इंटरफ़ेस के बीच अच्छी तरह से पॉप अप होता है, आपके ऐप UI में अंतिम विवरण और रुचि जोड़ देगा।
निष्कर्ष
आपने इनबॉक्स लेआउट और प्रोफ़ाइल शैलियों की विशेषता वाले एक ट्रेंडी iPhone एप्लिकेशन का इंटरफ़ेस डिज़ाइन किया है।लेआउट के साथ खेलने का प्रयास करें, उपयोगकर्ता प्रोफ़ाइल टुकड़े में मोज़ेक पृष्ठभूमि जोड़ें और मेनू बनाएं। मेनू क्रियाओं को डिज़ाइन और परिभाषित करना न भूलें। आप Adobe After Effects या इसी तरह के डिज़ाइन टूल का उपयोग करके भी इंटरैक्शन जोड़ सकते हैं। इसे भेज दो!
शब्दों: जूलिया खुसैनोवा
जूलिया खुसैनोवा एक वरिष्ठ उत्पाद डिज़ाइनर हैं, जो UI/UX, विज़ुअल और मोबाइल डिज़ाइन और वायरफ़्रेमिंग में विशेषज्ञता रखती हैं।यह आलेख मूल रूप से नेट पत्रिका अंक २५० में छपा था।
