الخريطة الباب ٢: التنظيم
المساحات البيضاءWhitespace
الفراغ ليس هدراً، إنه تنفّس التصميم.
المساحة البيضاء — أو السلبية — هي كل ما ليس نصاً ولا صورة ولا زراً. قد تكون بيضاء أو ملونة أو حتى صورة خلفية؛ المهم أنها خالية. هي ما يفصل الأفكار عن بعضها، ويوجه العين، ويجعل الواجهة تتنفس. وكثيراً ما يكون الفرق بين واجهة «رخيصة» وأخرى «فاخرة» مجرد فراغ مدروس.
دع الواجهة تتنفس
القائمتان التاليتان بنفس الخط والألوان والعناصر بالضبط. الفرق الوحيد هو الفراغ: في الأولى تتلاصق العناصر فيصعب أن تجد ما تبحث عنه، وفي الثانية تفصل المسافات المجموعات ويصبح لكل عنصر مساحة يُقرأ فيها.
ابدأ بمساحة أكثر مما تظن
أسلوب عملي: ابدأ بمسافات سخية، ثم قلّصها تدريجياً حتى تصل للتوازن. حين تبدأ بفراغ كثير ترى بوضوح متى صار زائداً. أما حين تبدأ ضيقاً، فقد لا تلاحظ الازدحام أصلاً — لأن عينك اعتادته أثناء العمل.
بطاقتان بنفس المحتوى. أيّهما أسهل في القراءة وأكثر احترافية؟
نظام مسافات بدل أرقام عشوائية
اختر وحدة أساسية — الأشهر هي ٤ بكسل — واستخدم مضاعفاتها فقط: ٤، ٨، ١٢، ١٦، ٢٤، ٣٢... قرار بسيط ينهي سؤال «كم مسافة هنا؟» ويجعل كل الشاشات متناغمة دون جهد.
تجنب الأرقام الغريبة مثل ٧ أو ١٣ أو ١٩. إنها تكسر الإيقاع، ويصعب تذكرها وتكرارها، وتنتهي بواجهة لا تبدو متماسكة دون سبب واضح.
في هذه البطاقة عنصر يختنق لأنه بلا أي مسافة. انقر عليه.
وضع التفتيش: مرّر على عناصر التصميم وانقر على موضع الخطأ — أو تنقّل بـ Tab واضغط Enter.
نظام بسيط بمضاعفات الرقم ٤ ينهي الجدل حول «كم بكسل؟» ويجعل كل الشاشات متناغمة.
امنح البطاقة مساحة تتنفس فيها، والتزم بنظام الـ٤: هامش داخلي ١٦ بكسل على الأقل، ومسافة بين العناصر ٨ على الأقل.
على نظام الـ٤؟✗
الخصائص
اختبر نفسك
١. أي مجموعة مسافات تتبع نظام الـ٤؟
٢. لماذا يُنصح بالبدء بمساحات واسعة ثم تقليصها؟
٣. المساحة البيضاء يجب أن تكون: