رتبها

فاطمة العمودي 🌻 | UI/UX Designer

15 تغريدة 17 قراءة Mar 22, 2022

ترتيب المحتوى له أثر كبير في جذب المستخدم وفي الشكل النهائي للتصميم.
ثريد اليوم بيكون عن تسلسل البصري (Visual Hierarchy) 🧵

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

اول شئ ماهو Visual hierarchy:
هو الترتيب العام للمحتوى في التصميم على حسب أهميتها بحيث يوضع المحتوى المهم في المقدمة لمساعدة المستخدم للوصول إلى هدفه.

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

كيف نبني التسلسل الهرمي للتصميم:
عن طريق إعطاء عناصر التصميم او المحتوى المهم هذه الأشياء:
١- الحجم(Size): المستخدمين ينجذبون للعناصر الكبيرة.

٢-التباين(Contrast): الألوان الفاقعة أو التي تكون نسبة التباين بينها وبين الخلفية مرتفعة تجذب الإنتباء أكثر.

٣-اللون(Color): الألوان الزاهية تجذب النظر أكثر من الألوان الهادئة.

٤-المحاذاة(Alignment): النصوص والأشكال الخارجة عن المحاذاة تجذب الأنتباه (يجب التنبه عند استخدامها لانها ممكن ان تجعل التصميم غير مرتب).

٥-التكرار(Repetition): الأشكال والتصاميم المتكررة يمكن ان تفهم انها لها علاقة مع بعضها.
٦-القرب(Proximity): الأشكال والتصاميم القريبة من بعضها يمكن ان تفهم انها لها علاقة مع بعضها.

٧-المساحة البيضاء(White Space): وجود مساحة بين العناصر او داخل العنصر نفسه يجذب الإنتباه.

يعني مثلا في الخطوط اذا مرة برمجت موقع تعرفوا ان العنوانين لها ٦ أحجام تتدرج من <h1> إلى <h6> بحيث <h1> هو أكبر حجم واللي مناسب للعنواين الرئيسية والشئ المهم و <h6> هو أصغر حجم واللي مناسب للقطع.

مثال يوضح أهمية Visual hierarchy في النصوص
الشكل اللي على اليمين واضح وأسهل للقراءة وتذكر المعلومات اكثر من اللي على اليسار

هذا الموقع يساعدك في تحديد حجم الخط للعنواين في التصميم وتقدر تحدد كم مقدار الزيادة بين أحجام الخطوط للعناوين وهو بحسبها لمستويات العنواين الأخرى
type-scale.com