الاهتمام بالتفاصيل هو جوهر نجاح أي موقع، يجب ان ندرك ان كل تفصيلة صغيرة تؤثر بشكل كبير علي الخبرة النهائية التى يكونها الزائر عن الموقع. فى هذا المقال سوف نتناول اكثر 6 عناصر/تفاصيل تؤثر بشكل كبير على نجاح واجهات المواقع، هذه التفاصيل جزء كبير منها ينفذ في مرحلة تصميم واجهة الموقع (علي برنامج مثل Adobe Photoshop ).
1- التسلسل الهرمى لمميزات الموقع
من الجيد ان تعيد ترتيب خصائص ومميزات الموقع او ما يقدمة من خدمات، انا هنا لا أتحدث عنالتسلسل الهرمى للمحتوي الخاص بالموقع ولكن أقصد التسلسل الخاص بمميزات وخصائص الموقع او التطبيق الذى تصمم له واجهة استخدام من امثلة هذة المميزات ان يحتوي الموقع على فورم تسجيل الدخول الموقع، فورم البحث … الخ.
الطريقة العملية السريعة التى تساعدك فى عمل تسلسل هرمى صحيح لخصائص الموقع هو ان تقسم خصائص الموقع الى مجموعتين رئيسيتين:-
- خصائص/مميزات يجب ان تحتويها واجهة الموقع Must Have: وهى الخصائص الضرورية واللازمة للموقع والتى تعتبر صميم ما يقدمة الموقع من خدمات.
- خصائص/مميزات من الجيد ان تحتويها واجهة الموقع Nice To Have: خصائص جيدة ولكن لو لم يتم اضافتها لن تؤثر بشكل كبير علي الموقع.
مثال: لو اننا بصدد تصميم الصفحة الرئيسية لواجهة مدونة، كيف يمكن ان نقسم خصائص ومميزات الواجهة حسب المجموعتين السابقتين ؟! …
- الخصائص التى يجب ان تحتويها واجهة المدونة Must Have: البحث، تقسيم واضح لأقسام المدونة، امكانية الانتقال بين صفحات المدونة، امكانية الاتصال بمدير المدونة، زر لإكمال قراءة التدوينة كاملة …
- الخصائص التى من الجيد ان تحتويها واجهة المدونة Nice To Have: امكانية مشاركة التدوينات مباشرة علي الشبكات الاجتماعية من خلال رئيسية المدونة، صندوق لآخر التغريدات على حساب المدونة في تويتر،صندوق للإشتراك في نشرة المدونة البريدية …
2-المسافات
التوازن فى توزيع عناصر واجهة الموقع لا يتحقق الا من خلال التنظيم الجيد لعناصر الواجهة، يجب ان يكون هناك معياراً واحداً للمسافات بين العناصر المتشابهة، ومعياراً اخر – مختلف – للمسافات بين العناصر الرئيسية للشكل والمحتوى …
الصورة السابقة توضح ما هو المقصود “بمعيار واحد للمسافات “… فمثلاً لو افترضنا ان الصورة توضح التوزيع الخاص بالكتل الرئيسية لواجهة الموقع ( هيدر – قائمة جانبية – محتوى )، فالمسافات بين الكتل الثلاث الرئيسية ( A- B – جزء المحتوى )يجب ان تكون واحدة، ولكنها مختلفة عن المسافات بين المربعات ( 1-2-3-4 )، لكن المسافة بين المربعات الصغيرة نفسها واحدة.
3- الخطوط Fonts
الإختيار المناسب للخط المستخدم فى تصميم واجهة الموقع هو السلاح السرى الذى يستخدمة المصمم لنقل واجهة الموقع إلى مستوى آخر من الإحترافية، لا تستخدم اكثر من خطين مختلفين فى الموقع، حاول استخدام الخطوط التى تتناسب والذوق العام المسيطر على الموقع …
فمثلاً فى التصميم الحالى لمعمل ألوان استخدمت خط Droid Arabic Kufi للعناوين والقائمة الرئيسية ومسميات الأقسام … الخ فهذا الخط يتميز بأن اطرافة حادة وليست دائرية السبب وراء اختيار هذا الخط بالذات ليست جماليتة فقط، ولكن لأنه يتماشى مع الذوق العام لتصميم معمل ألوان الجديد والذى يتيميز بالأطراف الحادة ،الالوان التى لا تقبل التدرجات.
4- المحتوى المؤقت للواجهة
هناك خطأ شائع يقع فيه أغلب مصممى المواقع، وهو عدم وضع محتوى مؤقت للتصميم يبدوا وكأنه حقيقياً أثناء عرض القالب على العميل او العامة لإبداء رأيهم فى الواجهة، الأصل ان المحتوى يجب ان يحدد قبل البدء فيه عملية تصميم الواجهة، او علي الاقل ان تحدد الاقسام و ان تعرف طبيعة المحتوى هل هو نص فقط ، ام نص وصورة معاً، ام يضاف لهم الفيديو ايضاً؟
عندما تبدأ فى تصميم اي موقع، اطلب من العميل محتوى مشابه او قريب من المحتوى الفعلى للموقع، وان لم يتوفر للعميل، ابحث عن محتوى المواقع المشابهه او التى تكون فى نفس التخصص، معرفتك بطبيعة المحتوى للموقع الذى تصممة سيفيدك كثيراً فى اختيار طريقة العرض المناسبة.
ايضاً لا تضع نص مؤقت وتكررة سيبدوا التصميم مقيتاً وبلا حياة، ضع فى كل فقرة نص مختلف وصورة مختلفة، هكذا ستشرح للعميل كيف ستبدوا الواجهة بعد الإطلاق الفعلى، فعين المستخدم ستكتشف هذا بسهولة !
5- الأيقونات
إستخدم أيقونات من نفس المجموعة IconSet، فلا تأتى بأيقونة من مجموعة ايقونات واخري من مجموعة مختلفة، هذا سيهدم مبدأ الهوية الواحدة للموقع. ولا تنسى ان الايقونة رسالة بصريةتوضح معنى معين بدون كلام زائد، لذا استخدم الرموز الشائعة للأيقونات والتى اصطلح على فهمها للمستخدم العادي. فمثلاً أيقونة البيت = رئيسية الموقع …لا تستخدمها لترمز لشئ آخر.
6- إختيار الألوان
عند اختيار ألوان واجهة الموقع يجب ان تفرق بين مفهومين منفصلين:-
- جمالية اللون
- وظيفة اللون
المصطلح الاول “جمالية اللون” تعنى مدى توافق اللون بصرياً مع اقرانة من الألوان فى نفس المساحة، او بمعنى آخر ان تكون بدرجات لونية قابله للمزج معاً.
اما مصطلح “وظيفة اللون” ظهر جلياً مع بداية تطور واجهات الموقع فقد اصلطلح على ان لكل لون معنى ورمزية، فمثلاً اللون الاحمر يمثل الخطر او الخطأ، فلا يجب ان تستخدم اللون لوظيفة لا يمثلها، كأن تستخدم اللون الاخضر لرسالة الخطأ.
ليست هناك تعليقات:
إرسال تعليق