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

[golbafan]

یک نمونه بسیار بد UX که نشون میده کمپانی های بزرگ هم گاهی اشتباه میکنن:
10yearschallenge-ia-100-99-2009-2019-haha-so-funny-40264725.jpg

اشکال:
متن نوشتار بسیار طولانی است
با اینکه مربوط به هشدار در هنگام رانندگی است تا کاربر از مانیتور استفاده نکنه
اما خود خوندن این متن بسیار زمانبر و خطرناک هست

[golbafan]

یک نمونه بسیار بد UX که نشون میده کمپانی های بزرگ هم گاهی اشتباه میکنن:
sdfsf.jpg

[darna_computer]

سلام دوستان. مطالب بسیار جالبی در مورد طراحی UI نوشتید.
میخواستم نظرتون رو در مورد طراحی این فرم ها هم بدونم
33.jpg11.jpg
اصل برنامه ای که برای مشتری نوشتم توی این لینک هست. ممنون میشم بگیرید و نظر تخصصی تون رو برام بنویسید.
مرسی از همه.

[vB.N3T]

سلام دوستان. مطالب بسیار جالبی در مورد طراحی UI نوشتید.
میخواستم نظرتون رو در مورد طراحی این فرم ها هم بدونم
33.jpg11.jpg
اصل برنامه ای که برای مشتری نوشتم توی این لینک هست. ممنون میشم بگیرید و نظر تخصصی تون رو برام بنویسید.
مرسی از همه.

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

[SOU KA]

11.png


ممنون میشوم اگر نظر هایتان را درباره طراحی برنامه و رنگ و ... بفرمایید /

[رامین مرادی]

11.png


ممنون میشوم اگر نظر هایتان را درباره طراحی برنامه و رنگ و ... بفرمایید /

به نظرم ساده و بدون هیچ شلوغی...(باب سلیقه خودم)
از فرمهای داخلیتونم کاش عکس میزاشتید.

[vbhamed]

11.png


ممنون میشوم اگر نظر هایتان را درباره طراحی برنامه و رنگ و ... بفرمایید /

به نظرم رنگ بندی کمی دلسرد کننده است یعنی آدم جذب برنامه نمیشه
روی فونتها هم کار کنید

[barnamenevisjavan]

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


اینم یه کلیپ دمو از نحوه کارکردش
آپارت

[golbafan]

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


اینم یه کلیپ دمو از نحوه کارکردش
آپارت

خوشمان آمد :))

[mp2009]

دوستان خوشحال میشم نظرتون رو در مورد این رابط کاربری بگید.
ممنونم

Nopardaz_tech_Screenshot.jpg

[vbhamed]

دوستان خوشحال میشم نظرتون رو در مورد این رابط کاربری بگید.
ممنونم

Nopardaz_tech_Screenshot.jpg

کاملا معمولی ولی کمی متمایل به خوب
رنگهاش به نظرم خسته کننده است

[Mahmoud Zaad]

دوستان خوشحال میشم نظرتون رو در مورد این رابط کاربری بگید.
ممنونم

Nopardaz_tech_Screenshot.jpg

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

[mp2009]

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

[mp2009]

با سلام خدمت همه دوستان و کاربران عزیز این سایت
اینم چند عکس از فرم ها و UI نرم افزار فروش من
خوشحال میشم اشکالات و نظرتون رو در موردش بگید که اصلاح کنم.
بازم ممنون بابت اون عزیزانی که ایرادات قبلی رو گفتند و اصلاح شد.
Capture1.jpgCapture2.jpgCapture3.jpgCapture4.jpg

[vbhamed]

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

[رامین مرادی]

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

تب هارو با چی پیاده سازی کردید؟
فرمهارو توش لود میکنید؟

[mp2009]

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

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

[mp2009]

تب هارو با چی پیاده سازی کردید؟
فرمهارو توش لود میکنید؟

با تب کنترل
فرم ها به صورت داینامیک لود میشن توش
با کد زیر

   public void MyAddTab(XtraTabControl mainTabControl, string tabNameAdd, Form myform)

        {

            IsMdiContainer = true;

            myform.MdiParent = this;

            bool found = false;

            XtraTabPage selectedPage = null;

            foreach (XtraTabPage page in mainTabControl.TabPages)

            {

                if (page.Tag != null && page.Text == tabNameAdd)

                {

                    found = true;

                    selectedPage = page;

                    break;

                }

            }

            if (!found)

            {

                selectedPage = new XtraTabPage

                {

                    Dock = DockStyle.Fill,

                    BorderStyle = BorderStyle.None,

                    Text = tabNameAdd,

                    Tag = tabNameAdd

                };

                myform.Parent = selectedPage;

                selectedPage.Controls.Add(myform);

                selectedPage.ShowCloseButton = DevExpress.Utils.DefaultBoolean.True;

                mainTabControl.TabPages.Add(selectedPage);

                myform.Show();

            }

            selectedPage.BringToFront();

            mainTabControl.SelectedTabPage = selectedPage;





        }

[sg.programmer]

با سلام خدمت همه دوستان و کاربران عزیز این سایت
اینم چند عکس از فرم ها و UI نرم افزار فروش من
خوشحال میشم اشکالات و نظرتون رو در موردش بگید که اصلاح کنم.
بازم ممنون بابت اون عزیزانی که ایرادات قبلی رو گفتند و اصلاح شد.
Capture1.jpgCapture2.jpgCapture3.jpgCapture4.jpg

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

[vbhamed]

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

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

[رامین مرادی]

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

ممنون میشم چندتا از سایتها رو معرفی کنید. تشکر.

[mp2009]

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

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

[mp2009]

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

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

[vbhamed]

ممنون میشم چندتا از سایتها رو معرفی کنید. تشکر.

https://dribbble.com
https://www.creative-tim.com/

[ebrahim.rayatparvar]

با تب کنترل
فرم ها به صورت داینامیک لود میشن توش
با کد زیر

   public void MyAddTab(XtraTabControl mainTabControl, string tabNameAdd, Form myform)

        {

            IsMdiContainer = true;

            myform.MdiParent = this;

            bool found = false;

            XtraTabPage selectedPage = null;

            foreach (XtraTabPage page in mainTabControl.TabPages)

            {

                if (page.Tag != null && page.Text == tabNameAdd)

                {

                    found = true;

                    selectedPage = page;

                    break;

                }

            }

            if (!found)

            {

                selectedPage = new XtraTabPage

                {

                    Dock = DockStyle.Fill,

                    BorderStyle = BorderStyle.None,

                    Text = tabNameAdd,

                    Tag = tabNameAdd

                };

                myform.Parent = selectedPage;

                selectedPage.Controls.Add(myform);

                selectedPage.ShowCloseButton = DevExpress.Utils.DefaultBoolean.True;

                mainTabControl.TabPages.Add(selectedPage);

                myform.Show();

            }

            selectedPage.BringToFront();

            mainTabControl.SelectedTabPage = selectedPage;





        }

سلام مهندس جان برنامه خوبی طراحی کردین کلا برنامه هایی که با devexpress طراحی میشن رو میپسندم چون خودم چندین ساله دارم باهاش کار میکنم فقط یه نکته در این مورد کدت بگم که خود منم اوایل چنین اشتباهی رو کردم و فرم های خودم رو تو xtratabControl پیاده میکردم ولی از اونجایی که همیشه تو سمپلش میچرخیدم دیدم یه جای کار میلنگه باید کنترل دیگه ای باشه که با امکانات بهتر لود بهتر و به خصوص کد نوشتن کمتر این رو پیاده کرد که دیدم بله کنترل دیگه ای هست برای این کار به اسم Document Manager که کنترل خیلی قدرتمنی هست و تبهایی مثل خود vs رو بهت میده با همین امکانات البته این رو به عنوان یه نظر دادم

[user18]

با سلام یه برنامه نوشتم یه بخش هاییشو میزارم خوشحال میشم ایراداش رو بیان کنید و یه قیمت هم بدین ممنون
Capture13.PNGCapture14.jpgCapture15.PNG Capture11.PNGCapture12.PNG

[user18]

ادامه فرم ها
Capture17.PNGCapture18.PNGCapture20.PNG

[vbhamed]

هنوز نیاز به پختگی داره ولی راه رو درست میری

[336699]

هنوز نیاز به پختگی داره ولی راه رو درست میری

کل اگر طبیب بودی سر خود دوا نمودی

[barnamenevisjavan]

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

[vbhamed]

کل اگر طبیب بودی سر خود دوا نمودی

اول اینکه چیزی که سالها قبل طراحی شده و با متد اونموقع رو چرا آوردید الان دارید مقایسه می‌کنید، هر چند از دید کاربران بسیار هنوز هم همین طراحی بسیار براشون مناسبه

دوم اینکه رعایت ادب نشانه شخصیت آدمی است

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

[vbhamed]

کل اگر طبیب بودی سر خود دوا نمودی

اول اینکه چیزی که سالها قبل طراحی شده و با متد اونموقع رو چرا آوردید الان دارید مقایسه می‌کنید، هر چند از دید کاربران بسیار هنوز هم همین طراحی بسیار براشون مناسبه

دوم اینکه یک نفر سوالی پرسیده و من هم جوابش رو دادم و یادم نمیاد از شما نظرخواهی کرده باشیم

سوم اینکه رعایت ادب نشانه شخصیت آدمی است

چهارم اینکه حالا که پریدید وسط بحث و نظر نپرسیده دادید خوشحال میشیم نمونه کارهای شما رو ببینیم !

[Hossein1376a]

من میخوام رابط کاربریم مثل ویژوال استدیو باشه کامپونتتی چیزی هست معرفی کنید؟
مثل این نرم افزار:
http://www.itbita.com/Content/style/...hot1-large.jpg

[barnamenevisjavan]

من میخوام رابط کاربریم مثل ویژوال استدیو باشه کامپونتتی چیزی هست معرفی کنید؟
مثل این نرم افزار:
http://www.itbita.com/Content/style/...hot1-large.jpg

AvalonDock

[رامین مرادی]

اول اینکه چیزی که سالها قبل طراحی شده و با متد اونموقع رو چرا آوردید الان دارید مقایسه می‌کنید، هر چند از دید کاربران بسیار هنوز هم همین طراحی بسیار براشون مناسبه

دوم اینکه یک نفر سوالی پرسیده و من هم جوابش رو دادم و یادم نمیاد از شما نظرخواهی کرده باشیم

سوم اینکه رعایت ادب نشانه شخصیت آدمی است

چهارم اینکه حالا که پریدید وسط بحث و نظر نپرسیده دادید خوشحال میشیم نمونه کارهای شما رو ببینیم !

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

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

[farhad_shiri_ex]

با سلام یه برنامه نوشتم یه بخش هاییشو میزارم خوشحال میشم ایراداش رو بیان کنید و یه قیمت هم بدین ممنون
Capture13.PNGCapture14.jpgCapture15.PNG Capture11.PNGCapture12.PNG

در کل ایده طراحی flat که انجام دادید خیلی زیباست!! و البته از اونجایی که دارید تو ویندوز 7 برنامه نویسی میکنید قطعا از کامپوننتهای windows universal که از ویندوز های 8 به بعد به دات نت اضافه شده استفاده نکردید به همین علت مراقب استفاده از المانهای گرافیکی در بازدهی برنامه تون هم باشید.
وچند نکته در طراحی لایه کاربری ...
1- رعایت راست به چپ ها در کادرهای ورود اطلاعات و تمامی المانهای گرافیکی
2- سعی کنید تمام المانهای گرافیکی در یک راستا و المانهای به هم مرتبط به یک اندازه باشند.
3- متحد شکل بودن کمبو باکس ها
4- استفاده از جداکننده ها در نمایش اعداد محاسباتی
5- استفاده از hint ها در داخل المانها مختص به سیستم عاملهای موبایل می باشد اونهم به علت کمبود فضا کاری ولی در فرمهای ویندوز بهتره که عنوان المان خارج از خود المان قرار داشته باشه.!
6- رنگ نارنجی بسیار خسته کننده و باعث گمراه شدن کاربر خواهد شد
7- استفاده از رنگ متضاد بنفش در رنگ سفید خوبه ولی در طولانی مدت اصلا خوب نیست سعی کنید از استاندارد های سیستم عامل خیلی دور نشید! همیشه این مطلب مهمتر هست که راحتی کاربر در هنگام استفاده از نرم افزار شما، به استفاده از قالب های گرافیکی عجیب و با رنگهای تند که شاید برنامه نویس تصور میکنه با این کار نرم افزار خیلی زیباتر خواهد شد! ولی دقیقا برعکس هست چند درصد از کسانی که از سیستم عامل ویندوز استفاده میکنند ساختار اصلی رنگهای ویندوز را تغییر میدهند شاید کمتر از 10 درصد بنابراین همیشه حفظ استاندارد های تایید شده و پذیرفته شده سیستم عاملی که دارید براش برنامه نویسی میکنید را در نظر بگیرید!
8- اندازه فونتها کلا باهم تفاوت دارند!
9- نمایش تمامی امکانات یک فرم در یک صفحه دلیل خاصی داشته ! مثلا فرم مرخصی اگر قراره جستجو کنه پس اون لیست سمت چپ برای چی هست؟؟
یا مثلا فرم رده خدمتی به هیچ وجه نمیشه در اولین مشاهده متوجه شد که این فرم یک فرم ورود اطلاعات هست!! اصلا چه نیازی هست که فرم ورود اطلاعات لیست را هم نمایش بده! حتما هم نباید از تمام فضای فرم استفاده کرد فرمها هر چقدر که خلاصه و مفید طراحی شوند خیلی کارایی بیشتری خواهند داشت.

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

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

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

[golbafan]

دارم یه دانلود منیجر مینویسم
الان فقط UI اش مونده...
Untitled.jpg

[golbafan]

دارم یه دانلود منیجر مینویسم
الان فقط UI اش مونده...
Untitled.jpg

برای همیشه رایگان هست با امکانات بیشتر از IDM

[barnamenevisjavan]

برای همیشه رایگان هست با امکانات بیشتر از IDM

اگر متن باز باشه شاید تونستم مشارکت کنم توش

[golbafan]

اگر متن باز باشه شاید تونستم مشارکت کنم توش

یا چه زبونی بلدی کار کنی؟