توقف عن كونها سو سكوير
بصفتك محترف تصميم ، أنت على دراية (وربما تساهم في) زيادة استخدام الدوائر في جميع عناصر التصميم.
من عناصر الديكور المنزلي مثل المرايا ذات الإطار المستدير والمطبوعات إلى الأدوات اليدوية في متجر الأجهزة ، توجد دوائر في كل مكان. لقد دارت الدوائر طريقها إلى مواقعنا على الويب ، وتظهر في العناوين ، والقوائم ، وأحيانًا تصطدم بالدب في منتصف الصفحة.
حتى أن عددًا قليلاً من مواقع التصميم قام بإنشاء مشاركات مدونة تتضمن لقطات شاشة رائعة للاستخدام الإبداعي للدوائر في تصميم الويب. ومع ذلك ، فقد قيل القليل عن علم النفس وراء استخدام الدوائر في التصميم ، أو كيف يمكن دمج استجابة المستخدم للدوائر بشكل فعال في الظاهرة المتنامية للاستخدام المحمول.
نحن نعلم أننا نحب الدوائر ، ولكن لماذا؟ وكيف يمكن لمصممي الويب استخدام الدوائر بشكل أفضل لتحسين تجربة المستخدم في التصميم سريع الاستجابة؟
الدوائر والدماغ
الإدراك والإدراك
تناشد الدوائر الناس لأنها أسهل في الفهم من الأشكال والكائنات ذات الخطوط الصلبة.
تنجذب العين إلى الدوائر والمعلومات الموجودة بها ، وهي أسرع وأسهل على عملية الدماغ من المربعات ذات الحواف الصلبة والمستطيلات.
عالم الرياضيات والفيزيائي السويسري يورج نوني ، مؤلف كتاب "التصور البصري" ، يوحي بأن إزالة الحواف تسمح لنا بمعرفة كائن بسرعة أكبر. وفقا ل Nonni ، "المستطيل ذو الحواف الحادة يأخذ في الواقع مجهودًا معرفيًا أكثر قليلاً من على سبيل المثال شكل إهليلجي من نفس الحجم. لدينا "fovea-eye" أسرع في تسجيل دائرة. تنطوي الحواف على أدوات إضافية للصور العصبية. وبالتالي تباطأ العملية ".
منحنيات مألوفة ومريحة
بالإضافة إلى قدرة الدماغ المعرفية على معالجة الدوائر بسرعة أكبر من معالجة المربعات والمستطيلات ، نقوم بمعالجة المعلومات والأشياء المألوفة بشكل أسرع من تلك التي لا ندركها.
يتعرف الجميع على الدوائر ويتعلم الأشخاص كيفية ربط الأشكال بإجراءات ونتائج محددة ، مثل علامة "STOP" ذات الثمامة الحمراء. وفقًا لـ Apple X's Interface Guidelines ، "يتعلم الناس كيفية ربط سلوكيات معينة بعناصر محددة تعتمد على مظهرهم. على سبيل المثال ، يتعرف الأشخاص على أزرار الدفع من خلال شكلها المستدير. "
استخدام فعال للدوائر في عناصر القائمة الرمزية على Azonmedia صفحة الخدمات.
إننا نواجه دوائر وأهداف بيضاوية وكائنات ذات حواف مستديرة في العديد من الطرق الدافئة وغير التهديفية عبر الثقافات والبيئات. الغيوم والبيض والشمس والقمر في الطبيعة تبدو كلها مدورة إلى العين المجردة. الوجوه المبتسمة ، والكعك ، والفطائر ، والشخصيات المتعرجة كلها ترضي الحواس.
أدمغتنا تستجيب بشكل جيد للدوائر والمنحنيات ، بينما تدرك الأشياء ذات الحواف الصلبة بأنها أكثر قساوة وأكثر تحديدًا مع احتمال أن تكون تهديدًا.
الدوائر وتجربة المستخدم
الدوائر فعالة في تصميم الويب لهذه الأسباب تحديدًا.
إن مستخدمي الإنترنت غير صبورين ، ولأن الدوائر أكثر سهولة فهمها وفهمها ، فإنها تستغرق وقتًا أقل في معالجة المعلومات التي تمثلها.
مستخدمو الجوّال أكثر صبرًا. كما أنهم مشغولون ، وغالبًا ما يكونون في حالة تنقل ، وتعدد المهام ، وباستخدام إصبع السبابة أو الإبهام للتنقل في أجهزتهم المحمولة. انهم يريدون معلوماتهم الآن. تساعد الدوائر مستخدمي الجوال على تحديد المعلومات التي يبحثون عنها بكفاءة أكبر.
الدوائر والإبهام
هناك طرق أخرى مفيدة في بيئة التصميم الأولى والمتجاوبة ، وهي ملاءمتها كعناصر في واجهات الشاشة اللمسية.
نظرًا لاستخدام الهواتف الذكية وأجهزة الكمبيوتر اللوحية التي تعمل باللمس ، يمكنك النقر بأصابعك أو تمريرها أو إبهامها إلى المعلومات التي يبحثون عنها ، فمن المنطقي استخدام الدوائر لتوجيه المستخدم. فهي لا تقلد شكل الإصبع فقط ، بل نربط الدوائر والحواف المستديرة بأزرار الدفع ، وتعمل أدمغتنا بسرعة على معالجة الإجراءات المطلوبة.
عند دمج الدوائر في واجهة الجوال التي تعمل باللمس ، قم بتصميمها على أصغر شاشة. يجب أن يظل من السهل قراءة النص أو الصور داخل الدائرة ، ويجب أن يظل الحجم على الأقل بحجم حجم الإصبع ، أو 44 بكسل.
الدوائر ومساحة الشاشة
والخبر السار حول استخدام الدوائر في التصميم المتجاوب هو أن CSS3 يبسط متطلبات التشفير بشكل كبير.
الخبر السيئ هو أن الدوائر تستحوذ على الكثير من العقارات ، وتؤدي إلى مساحة أكبر للشاشة.
نظرًا لأن مساحة الشاشة على الهواتف الذكية والأجهزة اللوحية يمكن أن تكون صغيرة جدًا ، فكيف يمكنك إنشاء دوائر دون القلق من أن تصبح صغيرة جدًا بحيث يتعذر قراءتها أو النقر عليها أو النقر عليها؟
واجهة المحمول بسيطة
فهو يساعد على إبقاء واجهة الجوال بسيطة. نظرًا لأن العين مرسومة إلى الدائرة على أي حال ، فلا فائدة من ازدحام بقية الشاشة بالمحتوى الذي سيفتقده المستخدم.
ما لم تكن جزءًا من الرأس أو الشعار ، احرص على استخدام دائرة إلى حد أدنى من واحد أو اثنين في كل صفحة. جرّب استخدام زر بحث دائري ، أو استخدم زرًا لحث المستخدم على اتخاذ إجراء مثل "اتصل هنا" أو "اشترك هنا".
تصميم الجاذبية تستخدم الدوائر واللون لجذب العين إلى الشعار والمحفظة والنص على الصفحة الرئيسية.
خلفيات وأزرار المشاركة
كما هو الحال مع أي عنصر تصميم ، يجب أن يتناسب استخدام الدوائر مع المحتوى أو المنتج أو الخدمة والأسلوب والعلامة التجارية للموقع. يجب أن يعزز تجربة المستخدم ويبسط الواجهة.
إذا كان استخدام العبارة التي تحث المستخدم على اتخاذ إجراء غير مناسب للموقع ، أو إذا لم تعمل عناصر التنقل وعناصر القائمة ببساطة داخل دائرة ، ففكر في دمج دائرة في الخلفية. استخدم دائرة أكبر في الخلفية لرسم العين إلى أهم محتوى في الصفحة (شبه شفافة خلف النص).
تذكر أن المحتوى هو ما يكون عليه مستخدم الهاتف المحمول في المقام الأول. شجِّع تفاعل المستخدم من خلال اختيار أزرار المشاركة عبر الشبكات الاجتماعية بدلاً من الخيارات المستطيلة.
الرموز الدائرية في التصميم سريع الاستجابة
تعد إحدى الطرق الأكثر شيوعًا لدمج الدوائر في مواقع الويب بمثابة رموز في قائمة. وهذا يناسب التصميم سريع الاستجابة ، حيث إنه يحل محل النص المطول و / أو المشوش مع صورة أبسط.
Buza يستخدم الدوائر لاستكمال القائمة المتنقلة العمودية.
يأخذ الرمز الدائري مساحة أقل ، مما يتيح مساحة أكبر للمحتوى. تبدو جيدة ويعالج المستخدم بسرعة ما يمثله.
الأفران أو المستطيلات المستديرة
ربما أنت لست على استعداد للف ذراعيك حول دائرة قديمة كبيرة. حسنا. لكن لا تلتصق بالحواف الصلبة.
أضف بعض المستطيلات المستديرة أو الأشكال البيضاوية إلى مجموعة أدوات التصميم المتجاوبة. تسهل الزوايا الرقيقة التركيز على المحتوى داخل المنحنيات ، بدلاً من جذب انتباهك إلى الحواف الخارجية.
كلمة أخيرة
في حين أن مصممي الويب قد يقضون ساعات مؤلمة على مزايا الدوائر أو المستطيلات ذات الحواف المستديرة مقابل الحواف الحادة ، عندما يتعلق الأمر بإرضاء المستخدم بتصميم الجوال ، فإن الأمر كله يتعلق بالمحتوى. يريد المستخدم محتوى جذابًا ومفيدًا يتم تقديمه في واجهة بسيطة وسهلة البحث. كل شيء اخر هوه شيء ثانوي.
على الرغم من أن تصميم الويب سريع الاستجابة يهدف إلى الاستجابة للبيئة ، إلا أنه يجب أن يستجيب أيضًا لاحتياجات المستخدم. يتعرف المستخدمون على الشكل المألوف للدائرة ، ويدركونه بسرعة ، ويمكنهم بسهولة وضع نقطة النقر على الشاشة. استخدم دائرة بسيطة في مشروع التصميم المستجيب التالي. سوف يشكرك المستخدمون على ذلك.
هل تستخدم دوائر لدعوات الشراء؟ هل تلعبها بأمان مع مستطيلات مدورة ببراعة؟ أخبرنا في التعليقات أدناه.