طراحی رابط کاربری - UserInterface

[کامبیز اسدزاده]

سلام طرح دوم رو بیشتر میپسندم...
رنگهای شاد داره

با اجازتون طرح اول رو کمی فتوشاپ کردم:
ضمیمه 135780

فکر کنم متوجه نکته ای که اشاره کردین شدم ، کم رنگ بودن فونت ها درسته !؟
این تصویر رو بررسی کنید ، چون در اصل کمرنگ نیست کیفیت تصویر بعد از بارگذاری به شدت افت میکنه برا همینه فکر کنم.
لطفا تصویر رو در یک تب جدید باز کنید و در حالت 100% زوم مشاهده کنید با این آدرس : http://s3.picofile.com/file/8215806884/UI.png خاطر کدر بودن تصویر تو عکس به شکل قابل توجهی جذابیتش رو از دست میده.

UI.png

[golbafan]

سلام
آره خیلی بهتر شد. پر رنگ شدنش باعث میشه خودشو بِکَنه و به چشم بیاد

[golbafan]

سلام لطفا درمورد طرح زیر نظرات و همچنین راهنمایی های لازم رو بفرمایید

0.jpg

1.jpg

3.jpg

2.jpg

[کامبیز اسدزاده]

سلام
آره خیلی بهتر شد. پر رنگ شدنش باعث میشه خودشو بِکَنه و به چشم بیاد

البته به تصویری که شما روش تغییراتی دادین هم الان دقت کردم متوجه شدم ، قسمت آپلود تصاویر آیکون افزودن اضافه شده و جای کومبو باکس رفته بالا و یک سری تغییرات دیگه که بهتره !
ولی با علامته افزوده شدن در داخل تکس باکس موافق نیستم مگر نمیگم به شکل زیر تغییر پیدا کنه:

PlusPhone.jpg

[کامبیز اسدزاده]

سلام لطفا درمورد طرح زیر نظرات و همچنین راهنمایی های لازم رو بفرمایید

0.jpg
1.jpg
3.jpg
2.jpg

طرح جالبی هستش ولی یک مشکل اساسی داره که برنامه رو غیر استاندارد کرده ، اونم چپ به راست بودنشه به نظرم راست به چپ باشه استاندارد و قابل توجه تر خواهد بود.

[golbafan]

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

PlusPhone.jpg

آره خب!
این مورد رو صرفا جهت تراز شدن کنترل ها انجام دادم وگر نه بیرون باشه که خیلی قشنگ تره

[golbafan]

طرح جالبی هستش ولی یک مشکل اساسی داره که برنامه رو غیر استاندارد کرده ، اونم چپ به راست بودنشه به نظرم راست به چپ باشه استاندارد و قابل توجه تر خواهد بود.

درسته. نظر من هم همینه
البته خیلی وقت ها دیتابیس های کاربران فارسی نیست!
بهر حال باید یک سیستم تغییر زبان کاربری روش پیاده بشه که وقتی مثلا فارسی یا عربی رو انتخاب کرد برنامه راست چین بشه:
در دلفی کافیه خاصیت bidimode فرم رو راست چین کنید تا کلیه کامپوننت های داخل فرم هم راست چین بشه!

7.jpg

[کامبیز اسدزاده]

درسته. نظر من هم همینه
البته خیلی وقت ها دیتابیس های کاربران فارسی نیست!

اصلا نباید به این فکر کنید که دیتا فارسی هست یا نه ! کافیه یک بخش رو در نظر بگیری برای تنظیمات زبان ، در نرم افزار باید این امکان باشه که کاربر بر اساس زبان یا نحوه نمایش با برنامه روبه رو بشه یکی از مهمترین مباحثی که در طراحی وجود داره رعایت و هماهنگ سازی بحث چند زبانه (چند ملیتی) بودن هستش این خودش اصل مهمی هست که نشون میده به کاربر توجه ویژه ای شده.

همانطور که خودتون اشاره کردید کافیه یه بخش در نظر بگیرید که کاربر خودش مشخص کنه که با چه زبان و با چه چیدمانی میخواد برنامش رو اجرا کنه.

[golbafan]

اصلا نباید به این فکر کنید که دیتا فارسی هست یا نه ! کافیه یک بخش رو در نظر بگیری برای تنظیمات زبان ، در نرم افزار باید این امکان باشه که کاربر بر اساس زبان یا نحوه نمایش با برنامه روبه رو بشه یکی از مهمترین مباحثی که در طراحی وجود داره رعایت و هماهنگ سازی بحث چند زبانه (چند ملیتی) بودن هستش این خودش اصل مهمی هست که نشون میده به کاربر توجه ویژه ای شده.

همانطور که خودتون اشاره کردید کافیه یه بخش در نظر بگیرید که کاربر خودش مشخص کنه که با چه زبان و با چه چیدمانی میخواد برنامش رو اجرا کنه.

مرسی دوست عزیز حتما اعمال خواهم کرد.

نرم افزاری که دیدید در واقع یک گزارش سازه که میتونه به mysql,sqlserver,oracle وصل بشه و از هر نوع دیتابیسی هر نوع گزارشی رو تولید کنه

[ghasem110deh]

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

خوشحال میشه نظر بدین و راهنمایی کنید :

[golbafan]

سلام! خوب هستید؟

در نگاه اول اینها به چشم میاد:
1- اینکه فرم ها روی هم باز میشن خیلی محیط رو شلوغ میکنه
2- استفاده از تصاویر و آیکون ها در جای نامناسب
3- وجود توضیحات زیاد و غیر ضروری در جای جای برنامه : مثلا در فرم لاگین همه میدونن باید نام کاربری و رمز عبور رو بزنن و سپس کلید ورود!
4- برای تعریف روند های برنامه که کاربر باید طی کنه میشه از حالت flowchart استفاده کرد

موفق باشید
میدونم اکثر این موارد رو برای بالابردن UX انجام دادید، اما برخی از کارها اشتباه هستند
مثلا خیلی از توضیحات میتونه در قالب hint باشن یا مثل حالتی که آقا کامبیز گفت (راهنمای اندروید)

[کامبیز اسدزاده]

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

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

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

[ghasem110deh]

ممنون :)

1- اینکه فرم ها روی هم باز میشن خیلی محیط رو شلوغ میکنه

فقط فرمهایی که جهت انتخاب یک مورد خاص هست (مثلا نوع انبار ، در تعریف انبار جدید) یه فرم دیگه باز میشه !
در غیر این حالت همه فرم ها showDialog هستن

2- استفاده از تصاویر و آیکون ها در جای نامناسب

حتی تو فرم اصلی ؟ چطور الاحش کنم ؟

3- وجود توضیحات زیاد و غیر ضروری در جای جای برنامه : مثلا در فرم لاگین همه میدونن باید نام کاربری و رمز عبور رو بزنن و سپس کلید ورود!

پیش خودم گفتم شاید بدرد بخوره

4- برای تعریف روند های برنامه که کاربر باید طی کنه میشه از حالت flowchart استفاده کرد

جدای راهنمای برنامه اضافه کنم یا توی راهنما کافیه ؟

------
یه سوال دیگه هم اینکه توی تصویر اول بخاطر تعداد فیلدهای متفاوت توی هر قسمت ، نمیشه اندازه فرم رو تغییر داد و قسمت زیادی خالی می مونه !
این موارد چجور رفع و رجوع کنم !؟

[golbafan]

ممنون :)
فقط فرمهایی که جهت انتخاب یک مورد خاص هست (مثلا نوع انبار ، در تعریف انبار جدید) یه فرم دیگه باز میشه !
در غیر این حالت همه فرم ها showDialog هستن

میتونه بصورت lookup combobox باشه

حتی تو فرم اصلی ؟ چطور الاحش کنم ؟

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

جدای راهنمای برنامه اضافه کنم یا توی راهنما کافیه ؟

نه منظورم اینه بجای اینکه بنویسید گام اول فلان گام دوم فلان، از فلوچارت استفاده بشه مثل microsoft accounting:
dddd.jpg

[کامبیز اسدزاده]

جدای راهنمای برنامه اضافه کنم یا توی راهنما کافیه ؟

راجب این مورد ایده های جالبی وجود داره ، اجازه بدین یک مثالی بزنم که احتمال قوی خیلی ها باهاش مواجه شده اند.
همین ویندوز 8 به بعد حتی ویندوز 10 رو همگی دیدید وقتی برای بار اول نصب میشه و میاد به مرحله Start میرسه ، اینجاست که با یک سری علامت ها و فلش ها به صورت چشمک زن داره کاربر رو متوجه تغییرات جدیدش میکنه که آقای کاربر برای دسترسی به من از این قسمت با این روش عمل کن ! بدون هیچ توضیح خاصی فقط و فقط با استفاده از تصویر و علامت خیلی عالی کاربر رو متوجه میکنه.

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

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

[golbafan]

مثال
microsoft_pro_ss1.gif

[winner1]

5.jpg3.jpg
2.png
دیزاین جدید کارم

[ghasem110deh]

قشنگ شده :)
اینقدر باش سر و کله زدی تا اون چیزی که میخواستین شده (کم و بیش)
---------------------
برنامه رو دو زبانه کردین ؟

[winner1]

قشنگ شده :)
اینقدر باش سر و کله زدی تا اون چیزی که میخواستین شده (کم و بیش)
---------------------
برنامه رو دو زبانه کردین ؟

5 زبانه شده بعدشم میخوام این دیزاین تست بشه

[juza66]

5.jpg3.jpg
2.png
دیزاین جدید کارم

بهتر شده نسبت به قبلی

ولی بنظرم از رنگ رنگی کردن فرم پرهیز کن و به استایلی دست بزن که زیاد چشم های کاربر درگیر این همه رنگ نکنه، قبلی خوب بود ولی سفید و خاکستریش چشم رو اذیت میکرد:


من با اجازه اساتید اومدم تویی محیط فلت ولی کار داره هنوز (نسخه نوبت دهی درمانگاهه)
Untitled.png

[winner1]

بهتر شده نسبت به قبلی

ولی بنظرم از رنگ رنگی کردن فرم پرهیز کن و به استایلی دست بزن که زیاد چشم های کاربر درگیر این همه رنگ نکنه، قبلی خوب بود ولی سفید و خاکستریش چشم رو اذیت میکرد:


من با اجازه اساتید اومدم تویی محیط فلت ولی کار داره هنوز (نسخه نوبت دهی درمانگاهه)
Untitled.png

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

[juza66]

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

من کارتون رو با اقای ghasem110deh اشتباه گرفتم، کار آقای ghasem110deh خیلی خوب شده

کار شما اون اولی رو چک کردم خوب بود ولی فونتش یکخورده حرفه ای بود، این نسخه از برنامه پیشرفت خوبی داشته وبسیار زیباست اگر رنگش رو کمی ملایم تر مثلاً همون ابی که در برنامه قبلی استفاده کردی خوبه..

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


کمی تویی کدنویسیم ضعیف هستم و به کمک چندتا دوستان و اساتید از همین سایت برنامه نویس و سایت video-learn.net دارم روش های حرفه ای و اصولی تر برنامه نویسی را یاد میگیرم. پیشنهاد میدم حتمن کدنویسی تون رو قوی کنید، تا وقتتون تلف نشه برای کدنویسی های پیچیده ....



موفق باشید/.

[winner1]

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

خوشحال میشه نظر بدین و راهنمایی کنید :

Flat ui رو خیلی دوست دارم افرین خیلی بهتر شد

[winner1]

من کارتون رو با اقای ghasem110deh اشتباه گرفتم، کار آقای ghasem110deh خیلی خوب شده

کار شما اون اولی رو چک کردم خوب بود ولی فونتش یکخورده حرفه ای بود، این نسخه از برنامه پیشرفت خوبی داشته وبسیار زیباست اگر رنگش رو کمی ملایم تر مثلاً همون ابی که در برنامه قبلی استفاده کردی خوبه..

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


کمی تویی کدنویسیم ضعیف هستم و به کمک چندتا دوستان و اساتید از همین سایت برنامه نویس و سایت video-learn.net دارم روش های حرفه ای و اصولی تر برنامه نویسی را یاد میگیرم. پیشنهاد میدم حتمن کدنویسی تون رو قوی کنید، تا وقتتون تلف نشه برای کدنویسی های پیچیده ....



موفق باشید/.

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

[کامبیز اسدزاده]

بچه ها نظرتون راجب تغییراتی کوچیکی که روی رنگ آمیزی این طرح دادم چیه ؟ الان کمی زنده تر نشد ؟ و اینکه حالت های Popup همراه با جلوه های بصری بهتر و جذاب تره.

G0.jpg

G2.jpg

G1.jpg

[golbafan]

بچه ها نظرتون راجب تغییراتی کوچیکی که روی رنگ آمیزی این طرح دادم چیه ؟ الان کمی زنده تر نشد ؟ و اینکه حالت های Popup همراه با جلوه های بصری بهتر و جذاب تره.

بله خیلی بهتر شده. مطلب رو درست گرفتید

[golbafan]

من با اجازه اساتید اومدم تویی محیط فلت ولی کار داره هنوز (نسخه نوبت دهی درمانگاهه)
Untitled.png

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

[golbafan]

2.png
دیزاین جدید کارم

سلام
طرح شما بهتر شده اما 2 نکته:

1- وقتی زبان رو انگلیسی میکنید برنامه رو چپ چین کنید
2- منوی بالا رنگ هاش با بفیه فرم تناسب نداره

[کامبیز اسدزاده]

بله خیلی بهتر شده. مطلب رو درست گرفتید

رنگ سبز و سبز ملایم براي محيط كار و زندگي بسيار مناسب است. و اثر مفرح و ملايمي دارد كه تماس مداوم با آن اشكالي ايجاد نمي‌كند.
استفاده از علم روان شناسی در رابطه با تاثیرات رنگ خیلی مهمه ، با تغییر فقط رنگ طراحی متفاوت از آب در میاد و بازخوردش بهتره.

[winner1]

سلام
طرح شما بهتر شده اما 2 نکته:

1- وقتی زبان رو انگلیسی میکنید برنامه رو چپ چین کنید
2- منوی بالا رنگ هاش با بفیه فرم تناسب نداره

پیشنهادتون برای منو چیه؟

[winner1]

بچه ها نظرتون راجب تغییراتی کوچیکی که روی رنگ آمیزی این طرح دادم چیه ؟ الان کمی زنده تر نشد ؟ و اینکه حالت های Popup همراه با جلوه های بصری بهتر و جذاب تره.

G0.jpg

G2.jpg

G1.jpg

کار خوبی شده

[golbafan]

پیشنهادتون برای منو چیه؟

دکمه های منو رنگ زمینه دارن که برای حالت tile طراحی شدن. اگر میخواهید ازشون استفاده کنید رنگ زمینه همه رو حذف کنید و بجاش اون رنگ ها رو در خود آیکون بزارید:


مثال:
index.png

تبدیل شود به:
index2.png

[ghasem110deh]

دکمه های منو رنگ زمینه دارن که برای حالت tile طراحی شدن. اگر میخواهید ازشون استفاده کنید رنگ زمینه همه رو حذف کنید و بجاش اون رنگ ها رو در خود آیکون بزارید:


مثال:
index.png

تبدیل شود به:
index2.png

جسارت نباشه ... منم با این مورد آقای گلبافان موافقم !
بنظرم واسه منو آیکونی که پس زمینه ش رنگی باشه مناسب نیست (البته نظر خودمه)
یه تست بزنید ببینید چطور میشه :)

[Mori Bone]

ضمیمه 135783

ضمیمه 135782

این نمونه رنگ ها رو در اختیار داشته باشید کد ها و رنگ ها توسط گوگل مورد استفاده قرار میگیره که طبق گفته خودشون از همین کد و رنگ بندی ها در Android 5 استفاده کرده اند، فایل swatch رو برای فوتوشاپ اینجا قرار میدم.

سلام استاد. اگه لطف کنید عکس کامل رنگ ها(اولیه ) رو ی جا آپلود کنید استفاده کنیم، خیلی ممنون میشم.

[کامبیز اسدزاده]

سلام استاد. اگه لطف کنید عکس کامل رنگ ها(اولیه ) رو ی جا آپلود کنید استفاده کنیم، خیلی ممنون میشم.

سلام

لینک رسمیش این هستش : https://www.google.com/design/spec/style/color.html
ولی چون برای ایرانی ها در دسترس نیست من محتوای مربوط به بخش استایل رو در قالب HTML جدا کردم میتونید دانلودش کنید.

[کامبیز اسدزاده]

نظرتون راجب این طرح چیه ؟ بهتره برای باز و بسته کردن یا حالت Disable و Enable کردن مثلا یک GroupBox با یک روش ساده تری اینکار رو انجام بدیم برای مثال استفاده از یک تصویر بصری باز و بسته شدن قفل !

db1.jpgdb0.jpg

[golbafan]

خدا رو شکر میبینم که یکی پیدا شد که بیشتر از همه به MySQL علاقه داره!!! داشتم یواش یواش احساس تنهایی میکردم

نظرتون راجب این طرح چیه ؟ بهتره برای باز و بسته کردن یا حالت Disable و Enable کردن مثلا یک GroupBox با یک روش ساده تری اینکار رو انجام بدیم برای مثال استفاده از یک تصویر بصری باز و بسته شدن قفل !

در مورد طرحتون باید بگم زیباست... هرچه نوشته ها به علامت های بصری تبدیل بشن، بیشتر کاربر پسند(user frendly) میشه
همچنین از اینکه آیکون های خاکستری رو به حالت رنگی در آوردید خیلی خوشم اومد

[golbafan]

دانلود آیکون های گوگل و همچنین آموزش طراحی توسط گوگل:

https://www.google.com/design/icons/

[کامبیز اسدزاده]

خدا رو شکر میبینم که یکی پیدا شد که بیشتر از همه به MySQL علاقه داره!!! داشتم یواش یواش احساس تنهایی میکردم

خوشم اومد سریع رو هوا زدی که MySQL هست

[کامبیز اسدزاده]

راستی برای اینکه از تصاویر و آیکون های با کیفیت استفاده کنید من این سایت رو پیشنهاد میکنم : http://www.flaticon.com
و مخصوصا استفاده از فرمت BASE 64.