डिजाइन आकर्षक, यथार्थवादी उपयोगकर्ता इंटरफेस

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

वॉल्यूमेट्रिक सोच

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







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



टेपबॉट्स से पास्टबोट एप्लिकेशन ऊपर दिए गए उदाहरण बटन के समान पैनलों का उपयोग करता है और एक के बाद एक स्थित होता है:







प्रकाश स्रोत शीर्ष पर है, इसलिए प्रत्येक पैनल में सबसे नीचे एक छाया है और शीर्ष किनारे पर एक हाइलाइट है। ओर, यह एक कोण ब्रैकेट की तरह दिखता है <।



जिन इंटरफ़ेस तत्वों को हम पसंद करते हैं वे यथार्थवादी दिखते हैं, इसलिए आपको सही हाइलाइट और छाया पर ध्यान देने की आवश्यकता है।

सामग्री और सतह

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



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







एक बार, Apple ने MacOS X में चमकदार ग्लास इंटरफ़ेस तत्वों का उपयोग किया, फिर ऐसी अफवाहें थीं कि मैट तत्वों के साथ इंटरफ़ेस का कुल अपडेट विकसित किया जा रहा है। एक पूर्ण अद्यतन नहीं हुआ, लेकिन कई सालों से, मैट बनावट वाले तत्वों ने चमकदार ग्लास को बदल दिया है।







आईट्यून्स के नए संस्करणों में, स्क्रॉल मैट और बटन जैसे कई तत्वों को नए मैट के साथ बदल दिया गया है।



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







यहाँ कुछ उदाहरण दिए गए हैं जो दिखाते हैं कि विभिन्न सतह किस प्रकार किसी वस्तु की उपस्थिति को प्रभावित करती हैं:







अगली बार जब आप किसी चमकदार वस्तु को खींचना चाहते हैं, तो सोचें कि आप किस सामग्री के साथ काम करते हैं: प्लास्टिक, कांच, एल्यूमीनियम? यदि आप एक मैट सतह के साथ एक वस्तु को चित्रित कर रहे हैं, तो सोचें कि यह बनावट और दानेदार कैसे होगा: कागज, सैंडपेपर, कार्डबोर्ड या एल्यूमीनियम जैसे मैक पर? क्या कोई पारदर्शिता है? क्या आप हाइपर-यथार्थवादी सामग्री या नकली चित्र बनाना चाहते हैं?

कुछ टोटके

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



लेयर को नॉइज़ करें

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







रेडियल हाइलाइट्स

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







लेयर स्टाइल्स

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



इस तकनीक का उपयोग करके आप न्यूनतम प्रयास के साथ बहुत सारे प्रभाव प्राप्त कर सकते हैं। नीचे एकल-पिक्सेल चमक और छाया का उपयोग करके गोल आयतों के लिए कुछ शैलियाँ दी गई हैं। एक उदाहरण PSD फ़ाइल एक क्रिएटिव कॉमन्स लाइसेंस के तहत लाइसेंस प्राप्त है ।

एक्ट थिनर

जब कुछ इंटरफ़ेस में आंख को नुकसान पहुंचाता है, तो यह नकली जैसा दिखता है, कुछ ऐसा जो वास्तविकता में नहीं हो सकता है। अंत में, यथार्थवादी इंटरफेस विकसित करते समय आपको कई गलतियों से बचने में मदद करने के लिए कुछ सुझाव:

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