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



सबसे पहले, लागत। पेशेवरों के लिए, यह कोई समस्या नहीं है, लेकिन कई नौसिखिए डिजाइनरों के लिए, प्रति माह न्यूनतम $ 13 काफी सभ्य राशि है।

दूसरे, किसी कारण से, सक्रिय बटन के शीर्ष पर माउस को स्वाइप करने के साथ समस्या अभी भी हल नहीं हुई है। सीधे शब्दों में कहें - सक्रिय बटन पर स्क्रॉल करना एक क्लिक की तरह काम करता है। और यह काफी जटिल इंटरफेस में बहुत असुविधाजनक है।

एक अन्य विकल्प - फिम्मा - अभी तक महारत हासिल नहीं किया गया है, और यह तथ्य कि यह एक उद्योग मानक में विकसित होगा। इसलिए, कुछ डिजाइनर भी इसे बाईपास करेंगे।

एक्सुर में मोबाइल एप्लिकेशन के डिजाइन की प्रस्तुति बनाना

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

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

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

स्क्रॉल बार में समस्या उत्पन्न होती है। उन्हें या तो दिखाया जा सकता है या छिपाया जा सकता है। लेकिन छिपी हुई स्क्रॉल पट्टियों के साथ, रिवाइंडिंग को बंद कर दिया जाता है - इसलिए एप्लिकेशन की लंबी स्क्रीन डायनेमिक्स में दिखाई नहीं देती है। आदेश नहीं।

समस्या को हल करने के लिए, हम एक मुखौटा तकनीक (धन्यवाद क्रैकजैक ) का उपयोग करते हैं।

1. इनलाइन फ्रेम को डायनामिक पैनल में बदलें। स्क्रॉलबार के प्रदर्शन को चालू करें (यदि बंद हो गया है)।
2. हम फोन के फ्रेम और फ्रेम को डायनेमिक पैनल में एक बार फिर से ट्रांसलेट करते हैं, जिसमें हम स्क्रॉलबार बंद कर देते हैं। हम अपने मास्क के आकार को 360x640 में भी बदलते हैं ताकि फ्रेम से स्क्रॉलबार बाहर न झांकें।

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

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

शॉर्टकट। Axure के लिए तैयार टेम्पलेट

मैंने परिणाम को एक तैयार फ़ाइल के रूप में अपलोड किया है। आप यहां फ्री में Axure के लिए टेम्पलेट डाउनलोड कर सकते हैं ।

महत्वपूर्ण बिंदु

टेम्पलेट को चौड़ाई में 360 लेआउट के लिए डिज़ाइन किया गया है। यह उद्देश्य पर किया जाता है। 320 वाइड में लेआउट डेस्कटॉप कंप्यूटर स्क्रीन पर आंख के लिए बहुत छोटा दिखता है, और मूल आकार में लेआउट - 1080 (और यहां तक ​​कि 640), इसके विपरीत - बहुत बड़ा।

पीएस मैं मानक निर्देश नहीं लिखूंगा कि क्या और कहां। मैं ux / ui डिजाइनरों के काम को बेहतर बनाने के लिए और अधिक व्यावहारिक चीजें देना चाहता हूं।

मुझे सवालों के जवाब देने में खुशी होगी और अनुकूलन के लिए सुझावों से खुशी होगी!