Contacts
صفحه اصلی پورتال | صفحه اصلی تالار | ثبت نام | اعضاء | گروه ها | جستجو | پرسش و پاسخ | فروشگاه الکترونیکی | خرید پستی بازی های کامپیوتری





صفحه اول انجمنها -> نرم افزار Photoshop -> اصول طراحی رابط گرافیکی کاربر یا GUI
 

ارسال يك موضوع جديد   پاسخ به يك موضوع ديدن موضوع قبلي :: ديدن موضوع بعدي
برو به صفحه 1, 2  بعدي

اصول طراحی رابط گرافیکی کاربر یا
نويسنده
پيغام
mehdico
مدیر انجمن
مدیر انجمن


تاريخ عضويت: 2 شنبه 19 بهمن 1383
تعداد ارسالها: 1524
محل سكونت: اهواز


جمعه 3 اسفند 1386 - 22:08
پاسخ بصورت نقل قول
-------------=

سلام به همگی !

تصمیم گرفتم یه تاپیک بزنم تا در مورد رابط گرافیکی برنامه ها و بازیها به بحث بپردازیم. واقعاً اهمیت رابط گرافیکی در ایران شناخته نشده هست و معمولاً باعث میشه که حیثیت بازی یا برنامه زیر سوال بره و من موارد زیادی اینطور سراغ دارم.
هدف من اینه که با هم در مورد رابط های گرافیکی بازی ها و برنامه های مختلف صحبت و تبادل اطلاعات کنیم. در ابتدا بحث برنامه ها رو پیش می کشیم و بعد کم کم روی بازیها تمرکز خواهیم کرد. در این بین سعی می کنم که تصاویر و مثالهایی هم در این رابطه به نمایش بگذاریم. همچنین با ذکر قواعد و استانداردهای موجود برای طراحی اینترفیس نیز آشنا خواهید شد. این قواعد از روی وب و چند تا کتاب نقل خواهد شد.

و بالاخره قبل از اینکه وارد بحث بشیم لازم می دونم که معادل فارسی GUI رو ذکر کنم. GUI مخفف Graphic User Interface هست که در فارسی به "میانای کاربر گرافیکی" معادل سازی شده است. به هر حال من همیشه می گم "رابط گرافیکی کاربر" شما هم همینو بگین!

-=-=-=-=-=-

برنامه ی چند صد هزار تومنی مترجم پارس رو حتماً تا حالا دیدید؟ برنامه ای که قیمتش با قیمت ویندوز xp نسخه ی Professional برابری می کنه ! واقعاً باید رابط کاربریش مثل برنامه های ویندوز 95 باشه ؟
برنامه دومی که مثال میزنم برنامه مترجم پدیده هست که خدا رو صد هزار مرتبه شکر ، اینها حداقل از اسکین xp استفاده کردن ولی دلتونو زیاد خوش نکنید چون اولاً اینکه قیمتش با قیمت ویندوز ویستا نسخه ی ultimate برابره (600 هزا تومن ناقابل!) پس کاربر بیچاره حق داره برنامه رو با شمایل برنامه های ایکس پی ببینیه ! دوماً اینکه این برنامه نه تنها از معیارها و استاندارد های طراحی اینترفیس (که حتی یه بچه دبستانی هم می تونه تشخیص بده مثلاً این کلید جاش اینجا نیست!) پیروی نکرده بلکه سعی کرده که معیارهای جدیدتر و پیشرفته تری ابداع کنه چون اون چیزها به کلاس کارشون نمی خوره و حیفه که شرکتی که قیمت یکی از محصولاتش با ویندوز ویستای مایکروسافت برابره از این قرتی بازیها در بیاره!
این برنامه موقع لود ( که واقعاً من نفهمیدم یه برنامه پردازشگر متن در حد ورد پد لودش دیگه چیه ! فکر کنم سر کاری باشه و فقط یه اسپلش اسکرینه که برنامه نویسها فکر کردن باید یه پروگرس بار هم بهش اضافه کنند تا کلاس کار بالاتر بره ! ) خب می گفتم ، بعد از لود یه کلید میاد که باید روش کلیک کنید تا برنامه باز بشه ! تصویرش رو در زیر می بینید ، ببینید تا باقیش رو هم بگم .



همون طور که می بینید جناب لودینگ نصف پایینیش نیست ! حالا چرا نصفش نیست فقط خدا می دونه! اون کلید Continue هم بعد از لودینگ ظاهر میشه که کاربر بدبخت باید یک کالری انرژی برای کلیک کردن روش بسوزونه! حالا این اشکالات توی نمایش تصویر (که نصف سمت راستش نیست) و اون آدرس وب در گوشه ی چپ و پایین رو میذاریم به حساب اینکه این تصویر مال نسخه ی غیر قانونی یا ک..ر..ک شده از برنامه است. من دیگه خود برنامه رو توضیح نمیدم چون فکر کنم با همین لودینگش هم کلی تفریح کردید.

-=-=-=-=-=-

در اینجا من می خوام چند از کارهای GUI خودم رو بذارم. شاید اینجوری یکم از این تاپیک استقبال شد ! شما هم می تونید کارهاتون رو همین جا بگذارید.

البته بگم که این طرح ها همش سلیقه ای هست و هنگام طراحی به معیارها توجه نشده (البته غیر از طرح برنامه Took Uninstaller ).
اون افکتهای مسخره ای هم که می بینید فقط برای کپی رایته !

تصویر شماره 1


این رو از یکسری طرح های مایکروسافت ایده گرفتم.


----------------
تصویر شماره 2


این رو با یکسری تغییر تو برنامه رحمتگر ازش استفاده کردم.


----------------
تصویر شماره 3


این رو از رابط برنامه های شرکت Adobe ایده گرفتم.


----------------
تصویر شماره 4


این طرح یه کتابه که تو برنامه رحمتگر ازش استفاده کردم.


----------------
تصویر شماره 5


این صفحه رو برای برنامه رحمتگر به صورت استاتیک طراحی کردم.


----------------
تصویر شماره 6


این رو حدود 2 سال پیش طراحی کردم.


----------------
تصویر شماره 7


این هم رابط گرافیکی برنامه Took Uninstaller هست. البته برنامه نیمه کاره موند و به همین دلیل طرح هم نیمه کاره رها شد. اینجا برای اولین بار سعی داشتم یه رابط گرافیکی ساده و راحت (اصطلاحاً خوش دست) طراحی کنم.


----------------
تصویر شماره 8


این هم یه بنر متحرک (اگه حرکت نمی کنه صبر کنید تا لود بشه) که کلش با فتوشاپه (برای اولین بار با فتوشاپ متحرک سازی کردم !).


----------------
تصویر شماره 9


این طرح کار یکی از دوستای گلمه که یکی از مدیرهای مجید آنلاین هست. یادش بخیر دوره کاردانی هم دوره ای بودیم. ولی حالا دیگه کم کم داریم کارشناسی رو استاد می کنیم ! این بنرها رو برای Took Unistaller طراحی کرد.


-----------------
تصویر شماره 10


این هم همون کتابست که توی تصویر 4 دیدید که توی برنامه گذاشتمش.




امیدوارم کارهای شما رو هم ببینیم و البته حضور شما رو در این بحث .

-------------=
ارسال  بازگشت به بالا
ديدن مشخصات كاربر ارسال پيغام خصوصي ارسال ايميل نام كاربري در پيغامگير Yahoo
 

نويسنده
پيغام
_Akhtar
پیر بازی سازی
پیر بازی سازی


تاريخ عضويت: جمعه 10 فروردين 1386
تعداد ارسالها: 1212


شنبه 4 اسفند 1386 - 17:25
پاسخ بصورت نقل قول
با شماره دومي خيلي حال كردم!
يه كاري هست دارم انجام ميدم ُ تموم شد ميزارم ببيني..

_________________
تو هم مثل من تازه واردی؟
از اینجـــا شروع کن! <<<


www.Saeed-Shahriyari.ir
ارسال  بازگشت به بالا
ديدن مشخصات كاربر ارسال پيغام خصوصي
 

نويسنده
پيغام
mehdico
مدیر انجمن
مدیر انجمن


تاريخ عضويت: 2 شنبه 19 بهمن 1383
تعداد ارسالها: 1524
محل سكونت: اهواز


شنبه 4 اسفند 1386 - 22:34
پاسخ بصورت نقل قول
------------=

خوشحال میشم کار شما رو هم ببینم.

دوستان دقت کنن که این یه بحث هست که در خلالش تصاویر هم نمایش داده میشه (در واقع نمایشگاهه !!! Very Happy ) پس شما هم وارد بحث (نمایشگاه!) بشین.

------------=
ارسال  بازگشت به بالا
ديدن مشخصات كاربر ارسال پيغام خصوصي ارسال ايميل نام كاربري در پيغامگير Yahoo
 

نويسنده
پيغام
eta
مدیر سایت
مدیر سایت


تاريخ عضويت: 2 شنبه 27 تير 1384
تعداد ارسالها: 2153
محل سكونت: شاهين شهر


شنبه 4 اسفند 1386 - 22:39
پاسخ بصورت نقل قول
سلام
من همون اول مطلب رو کامل خوندم.
البته بحثش از نمایش کمتر بود.
حرف خاصی ندارم بگم.
فقط اون مترجم پدیده خداییش رابطش خیلی جفنگ بود. Sad

_________________
تالار اصول ->صفحه ها، مقالات و تاپیکهای مفید

ارسال  بازگشت به بالا
ديدن مشخصات كاربر ارسال پيغام خصوصي ارسال ايميل
 

نويسنده
پيغام
mehdico
مدیر انجمن
مدیر انجمن


تاريخ عضويت: 2 شنبه 19 بهمن 1383
تعداد ارسالها: 1524
محل سكونت: اهواز


شنبه 4 اسفند 1386 - 23:02
پاسخ بصورت نقل قول
----------=

انشا ا.. بحث رو ادامه میدم تا شما هم یه حرفی داشته باشی. بعدش هم گروه بندی می کنیم و با هم دعوا می کنیم! Evil or Very Mad

سعی می کنم تاپیک جنبه آموزشی داشته باشه تا حداقل اون رابط گرافیکی پدیده توی بازی ها و برنامه های خودمون تکرار نشه.

----------=
ارسال  بازگشت به بالا
ديدن مشخصات كاربر ارسال پيغام خصوصي ارسال ايميل نام كاربري در پيغامگير Yahoo
 

نويسنده
پيغام
mehdico
مدیر انجمن
مدیر انجمن


تاريخ عضويت: 2 شنبه 19 بهمن 1383
تعداد ارسالها: 1524
محل سكونت: اهواز


2 شنبه 6 اسفند 1386 - 21:17
پاسخ بصورت نقل قول
------------=


اصول بنیادی طرّاحی میانای کاربر گرافیکی

سالها تجربهٔ طرّاحی میانای کاربر نشان داده است که پای بندی به اصول و چهارچوب های مشخص به بهبود کیفیت و کارآیی میانای کاربر گرافیکی کمک می کند. حفظ این اصول هنگام طرّاحی یک نرم افزار لازمه تضمین کیفیت آن است.
از زمان ظهور اوّلین میانای کاربر موفّق گرافیکی سالهای زیادی گذشته است. (سال ۱۹۸۴ میلادی - میانای کاربر مکینتاش ) و در طیّ این مدّت شکل ظاهری میاناهای کاربر گرافیکی تغییرات زیادی کرده است، ولی اصول حاکم بر طرّاحی آنها، ضمن توسعه و تکمیل، دچار تغییرات اندکی شده است . ثبات نسبی این اصول تا حدودی عجیب می نماید، چرا که در طّیِ بیش از دو دهه ای که از آغازِ رواج یافتنِ میانا های کاربر گرافیکی می گذرد، تغییرات زیادی در کاربرد رایانه ها و حجم و نوع اطلاعات مورد پردازش با آنها ایجاد شده است . به همین دلیل، سال ها است که لزوم بهبود میانا های کاربر گرافیکی و ابتکارات جدید در رابط هٔ انسان و رایانه مطرح شده است . در طّیِ دو ده هٔ گذشته نیز تلاش های متعدّدی در این زمینه صورت گرفته است امّا تاکنون موفّقیّتِ این تلاش ها در جلب مخاطبین محدود بوده است.



اصل ۱) کاربر را غافل گیر نکنید
یکی از مهمترین اصول طراحی یک میانای کاربر خوب، اجتناب از غافل گیر کردن کاربر است . کنش یا و اکنشی از طرف نرم افزار که بر خلاف انتظار کاربر باشد « غافل گیر کردن » گفته می شود. شرط موفقیت در اجتناب از غافل گیر کردن کاربر، داشتن درک درستی از انتظارات و
پیش ذهنیهای کاربر است برخی معتقدند غافل گیر کردن مثبت کاربر از طریق هوشمندی نرم افزار مفید است . مثلاً اگر نرم افزار حدس بزند که کاربر قصد انجام چه کاری را دارد و آن کار را به طور خودکار انجام دهد، بهره وری کاربر بیشتر می شو د. این امر به شرطی درست است که در اغلب موارد (بیش از ۹۵ درصد) حدس نرم افزار درست باشد و طوری عمل کند که تمرکز حواس و روال کار کاربر را به هم نزند . در غیر این صورت، کنش های غافل گیر کنندهٔ نرم افزار کاربر را کلافه خواهد کرد.



منبع : پروژه لینوکس فارسی با دخل و تصرف.

-=-=-=-=-=-

خوب فکر کنم فعلاً تا اینجا کافی باشه. حالا قصد دارم تا مثالهایی از اصل یک برای شما ارائه کنم.


در مورد اصل 1 "کاربر را غافلگیر نکنید" : اگه شما کارت عابر بانک دارید این رو خوب خواهید فهمید. شما حتماً چندین بار مجبور شدید که از چند تا بانک و دستگاه خود پرداز متفاوت استفاده کنید. همون طور که می دونید ما از استعدادهای خلاق و مهندسین خوش ابتکار زیادی بهره می بریم (خدا این نعمت رو ازمون نگیره) بنابراین هر کدوم از اونها طبق سلیقه شخصی صفحه کاربری رو طراحی می کنن. یکجا کلید تایید سمت چپه ، جای دیگه سمت راست. یکبار بالاست یکبار پایین و یک جای دیگه هم وسط ! حالا از این تایید که بگذریم می رسیم به دریافت وجه ، همون طور که می دونید ما خیلی واحد پولی مون دقیقه ، حتی دلارهای آمریکا هم به اندازه ی اسکناس 10000 ریالی ما صفر نداره! خوش به حالمون که اینقدر دقیقیم ! طراحان عزیز هم فرصت رو غنیمت شمرده و برای نجات دادن اسکناسها از زندان خود پرداز ، کلید ها رو به حالت رندوم عوض می کنن. تا بیای ببینی کلید چه مبلغی رو زدی ییهو 100000000000 ریال پول توی دستته ! این هم از حکایت غافل گیری کاربر.

منتظر ادامه اش هم باشین.
کاشکی به جای خمیازه کشیدن شما هم توی این بحث شرکت کنین !

------------=
ارسال  بازگشت به بالا
ديدن مشخصات كاربر ارسال پيغام خصوصي ارسال ايميل نام كاربري در پيغامگير Yahoo
 

نويسنده
پيغام
سيلوستر
مدیر انجمن
مدیر انجمن


تاريخ عضويت: 5 شنبه 27 مرداد 1384
تعداد ارسالها: 499
محل سكونت: مشهد - One of back street boys


3 شنبه 7 اسفند 1386 - 08:01
پاسخ بصورت نقل قول
اینم اینتر فیس یکی از کارای من.
سعی کردم شبیه ویستا دربیارمش
بجز یه سری از آیکون هاش بقیش کار خودمه


البته این فرم لاگینش رو یکم از جایی الهام گرفتم

ابعاد 1024x768


ابعاد 1024x768


_________________
ارسال  بازگشت به بالا
ديدن مشخصات كاربر ارسال پيغام خصوصي ارسال ايميل
 

نويسنده
پيغام
mehdico
مدیر انجمن
مدیر انجمن


تاريخ عضويت: 2 شنبه 19 بهمن 1383
تعداد ارسالها: 1524
محل سكونت: اهواز


4 شنبه 8 اسفند 1386 - 18:22
پاسخ بصورت نقل قول
--------------=

سلام.

آقا کارت حرف نداره. البته نمی شه نقدش کرد (البته غیر از صحبت در مورد ترکیب رنگیش) چون تقریباً 80% از کار کپی برداری ( سوء تفاهم نشه ها ! ، منظورم اینه که در مورد رابط گرافیکی ویستا نمیشه بحث کرد !)

در مورد ترکیب رنگیش هم می تونم با اطمینان بگم :: عالیه ! البته دوستان دقت کنند که قرار نیست هر کی برنامه اش بیشتر به نقاشی های پیکاسو شبیه بود بگیم :: عالیه ! رنگ ها در موقع طراحی رابط گرافیکی موقعیتشون بنا بر شرایط تعیین میشه. و در مورد این رابط هم به خاطر استفاده صحیح از رنگها می گیم :: عالیه !

انشا ا.. در چند تا پست بعدی در مورد فرم های راست به چپ صحبت خواهد شد.(تصویر آخر) همچنین یه قسمت رو هم به طراحی فرم های ورودی بانک اطلاعاتی اختصاص خواهم داد.(باز هم تصویر آخر)
مطلب جدید تا آخر هفته آینده.

--------------=
ارسال  بازگشت به بالا
ديدن مشخصات كاربر ارسال پيغام خصوصي ارسال ايميل نام كاربري در پيغامگير Yahoo
 

نويسنده
پيغام
michael_bier
پیر بازی سازی
پیر بازی سازی


تاريخ عضويت: 1 شنبه 5 فروردين 1386
تعداد ارسالها: 656
محل سكونت: تهران


4 شنبه 8 اسفند 1386 - 19:11
پاسخ بصورت نقل قول
سلام
ایول
عجب گار درسته این سیلوستر که دل منو برد
ایول خیلی باحال شده
اما با نظر مهدی موافقم

_________________
بالاتر از همیشه! بدون ادعا ولی با پیشرفتی با سرعت نور!!
ارسال  بازگشت به بالا
ديدن مشخصات كاربر ارسال پيغام خصوصي ديدن وب سايت كاربر نام كاربري در پيغامگير Yahoo
 

نويسنده
پيغام
سيلوستر
مدیر انجمن
مدیر انجمن


تاريخ عضويت: 5 شنبه 27 مرداد 1384
تعداد ارسالها: 499
محل سكونت: مشهد - One of back street boys


5 شنبه 9 اسفند 1386 - 18:50
پاسخ بصورت نقل قول
ممنون از نظرتون
نقل قول:
البته نمی شه نقدش کرد (البته غیر از صحبت در مورد ترکیب رنگیش) چون تقریباً 80% از کار کپی برداری

درسته تو این کار من از خلاقیت خودم استفاده نکردم و سعی کردم یه چیزی شبیه ویستا در بیارم. البته این کار سفارشی بود و خود مشتری خواسته بود که شبیه XP بزنیم، منم هم که زورم زیاد بود، گفتم دلم می خواد شبیه ویستا بزنم. Idea

چند تا نکته که در مورد طراحی GUI به زهنم میرسه رو میگم. البته اکثرش از روی تجربست پس ممکنه کاملا درست نباشه. هر چی رو که اشتباه گفتم بگید تا راجع بهش بحث کنیم

- سادگی فرم ها: فرم های برنامه تا جایی که ممکنه باید ساده طراحی بشن و هر چیزی سر جای خودش باشه. باید تا جایی که ممکنه از شلوغ شدن فرم ها پرهیز بشه و فرم های شلوغ رو میشه با تقسیم کردنشون به دو فرم و یا استفاده از tab خلوت کرد. البته به شرط اینکه کارایی برنامه پایین نیاد و کاربر برای انجام یک عملیات به زحمت نیفته.

- ثبت سریع اطلاعات: کاربر در حداقل زمان ممکن بتواند اطلاعات را ثبت کند.

-جلوگیری از ورود اطلاعات غلط: برنامه باید با استفاده از تکنیک های مختلف جلوی ورود اطلاعات غلط را بگیرد. برای مثال خیلی از فیلد های ورودی را می توان بصورتAuto suggest ( یاAuto complete) در آورد. ایجاد Relation ship های منطقی بین جدول های دیتا بیس هم از ورود اطلاعات غلط جلو گیری می کند.


یه چیز دیگه هست که من هنوز براش به یه نتیجه منطقی نرسیدم و اونم چند زبانه کردن بر نامه هاست. روشی که فعلا استفاده میکنم اینه که اول برنامه رو کامل می نویسم بعد یه کپی ازش می گیرم و زبان فرم های اون کپی رو تغییر میدم. اشکال این روش اینه که باهر بار تغییر کردن برنامه باید هر دو برنامه رو تغییر بدم و یه خورده دیباگ کردنش سخت میشه.
کسی روش بهتری سراغ نداره

_________________
ارسال  بازگشت به بالا
ديدن مشخصات كاربر ارسال پيغام خصوصي ارسال ايميل
 

نمايش نامه هاي ارسال شده قبلي:   
ارسال يك موضوع جديد   پاسخ به يك موضوع    صفحه 1 از 2 تمام ساعات و تاريخها بر حسب 3.5+ ساعت گرينويچ مي باشد
برو به صفحه 1, 2  بعدي


 
پرش به:  


شما نمي توانيد در اين انجمن نامه ارسال كنيد.
شما نمي توانيد به موضوعات اين انجمن پاسخ دهيد
شما نمي توانيد نامه هاي ارسالي خود را در اين انجمن ويرايش كنيد
شما نمي توانيد نامه هاي ارسالي خود را در اين انجمن حذف كنيد
شما نمي توانيد در نظر سنجي هاي اين انجمن شركت كنيد


unity3d

بازگردانی به فارسی : علی کسایی @ توسعه مجازی کادوس 2004-2011
Powered by phpBB © 2001, 2011 phpBB Group
| Home | عضويت | ليست اعضا | گروه هاي كاربران | جستجو | راهنماي اين انجمن | Log In |