كيف احترف تصميم الواجهات؟

يمكنك الاعتماد على هذا المنتدى لانى تعلمت منه الكثير فى الvs وتصميم الواجهات

السلام عليكم ورحمه الله وبركاته

اخي ماذا تقصد باحتراف الواجهات؟!!

أخي السائل

يوجد علي سيرفري الخاص الدرس التاسع شرح طريقة تحسين شكل الفورم عن طريق استخدام برنامج Active Skin بالفيديو

http://www.arabdev2010.com/ADOnetLessons.aspx

أيضا يمكنك الحصول علي برنامج Active Skin من علي سيرفري الخاص مجانا من هنا

http://www.arabdev2010.com/FreeProg.aspx

وهذا رابط لمشاركة لي من 2007 عبارة عن تصميم قاموس عربي / انجليزي بواجهة جذابة

/index.php?showtopic=140312

وهذه مجموعة روابط مفيده جدا تتحدث عن نفس الموضوع

-------------------------------------------------------------------------------------------------------

تحميل الدرس الاول - كـــــــــيفية عمل أسكين بالاكتف أسكين وربطه بالفجوال بيزك

الدرس الثاني في الاكتف سكين Active Skin 4.3 وفي هذا الدرس سوف نعرف كيف عمل زر في الاكتف سكين وكيفية برمجته في ال Vb

الدرس الثالث في الاكتف اسكين ActiveSkin 4.3 كيفيية عمل " انيماشن Animation في الاكتف اسكين لاي ابجيكت

اضغط هنا لتحميل الاكتف اسكين ActiveSkin 4.3

اضغط هنا لتحميل كراك الاكتف اسكين ActiveSkin 4.3

السلام عليكم ورحمه الله وبركاته

اخ محمد ألاحظ ان بعض الدروس المذكوره اعلاه غير مجانيه؟!!

بالفعل أول ثلاثة دروس فقط مجانية والباقي كنت اعرضة للبيع بأجر رمزي جداً لضمان بقاء الموقع ودفع خدمة الـ Host الذي يحمل هذا الموقع البسيط لخدمة الناس

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

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

يعني باختصار ما هي الخطوط العريضة للبدأ...... وشكراً

اقتباس

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

يعني باختصار ما هي الخطوط العريضة للبدأ...... وشكراً

أعتقد ان مجموعة الروابط المرفقة بمشاركتي باستثناء الرابط الغير مجاني بسيرفري كافي لكي تتعرف علي الخطوط العريضة

بالتوفيق

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

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

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

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

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

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

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

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

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

- لون الخلفية

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

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

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

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

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

http://www.infoq.com/resource/articles/agile-useability-churchville/en/resources/image1.jpg

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

هذا النموذج يلخص شاشة الجهاز ويجزؤها الى 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 اما اذا كان البرانامج موجه لعامة الناس فيفضل كتابة الكلمات كاملة

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

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

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

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

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

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

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

وفيت و كفيك شكرا على الموضوع الرائع