دیزاین سیستم قرارداد مشترک رنگ، تایپ، فاصله و اجزای رابط است تا صفحه‌ها سلیقه‌ای ساخته نشوند. دیزاین سیستم قلموم توکن‌های زنده و اجزای واقعی را نشان می‌دهد تا طراحی و پیاده‌سازی از یک زبان استفاده کنند.
توکن رنگ
سطح، متن، مرز، برند و وضعیت از یک منبع می‌آیند. عوض کردن یک توکن، به‌جای ده‌ها کد پراکنده اعمال می‌شود.
فاصله و گوشه
فاصله‌ها و شعاع‌ها نام دارند: کنترل، کارت، بخش. عدد شانسی وسط یک کامپوننت جدید نگذار.
روشن و تیره
همان جزء باید در هر دو حالت خوانا بماند. رنگ ثابت بدون توکن این را خراب می‌کند.
توکن را به‌جای عدد خام بردار
| توکن | چه چیزی را ثابت می‌کند | اگر دور بزنی |
|---|---|---|
| رنگ سطح و متن | پس‌زمینه و خوانایی | کنتراست در حالت تیره می‌شکند |
| رنگ وضعیت | موفقیت، هشدار، خطا | دکمه خطر با دکمه اصلی قاطی می‌شود |
| فاصله | ریتم عمودی صفحه | هر کارت یک padding متفاوت دارد |
| شعاع | گوشه دکمه، کارت و بخش | محصول تکه‌تکه دیده می‌شود |
برای جزء تازه، نزدیک‌ترین الگوی موجود را پیدا کن و فقط چیزی را عوض کن که زمینه کار واقعاً فرق دارد. اگر متن روی رنگ نشسته، کنتراست رنگ را جدا بسنج. برای دستور تولید رابط هم از پرامپت طراحی شروع کن و خروجی را با همین توکن‌ها میزان کن.
- اول جزء موجود را پیدا کن، بعد جزء جدید بساز.
- رنگ را از توکن بردار، نه از یک کد که فقط در یک فایل است.
- فاصله و شعاع را از مقیاس قلموم انتخاب کن.
- حالت روشن و تیره را هر دو ببین.
- توکن‌های زنده رنگ، متن و فاصله
- اجزای واقعی به‌جای نمونه تزئینی
- قاعده یکسان برای دکمه، کارت و فرم
- کم کردن تصمیم‌های تکراری در پروژه بعدی
دیزاین سیستم جای فکر کردن را نمی‌گیرد. جلوی تکرار تصمیم‌هایی را می‌گیرد که قبلاً گرفته شده‌اند.
اگر دو دکمه در یک محصول دو شعاع گوشه دارند، هنوز دیزاین سیستم نداری.
قلموم
پرسش‌های متداول
دیزاین سیستم قلموم چیست؟
مرجع توکن‌ها و اجزای رابط قلموم: رنگ، فاصله، شعاع و الگوهایی که طراحی و توسعه هر دو از آن استفاده می‌کنند.
چرا به‌جای کد رنگ، توکن بردارم؟
چون تغییر بعدی یک‌جا اعمال می‌شود و حالت تیره و روشن با هم نمی‌شکنند.
جزء جدید را از کجا شروع کنم؟
از نزدیک‌ترین جزء موجود. فقط تفاوت واقعی زمینه را عوض کن و خوانایی متن را جداگانه بسنج.