رنگ جداکننده در UI: چرا جداکنندهها #000000 نیستند
یک خط مشکی خالص بین ردیف‌های لیست از کلماتی که جدا میکند بلندتر فریاد می‌زند. در حالت روشن از `#C6C6C8` و در حالت تیره از `#38383A` استفاده کنید، با ضخامت 1 px و تورفته تا شروع متن، و پیش از کشیدن خط اول فاصله را امتحان کنید.
رنگ درست جداکننده یک خاکستری روشن و ملایم مثل #C6C6C8 است، با ضخامت 1 px و تورفته تا شروع متن، نه یک خط مشکی خالص. جداکننده برای جدا کردن ردیفها وجود دارد و جداکننده مشکی بلندترین صدای لیست میشود. این چهار راه‌حل است، همراه با مقادیر صفحههای روشن و تیره.
چرا جداکنندههای مشکی فریاد میزنند
هیچ‌کس عمداً جداکننده مشکی انتخاب نمی‌کند. خطی که بی‌فکر کشیده شود #000000 درمی‌آید و همان‌طور می‌ماند تا کسی عوضش کند.
مشکل کنتراست است. مشکی خالص روی سفید قوی‌ترین ترکیبی است که صفحه نشان میدهد، و متن ردیف‌های شما معمولاً کمی نرم‌تر از آن است. پس خط از کلمات جلو می‌زند. چشم اول خط‌ها را میخواند و بعد دنبال محتوای بینشان می‌گردد.
جداکننده یک اشاره است، نه یک ویژگی. کارش این است که وقتی لازم است چشم پیدایش کند و بقیه وقت‌ها نادیده گرفته شود.
راه‌حل ۱: خط‌ها را روشن کنید
خطهای #000000
خطهای #C6C6C8
iOS جداکنندههای لیستش را روی سفید با #C6C6C8 می‌کشد، که همان رنگ نیمه‌شفاف جداکننده سیستمی است وقتی روی زمینه سفید می‌نشیند. Material 3 هم به همین نقطه می‌رسد، با #CAC4D0 که توکن outline variant آن است و ضخامت 1 dp.
خط مشکی
جداکننده iOS
جداکننده Material 3
مشکی 12% روی سفید
اگر زمینه شما سفید ساده نیست، به‌جای خاکستری ثابت از مقدار آلفا استفاده کنید. راهنمای Material جداکنندهها را در تم روشن مشکی 12% و در تم تیره سفید 12% توصیف میکند. #000000 با 12% روی سفید #E0E0E0 میشود و روی سطح رنگی، رنگی می‌ماند، پس خط هرگز چسبانده‌شده به نظر نمی‌رسد.
همین راه‌حل بیرون از لیست‌ها هم کاربرد دارد: خط ردیف‌های جدول، فوتر کارت‌ها، خط زیر هدر و خط بین گروه‌های منو.
راه‌حل ۲: تا شروع متن تورفته‌شان کنید
تمامعرض
شروع از متن
تنظیمات آیفون را باز کنید و نگاه کنید. خط از برچسب شروع میشود، نه از زیر آیکون. Material هم همین را می‌گوید: جداکنندههای تورفته محتوای مرتبط را جدا میکنند و با عناصر لنگری مثل آواتار جفت میشوند.
همین تورفتگی آیکون را به ردیفش وصل میکند. خط تمامعرض زیر آیکون آن را رها میکند و لیست به‌جای ردیف، راه‌راه دیده میشود.
از iOS 16 به بعد، لیست‌های SwiftUI هر جداکننده را به‌طور پیش‌فرض با لبه شروع متن ردیف هم‌تراز میکنند، نه آیکونش. اگر ردیف‌های شما آیکون یا آواتار ندارند، چیزی برای دور زدن نیست و خط تمامعرض اشکالی ندارد.
راه‌حل ۳: اول فاصله را امتحان کنید
برای هر ردیف یک خط
فاصله کار را میکند
پیش از رفتن سراغ خط بپرسید خط برای چیست. اغلب برای گروه‌بندی است، و گروه‌بندی را میشود با فاصله انجام داد. Material جایگزین‌هایی برای جداکنندههای full-bleed فهرست میکند: فضای خالی، زیرعنوان‌ها و جداکنندههای تورفته، و هشدار میدهد زیادهروی در full-bleed نویز بصری میسازد. Refactoring UI همین استدلال را زیر عنوان «از border کمتر استفاده کنید» می‌آورد: چیزها را با فاصله، رنگ زمینه یا سایه جدا کنید.
یک آزمون سریع: همه خطهای لیستتان را پاک کنید. اگر هنوز گروهها را می‌بینید، خط‌ها تزئین بودند.
راه‌حل ۴: در حالت تیره هم کم‌نورشان کنید
#FFFFFF روی #1C1C1E
#38383A روی #1C1C1E
قاعده در حالت تیره عوض نمی‌شود، برعکس میشود. در صفحه روشن خط کمی تیره‌تر از سطح است و در صفحه تیره کمی روشنتر.
iOS روی زمینه تیره لیستش از #38383A استفاده میکند. Material 3 از #49454F استفاده میکند، که outline variant تیره آن است، روی سطح #141218.
خطهای سفید خالص همان مشکل خطهای مشکی خالص را دارند: روشن‌ترین نشانه‌های لیست‌اند، پس از متن جلو میزنند.
مشخصات جداکننده
روی هر چیپ بزنید تا کدش کپی شود.
| ویژگی | مقدار | چرا |
|---|---|---|
| رنگ، روشن | #C6C6C8 | وقتی نگاه می‌کنید دیده میشود، وقتی می‌خوانید ساکت است |
| گزینه آلفا | #000000 با 12% | با هر سطحی سازگار میشود، روی سفید #E0E0E0 میشود |
| ضخامت | 1 px (1 dp) | خطهای ضخیمتر به شکل تبدیل میشوند |
| تورفتگی | شروع از متن | آیکون‌ها و آواتارها را به ردیفشان وصل نگه می‌دارد |
| رنگ، تیره | #38383A | کمی روشنتر از سطح، هرگز سفید |
| فاصله | اول آن را امتحان کنید | گروه‌بندی بدون کشیدن چیزی |
این را به توسعه‌دهنده‌تان بدهید
:root {
--divider: #C6C6C8;
}
@media (prefers-color-scheme: dark) {
:root {
--divider: #38383A;
}
}
.row + .row {
border-top: 1px solid var(--divider);
margin-left: 56px; /* icon width plus gap, so the line starts at the text */
}
.group + .group {
margin-top: 24px; /* try this before adding a line */
}
margin-left روی border همان تورفتگی است: خط از جایی شروع میشود که برچسب شروع میشود. اگر از روش آلفا استفاده می‌کنید، متغیر را در حالت روشن با rgba(0, 0, 0, 0.12) و در حالت تیره با rgba(255, 255, 255, 0.12) عوض کنید.
سوالات متداول
جداکنندهها باید چه رنگی باشند؟
در صفحههای روشن یک خاکستری روشن و ملایم، مثل #C6C6C8 در iOS یا #CAC4D0 در Material 3. در صفحههای تیره یک خاکستری تیره کمی روشنتر مثل #38383A.
آیا جداکنندهها باید مشکی باشند؟
نه. خط مشکی خالص پرکنتراستترین نشانه لیست است، پس چشم پیش از محتوا آن را میخواند. از خاکستری روشن یا مشکی با حدود 12% شفافیت استفاده کنید.
جداکننده چقدر ضخیم باشد؟
1 px، که در Material همان 1 dp است. خطهای ضخیمتر به شکل تبدیل میشوند و با ردیفها رقابت میکنند.
جداکننده تورفته (inset) چیست؟
جداکنندهای که از متن ردیف شروع میشود نه از لبه صفحه، پس از زیر آیکون یا آواتار نمیگذرد. تنظیمات iOS برای هر لیست از آن استفاده میکند.
آیا بین هر ردیف جداکننده لازم است؟
نه همیشه. یک فاصله بزرگتر بین گروهها اغلب محتوا را بیآنکه چیزی کشیده شود جدا میکند، و Material هشدار میدهد زیادهروی در جداکنندههای تمامعرض نویز بصری میسازد.
چه رنگ جداکنندهای در حالت تیره جواب میدهد؟
#38383A روی زمینه تیره لیست در iOS و #49454F روی سطح تیره Material 3. از سفید پرهیز کنید، چون خطهای روشن روی صفحه تیره چشم میزنند.
منابع
- Material Design 2, Dividers: جداکنندهها 1 dp ضخامت دارند، با مشکی 12% در تم روشن یا سفید 12% در تم تیره؛ جداکنندههای تورفته محتوای مرتبط را جدا میکنند و با عناصر لنگری مثل آواتار کار میکنند؛ جایگزین‌های جداکنندههای full-bleed شامل فضای خالی، زیرعنوان‌ها و جداکنندههای تورفته است؛ زیادهروی در full-bleed نویز بصری میسازد.
- Material 3 tokens: جداکننده از رنگ outline variant با ضخامت 1.0 dp استفاده میکند؛ مقدار پایه در طرح روشن
#CAC4D0و در طرح تیره#49454Fاست.#141218سطح تیره پایه است. - Apple, listRowSeparatorLeading و Adjust List Row Separator Insets: از iOS 16 لیست‌ها هر جداکننده را به‌طور پیش‌فرض با لبه شروع متن ردیف هم‌تراز میکنند.
- رنگ‌های جداکننده iOS: در حالت روشن rgba(60, 60, 67, 0.29) که روی سفید
#C6C6C8می‌نشیند، و#38383Aدر حالت تیره. اپ Settings روی آیفون این تورفتگی را نشان میدهد. #000000با 12% روی#FFFFFFبرابر#E0E0E0میشود، با ترکیب آلفا محاسبه شده است.- Refactoring UI، «Use fewer borders» (Adam Wathan و Steve Schoger).
- WCAG 2.2, 1.4.11 Non-text Contrast: جداکننده بین ردیف‌های لیست تزئین است و برای فهم محتوا لازم نیست، پس حداقل کنتراستی برایش اعمال نمی‌شود.
- ردیف‌های Settings و جزئیات رویداد «Design review» برای این صفحه ساخته شده‌اند.
- ابتدا به‌صورت کاروسل در UX Brainy منتشر شد.
Want lists, forms and every other surface designed as one quiet system? Our team designs and builds product UI that holds up in light and dark.
Get Started
