50 порад для гарного дизайну iOS програм

Дизайн мобільних інтерфейсів iOS дуже відрізняється від веб-дизайну. Тут зібрані 50 цінних порад для отримання гарного результату.

1

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

2

Орієнтуйтесь на пристрій, коли створюєте програму: враховуйте не тільки розмір екрану, а й де і коли пристроєм користуються. Частіше всього iPad використовується для розваг між20:00-23:00,пере сном, тоді як iPhone — в черзі на автобус або в кафе. Враховуйте різні сценарії використання при розробці аплікацій — включаючи й те, як далеко пристрій розташований від обличчя користувача.

3

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

4

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

5

Під час адаптації додатку до екранів різного розміру, пам’ятайте, що при значній його зміні — наприклад, від iPhone до iPad — спосіб використання приладу теж змінюється. Якщо градація розмірів екрану обмежена, то використовуйте основні функції програми. Коли їх більше (різних розмірів) можна включити будь-які додаткові функції, котрі не увійшли у більш зжату версію, так як у вас з’являється можливість обіграти додатковий простір.

6

Секрет створення гарної іконки додатку — відобразити основну ідею: очевидні функції вашої програми у візуально привабливій формі. Користувачі iOS часто дуже прискіпливо підходять до вибору іконок для робочого столу. Не жалійте часу на створення іконок усіх можливих розмірів, щоб вони чудово виглядали на екрані будь-якого пристрою, включаючи мініатюрний варіант, що використовується в меню «Налаштування» користувача.

7

Палець більше і менш точний ніж мишка, тому область натискання на сенсорному екрані повинна мати значну похибку. Щоб спростити задачу: ніколи не розташовуйте дуже багато елементів управління в одній області екрану або близько один до одного, і переконайтеся, що кнопки достатньо великі для точного натиску. Apple рекомендує розмір не менше 44×44 пікселі.

8

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

9

Під час розробки програми для iOS зверніть увагу на систему позначень Apple: у них багатий досвід розробки інтерфейсів. Зміна стилю одного з елементів управління, щоб покращити вид і атмосферу вашого додатку це одне, але ніколи не змінюйте функції — це тільки заплутає користувачів, які звикли до стандартних програм операційної системи. Наприклад, червоні кнопки використовуються для видалення об’єктів, а сині — для виконання дій.

10

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

11

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

12

Під час вибору зовнішнього вигляду та атмосфери додатку, зберіть надихаючі матеріали — наприклад, розкладіть їх на столі чи складіть moodboard. Чи буде це нейтрально дружній інтерфейс або зображення реально існуючих матеріалів таких як шкіра, камінь чи метал? Експериментуйте з різними комбінаціями і кольоровими поєднаннями: в цьому може допомогти Adobe Kuler.

13

Розміри робочої області iOS можуть варіюватися від 1024×768 (iPad 2) до 640×960 (iPhone 4 і 4S) та 320×480 (iPhone 3GS). Часто доводиться вставляти описуючий текст доповнюючи прості іконки, щоб вмістити всю необхідну інформацію в маленький екран. Це прекрасний спосіб розробити особливу візуальну мову спілкування для ваших додатків, дякуючи котрим зрозуміло, які функції виконують іконки.

14

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

15

Спробуйте накидати дизайн і функціонал на папері, використовуючи доступні шаблони iPhone та iPad. Коли ви вже готові перевести дизайн на новий рівень, такі інструменти як LucidChart допоможуть вам створити функціональний макет додатку, щоб далі перевести його у Photoshop для фінального допрацювання зовнішнього вигляду програми.

16

Рекомендації Apple по розробці дизайну інтерфейсу незамінні для досягнення сумісності з платформою, але деякі правила потрібно порушити, якщо того потребують обставини. Деякі програми, наприклад, Flipboard, Twitter чи Instagram — повністю відрізняються від стандартних очікувань користувачів, тому не бійтеся відійти за рамки умовностей.

17

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

18

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

19

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

20

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

21

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

22

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

23

Так як додаток з часом розвивається, поставте собі ціль додати функції без зайвого ускладнення — цей процес відомий під назвою «накладання функціоналу» (layering in functionality). Почніть з чітко визначеної каркасної структури, інформаційної структури та схем взаємодії, і будьте послідовними — це дозволить наростити додаткові функції без зміни концепції програми.

24

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

25

Супер порада — якісний дизайн можна чудово адаптувати під інші розміри — згадайте такі сервіси як Google, Facebook і Twitter, вони були адаптовані під інші форми. Або версії додатків для iPhone та iPad, такі як iWork. Невеликі версії мають більш умовну структуру, але все той же вигляд і атмосферу.

26

Візуальне мислення часто допомагає покращити ідею, використовуйте ручку та папір, Photoshop або інтерактивний інструмент, наприклад, Balsamiq Mockups. Якщо у вас є робочий прототип на пристрої, ви можете отримати задешево дорогоцінне тестування — просто пригостіть чашкою кави знайомого в обмін на неофіційне, 10-хвилинне юзабіліті тестування.

27

Зазвичай, користувачі очікують, що програми будуть працювати і виглядати певним чином. Наприклад, не використовуйте жест «щипок» ні для яких функцій окрім збільшення або згортання зображень, це тільки заплутає користувачів. Але ви більш вільні у виборі кольорових схем — буде дуже нудно, якщо всі програми будуть копіювати стандартну палітру Apple.

28

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

29

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

30

Більшість якісних додатків мають єдину стилістичну тему, яка в свою чергу впливає на на конструктивні рішення, і надає вашим програмам відчуття цільності. Дана тема завжди повинна відповідати головній функції додатку. Приведемо зворотній приклад, коли тема не відповідає функції — використання «прошитої шкіри» в новому додатку Find a Friend.

31

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

32

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

33

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

34

Коли графічні елементи відчуваються як справжні, це завжди виглядає гарно. Додатки iOS часто розробляються з урахуванням реалістичності, тому об’єкти на екрані мають об’єм, світлі та затінені області, неначе користувач може доторкнутися до них рукою. Реалістичний інтерфейс повинен відображати і властивості реальних об’єктів, інакше ілюзія буде порушена.

35

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

36

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

37

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

38

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

39

При розробці структури додатку, продумайте кожен екран окремо, враховуючи де і яку інформацію розмістити, і які елементи управління необхідні. Ймовірно, відразу буде важко зрозуміти, які елементи управління знадобляться, тому зосередьтесь на головній функції кожного з екранів. Коли ви «накидаєте» деякі екрани у Photoshop в натуральну величину, збережіть їх в iPhone як фото і просто пробіжіться по ним поглядом та переконайтесь, що вони гарно виглядають на екрані.

40

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

41

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

42

Одна з обов’язкових умов при розробці додатків — розмістити у верхній чатині екрану джерело світла під кутом 90 градусів, котрий буде підсвічувати всі елементи інтерфейсі. Кут освітлення дозволяє представити всі тіні і градієнти прямо, без нахилу. Використання кута 45 градусів можливо, але при порівнянні ваш додаток може програти іншим.

43

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

44

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

45

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

46

Якщо хочете перенести додаток для iOS на Android, враховуйте наступне: більш старі моделі телефонів можуть працювати з тими ж додатками, ОС автоматично налаштовує розмір зображень та тексту. Що стосується планшетів, то тут краще внести зміни в дизайн деяких екранів. Пам’ятайте, що роздільна здатність екрану та щільність елементів — це дві різні речі — ви повинні декілька разів перевірити, як виглядає програма на великому екрані.

47

Пам’ятайте, що в Apple набагато більше конструктивних норм ніж в Android, і відповідно — візуальної єдності. У телефонів і планшетів на Android набагато більше способів управління додатками, наприклад, кнопка меню, кнопки «назад», регулятор гучності, рядок стану і т.п. — але дані елементи можуть використовуватися по-різному в залежності від програми.

48

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

49

Фінальне тестування додатку повинне завжди проходити на справжніх пристроях, а не емуляторах — це не завадить навіть на ранніх стадіях. При переносі на Android, переконайтесь, що при тестуванні використовуються різні пристрої з відмінними роздільними здатностями екранів та щільністю.

50

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

Це переклад статті 50 tips for designing brilliant iOS apps by Nick Carson.