آموزش قوانین طراحی: اصول + تمرین برای طراحی عالی UI

سرفصل ها و درس ها

قوانین پایه: آنچه شما باید از قبل بدانید Ground Rules: What You Need to Know Upfront

• طراحی طراحی است طراحی است. Design is Design is Design.

• از حل مشکلات دیگران دست بردارید Stop Solving Other People's Problems

• فرم تابع تابع نیست (و نباید) باشد Form Doesn't (and Shouldn't) Follow Function

• شکل و عملکرد متعادل کننده: نسخه در مقابل توضیحات Balancing Form and Function: Prescription vs. Description

• چرا Form Follows Function یک نسخه طراحی UI نیست! Why Form Follows Function is NOT a UI Design Prescription!

• هر نیرو شکل می گیرد (پس از نسخه پیروی نکنید) Every Force Evolves Form (So Don't Follow the Prescription)

• کمتر است بیشتر: صفحه نمایش های کوچک، چالش های بزرگ Less is More: Small Screens, Big Challenges

• پنج قانون برای طراحی موثر رابط کاربری در صفحه نمایش های کوچک Five Rules for Effective UI Design on Small Screens

سازماندهی اطلاعات بصری Organizing Visual Information

• تعادل: ایجاد نظم بصری Balance: Creating Visual Order

• مطالعات موردی: بهبود تعادل در رابط کاربری Case Studies: Improving Balance in the User Interface

• ریتم: ایجاد و تقویت درک Rhythm: Establishing and Reinforcing Comprehension

• هارمونی: شکل دادن اجزا به یک کل Harmony: Shaping the Parts Into a Whole

• استفاده از هارمونی برای ایجاد جریان جهت Using Harmony to Create Directional Flow

• مطالعه موردی: استفاده از هارمونی برای طراحی بهتر فرم Case Study: Using Harmony for Better Form Design

• تسلط: هدایت (و حفظ) تمرکز کاربر Dominance: Directing (and Maintaining) User Focus

• استفاده از تسلط برای افزایش تمرکز - و کاهش تلاش شناختی Using Dominance to Increase Focus — and Decrease Cognitive Effort

• ایجاد تسلط با اندازه، فضای منفی و کنتراست Creating Dominance with Size, Negative Space and Contrast

• تراز: هدایت چشم در سراسر صفحه Alignment: Leading the Eye Across the Screen

• مطالعات موردی: قدرت همسویی Case Studies: The Power of Alignment

• مجاورت: نمایش و برقراری ارتباط بصری Proximity: Showing and Communicating Visual Relationships

• استفاده از نزدیکی برای سریعتر کردن شناخت Using Proximity to Make Cognition Faster

• مطالعات موردی: استفاده از نزدیکی برای آسان‌تر کردن مرور Case studies: Using Proximity to Make Browsing Easier

استفاده از رنگ و کنتراست مناسب Using Color and Contrast Appropriately

• رنگ: جلب توجه و برقراری ارتباط با احساسات Color: Getting Attention and Communicating Emotion

• چگونه رنگ بر تعامل تاثیر می گذارد How Color Influences Interaction

• کلمه ای در مورد تئوری رنگ - و استفاده صحیح از رنگ A Word on Color Theory — and Using Color Correctly

• نحوه انتخاب رنگ های مناسب برای رابط کاربری: انجمن های رایج How to Choose the Right Colors for your UI: Common Associations

• نحوه انتخاب رنگ های مناسب برای رابط کاربری: تاثیر احساسی How to Choose the Right Colors for your UI: Emotional Impact

• نحوه انتخاب رنگ های مناسب برای رابط کاربری: از دنیای اطراف شما How to Choose the Right Colors for your UI: From the World Around You

• نحوه انتخاب رنگ های مناسب برای رابط کاربری: از رنگ های برند How to Choose the Right Colors for your UI: From Brand Colors

• قدرت کنتراست The Power of Contrast

• استفاده از کنتراست برای بهبود خوانایی، توجه و تمرکز Using Contrast to Improve Readability, Attention and Focus

• سه کارکرد اساسی کنتراست در طراحی UI Three Essential Functions of Contrast in UI Design

• نحوه تعیین رنگ و کنتراست مناسب How to Determine Appropriate Color and Contrast

طراحی با تایپوگرافی و تصویرسازی Designing with Typography and Imagery

• تایپوگرافی 101: چیزی بیشتر از انتخاب فونت است! Typography 101: It's About Much More Than Choosing a Font!

• ایجاد تاثیر احساسی با تایپوگرافی Creating Emotional Impact with Typography

• انتخاب فونت تایپوگرافی نیست: اهمیت تشخیص الگو Choosing a Font Isn't Typography: The Importance of Pattern Recognition

• اهمیت هم ترازی، هدایت و کرنینگ مناسب The Importance of Proper Alignment, Leading and Kerning

• هفت قانون برای تایپوگرافی عالی Seven Rules for Great Typography

• پنج قانون برای انتخاب تصویر Five Rules for Choosing Imagery

• بایدها و نبایدهای تصویرسازی Imagery DOs and DON'Ts

ایجاد و ساده سازی نشانه های بصری Creating and Simplifying Visual Cues

• کار با آیکون ها Working with Icons

• چهار نوع اصلی آیکون (و نحوه انتخاب نوع مناسب) Four Core Types of Icons (and How to Choose the Right Type)

• پنج قانون برای طراحی موثر آیکون Five Rules for Effective Icon Design

• برخورد با داده ها Dealing with Data

• پنج قانون برای طراحی عالی داده Five Rules for Great Data Design

• ساده سازی اطلاعات بصری قسمت 01 Simplifying Visual Information Part 01

• ساده سازی اطلاعات بصری قسمت 02 Simplifying Visual Information Part 02

• جداسازی محتوا از کنترل ها قسمت 01 Separating Content from Controls Part 01

• جداسازی محتوا از کنترل ها قسمت 02 Separating Content from Controls Part 02

چیز هایی برای به یاد آوردن Things to Remember

• خلاصه: مانتراهای طراحی رابط کاربری Recap: UI Design Mantras