یه سوال ساده(اونایی که پروژه زیاد می نویسن بیان)

[eligod]

سلام دوستان من الان دارم پروژه پایانیم رو مینویسم و تا حالا هم پروژه ای به این مهمی ننوشتم و ندیدم
در مورد interface برنامه سوال دارم که عموما چه جوری باید باشه پس زمینه ها و چیز های دیگه
من توی یه سایتی عکس هایی دیدم ولی به دردم نخورد اگه راهنمایی کنید که دیگه....

[ajlajlajl]

من توي تمام برنامه هام به ظاهر xp مانند كفايت ميكنم. به نظر من كافيه. كه با چند تا كنترل درست ميشه.
اگه تفاوت بيشتر (من بهش قشنگي نميگم) ميخوايد ميتونيد از اسكين ها استفاده كنيد.

[Di Di]

يه محيط ساده ، خلوت و معلوم الحال كه از تم XP هم استفاده كرده باشه به مراتب زيباتر از اين اسكاين هاي سنگين و ... هست.

من با نظر علي آقا كاملا موافقم

[hamed_Arfaee]

سلام
نکاتی هستن که رعایت کردنشون باعث ایجاد یک رابط کاربر عالی میشه .
مثلا :
استفاده از فونت مناسب (نوع و اندازش مثل تاهوما )
اندازه مناسب و هماهنگ برای اشیای روی فرم (تکست باکسها و دکمه ها)
انتخاب یک آیکن 24*24 زیبا و متناسب با عملکرد دکمه (میشه عکسهای PNG رو به BMP تبدیل کرد)
و یک رنگ ثابت و ملایم برای همه فرمها (نه اینکه بصورت رندوم برا هر فرم یک رنگ انتخاب بشه)
تو همه فرمها سمت شروع هماهنگ باشه(یا همه چپ به راست یا همه راست به چپ)
متناسب بودن تعداد اشیا در یک صفحه (مثلا 100 تا تکست با 100 تا دکمه نذارین تو یک فرم که مجبور باشین برا فرم اسکرول تعریف کنین)
اگه خواستین برای فرم رنگ پس زمینه گرادیانت بزنین طیفش رو گسترده نکنین (حداکثر بازه دو رنگ از سیر تا روشن باشه)

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

و نکاتی خیلی زیادی که هر کدوم بتنهایی میتونه به زیبایی برنامه شما کمک بکنه .

[lord_viper]

در اکثر موارد وقتی که کاربری برنامه‌ای رو برای اولین بار اجرا می‌کنه٬ اگر به هر دلیلی رابط کاربر (User Interface) برنامه مورد پسندش قرار نگیره دیگه فرصت اجرای دوباره‌ای به برنامه نمیده و یک راست میره سراغ برنامه‌ی مشابه دیگه‌ای که رابط کاربرش راه دستش باشه و حق هم با کاربره. کاربر کاری به این نداره که برنامه شما چقدر توانایی داره و اون یکی چقدر٬ براش مهم اینه که با اون یکی برنامه زندگی براش راحتتره.

کاربر می‌خواد وظایفی رو به کمک برنامه سریعتر و بهتر انجام بده و در ذهنش هم الگوهایی برای انجام این وظایف داره. از طرفی برنامه هم طبق قوانین و اصول خودش دستورات رو می‌گیره تا وظایف خواسته شده رو به انجام برسونه. هر چقدر ما بتونیم تعابیر برنامه (Program Model) رو به تعابیر کاربر (User Model) نزدیکتر کنیم٬ رابط کاربر مناسبتری برای برنامه ایجاد کردیم.

برای این منظور کافیه که اصول ساده زیر رو در زمان طراحی رابط کاربر در نظر بگیریم:


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

اقلام و عملکردهای اضافی رو حذف کنید.
هر چی اقلام روی صفحه بیشتر باشه یا منوها تو در تو و بزرگتر باشند٬ عملکرد برنامه پیچیده‌تر به نظر میاد.
تعداد انتخابها (Options) رو کاهش بدید.
هر گزینه‌ای رو که در برابر کاربر قرار می‌دید بابتش کاربر باید فکر کنه و راجبش تصمیم بگیره. این وظیفه طراح رابط کاربره که بهترین تصمیم رو بجای کاربر بگیره.
اقلام مرتبط به هم رو دسته بندی کنید.
با دسته بندی کردن اطلاعات کاربر راحتتر می‌تونه رابطه بین اقلام رو بفهمه. جدا از اینکه با دریافت مفهوم یک قلم٬ درک مفاهیم اقلام مرتبط به اون راحتتره. همچنین سعی کنید تا اونجا که امکان داره هر زمان فقط گوشه‌ای از این اقلام رو به کاربر نشون بدید. برای این منظور استفاده از Page Control یا Tab Control بهترین انتخاب شماست.
جملات را ساده و کوتاه انتخاب کنید.
می‌دونیم که اکثریت کاربران دفترچه راهنما یا راهنمای آنلاین برنامه رو نمی‌خونند. البته بیشتر ما هم به همین دلیل این دو قلم رو از برنامه‌هامون حذف می‌کنیم. جالبه بدونید که اکثر کاربران حتی پنجره‌های پیام (Message Box) برنامه رو هم نمی‌خونند. پس سعی نکنید که پیامهای زیادی به کاربر نشون بدید و اگر واقعا لازمه که کاربر چیزی رو بدونه حتی‌الامکان جمله رو کوتاه کنید. هر چی جمله کوتاه‌تر باشه شانس اینکه کاربر بخوندش بیشتره. به همی دلیل حتی کلماتی مانند "لطفا" و "خواهشمند است" رو از پیامهاتون بردارید.
تشابه سازی
برای کاربر راحتترین چیز اینه که بدون فکر کردن و از روی عادت کاری رو که می‌خواد انجام بده. برای این منظور باید رابط کاربر رو جوری طراحی کرد که کاربر با استفاده از اون چیزهایی که تو دنیای واقعی ملکه ذهنش شده راه خودش رو به سادگی تو برنامه پیدا کنه.

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

رابط کاربر رو طبق استانداردهای موجود در سیستم عامل پیاده کنید.
کاربر انتظار داره همونجور که بقیه برنامه‌ها رو کنترل می‌کنه٬ برنامه شما رو هم کنترل کنه. به عنوان نمونه در برنامه‌های ویندوز دکمه تایید همیشه پیش از دکمه انصراف قرار داره٬ پس برنامه ویندوز شما هم باید این اصل رو رعایت کنه.

با توجه به نوع برنامه٬ از برنامه‌های معروف و پرطرفدار دیگه الگوبرداری کنید.
به عنوان نمونه اگر قصد دارید یک ویرایشگر متن بنویسید٬ ببینید کلیدهای میانبر (Shurtcuts) روی مایکروسافت ورد چی تعریف شده و همونها رو استفاده کنید. درسته که ممکنه اشتباهاتی در رابط کاربر این برنامه‌ها وجود داشته باشه٬ ولی در نظر بگیرید که میلیونها نفر دارند از این برنامه‌ها استفاده می‌کنند و به رابط کاربر آنها عادت کردند. جدا از اینکه این شرکتها کلی پول و وقت بابت طراحی رابط کاربر برنامه‌هاشون می‌گذارند و من و شما توان انجام اون رو نداریم.
دستیابی پذیری
همه کاربران نمی‌تونند از موش (Mouse) استفاده کنند. حالا می‌تونه دلیلش این باشه که کاربر کامپیوتر کیفی داره و به جای موش از Trackball یا Trackpad یا اون چیز کوچیکی که نمی‌دونم اسمش چیه و وسط صفحه کلید قرار داره استفاده می‌کنه٬ یا اینکه از آرتروز مچ رنج می‌بره یا اینکه دستش لرزش داره یا خلاصه هر ناتوانی دیگه. در هر صورت کاربر یا اصلا نمی‌تونه از موش استفاده کنه یا اینکه دقت لازم برای کنترل اون رو نداره.

محدوده‌ای رو که کاربر روی اون می‌تونه با موش عمل کنه کوچیک انتخاب نکنید.
اینجوری حتی کسانی که یک موش خراب و بدون دقت دارند یا از ابزارهای کم دقت دیگه به جای موش استفاده می‌کنند٬ میتونند از قابلیت برنامه شما بهره ببرند.

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

اقلامی که در عملکرد مشابه هستند باید یکسان دیده شوند.
مفاهیم مشابه با ظاهری متفاوت حاصلی جز گیج کردن کاربر ندارد. به عنوان نمونه اگر در تمام پنجره‌ها کلیدهای تایید و انصراف وجود داره٬ اندازه و محل قرار گیری آنها بر روی هر پنجره باید مشابه پنجره دیگه باشه. علاوه بر این باید عناوین هم مشابه باشه٬ نه اینکه یکجا از عناین "قبول" و "لغو" استفاده کنیم و در جای دیگه از "تایید" و "انصراف".

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

برای اقلامی که درون یک ظرف (Container) قرار می‌گیرند٬ با دیواره‌ی ظرف حاشیه‌ای مناسب در نظر بگیرد.
این حاشیه باعث خواناتر شدن اقلام و همچنین زیباتر شدن محتوی می‌شود.

قلم نمایش را مناسب و یکسان انتخاب کنید.
مشکلات بینایی برخی کاربران ایجاب می‌کند که قلم نمایش (Font) را تا حد معقول بزرگ و خوانا انتخاب کنید. همچنین سعی کنید انتخاب خود را در همه جا یکسان نگهدارید. استفاده از قلمهای متفاوت برای یک منظور مثل این است که نامه‌ای را با ترکیبی از مداد٬ خودکار٬ خودنویس و ماژیک بنویسید.

[m_vb66]

همه چی گفته شد فقط به نظر من اگه فرم اول برنامتون خیلی گرافیکی باشه بیننده رو همون اول غافلگیر میکنه و جذب برنامه میشه

[eligod]

نمی دونم تو این سایت بود یا یک سایت دیگه دیدم که دوستان چند تا عکس به عنوان نمونه از برخی از فرم ها گرفته بودند و در اتیار بقیه قرار داده بودند

[Di Di]

اين يه پليت فرم معمولي من تو برنامه هاي اتوماسيون اداري هست. اميدوارم كمك كنه

   

   

   

[mojtabamalaekeh]

من کلی سؤال دارم:
وقتی تعداد فیلدها زیاد باشه و حق نداشته باشیم تعداد اون ها رو کم و زیاد کنیم و مانیتور طرف 15 اینچ باشه چیکار باید کرد؟
فونت Tahoma چشمش رو اذیت می کنه و اگه بخوایم از فونت هایی مثل Titr و Nazanin استفاده کنیم ارتفاع جعبه متن ها زیاد میشه.
من یه کاری با جعبه متن ها کردم ولی وقتی از فونت های مذکور استفاده بشه Label ها حسابی فرم رو شلوغ می کنن. با توجه به کوچیک بودن مانیتور نمیشه بین فیلدها فاصله انداخت.
اینجاست که باید ابتکار به خرج داد (مثل درخواست استعفای علی ک....)
مثلا فایل ضمیمه ای که گذاشتم شامل تمام مشکلاتیه که بالا مطرح کردم. کسی میتونه کمکم کنه؟

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

این مورد هم خیلی مهمه ها.
راستی، بهتر نیست بجای License's Argument از اصطلاح License's Agreement استفاده بشه؟

[hamed_Arfaee]

من کلی سؤال دارم:
وقتی تعداد فیلدها زیاد باشه و حق نداشته باشیم تعداد اون ها رو کم و زیاد کنیم و مانیتور طرف 15 اینچ باشه چیکار باید کرد؟
فونت Tahoma چشمش رو اذیت می کنه و اگه بخوایم از فونت هایی مثل Titr و Nazanin استفاده کنیم ارتفاع جعبه متن ها زیاد میشه.
من یه کاری با جعبه متن ها کردم ولی وقتی از فونت های مذکور استفاده بشه Label ها حسابی فرم رو شلوغ می کنن. با توجه به کوچیک بودن مانیتور نمیشه بین فیلدها فاصله انداخت.
اینجاست که باید ابتکار به خرج داد (مثل درخواست استعفای علی ک....)
مثلا فایل ضمیمه ای که گذاشتم شامل تمام مشکلاتیه که بالا مطرح کردم. کسی میتونه کمکم کنه؟

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

و دیگه اینکه با بولد کردن بعضی فونتها میشه بدون هدر دادن فضا نوشته ها رو مشخص تر کرد .

فونتهای بزرگتر و نوشته ای بزرگ برای فرمهایی خوبه که چند تا کنترل دارن نه اینکه چند ده تا .

وقتی صاحب سافت درخواستش زیاده باید سخت افزارش رو هم بالاببره تا همون برنامه مطلوب نتیجه بشه .

میشه با توجه به برنامه های بزرگ که الان چندین سال هست دارن استفاده میشن به این حرفها رسید ولی اگه صاحب سافت چیز غیر از این میخواد باید یک تغییراتی تو سخت افزارش بده که بشه براش یه چیز دیگه ساخت .
------>
اینهم یک نمونه از برنامه مکانیزه سازی که دو سال پیش نوشتم

رنگ محیطش اول خوب بنظر میاد ولی بعد از مدتی خسته کننده میشه برا همین امکان تغییر رنگ گذاشتم براش ولی مشتری قبول نکرد و به همین بسنده کرد .

   

[mojtabamalaekeh]

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

یه سؤال راجع به ظاهر برنامه:
فرض کنید من نخوام از تمXP استفاده کنم.
توی VB وقتی جعبه متنی خاصیت BorderStyle=1 و Appearance=0 باشه جعبه متن از حالت مقعر به حالت تخت در میاد ولی قاب دورش سیاه رنگه.
یوزرکنترل جعبه متن هست که بشه رنگ اون قاب دورش رو تعیین کرد؟ OCX نمیخوام.