ابدأ باختيار الوحدة الأساسية : شبكة 8 بكسل
لجعل التصميم بأكمله يبدو أكثر نظافة ، من المفيد أولاً تعيين قيمة القياس التي ستحدد بعد ذلك كل الأحجام . والأمر متروك لكم تماماً للقيمة التي تختارونها ، ولكن في كثير من الأحيان يكون الخيار الأفضل هو الالتزام ببعض القواعد المثبتة. وإحدى هذه القواعد هي تغيير حجم العناصر ونقلها بمقدار ثماني وحدات بكسل بالضبط. ستسهل هذه القاعدة عملية اتخاذ القرار.
بغض النظر عن px مقابل dp: بالإضافة إلى وحدات البكسل (px) ، قد تكون قد سمعت عن المصطلح dp المستخدم في تصميم الشاشة والنمذجة الأولية. وحدة DP قصيرة لـ "وحدات بكسل مستقلة عن الكثافة". ترتبط الوحدة بشاشة 160 نقطة في البوصة، لذا فإن 1 DP يساوي 1 بكسل على شاشة 160 نقطة في البوصة، تساوي 2 بكسل على شاشة 320 نقطة في البوصة، وهكذا. صيغة القيمة الرقمية هي px = DP * (dpi/160).
ملاحظة: إذا كنت تعمل مع عناصر أو كائنات أصغر حجمًا، فمن الممكن أيضًا استخدام زيادات بمقدار 4 بكسل بدلاً من 8 — أحيانًا، يمكنك إجراء المزيد من عمليات الضبط، عند الحاجة.)
ولكن لماذا بالضبط 8 وحدات بكسل؟
هناك بضعة أسباب تجعل ثمانية من الناس يعملون غالباً ك"رقم سحري" هنا:
ثمانية وحدات بكسل هي الحد الأدنى الكافي من "الانتقال السريع".
ثمانية عدد كبير لأنها قابلة للقسمة على أربعة واثنان.
إذا استخدمت ثمانية، يمكنك بسهولة تغيير حجم أي عنصر دون أن تنتهي بنصف بكسل، حيث 8 / 2 = 4، 4 / 2 = 2، 2 / 2 = 1. ومن ناحية أخرى، إذا بدأت بـ 10 وحدات بكسل، فستنتهي بـ 5 وحدات بكسل، ثم 2.5 وحدة بكسل، ثم 1.25 بكسل. عند تصميم الشاشة، تود تجنب نصف وحدات البكسل قدر الإمكان. باستخدام وحدات البكسل الكاملة، تتوافق العناصر في التصميم مع حدود البكسل الدقيقة، وبالتالي ستبدو أكثر وضوحًا.
تتشابك مضاعفات ثمانية (8، 16، 24، 32، 40، 48، 56، 64، 72، 80، إلخ) مع القيم الثنائية (1، 2، 4، 8، 16، 32، 64، 128، 256، 512، إلخ).
وأخيراً، يسهل تذكُّر الأعداد.
ما مزايا استخدام شبكة ذات 8 بكسل؟
باعتبارك مصممًا، فإن وقت قرارك ثمين. سيجعلك ذلك أسرع وأكثر فعالية.
إذا كنت تعمل مع مطور، فيمكنك إنشاء نظام يساعدك أنت وفريقك. إذا احتاج المطور إلى إجراء بعض التغييرات السريعة، يمكنه ضبط القيم بزيادة قدرها 8 بكسل. وسيتضمن ذلك الاتساق والنظام.
سيشعر الأشخاص الذين يستخدمون موقعك الإلكتروني بالراحة عند زيارتهم له. ويثقون في موقع الويب، وسيكون من الأسهل عليهم استخدام الواجهة.
اعمل مع الشبكة لوضع كل العناصر
التناغم الأفقي
وأنا على يقين من أنك استخدمت شبكة بالفعل عند تصميم مواقع الويب. يساعدك استخدام الشبكة على وضع كل العناصر على مساحة الشاشة الرقمية بدقة.
تشكل الشبكة الهيكل العظمي للواجهة وتحدد المكان الذي يمكنك وضع العناصر فيه. يحتفظ القالب بالتكوين، ويحدد حدودًا واضحة بحيث يكون التصميم أكثر اتساقًا. الآن سيكون من الأسهل لك أن تقرر أين تضع العناصر. مع اكتساب المزيد من الخبرة، يمكنك تحديث الحدود حسب الحاجة.
ولكن كيف يمكنك إنشاء هذه الشبكة؟ سنتناول التفاصيل التالية. بشكل أساسي، قد يكون عدد الأعمدة وحجمها عشوائياً ويعتمد على احتياجاتك. كلما كان التصميم أكثر تفصيلاً، زادت الأعمدة التي تتطلبها الشبكة. إذا كنت مترددًا، فاطلب المساعدة من أحد الزملاء المتمرسين.
كما أنصحك بقراءة "دليل شامل لتصميم واجهة المستخدم"، والذي يساعدك على فهم تصميم واجهة المستخدم بشكل أكثر عمقًا.
سيتم الأستكمال فى المقالى التالى إن شاء الله تعالى .
