| کانال طراحی و رابط‌کاربری |

متن روی تصویر یا گرادیان وقتی کنتراست کافی نداشته باشه، حتی اگر فونت خوب باشه، تجربه کاربر رو خراب می‌کنه. مخصوصاً توی UI موبایل که کاربر زیر نور شدید صفحه رو می‌بینه. اینجا یک تریک ساده و عملی برای خواناتر کردن متن روی پس‌زمینه‌های شلوغ 👇 ۱️⃣ از لایه Overlay تیره/روشن استفاده کن روی تصویر یا گرادیان، یک لایه نیمه‌شفاف بذار تا اختلاف روشنایی بین متن و پس‌زمینه بیشتر بشه: - متن روشن ✔️ → Overlay تیره روی پس‌زمینه - متن تیره ✔️ → Overlay روشن روی پس‌زمینه مثلاً در Figma: - یک Rectangle روی تصویر بکش - رنگش رو مشکی بذار با Opacity حدود ۴۰٪ - متن سفید رو روی اون قرار بده ۲️⃣ اعداد عملی برای شروع برای UI واقعی، این تنظیم‌ها معمولاً جواب می‌ده: - Background Overlay مشکی: #000000 با ۳۲٪ تا ۴۸٪ Opacity - متن: #FFFFFF با وزن حداقل Medium این ترکیب توی اکثر موارد به نسبت کنتراست نزدیک به استانداردهای WCAG می‌رسه و روی موبایل هم خواناست. ۳️⃣ اگر پس‌زمینه خیلی رنگی است به‌جای خالص مشکی یا سفید، می‌شه از همون رنگ اصلی با Saturation کمتر و Lightness مناسب استفاده کرد؛ هم هارمونی حفظ می‌شه، هم متن واضح می‌مونه. نمونه pseudo-code برای طراحی سبک cardBackground: image cardOverlay: rgba(0, 0, 0, 0.4) cardTextColor: #FFFFFF cardTextWeight: 500 ۴️⃣ حتماً کنتراست رو چک کن بعد از تنظیم Overlay، کد رنگ متن و پس‌زمینه نهایی رو توی یک Contrast Checker تست کن. حداقل هدف برای متن معمولی، نسبت ۴٫۵:۱ هست. رفرنس کاربردی 📚 Nielsen Norman Group - Contrast and Color Use in UI: لینک مقاله امتحان این تریک توی یک یا دو اسکرین از طراحی فعلیت، معمولاً بلافاصله فرق خوانایی و حس حرفه‌ای بودن UI رو نشون می‌ده. 😉 🔖 #Design #طراحی #UI #UX #UI #UX #Contrast #Color #Accessibility #Mobile_Design 👤 Developix 💎 Channel: @DevelopixDesign

🎯 توی این پست می‌ریم سراغ یه کار کاملاً عملی: ساختن سیستم رنگ (Color System) برای UI یه اپ موبایل داخل Figma؛ دقیقاً همون چیزی که بعداً تو Design System و Design Tokenها استفاده می‌شه. ایده کلی اینه که به‌جای انتخاب تصادفی رنگ برای هر دکمه و متن، یه ساختار ثابت و قابل‌مدیریت بسازیم؛ چیزی که با رشد پروژه و تغییر برند، به‌هم نریزه. 🧩 قدم ۱: انتخاب رنگ پایه طبق Material Design طبق راهنمای رسمی Material 3 Color اول یه رنگ برند انتخاب کن: - رنگ Primary (مثلاً آبی برای اپ فین‌تک) - رنگ Secondary برای المان‌های کم‌اهمیت‌تر - رنگ Tertiary برای Accentها برای شروع می‌تونی از ابزار Color Tool در همون سایت Material استفاده کنی تا یه پالت کامل (با تیره‌روشن‌ها) بگیری. 🎛 قدم ۲: ساخت Styleهای رنگ در Figma ۱️⃣ تو Figma یه فایل مخصوص Design System بساز. ۲️⃣ از پنل Assets → Local styles → Color، برای هر رنگ یه Style بساز، مثلاً: - Primary / 40 - Primary / 80 - Neutral / 10 - Error / 40 نام‌گذاری لِولی (۱۰، ۲۰، ۳۰...) کمک می‌کنه بعداً راحت Expand یا Refactor کنی. 📐 قدم ۳: تعریف Semantic Colorها به‌جای این‌که توی UI از اسم «آبی ۴۰» استفاده کنی، یه لایه معنایی بساز: - Bg / Primary - Text / Primary - Text / Secondary - Border / Subtle - State / Hover اینا تو Figma همون Color Style هستن، فقط اسمشون معناییه. وقتی برند عوض شد، فقط Style رو آپدیت می‌کنی، نه تک‌تک فریم‌ها رو. 🧪 قدم ۴: چک کردن Contrast طبق WCAG برای خوندنی بودن متن، حداقل کنتراست مهمه. طبق WCAG 2.1 برای متن نرمال نسبت ۴٫۵:۱ لازمه. برای تست، می‌تونی از پلاگین Figma مثل Contrast یا سایت WebAIM Contrast Checker استفاده کنی. مثلاً فرض کن: - رنگ متن: #0F172A - رنگ پس‌زمینه: #F9FAFB با WebAIM چک می‌کنی که نسبتشون بالاتر از ۴٫۵ باشه. 🔧 نمونه Design Token ساده (برای Dev) وقتی با تیم Dev کار می‌کنی، می‌تونی همین Styleها رو به Design Token تبدیل کنی. یه نمونه JSON که تو Android یا Web قابل استفاده‌ست: { "color": { "bg": { "primary": "#FFFFFF", "surface": "#F9FAFB" }, "text": { "primary": "#0F172A", "secondary": "#6B7280" }, "accent": { "primary": "#2563EB" }, "s

در اکثر پروژه‌ها رنگ‌ها اولین جایی هستن که طراحی رو به‌هم می‌ریزن: هر صفحه یه رنگ، هر کامپوننت یه سایه! 😅 این‌جا Design Tokenها نجات‌مون می‌دن. امروز سراغ یه ورک‌فلو خیلی عملی می‌ریم: تعریف Design Token رنگ در Figma بر اساس توصیه‌های Material Design و WCAG، تا هم UI تمیزتری داشته باشیم هم راحت بتونیم Theme عوض کنیم. 🎯 🧩 Design Token رنگ یعنی چی؟ به‌جای استفاده از #3498db تو هر لایه، یه اسم معنی‌دار تعریف می‌کنی، مثلاً: color/primary color/on-primary color/background بعد همه‌جا فقط از این Tokenها استفاده می‌کنی. اگه رنگ برند عوض شد، فقط Token رو آپدیت می‌کنی، نه تک‌تک فریم‌ها. این همون چیزیه که تو Design Systemهای بزرگ مثل Material Design هم استفاده می‌شه. 🛠 راه‌اندازی رنگ‌ها در Figma ورک‌فلو زیر دقیقا از مستندات رسمی Figma و Google Material الهام گرفته شده: ۱️⃣ یه فایل مخصوص Design System بساز (مثلاً: Design System – Foundation). ۲️⃣ توی Local styles برید به بخش Color Styles و Styleهای پایه رو بساز: • theme/light/color/primary • theme/light/color/on-primary • theme/light/color/background • theme/light/color/surface • theme/light/color/error اگه Dark Mode هم داری، همین ساختار رو با theme/dark/... تکرار کن. ۳️⃣ از Material Design (نسخه 3) برای انتخاب رنگ اصلی کمک بگیر: Theme Builder رنگ برند رو وارد کن، Tool خودش طیف رنگ رو می‌سازه و Contrast رو طبق WCAG بررسی می‌کنه. ۴️⃣ رنگ‌های پیشنهادی رو تو Figma به Styleها نسبت بده. مثلاً: • theme/light/color/primary ← Primary رنگ M3 • theme/light/color/on-primary ← On Primary برای متن روی دکمه‌ها 📏 تست Contrast برای دسترس‌پذیری برای این‌که متن روی دکمه‌ و Background خونده بشه، نسبت کنتراست طبق WCAG باید حداقل 4.5:1 برای متن معمولی باشه. برای تست می‌تونی از این ابزار استفاده کنی: Contrast Checker فقط کافیه رنگ Token متن (مثلاً on-primary) و رنگ پس‌زمینه (مثلاً primary) رو وارد کنی. 💡 اتصال رنگ‌ها به کامپوننت‌ها وقتی Button یا Card طراحی می‌کنی، به‌جای دادن رنگ مستقیم: • Fill دکمه = theme/light/color/primary • رنگ متن = theme/light/color/on-primary اگه بعداً بخوای Dark Mode رو تست کنی، کافیه Styleها رو روی نسخ

یه کار کوچیک ولی خیلی حرفه‌ای که تو همه‌ی تیم‌های طراحی جدی می‌بینی، درست‌کردن Design Token‌های رنگ توی Figma ـه. این کار باعث می‌شه رنگ‌هات تمیز، قابل‌مدیریت و آماده برای Design System باشن؛ مخصوصاً وقتی بعداً می‌خوای Dark Mode یا چند برند مختلف رو هندل کنی. این روال بر اساس Tutorial رسمی Figma درباره Color styles و Tokens و همین‌طور توصیه‌های Material Design برای رنگ‌های Semantic ـه: Figma – Create and use color styles Material 3 – Color ۱️⃣ اول: رنگ‌هات رو Semantic ببین، نه بصری به‌جای اسم‌هایی مثل blue-light و blue-dark از اسم‌های معنی‌دار استفاده کن: • primary / primary-container برای رنگ اصلی برند • success / warning / error برای وضعیت‌ها • bg / surface / overlay برای پس‌زمینه‌ها • text-primary / text-secondary / text-inverse برای متن اینطوری اگه فردا Brand Color عوض شد، فقط مقدار Primary رو تغییر می‌دی، نه تک‌تک Frameها رو 😅 ۲️⃣ ساخت Color Styleها در Figma ۱. یه Frame خالی بساز، اسمش رو بذار مثلاً 🎨 Tokens / Colors. ۲. چندتا Rectangle بکش برای دسته‌های مختلف رنگ: Brand، Background، Text، State. ۳. روی Rectangle مربوط به رنگ اصلی برند کلیک کن، از پنل راست: • Fill رو تنظیم کن (مثلاً #6750A4 مثل Primary در Material 3). • روی آیکن چهار نقطه کنار Fill بزن. • Style > + > اسم بده: brand/primary. ۴. همین کار رو برای بقیه انجام بده؛ مثلاً: • brand/primary-container • text/primary • bg/surface • state/error ۳️⃣ ساخت ساختار منظم مثل Design Tokenها اسم‌گذاری رو شبیه Tokenهای برنامه‌نویسی کن. یه الگوی ساده که روی خیلی پروژه‌ها جواب می‌ده: semantic/role/state/variant مثال‌ها: semantic/bg/default semantic/bg/elevated semantic/text/primary semantic/text/secondary semantic/border/subtle semantic/status/error semantic/status/error-container تو Figma هر جا از / استفاده کنی، Styleها به‌صورت گروهی نشون داده می‌شن و پیدا کردنشون خیلی راحت‌تره. ۴️⃣ اتصال این Styleها به کامپوننت‌هات وقتی Button، Card یا Navigation Bar طراحی می‌کنی: • برای Background از Styleهایی مثل semantic/bg/default استفاده کن. • برای متن از semantic/text/primary. • برای Border

تو اکثر پروژه‌ها مشکل از همون اول شروع می‌شه: هر طراح یا برنامه‌نویس یه رنگ برای خودش انتخاب می‌کنه، بعد از چند ماه می‌بینیم ده‌تا آبی، پنج‌تا خاکستری و کلی Style تکراری توی فایل داریم 😅 یکی از تمیزترین راه‌حل‌ها استفاده از Design Token برای رنگ‌هاست؛ دقیقاً همون کاری که تو Material Design 3 و سیستم‌های حرفه‌ای انجام می‌شه. تو این پست می‌ریم سراغ یه ورک‌فلو ساده و واقعی برای ساخت Color Token ها تو Figma که مستقیم بشه تو Design System و بعدش تو Frontend استفاده‌شون کرد. 👇 ۱️⃣ ساخت ساختار اسم‌گذاری درست به‌جای اسم‌های حسی مثل: blue-light یا green-button از ساختار «نقش + سطح» استفاده کن: color/primary/40 color/primary/80 color/neutral/10 color/error/60 این مدل، با ساختار Material Design 3 و خیلی از Design System های مدرن هم‌سوئه و اجازه می‌ده بعداً راحت Theme عوض بشه بدون این‌که اسم‌ها بی‌معنی بشن. ۲️⃣ ساخت Color Style ها در Figma ۱) تو Figma یه Frame برای "🟦 Colors" بساز. ۲) برای هر نقش (Role) مثل Primary, Secondary, Neutral, Error چند دایره/مستطیل کنار هم بذار و درجات مختلف روشنایی رو توش بذار (مثلاً 10، 20، 40، 80). ۳) هر رنگ رو به یه Style تبدیل کن: - رنگ رو انتخاب کن. - تو پنل Fill روی چهارخونه‌ی Style کلیک کن. - روی + بزن و اسمش رو چیزی مثل این بذار: color/primary/40 color/primary/80 حالا هر کامپوننتی این Style ها رو مصرف کنه، بعداً با یه تغییر Style کل UI آپدیت می‌شه ✨ ۳️⃣ اتصال Token ها به Semantic Role ها یه مرحله حرفه‌ای‌تر اینه که از Semantic Name استفاده کنی؛ یعنی چیزی که معنی استفاده رو بگه، نه فقط رنگ رو: bg/surface/main bg/surface/on-primary text/primary text/on-primary border/subtle داخل Style واقعاً از همون color/primary/40 و بقیه استفاده می‌کنی، ولی اسم Style ها رو Semantic می‌ذاری. این‌طوری اگر بعدها بخوای Theme Dark بسازی، فقط مپ کردن بین Semantic و Color عوض می‌شه. ۴️⃣ یک نمونه واقعی: دکمه Primary برای یک Button Primary این مپ ساده خیلی جواب می‌ده: - bg/surface/main => color/primary/40 - text/on-primary => color/neutral/0 - border/subtle => color/primary/60 کافیه Button Component فقط این Style ها رو استفاده کنه؛ حالا اگر اقتصادی‌

در طراحی UI خیلی وقت‌ها مشکل اصلی «بد بودن فونت» نیست، «کم بودن کنتراست» بین متن و پس‌زمینه‌ست. کاربر روی موبایل، زیر نور، با خستگی چشم نگاه می‌کند؛ اگر کنتراست درست نباشد، حتی بهترین تایپوگرافی هم شکست می‌خورد. 🔍 🎯 نکتهٔ عملی برای متن‌های اصلی (Body Text)، سعی کن نسبت کنتراست حداقل مطابق WCAG زیر باشد: • متن معمولی (small text): حداقل 4.5:1 • متن بزرگ (حداقل 18pt یا bold 14pt): حداقل 3:1 این استاندارد توی خیلی از Design Systemها مثل Material Design رعایت می‌شود و روی خستگی چشم و فهم سریع محتوا تاثیر مستقیم دارد. 👀 🧪 مثال ساده (Pseudo Code رنگ) // رنگ پس‌زمینه روشن bgColor = #FFFFFF // رنگ متن خاکستری کمرنگ (کنتراست بد) textColorBad = #BDBDBD // تقریبی: 2.5:1 ❌ // رنگ متن خاکستری تیره (کنتراست خوب) textColorGood = #424242 // تقریبی: 7:1 ✅ تفاوت ظاهری ممکنه خیلی کم به‌نظر برسد، اما روی صفحه موبایل، مخصوصاً در نور کم یا زیاد، خوانایی textColorGood خیلی بهتر است. 📌 چند نکتهٔ سریع در UI • برای متن روی پس‌زمینه رنگی (مثلاً دکمه‌ها)، همیشه کنتراست را چک کن، مخصوصاً روی حالت Disabled. • روی پس‌زمینه‌های عکس‌دار (Hero، Banner)، یا از لایه مشکی/سفید با شفافیت استفاده کن، یا متن را داخل Surface جداگانه بگذار. • برای Secondary Text و Caption هم حداقل 4.5:1 را حفظ کن؛ خاکستری خیلی روشن معمولاً فقط روی پس‌زمینه کاملاً تیره جواب می‌دهد. ابزارهای آنلاین مثل Contrast Checker کمک می‌کنند تصمیم‌های رنگی کاملاً آگاهانه و مطابق استاندارد بگیری. دفعه بعد که UI می‌سازی، فقط با یک اصلاح کوچک در کنتراست، می‌شود حس «طراحی حرفه‌ای» به محصول اضافه کرد. ✨ 🔗 مرجع: WCAG 2.1 – Contrast (Minimum) 🔖 #Design #طراحی #UI #UX #UI #UX #color #contrast #accessibility #WCAG #design_system 👤 Developix 💎 Channel: @DevelopixDesign

تو خیلی از پروژه‌های UI/UX مشکل از همون اول از «رنگ‌ها» شروع می‌شه؛ هر کسی یه رنگ می‌ذاره، بعد از چند هفته دیگه کسی نمی‌دونه رنگ اصلی برند کدومه 😅 امروز یه ورک‌فلو خیلی عملی برای ساختن Color Design Tokens تو Figma رو مرور می‌کنیم؛ دقیقاً چیزی که تو داکیومنت رسمی Figma Color Styles و گایدلاین‌های Material Design 3 هم روش تأکید شده ✅ ۱️⃣ اول: نقش رنگ‌هاتو بر اساس UI تعریف کن به‌جای این‌که بگی "آبی تیره" یا "قرمز روشن"، از semantic tokens استفاده کن: • primary / primary-container • secondary • error • background / surface • on-primary / on-surface (رنگ متن روی عنصرها) این همون چیزیه که Material Design 3 پیشنهاد می‌کنه: رنگ‌هات رو بر اساس معنا و نقش اسم‌گذاری کن، نه بر اساس خودِ رنگ. ۲️⃣ ساختن Color Styleها در Figma 🎯 ۱) تو Figma یک فایل جدا فقط برای Design System بساز. ۲) ابزار Fill رو انتخاب کن و رنگ برندت رو وارد کن. ۳) روی نقطه‌ی رنگ تو پنل راست کلیک کن و "Create style…" رو بزن. ۴) اسمش رو چیزی مثل: color / primary / base بذار. ۵) همین رو برای سایه‌ها و حالت‌ها ادامه بده: color / primary / hover color / primary / disabled اسم‌گذاری سلسله‌مراتبی باعث می‌شه تو Asset Panel همه‌چیز منظم و سریعی پیدا بشه. ۳️⃣ تراز کردن با Contrast و WCAG ♿ برای متن‌هات باید کنتراست رو با گایدلاین WCAG چک کنی. می‌تونی از افزونه‌های Figma مثل: Able – Frictionless Accessibility استفاده کنی تا ببینی کدوم ترکیب رنگ‌هات به حداقل کنتراست ۴.۵:۱ برای متن‌های معمولی می‌رسه. نمونه نام‌گذاری توی Design Tokenها (مثلاً برای Web) این یه مثال ساده از خروجی تو فایل tokens.json یا Style Dictionary هست که مستقیم از Styleهای Figma الهام می‌گیره: { "color": { "primary": { "base": "#6750A4", "hover": "#5B4794", "disabled": "#E6E0F8" }, "background": { "base": "#FFFBFE" }, "on": { "primary": "#FFFFFF", "background": "#1C1B1F" }, "error": { "base": "#B3261E" } } } تو پروژه‌های Multi-platform (Android, iOS, Web) همین Tokenها می‌تونن به XML، Color Set یا CSS Var تبدیل بشن؛ بدون این‌که معنای رنگ‌ها عوض بشه. ۴️⃣ چند نکته ریز ول

در طراحی UI خیلی وقت‌ها فقط با یک تغییر ساده در رنگ می‌شود رفتار و وضعیت یک کامپوننت را برای کاربر کاملاً شفاف کرد. یکی از مهم‌ترین جاها، دکمه‌ها (Buttons) و حالت‌های مختلفشان است. 🟢 ایده: برای هر حالت (State) دکمه، یک رنگ و استایل مشخص و سازگار در کل محصول داشته باش: • حالت عادی (Default) • حالت Hover / Pressed • حالت Disabled • حالت Error / Destructive این کار باعث می‌شود کاربر بدون فکر اضافه، فقط با دیدن رنگ و کنتراست، متوجه شود کدام اکشن فعال، غیرفعال یا خطرناک است. ✅ مثال عملی (بر اساس Material Design): • Action اصلی: رنگ پر (Filled) با کنتراست بالا نسبت به پس‌زمینه • Secondary: حاشیه‌دار (Outlined) با رنگ ملایم‌تر • دکمه خطرناک (Delete): قرمز با کنتراست بالا • Disabled: کاهش Opacity تا جایی که هنوز خوانا باشد ولی واضحاً غیرقابل‌کلیک به‌نظر برسد نمونه توصیفی ساده برای یک Button System: Primary: #2962FF (Default) Primary: #0039CB (Pressed) Primary: rgba(41,98,255,0.12) (Disabled bg) Danger: #D32F2F (Default) Danger: #9A0007 (Pressed) Text on Btn: #FFFFFF ✨ چند نکته UX مهم: • برای حالت Disabled فقط به Opacity تکیه نکن؛ کنتراست متن را هم چک کن که با WCAG حداقل > 3.0 در حالت خوانا باشد. • رنگ‌های Action اصلی و خطرناک را خیلی به هم نزدیک انتخاب نکن تا کاربر در لحظه اشتباه کلیک نکند. • در تمام صفحات از یک System ثابت استفاده کن؛ Primary امروز آبی و فردا بنفش نشود. 🔍 منبع پیشنهادی برای دیدن مثال‌های خوب: راهنمای Buttons در Material Design 3 امروز اگر در Figma یک Style کوچک برای رنگ‌های State بسازی، فردا در کل Design System وقت و انرژی زیادی ذخیره می‌شود و رفتار UI برای کاربر قابل‌پیش‌بینی و قابل‌اعتماد می‌ماند. 🔖 #Design #طراحی #UI #UX #UI #UX #Color #Design_System #Buttons 👤 Developix 💎 Channel: @DevelopixDesign

وقتی رنگ متن و پس‌زمینه به‌خوبی از هم جدا نباشند، حتی یک طراحی شیک هم شلخته و خسته‌کننده دیده می‌شود. کنتراست درست، هم ظاهر رو بهتر می‌کند هم تجربه کاربری رو؛ مخصوصاً روی موبایل و زیر نور زیاد ☀️ ایده اصلی 🧠 برای متن‌های اصلی (Body) و متن‌های کوچک، بهتره نسبت کنتراست بین رنگ متن و پس‌زمینه طبق WCAG حداقل این‌ها باشد: • متن نرمال: نسبت کنتراست حداقل 4.5:1 • متن بزرگ (حداقل 18pt یا Bold 14pt): حداقل 3:1 ترفند عملی در Design Tool 🧰 در Figma یا ابزارهای مشابه، قبل از نهایی کردن رنگ‌ها، سریع آن‌ها را با یک اسکریپت ساده تست کنتراست کن. حتی اگر برنامه‌نویس نباشی، این منطق کمک می‌کند ترکیب‌های «خطرناک» را بشناسی. نمونه در Python برای محاسبه کنتراست بین دو رنگ Hex: def luminance(r, g, b): c = [v / 255 for v in (r, g, b)] adj = [v / 12.92 if v <= 0.03928 else ((v + 0.055) / 1.055) ** 2.4 for v in c] return 0.2126 * adj[0] + 0.7152 * adj[1] + 0.0722 * adj[2] def contrast_ratio(c1, c2): L1 = luminance(*c1) L2 = luminance(*c2) L1, L2 = max(L1, L2), min(L1, L2) return (L1 + 0.05) / (L2 + 0.05) چند نکته UI/UX ✅ • خاکستری‌های خیلی روشن روی پس‌زمینه سفید، معمولاً برای متن ریز شکست می‌خورند. • برای حالت Disabled، بهتر است کنتراست را ضعیف‌تر کنی اما نه آن‌قدر که کاملاً ناخوانا شود. • روی لایت و دارک تم جداگانه کنتراست را چک کن؛ یک رنگ ممکن است در Light عالی باشد ولی در Dark افتضاح. در پروژه بعدی، قبل از تحویل، فقط ۵ دقیقه برای چک کنتراست بگذار؛ تأثیرش روی حس حرفه‌ای بودن طراحی خیلی زیاد است ✨ مرجع پیشنهادی (طبق WCAG 2.1): Contrast Minimum – W3C 🔖 #Design #طراحی #UI #UX #UI #UX #Color #Contrast #Accessibility #Design 👤 Developix 💎 Channel: @DevelopixDesign

🎨 یک ترفند سریع برای کنتراست رنگ و خوانایی بهتر تو UI قشنگ‌ترین پالت رنگ هم اگر کنتراست خوبی نداشته باشه، متن‌هات عملاً "نامرئی" می‌شن 😅 مخصوصاً روی موبایل و زیر نور. ✅ قانون ساده: برای متن‌های اصلی، نسبت کنتراست حداقل 4.5:1 با پس‌زمینه رو رعایت کن (طبق WCAG). این یعنی مثلاً: • متن خاکستری روشن روی پس‌زمینه سفید ❌ • متن تقریباً مشکی روی پس‌زمینه سفید ✅ یه مثال رنگ: • Background: #FFFFFF • Text ضعیف: #BDBDBD (کنتراست کم) • Text درست: #212121 (کنتراست مناسب) مثلاً در CSS این‌جوری فرق می‌کنه: /* خوانایی ضعیف */ body { background-color: #ffffff; color: #bdbdbd; } /* خوانایی بهتر و استانداردتر */ body { background-color: #ffffff; color: #212121; } ✨ نکته کاربردی: توی Figma حتماً از افزونه‌های چک کنتراست (مثل Contrast) استفاده کن؛ هرجا متن روی تصویر، گرادینت یا کارت رنگی گذاشتی، سریع کنتراست رو تست کن. برای جزییات بیشتر استاندارد کنتراست: W3C WCAG – Contrast (Minimum) 👀 دفعه بعد که UI تحویل می‌دی، قبل از هر چیز کنتراست رو چک کن؛ تاثیرش روی تجربه کاربر واقعاً چشم‌گیره. 🔖 #Design #طراحی #UI #UX #UI #UX #Contrast #Color #Accessibility #Typography #WCAG 👤 Developix 💎 Channel: @DevelopixDesign

🧩 فضای خالی، عنصر نامرئی که UI را حرفه‌ای می‌کند خیلی وقت‌ها برای "پر کردن" صفحه وسوسه می‌شود همه‌جا متن و کامپوننت بگذاریم، اما درست استفاده کردن از فضای خالی (White Space) باعث می‌شود رابط‌کاربری مرتب‌تر، قابل‌اسکن‌تر و حرفه‌ای‌تر به‌نظر برسد. 🧘‍♂️ نکته کلیدی: فاصله‌های عمودی و افقی را آگاهانه و یکنواخت تنظیم کن؛ مثلاً یک سیستم 4px یا 8px. این کار هم در Figma و هم در کد کمک می‌کند ساختار تمیز داشته باشی. مثال ساده برای فاصله‌گذاری یکنواخت بین آیتم‌های لیست: .list-item { padding: 8px 16px; } .list-item + .list-item { margin-top: 8px; /* فاصله عمودی ثابت بین آیتم‌ها */ } 🔍 چرا مفید است؟ • المان‌های مرتبط را با فاصله کم‌تر، و بخش‌های جدا را با فاصله بیش‌تر از هم قرار بده. • چشم کاربر راحت‌تر ساختار را تشخیص می‌دهد و سریع‌تر محتوا را اسکن می‌کند. برای الهام گرفتن از نمونه‌های خوب فاصله‌گذاری، راهنمای Layout در Material Design عالی است 👇 material.io &mdash; Spacing Guidelines 🪄 دفعه بعد که UI را مرور می‌کنی، فقط با تنظیم فاصله‌ها سعی کن بدون تغییر رنگ و تایپوگرافی، حس حرفه‌ای‌بودن را بالا ببری. 🔖 #Design #طراحی #UI #UX #UI #UX #White_Space #Layout #Spacing #Material_Design 👤 Developix 💎 Channel: @DevelopixDesign

🎨 ساخت سیستم رنگ حرفه‌ای با Design Token در Figma خیلی وقت‌ها طراحی‌هامون از یه پروژه به پروژه‌ی دیگه شبیه هم‌دیگه‌ست، ولی هر بار رنگ‌ها رو دستی کپی می‌کنیم، اسم‌گذاری نداریم، یا وقتی برند عوض می‌شه، نصف فایل‌ها خراب می‌شن. راه‌حل تمیز و حرفه‌ای این داستان: ساختن Color Design Token توی Figma 💡 اینجا یه ورک‌فلو واقعاً قابل‌استفاده بر اساس داکیومنت رسمی Figma و Material Design داریم: Figma – Create color styles Material Design 3 – Color ۱. تعریف لایه‌ اول: نقش رنگ، نه اسم رنگ 🎯 به‌جای این‌که اسم بدی «آبی پررنگ» یا «سبز لجنی»، از اسم‌های بر پایه‌ی نقش استفاده کن: • primary / primary-container • secondary / secondary-container • surface / surface-variant • error این دقیقاً همون رویکردیه که Material Design پیشنهاد می‌ده. رنگ واقعی (مثلاً #6750A4) بعداً عوض می‌شه، ولی نقش primary همیشه همونه. ۲. ساخت Color Style توی Figma 🎛 ۱) یه Rectangle بکش. ۲) رنگی که برای primary می‌خوای رو انتخاب کن. ۳) توی پنل Fill روی آیکن Style (چهار نقطه) بزن و + رو انتخاب کن. ۴) اسمش رو چیزی مثل این بذار: color / light / primary همین الگو رو برای حالت‌های دیگه ادامه بده: color / light / on-primary color / light / surface color / light / on-surface color / dark / primary color / dark / on-primary ... این ساختار پوشه‌ای توی Figma کمکت می‌کنه بعداً راحت سوئیچ کنی بین Light و Dark. ۳. Sync با Design Token ذهنی 🧠 کاری که داری می‌کنی در عمل همون Design Token ساختنه؛ فقط به‌جای JSON داری از Styleهای Figma استفاده می‌کنی. اگر بعداً تیم‌تون رفت به سمت Design Token واقعی (مثلاً با Style Dictionary)، همین نام‌گذاری مستقیماً قابل مپی شدنه. یه نمونه ساختار توکِن (فقط برای درک ذهنی، نه کدنویسی): { "color": { "light": { "primary": "#6750A4", "on-primary": "#FFFFFF" }, "dark": { "primary": "#D0BCFF", "on-primary": "#381E72" } } } توی Figma همون‌ها رو به‌صورت Style تعریف می‌کنی، ولی منبع فکری یکیه. ۴. از HSL و Contrast هم غافل نشو 🔍 برای ساختن سایه‌ها (tone) و روشنی‌های مختلف، از منطق HSL استفاده کن: Hue ثابت، Lightness رو کم‌وزیاد کن. بعد حتماً با ابزا

در اکثر پروژه‌ها مشکل از همین‌جا شروع می‌شود: المان‌ها «تقریباً» تراز هستند، فاصله‌ها «تقریباً» یکی است و آخر سر UI شلخته به نظر می‌رسد. امروز می‌رویم سراغ یک مهارت خیلی عملی: طراحی Layout Grid سیستمی در Figma برای صفحات وب / Desktop (بر اساس توصیه‌های Material Design و الگوهای رایج 12-Column Grid). 🧩 ایده‌ی اصلی وقتی برای هر صفحه یک Grid ثابت و قابل تکرار داشته باشی: • فاصله‌ها و ستون‌ها استاندارد می‌شوند 🧱 • تیم راحت‌تر Design را به Frontend تحویل می‌دهد 🔁 • تغییر Layout در آینده خیلی کم‌هزینه‌تر می‌شود ⚙️ ساخت یک 12-Column Grid در Figma این مثال برای یک صفحه Desktop با عرض 1440px است (یکی از رایج‌ترین Breakpoint ها): ۱️⃣ یک Frame جدید بساز: • ابزار Frame را انتخاب کن و از بالا Desktop → 1440 را بزن. ۲️⃣ Grid را فعال کن: • Frame را انتخاب کن. • در پنل راست، بخش Layout grid روی + کلیک کن. • روی آیکن چهارخونه کلیک کن و نوع را از Grid به Columns تغییر بده. ۳️⃣ تنظیمات پیشنهادی Columns 🧮 • Count: 12 • Type: Stretch • Margin: 80 (راست)، 80 (چپ) → مجموعاً 160px فضای اطراف • Gutter: 24px (فاصله‌ی بین ستون‌ها) این ترکیب، یک Grid تمیز و استاندارد برای وب‌اپ‌ها و داشبوردها می‌دهد که با خیلی از Design System ها هم‌خوان است. 📏 تنظیم 8pt System برای Spacing هم‌زمان با Grid، فاصله‌های داخلی و خارجی را هم روی مضرب‌های 8 تنظیم کن (8, 16, 24, 32...). این کار هم در Design و هم در پیاده‌سازی CSS کمک زیادی می‌کند. یک مثال ساده از فواصل در بخش کارت‌ها: Card Padding: 24px Gap بین آیکن و متن: 8px Gap بین تیتر و توضیح: 4 یا 8px Gap بین کارت‌ها در لیست: 16 یا 24px 📌 نکته‌ی مهم برای Responsive وقتی Grid Type روی Stretch است، ستون‌ها متناسب با عرض Frame کش می‌آیند، ولی Margin و Gutter ثابت می‌مانند. برای Breakpoint های دیگر (مثلاً 1024 و 768)، حتماً Frame جدا با Grid تنظیم‌شده‌ی خودش بساز. 🔍 منابع واقعی برای مطالعه‌ی بیشتر • Material 3 Layout: m3.material.io/foundations/layout/understanding-layout/overview • مقاله مفید درباره 8pt Grid از واحد طراحی iOS/Android: builttoadapt.io/intro-to-the-8-point-grid-system ✅ نکات ریز اما مهم • Text و Component های اصلی را روی ستون‌ها

‏🎯 ساخت یک کامپوننت دکمه حرفه‌ای در Figma (قابل‌استفاده‌مجدد) یکی از کارهای خیلی روزمره توی UI Design، ساختن دکمه‌ست. ولی اگر هر بار برای هر صفحه دکمه رو از صفر بسازی، خیلی زود همه‌چیز شُلخته و مدیریت‌ناپذیر می‌شه 😅 توی این پست با هم یک Button Component تمیز و مقیاس‌پذیر توی Figma می‌سازیم؛ چیزی شبیه الگوهای Material Design Buttons که به‌راحتی بشه برای حالت‌های مختلف (Primary, Secondary, Disabled, Icon) ازش استفاده کرد. ۱️⃣ طراحی پایه دکمه • یک Frame جدید بساز و اندازه رو مثلاً بذار 48×120. • گوشه‌ها رو 8px گرد کن (Corner Radius = 8). • رنگ پس‌زمینه رو روی یه رنگ Primary از سیستم رنگت بذار (مثلاً #1E88E5). • یک متن وسطش بذار: «Button» با وزن Medium و سایز 14 یا 16. اینجا مهمه که Text رو وسط‌چین و Auto Width یا Auto Layout رو درست تنظیم کنی تا بعداً با تغییر متن، دکمه به‌هم نریزه. ۲️⃣ فعال‌کردن Auto Layout برای کنترل Padding روی Frame اصلی دکمه، از پنل راست Auto Layout رو فعال کن: • جهت: Horizontal • Alignment: Center & Center • Padding افقی: مثلاً 16–24px • Padding عمودی: 10–12px • Spacing between items: 8 (اگر آیکن اضافه شد، به‌درد می‌خوره) حالا اگر متن رو عوض کنی، دکمه خودش به‌صورت Responsive رشد می‌کنه. این همون چیزیه که تو راهنماهای رسمی Figma برای Button پیشنهاد می‌شه (می‌تونی نمونه رو تو Figma Auto Layout ببینی). ۳️⃣ تبدیل به Component + Variant • Frame دکمه رو انتخاب کن و از بالا روی Create component بزن. • حالا از پنل راست روی + کنار Variants کلیک کن تا چند Variant بسازی: – primary / enabled – primary / hover – primary / disabled – primary / with-icon به هر Variant یک Property بده؛ مثلاً: Type = Primary State = Enabled | Hover | Disabled Icon = True | False این دقیقاً همون مدلیه که تو Figma Variants پیشنهاد شده و کمک می‌کنه طراح و دولوپر یک زبان مشترک داشته باشن. ۴️⃣ تنظیم حالت‌ها (States) 📌 چند پیشنهاد براساس Material Design: • Hover: همون رنگ Primary با یک Overlay ملایم (مثلاً +8% Opacity سیاه). • Pressed: کمی تیره‌تر یا با Shadow کمتر. • Disabled: پس‌زمینه خاکستری روشن، متن با Opacity حدود 38%. فقط حواست باشه کنتراست رنگ متن و پس‌ز

در Figma اگر هنوز از Frame‌های ثابت و دستی استفاده می‌کنی، Auto Layout می‌تونه زندگی‌ات رو خیلی راحت‌تر کنه 😄 مخصوصاً برای چیزهایی مثل کارت محصول، کارت خبر یا هر کامپوننتی که قراره روی چند سایز اسکرین جواب بده. اینجا یه ورک‌فلو واقعی و ساده‌ست بر اساس داک رسمی Figma: Create dynamic designs with Auto layout 🧩 سناریو: کارت محصول واکنش‌گرا فرض کن تو یه اپ فروشگاهی کار می‌کنی و یه کارت لازم داری که: - بالا عکس محصول باشه - زیرش عنوان - زیر عنوان، قیمت و دکمه Add to Cart کنار هم - تو موبایل و دسکتاپ بدون شکستن، خودش رو Adapt کنه ۱️⃣ ساخت اسکلت کارت - یه Frame بساز (F) - توش ۳ آیتم بذار: Image، Title، Row پایینی (Price + Button) - حالا روی Frame اصلی از پنل راست، Auto layout رو فعال کن (یا Shift+A) - Direction رو بذار روی عمودی (Vertical) - Spacing بین آیتم‌ها رو مثلاً 8 یا 12 بذار که ریتم خوبی بده 🔁 ۲️⃣ کنترل Padding و Radius کارت - روی همون Frame اصلی: - Padding افقی/عمودی رو مثلاً 16 بذار - Corner Radius مثلاً 12 تا کارت نرم و مدرن بشه - Fill کارت رو یه رنگ خنثی روشن انتخاب کن (مثلاً #FFFFFF روی پس‌زمینه خاکستری روشن) ۳️⃣ ردیف قیمت و دکمه با Auto Layout افقی - Price و Button رو انتخاب کن - Shift+A تا یه Auto layout افقی بسازی - Justify content رو روی "Space between" بذار تا دو سر کارت وایسن - Alignment عمودی رو وسط تنظیم کن تا Price و Button روی یک خط باشن ۴️⃣ رفتار متن و دکمه روی Resize - روی کارت اصلی، از قسمت Resizing، عرض رو روی "Fill container" برای متن عنوان بذار - برای Image می‌تونی "Fixed width" بذاری که پروپورشن ثابت بمونه - دکمه رو تو Auto layout افقی روی Hug content بذار که با طول متن خودش تنظیم بشه ✅ ۵️⃣ تست در چند سایز (واقعا مهم برای UI/UX) - کارت رو انتخاب کن و از Scale استفاده نکن؛ فقط Width رو با درگ کردن Handleها یا وارد کردن عدد عوض کن - ببین متن رپ می‌شه؟ فاصله‌ها منطقی می‌مونن؟ چیزی نمی‌چسبه به لبه‌ها؟ این دقیقاً همون چیزیه که تو داک رسمی Figma هم تاکید شده: اول رفتار، بعد سایز. ۶️⃣ نمونه Auto Layout واقعی (کد JSON Frame) چون اینجا کد برنامه‌نویسی نداریم، یه نمونه JSON از ساختار Auto layout که Figma API تولید می‌کنه رو می‌ذارم که ببینی

🎬 ساخت پروتوتایپ اسکرول اینتراکتیو در Figma خیلی وقت‌ها توی طراحی صفحه موبایل یا وب، فقط دیدن اسکرین‌های ثابت کافی نیست. لازم کارفرما یا دولوپر دقیق ببینه کاربر چطور اسکرول می‌کنه، هدر چطوری Sticky می‌مونه، یا کارت‌ها موقع اسکرول چه حسی می‌دن. این‌جا Prototype توی Figma به‌کمک ما میاد 🎯 این پست بر اساس ورک‌فلو رسمی مستندات Figma برای پروتوتایپ (Figma Help Center – Prototype flows and connections) نوشته شده و یه سناریوی کاملا واقعی رو پوشش می‌ده: ساخت یک لیست اسکرول‌دار با هدر Sticky و Animation نرم. ۱️⃣ آماده‌سازی Frame اصلی • یک Frame موبایل بساز (مثلا iPhone 14 Pro). • داخلش یک Header در بالا طراحی کن (لوگو، Title، آیکون سرچ). • زیر هدر، چندتا Card تکراری بذار (لیست خبر، محصول، یا هر دیتای واقعی). ۲️⃣ فعال کردن Scroll عمودی طبق راهنمای رسمی Figma برای Scrolling behavior: • Frame موبایل رو انتخاب کن. • توی پنل راست، بخش Prototype رو باز کن. • از قسمت Overflow behavior گزینه Vertical scrolling رو انتخاب کن. حالا اگر ارتفاع محتوا بیشتر از ارتفاع Frame باشه، توی Preview می‌تونی اسکرول کنی ✅ ۳️⃣ Sticky کردن Header (Position: Fixed) یکی از چیزهایی که خیلی توی پروژه‌های واقعی می‌بینیم، Sticky Headerـه. طبق مستند Fixed objects in prototyping توی Figma: • خود Header رو انتخاب کن. • در پنل راست، توی بخش Design قسمت Constraints رو پیدا کن. • گزینه Fix position when scrolling رو تیک بزن. حالا توی Preview، محتوا اسکرول می‌شه ولی Header همون بالا می‌مونه، مثل یه اپ واقعی 📱 ۴️⃣ اضافه کردن Micro Interaction روی کارت‌ها برای اینکه Prototype فقط اسکرول خشک نباشه، یه اینتراکشن ساده روی Cardها اضافه کن: • یک Variant دوم برای Card بساز (مثلا با Shadow بیشتر یا Background کمی تیره‌تر). • Cardها رو به‌صورت Component Set دربیار. • توی تب Prototype روی Variant اصلی کلیک کن و یک Interaction بساز: On Tap → Change To → Variant Hover Animation: Smart Animate Easing: Ease out Duration: 150ms حالا موقع کلیک روی Card توی Preview، یه تغییر نرم و طبیعی می‌بینی که حس Product واقعی می‌ده ✨ ۵️⃣ تنظیم Flow و Preview حرفه‌ای برای اینکه Prototype مرتب و قابل‌ارائه باشه: • روی Frame اصلی، از ت

🎯 ‏طراحی یک سیستم تایپوگرافی واکنش‌گرا در Figma تایپوگرافی قوی نصف مسیر یک UI خوبه. اگه فونت، سایز و فاصله‌ها روی هر اسکرین یکنواخت نباشه، حتی بهترین رنگ‌ها و آیکون‌ها هم حس «غیرحرفه‌ای» می‌دن. توی این پست، خیلی عملی می‌ریم سراغ ساخت یک Type Scale تمیز و قابل‌استفاده برای وب / موبایل، بر اساس راهنمای Material Design 3، و پیاده‌سازیش داخل Figma. ۱️⃣ انتخاب پایه‌ی تایپوگرافی اول یک Base Size انتخاب کن: • برای وب: معمولاً 16px • برای موبایل: می‌تونی 14–16px رو تست کنی این Base می‌شه نقطه‌ی شروع همه‌ی Styleها؛ یعنی مثلاً Body، بعد از اون Headlineها، Caption و غیره. ۲️⃣ ساخت Type Scale منطقی Material Design پیشنهاد می‌ده چند سطح مشخص داشته باشی: • Display (بزرگ‌ترین تیترها) • Headline • Title • Body • Label لازم نیست همه‌ی سطح‌ها رو کپی کنی، ولی می‌تونی مثلاً این ترکیب رو بسازی: • Display / H1 • Headline / H2 • Title • Body (Regular + Medium) • Caption / Label به‌جای انتخاب تصادفی سایز، یک نسبت ثابت در نظر بگیر (مثلاً 1.25): • Body: 16px • Title: 20px (16 × 1.25) • Headline: 25px تقریباً (20 × 1.25) • Display: حدود 31px (25 × 1.25) این نسبت باعث می‌شه تایپوگرافی «هماهنگ» دیده بشه، نه وصله‌پینه‌ای 😄 ۳️⃣ ساخت Text Styleها در Figma حالا نوبت پیاده‌سازی توی Figma ست: • یک Text بنویس، فونت اصلی رو انتخاب کن (مثلاً Vazirmatn یا IranYekan). • اندازه، وزن و Line height رو تنظیم کن. • از پنل راست روی چهار نقطه‌ی Style کلیک کن و Create style… رو بزن. • برای نام‌گذاری، از ساختار سیستمی استفاده کن: type / display / xl type / headline / lg type / title / md type / body / md type / label / sm این مدل نام‌گذاری (Category / Role / Size) هم توی Design System های بزرگ استفاده می‌شه و هم توی تیم، سریع قابل‌فهمه. ۴️⃣ تنظیم Line Height و Letter Spacing • برای متن‌های طولانی (Body)، Line height بین 140% تا 160% خوانایی خوبی می‌ده. • برای تیترهای بزرگ، می‌تونی Line height رو کمتر (110–120%) بگیری تا جمع‌وجورتر بشه. • توی زبان فارسی معمولاً نیازی به Letter spacing زیاد نیست؛ مگر توی Labelهای کوچک. یک نکته‌ی مهم از طرف WCAG: فاصله‌ی خطوط کافی کمک می‌کنه متن روی اسکرین خسته

🎯 ترفند سریع: سیستم فاصله‌گذاری ۴–۸–۱۲ توی UI یکی از ساده‌ترین راه‌ها برای تمیزتر شدن UI اینه که برای فاصله‌ها (spacing) از یه «سیستم» ثابت استفاده بشه، نه حدس و احساس لحظه‌ای. این کار هم طراحی رو منظم‌تر می‌کنه، هم دستِ دولوپر رو برای پیاده‌سازی راحت‌تر. ✨ ایده‌اش اینه که همه‌ی فاصله‌ها رو از مضرب‌های ۴ یا ۸ انتخاب کنی: مثلاً ۴، ۸، ۱۲، ۱۶، ۲۰، ۲۴ پیکسل. این‌طوری فاصله‌ی بین کارت‌ها، دکمه‌ها، سکشن‌ها و… همه یه ریتم مشخص پیدا می‌کنن و طراحی کمتر شلوغه. مثال ساده با CSS برای پیاده‌سازی توی Design System: .spacing-4 { margin: 4px; } .spacing-8 { margin: 8px; } .spacing-12 { margin: 12px; } .spacing-16 { margin: 16px; } این رویکرد توی Material Design هم پیشنهاد شده و باعث می‌شه در مرور زمان، اضافه کردن کامپوننت‌های جدید بدون به‌هم‌ریختگی بصری انجام بشه. 💡 امروز فقط فاصله‌های صفحه‌ی بعدی رو با این سیستم هماهنگ بشه؛ تفاوت نظم بصریش کاملا قابل حس می‌شه. منبع: Material Design – Layout 🔖 #Design #طراحی #UI #UX #UI #UX #Spacing #Design_System #Material_Design #Layout 👤 Developix 💎 Channel: @DevelopixDesign

‏🎨 تا حالا صفحه‌ای طراحی شده که وقتی دیتا نیست، عملاً یک صفحه خالی و سرد تحویل کاربر بدهد؟ همینجا فرصت طلایی UX از بین می‌رود. Empty State یا «حالت خالی»، جایی است که کاربر بیشتر از همیشه به راهنمایی نیاز دارد؛ مثلا اولین باری که لیست نوتیفیکیشن، تسک‌ها یا علاقه‌مندی‌ها خالی است. ✅ چند نکته کاربردی: • یک پیام واضح بنویس که بگوید چرا اینجا خالی است. • یک Call to Action روشن بگذار؛ مثلا دکمه «اضافه کردن آیتم جدید». • از یک آیکن یا تصویر ساده استفاده کن؛ نه خیلی شلوغ، نه خیلی خشک. • متن را کوتاه، دوستانه و بدون لحن خطاپرست بنویس. نمونه متن ساده: # متن پیشنهادی برای Empty State عنوان: «هنوز کاری اینجا نیست» توضیح: «اولین تسک‌ات را بساز تا همیشه جلوی چشم‌ات باشد.» دکمه: «ساخت تسک جدید» این طراحی ساده، هم حس گم شدن را کم می‌کند، هم کار بعدی کاربر را شفاف می‌کند و نرخ رها کردن صفحه را پایین می‌آورد. 🚀 امتحانش کن روی یک صفحه خالی در محصولت و ببین چقدر تجربه را انسانی‌تر می‌کند. 🔖 #Design #طراحی #UI #UX #Empty_State #UX_Writing #UI_Design #Interaction_Design #Product_Design 👤 Developix 💎 Channel: @DevelopixDesign

‏یک صفحه تنظیمات شلوغ، حتی توی بهترین محصول، حس «پیچیدگی بی‌هدف» می‌دهد. با چند تغییر کوچک، تجربه کاربر خیلی نرم‌تر می‌شود. 😊 ۱️⃣ تنظیمات را گروه‌بندی کن به‌جای یک لیست بلند، گزینه‌ها را در گروه‌های معنایی بچین: اعلان‌ها، حریم‌خصوصی، نمایش، حساب کاربری و… این کار اسکن‌کردن صفحه را سریع‌تر می‌کند و کاربر حس گم‌شدن ندارد. ۲️⃣ فقط مهم‌ها را در لایه اول نشان بده گزینه‌های پیشرفته را زیر یک لینک «تنظیمات پیشرفته» پنهان کن. این الگو توی Material Design و iOS هم استفاده می‌شود و برای بیشتر کاربران فقط گزینه‌های اصلی کافی است. ✨ ۳️⃣ از متن‌های راهنما کوتاه استفاده کن برای سوییچ‌ها و چک‌باکس‌ها، یک زیرعنوان کوتاه (۲–۳ کلمه اضافی) خیلی کمک می‌کند که کاربر بدون آزمون‌وخطا بفهمد چه چیزی تغییر می‌کند. # مثال ساختار منطقی تنظیمات (فقط برای ایده‌پردازی) settings = { "نمایش": ["حالت تاریک", "اندازه فونت"], "اعلان‌ها": ["پوش نوتیفیکیشن", "ایمیل"], "پیشرفته": ["دیتای پس‌زمینه"] } در پروژه بعدی، یک‌بار فقط روی صفحه تنظیمات زوم کن و ببین چقدر می‌شود با حذف و گروه‌بندی، UI را سبک‌تر کرد. 💡 منبع: Nielsen Norman Group - Settings 🔖 #Design #طراحی #UI #UX #UI #UX #Settings #Information_Architecture #Design 👤 Developix 💎 Channel: @DevelopixDesign

ثبات توی تایپوگرافی، یکی از سریع‌ترین راه‌ها برای حرفه‌ای‌تر شدن UI است؛ مخصوصاً وقتی چند نفر روی یک محصول کار می‌کنند 👀 ایده ساده است: برای تیتر، متن و کپشن فقط چند سبک ثابت تعریف می‌شود و همه‌جا از همان‌ها استفاده می‌شود؛ نه هر صفحه یک سایز و وزن جدید. 🔹 مثال عملی در سیستم طراحی: Heading / H1: اندازه ثابت، وزن بولد، فاصله‌گذاری مشخص Body / Default: برای متن‌های اصلی Caption / Helper: برای توضیحات ریز و Labelها در ابزارهایی مثل Figma اگر برای هر متن یک Style جدا نسازی، به‌مرور صفحه‌ها شلخته می‌شوند و Hierarchy بصری کاملاً از بین می‌رود. نتیجه‌اش: کاربر نمی‌فهمد کدام متن مهم‌تر است و نگاهش هی روی صفحه سر می‌خورد 😅 یک نمونه نام‌گذاری تمیز برای Text Styleها: Typography ├─ Heading / H1 ├─ Heading / H2 ├─ Body / Default └─ Caption / Helper نکته طلایی ✨ اول ساختن Styleها را در صفحه‌ٔ پایه سیستم طراحی جدی بگیر، بعد بقیه صفحه‌ها را فقط با همان Styleها بساز؛ هم UI یکدست می‌شود، هم تغییر فونت یا سایز بعداً عذاب‌آور نمی‌شود. 🔖 #Design #طراحی #UI #UX #UI #Typography #DesignSystem #UX #Figma 👤 Developix 💎 Channel: @DevelopixDesign