كيف تصمم واجهات لبرامجك ؟ معلومات لن تجدها في اي موقع عربي

[Benarfa]

ما جعلني اكتب هذا الموضوع هو رؤيتي لواجهات

البرامج (وليس المواقع) التي يضعها الاعضاء

هذا الموضوع لا يدخل في مجال التصميم وانما هو من اساسيات

البرمجة لذلك اتمنى ان لايتم تحويله الى منتدى تصميم المواقع









اغلب المبرمجين اذا لم نقل جميعهم يقومون بانشاء واجهة البرنامج دون اي حساب ولا اي تفكير ويقومون باضافة الازرار الى الواجهة حسب تطور البرنامج

لكن هل هذا صحيح ؟



بالتاكيد تقول في نفسك ان هذا ليس بالعمل الاحترافي ولا اظن ان هناك من يخالفني الراي في هذه النقطة



ان اكثر من 30 في المائة من الميزانية المخصصة لمشروع برنامج تذهب فقط في انشاء الواجهة ، لذلك على المبرمج ان لايستهين بهذه النقطة



امر اخر يجب ان تعرفه

هو ان برنامج سيتعل من طرف مستخدمين عاديين وليس مبرمجين ، اي انهم يحكمون على برنامجك عن طريق الواجهة وليس عن طريق خفة الحجم او سرعه تشغيله

او طريقة البرمجة او الكود سورس



ماهي الامور التي يجب ان تكون في الواجهة ؟

من اهم الامور التي يجب ان تكون في واجهة برنامجك نذكر

- لون الخلفية

- شكل الايقونات

- نوع الكتابة ولونها

- مواقع الازرار والقوائم



اول شيء قبل بداية البرمجة على المبرمج دراسة كل الامور والوضائف التي ستكون في البرنامج لذلك جميع الشركات المتخصصة في البرمجة تضع فريقا مكون من مصمين ماهرين من اجل تصميم الواجهة ، ترسم الواجهة في اول الامر على الورق وباليد

وهذا ما يسمى Paper prototyping



قد يبدوا الامر غريبا لكن هذا هو العمل هناك بعض البرامج التي تساعد على رسم الواجهات لكن اغلب الواجهات ترسم باليد لاعطاء نظرة واقعية على شكلالواجهة النهائية





الان مع النموذج الخاص باي واجهة









هذا النموذج يلخص شاشة الجهاز ويجزؤها الى 9 مناطق حسب سهولة الرؤية من طرف المستخدم وسهولة الاستعمال ايضا



المناطق باللون الاصفر : عادة ماتستعمل للقوائم الرئيسية وشريط العنوان

المناط بالازرق : تستعمل اظهار محتوى البرنامج



المناطق بالخضر تستخدم لمعلومات اظافية او كمناطق مساعدة



المنطقو باللون الاحمر : تستخدم لازرار الغلق



الان ندرس كل جزء من الرنامج على حدى



1- الخلفية :

يجب ان تكون خلفية البرنامج مناسبة في الحجم لمكونات البرنامج ولايجب ان تتعدى كثيرا حجم المكونات وتكون صغيرة لدرجة ظهور اعمدة التصعيد

لون الخلفية يجب ان يكون لونا فاتحا ليسهل على المستخدم قراءة النص والرؤية اليه لمدة طويلة دون العناء من الم العين



2- شكل الايقوانات

الايقونات هي من اهم الامور في البرنامج فالمستخدم يلاحظ الصورة قبل قراءة النص واغلب المستخدمين عندما يبحثون عن امر ما لايتذكرون اسمه وانما يتذكرون شكل الايقونة لذلك فالايقونة يجب ان تكون لها علاقة واحظة مع عمل الزر ، وان يكون كل الايقونات في ستايل واحد ، وحجمها لايجب ان يتعدى 32*32 بيكسل



-3 القوائم

هناك نوعين من القوائم الثابة والمتحركة

بالنسبة للقوائم الثابتة بجب ان تكون في المنطقة الصفراء لكونها منطقة متوسطة الرؤية وقليلة الاستعمال ، يفضل ترتيب القوائم حسب النوع وجرت العادة وضع القوائم بالترتيب File / edition / affichage ..

لايجب ان تتعدى القائمة الرئيسية 8 قوائم فرعية والا فهذا يزيد من تعقيد الامور ،يمكن وضف قوائم داخل القوائم الرئيسية من اجل ترتيب اكثر وسهولة افضل

اما القوائم المتحركة فتكون فقط في الاماكن التي بها تخصيص وتحمل فقط الاوامر الخاصة بتلك الزر



-4 الكتابة

الكتابة يجب ان تكون بلون سهل القراءة وواضحة للرؤية وتكون بحجم متوسط عادة 8ن ويجب مراعات الاخطاء الاملائية ومحاولة جعل النص اقصر مما يمكن عليه مع ترك المعنى اوضح ، يجب ا ن تكون الكتابة ملازمة للصور



-5 مواقع الازرار

الازرار الخاصة بالتنفيذ والتسجيل او الغاء التسجيل تكون عادة في اسفل اليمين الازرار الاخرى يكب ان تكون بترتيب حسب الاسنعمال



-6 الاضافات

هناك اضافات اخرى يمكن اضافتها الى البرانمج من اجل استعمال اسهل وافضل مثل les infos bulles وهي تلك الشرات الصغية التي تظهر فوق الازرار والايقونات بمجرد وضع المؤشر عليها ، لايجب ان تحمل نص طويل فقط اسم الادات مع شرح بسيط عن عملها ان امكن ذلك



الازرار والاوامر التي لاتعمل مع فئة معينة عليها ان تكون grise باللون الرمادي ومن الافضل عدم اخفائها ولكن تركها ليعلم المستخدم ان الامر موجود لكن لايستعمل في ذلك المكان



اذا كان البرنامج يحمل formulaire لملئه يجب مراعات ترتيب les zone de texte

عندما يملئ النص الاول ويضغط على entre ينتقل مباشرة الى النص الثاني وفي الاخير يطب الزر ok (tab ordre(





المساعدة

اظافة Help المساعدة امر ضروري في البرامج حتى ولو كان الامر بديهي بالنسبة لك والواجهة سهلة لكن هناك من لايفهمها لذلك يجب مراعات هذا الامر





فئة المستخدمين

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



ترتيب الازرار

يجب على الازرار ان تكون مرتبة وبنفس الحجم والطول والعرض والنص لايجب ان يتعدى حدود الزر





المسافة المقطوعة بالمؤشر

اغلب الشركات بعد ان تضع واجهاتها تقوم بتجربها مع عدد كبير من جميع فئات المستخدمين وتقوم بحساب المسافة التي تقطعها مؤشر الفارة وحساب المتوسط

يجب ان تكون المسافة التي يحرك فيها المستخدم الفارة صغيرة جدا وكذلك استعمال لوحة المفاتيح لايجب ان يكون كثيرا







هاذا هو حال المبرمج يفكر من اجل جعل البرانامج اكثر سهولة للمستخدم ولايجب الاستهانة بادق التفاصيل

وفي الاخير اتمنى ان اكون قد قدمت شيئا به فائدة






شكرا على تتبعكم

هذا الدرس من انشائي وليس منقول

[ahmed0eagle]

ان الله لا يضيع اجر من احسن عملا

---------- Post added at 07:22 PM ---------- Previous post was at 07:49 AM ----------

ان الله لا يضيع اجر من احسن عملا

[nabiloviche]

رحمة الله و بركاته
أولا مشكورين أخواني جميـــعا في الحقيقة
لأني مبتدأ و إستفدت
دمت في رعاية اللله إنشاء الله يجازك العافية

---------- Post added at 09:15 PM ---------- Previous post was at 09:12 PM ----------

الحمد لله على إحسانه

والشكر له على توفيقه وامتنانه

وأشهد أن لا إله إلا الله وحده لا شريك له تعظيما لشانه

[ahmed0eagle]

ان الله لا يضيع اجر من احسن عملا

[toukibobe18]

رأيت العلم صاحبه كريمٌ......ولو ولدته آباءُ لئِـامُ
وليس يزال يرفعه إلى أن......يُعظم أمره القوم الكرامُ
ويتبعونه في كل حالٍ......كراعي الضأن تتبعه السوام
فلولا العلم ماسعدت رجال......ولاعُرِف الحلال ولا الحرامُ

[ahmed0eagle]

ان الله لا يضيع اجر من احسن عملا

[WASEM DALLOUL]

السلام عليكم
شكرا لك يا أخي الكريم على هذه المعلومات الجيده حول تصميم واجهات للبرامج وبارك الله فيك وجزاك كل خير
وبالتوفيق

[abdelmoumenDK]

السلام عليكم اخواني
الآن أطلب بطاقة ماستركارت مجانا تصلك حت للمنزل واربح $25 وذلك باتباع الرابط التالي
http://www.payoneer.com/payment-serv...rc=facebook_js
عندما تنتهي من التسجيل ستجد رابطك الخاص انشره كم فعلت وستربح $25
وجزاكم الله خيرا

[aziz.alger]

جميل جدا موضوع رائع وجميل يستحق المشاهدة من كل المبرمجين العرب
شكرا لك أخي benarfa على هذا الموضوع

[nani47]

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