في عملية العمل على تصميم واجهة المستخدم لإصدار الجوال للموقع أو تطبيق الهاتف المحمول ، جربت طرقًا مختلفة لتقديمه للعملاء. لقد اخترت Invision حتى الآن ، ولكن هناك عدد من النقاط.



أولاً ، التكلفة. بالنسبة للمحترفين ، هذه ليست مشكلة ، ولكن بالنسبة للعديد من المصممين المبتدئين ، فإن الحد الأدنى 13 دولارًا في الشهر هو مبلغ لائق تمامًا.

ثانيًا ، لسبب ما ، لم يتم حل مشكلة تمرير الماوس فوق الأزرار النشطة. ببساطة - التمرير لأسفل فوق الزر النشط يعمل مثل النقرة. وهذا غير مريح للغاية في الواجهات المعقدة إلى حد ما.

خيار آخر - Figma - لم يتم إتقانه بعد ، وحقيقة أنه سيتطور إلى معيار صناعي. لذلك ، سيتجاوزه بعض المصممين أيضًا.

عمل عرض تقديمي لتصميم تطبيقات الهاتف المتحرك في Axure

يبقى الخيار الأبسط والأكثر بأسعار معقولة هو Axure بالاشتراك مع Axshare. وهنا تبدأ Invision تفتقر إلى الحدة - لا يستطيع العملاء دائمًا تقديم العمل بالتفصيل مع التطبيق في أذهانهم.

لذلك دعونا نبدأ في تطوير أدواتنا الخاصة. والخطوة الأولى هي إنشاء قالب لـ Axure مع إطار هاتف محمول مشروط. للقيام بذلك ، نحتاج إلى إطار هاتف في PNG مع وجود "ثقب" في الشاشة وهيكل الشاشات.

في البداية - كل شيء بسيط: نضع صورة الهاتف لأسفل ، وفي الأعلى نضع الإطار المضمن بحجم فتحة الشاشة. ولكن هناك لحظة واحدة غير سارة. إنه مرتبط بميزات عنصر الإطار المضمن.
ينشئ هذا العنصر نافذة في النموذج الأولي لتحميل معلومات مختلفة - إطار. في ذلك ، يمكنك تعيين إخراج شاشة أخرى من الهيكل أو إدراج ارتباط إلى الموقع.

تنشأ المشكلة في أشرطة التمرير. يمكن إظهارها أو إخفائها. ولكن مع أشرطة التمرير المخفية ، يتم إيقاف الترجيع - لذلك لا تظهر الشاشات الطويلة للتطبيق في الديناميكيات. لا أمر.

لحل المشكلة ، نستخدم تقنية القناع (بفضل الكراك ).

1. تحويل الإطار المضمن إلى لوحة ديناميكية. قم بتشغيل عرض أشرطة التمرير (إذا تم إيقاف تشغيله).
2. نترجم إطار الهاتف وإطاره مرة أخرى إلى اللوحة الديناميكية ، حيث نقوم بإيقاف أشرطة التمرير. نغير أيضًا حجم القناع إلى 360x640 بحيث لا تختفي أشرطة التمرير من الإطار.

والباقي أسهل بالفعل - على الشاشة الرئيسية ، لا يزال لدينا إطار الهاتف في إطار وهمي. في الإطار ، نقوم بتحميل ناتج الشاشة التالية في القائمة ، وننشئ التنقل وهذا كل ما في الأمر. لا تنس دمج عناصر الشاشة الأولى في مجموعة وإنشاء لوحة ديناميكية منها.

يمكن محاذاة اللوحة نفسها في منتصف المتصفح. في إعدادات Pin to Browser ، حدد المعلمات Center و Top. ننشر كل شيء على Axshare ونرسل الرابط للعميل.

اختصار. نموذج جاهز لـ Axure

لقد قمت بتحميل النتيجة كملف نهائي. يمكنك تنزيل نموذج Axure مجانًا هنا .

نقطة مهمة

تم تصميم القالب لتناسب 360 عرضًا. يتم ذلك عن قصد. تبدو التخطيطات في 320 عرضًا صغيرًا جدًا للعين على شاشة كمبيوتر سطح المكتب ، والتنسيقات بالحجم الأصلي - 1080 (وحتى 640) ، على العكس - كبيرة جدًا.

PS أنا لن أكتب تعليمات قياسية ماذا وأين. أريد أن أقدم المزيد من الأشياء العملية لتحسين عمل مصممي UX / UI.

سأكون سعيدًا للإجابة على الأسئلة وسأكون سعيدًا باقتراحات التحسين!