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

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

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

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

قوة التفاعلات الدقيقة

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

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

لقد وجدت اقتباسًا لا يصدق في هذا المنشور يناقش القيمة الهائلة للتفاعلات الصغيرة لتطبيقات الأجهزة المحمولة:

“أفضل المنتجات تؤدي شيئين: الميزات والتفاصيل. الميزات هي ما يجذب الناس إلى منتجك. التفاصيل هي ما تبقى لهم هناك. والتفاصيل هي التي تجعل التطبيق في الواقع يبرز من منافسينا.”

ال التفاصيل الصغيرة قد يبدو غير مهم من وجهة نظر التطوير ، ولكن من وجهة نظر المستخدم تجربة أنها حقا جعل الفرق بين واجهة مستخدم التطبيق OK وواجهة تطبيق غير عادية.

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

ألقِ نظرة على الأمثلة الموجودة في مواصفات تصميم المواد من Google. الوثائق في الواقع قسم كامل مخصص لحركة المواد. العلاقات المكانية هي جزء كبير من هذه المعادلة ، ولكن الحركة يمكن أن تملي أكثر من مجرد علاقات مكانية.

هنا الاستخدامات الأكثر شيوعًا للرسوم المتحركة والحركة في تصميم UI / UX المحمول:

• توجيه المستخدمين بين الصفحات المختلفة
• توجيه المستخدمين من خلال الواجهة لتعليم بعض السلوكيات
• اقتراح الإجراءات / السلوكيات التي يمكن اتخاذها على أي صفحة معينة

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

كيف تعمل التفاعلات الدقيقة

حريق microinteraction واحد عندما يشارك المستخدم مع جزء واحد من واجهة. معظم التفاعلات الدقيقة هي ردود متحركة لإيماءة المستخدم. لذلك سوف تستجيب حركة الضرب بشكل مختلف عن نقرة أو نقرة.

قامت Blink UX بمهمة رائعة تناقش التفاصيل البسيطة للتفاعلات الدقيقة. يجب أن تتبع هذه الرسوم المتحركة الصغيرة عملية يمكن التنبؤ بها أن المستخدم يمكن أن يتعلم لكل تفاعل في التطبيق.

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

وفقًا لـ UXPin ، يمكن تقسيم كل تفاعل دقيق أساسي إلى أربع خطوات ، لكني لخصت العملية فيه ثلاث خطوات.

1. عمل - ال المستخدم يفعل شيئا مثل نفض الغبار ، انتقد ، اضغط مع الاستمرار ، أو بعض التفاعلات الأخرى.
2. رد فعل - ال يستجيب واجهة بناء على ما يجب أن يحدث. قد ينتقل تمرير الشاشة مرة أخرى في سجل المتصفح ، أو قد يؤدي النقر فوق منزلق ON / OFF إلى إيقاف تشغيل أحد الإعدادات.
3. ردود الفعل - هذا هو ما يرى المستخدم في الواقع نتيجة للتفاعل. عندما يضرب المستخدم مرة أخرى في متصفح الجوال ، فقد يطفو على الصفحة السابقة لأعلى لتظهر "في أعلى" الشاشة. قد ينزلق منزلق التشغيل / الإيقاف بسلاسة أو يزداد حجمًا عند تطبيق الضغط على الشاشة.

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

ابحث عن التفاصيل

من خلال النظر إلى الأجزاء الأصغر من التصميم ، ستفهم كيف يجب أن يستجيب التطبيق لسلوك معين.

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

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

النظر في بعض الأمثلة

أعتقد أن أفضل طريقة لتعلم شيء ما هي القيام بذلك ، والثاني هو أفضل طريقة لدراسة عمل الآخرين. لقد جمعت حفنة صغيرة من الرسوم المتحركة UI / UX microinteraction من المستخدمين الموهوبين Dribbble لتظهر لك كيف تبدو هذه في نموذج بالحجم الطبيعي الحقيقي.

سيكون كل تطبيق مختلفًا وله احتياجات مختلفة بناءً على ما يفعله التطبيق. في النهاية ، يريد معظم المستخدمين نفس الشيء: تطبيق موجود حدسي و توفر تجربة مستخدم عالية الجودة مع التفاعلات الدقيقة بالنسبة لسلوكيات المستخدم.

1. الحدث المتحركة التطبيق UI

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

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

2. شاشة التمارين التفاعلية

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

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

3. البحث التطبيقات التفاعلات الدقيقة

باختصار، الحلو، وإلى هذه النقطة. أعتقد أن هذا يصف أفضل تفاعلات تطبيق البحث هذه التي صممها Lukas Horak. كل الرسوم المتحركة هي سريعة ولكن لا تزال ملحوظة.

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

4. اللياقة البدنية الهدف Microinteraction

أعتقد أن Jakub Antalà ؟؟ ؟؟ k k hit hit hit of with hit hit حقا ضرب هذا واحد خارج الحديقة مع هدفه اللياقة البدنية microinteraction. جميع الشاشات لديها هذا الشعور jiggly jell-o لأن الأشكال تتحرك السوائل جدا.

ومع ذلك ، تشعر الواجهة أيضًا صلبة وقابلة للاستخدام. وغني عن البيان أن التفاعلات الدقيقة المصممة لغرض ما يمكن أن تظل ممتعة ومسلية ولكنها عملية أيضًا وعملية.

5. سحب لتحديث الرسوم المتحركة

إليك إحدى الرسوم المتحركة المفضلة المطلقة التي قمنا بإنشائها بواسطة فريق Ramotion. هذا ليس فقط يحاكي السائل مع عمل السحب ، ولكن الرسوم المتحركة استجابة يربط بسلاسة من دفقة من السائل إلى دائرة التحميل.

هذه الكثير من الاهتمام بالتفاصيل هو ما يبرز الجمال الحقيقي في التفاعلات الدقيقة تطبيقات الجوال.

6. تبويب Microinteraction

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

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

7. التحميل المسبق للرسوم المتحركة

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

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

تغليف

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

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