سایههای UI: چرا سایه مشکی ۲۵ درصدی اشتباه به نظر می‌رسد و کدام سایههای لایهای را باید استفاده کرد
سایه مشکی با شفافیت ۲۵ درصد مثل لکه‌ای زیر کارت دیده می‌شود. چرا سایههای نرم حدود ۸ درصد شفافیت، دو لایه و یک تینت دارند، ارتفاع چطور باید رشد کند و چهار توکن آماده سایه به صورت CSS.
سایه‌ای که بیشتر طراح‌ها سراغش می‌روند مشکی با ۲۵ درصد شفافیت است. با این شدت، سایه شبیه نور نیست. شبیه یک لکه زیر کارت است.
سایه خوب تقریباً نامرئی است: بلند شدن کارت را حس می‌کنید، پیش از آن‌که سایه را ببینید. این هم راه رسیدن به آن، با چهار توکن برای کپی کردن.
چرا سایه پیشفرض شبیه لکه است
سایه پیشفرض Figma مشکی با شفافیت ۲۵ درصد و آفست ۴ به پایین است. دو آموزش رایج آن را تکرار میکنند و همین باعث پخش شدنش می‌شود: پیشفرض یک ابزار تبدیل می‌شود به تصمیم طراحی که هیچ‌کس نگرفته است.
سایه واقعی نرم است. نور دور جسم می‌پیچد، پس لبه سایه کم‌کم محو می‌شود و هرچه از جسم دورتر شود کم‌رنگ‌تر می‌شود. یک لایه تیره و سخت هیچ‌کدام از این‌ها را ندارد. یک لبه دارد و یک شدت، و چشم آن را کثیفی می‌بیند، لکه‌ای خاکستری، نه سطحی بلندشده.
راه‌حل ۱: ۸ درصد، نه ۲۵
مشکی با ۲۵٪
مشکی با ۸٪، بلور پهن‌تر
وقتی بلور بزرگتر می‌شود، همان مقدار سایه روی سطح بزرگ‌تری پخش می‌شود و خودبه‌خود روشنتر می‌شود. برای همین یک سایه پهن با ۸ درصد طبیعی‌تر از یک سایه تنگ با ۸ درصد به نظر می‌رسد. از ۸ درصد شروع کنید و فقط اگر کارت روی پس‌زمینه‌تان گم شد بالاتر ببرید.
راه‌حل ۲: دو سایه روی هم
یک سایه باید دو کار را انجام دهد و هیچ‌کدام را خوب انجام نمی‌دهد. دو سایه کارها را بین خودشان تقسیم میکنند.
سایه تنگ درست زیر لبه می‌نشیند و می‌گوید «این به سطح چسبیده است». سایه پهن هاله نرمی است که می‌گوید «این از سطح بلند شده است». با هم مثل یک سایه طبیعی دیده میشوند، چون نور واقعی همین کار را میکند: یک خط تماس تیره به‌علاوه یک محو شدن پهن و کمرنگ.
در CSS دو لایه یک تعریف واحدند که با ویرگول جدا شده‌اند:
box-shadow:
0 1px 2px rgba(27, 21, 48, 0.06),
0 8px 24px rgba(27, 21, 48, 0.08);
راه‌حل ۳: تینت کنید، خاکستری نکنید
مشکی خالص
تینتشده با ink
قاعده این است که از ink، تیره‌ترین رنگ پالتتان، به‌عنوان رنگ سایه با شفافیت کم استفاده کنید. در توکن‌های خودمان ink برابر #1B1530 است، یک بنفش بسیار تیره. روی صفحه سفید تینت به‌سختی دیده می‌شود. روی صفحه رنگی، یک پنل برند یا یک بخش تینتشده، تفاوت بین سایه‌ای است که به آن‌جا تعلق دارد و سایه‌ای که چسبانده‌شده به نظر می‌رسد.
راه‌حل ۴: بالاتر یعنی بزرگتر
وقتی چیزی بالاتر قرار می‌گیرد، مثل منو بالای یک کارت یا مودال بالای یک صفحه، سایه‌اش بزرگتر و نرمتر می‌شود، چون نور جای بیشتری برای پخش شدن دارد. تیرهتر نمی‌شود. طراحی که سایه چیز بالاتر را تیرهتر کند دوباره به همان لکه می‌رسد.
این یک مجموعه کوچک و بسته از توکنها می‌دهد:
| توکن | لایه ۱ | لایه ۲ | کاربرد |
|---|---|---|---|
| XS | 0 1px 2px، ۶٪ | بدون لایه | ورودی‌ها، چیپ‌های کوچک |
| SM | 0 1px 2px، ۶٪ | 0 2px 6px، ۸٪ | کارت‌ها در حالت عادی |
| MD | 0 1px 2px، ۶٪ | 0 8px 24px، ۸٪ | کارت‌های بلندشده، پاپ‌اورها |
| LG | 0 2px 4px، ۶٪ | 0 16px 40px، ۱۲٪ | مودال‌ها، منوهای بالای همه چیز |
هر لایه X برابر 0 و spread برابر 0 دارد و با ink یعنی #1B1530 رنگ شده است. فیلدهای X، Y، blur و spread در Figma مستقیماً به چهار عدد در box-shadow در CSS نگاشت میشوند.
توکنها به صورت CSS
:root {
--shadow-xs: 0 1px 2px rgba(27, 21, 48, 0.06);
--shadow-sm: 0 1px 2px rgba(27, 21, 48, 0.06),
0 2px 6px rgba(27, 21, 48, 0.08);
--shadow-md: 0 1px 2px rgba(27, 21, 48, 0.06),
0 8px 24px rgba(27, 21, 48, 0.08);
--shadow-lg: 0 2px 4px rgba(27, 21, 48, 0.06),
0 16px 40px rgba(27, 21, 48, 0.12);
}
.card { box-shadow: var(--shadow-md); }
این چهار توکن توصیه ما هستند، نه مقدار یک پلتفرم. رنگ ink را با تیره‌ترین سایه برند خودتان عوض کنید و ساختار را نگه دارید.
جایی که سایهها از کار می‌افتند: دارک مود
سایه روی تیره
سطح روشنتر
پس در تم تیره، یک لایه را با روشنتر کردنش بالا ببرید، نه با سایه انداختن. مقاله ما درباره سیستم‌های رنگ دارک مود رمپ سطوح را پوشش می‌دهد و رنگ پسزمینه لایت مود خاکستری‌های سمت دیگر را.
تست چشم‌ریز کردن
چشم‌هایتان را ریز کنید یا از صفحه عقب بروید. اگر هنوز هر سایه را به‌شکل یک شکل تیره می‌بینید، بیش از حد قوی است. اگر لبه کارت‌ها روی بدترین مانیتورتان ناپدید میشوند، شفافیت را یک پله بالا ببرید. سایه درست وقتی مستقیم نگاهش می‌کنید محو می‌شود و وقتی برش می‌دارید خودش را نشان می‌دهد.
سوالات متداول
بهترین drop shadow برای UI چیست؟
دو لایه روی هم با تینت تیره از ink خودتان: یک لایه تنگ مثل 0 1px 2px با ۶ درصد و یک لایه پهن مثل 0 8px 24px با ۸ درصد. به‌جای لکه، شبیه نور طبیعی دیده می‌شود.
شفافیت سایه UI چقدر باشد؟
چهار توکن ما از ۶ تا ۱۲ درصد هستند. برای کارت از ۸ درصد شروع کنید و فقط اگر لبه ناپدید شد بالاتر ببرید. مشکی با ۲۵ درصد، که پیشفرض رایجی است، به‌ندرت روی یک رابط تمیز درست است.
drop shadow پیشفرض Figma چیست؟
مشکی (#000000) با ۲۵ درصد شفافیت و آفست ۴ به پایین. این نقطه شروع ابزار است، نه یک تصمیم طراحی، پس بیشتر طراحیها با تغییر دادنش بهتر میشوند.
آیا سایهها باید مشکی خالص باشند؟
نه. از نسخهای بسیار تیره از رنگ برند یا ink استفاده کنید. روی پسزمینه رنگی، مشکی خالص سایه را خاکستری و گلآلود میکند، اما سایه تینتشده رنگ را تمیز نگه میدارد.
چطور با سایه ارتفاع را نشان بدهم؟
سایه عنصر بالاتر را بزرگتر و نرمتر کنید، نه تیرهتر. از مجموعه کوچکی از توکنها مثل XS، SM، MD و LG استفاده کنید تا هر لایه رابط از یکی از چهار سایه استفاده کند.
آیا سایهها در دارک مود کار میکنند؟
ضعیف. پسزمینه روشنی برای تیره کردن باقی نمانده، پس سایههای بزرگ ناپدید میشوند. بهجایش یک لایه را با رنگ سطح روشنتر بالا ببرید.
چطور box-shadow لایهای در CSS بنویسم؟
لایهها را در یک تعریف box-shadow فهرست کنید و با ویرگول جدا کنید: box-shadow: 0 1px 2px rgba(27,21,48,.06), 0 8px 24px rgba(27,21,48,.08);.
منابع
- drop shadow پیشفرض Figma برابر
#000000با ۲۵٪ شفافیت، X برابر 0 و Y برابر 4 است. آموزش‌ها روی مشکی ۲۵٪ توافق دارند؛ درباره بلور پیشفرض اختلاف دارند، برای همین این مقاله هیچ‌وقت آن را ذکر نمی‌کند. #00000040همان#000000با ۲۵٪ در هگز ۸ رقمی است (0x40 یعنی ۶۴ از ۲۵۵، حدود ۲۵٪).- چهار توکن و ink با مقدار
#1B1530(violet 900) استایل‌های افکت UX Brainy ما هستند. آن‌ها یک توصیه‌اند، نه مقدار یک پلتفرم. - کارت‌های بالا مثال‌های خود ما هستند. دموی تینت از
#4E2FB3با ۱۶ درصد در کنار مشکی با ۱۶ درصد استفاده میکند. - پست‌های بیشتر با یک قاعده در UX Brainy.
Want a design system where shadows, spacing and color are decided once and used everywhere? Our team designs and builds product UI on tokens.
Get Started
