PDA

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



Benarfa
11-24-2013, 01:54
ما جعلني اكتب هذا الموضوع هو رؤيتي لواجهات

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

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

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









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

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



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



ان اكثر من 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
11-26-2013, 22:22
ان الله لا يضيع اجر من احسن عملا

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

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

nabiloviche
11-26-2013, 23:15
رحمة الله و بركاته
أولا مشكورين أخواني جميـــعا في الحقيقة
لأني مبتدأ و إستفدت
دمت في رعاية اللله إنشاء الله يجازك العافية

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

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

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

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

ahmed0eagle
11-27-2013, 10:33
ان الله لا يضيع اجر من احسن عملا

toukibobe18
11-27-2013, 18:54
رأيت العلم صاحبه كريمٌ......ولو ولدته آباءُ لئِـامُ
وليس يزال يرفعه إلى أن......يُعظم أمره القوم الكرامُ
ويتبعونه في كل حالٍ......كراعي الضأن تتبعه السوام
فلولا العلم ماسعدت رجال......ولاعُرِف الحلال ولا الحرامُ

ahmed0eagle
11-27-2013, 23:23
ان الله لا يضيع اجر من احسن عملا

WASEM DALLOUL
12-01-2013, 15:43
السلام عليكم
شكرا لك يا أخي الكريم على هذه المعلومات الجيده حول تصميم واجهات للبرامج وبارك الله فيك وجزاك كل خير
وبالتوفيق

abdelmoumenDK
12-05-2013, 17:29
السلام عليكم اخواني
الآن أطلب بطاقة ماستركارت مجانا تصلك حت للمنزل واربح $25 وذلك باتباع الرابط التالي
http://www.payoneer.com/payment-services/en/referafriend/?tellapal.id=335e8422-6a24-43aa-bdfd-4dce502b7d63&f=Abdelmoumen&refid=3298682&dist_src=facebook_js
عندما تنتهي من التسجيل ستجد رابطك الخاص انشره كم فعلت وستربح $25
وجزاكم الله خيرا

aziz.alger
12-06-2013, 13:57
جميل جدا موضوع رائع وجميل يستحق المشاهدة من كل المبرمجين العرب
شكرا لك أخي benarfa على هذا الموضوع

nani47
12-06-2013, 14:08
السلام عليكم أريد جواب من الاخ الدي يضع رابط للتسجيل في ماستر كارد يا أخي أنا سجلت ووقت وصول البطاقة يكون اليوم بادن الله وهل صحيح توصل ولا مجرد كدب من شركة وشكرا.

نور المعرفه
12-06-2013, 16:38
HY , bro إنت شكلك شاطر في حكاية البرمجة ، طب أقولك ليه ما تحولش تعمل كم حاجة كدة ليها علاقة بالفوركس في الشارت والإكسبريت ، يعني حاجات تفيد وتساعد في المنصة وبعد كده تحاول تدينا دروس بسيطة في البرمجة أصلها مطلوبة وأنا بصراحة مش فاهمة الناس إلي بتمرج دي بيحفظوا الأوامر الكتيرة أوي دي إزاي ، ok بيس وبالتوفيق إن شاء الله .:respect:

ahmed0eagle
12-06-2013, 18:29
ان الله لا يضيع اجر من احسن عملا

شكرا اخي الكريم علي مشاركتك المفيده

dzhouhou
12-06-2013, 18:51
بارك الله فيك شرح رائع يا اخي تستحق التقييم

ilyes chaieb
12-07-2013, 22:27
السلام عليكم و رحمة الله
شكرااا لك ياغالي على هذا الموضوع
موضوع كبير و هام
لكن للاسف الموضوع معقد قليلا لو تكرمت و وضعت لنا بعض الصور عشلن نقدر نفهم اكثر
بالتوفيق

ahmed0eagle
12-08-2013, 11:49
ان الله لا يضيع اجر من احسن عملا

شكرا اخي الكريم علي مساهمتك الكريمة

nacero
12-21-2013, 18:16
ينتشر استخدام لغة كوبول على نطاق واسع عالمياً حيث تستخدم في البنوك وفي المنظمات الحكومية، وتستخدم على حاسبات كبيرة أو على حاسبات شخصية .
وتتميز لغة كوبول بقدرتها على التعامل مع الملفات؛ لذا اشتهرت بأنها لغة أعمال

ysf4
12-28-2013, 03:30
واجهة البرنامج تصمم وفق دفتر تحملات الزبون وهدا الدفتر يحتوي على متطلبات الزبون و مايريد ان يحصل عليه
و يتم التوقيع على دلك بين الطرفين و يقوم فريق متخصص في شركة البرمجة بإنشائها

harimeche
03-30-2014, 21:51
الســــلام عليكم ورحمة الله

يا أخـــــي أولا الموضوع منسوخ ولا داعــــي

لكي أكتب لك مصددر النسخ تـــانيا في أي شيء

سيفيدنــــا هدا ومــا علاقته حول لغـــات برمجة أنضمة التداول

!!!

fido
04-19-2014, 23:34
السلام عليكم ورحمة الله
وأكرمك الله على هذا العمل الجليل
وبارك الله فيك

.................................................. .................................................. .................................................. .................................................. .................................................. .................................................. .................................................. .................................................. ................

Hassan Owen
04-21-2014, 04:00
بالفعل html من اهم لغات البرمجة في انشاء المواقع و هي بسيطة جدا و بإستطاعة
اي شخص تعلمها حتى و ان كان بعيدا عن مجال البرمجة و موضوعك هو مقدمة جيدة لتعلم اساسيات html

maroki
06-22-2015, 18:54
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله تعالى وبركاته
بارك الله فيك على هذا المجهود الطيب والموضوع القيم والمميز
جزاك الله الفردوس الاعلى
واصل تألقك الدائم

alimed
09-17-2015, 23:11
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله
موضوع رائع شكلا ومضمونا
بارك الله فيك يا طيب واجزل لك العطاء
يكتب لك الله بكل خطوة سعادة وكل نظرة عبادة
وكل بسمة شهادة وكل رزق زيادة

mamdouh.adil
11-12-2015, 23:39
شكرا اخى الكريم على موضوعك المفيد فعلا اول شئ بيلفت النظر فى البرنامج هى الواجهة وسهولة استخدامها اكثر من امكانيات
البرنامج نفسه وقوته ومدى فاعليته التى تظهر فيما بعد وبالطبع بيدخل فى تصميم الواجهه برامج جرفك ورسومات احترافيه

sou
01-26-2016, 01:55
إذا كنت تقصد في الباك تست فلا يمكن أن يتغير رأس المال ويعود للمبلغ الأصلي أثناء عمل الباك تست
أما إذا كنت تقصد حجم اللوت في إدارة رأس المال فبدلا من أن تستخدم AccountBalance لمعرفة رأس المال فسوف تستخدم رأس المال الثابت 500 دولار وبناء عليه سوف يحدد حجم اللوت لك

torkhan mohamed
02-26-2016, 07:50
السلام عليكم ورحمه الله وبركاته
شكرا اخى على الموضوع الجميل
واتمنى منك دائما الافاده لنا والله يجازيك كل خير واتمنى لك التوفيق
وبارك الله فيك وجزاك خيراً والسلام عليكم ورحمه الله

mhamadfor
02-29-2016, 14:36
السلام عليكم
شكرا لك يا أخي الكريم على هذه المعلومات الجيده حول تصميم واجهات للبرامج وبارك الله فيك وجزاك كل خير
وبالتوفيق

abanoub hana
03-05-2016, 22:50
السلامه عليكم ورحمه اله وبركاته أتمنى من الله عز وجل أن يعطيكم
الصحة والعافية شكرا لكم على ما قدمتموه
لي من أحاسيس نابعة من قلوبكم و دام الله عزكم و دام عطائكم
شكرا لكم اعضاء منتدي فوركس العرب
شكراااا

TMT
03-06-2016, 21:42
السلام عليكم ورحمة الله وبركاته موضوع رائع يا اخى شرح موفق منك
مشكور علي هذه المعلومات الاكثر من رائعة
موضوع مميز وجيد وربنا يوفقك وبارك الله فيك وجزاك خيراً والسلام عليكم ورحمه الله

minoch
04-18-2016, 22:12
اللهم إني أعوذ بك من علم لا ينفع، وقلب لا يخشع ، ونفس لا تشبع ، ودعوة لا يستجاب لها ،اللهم إني أعوذ بك من شر ما عملت ، ومن شر ما لم أعمل ، وأعوذ بك من شر ما علمت ، ومن شر ما لم أعلم اللهم إني أعوذ بك من زوال نعمتك ، وتحول عافيتك ، وفجاءة نقمتك ، وجميع سخطك .

ashrafbek
04-19-2016, 14:44
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته اخي الكريم
اشكرك جزيل الشكر علي موضوعك الاكثر من رائع
وانتظر منك ومن جميع اعضاء هذا المنتدي الجميل الفائدة المتبادلة دوماً
تقبل خالص الود والتقدير

AYA.M
05-13-2016, 14:09
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
اسعدني التواجد بهذا المنتدي الرائع واتمني دوماً الافادة للجميع
واشكرك شكراً جزيلاً علي طرحك لهذا الموضوع الجميل
تمنياتي لكم بالنجاح الدائم

medo.mohamed
05-13-2016, 18:06
بسم الله الرحمن الرحيم والصلاة و السلام على سيدنا محمد
السلام عليكم ورحمة الله تعالى وبركاته و تحية طيبة لكل
الف شكر ليك اخي الكريم علي الشرح موضوع مميز وشرح كويس جدا الف الف شكر

maskzorro
05-13-2016, 18:31
شكرا لك يا أخي الكريم على هذه المعلومات الجيده حول تصميم واجهات للبرامج وبارك الله فيك وجزاك كل خير

medo.mohamed
05-28-2016, 12:49
بسم الله الرحمن الرحيم والصلاة و السلام على سيدنا محمد
السلام عليكم ورحمة الله تعالى وبركاته و تحية طيبة لكل
الف شكر ليك اخي الكريم علي الشرح موضوع مميز وشرح كويس جدا الف الف شكر

zeco2020
06-11-2016, 18:40
السلام عليكم ورحمه الله وبركاته
مشكور علي هذه المعلومات الاكثر من رائعة وان شاء الله تعرض مواضيع نستفاد منها اكتر
واتمنى منك دائما الافاده لنا والله يجازيك كل خير واتمنى لك التوفيق
والسلام عليكم ورحمه الله

SHADY0
06-11-2016, 21:43
السلام عليكم ورحمة الله وبركاتة
شكرا اخى على هذا الموضوع الجميل شرح مميز وجميل واتمنى منك دائما الافاده واتمنى لكم النجاح
و التوفيق في هذا المجال والسلام عليكم ورحمة الله وبركاتة

bairoud hamza
06-11-2016, 22:09
سم الله الرحمن الرحيم
السلام عليكم ورحمه الله وبركاته
بارك الله فيك وجزاك خير الجزاء
تقبل الله منا ومنكم صالح الاعمال
بإنتظار جديدك بفارغ الصبر فلا تحرمنا من الفائدة
وبارك الله فيك وجزاك خيراً والسلام عليكم ورحمه الله