Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Designing
Code

تصميم واجهة المستخدم للمطورين: مقدمة

by
Difficulty:BeginnerLength:LongLanguages:

Arabic (العربية/عربي) translation by ahmadgaradh (you can also view the original English article)

المصممين مقابل المطورين- هذا جدال قديم منذ قدم أجهزة الحاسوب. والحقيقة، على الرغم من ذلك، لا يمكن لأحدهم أن يعيش دون الآخر. تصميم واجهة مستخدم رائعة لا قيمة لها دون أداء جيد و كذلك لا قيمة لأفضل تعليمات برمجية مع وجود واجهة قبيحة، فتصبح غير قابلة للاستخدام. في هذا المنشور الأول في "أساسيات واجهة المستخدم للمطورين"، سأحاول وضع بعض القواعد الأساسية البسيطة التي يمكن أن تتتبع المشروعات الإنمائية للتأكد من تطبيقاتها و قوالبها ونماذجها لكي تكون جميلة بقدر التعليمات البرمجية نفسها--والتي يمكن استخدامها للتمهيد.

تأمل: أن الانطباع الأول هو الانطباع الأخير.


المحاذاة

المحاذاة تشير إلى الموقف أو التوجه لعنصر و علاقته بعنصر آخر أو إلى نفسه. عندما نشير إلى عنصرين يتم محاذاتهما إلى بعضها البعض، فإن المحاذاة عادة تشير إلى أي جانب لكلا العنصرين موجود في الخط. في سياق النص، تشير المحاذاة إلى الجانب الذي يرتكز عليه النص في خط مستقيم

تصميم النموذج

Alignment of form fields

في الصورة أعلاه، في المثال الثاني من تصميم نموذج بسيط تظهر التسميات التي يتم محاذاتها إلى اليمين لبعضها البعض مع حقول الإدخال التي يتم محاذاتها إلى اليسار. وهذا ما يضمن أن الرابطة بين كل تسمية وحقل الإدخال الخاص بها واضح و المستخدم لا يتصعب اذا كانت بعض التسميات صغيرة جداً بينما البعض الآخر طويل.

تأمل: تأكد من أن حقول الإدخال ليست بعيدة جداً عن أطول تسمية. إذا كان الفرق في العرض صغير، حاول محاذاة التسميات الى اليمين ومحاذاة حقول الإدخال الى اليسار.

نص

Text alignment

للنص، من المثالي استخدام محاذاة اليسار عند التصميم للشاشة. نظرًا لأن معظم طرق العرض على مختلف انواع الشاشات غير قادرة على توزيع المساحة بشكل مناسب عند ضبط النص من كلا الجانبين، المحاذاة ليسار تبقي النص قابل للقراءة ومنظم تنظيماً جيدا. يمكنك، بطبيعة الحال، استخدام المحاذاة للمركز و إلى اليمين بحسب ما يتطلبه التصميم، ولكن تلك عادةً ما تكون محجوزة للحالات الخاصة وقطع أصغر من النص.


تدفق

والغرض الرئيسي من أي واجهة مستخدم هو السماح للمستخدم التعامل مع التطبيق. و هذا، صدقوا أو لا تصدقوا، لن يكون ممكناً إلا إذا أخبرت المستخدم ما يحتاج للقيام به وفي أي ترتيب. نظراً لأنك لن تكون موجوداً وراء كل مستخدم لمساعدته في هذا، تحتاج الواجهة لتوفير جميع الارشادات. وفيما يلي بعض الأسئلة التي تسأل عند تقييم ما إذا كان سير العمل المقصود مناسباً ام لا:

  • ما مدى أهمية تنفيذ المهمة في مجموعة مرتبة من الخطوات؟
  • هل من الواضح للمستخدم من أين يجب ان يبدأ وماذا يفعل بعد ذلك؟
  • هل النتيجة المقصودة مذكورة أم ضمنية - ضمنيًا ، إن لم يكن صراحةً؟
Search with category selection n iStockPhoto

لنأخذ على سبيل المثال تحديد فئة البحث في iStockPhoto. في هذه الحالة، يمكنني اما البحث عن كل شيء أو اختيار فئة معينة للحد من عمليات بحثي عن هذا النوع من المعلومات. بما ان الفعل الأولي هو إدخال مصطلح بحث والضغط على "بحث" وهذه الأشياء ينبغي أن تكون واضحة إلى حد ما. و يمكن عمل خطوة اضافية و هي تحديد فئة البحث، والتي يمكن أن تكون كقائمة منسدلة بين (ما فكرت به صحيح) حقل البحث والزر بحث.

The income/expense entry dialog in cashbase

وثمة مثال آخر وهو مربع الحوار إدخال الدخل/المصروفات في تطبيق cashbase، يتم ترتيب الحقول وفقا لسير عمل نموذجي سيستخدمه شخص ما لتسجيل هذه المعلومات: أدخل المبلغ (الذي هو أهم عنصر)، حدد فئة، إضافة ملاحظة إذا لزم الأمر، وانقر فوق إضافة. المعلومات الثانوية التي سيتم استخدامها أقل بكثير في كثير من الأحيان-مثل التاريخ و الذي يكون افتراضياً هو اليوم، وخيار تكرار أو إلغاء- تكون متاحة، ولكن أكثر مكرا.

مزيد من القراءة:


تقريب

ينبغي تجميع العناصر ذات الصلة في واجهة واحدة معا. وهذا قد يبدو وكأنه الحس السليم عندما أذكر ذلك، ولكن لا يفهم دائماً بشكل جيد. السبب في وجود جميع ارتباطات التنقل في صفحة في معظم المواقع في شريط أفقي واحد، هو أنه يمكن للمستخدم تحديد العلاقة بنظرة وجعل خيار للتفاعل معها دون أي لبس.

The message toolbar in Gmail

دعونا ننظر إلى هذا المثال من Gmail--تطبيق يتم استخدامه بصورة متكررة. هذا هو شريط الأدوات الذي يظهر في الأعلى عند فتح بريد. ععلى الرغم من أن كل هذه الأزرار تقوم ببعض الإجراءات في الرسالة المفتوحة ، إلا أنها يتم تجميعها معًا بناءً على ما يفعلونه--الإجراءات التي سيستخدمها الشخص للتخلص من الرسالة (الأرشيف ، الرسائل غير المرغوب فيها ، الحذف) ، لتغيير أهمية الرسالة (عند استخدام علبة الوارد ذات الأولوية) ، والإجراءات المتعلقة بالتسميات ، وأخيراً القائمة المنسدلة مع الخيارات الثانوية.

Feature grouping in Zootool

مثال آخر على الاستخدام الجيد للproximity هو شريط الخيارات في Zootool. ينقسم شريط الأدوات في الأسفل إلى ثلاث مجموعات ، كل منها يتوافق مع الأجزاء الثلاثة في التطبيق: حزم القائمة على اليسار ، ونافذة البريد في المركز التي تحتوي على جميع إشاراتك المرجعية ، وجزء التفاصيل على اليمين

مزيد من القراءة:


التسلسل الهرمي

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

A layout with no sense of hierarchy within elements

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

The same layout with a better sense of hierarchy

كقاعدة عامة ، يجب أن يكون عنوان الصفحة الأكبر والأكثر ظهوراً على الشاشة. ويلي ذلك عناوين الأقسام والعناوين الفرعية ثم التسميات الأصغر. يمكن أن يكون نص الفقرة أكثر أو أقل بروزاً إعتماداً على الغرض منه. كما أنها لا تقتصر على النص. يمكن تمييز أزرار الإجراءات الأساسية عن الإجراءات الثانوية من خلال جعلها أكثر سطوعًا أو أكبر أو أكثر متعة. ويمكن جعل حقول الإدخال الإلزامية أكثر وضوحاً من غيرها. يمكن أن أستفيض بالشرح، ولكن أعتقد أنك قد فهمت الفكرة.


التباين

هناك اعتبار آخر مهم جداً عند تصميم الواجهات و هو ضمان التمييز بوضوح بين العناصر. بالطبع، تريد أن يكون النص قابل للقراءة على الخلفية، ولكن التباين يذهب إلى أبعد من مجرد استخدام نص فاتح اللون على خلفية داكنة أو العكس. العناوين ونص الفقرة يجب ان يتم تمييزها بوضوح. لوحات وأشرطة التنقل بحاجة إلى عزلهم عن بعضها البعض حيث يستطيع المستخدم معرفة ما هو. و تستمر القائمة.

يمكن إنشاء التباين باستخدام واحدة أو أكثر من الخصائص التالية:

لون

و هذا يجب أن يكون هذا واضحًا ، ولكن من المذهل كيف يغفل الناس عن هذه النقطة. إذا كانت خلفيتك مضيئة ، فمن الواضح أنك تريد أن يكون النص داكنًا لضمان قابلية القراءة. على الرغم من أنه من الناحية النظرية ، يجب أن تعمل الألوان التكميلية معًا بشكل جيد ، إلا أنها ليست دائمًا بهذه السهولة. حاول وضع نص أخضر مشرق على خلفية حمراء وستعرف ما أقوله.

Good & bad examples of contrast

الاحتمالات هنا لا حدود لها ، لذا فإن توصيتي الأولى لأي شخص يتطلع إلى اختيار الألوان هي التقاط لوحة ألوان شهيرة من مواقع مثل Adobe Kuler أو ColourLovers. يتم إسهامها وتقييمها والتصويت عليها من قبل المستخدمين المتحمسين الذين عادة ما يعرفون طريقهم حول اللون. عادة ما يتم الاعتناء بجميع أساسيات مطابقة الألوان والتباين ، لذا فإن الأمر يتعلق فقط بتحديد أي نظام ألوان يعمل في سياق تطبيقك.

Browsing through color palettes on Kuler & ColourLovers

ملاحظة واحدة على الرغم من الحذر - أن نكون حذرين جدا من المبالغة في اللون. كنت لا تريد لها أن تطغى على فائدة وسهولة التطبيق الخاص بك.

الحجم

هناك طريقة أخرى جيدة للتمييز بين العناصر - بناءً على التسلسل الهرمي أو التصنيف أو التدفق المرئي - وهي استخدام أحجام مختلفة. ينطبق هذا على النص بقدر ما ينطبق على الصور والخلفيات والعناصر الثابتة أو التفاعلية. قد تحتاج إلى وضع مزيد من التركيز على زر الإجراء الابتدائي، على سبيل المثال، وجعل على الأزرار الثانوية صعبة الوصول نسبيا. أو المطالبات اختياري يمكن أن يكون أصغر وأخف وزنا من التسميات الأساسية في النموذج.

Yesterday, today and tomorrow in Teuxdeux

يقوم تطبيق TeuxDeux بعمل رائع باستخدام الألوان للتمييز بين الأيام الماضية والحالية والمستقبلية. نظرًا لأن التصميم موجه نحو أسبوع العمل ، يتم استخدام أحجام مختلفة من النص للتأكد من سهولة التعرف على أسماء الأيام ، في حين أن التواريخ أكثر دقة.


التفاعل

نظرًا لأن الغرض الأساسي لأي واجهة مستخدم هو تمكين المستخدمين من التفاعل مع التطبيق ، فمن الضروري أن يعرف المتعلمون ما يجب عليهم فعله. كمنشئ للواجهة ، من السهل جدا أن تنسى أنك لن تكون موجود لكل مستخدم لتخبرهم بما يجب القيام به.و فق هذا لا يتحمل المستخدمون أي صبر لقراءة أدلة الاستخدام وأدلة البدء السريعة قبل الغوص في استخدام التطبيق. مطلوب من الواجهة أن توضح جيداً ما هي أجزاء منه يمكن النقر عليها، ملموس، قابل للسحب - وباختصار، تفاعلية.

يعرف الجميع كيف ينقر مفتاحًا كهربائيًا بإصبعه ، أليس كذلك؟ إن الشيء الذي يكون واضحاً لأي شخص أنه يجب الضغط على المفتاح في نقطة معينة لتغيير الحالة يسمى المكافأة. على السطح المستوي لشاشة - سطح المكتب أو الجوال أو غير ذلك - يمكن استخدام تقنيات مختلفة لتمكين المستخدمين من النقر فوق زر أو الكتابة داخل حقل الإدخال بشكل حدسي. عند إنشاء ارتباطات تشعبية نصية ، فإن إضافة تسطير للرابط هو المعيار الأكثر استخدامًا ، على الرغم من وجود العديد من الطرق الإبداعية الأخرى للقيام بذلك.

وإليك بعض الأمثلة:

Each interactive element has a different interaction objective, and therefore a different visual treatment

عند استخدام مثال التبديل ، كيف يمكنك معرفة ما إذا كان تبديل المفتاح يؤدي إلى ما كان من المفترض القيام به؟ يضيء المصباح أو ينطفئ ، أو في بعض الحالات يساعد الضوء الموجود داخل المحول على توضيح ما إذا كان المفتاح في وضع التشغيل أو الإيقاف.

في أحد التطبيقات ، يمكن أن تكون هذه التعليقات واضحة جدًا في الحالات التي ينتقل فيها زر إلى صفحة أخرى أو يفتح نافذة منبثقة ، ولكن ماذا عن الحالات التي يعمل فيها كل ذلك هو معالجة بعض البيانات في الخلفية - مثل حفظ التغييرات في إعدادات المستخدم؟ يعتبر وجود نوع من آلية تعليقات التغذية الراجعة أمرًا بالغ الأهمية للسماح للمستخدمين بمعرفة نجاح إجراءاتهم. قد يكون هذا بسيطًا مثل رسالة "تم حفظ إعداداتك" أو إشعارًا موجزًا في أعلى الصفحة أو تمييزًا سريعًا حول المنطقة التي تم تحديثها.

Two-level feedback in Remember the Milk

عند إضافة مهمة جديدة في Remember the Milk, ، يمكن أن تظهر إما في القائمة على نفس الصفحة ، أو ببساطة تتم إضافتها إلى قائمة أخرى في الخلفية (إذا ، على سبيل المثال ، تم تعيين المهمة إلى فئة مختلفة). وبالتالي يتم تقديم التعليقات على الإجراء على مستويين::

  1. يظهر تمييز أخضر لبضع ثوان خلف المهمة في القائمة للإشارة إلى المكان الذي تمت إضافته فيه ، و
  2. تظهر رسالة بارزة جدًا على خلفية صفراء في الجزء العلوي من الصفحة تسمح للمستخدم بمعرفة ما حدث بالضبط.

أسلوب الطباعة

يعتبر النص الموجود في تطبيقك - كل شيء بدءًا من الشعار إلى العناوين والتسميات والنسخ - هو طريقة الاتصال الأساسية مع المستخدمين. نظرًا لأن كيفية وصول المستخدمين إلى معلومات حول التطبيق أو من خلاله ، يمكن أن تعني طريقة تعيين النوع الفارق بين النجاح والفشل. بالطبع يجب أن تكون العناوين أكبر من النص الأساسي ويجب أن تكون النسخة المطبوعة جيدة ؛ لكن الكثير من القرارات الأخرى تؤثر أيضًا على كيفية استهلاك المستخدمين للمعلومات.

الخطوط

الخطوة الأولى: تعريف الخطوط الخاصة بك. يفاجئني عدد المطورين الذين لا يهتمون أبداً بتغيير أي خط يتم الحصول عليه من نصوصهم. تتغير الخطوط الافتراضية من نظام التشغيل إلى نظام تشغيل اخر ومن المتصفح إلى متصفح اخر، مما يعني أنه ان لم تحدد بوضوح الخط الذي تريد استخدامه ، فسيبدو النص مختلفًا في كل تركيبة نظام التشغيل ومتصفح. إلى جانب ذلك ، فإن Times New Roman - الذي لا يزال الكثير من المتصفحات يستخدمه كخط افتراضي - ليس خطًا جيدًا للقراءة على الشاشة. توصيتي الأولى غالباً ما تستخدم خط sans-serif ، على الرغم من أن  Georgia أو خط Cambria الجديد في Windows 7 تبدو جيدة أيضاً.

Sans-serif fonts make a big difference to the readability of text over Times New Roman

إذا قررت استخدام خطوط أخرى غير تلك الآمنة والمتاحة عالمياً مثل Arial / Helvetica و Georgiaو Tahoma و غيرها، تأكد من وجود طريقة لجعلها تتشابه بشكل مماثل على جميع المنصات. إذا كان Flash هو بيئة التطوير التي تختارها ، قم بتضمينها عند الضرورة. بالنسبة إلى تطبيقات HTML / JS القائمة ، استخدم @ font-face في CSS أو أي من خدمات خطوط الويب مثل Typekit أو Google WebFonts. تذكر رغم ذلك ، أن هذه التقنيات تأتي مع تحذير من أحجام الملفات الإضافية للخطوط المضمنة. إذا كانت السرعة والاستجابة لها أهمية قصوى بالنسبة لك ، فإن الالتزام بالخطوط الأساسية هو أفضل رهان لك.

تنويه: نعم ، أعلم أن Arial و Helvetica ليسا متشابهين تمامًا ، ولكنهما متشابهان بشكل كافٍ حتى لا يلاحظ معظم المستخدمين الفرق.

المسافة بين الأسطر

مقدار المسافة بين سطرين من النص هو المسافة بين السطور. تريد أن تكون المسافة بين الأسطر في نص الفقرة (ارتفاع الخط في لغة CSS) على الأقل 140٪ من حجم الخط للتأكد من سهولة قراءته. أي شيء أقل ، وسيكون نصك أصعب بكثير في القراءة - وأكثر جسورًا - للمرور عليه بسرعة.

Text leading makes a huge difference to the readability of your text

الترجمة الى لغات متعددة

إذا كنت تخطط لترجمة تطبيقك إلى لغات أخرى - ويجب عليك فعلًا - فمن الأفضل اختبار الواجهة مبكرًا باستخدام نصوص برمجية مختلفة. على أقل تقدير ، قد يختلف مقدار المساحة التي تتطلبها رسالة معينة بشكل كبير عبر النصوص المختلفة. تستخدم نصوص شرق آسيا كلمات أقل في المتوسط ولكنها تحتاج إلى حجم أكبر للخط ، كما تحتاج النصوص الهندية (الهندية) إلى أن تكون أكبر قليلاً لتصبح نصوصًا مقروءة ومتوسطًا (مثل العربية) تنتقل من اليمين إلى اليسار بدلاً من اليسار المعتاد -إلى اليمين.

وفي ختام

هذا عن ذلك الآن. وآمل هذه النصائح تغطية أساسيات ما يكفي لبدء تطبيقها في المشاريع الخاصة بك على الفور. كما هو الحال في معظم التخصصات المتعلقة بالتصميم ، لا توجد قواعد صارمة وسريعة يجب اتباعها ، وكل شخص لديه طريقة خاصة به في كيفية عمل الأشياء. لذا إذا كنت لا توافق على أي من اقتراحاتي أعلاه - أو حتى إذا كنت تتفق معها ولكن لديك وجهة نظر مختلفة - دعنا نسمع عنها في التعليقات.

بعد ذلك ، سنأخذ كل هذه الحكمة ونحاول تطبيقها على واجهة فعلية. ترّقب!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.