मोबाइल ऐप डिज़ाइन एकीकरण। भाग 2: आईओएस, विंडोज फोन

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

आईओएस

हम आईओएस से पास होते हैं। एंड्रॉइड की तुलना में यहां सब कुछ बहुत सरल है। एकीकरण प्रक्रिया को iPhone के उदाहरण से निपटा जाएगा, लेकिन नीचे वर्णित सब कुछ सफलतापूर्वक iPad पर लागू किया जाता है।



जैसा कि हम सभी जानते हैं, iPhone में केवल दो प्रकार की स्क्रीन होती हैं: "रेटिना", "रेटिना नहीं"।

मेट्रिक्स

इसलिए, मेट्रिक्स फ़ोल्डर में एंड्रॉइड के लिए सब कुछ समान होना चाहिए: तत्वों का आकार, उनके बीच का इंडेंटेशन और स्क्रीन के किनारे से, ठोस तत्वों के रंग (उदाहरण के लिए, विभाजक), आदि। यह नोट करना महत्वपूर्ण है (और याद रखें!) प्रोग्रामर के लिए रंगों को दशमलव प्रारूप में निर्दिष्ट किया जाना चाहिए । उदाहरण के लिए, आरजीबी (255, 255, 255), और हेक्साडेसिमल में नहीं - #FFFFFF।

गैर-रेटिना स्क्रीन के लिए प्रोग्रामर के लिए आयाम निर्दिष्ट किए जाने चाहिए।



और चूंकि psd-mockups रेटिना के लिए बने होते हैं, इसलिए, सही संचालन के लिए, छवि पर जाएं, छवि आकार पर क्लिक करें, और मान को 50% पर सेट करें।



आप लेआउट को "आयाम" करने के लिए बोलना शुरू कर सकते हैं। हम पीएनजी एक्सप्रेस की मदद से ऐसा करेंगे , जो पहले से ही हमारे लिए परिचित है ($ 29, पीएस CS5 / 6 के लिए)। सब कुछ Android के समान है।



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

फ़ॉन्ट्स

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



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



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

साधन

Res फ़ोल्डर में आपके एप्लिकेशन के लिए ग्राफिक्स संसाधन होने चाहिए। IPhone के लिए, सब कुछ एक फ़ोल्डर में जोड़ता है:
रेटिना के लिए फाइलें @ 2x, यानी एक्सेल @ 2x.png , रेटिना के साथ निर्दिष्ट नहीं हैं - केवल excel.png



फिर से, कट एंड स्लाइस मी एक्सटेंशन (पीएस सीएस 6 के लिए मुफ्त) का उपयोग करें।



मूल Psd लेआउट रेटिना स्क्रीन के लिए होना चाहिए।


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



"साबुन" पिक्सेल की समस्या से बचने के लिए, सभी तत्वों का आकार समान होना चाहिए।

सैमसंग बड़ा

प्लेटफार्मों की सूची में तीसरे नंबर पर सैमसंग बाडा है। रूस में एक काफी लोकप्रिय मंच। लेकिन सैमसंग ने हाल ही में इस मोबाइल ऑपरेटिंग सिस्टम को आधिकारिक तौर पर बंद करने की घोषणा करके मार डाला। इसलिए, बडा के बारे में या तो आप इसे अच्छी तरह से कर सकते हैं या बिल्कुल नहीं ...



तो, विंडोज फोन।

विंडोज फोन

यहां स्थिति आईओएस को दोहराती है, इसलिए बस फिर से प्रक्रिया पर जाएं।



WP में, हमारे पास दो मुख्य प्रकार की स्क्रीन हैं: W V GA, W X GA।

मेट्रिक्स

प्रोग्रामर के लिए आयामों को डब्ल्यू वी जीए स्क्रीन के लिए संकेत दिया जाना चाहिए।



PNG एक्सप्रेस का उपयोग करते हुए , हम लेआउट को "आकार" देते हैं ।

उदाहरण

फ़ॉन्ट्स

उदाहरण

साधन

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



पहले हम डब्ल्यू वी जीए के लिए ग्राफिक्स बनाते हैं। ऐसा करने के लिए, कट एंड स्लाइस पर जाएं और तीसरे टैब पर जाएं, जो परतों को 1 से 1 तक काटता है। वास्तव में, यह वेब कमांड के लिए बड़े पैमाने पर सेव को बदल देता है।



तब हम डब्ल्यू वी जीए को डब्ल्यू एक्स जीए में अनुवाद करते हैं, छवि आकार में हम 160% निर्धारित करते हैं।



प्रक्रिया को दोहराएं।



यही है, अब हम सभी प्रमुख मोबाइल प्लेटफार्मों के लिए डिजाइन के एकीकरण में महारत हासिल कर चुके हैं।