IOS 7 के लिए Booking.com ऐप कॉन्सेप्ट

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

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


इसके बाद सीधा भाषण आता है।

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

होटल की सूची

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

हमारे पास क्या है? एक छोटी सी तस्वीर के नीचे सेल अंतरिक्ष में एक अप्रिय सफेद छेद है। जानकारी एक के बाद एक सूचीबद्ध होती है और बहुत ही पूर्ण होती है, प्रत्येक पंक्ति की अपनी शैली होती है, कीमत पर एक बड़ा जोर उचित होता है, लेकिन बहुत सारी चीजें आगे मिश्रित होती हैं। यह स्पष्ट नहीं है कि "शानदार 8.5" क्या है, सितारे और एक अंगूठे? नहीं, यह आमतौर पर स्पष्ट है कि होटल की रेटिंग अच्छी है या समीक्षा की जाती है, लेकिन आपको इसके लिए अलग-अलग स्थानों पर 4 विशेषताओं की आवश्यकता क्यों है? मेरे 2.5S के स्क्रीन पर केवल 2.5 सेल फिट हैं, क्योंकि यह पूरी तरह से खराब नहीं है, लेकिन अधिक किया जा सकता है। वर्णनात्मक पाठ जो एक दीर्घवृत्त के साथ समाप्त होता है और लगभग हमेशा दोहराता है जो पहले से ही ऊपर लिखा गया है।

सोचना शुरू करो। पहली बात यह है कि उपयोगकर्ता ध्यान देता है कि वह टैप करने का विकल्प बनाता है / टैप नहीं है फोटो और कीमत। तदनुसार, मैंने फोटो के आकार को कम करने के लिए आंतरिक रूप से मना किया है, और मैंने इसे बढ़ाने का सूक्ष्म उद्देश्य निर्धारित किया है, अगर ऐसा कोई अवसर है। हम कीमत पर जोर देते हैं। और क्या जरूरी है? बेशक, दूरी, होटल के स्टारडम, उपयोगकर्ता की समीक्षा। और यह सुनिश्चित करने के लिए पर्याप्त है कि ब्राउज़िंग जारी रखना है या नहीं।

हम टाइप करने लगते हैं। इलस्ट्रेटर में यात्रा करने के लगभग एक घंटे के बाद, मुझे एक अच्छा लेआउट मिला। मैं एक आइकन के साथ समीक्षा और दूरी प्रदान करता हूं। मैं फोटो को बड़ा करने में कामयाब रहा (मैंने इसे किनारों पर दबाया, सेल का निर्माण किया गया था, लेकिन "सफेद" बहुत है
space "जो उपयोगकर्ता / पाठक को आसानी से जानकारी प्राप्त करने में मदद करता है)। वैसे, मेरे जैसे हताश दृश्यों के लिए, Airbnb और iHotel ऐप इस तरह के सेल लेआउट की पेशकश करते हैं।

Airbnb में, आप स्ट्रीम में सही फ़ोटो के माध्यम से स्क्रॉल कर सकते हैं। यह सुपर है! लेकिन जो हमारे पास है उससे आगे बढ़ें: हमें एक सामंजस्यपूर्ण सेल बनाने की आवश्यकता है, जिस पर जानकारी आसानी से माना जाता है। और एक और क्षण: मैं हमेशा सूचित होने का सपना देखता था, क्या कीमत प्रति दिन या सभी दिनों के लिए इंगित की जाती है? इस कीमत पर खुशी, या परेशान और पर flipping? यहाँ परिणाम है:

हम यह देखने के लिए थोड़ा और समय बिताते हैं कि सेल सामान्य सूची में कैसा दिखता है। IPhone 5 स्क्रीन में कम से कम 4 सेल फिट होते हैं, 3 टुकड़े iPhone 4 में फिट होते हैं, यह देखते हुए कि हमें कुछ और इंटरफ़ेस तत्व रखने की आवश्यकता है।

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


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

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

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

फिल्टर

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

• देखें कि फ़िल्टर आउटपुट को प्रभावित करता है;
• इसे जल्दी से रीसेट करें।

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

मेरे सिर में, छोटे स्टिकर के साथ एक संस्करण जिसे टेपू द्वारा संपादित किया जा सकता है और आसानी से एक क्रॉस द्वारा हटा दिया गया है, लंबे समय तक परिपक्व हो गया है - आसानी से! मैं इसे यहां लागू करने की कोशिश कर रहा हूं। यह अच्छा लग रहा है, लेकिन मुझे तुरंत एहसास हुआ कि यह विकल्प हमारे लिए काम नहीं करेगा, बहुत सारे फिल्टर हैं, और स्क्रॉल करते समय वे चले जाएंगे। यह विकल्प अच्छा है जब पैरामीटर 2-3-4 हैं। टोकरी में फेंक दो!


यहाँ मैं iOS के लिए एक Ebay एप्लिकेशन भर में आया और यह सुखद आश्चर्य की बात है। छंटनी, पसंदीदा में जोड़ना और सूची में उपस्थिति को खोज के साथ जोड़ दिया जाता है, फ़िल्टर खुद को बार के नीचे रखा जाता है। वे बाएं / दाएं स्क्रॉल करते हैं और सक्रिय होने पर नीले रंग में चिह्नित होते हैं। स्वतंत्र महसूस! हालांकि, पूर्ण तौर-तरीके से बचा नहीं जा सकता था। सभी लागू किए गए फ़िल्टर अभी भी दिखाई नहीं दे रहे हैं और थोड़ा भ्रम है, प्रत्येक फ़िल्टर को एक जगह या अलग से संपादित करें? हां, और उपयोगकर्ता को मापदंडों को लगातार देखने की आवश्यकता नहीं है, उसे याद है कि वह किस होटल की तलाश कर रहा है।

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


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

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

होटल पेज

हम अंतिम पृष्ठ - होटल पृष्ठ लेते हैं। आइए नौबत से शुरू करते हैं, तर्कसंगत विचार होटल का नाम लेना है, न कि फेसलेस "होटल"। फिर मैं स्क्रॉल के साथ बड़ी तस्वीरों के लिए पहला ब्लॉक अधिक घनी और मुक्त स्थान बनाता हूं। यह सौंदर्य की दृष्टि से मनभावन लगता है और तुरंत खुद को निपटा दिया जाता है, अतिरिक्त नल बनाने की कोई आवश्यकता नहीं है। बुकिंग साइट पर विभिन्न पहलू अनुपात के साथ चित्र हैं। ऊर्ध्वाधर पूर्वावलोकन के साथ, आप ऐसा कर सकते हैं: चौड़ाई में ज़ूम करें और केंद्र में एक आयत काट लें। टैप करके आप पूरी फोटो देख सकते हैं।

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

परिणाम

वृद्धि पर क्लिक करें

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

हम नए ऑपरेटिंग सिस्टम के लिए अपडेट किए गए आधिकारिक बुकिंग.कॉम एप्लिकेशन के लिए तत्पर हैं। आईओएस 7 क्षमताओं की अनुमति के बाद से निश्चित रूप से कुछ नए दिलचस्प समाधान वहां उपयोग किए जाएंगे।