رابط کاربری دستگاه شما، خوانا و دقیق در کوچک‌ترین صفحه
قاب‌نگار روی طراحی رابط کاربری برای صفحه‌نمایش‌های کوچک و محدود تمرکز دارد؛ از وایرفریم اولیه تا طرح نهایی رنگی و پروتوتایپ قابل کلیک در فیگما. خروجی، ست کامل صفحات، اجزا و حالت‌هایی‌ست که تیم فنی بدون ابهام پیاده می‌کند.
وایرفریم کم‌وضوح صفحه‌ی اصلی
پیش از رنگ و جزئیات بصری، چیدمان عناصر صفحه‌ی اصلی را در ابعاد دقیق ۳۲۰×۴۸۰ مشخص می‌کنیم تا سلسله‌مراتب اطلاعات و فاصله‌ی لمسی دکمه‌ها از ابتدا درست باشد.
- ۱نوار وضعیت
ساعت، اتصال و باتری در بالای صفحه، همیشه ثابت.
- ۲عنوان صفحه
نام بخش جاری برای جهت‌یابی سریع کاربر.
- ۳کارت وضعیت اصلی
مهم‌ترین داده‌ی دستگاه، درشت و در دید اول.
- ۴دسترسی سریع
سه میان‌بر پرکاربرد با آیکون بزرگ برای لمس آسان.
- ۵فهرست ثانویه
اطلاعات کم‌اولویت‌تر، قابل اسکرول.
- ۶ناوبری ثابت
دسترسی به صفحات دیگر بدون گم‌شدن مسیر.
پالت رنگی و تایپوگرافی
رنگ‌ها با کنتراست بالا برای خوانایی زیر نور مستقیم انتخاب شده‌اند و مقیاس تایپوگرافی طوری تنظیم شده که کوچک‌ترین متن روی صفحه‌ی ۳۲۰×۴۸۰ هم به‌راحتی خوانده شود.
#5B4CFF#3B2FC9#22D3B4#FFB020#FF5470#0B0B18#F7F7FC#6E7191فونت وزیرمتن در تمام وزن‌ها روی صفحه‌ی کوچک تست شده تا در اندازه‌ی ۱۲ پیکسل هم افت خوانایی نداشته باشد.
کتابخانه‌ی آیکون، اجزای پایه و ناوبری ثابت
دکمه، سوییچ، ورودی و آیکون‌ها یک‌بار طراحی و برای همه‌ی صفحات استفاده می‌شوند؛ هر جزء در سه حالت لمس/فشار/غیرفعال مشخص شده تا تیم فنی ابهامی برای پیاده‌سازی نداشته باشد.
آیکون‌ها
دکمه‌ها و حالت‌های تعاملی
سوییچ و ورودی
نوار وضعیت و ناوبری ثابت
طراحی بصری صفحات اصلی
نسخه‌ی رنگی و نهایی سه صفحه‌ی کلیدی؛ همان محتوایی که کاربر واقعی روی دستگاه می‌بیند، با تمام جزئیات بصری.
صبح‌به‌خیر 👋
صفحه‌ی اصلی (Home)
جزئیات و محتوای اصلی
تنظیمات دستگاه
طراحی حالت‌های سیستم
لودینگ، خطا و خالی‌بودن داده هرکدام باید قبل از خود صفحه طراحی شوند تا کاربر هیچ‌وقت با صفحه‌ی سفید یا گیرکرده مواجه نشود.
حالت لودینگ و انتظار
حالت خطا و هشدار
حالت خالی / بدون داده
پروتوتایپ تعاملی قابل کلیک
پیش از تحویل نهایی، همه‌ی صفحات در فیگما به هم وصل می‌شوند تا جریان کاربری واقعی — از خانه تا جزئیات و تنظیمات — با کلیک تست شود، نه فقط روی کاغذ.
فایل نهایی به‌صورت لینک فیگمای قابل‌کلیک تحویل داده می‌شود؛ هر ناحیه‌ی تعاملی (دکمه، کارت، تب) به صفحه‌ی مقصد وصل است و مسیر واقعی کاربر قبل از پیاده‌سازی قابل بررسی است.
روش پیشنهادی آماده‌سازی و تحویل
کار در چهار گام مشخص پیش می‌رود؛ در پایان هر گام یک خروجی قابل بررسی تحویل داده می‌شود، نه فقط در انتهای پروژه.
تحلیل بریف و محتوا
بررسی توضیحات کارفرما، فهرست دقیق صفحات و داده‌هایی که باید روی صفحه‌ی ۳۲۰×۴۸۰ نمایش داده شود.
وایرفریم و چیدمان
چیدمان کم‌وضوح تمام صفحات برای تأیید ساختار، پیش از صرف زمان روی رنگ و جزئیات.
طراحی بصری و اجزا
پالت رنگی، تایپوگرافی، کتابخانه‌ی آیکون و اجزا، و طراحی نهایی همه‌ی صفحات و حالت‌ها.
پروتوتایپ و تحویل
اتصال صفحات در فیگما، تست جریان کاربری، و تحویل فایل نهایی لایه‌باز به همراه راهنمای اجزا.
اقلام تحویلی
- وایرفریم کم‌وضوح صفحه‌ی اصلی
- پالت رنگی و مقیاس تایپوگرافی
- کتابخانه‌ی آیکون، دکمه، سوییچ و ورودی
- طراحی نهایی صفحات خانه، جزئیات و تنظیمات
- طراحی حالت لودینگ، خطا و خالی
- نوار وضعیت و ناوبری ثابت
- پروتوتایپ قابل کلیک در فیگما
- فایل فیگمای لایه‌باز، قابل ویرایش
برآورد زمان و هزینه
هزینه بر اساس تعداد نهایی صفحات و دفعات بازبینی، پس از بررسی بریف کامل کارفرما در پیام مستقیم اعلام می‌شود.
تجربه‌ی طراحی برای صفحه‌نمایش‌های کوچک
بخشی از پروژه‌های مرتبط با رابط کاربری دستگاه‌ها و صفحات با ابعاد محدود.
پنل کنترل خانه‌ی هوشمند
رابط کاربری برای نمایشگر دیواری کنترل روشنایی، دما و پرده‌ی خودکار.
۳۲۰×۴۸۰ · لمسیساعت هوشمند ورزشی
صفحات آمار تمرین، ضربان قلب و اعلان روی صفحه‌ی گرد و مربعی کوچک.
صفحه‌ی مچی · دایرهایدستگاه پرداخت فروشگاهی
صفحه‌ی تراکنش، رسید دیجیتال و پیام خطای اتصال برای دستگاه‌های POS.
صفحه‌ی عمودی · POSترموستات دیجیتال
نمایش دما، برنامه‌ی زمان‌بندی و حالت‌های هشدار روی صفحه‌ی کوچک تعبیه‌شده.
صفحه‌ی تعبیه‌شده · Embeddedطرح رابط کاربری صفحه‌ی ۳۲۰×۴۸۰ شما آماده‌ی شروع است
برای دیدن نمونه‌کارهای بیشتر و شروع همکاری، پیام بدهید تا در همین روز بررسی و پاسخ داده شود.