اذهب إلى المحتوى

البحث في الموقع

المحتوى عن 'التراتب المرئي'.

  • ابحث بالكلمات المفتاحية

    أضف وسومًا وافصل بينها بفواصل ","
  • ابحث باسم الكاتب

نوع المحتوى


التصنيفات

  • الإدارة والقيادة
  • التخطيط وسير العمل
  • التمويل
  • فريق العمل
  • دراسة حالات
  • التعامل مع العملاء
  • التعهيد الخارجي
  • السلوك التنظيمي في المؤسسات
  • عالم الأعمال
  • التجارة والتجارة الإلكترونية
  • نصائح وإرشادات
  • مقالات ريادة أعمال عامة

التصنيفات

  • مقالات برمجة عامة
  • مقالات برمجة متقدمة
  • PHP
    • Laravel
    • ووردبريس
  • جافاسكربت
    • لغة TypeScript
    • Node.js
    • React
    • Vue.js
    • Angular
    • jQuery
    • Cordova
  • HTML
  • CSS
    • Sass
    • إطار عمل Bootstrap
  • SQL
  • لغة C#‎
    • ‎.NET
    • منصة Xamarin
  • لغة C++‎
  • لغة C
  • بايثون
    • Flask
    • Django
  • لغة روبي
    • إطار العمل Ruby on Rails
  • لغة Go
  • لغة جافا
  • لغة Kotlin
  • لغة Rust
  • برمجة أندرويد
  • لغة R
  • الذكاء الاصطناعي
  • صناعة الألعاب
  • سير العمل
    • Git
  • الأنظمة والأنظمة المدمجة

التصنيفات

  • تصميم تجربة المستخدم UX
  • تصميم واجهة المستخدم UI
  • الرسوميات
    • إنكسكيب
    • أدوبي إليستريتور
  • التصميم الجرافيكي
    • أدوبي فوتوشوب
    • أدوبي إن ديزاين
    • جيمب GIMP
    • كريتا Krita
  • التصميم ثلاثي الأبعاد
    • 3Ds Max
    • Blender
  • نصائح وإرشادات
  • مقالات تصميم عامة

التصنيفات

  • مقالات DevOps عامة
  • خوادم
    • الويب HTTP
    • البريد الإلكتروني
    • قواعد البيانات
    • DNS
    • Samba
  • الحوسبة السحابية
    • Docker
  • إدارة الإعدادات والنشر
    • Chef
    • Puppet
    • Ansible
  • لينكس
    • ريدهات (Red Hat)
  • خواديم ويندوز
  • FreeBSD
  • حماية
    • الجدران النارية
    • VPN
    • SSH
  • شبكات
    • سيسكو (Cisco)

التصنيفات

  • التسويق بالأداء
    • أدوات تحليل الزوار
  • تهيئة محركات البحث SEO
  • الشبكات الاجتماعية
  • التسويق بالبريد الالكتروني
  • التسويق الضمني
  • استسراع النمو
  • المبيعات
  • تجارب ونصائح
  • مبادئ علم التسويق

التصنيفات

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

التصنيفات

  • الإنتاجية وسير العمل
    • مايكروسوفت أوفيس
    • ليبر أوفيس
    • جوجل درايف
    • شيربوينت
    • Evernote
    • Trello
  • تطبيقات الويب
    • ووردبريس
    • ماجنتو
    • بريستاشوب
    • أوبن كارت
    • دروبال
  • الترجمة بمساعدة الحاسوب
    • omegaT
    • memoQ
    • Trados
    • Memsource
  • برامج تخطيط موارد المؤسسات ERP
    • تطبيقات أودو odoo
  • أنظمة تشغيل الحواسيب والهواتف
    • ويندوز
    • لينكس
  • مقالات عامة

التصنيفات

  • آخر التحديثات

أسئلة وأجوبة

  • الأقسام
    • أسئلة البرمجة
    • أسئلة ريادة الأعمال
    • أسئلة العمل الحر
    • أسئلة التسويق والمبيعات
    • أسئلة التصميم
    • أسئلة DevOps
    • أسئلة البرامج والتطبيقات

التصنيفات

  • كتب ريادة الأعمال
  • كتب العمل الحر
  • كتب تسويق ومبيعات
  • كتب برمجة
  • كتب تصميم
  • كتب DevOps

ابحث في

ابحث عن


تاريخ الإنشاء

  • بداية

    نهاية


آخر تحديث

  • بداية

    نهاية


رشح النتائج حسب

تاريخ الانضمام

  • بداية

    نهاية


المجموعة


النبذة الشخصية

تم العثور على 1 نتيجة

  1. من السهل أن ننجرف وراء فكرة أنّ المستخدم سيقرأ كلّ حرف نكتبه في واجهتنا، وسيُشاهد كل بكسل، لكنّ الحقيقة عكس ذلك، فالمستخدم يمسح الصّفحة بعينيه سريعًا، ثمّ يتوقّف عند جزء ما يلفت انتباهه. سنتعلّم اليوم عن أسلوبي مسح الواجهة: النّمط Z والنّمط F، والتّراتب المرئيّ. قد تظنّ أن تجربة استخدام تطبيق أو موقع مختلفة عن تجربة التّطبيقات والمواقع الأخرى، إلّا أنه في الحقيقة يمكن بسهولة توقّع نمط اطّلاع المستخدمين على الواجهة. فهرس سلسلة مدخل إلى تجربة المستخدم: مدخل إلى تجربة المستخدم User Experience فهم ودراسة المستخدمين في مجال تجربة المستخدم دراسة الشريحة المستهدفة في مجال تجربة المستخدم كيفية التصميم للأجهزة المختلفة هندسة المعلومات في تجربة المستخدم تعرف على أنماط التصميم في مجال تجربة المستخدم أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم التكرار ومخالفة الأنماط في مجال تجربة المستخدم المحاذاة والقرب في مجال تجربة المستخدم تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم (هذا الدرس) أساليب الإطلاع في مجال تجربة المستخدم: التصفح، البحث والاكتشاف تصميم هيكل صفحة الويب والعناصر الأساسية في مجال تجربة المستخدم الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه كيف تغير الخبرة من تجربة المستخدم؟ تصميم تجربة المستخدم من خلال بيانات وإحصائيات المستخدمين تعرف على أنواع المخططات الإحصائية في مجال تجربة المستخدم اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم النمط Z لنبدأ بأكثر التّصميمات إثارةً للملل: صفحة نصّيّة في جريدة، كلّها قصّة واحدة، دون عناوين أو صور أو فواصل أو اقتباسات بخطّ كبير، لا شيء سوى النّص، من أوّلها إلى آخرها. في تصميم كهذا (أرجو أن لا يكون من صنعك!) سيمسح القارئ الصّفحة بما يُشابه حرف Z (معكوس في العربيّة). نريد من خلال ما تعلّمناه عن أنماط التّصميم المرئيّ أن نُحسّن من هذا التّصميم. لو أضفنا عنوانًا (ثقل مرئيّ)، وعمودًا واحد يتبعه (خطّ وهميّ) ثمّ جزأنا النّص على أقسام أصغر (تكرار) لحصلنا على ما يُشبه النّمط F الشّهير. النمط F تُظهر الصّورة أعلاه نتائج تتبّع العين، وهي تقنيّة تُسجّل موضع نظر المُستخدم، وكلّ ما أطال المُستخدم نظره في موضع ما، بدا هذا الموضع أكثر "حرارة" في الخريطة الحراريّة أعلاه. التّخطيطات المُشابهة للصّورة أعلاه تعطي نتائج مُشابهة للخريطة الحراريّة السّابقة. اكتسب مؤسّسو مجموعة Nielsen Norman بعض الشّهرة من خلال النّمط F، وعلى الرّغم أنّهم لم يأتوا بثورة مُشابهة منذ زمن، فإنّهم ما يزالون ينشرون مقالات كثيرة تستحقّ القراءة. هكذا يعمل النّمط F: ابدأ في الزّاوية العلويّة اليُسرى (لقارئي الإنكليزية، أو العلويّة اليُمنى لقارئي العربيّة)، كما في النّمط Z. اقرأ أو امسح العنوان أو السّطر الأوّل من النّصّ. امسح بنظرك القسم الأيسر (أو الأيمن بالعربيّة) مُتجّها للأسفل من العمود حتّى تجد شيئًا مثيرًا للاهتمام. اقرأ ما أثار اهتمامك بتأنٍّ. تابع المسح بنظرك نحو الأسفل. بتكرار هذه الخطوات مرارًا ستبدو الخريطة الحراريّة وكأنّها حرف F أو E (معكوسين للعربيّة)، ومن هنا جاءت التّسمية. ما المهم في ذلك؟ لاحظ كيف تستحوذ بعض أجزاء الصّفحة على اهتمام كبيرة بصورة طبيعيّة دون أجزاء أخرى قد يتجاهلها المُستخدم معظم الوقت، وهذا ما يُسمّى المناطق القويّة والضّعيفة في التّصميم. فزرّ يقع في أيمن وأعلى الصّفحة سيتلقّى نقرات أكبر من زرّ يقع في يسارها وأعلاها، والّذي سيتلقّى نقرات أكثر بدوره من زرّ يقع في يمينها وأسفلها، وأمّا أقلّها نقرًا فستكون الأزرار الموضوعة في أماكن عشوائيّة في منتصف الصّفحة، ما لم نفعل شيئًا يُحسّن من وضعها. اعلم أيضًا أنّ كل "قطعة" من المحتوى يمكن أن تُنشئ نمط F مستقلّ عن بقيّة القطع، فقد تحوي الصّفحة على أكثر من نمط F، وهذا موضوع متقدّم خارج عن حديثنا اليوم. التراتب المرئي (Visual Hierarchy) عندما تستخدم الخطوط للإشارة إلى أهمّية نصّ ما، وبعض الألوان لتمييز الأزرار، وتُضفي ثقلًا مرئيًّا على الأجزاء المُهمّة، فهذا يخلق تراتبًا مرئيًّا، أي تصميمًا يمكن للنّاس مسحه بسهولة، إذا تنتقل العين سريعًا من جزء مهمّ إلى جزء مهمّ آخر وهكذا... يعتقد بعض المصمّمين أن التّراتب المرئيّ أمرٌ جيّد لكونه يُعطي مظهرًا أفضل للتّصميم، وهذا صحيح، ولكنّه أيضًا يُعطي شعورًا مُريحًا لأنّه يسهلُ مسحه بالعين. هل تريد مشاهدة نتائج أكثر لمتابعة العين؟ ألقِ نظرة على صفحة متابعة العين الّتي أنشأتها على Pinterest سنتابع الحديث عن مواضيع متعلّقة بمتابعة العين في الدّرس القادم، ومن ذلك كيف يستخدم النّاس التّصميم بأساليب مختلفة، بين التّصفّح والبحث والاكتشاف. ترجمة بتصرّف للدّرس Z-Pattern, F-Pattern, and Visual Hierarchy من سلسلة Daily UX Crash Course لصاحبها Joel Marsh. اقرأ أيضًا النسخة العربية الكاملة لكتاب مدخل إلى تجربة المستخدم (User Experience - UX) 1.0.0 المبادئ الخمسة الأساسية في قابلية الاستخدام (Usability) كيف تقوم تجربة المستخدم (UX) في خمس دقائق كيف تنشئ منزلِقًا Slider مناسبا للواجهة الرسومية عند التصميم للجوال
×
×
  • أضف...