يشق لا ينضب

في الوقت الحالي ، يتم استخدام الهواتف المحمولة بشكل متزايد ليس فقط لاستهلاك المحتوى ، ولكن أيضًا للإبداع.



ويواجه المطورون السؤال - كيف نضع واجهة تطبيق كبير على شاشة صغيرة للهاتف المحمول؟





يوجد أسفل القص قصة حول حل مشكلة الواجهة المعقدة لتطبيقات الموسيقى. تم إنشاء التطبيق لمنصة VK Mini Apps ، ولكن ربما تكون المبادئ العامة مناسبة للأنظمة الأساسية الأخرى أيضًا.

تاريخ واجهات محرر الموسيقى

تعد برامج تحرير الموسيقى برامج معقدة تتطلب رسومات مكثفة. حتى أبسط عبارة "ولدت شجرة عيد الميلاد في الغابة" تتكون من عدة مسارات للطبول والباس والبيانو وكل مسار يحتوي على مئات النوتات الموسيقية.



يجب وضع كل هذا بطريقة ما على الشاشة ، ويجب أن تكون جميع العناصر قابلة للتعديل.



عادة ما تبدو واجهة المستخدم كما يلي:





لم تتغير مبادئ UX / UI للبرامج الموسيقية لسنوات عديدة. هكذا كانوا يبدون قبل 30 عامًا:





- في الواقع ، تمت إضافة المزيد من الألوان والأزرار.



كيف تطورت واجهات المحمول؟



على المسار القياسي الواسع.



تم أخذ واجهة تطبيق سطح المكتب وخفض حجمها ، وتم قطع الوظائف بلا رحمة.



فيما يلي مثال لإصدار محمول من FL Studio (هذا واحد من أفضل منصات العمل الصوتية الرقمية):





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



الصعوبات في نقل الواجهة إلى الشاشات الصغيرة



لجعل عمق المشكلة أكثر وضوحًا ، ضع في اعتبارك معادلًا تقليديًا من 10 نطاقات.



يستخدمه معظم الناس دون معرفة ما هو عليه. على سبيل المثال ، هذا هو المعادل المدمج في خدمة Yandex Music:





لسهولة الضغط بالإصبع ، يجب ألا يقل حجم الأزرار وأشرطة التمرير عن 1 سم. يحتوي المعادل على 10 أشرطة تمرير ، أي. يجب أن يكون عرضه الإجمالي 10 سم.



لكن هذا أكبر من عرض الهواتف المحمولة! وهذه مجرد واحدة من العديد من الضوابط.



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

إيجاد حل

هل توجد طرق لمساعدتك على إنشاء واجهات معقدة وسهلة الاستخدام للشاشات الصغيرة؟



بالتأكيد.



هذه بطاقات. وليس فقط في الهواتف المحمولة ، ولكن أيضًا على سطح المكتب.





تستخدم الخرائط طبقات المقياس والرؤية للعناصر. يظهر ملايين العناصر التفاعلية على شاشة صغيرة.



يستخدمها معظمهم بشكل حدسي ، مما يؤكد فائدة نهج UX / UI هذا.

مثال على الحل

تقرر وضع المسارات فوق بعضها البعض وإضافة التحجيم إلى لفة البيانو بأكملها جنبًا إلى جنب مع عناصر التحكم.



في الإحصائيات تبدو مثل التطبيقات الأخرى من مجال الموسيقى:

لكن في الديناميكيات ، من الواضح أن سلوكها مختلف تمامًا:



فتح فيديو العمل مع التطبيق



يمكن فتح المشروع من الفيديو في فكونتاكتي لاختبار:

• فتح في التطبيق
• يعمل على حد سواء على الهواتف وداخل رسائل تغذية فكونتاكتي

سمح التطبيق الكلي لنهج تحجيم واجهة المستخدم بتلائم عدد كبير من العناصر على شاشة صغيرة.

• جميع العناصر "في متناول اليد" ويمكن الوصول إليها بسرعة
• يتمتع المستخدم بفرصة مشاهدة المشروع بأكمله ، وليس في الأجزاء التي تناسب شاشة صغيرة