اهداف ضربه ای قابل دسترس

دیو گش

مگین کرنی

پاتریک اچ. لاوک

راشل اندرو

راب دادسون

هنگامی که طرح شما در یک دستگاه تلفن همراه نمایش داده می شود، باید اطمینان حاصل کنید که عناصر تعاملی مانند دکمه ها یا پیوندها به اندازه کافی بزرگ هستند و فضای کافی در اطراف آنها وجود دارد تا فشار دادن آنها آسان باشد بدون اینکه تصادفاً روی عناصر دیگر همپوشانی داشته باشند. این برای همه کاربران مفید است، اما به ویژه برای هر کسی که دارای نقص حرکتی است مفید است.

حداقل اندازه هدف لمسی توصیه شده حدود 48 پیکسل مستقل از دستگاه در سایتی با درگاه دید تلفن همراه به درستی تنظیم شده است. به عنوان مثال، در حالی که یک نماد ممکن است فقط دارای عرض و ارتفاع 24 پیکسل باشد، می توانید از بالشتک اضافی برای افزایش اندازه هدف ضربه به 48 پیکسل استفاده کنید. مساحت پیکسل 48x48 برابر با 9 میلی متر است که تقریباً به اندازه ناحیه پد انگشت یک فرد است.

در نسخه ی نمایشی، من به همه لینک ها padding اضافه کرده ام تا مطمئن شوم که حداقل اندازه را دارند.

اهداف لمسی نیز باید به طور افقی و عمودی حدود 8 پیکسل از هم فاصله داشته باشند تا انگشت کاربر که روی یک هدف ضربه ای فشار می دهد، به طور ناخواسته به هدف ضربه ای دیگر برخورد نکند.

آزمایش اهداف لمسی شما

اگر هدف شما متن است و از مقادیر نسبی مانند em یا rem برای اندازه‌گیری متن و هر بالشتکی استفاده کرده‌اید، می‌توانید از DevTools برای بررسی اینکه مقدار محاسبه‌شده آن ناحیه به اندازه کافی بزرگ است استفاده کنید. در مثال زیر من em برای متن و پد استفاده می کنم.

a پیوند را بررسی کنید، و در Chrome DevTools به صفحه Computed بروید، جایی که می‌توانید قسمت‌های مختلف کادر را بررسی کنید و ببینید اندازه پیکسل آنها به چه اندازه است. در فایرفاکس DevTools یک Layout Panel وجود دارد. در آن پنل شما اندازه واقعی عنصر بازرسی شده را دریافت می کنید.

استفاده از پرسش‌های رسانه‌ای برای تشخیص استفاده از صفحه لمسی

به جای آزمایش ساده برای ابعاد درگاه دید، و سپس حدس زدن این که احتمالاً ابعاد کوچک گوشی ها یا تبلت ها هستند، که به نوبه خود از صفحه نمایش لمسی استفاده می کنند، اکنون راه های قوی تری برای تطبیق طرح شما بر اساس قابلیت های واقعی دستگاه وجود دارد.

یکی از ویژگی‌های رسانه‌ای که اکنون می‌توانیم آن را با درخواست‌های رسانه آزمایش کنیم این است که آیا ورودی اصلی کاربر یک صفحه لمسی ( pointer ) است و آیا هر یک از ورودی‌های شناسایی‌شده در حال حاضر صفحه لمسی ( any-pointer ) است یا خیر. ویژگی های pointer و any-pointer fine یا coarse برمی گردند. یک اشاره گر خوب، شخصی است که از ماوس یا پد لمسی استفاده می کند، حتی اگر آن ماوس از طریق بلوتوث به تلفن متصل باشد. یک نشانگر coarse یک صفحه نمایش لمسی را نشان می دهد که می تواند یک دستگاه تلفن همراه باشد اما ممکن است یک صفحه نمایش لپ تاپ یا تبلت بزرگ نیز باشد.

اگر CSS خود را در یک درخواست رسانه تنظیم می‌کنید تا هدف لمسی را افزایش دهید، آزمایش نشانگر درشت به شما امکان می‌دهد تا اهداف ضربه را برای همه کاربران صفحه لمسی افزایش دهید. این به ناحیه ضربه زدن بزرگتر می دهد، خواه دستگاه تلفن باشد یا دستگاه بزرگتر.

.container a {
  padding: .2em;
}

@media (any-pointer: coarse) {
  .container a {
    padding: .8em;
  }
}

می‌توانید در مقاله اصول طراحی وب واکنش‌گرا، درباره ویژگی‌های رسانه تعاملی مانند اشاره گر بیشتر بدانید.