मोबाइल ऐप डिज़ाइन एकीकरण। भाग 1: Android

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

समस्याओं

और मैं अपनी कहानी उस क्षण से शुरू करूंगा जब हमने पहले ही अपने आवेदन की रूपरेखा तैयार कर ली थी। सब कुछ सही दिखता है, सब कुछ पिक्सेल से सत्यापित होता है।



हम विकास के लिए लेआउट देते हैं, और आउटपुट में हम इसे प्राप्त करते हैं।



क्यों! उत्तर स्पष्ट है। प्रोग्रामर दोषी हैं, जिन्होंने सब कुछ टेढ़ा कर दिया ... दरअसल, नहीं! प्रोग्रामर के काम की शुरुआत से पहले ही, डिजाइनर को उन्हें डिजाइन विनिर्देश (टीके) पास करना होगा, जो डिजाइनर आमतौर पर आस्तीन के माध्यम से करते हैं, या इससे भी बदतर, नहीं करते हैं। इसलिए, प्रोग्रामर को अपने विवेक पर सब कुछ करने के लिए मजबूर किया जाता है, क्योंकि कोई स्पष्ट निर्देश नहीं है।

डिजाइन विशिष्टता (TK)

इसलिए, डिज़ाइन विनिर्देश द्वारा, मेरा मतलब फाइलों का एक सेट है जो एक डिजाइनर प्रोग्रामर के पास जाता है। वास्तव में, उनका निर्माण डिजाइन एकीकरण की प्रक्रिया है। Microsoft और Google के लिए, इसे नीली, लाल, हरी रेखाएँ कहा जाता है। मेरे पास तीन फ़ोल्डर हैं: मेट्रिक्स, फ़ॉन्ट्स, रेस।



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

एंड्रॉयड

रूस में 4 मुख्य मोबाइल प्लेटफार्मों के उदाहरण पर डिजाइन के एकीकरण पर विचार करें। और मैं समझने के लिए सबसे मुश्किल से शुरू करूँगा ... एंड्रॉइड

संक्षिप्त सैद्धांतिक भाग

आगे की प्रक्रिया को समझने के लिए थोड़ा सिद्धांत। यह किसी के लिए एक रहस्य नहीं है कि फोन स्क्रीन में अलग-अलग रिज़ॉल्यूशन और अलग-अलग विकर्ण होते हैं, अर्थात, स्क्रीन में विभिन्न घनत्वों की विशेषता होती है। इसे डॉट्स प्रति इंच में मापा जाता है। Android उपकरणों के लिए स्क्रीन घनत्व की 4 मुख्य श्रेणियां हैं: LDPI, MDPI, HDPI, XHDPI, XXHDPI (हम अभी तक ध्यान नहीं देते हैं)। इसलिए, इंटरफ़ेस तत्वों के लिए विभिन्न उपकरणों की स्क्रीन पर समान भौतिक आकार होने के लिए, Google ने माप की एक अमूर्त इकाई - डीपी पेश की।



हम इस बात के विवरण में नहीं जाएंगे कि ये नंबर कहां से आए, लेकिन खुद के लिए याद रखें कि एक डीपी एमडीपीआई घनत्व वाले स्क्रीन के लिए एक भौतिक पिक्सेल के बराबर है। तदनुसार, एक्सएचडीपीआई स्क्रीन के लिए, 1 डीपी 2 पीएक्स (ऐसा घनत्व, उदाहरण के लिए, Google Nexus 4) के बराबर होगा।

व्यावहारिक कार्यान्वयन

अब हम व्यावहारिक कार्यान्वयन शुरू करते हैं। आगे मेरी कार्य प्रक्रिया का वर्णन किया जाएगा, जिसका गठन अनुभवजन्य रूप से किया गया था। मुझे आशा है कि आप इसे उपयोगी पाएंगे।

मेट्रिक्स

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

डेवलपर्स के लिए सभी आकार डीपी में निर्दिष्ट होने चाहिए।



मैं XHDPI स्क्रीन (768x1280, Nexus 4) के लिए लेआउट बनाता हूं। और जैसा कि हमें याद है, एक्सएचडीपीआई के लिए 1 डीपी = 2 पीएक्स। लेकिन चूंकि फ़ोटोशॉप, निश्चित रूप से डीपी को नहीं समझता है, लेकिन पिक्सल के साथ काम करता है, पहले मैं 1 डीपी 1 पीएक्स के बराबर बनाता हूं। छवि पर जाएं, छवि आकार पर क्लिक करें और मान को 50% पर सेट करें। हो गया, अब 1 डीपी = 1 पीएक्स।



आप लेआउट को "आयाम" करने के लिए बोलना शुरू कर सकते हैं। इसे मैन्युअल रूप से करना बहुत थकाऊ था, और हाल ही में मैं फ़ोटोशॉप के लिए बहुत उपयोगी एक्सटेंशन में आया हूं।

पीएनजी एक्सप्रेस - भुगतान विस्तार, लागत 29 रुपये। लेकिन यह वास्तव में इसके लायक है। फ़ोटोशॉप के लिए, संस्करण CS5 से शुरू हो रहा है। यह आपको बहुत सी उपयोगी चीजें करने की अनुमति देता है, लेकिन मैं इसका उपयोग करता हूं, विशेष रूप से, "मापने" के लिए।




उदाहरण
चरण 1. मान लीजिए कि हमें एक्स (डिलीट) आइकन और त्यागें पाठ के बीच का आकार निर्दिष्ट करना होगा।
चरण 2. बस फ़ोटोशॉप में इन दो परतों का चयन करें और PNG EXPRESS में मार्जिन पर क्लिक करें।
चरण 3. विस्तार स्वयं आयामों को आकर्षित करेगा। यदि आकार गलत निकला, तो हमारे डिज़ाइन कैंट ने इसे नियमित फ़ोटोशॉप टेक्स्ट लेयर के रूप में संपादित किया।



हालाँकि हमें पूरी तरह से स्वचालित प्रक्रिया नहीं मिल रही है, लेकिन यह विस्तार एक टन समय बचाता है।

फ़ॉन्ट्स

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



सभी फ़ॉन्ट आकार सपा में निर्दिष्ट होने चाहिए

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

उदाहरण
चरण 1. यदि हमें डोन बटन के लिए फ़ॉन्ट निर्दिष्ट करने की आवश्यकता है, तो
चरण 2. फ़ोटोशॉप में इस परत का चयन करें और PNG EXPRESS में Spec Font Font पर क्लिक करें।
चरण 3. फ़ॉन्ट का पूर्ण विवरण प्राप्त किया।



फिर से बहुत समय बचाया।

साधन

Res फ़ोल्डर में आपके एप्लिकेशन के लिए ग्राफिक्स संसाधन होने चाहिए। प्रत्येक स्क्रीन घनत्व के लिए ये 4 सबफ़ोल्डर हैं।



मैं इसके लिए एक अलग एक्सटेंशन का उपयोग करता हूं।
कट एंड स्लाइस मी फोटोशॉप के लिए एक मुफ्त एक्सटेंशन है। CS6 के लिए ही। यह आपको एक क्लिक में यह सब काम करने की अनुमति देता है।



प्रारंभ में, हमारा PSD लेआउट XHDPI के लिए होना चाहिए।

उदाहरण
चरण 1. हमें अपने आवेदन के लिए आइकन काटने की आवश्यकता है।
चरण 2. हम प्रत्येक आइकन को एक फ़ोल्डर में डालते हैं, नाम के अंत में हम @ जोड़ते हैं। इस प्रकार, स्क्रिप्ट निर्धारित करती है कि इस फ़ोल्डर को काट दिया जाना चाहिए।
चरण 3. एंड्रॉइड टैब पर जाएं, सभी संपत्तियां काटें पर क्लिक करें।
चरण 4. विस्तार 4 वांछित स्क्रीन घनत्व के लिए स्वचालित रूप से हमारे आइकन काटता है और उन्हें उपयुक्त फ़ोल्डर में रखता है।



कट एंड स्लाइस में शेष दो बटन चयनित सबफ़ोल्डर और वर्तमान में चयनित परत से टुकड़ा करने के लिए हैं।

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

9.PNG

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



ऐसा करने के लिए, 9.png प्रारूप का उपयोग करें। मैं NinePatchEditor में नियमित पीएनजी से ऐसी फाइलें बनाता हूं। वास्तव में, एक और पिक्सेल, जो काले रंग से भरा होता है, प्रत्येक तरफ मूल छवि में जोड़ा जाता है। बाईं ओर का काला पिक्सेल इस बात के लिए जिम्मेदार है कि क्षैतिज रूप से ऊपर - ऊपर आपकी तस्वीर "खिंचाव" कैसे करेगी। दाईं और नीचे की ओर पिक्सेल बटन के अंदर सामग्री रखने के लिए है।



वह सब है!




निरंतरता: मोबाइल अनुप्रयोगों के डिजाइन का एकीकरण। भाग 2: आईओएस, विंडोज फोन