معنا قبل از تزئین
ساختار، عنوان و اقدام اصلی باید بدون حدسزدن قابل تشخیص باشند.
دیزاین سیستم قلموم
مرجع زندهی طراحی و توسعهی تجربه قلموم؛ از توکنهای پایه تا الگوهای آماده، رفتارهای تعاملی و قواعد دسترسپذیری.
توکنهای زندهکامپوننتهای واقعیروشن و تیره
زبان طراحی قلموم
01
اصول پایه
هر تصمیم رابط باید قابلفهم، منسجم، انسانی و قابل استفاده در هر دو تم باشد.
یک زبان مشترک
فاصله، رنگ، گوشه و حرکت از توکنهای مشترک تغذیه میشوند.
گرم و حرفهای
رنگ برند، تایپوگرافی فارسی و جزئیات نرم هویت قلموم را میسازند.
برای همه
کنتراست، فوکوس، صفحهکلید و کاهش حرکت جزئی از طراحیاند.
02
سیستم رنگ
مقادیر زیر زندهاند؛ با تغییر تم، مقدار محاسبهشده و ظاهر نمونه همزمان تغییر میکند.
سطوح
متن و مرز
برند
وضعیت
رنگ دورهها
03
تایپوگرافی
سلسلهمراتب روشن، وزنهای محدود و فاصلهخط مناسب برای خواندن فارسی.
نمایشی · 64ایده را دیدنی کن
عنوان صفحه · 48طراحی برای یادگیری بهتر
عنوان بخش · 32ابزارهای کاربردی طراحان
عنوان کارت · 20دوره آموزش طراحی رابط کاربری
متن بدنه · 16 / 1.9
متنهای قلموم ساده، مستقیم و دوستانهاند. طول خطوط کنترل میشود تا خواندن محتوای آموزشی در دسکتاپ و موبایل راحت بماند.
توضیح · 13اطلاعات تکمیلی، زمان و متادیتا با کنتراست آرامتر نمایش داده میشوند.
04
فاصله، شکل و عمق
شبکهی فاصلهگذاری قابل پیشبینی و شعاعهایی متناسب با اندازهی جزء.
فاصلهها
2px
4px
8px
12px
16px
24px
32px
48px
64px
96px
گوشهها
جزئیات--gh-r-xs
فشرده--gh-r-sm
کنترل--gh-r-md
گروه--gh-r-lg
کارت--gh-r-xl
بخش--gh-r-2xl
سایهها
01020304
حرکت
حرکت کوتاه، هدفمند و قابل توقف است؛ نه تزئین بیدلیل.
05
کامپوننتها
اجزای واقعی رابط با حالتهای اصلی، فرعی، غیرفعال و بازخورد.
دکمهها
Buttonفرمها
Form controlsتگ و نشان
Chip · Badgeطراحی محصولانتخابشدهفعالدر انتظارناموفقجدید
بازخورد و بارگذاری
Alert · Progress · Skeletonبا موفقیت انجام شدتغییرات ذخیره شدند.
نیاز به بررسییکی از فیلدها کامل نیست.
عملیات ناموفقدوباره تلاش کن.
کارتها
CardFg
ابزار طراحان
آزمایشگاه فونت
فونت را با متن واقعی خودت امتحان کن.
↗
کامپوننتهای زنده محصول
این نمونهها همان قالبهای کارت سایتاند؛ عنوان، تصویر، متادیتا، قیمت و گالری از اطلاعات واقعی خوانده میشوند.
برای تایپ و طراحی
مشاهده و دانلود فونت
فونت Zentra
مرجع کامل توکنهای تنظیمپذیر
06
الگوهای ترکیبی
نمونههای تکرارشونده برای ناوبری، تب، نمایش خالی و افشای تدریجی اطلاعات.
تبها
محتوا با حفظ جایگاه و بدون پرش صفحه جابهجا میشود.
افشای اطلاعات
این کامپوننت چه زمانی مناسب است؟
وقتی اطلاعات فرعی است و نمایش همزمان همهی جزئیات تمرکز کاربر را کم میکند.
رفتار صفحهکلید
با Enter یا Space باز و بسته میشود و فوکوس واضح باقی میماند.
هنوز چیزی اینجا نیست
برای شروع اولین مورد را اضافه کن.
07
دسترسپذیری و محتوا
حداقل استاندارد تحویل هر رابط قلموم، نه مرحلهای اختیاری در انتهای کار.
متن معمولی حداقل 4.5:1 و متن بزرگ حداقل 3:1.
ترتیب فوکوس منطقی و حلقه فوکوس همیشه قابل مشاهده.
رعایت prefers-reduced-motion و پرهیز از حرکت ضرورینما.
برچسب روشن، فعل مستقیم و پیام خطایی که راهحل ارائه دهد.
هدف تعاملی ترجیحاً حداقل 44×44 پیکسل.
متن جایگزین معنادار و نسبت تصویر پایدار برای جلوگیری از پرش.
«کد تخفیف اعمال شد»
پیام کوتاه، دقیق و نتیجهمحور.
«خطایی رخ داد»
بدون توضیح و مسیر بعدی، کاربر را تنها نگذار.
توکن کپی شد