🍩 🚐 🎍 शीर्षक अलग होगा 🤑 🈳 👩‍💼

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

मैंने ऐप स्टोर पर खोज में क्वेरी "पिज्जा डिलीवरी" दर्ज की, पहले 24 एप्लिकेशन डाउनलोड किए और जांच की कि उनमें से कौन कम दृष्टि वाले लोगों के लिए एक इंटरफ़ेस प्रदान करता है।

२४ में से २ । और दो में से एक, ऐसा लगता है, यह दुर्घटना से हुआ: जैसा कि फ़ॉन्ट आकार बढ़ता है, पूरे इंटरफ़ेस "तैरता है" और इसका उपयोग करना केवल कठिन हो जाता है। यह दुखद है।

550,000 लोग हर महीने डोडो पिज्जा आईओएस ऐप का इस्तेमाल करते हैं। भले ही हमारे उपयोगकर्ताओं में से 1% में फॉन्ट बढ़े हुए हैं, लेकिन यह 5500 लोग हैं जो हमारे एप्लिकेशन का उपयोग करने में असहज हैं। हम इसे सही करेंगे।

डायनामिक टाइप सपोर्ट जोड़ें

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

हम इंटरफ़ेस बदलते हैं ताकि इसका उपयोग किया जा सके

हम वापस रोल करते हैं और सोचने लगते हैं कि कैसे सब कुछ अच्छा करना है।

मेनू में जगह का उचित उपयोग करें

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

हमारे पास मेनू आइटम के बीच विभाजक नहीं है, यही वजह है कि जब आकार बड़ा होता है, तो कोशिकाएं "एक साथ रहना" शुरू करती हैं और पिज्जा की कीमत का टैग अगले पिज्जा की तस्वीर के बहुत करीब होता है। आइए एक विभाजक को जोड़ने का प्रयास करें।

ऐसा नहीं है। सबसे पहले, यह ऐसा लगता है। दूसरे, कम दृष्टि वाले लोगों के लिए देखना कठिन होगा। भले ही ग्रे से काले रंग के लिए फिर से।

हम इसे वापस निकाल देते हैं और बस कोशिकाओं के बीच इंटरनेट बढ़ाने की कोशिश करते हैं।

अब तो।

सबटोटल: अधिक स्थान का उपयोग करें, आंखें लाइन से लाइन तक कम कूदती हैं, पढ़ना आसान हो गया है।

हम स्ट्रेचिंग और हटाने में सुधार करते हैं

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

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

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

"लाइव" चेक करना न भूलें

अब श्रेणियां। सामान्य तौर पर, पहले दृष्टिकोण के साथ भी यह सहिष्णुता से बदल गया। एक नया चालू करें।

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

आइए UICollectionView को एक बटन से बदलें जो UICollectionView कॉल करेगा।

Vooot। अब आप शीर्ष पैनल पर ले जा सकते हैं, जहां शहर, स्टॉक, पता और प्रचार कोड।

बहुत लंबी लाइनों के बारे में मत भूलना

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

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

अब हम डोडो-रूबल को बढ़ाते हैं, सब कुछ सरल है:

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

यदि आप बटन को दाईं ओर ले जाने के लिए सुविधाजनक तरीका जानते हैं और इसे हेडर में फॉन्ट के साथ एक साथ स्केल करते हैं - टिप्पणी में इसे छोड़ दें।

में संकट

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

परिसर।

तो, लेकिन आप फिर से चित्रों को पूरी तरह से हटा सकते हैं और एक हेडलाइन के साथ पूरी जगह ले सकते हैं।

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

हम कड़े प्रतिबंधों के साथ काम करते हैं

इन बटनों में शीर्षलेख इरेड्यूबल हैं। लेकिन अगर वे कम नहीं होते हैं, तो बटन एक दूसरे पर रेंगेंगे। और हाँ, आप इन बटनों को छिपा नहीं सकते।

जब मैंने स्टॉक को रेड किया, तो मैं ऊपरी नारंगी पैनल की ऊंचाई नहीं बढ़ाना चाहता था। लगता है कि है। यह अच्छा है कि उन्होंने उस समय इसे नहीं बढ़ाया, अन्यथा अब सामान्य तौर पर अदुआ होता। सामान्य तौर पर, मैं प्रत्येक बटन के लिए एक पंक्ति का चयन करने जा रहा हूं।

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

चलो अंतिम परिणाम के साथ पहले दृष्टिकोण की तुलना करें:

अब गरीब दृष्टि के अनुकरण के साथ "पहले" और "बाद" की तुलना करें:

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

और हमने UITabBarController को नहीं छुआ, क्योंकि एक बड़े पाठ आकार के साथ, यह एक लंबे टैप पर बॉक्स से बाहर आइकन और टैब का शीर्षक उसी तरह दिखा सकता है जैसे iOS में वॉल्यूम में परिवर्तन को दर्शाता है।

हम दिखाते हैं कि यह सब कैसे काम करता है

डोडो पिज्जा आईओएस एप्लीकेशन में प्रत्येक तार्किक यूआई घटक को एक अलग UIViewController को आवंटित किया जाता है। इस तरह के प्रत्येक नियंत्रक के पास एक अलग फ़ाइल को आवंटित किया गया एक UIView । आप हमारे लेखों में इसके बारे में अधिक पढ़ सकते हैं:

नियंत्रक, यह आसान ले लो! हम UIView में कोड निकालते हैं
प्याज नियंत्रक। हम स्क्रीन को भागों में तोड़ते हैं

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

तो यहाँ है। हम ऐसे यूआई घटक और इसके मूल कंटेनर के बीच एक अतिरिक्त परत जोड़ते हैं। हमने इसे StateViewController कहा है।

मेनू के साथ नियंत्रक राज्य-नियंत्रक को एकीकृत करता है, और यह पहले से ही collection - या button कॉन्ट्रोलर को एम्बेड करता है।

यह StateViewController एक स्थिति के आधार पर इस या उस UI घटक को दिखाता है।

ऐसा करने के लिए, StateViewController को अपने राज्यों के बारे में जानना होगा और यदि आवश्यक हो तो उन्हें स्विच करना होगा।

इस उदाहरण में, StateViewController मेनू में संग्रह से बटन और इसके विपरीत में श्रेणियों के चयन को टॉगल करेगा। और "सामान्य" प्रदर्शन के मामले में, और दृष्टिबाधित लोगों के लिए प्रदर्शन के मामले में, चयनकर्ता को वही काम करने में सक्षम होना चाहिए:

श्रेणियों की सूची दिखाएं।
चयनित श्रेणी हाइलाइट करें।
अद्यतन श्रेणी सूची।
रिपोर्ट करें कि श्रेणी "बाहर हो गई।"

ताजा छोटे लॉग की इस अद्भुत गंध को महसूस करें? और, नहीं, यह मोबाइल एपी की एक टीम पिज्जा है। 5 मिनट का ब्रेक।

2 स्लाइस बाद में
"... ठीक है, हम अपने घटकों को इस तरह से लपेटते हैं कि प्रोटोकॉल में श्रेणियों का चयन करें, लेकिन उन्हें बस!"

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

एक और संकेत: टेक्स्ट सेंटर को आसानी से और जल्दी से बदलने के लिए आईफोन पर डायनेमो टैप कंट्रोल (सिम्युलेटर पर नहीं) को कंट्रोल सेंटर पर ले जाएं। ऐसा करने के लिए, iPhone पर, सेटिंग → कंट्रोल सेंटर → नियंत्रण पर जाएं और टेक्स्ट साइज़ जोड़ें।

हमने सामान्य श्रेणी के चयनकर्ता CategoriesCollectionViewController कोक्लेक्शनियन व्यूकंट्रोलर कहा, और नेत्रहीनों के लिए - CategoriesButtonViewController व्यूकंट्रोलर। उनके सामान्य प्रोटोकॉल को CategoriesPickerProtocol कहा जाता है। सामान्य स्टेट कंट्रोलर CategoriesStateViewController ।

हम अपने CategoriesStateViewController में संभावित राज्यों का वर्णन करते हैं:

 private enum State { case collection, button }

हम उसे प्रत्येक राज्य के लिए वांछित नियंत्रक दिखाना सिखाते हैं:

 private var state: State = .collection { didSet { if state != oldValue { updateViewController(for: state) } } } private func updateViewController(for state: State) { let viewController = self.viewController(for: state) self.updateController(with: viewController) } private func viewController(for state: State) { switch state { case .collection: return CategoriesCollectionViewController.instantiateFromStoryboard() case .button: return CategoriesButtonViewController.instantiateFromStoryboard() } }

instantiateFromStoryboard() - स्व-लिखित एक्सटेंशन से व्यू कंट्रोलर तक की विधि, स्टोरीबोर्ड से एक कंट्रोलर इंस्टेंस बनाती है यदि उनका समान नाम है। कोड लेख के अंत में स्रोत कोड में है।

 override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) { super.traitCollectionDidChange(previousTraitCollection) self.updateStateToCurrentContentSize() } private func updateStateToCurrentContentSize() { let contentSize = self.traitCollection.preferredContentSizeCategory self.updateState(to: contentSize) } private func updateState(to contentSize: UIContentSizeCategory) { self.state = contentSize.isAccessibilityCategory ? .button : .collection }

हम एक साथ दो और प्रोटोकॉल जोड़कर: प्रतिनिधि और डेटासेट के लिए, CategoriesPickerProtocol प्रोटोकॉल का वर्णन करते हैं।

 protocol CategoriesPickerProtocol where Self: UIViewController { var datasource: CategoriesDatasource? { get set } var delegate: CategoriesDelegate? { get set } func select(_ category: ProductCategoryModule.ProductCategoryViewModel) func updateCategories() var selectedCategory: ProductCategoryModule.ProductCategoryViewModel? { get } } protocol CategoriesDatasource: class { var categories: [ProductCategoryModule.ProductCategoryViewModel] { get } func index(of category: Product.ProductCategory) -> Int } protocol CategoriesDelegate: class { func productCategoriesView(_ categoriesPicker: CategoriesPickerProtocol, didSelect category: ProductCategoryModule.ProductCategoryViewModel) }

कार्यान्वयन दिखाने में कोई समझदारी नहीं है, यह सिर्फ इतना है कि हर पाइकर श्रेणियों को प्रदर्शित करता है और ऊपर की ओर रिपोर्ट करता है।

डायनेमिक टैपे के लिए राज्य नियंत्रकों का उपयोग करने का एक विस्तृत उदाहरण GitHub पर मेरे रेपो में मिल सकता है ।

→ वैसे, हम विस्तार कर रहे हैं

शीर्षक अलग होगा