Як розробляти зручні мобільні інтерфейси

Sep 15, 2025

Як

Деякі мобільні конструкції страждають на проблему: вони можуть виглядати чудово на поверхні, але почати їх використовувати, і ви незабаром дізнаєтеся, що все-важливий фактор був знехтував: ергономіка. Благородне мистецтво створення конструкцій, які підходять до людського тіла (а не навпаки), є одним з справжніх незайманих героїв дизайнерського світу.

Ергономіка завжди була дуже важливою для промислових дизайнерів, але також стає все більш важливим для цифрових дизайнерів. Чому? Оскільки смартфони та планшети змінюються так, як ми взаємодіємо з цифровими конструкціями. Ми більше не використовуємо громіздку клавіатуру та мишу, щоб розповісти нашим цифровим друзям, що робити. Тепер це більш прямий, більш фізичний. Ми тримаємо наші пристрої. Ми їх торкаємося. Ми їх прищеплюємо. Ми любимо їх.

Це все частіше фізичні зв'язки з нашими улюбленими мобільними пристроями сили дизайнерів не тільки думають про те, як виглядає і відчуває дизайн, але також фізичні аспекти використання його. Він сидить дизайнерів думати про те, як користувачі тримають та взаємодіють зі своїми смартфонами та таблетками; Про те, скільки екрану вони можуть комфортно дістатися і як дизайн відчуватиметься в руці. Він сидить дизайнерів думати про ергономіку мобільного дизайну.

Отже, як ви продовжуєте створювати мобільний дизайн, який є ергономічним і тому зручним для використання?

01. Вийдіть з офісу

Ще, перш ніж почати думати про можливі конструкції, вийдіть з офісу, щоб здійснити деякі з перших рук. Проведіть ранок або вдень, дивлячись, де, коли, як і чому люди використовують свої мобільні пристрої.

Зробіть примітку про те, як люди тримають та взаємодіють зі своїм пристроєм, що вони можуть робити в той час, а також сорти викликів та відволікань, з якими вони повинні стверджувати. Ця інформація допоможе інформувати Ергономіку дизайну та означає, що, коли мова йде про тестування дизайну, ви можете протестувати проти сценаріїв, які ви знаєте, насправді відбуваються в реальному світі.

02. Дизайн для декількох утримання

The three main holds used for a smartphone, and the frequency which they’re typically used — Три основних утримує, що використовуються для смартфона, і частоту, яку вони зазвичай використовуються

Якщо ви спостерігаєте людей, використовуючи мобільні пристрої, ви скоро побачите, що вони використовують a різноманітність різних утримує . Різноманітність використовуваних та частоти, з якими користувачі змінюють свій утримання, важливо, щоб розробити з декількома вмінням.

Наприклад, запустіть дизайн смартфона з одноручним використанням (оскільки це найбільш складне), але завжди перевіряє конструкцію через цілий ряд, щоб побачити, наскільки комфортно кожен з них.

03. Помістіть популярні елементи керування

Green areas are easy to reach, amber takes more effort and red areas are hard to reach — Зелені зони легко дістатися, Amber займає більше зусиль, а червоні зони важко досягти

Помістіть часто використовувані елементи керування, такі як кнопки та посилання, де їх можна легко дістатися пальцями або великими пальцями. Середина і нижня частина екрана є хорошими областями, які слід використовувати, хоча нижні кути можуть бути складними, щоб натиснути, коли пристрій тримається лише в одній руці (читати далі тут ).

Це ще конвенція, щоб розмістити меню у верхній частині екрана. Однак це може бути важкодоступним місцем, тому це хороша ідея, щоб також підтримати дії, щоб вивести меню.

04. Розмістіть вміст вище елементів керування

The BBC iPlayer iPad app places controls in easy to reach areas and below content — BBC IPlayer iPad Apps Mission Continues легко дістатися до областей та нижче вмісту

Ви не хочете, щоб хтось палець або палець затьмарює вміст, оскільки вони торкаються екрана, тому помістіть вміст над елементами керування. Також переконайтеся, що ключова інформація не знаходиться в області екрана, де її легко затемнюється пальцем або великим пальцем, наприклад, нижні кути, які часто покриваються, коли смартфон утримується в одній руці.

05. Дизайн з портретним режимом на увазі

Хоча використана утримання може змінюватися, одна річ, яка набагато більш послідовна для смартфонів, так і таблеток - це тенденція до того, щоб люди тримають їх вертикально для більшості часу. Горизонтальний утримання часто використовується для конкретних завдань, таких як переглядати відео або фотографії, але це виняток, а не норма.

Звичайно, мобільний дизайн повинен ідеально підтримати як портретні (вертикальні), так і ландшафтні (горизонтальні) режими, але, якщо ви не розробляєте відео або фото-важкий сайт або додаток, дизайн з портретним режимом на увазі.

06. Дизайн для великих пальців

The Spotify app is designed to be thumb-friendly, with large tap targets — Програма Spotify призначена для великого пальця, з великими цілями TAP

Великі пальці ведуть більшість всіх взаємодій смартфона. Це відбувається тому, що великі пальці використовуються, коли мобільний тримається в одній руці і сильно використовується, коли він утримується у двох руках.

Великі пальці трохи більше, ніж пальці, і тому потрібна більша цільова крана. Спробуйте зробити ці натискання цілей щонайменше 44 x 44 балів (16 x 16 мм), принаймні 7 балів (2,5 мм) між ними. Більше торкання цілей завжди краще, і ви, безумовно, не повинні йти будь-якого меншого, ніж 44 x 30 балів (16 x 11 мм).

Навіть якщо ви розробляєте таблетки, все ще дизайн для великих пальців, тому що дизайн повинен підтримувати найменш точний метод дотику, який він зустрінеться. Велика цільова ціль не просто хороша для великих пальців, це чудово підходить для пальців.

07. Дизайн для великих жестів

Настільки великі цілі кращих кращих. Яка більша цільова кнопка є там, ніж весь екран? Намагайтеся розробити з великими жестами, такими, як дозволяючи користувачам провести пальцем, щоб рухатися вперед або назад у фотогалереї, або щоб відкрити меню.

Пам'ятайте, що користувачі можуть не усвідомити жест, тому це завжди гарна ідея, щоб забезпечити вторинний спосіб зробити щось, наприклад, натискання значка стрілки, щоб відкрити наступну фотографію.

08. Зростання до виклику

У ергономіці ви іноді чуєте розмову про проектування, щоб задовольнити щонайменше 95 відсотків користувачів, створюючи дизайн, який зручний від 2,5 до 97,5-го процентилів користувачів. Там завжди буде екстремальні користувачі, які дуже важко розмістити - як ми всі знаємо, що ви не можете задовольнити всіх всіх часів, але якщо ви можете створити дизайн, що більш складні користувачі можуть використовувати з комфортом, він також повинен працювати для всіх між ними.

Ось чому це гарна ідея розробляти з проблемними користувачами та сценаріями. Наприклад, подумайте про зайнятий приміський, що йде по вулиці з кавою в одній руці та мобільний телефон в іншому, або хтось з артритом.

09. Тримайте взаємодії до мінімуму

Чи знаєте ви, який інтерфейс мобільного пристрою? Це не кран, або проведіть пальцем, або прес. Це взагалі не взаємодія. Чим менше взаємодії вашого мобільного дизайну вимагає, тим менше ви повинні турбуватися про ергономіку. Я завжди намагаюся зберегти взаємодію до мінімуму. Безжалісно скорочують мобільні форми, використовуйте автозаповнення, а обмеження сповіщень лише для того, щоб користувач дійсно повинен бути повідомлений.

10. Прототипні конструкції

Ви просто не можете судити про ергономіку мобільного дизайну, поки ви не зможете фізично тримати його в руках і спробувати різні захоплення. Ось чому я прототую дизайн якомога швидше. Нам подобається Вісс , але є безліч інших Великі інструменти прототипів .

Для швидкого випробування ви навіть можете запустити основні користувацькі тести з простими прототипами паперу. Ескіз або паперовий друк, застряг на мобільний пристрій, розповість вам дивовижну суму про ергономіку.

11. Тест, тест, а потім перевірити ще

Хочете знати один гарантований спосіб створення ергономічних мобільних конструкцій? Це тестування конструкцій, а потім ітературно-тестування, ітерацію та тестування ... і продовжуйте, доки у вас немає купу різних людей, що охоплює купу різних пристроїв, всі звітні, що конструкція зручна для використання. Це просто.

Мобільні пристрої, звичайно, призначені для того, щоб бути "мобільним", тому вийдіть з офісу до тестування дизайну в середовищах та ситуаціях, які вони, ймовірно, будуть використовуватися в. Кавові магазини завжди є гарним місцем для перевірки. Тестові конструкції з AS Багато людей, наскільки це можливо (принаймні п'ять або шість) і зосереджуються на більш складних сценаріях, таких як використання смартфона. Якщо дизайн добре працює, коли взаємодії користувачів більш обмежені, це обов'язково перевершує решту часу. Це, в першу чергу, постійно перевіряючи та ітерацію, що ви можете створювати справді ергономічні мобільні конструкції.

Ця стаття спочатку з'явилася в чистий журнал. Підписатися тут.

Пов'язані статті:

16 UX / UI Instagram облікові записи, які ви повинні слідувати
20 кращих інструментів каркасу
5 найбільших тенденцій дизайну UX на 2018 рік

Як розробляти зручні мобільні інтерфейси

01. Вийдіть з офісу

02. Дизайн для декількох утримання

03. Помістіть популярні елементи керування

04. Розмістіть вміст вище елементів керування

05. Дизайн з портретним режимом на увазі

06. Дизайн для великих пальців

07. Дизайн для великих жестів

08. Зростання до виклику

09. Тримайте взаємодії до мінімуму

10. Прототипні конструкції

11. Тест, тест, а потім перевірити ще

Як - Найпопулярніші статті

Як змінити шрифт у Bio Instagram

Як намалювати коня

Як швидко схопити руки

Як підготувати графіку Illustrator для наслідків

Як передати звук у живопису

Створіть кінотеатр з Photoshop за 60 секунд

Модель Дарт Вейдер у Збрансі

Створити перспективу, викриваючи свої текстури в Photoshop

Категорії