Дизайн мобільних додатків, як його робити правильно: ТУТОРІАЛ

DesignTalk.club переклав для вас рекомендації відомої ки з США Катлін Ворнер. Це туторіал, який підійде всім, хто хоче краще зрозуміти дизайн додатків – і допоможе зекономити багато часу.

Коли я почала займатися дизайном, у мене виходило погано.

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

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

Дослідіть додатки, якими ви користуєтеся щодня

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

Ієрархія

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

Контент

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

Намір

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

Аудиторія

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

Розбийте 1 “піддослідний” додаток на складові

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

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

Деякі спостереження:

  • Текст заповнювача на панелі пошуку міг би просто сказати “Шукати тут”, але замість цього згадується конкретне місто. Хоча я не маю наміру їхати до Лондона, але можливість захоплює.
  • Цікаво, скільки ітерацій було перед тим, як зупинилися на Dates і Guests (Дати, Гості), які йдуть після пошуку. Я впевнена, що багато дизайнів показували дати лише, коли ви вибрали місце. Це примушує задумуватися, як люди шукають і коли вони вводять фільтри для своїх пошуків.

Спостереження:

  • Зверніть увагу, кількість “Ретвітів” і “Лайків” – напівжирним
  • Позначення часу включає в себе не тільки дату, а й конкретний час. Чому це так? Також зверніть увагу на те, де часові позначки скорочено в іншому місці додатка (наприклад, “5 годин” у перегляді каналу або “4/14/18” у перегляді профілю). Подумайте про різні наміри цих відображень.
  • Тут є поле, щоб додати ще один твіт, зверніть увагу на вислів. Це не просто: “Додати твіт”, це “Додати ще один твіт”.
Spotify

Спостереження:

  • Зверніть увагу, як Spotify зберігає відтворювану пісню.
  • Контент, який вибрали для відображення в цьому вікні: нові списки відтворення та нові альбоми/сингли.
  • Плейлист New Music Friday має кількість підписників, а Release Radar не має. Чому так?..  Release Radar – унікальний для користувача, і не може мати фоловерів… Хтось мав вирахувати всі випадки використання контенту та прийняти рішення про відповідні підзаголовки для пари з ними.

Проаналізуйте “правила роботи” додатку, щоб ви могли “порушити” їх – коли будете робити свій варіант дизайну

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

ДУЖЕ РАДИМО ПОЧИТАТИ:

Навіщо використовувати SVG: 8 ну ДУЖЕ переконливих причин

Візуальна ієрархія: 4 правила – як її ПРАВИЛЬНО використовувати у дизайні

Теорія кольору: короткий курс для дизайнерів (Частина 1)

Залишити відповідь