مقاله آموزشی UI / UX ( در حال آپدیت هر روز یک قطعه اضافه میکنم )
سلام دوستان بنده ی مدت پیرامون این موضوع یکسری سرچ هایی زدم خواستم ی خلاصه از مطالبی که یاد گرفتم رو باهاتون به اشتراک بزارم
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
تفکر طراحی (Design Thinking) چیست و به چه کاری می‌آید؟ به زبان ساده، تفکر طراحی عبارت است از فرآیند ایجاد ایده‌های جدید و نوآورانه برای حل یک مسئلهٔ خاص در تفکر طراحی، به منظور ارائهٔ خدمات یا محصولاتی که با اقبال عمومی مواجه شوند، مدیران کسب‌وکارهای مختلف تمام تمرکز خود را بر End User به منظور حل یک مسئلهٔ پیچیده می‌گذارند؛
تفکر طراحی از چه اجزائی تشکیل شده است؟
- بررسی نیازهای بالقوهٔ مشتریان
- تعریف مسئله
در دو مرحله بالایی پایه و اساس تفکر طراحی را تشکیل میدهند. در این مراحل، مطالعات قوم‌شناسی و مردم‌شناسی (خصوصیات دموگرافیک) صورت گرفته و جامعۀ هدف، خصوصیات و نیازهای آن به طور دقیق مورد شناسایی قرار میگیرد. در حقیقت در پایان این مرحله خواهیم دانست که قرار است برای چه افرادی -و با چه خصوصیاتی- خدمات یا محصولاتی را روانهٔ بازار کنیم.
- ایده‌پردازی : هدف اصلی ارائۀ تعداد زیادی ایدۀ مختلف است که بیانگر روش‌های احتمالی حل مسئله هستند. در این مرحله میتوان از تکنیک‌های رسم طرح (Sketching)، طوفان فکری (Brainstorming) و رسم نقشهٔ ذهنی (Mind Mapping) استفاده نمود.
- پروتوتایپ سازی (مدل‌سازی)
- تست محصول نهایی
دو مرحله قبلی آخرین و مهم‌ترین مراحل مرتبط با تفکر طراحی، مدل‌سازی و اجرای آزمایشی ایده است. در این مرحله، ایده‌های ارائه شده در مرحلۀ قبل به نحو ملموس و قابل‌اجرا درآمده و به دفعات مختلف مورد آزمایش و رفع اشکال قرار می‌گیرند. تکنیک مدل‌سازی (پروتوتایپینگ) کمک میکند تا ایدۀ اولیه به مرحلۀ پیشرفته‌تری وارد شده و عملی بودن یا نبودن آن مشخص شود؛ در واقع، در مدل‌سازی باید تمام شرایط اجرای ایده مطابق با شرایطی باشد که نمونۀ نهایی در آن اجرا خواهد شد. هدف اصلی این مرحله این است که ایدۀ اولیه پس از هر بار اجرا کامل‌تر شده و در نهایت به سطحی برسد که بتوان آن را به عنوان راه‌حل مسئلۀ طرح شده در مراحل قبل در نظر گرفت که در نهایت منجر بدین خواهد شد که یکی از نیازهای اساسی کاربران نهایی مرتفع شده و منجر به خوشحالی ایشان گردد.
تحقیق درباره کاربر یا همان user research چیست؟ تحقیق درباره کاربر یا همان user research یکی از مراحل ux دیزاین است که مرحله بسیار بسیار مهم و به نوعی میتوان گفت یکی از نقاط اصلی دیزاین است شما باید تحقیق کنید باید سوالات و مشکلات را حل کنید با این تحقیقات و باید اطلاعات بدست آمده از تحقیقاتتان را آنالیز کنید تا بتوانید یک سری اطلاعات مفید و خوب برای ادامه کار پیدا کنید , و یا اصلا کاربرانتان را بشناسید .
اجزا یا انواع user research
interview - 1 مصاحبه گرفتن از کاربران برای بهتر شماختن مشکلات و نیاز هایشان
2- Contextual Inquiry یک نوع مصاحبه است که شما با پرسیدن سوالاتی استاندارد و از قبل تهیه شده در محیط کاری کابرانتان در محیط خودشان از آنها میپرسید و مصاحبه میکنید و به اینصورت اطلاعات خیلی واقعی تری بدست میآورید تا اینکه آنها را به لابراتور دعوت کنید و از آنها مصاحبه بگیرید .
3- Card Sorting یکی از متد های تحقیق است که شما میتوانید با استفاده از کارد هایی که بر روی آنها یک سری اطلاعاتی درمورد وبسایت و یا سرویس شما هست بنویسید و به کاربرانتان بدهید تا این کارد هارا مرتب کنند و در دسته های مرتبط بگذارند و اطلاعاتی که میخواهید را بدست آورید و این متد برای اطلاعات پایه ای خیلی خیلی کاربرد دارد.
4-surveys and questionnaires به صورت معمول عدم ارتباط محاصبه کننده و یوزر هست که حتما هم نباید به این شکل باشد . و این متد برای این است که کاربر با اپ اینتراکت کند و آن اینتراکت ضبط شود و معمولا برای بهتر بودن این روند به صورت ریموت انجام میشود. به نوعی کشف اینتر اکشن های یوزر است .
5- analytics آنالیز برخی از اطلاعات کمیتی از وبسایت از قیبل ترافیک وبسایت سرعت وبسایت و… و تمامی این اطلاعات را میتوانید از این ابزار فوقالعاده Google analytics بگیرید . ما برای آنالیز های وب سایت امون می توانیم از ابزار هایی که یکسری وب سایت دیگه هم به ما می دهند بیایم و استفاده بکنیم یک نمونه وب سایت https://www.hotjar.com که میاد و بیشترین تعداد کلیک در وب سایت مارو مشخص می کنه برامون
6- A/B testing یا (bucket tests یا split-run testing) : با این نام ها نیز صدا میشود . نوعی آزمایش هست که شما راه های a و راه های b را تست میکنید و میبینید که کدامیک تاثیر گذار تر است . (دیزاین ها و یا وایرفریم های مختلف میتوانند در نقش a/b باشند و هر کدام را تست کنید و ببینید که کدامیک جواب بهترین به شما میدهند و تا ثیر گذار تر اند).
(به عنوان مثال شما میتوانید بر روی هرچیزی تست کنید : شروع لایسنس رایگان یا شروع لایسنس ۳۰ روزه رایگان یا هرچیزی شما میتوانید بر روی هر کیسی (case) چند آپشن و گزینه دارید این متد را بکار بگیرید و تاثیر گذار ترین و بهترین را انتخاب کنید .)
نکته : برای مطالعه بهتر در طراحی UX Case study در Medium البته نه همشون بعضی هاشون خیلی به درد بخور هستش
وایرفریم یک طرح خیلی کلی از چیزی هستش که میخیم بیایم و پیاده سازیش بکنیم
مهترین اصول برای طراحی های UX
1 - Balance : این اصل به ما می پوید که در یک صفحه محتوا های ما باید مثل تقارن دو طرف اشون باهم در یک رنج و اندازه باشند مثلا اگر در سمت راست محتوا مون میخاهیم یک عکس استفاده کنیم و در سمت چپ اون یک محتوای متنی اندازه اون ها و قرار گیری شون اصطلاحا با هم بالانس داشته باشند در لندینگ پیج ها بالانس بهتر می بینیم
2 - Rhythm : باید طوری استفاده بکنیم تا چشم ما چیز هایی که شبیه به هم هستند رو بیاد و در یک گروه قرار بده مثل گالری عکس هایی که در پروژه زده شد و گروه رو در یگ چیز در نظر میگیرد برای دسته بندی کردن هم خیلی میتونیم بیایم و استفاده کنیم از این موضوع
3 - contrast : درست کردن یک تضاد رنگی برای بهتر دیده شدن محتوامون
4 - Hierarchy : سلسله مراتب بصری برای معرفی کردن یک محصول
5- white Space : رعایت کردن فاصله ها در طراحی هامون
* فرانت دو تا بخش داره View و Login
تعریف UI : رابطی است که کاربر با آن تعامل دارد و سعی میکند از طریق آن به هدفش برسد و رابط کاربری توسط طراحی ساخته می شود رابط کاربری می تواند برای کاربر تنفر بر انگیز یا جذاب باشد
تعریف UX : تجربه کاربری همان تجربه و حالتی است که به کاربر پس از تعامل با یک interface دست می دهد و عواملی که بر آن موثر است کاربر و طراح هستش
قوانین UX و UI
--------------------------------------
1- FITTS LAW : برای طراحی قسمت های تعاملی یک صفحه گرافیکی به کار می رود هرچه اندازه یک المان در صفحه بزرگ تر شود زمان مورد نیاز برای کلیک بر روی آن المان کاهش می یابد و هرچه فاصله بین نقطه شروع کاربر و المان مورد نظر کاهش یابد این زمان کمتر می شود بنابراین طراح ها باید تلاش کنند تا المان های مرتبط باهم را در فاصله نزدیکی از یکدیگر قرار دهند همینطور باید اندازه المان های تعاملی در صفحه افزایش یابد تا از زمان پیدا کردن و کلیک بر روی آن ها کاسته شود
2- Similarity s LAW : قانون تریتب المان های مختلف که بیان دارد همواره المان های مرتبط و هم سایز اگر کنار هم باشند جلو و ترتیبی بهتر دارند
3- Miller s Law : قانون میلر آلمانی که یک روانشناس بود بیان دارد که همواره 7 عنصر می توانند در ذهن به یاد اورنده شوند از این قانون برای مقایسه بین دو چیز استفاده می شود تا کاربر آن هفت تفاوت هاشون را در ذهن به یاد آورند
4- Parkinson s Law : این قانون بیان دارد که همواره اگر برای انجام یک کار فرصت بیشتری به شخص بدهیم برا مثال فرصت انجام یک پروژه 10 روز باشد ما 9 روز اون رو الکی هدر می دهیم و روز اخر رو به پروژه اختصاص می دهیم ولی اگر مدت پروژه 8 ساعت باشد اون پروژه سریع انجام می دهیم
5- serial position : همیشه از بین چند گزینه یا مطلب یا .. اولین و اخرین در ذهن کاربر می ماند و مهترین ها باید در این دو جایگاه باشند
6- von Restorff Effect : همیشه در بین چند المان و شی مشابه و مثل هم المانی که تفاوتی با بقیه دارد نظر کاربر را جلب میکند
روانشناسی رنگ ها :
---------------------------
1- روانشناسی رنگ قرمز
رنگ قرمز به صورت ناخودآگاه باعث افزایش ضربان قلب و سریع‌تر شدن سرعت تنفس میشود. رنگ قرمز همراه با هیجان، عشق، انرژی و تحرک است. همچنین به طور بالقوه حاوی مضامینی منفی چون جنگ، خشونت، آتش، عصبانیت و خطر است.
چه زمانی از قرمز استفاده کنیم؟
از قرمز زمانی استفاده کنید که میخواهید در خصوص موضوعی جلب توجه کنید یا ایجاد هیجان نمایید. قرمز برای غذا، مد و فشن، سرگرمی، ورزش، تبلیغات، سرویس‌های اضطراری و مراقبت‌های بهداشتی خوب است.
چه زمانی از قرمز استفاده نکنیم؟
در استفاده از رنگ قرمز به هیچ عنوان زیاده‌روی نکنید. هیجان زیادی می‌تواند مخرب باشد. عموما قرمز برای کالاهای لوکس، وبسایت‌های فعال در زمینه طبیعت و وبسایت‌های حرفه‌ای مناسب نمی‌باشد.
2 - روانشناسی رنگ زرد
زرد درخشان‌ترین رنگ است. با موضوعاتی همچون شادی، خوش‌بینی و جوانان همخوانی دارد. همچنین القاء کننده‌ی برخی ویژگی‌ها منفی مثل بزدلی، فریب و ارزانی نیز می‌باشد.
– چه زمانی از رنگ زرد استفاده کنیم؟
برای شادی بخشیدن به افراد از زرد استفاده کنید. اگر میخواهید این شادی توأم با آرامش باشد، از زرد روشن کم‌رنگ‌تر استفاده کنید. رنگ زرد برای جلب توجه به متن‌ها و دکمه‌هایی که با کلیک بر روی آنها عملیات خاصی انجام میشود بسیار مناسب است.
– چه زمانی از زرد استفاده نکنیم؟
از آنجایی که نگاه کردن طولانی به رنگ زرد باعث خسته شدن چشم‌ها میشود، استفاده‌ی زیادی آن توصیه نمی‌شود. تا حد ممکن از این رنگ کمتر استفاده کنید.
3 - روانشناسی رنگ نارنجی
نارنجی یک رنگ فعال و پر جنب و جوش است که عموما با تفریح، شادی، هیجان و اشتیاق مرتبط است. همچنین استفاده از این رنگ برای جلب توجه و برقراری ارتباط نیز توصیه میشود.
– چه زمانی از نارنجی استفاده کنیم؟
برای جلب توجه به عملکردهای مهم (مشترک شدن (subscribe)، خرید، عضویت و …) یا هر محتوایی که میخواهید توجه افراد به آن جلب شود، برای ساخت سایت های تجارت الکترونیک، خودرو، تکنولوژی، سرگرمی، غذا و … مناسب است.
– چه زمانی از نارنجی استفاده نکنیم؟
هرچند که شدت نارنجی از قرمز کمتر است، اما با این حال استفاده زیاد از آن مسحورکننده است. در به کار بردن آن زیاده‌روی نکنید.
4 - روانشناسی رنگ سبز
سبز به منظور هماهنگی و حفظ تعادل عناصر به کار می‌رود. رنگ سبز با رشد و پویایی، سلامتی، طبیعت، ثروت، آرامش، سخاوت، باروری، موفقیت، صلح و مضامینی از این قبیل مرتبط است.
– چه زمانی از سبز استفاده کنیم؟
پردازش رنگ سبز توسط چشم به سادگی انجام میشود. از این رنگ به منظور ایجاد آرامش و در وبسایت‌هایی در زمینه طبیعت استفاده کنید. همچنین رنگ سبز برای وبسایت‌هایی با محوریت علم، جهانگردی، منابع انسانی و … مناسب است.
– چه زمانی از سبز استفاده نکنیم؟
این رنگ برای سایت‌هایی با محوریت کالاهای لوکس، تکنولوژی، و مضامین مشابه مناسب نمی‌باشد.
5 - روانشناسی رنگ آبی
آبی با مفاهیمی همچون صلاحیت، کیفیت، آرامش، اعتماد، پایداری، خرد، وفاداری، استحکام، بهره‌وری و امنیت مرتبط است. آبی روشن می‌تواند مفاهیمی چون طراوت و انرژی‌بخشی را نیز در بر گیرد.
– چه زمانی از آبی استفاده کنیم؟
آبی اغلب توسط شرکت‌های بزرگ و بانک‌ها مورد استفاده قرار میگیرد، چرا که قابلیت جلب اعتماد فراوانی در این رنگ نهفته است. همچنین برای سایت‌هایی در زمینه مراقب‌های بهداشتی، دندانپزشکی، تکنولوژی سطح بالا، علوم پایه، دولت و موارد اینچنینی مناسب است.
– چه زمانی از آبی استفاده نکنیم؟
استفاده بیش از حد از رنگ آبی می‌تواند وب سایت شما را سرد و بی روح کند. همچنین استفاده از آن می‌تواند باعث بی اشتهایی شود، پس هیچ‌وقت از آن برای وبسایت‌هایی با موضوع غذا استفاده نکنید.
6 - روانشناسی رنگ مشکی
مشکی رنگ قدرتمندی است که اغلب با مفاهیمی مثل کمال، ظرافت، قدرت، ثبات، استحکام، تشریفات و هوش همراه است. این رنگ همچنین می‌تواند نماد مرگ، رمز و راز و شرارت باشد.
– چه زمانی از مشکی استفاده کنیم؟
بسته به رنگ‌هایی که به همراه آن استفاده میشود، مشکی می‌تواند زیبا و سنتی یا مدرن باشد. مشکی برای کالاهای لوکس، مد و فشن، بازاریابی، لوازم آرایشی و … بسیار مناسب است.
– چه زمانی از مشکی استفاده نکنیم؟
استفاده زیاد از مشکی شما را از هدف وبسایت دور میکند و می‌تواند احساس شوم و شرورانه به کاربر منتقل کند یا حتی باعث ناراحتی و استرس افراد شود.
7 - روانشناسی رنگ سفید
رنگ سفید با خلوص، پاکی، شادی، صمیمیت و امنیت مرتبط است.
– چه زمانی از سفید استفاده کنیم؟
سفید رنگ دکترها، پرستارها و دندانپزشک‌هاست که آن را به یک رنگ جدانشدنی از وبسایت‌هایی که با موضوع سلامتی در ارتباط هستند تبدیل کرده است. همچنین این رنگ برای وبسایت‌های علمی نیز بسیار مناسب است.
– چه زمانی از سفید استفاده نکنیم؟
از آنجایی که تأثیر رنگ سفید در کنار رنگ‌های دیگر متفاوت است، استفاده از آن در هر نوع وبسایتی می‌تواند مناسب باشد.
8 - روانشناسی رنگ صورتی
اگرچه صورتی زیر مجموعه‌ای از قرمز است، با این حال ویژگی‌هایی دارد که در رنگ قرمز نیست. صورتی نشان دهنده‌ی کمال، صمیمیت، عشق و رمانتیک بودن است. خشونت و شرارت قرمز در آن وجود ندارد و کاملاً ملایم و تسکین‌دهنده است.
– چه زمانی از صورتی استفاده کنیم؟
صورتی بسیار مناسب سایت‌هایی با محوریت زنان و دختران می‌باشد و برای استفاده در سایت‌های ارائه دهنده‌ی محصولات زنانه توصیه میشود.
– چه زمانی از صورتی استفاده نکنیم؟
صورتی روشن، پر زرق و برق است و از جدیت سایت تا حدودی می‌کاهد. از این رو در وبسایت‌های رسمی استفاده از آن توصیه نمی‌شود.
نکته : عدد طلایی در تعداد رنگها عدد 3 است ولی به نسبت تعریف پروژه امکان کم و زیاد شدن را نیز دارد. اغلب به دلیل اولویت‌های شخصی، تجارب، نوع تربیت، زمینه و تفاوت‌های فرهنگی، هر کدام از رنگها روی ما تاثیر خاصی می‌گذارند
انواع پالت رنگ برای سایت
-------------------------------------
1- رنگ‌های مکمل و خنثی
کسب‌وکارهای متفاوتی مثل ادارات، مدرسه‌ها و دانشگاه‌ها ، سایت‌های علمی و اخبار نیازمند طراحی سایتی ساده با ترکیب دو یا سه رنگ هستند. به طور مثال میتوانید رنگ آبی و مکمل هایش را برای لوگو ، منو و لینک‌ها استفاده کنید و رنگ‌های خنثی مثل سفید برای پس زمینه و رنگ متضادی مثل سیاه برای متون تا بهتر خوانده شوند.
2- رنگ‌های شاد و متضاد
رستوران‌ها ، مهد کودک‌ها ، فروش آنلاین سیسمونی و مشاغل این چنینی نیازمند استفاده از رنگ‌های شاد برای طراحی سایت هستند. رنگ‌هایی مثل قرمز ، زرد و نارنجی رنگ‌های گرمی هستند که انرژی را به کاربر منتقل می‌کنند و برای تبلیغات و جلب توجه بهترین گزینه‌ها هستند.
در حقیقت شما در زمان انتخاب رنگ سایت خود باید به این موضوع فکر کنید که میخواهید چه احساسی به مخاطب خود منتقل کنید و همچنین این موضوع را نیز در نظر بگیرید که بازه سنی مخاطب شما چقدر است؛ یعنی بیشتر مخاطبین شما حدوداً چند ساله هستند و جنس مخاطب سایت را نیز در نظر بگیرید
3- رنگ های تیره و روشن
به عنوان مثال شما برای یک سایت آموزشی که فقط برای مدیران شرکت ها طراحی شده است بهتر است از رنگ های جدی مانند سرمه‌ای یا مشکی استفاده کنید اما باید این رنگها را فقط در منو و بخش‌های کمی از سایت بیاورید تا سایت به تیرگی کشیده نشود.
سایت های تیره همیشه احساس سایتی با محتوای آموزش های امنیتی، موزیک و فیلم را میدهند، اگر دقت کنید این الگو در همه سایت‌های محبوب حوزه فیلم و موسیقی دیده میشود اما در مقابل سایت‌هایی که خدماتی به خانم ها میدهند معمولا از رنگ‌های بنفش کمرنگ یا صورتی استفاده می‌کنند و به محض اینکه شما وارد سایت می‌شوید متوجه خواهید شد که این سایت ارتباطی به خانم‌ها دارد. پس با توجه به کسب و کارتان رنگ مناسب سایت خود را انتخاب کنید تا در اولین نگاه، خود را برای مخاطب متمایز کنید.
رنگها همان طور که در محیط اطراف روی ما تأثیر می‌گذارند در حوزه وب نیز بی تاثیر نیستند. با یک بررسی ساده و خوش سلیقگی میتوانید تاثیر گذاری رنگها را در ذهن کاربران چند برابر کنید.
برای دریافتن بایدها و نبایدهای رنگ بندی سایت خود باید نکات زیر را رعایت کنید:
رنگ متن‌های سایت
بین صفحات خود هماهنگی ایجاد کنید
رنگ سازمانی
هر رنگ فرهنگی را در خود جای داده است
رنگ مربوط رنج سنی کاربران
خلاصه از کتاب UI Magic Book Refactoring UI
1- فصل اول شروع طراحی :
در طراحی کردن یک UI وب سایت یا مبایل به جای طراحی کردن از اول یا آخر طرح امون یا اصطلاحا به جای طراحی ظاهر از ویژگی ها و قابلیت ها شروع کنید
جزئیات در مراحل بعدی اضافه می شوند در هنگام طراحی کردن یک طرح لازم نیست بیایم و خودمون رو از اول درگیر مسائل خیلی جزئی که شاید بعدا هم مجبور به تغیرشون بشیم بکنیم بهتره در مراحل اول طراحی بیایم از وایرفریم ها استفاده کنیم
هنوز هم رنگ را اضافه نکنید حتی وقتی ما اومدیم و طرح امون رو داخل کاغذ انجام دادیم و کمال استفاده رو از وایرفریم ها کردیم و قرار شد اون رو داخل نرم افزار بیاریم بهتر هستش در ابتدا از رنگ ها استفاده نکنیم و گری اسکیل یا سیاه سفید بیایم و استفاده کنیم با این کار دقت کار ما از لحاظ فنی بالاتر میره و بهتر میتونیم سلسه مراتب بین قسمت های مختلف طرح از فواصل کنتراست و اندازه المان هارو داخل طرح امون بیایم و بهتر انجامشون بدیم
بیش از حد زمان خود را صرف مراحل اولیه نکنید وقتی ما میایم و از وایرفریم ها استفاده میکنیم هدفمون ایده گرفتن و سرعت در طراحی هستش و لزومی نداره بیایم و خودمون رو خیلی درگیر اون ها بکنیم و باید سریع به مرحله بعدی برسیم
برای محصول خود، شخصیت انتخاب کنید برای مثال اگر محصول ما یک سایت بانکی است این سایت ما باید یک شخصیتی ایمن و حرفه ای را در ذهن کاربرانمان بیاد و القا کند
انتخاب فونت تایپوگرافی نقش مهمی در شکل گیری احساسات کاربر نسبت به محصول دارد.
نکته : مفهوم سریف و سنس سریف در تایپوگرافی فارسی مفهوم خاصی ندارند و در تایپوگرافی فارسی، عامل تعیین کننده شخصیت طرح، نوع تایپ فیس مورد استفاده است. برای مثال تایپ فیس هایی از قبیل ایران یکان، ایران سنس و یکان بخ، میتوانند برای ایجاد یک شخصیت رسمی به کار روند و مواردی مانند ایران سنس دست نویس و الله زار می توانند گزینه هایی برای ایجاد یک شخصیت صمیمی و بازیگوش باشند.
رنگ اطلاعات زیادی پیرامون روانشناسی رنگ ها وجود دارد اما دست آخر باید تنها به احساسی که درون ما یه وجود میاورند توجه کنیم رنگ آبی امن و آشنا است طالیی احتماال نشان دهنده یک محصول لوکس گران و پیراسته است صورتی کمی صمیمی بوده و چندان جدی نیست
گردی گوشه المان ها : گردی گوشه ها کمی صمیمی و شیطنت آمیز هستش درحالی که عدم وجود radius border و گردی گوشه ها و در واقع تیز بودن گوشه ها، جدی یا رسمی به
نکته : ترکیبی از گوشه های گرد و مربعی در یک رابط کاربری، تقریباً همیشه بدتر از استفاده از یکی از این موارد است. اگر گوشه های یک نوع دکمه را گرد کردید، سعی کنید تمام دکمه ها را گرد طراحی کنید نه اینکه یک المان را گرد، دیگری را کمی گرد تر و دیگری را کامال تیز طراحی کنید
زبان : ما کلمات و جملاتی که قرار می دهیم هم حائز اهمیت هستند عدم استفاده از یک لحن خودمانی و محاوره، رسمی تر یا حرفه ای تر می باشد درحالی که استفاده از یک لحن دوستانه یا محاوره، باعث می شود سایت یا اپلیکیشن دوستانه تر به نظر برسد
برای طراجی سایت یا اپ امون سعی کنید به رقبای آن ها هم نگاهی بندازید اگر این سایت ها عمدتاً جد" هستند، سایت شما نیز احتماال باید اینگونه باشد؛ اگر بیشتر سرگرم کننده و دارای چاشنی طنز و صمیمانه هستند، احتماال مسیر درست همان است. اما سعی کنید بیش از حد از رقبای مستقیم خود وام نگیرید، هیچ کس نمی خواهد شبیه به نسخه درجه دو از چیز دیگری به نظر برسد.
برای خودتان چند سیستم طراحی را از قبل تعریف کنید : بهتر هستش بیایم و از قبل برای خودمون پالت ها رنگی و فونت هایی که میخایم با انداز های مختلف رو جدا کنیم و برای خودمون یکسری بسته آماده درست کنیم این جوری در انتخاب کردن هامون راحت تریم و تایم کمتری از دست می دهیم
طراحی با فرآیند حذف : وقتی ما برای انداز های طرح امون مشکل داریم بهتر هستش اون رو بیایم و با انداز های بعد و قبلی اون یک مقایسه بکنیم و اون هایی که بد هستند رو بیایم و حذف کنیم با این فرآیند کار ما راحت تر می شود
2- فصل دوم سلسله مراتب بصری : سلسله مراتب بصری یعنی اینکه اطلاعات موجود در رابط کاربری را به گونه ای سازمان دهی کنیم که تمامی اطلاعات موجود، به چشم کاربر یک درجه از اهمیت را نداشته باشند و کاربر بتواند بین اطلاعات مهمتر، مهم و کم اهمیت تر تفکیک قایل شود
نکته : در استفاده از متون برای مهم و مهتر بودن اون ها طبق توضیحات بالا نیایم و فقط در اندازه اون ها تغیرات امون رو ایجاد کنیم بلکه سعی کنیم با تغیر رنگ مثلا رنگ های ملایم تر یا وزن های مختلف به خواسته امون برسیم و صرفا با اندازه ها این کارو نکنیم
سعی کنید از دو یا سه رنگ استفاده کنید :
• یک رنگ تیره برای محتوای اصلی ( مانند عنوان مقاله )
• خاکستری برای محتوای ثانویه ( مانند تاریخ انتشار مقاله )
• خاکستری کمرنگ تر برای محتوای ثالث ( مثل پاورقی )
به همین ترتیب، معموال دو وزن فونت برای UI کافی است
• یک وزن فونت معمولی ( 400 یا 500 بسته به فونت ) برای بیشتر متون
• یک وزن فونت سنگین تر (600 یا 700 ) برای متونی که قصد تأکید آن را دارید
نکته : از استفاده از فونت هایی با وزن زیر 400 در رابط کاربری خودداری کنید. این فونت ها ممکن است در عناوین بزرگ کارآیی داشته باشند، اما خواندن آنها در اندازه های کوچکتر دشوار است. اگر در نظر دارید برای کم کردن تاکید برخی متون از وزن های کمتر استفاده کنید، به جای آن از یک رنگ روشن تر یا اندازه فونت کوچکتر استفاده کنید.
در زمینه های رنگی از متن خاکستری استفاده نکنید
نکته : رویکرد بهتر انتخاب رنگ جدید بر اساس رنگ پس زمینه است. رنگی مشابه رنگ پس زمینه انتخاب کنید و با تنظیم Saturation آن، به یک رنگ نهایی، کمی متفاوت از رنگ اصلی برسید:
با عدم تأکید، تأکید ایجاد کنید : این موضوع بیشتر این رو خاطر نشان می کند که در طراحی هامون موضوعات کم اهمیت رو طوری طراحی نکنیم که یک جور رقیب برای موضوعات مهم امون بشن به عنوان مثال، اگر سایدبار در محصول با بخش اصلی محتوای شما رقابت می کند، برای آن رنگ پس زمینه در نظر نگیرید و درواقع اجازه دهید محتوای این بخش، مستقیما در پس زمینه صفحه اصلی جای بگیرد
برچسب آخرین راه حل است : اگر بتوانید داده ها را بدون برچسب ارائه دهید، تأکید بر اهمیت یا شناسایی اطلاعات و استفاده از رابط کاربری بسیار ساده تر شده و در عین حال "آراسته" تر و منظم تر به نظر خواهد رسید برای مثال وقتی در زیر نام کسی در بخش لیست کارمندان یک وب سایت، عبارت "کارشناس پشتیبانی" آمده باشد، برای درک حرفه این کارمند، نیازی به برچسب نخواهید داشت و نیازی نیست بنویسید "عنوان شغلی: کارشناس پشتیبانی
برچسب ها را با ارزش ها ترکیب کنید برای مثال، اگر در یک رابط کاربری فروشگاه اینترنتی نیاز به نمایش موجودی کالا دارید، به جای "موجودی انبار:12 ،"عبارت "12 تا در انبار موجود است" را استفاده کنید.
برچسب ها به لحاظ اهمیت در درجه دوم قرار دارند : برچسب ها نسبت به داده های اصلی باید درچشم کاربر، کم اهمیت تر به نظر برسند و در واقع داده های اصلی محتوای اولیه یا Primary هستند و برچسب ها محتوای ثانویه یا Secondary هستند.
چه موقع بر روی یک برچسب تأکید کنید؟
اگر در حال ایجاد یک رابط کاربری هستید و می دانید که کاربر در آن به دنبال برچسب است، ایجاد تاکید بر روی برچسب ( به جای داده ) منطقی است.
بین وزن و کنتراست تعادل ایجاد کنید با استفاده از کنتراست برای جبران وزن و وزن برای جبران کنتراست
معنا شناسی ( Semantics ) امری ثانویه است.
عملکرد های اولیه : باید کامال مشخص باشند. استفاده از رنگ های پس زمینه با کنتراست و چگالی باال برای این عملکردها عالی است. دکمه های توپر با رنگ هایی که نسبت به پس زمینه کنتراست باالیی ایجاد می کنند، برای عملکردهای اولیه مناست هستند.
عملکرد های ثانویه : باید واضح بوده و قابل درک باشند اما برجسته نباشد. طرح های Outline و یا رنگ های پس زمینه با کنتراست پایین گزینه هایی عالی برای عملکردهای ثانویه هستند. دکمه هایی که به صورت توخالی هستند و نسبت به دکمه های اولیه کنتراست کمتری نسبت به پس زمینه دارند برای عملکردهای ثانویه مناسب هستند.
عملکرد های ثالث : باید کشف شدنی اما نامحسوس باشند. طراحی این عملکرد ها به شکل لینک و دکمه های متنی، معموالً بهترین شیوه است.
عملکردهای منفی و مخرب : اگر یک عملکرد منفی جزو عملکرد های اصلی یک صفحه نیست، بهتر است با آن به شکل یک دکمه ثانویه یا ثالث رفتار کرد که اگر یک عملکرد مخرب را به عنوان عملکردهای اولیه، ثانویه و ثالث در نظر بگیریم، چه نوع طراحی را باید برای آن در نظر بگیریم. هر چه که اثر تخریبی و ریسک استفاده از یک عملکرد منفی بیشتر باشد، باید پررنگ تر و مهم تر جلوه داده شود. اگر عملکرد منفی مورد نظر شما، در واقع یک عملکرد اصلی است و می تواند مخرب باشد، آن را با یک مودال دریافت تاییدیه از کاربر ترکیب کرده و طراحی بزرگ، قرمز و بولد را برای آن اعمال کنید.