اندازه هدف لمسی: چرا ۲۴ پیکسل خیلی کوچک است و قاعده ۴۴pt و ۴۸dp
آیکون ۲۴ پیکسلی خوب است، اما یک محل ۲۴ پیکسلی برای لمس کردن نه. اپل ۴۴ پوینت می‌خواهد، اندروید ۴۸ dp، و عدد ۲۴ پیکسلی WCAG فقط یک کف است. چهار راه‌حل، کنار هم بازسازی‌شده، به‌همراه کدی که می‌توانید به توسعه‌دهنده بدهید.
آیکون ۲۴ پیکسلی خوب است. اما یک محل ۲۴ پیکسلی برای لمس کردن خوب نیست. آدم‌ها با نوک انگشت کار می‌کنند، اغلب با یک دست و در حال حرکت، و هدفی به این کوچکی یا خطا می‌خورد یا به همسایه‌اش می‌خورد. آیکون را کوچک بکشید و هدف را بزرگ، و از عددهای زیر پیروی کنید.
چرا ۲۴ پیکسل عددی است که همه می‌کشند
آیکون‌ها در ۲۴ کشیده می‌شوند. برای مثال Material Symbols با ۲۴ پیکسل به‌عنوان اندازه ترجیحی عرضه می‌شود. پس طراح یک آیکون ۲۴ پیکسلی تحویل میدهد، توسعه‌دهنده دکمه را هماندازه آیکون می‌سازد، و ناحیه ضربه در نهایت به اندازه یک تمبر پستی می‌شود.
منبع دوم این عدد دسترسی‌پذیری است. WCAG 2.2 در سطح AA هدف‌های اشاره‌گر حداقل ۲۴ در ۲۴ پیکسل CSS را می‌خواهد. این یک حداقل است و استثنا هم دارد. خواندنِ کف به‌جای هدف آسان است، و طراحی‌ای که دقیقاً روی کف نشسته از چکر رد می‌شود و باز هم مردم را کلافه میکند.
چهار عددی که باید بدانید
| منبع | اندازه | چیست |
|---|---|---|
| Apple، iOS و iPadOS | ۴۴ در ۴۴ pt | اندازه پیشفرض کنترل |
| Apple، iOS و iPadOS | ۲۸ در ۲۸ pt | کوچکترین اندازه کنترل |
| Android، Material | ۴۸ در ۴۸ dp | هدف لمسی پیشنهادی |
| WCAG 2.2، 2.5.8 (AA) | ۲۴ در ۲۴ پیکسل CSS | حداقل، با استثناها |
| WCAG 2.2، 2.5.5 (AAA) | ۴۴ در ۴۴ پیکسل CSS | هدف ارتقایافته |
راهنمای خود اپل صریح است: یک دکمه به ناحیه ضربه‌ای حداقل ۴۴ در ۴۴ پوینت نیاز دارد. پوینت، dp و پیکسل CSS همگی واحدهای مستقل از تراکماند، برای همین طراحان آنها را کنار هم روی یک شبکه به کار می‌برند، همان‌طور که تصویر نشان میدهد.
یکی از استثناهای WCAG ارزش دانستن دارد. دو هدف کم‌اندازه مجازند اگر دایره‌ای ۲۴ پیکسلی که مرکزش روی هر کدام است، هدف دیگر را لمس نکند. این قاعده‌ای درباره فاصله‌گذاری است، و برای همین ردیفی از آیکون‌های ریز که دور از هم قرار گرفته‌اند میتواند قبول شود، در حالی که همان آیکون‌ها اگر فشرده شوند رد می‌شوند.
راه‌حل ۱: آیکون را تا ۴۴ پد بدهید
ناحیه ضربه ۲۴ در ۲۴
ناحیه ضربه ۴۴ در ۴۴
ناحیه ضربه قاب دکمه است، نه تصویر داخل آن. پس راه‌حل این است که اندازه دکمه را تنظیم کنید نه آیکون را: نقش را روی ۲۴ نگه دارید و به دکمه در هر دو بعد حداقل ۴۴ بدهید. این درباره هر کنترل کوچکی که تنها نشسته صدق میکند: فلش بازگشت، دکمه‌های اشتراک و بیشتر در نوار ابزار، دکمه اطلاعات روی یک ردیف، ستاره علاقه‌مندی، چک‌باکس، و مثبت و منفی یک استپر.
وقتی دو تا از این‌ها کنار هم می‌نشینند، کادرها می‌توانند به هم بچسبند. اشکالی ندارد، چون کادرهای چسبیده شکافی برای خطا باقی نمی‌گذارند.
راه‌حل ۲: بگذارید کل ردیف لمس شود
فقط سوییچ
کل ردیف
ردیف از قبل آنجاست، از قبل خوانا است و خیلی بزرگ‌تر از ۴۴ است. برچسب و کنترل را در یک عنصر قابل لمس بپیچید تا کل ردیف تغییر وضعیت بدهد. این به کسانی هم که از screen reader یا switch access استفاده می‌کنند کمک میکند، چون به‌جای یک برچسب و یک سوییچ تنها، یک کنترل با یک نام وجود دارد.
راه‌حل ۳: به دکمه بستن یک هدف واقعی بدهید
۱۶ در ۱۶
۴۴ در ۴۴
همین در مورد دکمه بستن یک بنر، دکمه پاک کردن داخل فیلد جست‌وجو و آیکون کوچک حذف روی یک تگ صدق میکند. نشانه را سبک بکشید و هدف را سنگین.
راه‌حل ۴: اقدام اصلی را پایین بگذارید
گوشه بالا
پایین، تمامعرض
این یک قاعده طراحی است، نه یک آمار اندازهگیریشده: نکته این است که جای یک کنترل به‌اندازه بزرگی‌اش اهمیت دارد. اقدام اصلی پایین و پهن می‌رود. لغو و دیگر اقدامهای ثانویه می‌توانند در نوار بالا بمانند.
چطور بسازیمش
در وب، اندازه دکمه را تنظیم کنید نه آیکون را:
.icon-button {
display: inline-grid;
place-items: center;
min-width: 44px;
min-height: 44px;
}
.icon-button svg { width: 24px; height: 24px; }
/* one tappable row: label and switch together */
.row { display: flex; align-items: center; min-height: 44px; }
در اندروید، راهنمای Google استفاده از android:minWidth و android:minHeight است تا وقتی کنترل اندازه‌اش را از محتوایش می‌گیرد یک حد پایین تعیین شود:
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="48dp"
android:minHeight="48dp" />
در iOS با SwiftUI، به کنترل یک frame بدهید و کل frame را پاسخ‌گو کنید:
Button(action: close) { Image(systemName: "xmark") }
.frame(minWidth: 44, minHeight: 44)
.contentShape(Rectangle())
این سه قطعه کد نمونه‌های خودِ ما از این قاعده‌اند، نه کدی که از یک پلتفرم کپی شده باشد.
صفحه‌های خودتان را در پنج دقیقه بررسی کنید
- در فایل طراحی‌تان، هر چیز قابل لمس را به‌صورت یک کادر ۴۴ در ۴۴ روی آیکون بکشید. هر کادری که جا نمی‌شود، یک هدف برای بزرگ‌کردن است.
- ردیف‌های فهرست، تب‌ها، چیپ‌ها و کنترل‌های صفحه‌بندی: آیا کل آیتم قابل لمس است یا فقط بخشی که کلمه در آن است؟
- هر کنترل بستن، پاک کردن و حذف را پیدا کنید. هرکدام ۴۴ خودش را لازم دارد.
- اقدام اصلیِ هر صفحه را پیدا کنید. آیا همان‌جاست که شست هست؟
- روی یک گوشی واقعی، با یک دست، جریان اصلی را طی کنید. هر چیزی که دو بار خطا بخورد خیلی کوچک است.
سوالات متداول
حداقل اندازه هدف لمسی چقدر است؟
در آیفون، پیشفرض اپل ۴۴ در ۴۴ پوینت و کوچکترین اندازه کنترل ۲۸ در ۲۸ است. در اندروید توصیه ۴۸ در ۴۸ dp است. در وب، WCAG 2.2 در سطح AA حداقل ۲۴ در ۲۴ پیکسل CSS را تعیین میکند، با استثناها.
یک دکمه در موبایل چقدر باید بزرگ باشد؟
در iOS حداقل ۴۴ در ۴۴ پوینت و در اندروید ۴۸ در ۴۸ dp، هم در عرض و هم در ارتفاع. یک دکمه اصلی تمامعرض در پایین صفحه از قبل خیلی بالاتر از هر دو است.
آیا خود آیکون باید ۴۴ پیکسل باشد؟
نه. آیکون میتواند ۲۴ پیکسل یا کوچکتر بماند. چیزی که باید ۴۴ باشد ناحیهای است که به لمس پاسخ میدهد، یعنی دکمه دور آیکون. به دکمه padding یا حداقل عرض و ارتفاع اضافه کنید.
آیا هدف ۲۴ در ۲۴ پیکسل برای WCAG کافی است؟
برای سطح AA، در بیشتر موارد بله: این معیار حداقل ۲۴ در ۲۴ پیکسل CSS می‌خواهد، با استثناهایی برای فاصله‌گذاری، لینک‌های درون‌خطی و چند مورد دیگر. سطح ارتقایافته، AAA، ۴۴ در ۴۴ می‌خواهد. قبول شدن در AA حداقلِ انطباق است، نه اندازه خوبی برای طراحی.
تفاوت pt، dp و px چیست؟
همه واحدهای مستقل از تراکماند. پوینت واحد iOS است، dp واحد اندروید و پیکسل CSS واحد وب. از نظر فیزیکی یکسان نیستند، اما طراحان آنها را روی یک شبکه میچینند، برای همین ۴۴ pt و ۴۸ dp تقریباً هماندازه به حساب میآیند.
دکمه اصلی در گوشی کجا باید باشد؟
پایین صفحه، تمامعرض، همانجا که شست آرمیده است. اقدامهای ثانویه مثل لغو را در نوار بالا بگذارید. این یک قاعده سرانگشتی چیدمان است، نه یک عدد اندازهگیریشده.
منابع
- Apple Human Interface Guidelines، Accessibility: اندازه پیشفرض کنترل در iOS و iPadOS ۴۴ در ۴۴ پوینت، حداقل اندازه کنترل ۲۸ در ۲۸ پوینت.
- Apple Human Interface Guidelines، Buttons: یک دکمه به ناحیه ضربه‌ای حداقل ۴۴ در ۴۴ پوینت نیاز دارد.
- Android Accessibility Help، Touch target size: حداقل ۴۸dp عرض و ارتفاع، و
android:minWidthوandroid:minHeightبه‌عنوان حد پایین برای کنترل‌هایی که اندازه‌شان از محتوا می‌آید. - W3C، WCAG 2.2، 2.5.8 Target Size (Minimum): حداقل ۲۴ در ۲۴ پیکسل CSS در AA، شامل استثنای فاصله‌گذاری، و 2.5.5 Target Size (Enhanced): ۴۴ در ۴۴ در AAA.
- Google Fonts، Material Symbols guide: ۲۴ پیکسل به‌عنوان اندازه ترجیحی آیکون.
- صفحه‌های بالا نمونه‌های خودِ ما هستند. توصیه جایگذاری در پایین یک قاعده طراحی است، نه یک آمار.
- پست‌های بیشتر از این دست با یک قاعده در UX Brainy.
Want every tap in your app to land the first time? Our team designs and builds mobile UI with the hit areas decided once, in the system.
Get Started
