100DAYUI - 002: كيفية إنشاء نموذج أولي لتفاعل أداة التصنيف في المبدأ

يضم واجهة مستخدم داكنة للويب مسموع ible

واجهة مستخدم مظلمة داكنة

100 أيام واجهة المستخدم

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

اليوم 2 - برنامج Dark Audible Web Player وقطعة التصنيف باستخدام برامج التشغيل الرئيسية

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

بعض الأشياء أسهل مع التعليمات البرمجية

إذن إليك كيفية جعل هذه الأداة في المبدأ:

الجزء الأول - التصميم والإعداد

1. في Sketch أو Figma ، صمم أداة التصنيف من خلال إنشاء جميع العناصر المطلوبة:

  • 5 رموز تعبيرية (أو أي شيء يعجبك) للتقييمات الخمسة المحتملة (تثاءب ، أم ، جيد ، رائع ، في حالة حب) ووضعها فوق بعضها البعض.

→ لا يهم أسماء الطلبات والطبقات في هذا التفاعل لأن جميع الرموز التعبيرية الأخرى ستكون مخفية ولكن واحدًا في كل حالة وسنعمل داخل لوح رسم واحد. ولكن سيكون من الأسهل العمل مع ملف منظم. اتصالك.

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

2. ضعه في الحالة الأولية (التثاؤب) عن طريق خفض عتامة جميع الرموز التعبيرية وأوصاف النص إلى 0٪ باستثناء تلك الخاصة بتلك الحالة.

3. استيراد لوح الرسم إلى المبدأ.

4. من حيث المبدأ ، انقر فوق المقبض الذي ستسحبه لتغيير التصنيفات ، واجعله قابلاً للسحب أفقيًا.

تحقق من لقطة الشاشة أدناه لمعرفة كيفية القيام بذلك.

الجزء 2 - تصميم التفاعل

  1. مع تحديد طبقة المقبض ، انقر فوق "برامج التشغيل" في الأعلى.

سنقوم بتغيير الرسم التوضيحي للنص المعروض ونصه بناءً على الموقع الأفقي للمقبض.

2. حدد جميع الرموز التعبيرية وطبقات النص باستثناء التثاؤب + جميع تعبئة شريط التصنيف باستثناء اللون الأحمر وقم بإنشاء إطار رئيسي حيث لديهم جميعًا عتامة 0٪.

2. حرك المقبض إلى طول التعبئة البرتقالية ، وأضف مفتاحًا رئيسيًا حيث:

  • عتامة YAWN ونصه هو 0٪.
  • عتامة حالة UMM ونصها هو 100٪.
  • عتامة التعبئة البرتقالية هي 100٪ والأحمر هو 0٪.

مشكلة

إذا جربت هذا ، فسترى أن عتامة أول حالتين ستتغير في نفس الوقت أثناء تحريك المقبض مما يؤدي إلى إنشاء هذه النتيجة غير الفعالة :

هناك نقاط يكون فيها للمستخدم حالة بينية

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

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

4. بعد ذلك مباشرةً ، أنشئ الإطار الرئيسي مع الحالة التالية. مثله:

5. كرر ذلك لجميع الولايات القادمة وسيكون لديك أداة عمل مثل تلك أدناه :)

وآمل أن يتمتع هذا البرنامج التعليمي!

  1. أي تعليقات؟ أشياء تعرف طريقة أفضل للقيام بها؟

2. أنا لا أحكم بأي حال من الأحوال على مصممي أمازون ، فأنا أحلم بأحلام اليقظة هنا. الكثير من الاحترام لهم وجهودهم المذهلة!

3. إمجويس من قبل Roundicons.

4. تعرف على محركات المبدأ هنا.