مبدأ القرب في تصميم الويب
مؤخرا التقطت كتاب التصميم القديم أنني لم أتطرق منذ فترة ، وذكرني بمبدأ التصميم الذي يطبقه الكثيرون منا على نحو لا شعوري ، إن لم يكن موجودًا على الإطلاق.
يتعامل الكتاب مع التصميم للطباعة ، لكنني أعتقد أنه من شأنه أن يجعل موضوعًا رائعًا للمناقشة في سياق تصميم الويب.
إن مبدأ الاستدعاءات القريبة من العناصر ذات الصلة يتم تجميعها بصريًا ، مما يؤدي إلى تقليل الفوضى وجعل التخطيط أكثر تنظيماً. يجب فصل العناصر غير المرتبطة ببعضها البعض ، للتأكيد على افتقارها إلى العلاقة.
سأناقش التفاصيل وبعض الطرق التي يمكن تنفيذها بها بفعالية ، لكن هذا التعريف سيكفي لما سنناقشه في هذه المقالة.
الاستخدام الصحيح للقرب ، بالتزامن مع مبادئ التصميم الأخرى ، له تأثير كبير على تجربة المستخدم ، وفي النهاية ، نجاح الموقع ككل.
لا تخف فضاء أبيض
الخطوة الأولى لتنفيذ مبدأ القرب بشكل صحيح هو فهم أهمية المساحة البيضاء في التصميم.
يعد عدم وجود مساحة بيضاء مشكلة شائعة في تصاميم الهواة. التصميم هو وسيلة لإيصال المعلومات ، وعندما يحاول الهواة نقل رسالة من خلال التصميم ، فإن ميلهم الطبيعي هو نشر المحتوى بشكل متساوٍ لملء الفراغ ، دون التفكير مليًا في إمكانات الفضاء الأبيض المنظم جيدًا.
يمكن أن تؤثر المساحة البيضاء على سلوك المستخدم بقدر ، إن لم يكن أكثر ، من المحتوى الفعلي على الصفحة. يرشد الفضاء الأبيض عيون المستخدم في الاتجاه المقصود ، ويخلق التباين ويجعل انطباعًا دائمًا.
على الرغم من أن موقع W3Avenue على الويب أعلاه يحتوي على كمية كبيرة من المحتوى (مع المقالات تحت العديد من الفئات ، مثل أي مدونة تصميم) وسلسلة من إعلانات الشريط الجانبي ، فإنه لا يطغى على المستخدم بشكل مرئي.
تساهم الغرفة السخية الموجودة في العنوان والعناصر ذات المسافات المناسبة في المحتوى ومناطق الشريط الجانبي في هذه النظرة النظيفة والمنظمة. لا تقوم W3Avenue بأي شيء مميز بشكل خاص مع محتواه ، ولكن تصميمه ربما يساهم في حركة قوية يحصل في فترة قصيرة من الزمن .
لذا لا تكن غير آمن بشأن المساحة الفارغة في تصميمك. إن استخدام الفراغ الأبيض بشكل صحيح هو الخطوة الأولى في تطبيق مبدأ القرب ، وبالتالي جعل التصميم أكثر جاذبية.
بصريا مجموعة عناصر ذات الصلة
ومع ذلك ، فالمساحة البيضاء هي جزء واحد من تنفيذ القرب. يمكن أن يحتوي التصميم على الكثير من المساحة البيضاء ، ولكن إذا لم يتم تجميع العناصر بشكل صحيح ، فلن يكون للفضاء الأبيض تأثير يذكر ، كما هو موضح في بطاقتين العمل أدناه:
البطاقة على اليسار ليست فوضى؛ لديها بعض المساحة البيضاء. لكن العناصر لا يتم تجميعها منطقيا ، وبالتالي فإن التأثير ضعيف.
يضطر القارئ إلى مسح البطاقة عدة مرات. ومع ذلك ، فإن البطاقة على اليمين لها تأثير مرئي أكثر إرضاءً. على القارئ ببساطة أن ينظر إليه ليأخذ المعلومات (المزيد حول هذا لاحقًا).
إن تجميع العناصر في البطاقة على اليمين هو أيضًا أكثر منطقية . في المجموعة الأولى من العناصر ، نرى اسم الشركة بخط كبير مع الموقع الموجود أسفله. تخبرنا المجموعة الثانية عن كيفية الحصول على معلومات حول الخدمات المقدمة (مثل رقم الهاتف وعنوان موقع الويب).
يوضح هذا المثال أهمية القرب في تصميم الطباعة ، ويمكن استخدام فكرة مماثلة للعناصر في تصميم الويب ، كما هو موضح في لقطة الشاشة أدناه.
على الرغم من أن موقع Arora Designs الإلكتروني ليس معقدًا أو ثقيلًا بالمعلومات ، إلا أن استخدامه للمساحة البيضاء والفصل البصري للعناصر المجمعة فعال. تجدر الإشارة هنا إلى أن "المساحة البيضاء" لا يجب أن تكون بيضاء ؛ يمكن أن يكون أي مساحة فارغة بين العناصر ، بغض النظر عن اللون.
في حالة تصاميم Arora ، على الرغم من أن اللون الأبيض له لون ، فإنه يخدم نفس الغرض من الفصل المرئي بين مناطق الرأس والملاحة والمحتوى.
إنشاء التسلسل الهرمي المرئي
يعد استخدام المساحة البيضاء بفعالية وتجميع العناصر ذات الصلة أمرًا بالغ الأهمية لمنح موقعك الإلكتروني تسلسلاً مرئيًا واضحًا. وبطبيعة الحال ، فإن بنية الموقع الإلكتروني وتدفق المعلومات هما أساس القرب الفعال .
يتم نقل التسلسل الهرمي بالطريقة التي يتم بها تجميع العناصر وتجميعها فرعيًا.
يساعد هذا التسلسل الهرمي المستخدم على فهم مكانه ومكانه وأين يريد الذهاب إليه ، وبالتالي يساعد على إيصال الغرض من موقع الويب. تعتبر القائمة مثالاً جيدًا لعنصر لديه القدرة على توصيل التسلسل الهرمي المرئي ، كما هو موضح في الصورة أدناه:
فقط من خلال إلقاء نظرة سريعة على القائمتين أعلاه ، دون حتى فحص المحتوى ، سترى أن القائمة الموجودة على اليسار تحتوي على تسلسل هرمي مرئي واضح ، تظهر العلاقات بين العناصر (العناصر ذات المسافات البادئة هي فئات فرعية من العناصر الأساسية).
هذا التسلسل الهرمي لن يكون ممكنًا بدون فراغ أبيض (بما في ذلك الكلي والجزئي الفضاء الأبيض). القائمة الموجودة على اليمين هي مجرد مجموعة عشوائية من العناصر بدون أي علاقة أو تسلسل ظاهر.
من السهل تنفيذ هذا المبدأ على موقع ويب به شيء بسيط مثل قائمة HTML. ويتمثل التحدي في استخدام هذا المبدأ كعامل توجيهي في بناء الموقع من مرحلة التخطيط والتخطيط الهيكلي إلى التصميم.
التخطيطات التي يسهل مسحها وقراءتها
المحتوى الذي يتم تنظيمه في تسلسل هرمي ومجمَّع منطقياً يكون أسهل في القراءة والمسح الضوئي .
على سبيل المثال ، يجب أن تسمح العناوين للمستخدم بالكشف عن طريق الإشارة بوضوح إلى النقاط الأساسية. وغني عن القول ، يجب تخطيط المحتوى من البداية ليعكس التسلسل الهرمي المرئي المناسب ؛ تعتبر القائمة أعلاه مع العناصر ذات المسافات البادئة مثالًا سيئًا ، لأن المحتوى لا يتطابق مع التسلسل الهرمي المرئي.
موقع الويب الذي يستخدم القرب في بنيته وتصميمه لا يطغى على المستخدم بالمعلومات.
لذا ، على الرغم من سهولة تطبيق مبادئ القرب على مواقع الويب التي لا تتوافق مع المحتوى ، إلا أن القرب أكثر أهمية على مواقع الويب الغنية بالمحتوى.
مواقع الأخبار هي دراسات حالة جيدة لهذا المبدأ. أدناه هي المقارنة بين مرات لوس انجليس و ال جلوب اند ميل .
بشكل عام ، يمتلك موقع لوس أنجلوس تايمز تصميمًا جذابًا يرجع أساسًا إلى اختيار الألوان والطباعة. ولكن لها أيضًا مظهرًا نظيفًا ومرتبًا ، خاصة في قسم الرأس.
الشعار كبير ويبرز ، ويساهم بشكل فعال في العلامة التجارية للموقع. الهدف الأقرب إلى الشعار هو شريط التنقل الأفقي أدناه. لأن شريط التنقل مظلل ، فإنه يتناقض مع الشعار.
يتم ترتيب الروابط النص فوق الشعار بدقة ، مع وجود مساحة كبيرة بين القسمين. يساهم المحاذاة اليسرى للمحتوى في الرأس أيضًا في المظهر النظيف.
يتم تجميع كل جزء من المعلومات في عنوان LA Times مع العناصر ذات الصلة ، باستثناء الشعار ، الذي يقف وحده. ليس هناك شيء في العنوان يربكك أو يجعلك تتساءل عن المكان الذي ينتمي إليه.
ماذا عن موقع Globe and Mail على الويب ، كما هو موضح أدناه؟
يحتوي موقع Globe و Mail على مقطع رأس معقد يفشل في تطبيق مبدأ القرب.
الكمية الكبيرة فقط من المساحة البيضاء موجودة في المركز ، بجانب الشعار ، الذي لا يحقق شيئًا. يظهر إعلانان في العنوان ، مما يساهم في الفوضى. قد تكون الإعلانات ضرورية لأسباب مالية ، لذلك تكون المشاكل مفهومة.
أكبر مشكلة هي القسم الفوضوي فوق إعلان البانر الكبير. لا يوجد تمييز واضح بين العناصر في هذا القسم.
تحاول ثلاث خطوط عمودية منقطية فصل المنطقة إلى أربعة أقسام ، لكن الفاصل الأول لا معنى له. في الواقع ، قد يبدو هذا القسم أكثر دعوة إذا تمت إزالة تلك الفواصل المنقطة.
شبكات مساعدة مع القرب
إحدى الطرق لتجميع العناصر واستخدام المساحة البيضاء بشكل مناسب هي البدء بشبكة .
من نظرة خاطفة إلى كل من موقعي LA Times و Globe و Mail على الويب ، يبدو أن صحيفة LA Times قد استندت في تصميمها على شبكة ، أو على الأقل إلى مبادئ قائمة على الشبكة في مرحلة التخطيط. يعرض موقع Globe and Mail الإلكتروني دليلاً ضئيلاً على شكل الشبكة.
يسمح التصميم القائم على الشبكة ، مع أحجام الميزاب المناسبة ، بالكثير من المساحة بين الأقسام ، وفي كثير من الحالات يجبر المصمم على تطبيق مبادئ القرب دون حتى التفكير في ذلك.
فيما يلي لقطات شاشة من موقعين على الويب قاما باستخدام 960 شبكة النظام . إنها بسيطة إلى حد ما (أي ليست ثقيلة المحتوى مثل المواقع الإخبارية التي نوقشت أعلاه) ، لكنها تُظهر أن الشبكات تعطي عناصر الصفحة مساحة للتنفس ، مما يوفر لكل قسم منزله المرئي.
يؤدي المستخدمين على الطريق الصحيح
إحدى المزايا الرئيسية الأخرى للقرب هي أنها تساعد المستخدمين على التنقل في أحد مواقع الويب دون أي تأخير أو عقبات غير ضرورية. عندما يتم فصل الملاحة الرئيسية بشكل واضح عن العناصر الأخرى على الصفحة ، فسيتم العثور عليها على الفور ومن غير المرجح أن يتم نسيانها.
التسلسل الهرمي البصري السليم عن طريق القرب يساعد المستخدمين على التوغل في موقع الويب الخاص بك دون القلق بشأن مكان وجودهم أو إلى أين هم ذاهبون.
سيشعرون دائمًا بالراحة ، وسيصلون إلى أهم أقسام موقعك الإلكتروني بسرعة وكفاءة.
يمكن لمصممي الويب الذين لديهم خبرة قليلة أو معدومة في تصميم الطباعة أن يستفيدوا بشكل كبير من المبادئ التي وضعها مصممو الطباعة موضع التنفيذ منذ سنوات قبل طفرة الويب.
ليس القرب هو مبدأ التصميم الوحيد الذي سيساعد الموقع على أن يكون أكثر قابلية للاستخدام وسرورًا بصريًا ، ولكنه عامل مهم يجب مراعاته للعديد من الأسباب التي نوقشت للتو.
قراءة متعمقة
تمت كتابة هذه المقالة حصريًا لـ Webdesigner Depot بواسطة Louis Lazaris ، كاتب مستقل ومطور على الويب. يدير لويس شبكة رائعة حيث ينشر مقالات ودروسًا حول تصميم الويب. يمكنك اتباع لويس على تويتر أو الاتصال به من خلال موقعه على الانترنت .