💻 آخرین فرصت یادگیری برنامه‌نویسی با آفر ویژه قبل از افزایش قیمت در ۵ آذر ماه (🎁 به همراه یک هدیه ارزشمند )
۰ ثانیه
۰ دقیقه
۰ ساعت
۳ emad ta
مقاله آموزشی UI / UX ( در حال آپدیت هر روز یک قطعه اضافه میکنم )
جامعه Html & CSS ایجاد شده در ۲۰ دی ۱۳۹۹

سلام دوستان بنده ی مدت پیرامون این موضوع یکسری سرچ هایی زدم خواستم ی خلاصه از مطالبی که یاد گرفتم رو باهاتون به اشتراک بزارم

 

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

تفکر طراحی  (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- رنگ‌های تیره و روشن

 

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

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

رنگ‌ها همان طور که در محیط اطراف روی ما تأثیر می‌گذارند در حوزه وب نیز بی تاثیر نیستند. با یک بررسی ساده و خوش سلیقگی می‌توانید تاثیر گذاری رنگ‌ها را در ذهن کاربران چند برابر کنید.

 

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

 

رنگ متن‌های سایت

بین صفحات خود هماهنگی ایجاد کنید

رنگ سازمانی

هر رنگ فرهنگی را در خود جای داده است

رنگ مربوط رنج سنی کاربران

 

emad ta ۲۰ دی ۱۳۹۹، ۱۷:۳۰

خلاصه از کتاب UI  Magic Book Refactoring UI

 

1- فصل اول شروع طراحی  : 

 

در طراحی کردن یک UI وب سایت یا مبایل به جای طراحی کردن از اول یا آخر طرح امون یا اصطلاحا به جای طراحی ظاهر از ویژگی‌ها و قابلیت‌ها شروع کنید

 

جزئیات در مراحل بعدی اضافه می‌شوند در هنگام طراحی کردن یک طرح لازم نیست بیایم و خودمون رو از اول درگیر مسائل خیلی جزئی که شاید بعدا هم مجبور به تغیرشون بشیم بکنیم بهتره در مراحل اول طراحی بیایم از وایرفریم‌ها استفاده کنیم 

 

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

 

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

 

برای محصول خود، شخصیت انتخاب کنید برای مثال اگر محصول ما یک سایت بانکی است این سایت ما باید یک شخصیتی ایمن و حرفه ای را در ذهن کاربرانمان بیاد و القا کند

 

 

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

 

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

 

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

 

 

گردی گوشه المان‌ها : گردی گوشه‌ها کمی صمیمی و شیطنت آمیز هستش درحالی که عدم وجود radius border و گردی گوشه‌ها و در واقع تیز بودن گوشه ها، جدی یا رسمی به

 

نکته : ترکیبی از گوشه‌های گرد و مربعی در یک رابط کاربری، تقریباً همیشه بدتر از استفاده از یکی از این موارد است. اگر گوشه‌های یک نوع دکمه را گرد کردید، سعی کنید تمام دکمه‌ها را گرد طراحی کنید نه اینکه یک المان را گرد، دیگری را کمی گرد‌تر و دیگری را کامال تیز طراحی کنید

 

زبان : ما کلمات و جملاتی که قرار می‌دهیم هم حائز اهمیت هستند عدم استفاده از یک لحن خودمانی و محاوره، رسمی‌تر یا حرفه ای‌تر می‌باشد درحالی که استفاده از یک لحن دوستانه یا محاوره، باعث می‌شود سایت یا اپلیکیشن دوستانه‌تر به نظر برسد

 

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

 

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

 

 

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

emad ta ۲۱ دی ۱۳۹۹، ۱۳:۲۹

2- فصل دوم سلسله مراتب بصری : سلسله مراتب بصری یعنی اینکه اطلاعات موجود در رابط کاربری را به گونه ای سازمان دهی کنیم که تمامی اطلاعات موجود، به چشم کاربر یک درجه از اهمیت را نداشته باشند و کاربر بتواند بین اطلاعات مهمتر، مهم و کم اهمیت‌تر تفکیک قایل شود

 

نکته : در استفاده از متون برای مهم و مهتر بودن اون‌ها طبق توضیحات بالا نیایم و فقط در اندازه اون‌ها تغیرات امون رو ایجاد کنیم بلکه سعی کنیم با تغیر رنگ مثلا رنگ‌های ملایم‌تر یا وزن‌های مختلف به خواسته امون برسیم و صرفا با اندازه‌ها این کارو نکنیم 

 

سعی کنید از دو یا سه رنگ استفاده کنید : 

 

• یک رنگ تیره برای محتوای اصلی ( مانند عنوان مقاله )

 

 • خاکستری برای محتوای ثانویه ( مانند تاریخ انتشار مقاله ) 

 

• خاکستری کمرنگ‌تر برای محتوای ثالث ( مثل پاورقی ) 

 

 به همین ترتیب، معموال دو وزن فونت برای UI کافی است 

 

• یک وزن فونت معمولی  ( 400 یا 500 بسته به فونت ) برای بیشتر متون 

 

• یک وزن فونت سنگین‌تر (600 یا 700 ) برای متونی که قصد تأکید آن را دارید

 

نکته : از استفاده از فونت هایی با وزن زیر 400 در رابط کاربری خودداری کنید. این فونت‌ها ممکن است در عناوین بزرگ کارآیی داشته باشند، اما خواندن آنها در اندازه‌های کوچکتر دشوار است. اگر در نظر دارید برای کم کردن تاکید برخی متون از وزن‌های کمتر استفاده کنید، به جای آن از یک رنگ روشن‌تر یا اندازه فونت کوچکتر استفاده کنید.

 

در زمینه‌های رنگی از متن خاکستری استفاده نکنید

 

نکته : رویکرد بهتر انتخاب رنگ جدید بر اساس رنگ پس زمینه است. رنگی مشابه رنگ پس زمینه انتخاب کنید و با تنظیم Saturation آن، به یک رنگ نهایی، کمی متفاوت از رنگ اصلی برسید:

 

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

 

 

برچسب آخرین راه حل است :  اگر بتوانید داده‌ها را بدون برچسب ارائه دهید، تأکید بر اهمیت یا شناسایی اطلاعات و استفاده از رابط کاربری بسیار ساده‌تر شده و در عین حال "آراسته"‌تر و منظم‌تر به نظر خواهد رسید برای مثال وقتی در زیر نام کسی در بخش لیست کارمندان یک وب سایت، عبارت "کارشناس پشتیبانی" آمده باشد، برای درک حرفه این کارمند، نیازی به برچسب نخواهید داشت و نیازی نیست بنویسید "عنوان شغلی: کارشناس پشتیبانی

 

برچسب‌ها را با ارزش‌ها ترکیب کنید  برای مثال، اگر در یک رابط کاربری فروشگاه اینترنتی نیاز به نمایش موجودی کالا دارید، به جای "موجودی انبار:12 ،"عبارت "12 تا در انبار موجود است" را استفاده کنید.

 

 

برچسب‌ها به لحاظ اهمیت در درجه دوم قرار دارند :  برچسب‌ها نسبت به داده‌های اصلی باید درچشم کاربر، کم اهمیت‌تر به نظر برسند و در واقع داده‌های اصلی محتوای اولیه یا Primary هستند و برچسب‌ها محتوای ثانویه یا Secondary هستند.

 

چه موقع بر روی یک برچسب تأکید کنید؟

 

 اگر در حال ایجاد یک رابط کاربری هستید و می‌دانید که کاربر در آن به دنبال برچسب است، ایجاد تاکید بر روی برچسب ( به جای داده ) منطقی است.

 

بین وزن و کنتراست تعادل ایجاد کنید با استفاده از کنتراست برای جبران وزن و وزن برای جبران کنتراست 
 

معنا شناسی ( Semantics ) امری ثانویه است.

 

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

 

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

 

عملکرد‌های ثالث : باید کشف شدنی اما نامحسوس باشند. طراحی این عملکرد‌ها به شکل لینک و دکمه‌های متنی، معموالً بهترین شیوه است.

 

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

emad ta ۲۱ دی ۱۳۹۹، ۱۶:۴۵