مسیرهای یادگیری - طراح رابط کاربری
طراح رابط کاربری
طراح رابط کاربری از قانون‌های ادراک تا سیستم طراحی: چشم چطور می‌بیند، تایپوگرافی و رنگ و شبکه، تعامل، و رابطی که در همهٔ اندازه‌ها کار کند.
شامل زیرمسیر: مبانی تجربه کاربری
- ۲۴ گام
- ۲۴ تمرین + پروژهٔ پایانی
- ۱۹٫۷ ساعت مطالعه و تمرین
۰٪ از این مسیر را گذرانده‌اید
بعد از این مسیر
- چیدمانی می‌سازید که چشم را به ترتیب درست هدایت کند
- تایپوگرافی، رنگ و شبکه را با دلیل انتخاب می‌کنید، نه با سلیقه
- اجزای رابط را طوری طراحی می‌کنید که در یک سیستم تکرارپذیر باشند
هر مقاله را بخوانید، تمرینش را انجام دهید و دکمهٔ «انجامش دادم» را بزنید. درصد هر گام بر اساس زمان مطالعه و تمرین حساب شده است. پیشرفتتان فقط در همین مرورگر ذخیره می‌شود.
-
مرحلهٔ ۱ پیش‌نیاز
زبان مشترک و اصول پایه.
-
زیرمسیر مبانی تجربه کاربری ۸ گام
این گام‌ها از مسیر مبانی تجربه کاربری می‌آیند. اگر قبلاً آن را گذرانده‌اید، پیشرفتتان اینجا هم حساب می‌شود.
-
طراحی تجربهٔ کاربری (UX Design) چیست؟
تمرین: سه محصولی را که هر روز استفاده می‌کنید بنویسید و برای هر کدام یک لحظهٔ خوب و یک لحظهٔ آزاردهنده را در یک جمله توصیف کنید.
با این گام: ۲٪ مسیر -
طراحی کاربرمحور (UCD) چیست؟
تمرین: یکی از آن لحظه‌های آزاردهنده را انتخاب کنید و بنویسید طراح احتمالاً چه فرض نادرستی دربارهٔ کاربر داشته است.
با این گام: ۴٪ مسیر -
کاربردپذیری (Usability) چیست؟ راهنمای جامع
تمرین: یک کار ساده، مثل خرید شارژ، را در دو اپ مختلف انجام دهید. زمان، تعداد لمس و جاهایی را که مکث کردید یادداشت و مقایسه کنید.
با این گام: ۷٪ مسیر -
مدل ذهنی (Mental Model) چیست؟
تمرین: از یک نفر بخواهید بدون نگاه کردن توضیح دهد پیام‌رسانش پیام‌ها را کجا نگه می‌دارد. توضیح او را با واقعیت مقایسه کنید.
با این گام: ۱۰٪ مسیر -
افوردنس (Affordance) چیست؟ راهنمای کامل قابلیت کنش
تمرین: از خانه یا محل کار از پنج شیء عکس بگیرید که شکلشان به‌وضوح می‌گوید با آن‌ها چه کنید، و از یکی که گمراه‌کننده است.
با این گام: ۱۲٪ مسیر -
بار شناختی (کاگنیتیو لود) چیست؟
تمرین: فرم ثبت‌نام یک سایت را بردارید و هر فیلدی را که می‌شود حذف کرد، به بعد موکول کرد یا خودکار پر کرد علامت بزنید.
با این گام: ۱۵٪ مسیر -
سلسله‌مراتب بصری (ویژوال هایرارکی) چیست؟
تمرین: از یک صفحه اسکرین‌شات بگیرید، چشمتان را تار کنید و سه چیزی را که اول دیده می‌شوند شماره بزنید. آیا همان سه چیز مهم‌ترین‌اند؟
با این گام: ۱۷٪ مسیر -
دسترس‌پذیری (Accessibility) چیست؟
تمرین: یک صفحه از محصول خودتان را فقط با صفحه‌کلید پیمایش کنید و هر جایی را که فوکوس گم می‌شود یا دکمه‌ای در دسترس نیست یادداشت کنید.
با این گام: ۲۰٪ مسیر
-
-
-
مرحلهٔ ۲ چشم چطور می‌بیند
قانون‌هایی را بشناسید که ادراک بصری پیش از هر سلیقه‌ای از آن‌ها پیروی می‌کند.
-
اصول گشتالت در طراحی رابط کاربری؛
تمرین: یک صفحه از یک اپ را بردارید و برای هر گروه بصری بنویسید کدام اصل گشتالت آن را گروه کرده است.
با این گام: ۲۳٪ مسیر -
ویژگی‌های بصری پیش‌توجهی (Preattentive Visual Properties) چیست؟
تمرین: یک فهرست بیست‌تایی بکشید و فقط با یک ویژگی، مثل رنگ یا اندازه، یک آیتم را طوری برجسته کنید که در یک نگاه پیدا شود.
با این گام: ۲۵٪ مسیر -
فضای منفی (Negative Space) چیست؟
تمرین: یک صفحهٔ شلوغ را فقط با تغییر فاصله‌ها بازطراحی کنید، بدون حذف هیچ چیز.
با این گام: ۲۸٪ مسیر -
تقارن (Symmetry) در طراحی چیست؟
تمرین: دو صفحهٔ ورود را مقایسه کنید، یکی متقارن و یکی با تعادل غیررسمی، و بنویسید هر کدام چه حسی می‌سازد.
با این گام: ۳۰٪ مسیر
-
-
مرحلهٔ ۳ زبان بصری
تایپوگرافی، رنگ، آیکون و شبکه را به ابزار تصمیم تبدیل کنید.
-
تایپوگرافی چیست؟ راهنمای جامع تایپ در طراحی رابط
تمرین: برای یک صفحهٔ مقاله یک مقیاس تایپوگرافی چهارسطحی بسازید و ارتفاع خط فارسی را جداگانه تنظیم کنید.
با این گام: ۳۴٪ مسیر -
نظریهٔ رنگ (کالر تئوری) چیست؟ راهنمای جامع
تمرین: یک پالت پنج‌رنگی بسازید و تضاد متن روی هر پس‌زمینه را با یک ابزار بررسی کنید.
با این گام: ۳۸٪ مسیر -
آیکون‌نگاری (Iconography) چیست؟
تمرین: ده آیکون رایج را بدون برچسب به کسی نشان دهید و ببینید کدام‌ها را درست حدس می‌زند.
با این گام: ۴۰٪ مسیر -
سیستم شبکه‌ای (Grid System) چیست؟
تمرین: یک صفحهٔ وب را روی شبکهٔ دوازده‌ستونی دوباره بچینید و نسخهٔ موبایلش را روی چهار ستون.
با این گام: ۴۵٪ مسیر
-
-
مرحلهٔ ۴ تعامل
رابطی بسازید که بگوید چه کاری ممکن است و به هر کار پاسخ بدهد.
-
طراحی تعامل (اینتراکشن دیزاین) چیست؟
تمرین: یک کار کوچک، مثل حذف یک آیتم، را از لحظهٔ قصد تا بازخورد نهایی گام‌به‌گام بنویسید.
با این گام: ۴۷٪ مسیر -
قانون فیتس (Fitts's Law) چیست؟
تمرین: مهم‌ترین دکمهٔ یک صفحهٔ موبایل را پیدا کنید و بسنجید اندازه و فاصله‌اش از انگشت شست مناسب است یا نه.
با این گام: ۵۰٪ مسیر -
قانون هیک (Hick's Law) چیست؟
تمرین: یک منوی پرگزینه را طوری بازطراحی کنید که گزینه‌ها گروه‌بندی شوند یا تعدادشان کم شود.
با این گام: ۵۲٪ مسیر -
میدان ورودی (Input Fields) چیست؟
تمرین: یک فرم سه‌فیلدی طراحی کنید با برچسب، راهنما، حالت خطا و حالت موفق برای هر فیلد.
با این گام: ۵۵٪ مسیر -
میکرواینتراکشن (ریزتعامل) چیست؟
تمرین: یک ریزتعامل، مثل افزودن به سبد، را با چهار جزئش طراحی کنید: محرک، قاعده، بازخورد و حلقه.
با این گام: ۵۹٪ مسیر
-
-
مرحلهٔ ۵ مقیاس و سیستم
رابطی بسازید که در همهٔ اندازه‌ها و حالت‌ها کار کند و قابل تکرار باشد.
-
طراحی واکنش‌گرا (Responsive Design) چیست؟
تمرین: یک کارت محصول را برای سه عرض صفحه طراحی کنید و بنویسید در هر نقطهٔ شکست چه چیزی جابه‌جا می‌شود.
با این گام: ۶۳٪ مسیر -
سیستم طراحی (دیزاین سیستم) چیست؟
تمرین: پنج جزء تکرارشونده در محصولتان پیدا کنید و برای یکی از آن‌ها همهٔ حالت‌ها و قاعدهٔ استفاده را مستند کنید.
با این گام: ۶۷٪ مسیر -
حالت تاریک (Dark Mode) چیست؟
تمرین: همان کارت محصول را در حالت تیره بسازید و تضاد رنگ‌ها را دوباره بررسی کنید.
با این گام: ۷۰٪ مسیر
-
بازطراحی یک صفحه
یک صفحهٔ واقعی از یک محصول ایرانی را برای موبایل و دسکتاپ بازطراحی کنید، با یک صفحه توضیح دربارهٔ تایپوگرافی، رنگ، شبکه و اجزایی که ساختید.
مطالعهٔ تکمیلی
این فهرست خودکار است. هر مقالهٔ تازه‌ای که در همین حوزه منتشر شود، اینجا اضافه می‌شود. ترتیب: از قدیمی به جدید.