أنماط UI / UX الأساسية

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

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


النمط هو نمط متكرر يمكن أن يحدث في مناطق مختلفة من الحياة.

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



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

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

الدماغ البشري




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

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

قوة العادة




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

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

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

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

الغرائز القديمة




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

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

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

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

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

ذاكرة الوصول العشوائي في المخ




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

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

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

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

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

التعرف على الأنماط




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

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

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


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

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

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

القدرة على الحركة


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

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

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

يؤدي


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

Source: https://habr.com/ru/post/ar476532/


All Articles