- проста Таблиця
- групувати Таблиця
- Стандартний
- З підзаголовком
- З значенням
- кнопки
- Picker (Пикер, контрол вибору)
- Segment control
- Slider (Слайдер, повзунок)
- Stepper (Степпер)
- Switcher (Перемикач, включатель.виключатель)
- Keyboard (Клавіатура)
- Основні
- прототипування
- Вихідні тексти для Photoshop і Sketch
- Галереї патернів (скріншоти екранів з додатків)
- Корисні речі
Всім хто вирішить займатися дизайном iOS додатків, в першу чергу, слід ознайомитися з Apple HIG (Apple HIG російською - в замітці)
Якщо ви коли-небудь стикалися з створенням інтерфейсу для програми, ви напевне знаєте що це не найлегша завдання. Щоб допомогти розробникам і дизайнерам робити більш якісні і дружні інтерфейси, компанія Apple випустила і оновлює посібник зі створення інтерфейсів ( iOS Human Interface Guidlines (HIG) ). HIG не представлені російською мовою, і це відразу відсікає тих хто не володіє англійською мовою на достатньому рівні.
Саме для полегшення долі цих людей і для систематизації власних знань, було вирішено створити короткий довідник по основних елементів інтерфейсу додатків iOS російською мовою.
Цей довідник є спрощеною версією Human Interface Guidelines з коментарями та доповненнями. За основу був узятий HIG від Apple і звід правил німецького дизайнера Іво Мінттінена . Тут ви знайдете основні рекомендації по створенню дружніх і інтуїтивно зрозумілих користувачам інтерфейсів для iOS пристроїв (iPhone, iPad).
Документ буде підлягати періодичному оновленню в міру появи нової інформації або особистих зауважень (моїх і читачів). Якщо у вас є зауваження, ідеї або просто потрібно з кимось поговорити, пишіть мені на пошту .
Деякі поняття і назви є неперекладними, деякі переводяться але з втратою сенсу. Тому я вирішив використовувати оригінальні англійські поняття і назви елементів, а в дужках вказувати можливу інтерпретацію російською мовою.
Пристрій Retina Портрет Альбом iPhone 7 + 6 +, 6S +, 7 + Retina HD 1080 x 1920 1920 x1080 iPhone 7 6, 6S, 7 Retina 750 x 1334 1334 x 750 iPhone 5 з 5, 5S, 5C Retina 640 x 1136 1136 x 640 iPhone 4 4, 4S Retina 640 x 960 960 x 640 iPhone 1, 2 і 3 покоління No 320 x 480 480 x 320 iPad Air / Retina iPad 1 і 2 покоління / 3rd & 4th No 1536 x 2048 2048 x 1536 iPad Pro No 2048 x 2732 2732 x 2048 iPad Mini 2 і 3 покоління Retina 1536 x 2048 2048 x 1536 iPad Mini, 1 і 2 покоління No 768 x 1024 1024 x 768
Пікселі це найменші фізичні елементи які ми можемо контролювати на цифровому екрані. Чим більше пікселів буде на екрані певного розміру, тим вище PPI (кількість пікселів на дюйм) і тим якіснішим будемо зображення яке ми будемо бачити на екрані.
Поінти в свою чергу є незалежними від дозволу елементами. Залежно від щільності пікселів, поінт може містити кілька пікселів (наприклад 1 поінт містить 2х2 пікселів на стандартному retina екрані).
Коли ви створюєте дизайн для різних розмірів екранів, ви повинні думати в поинтах, а малювати в пікселях. Тобто ви все ще повинні експортувати елементи дизайну в 3 різних розмірах (@ 1x - для пристроїв молодше iPhone 4; в два рази більше @ 2x - для iPhone 4, 4s, 5, 5s, 6; в три рази більше @ 3x - для iPhone 6 Plus), незалежно від того в якому дозволі ви створюєте дизайн свого застосування.
Пристрій Експорт PPI Розмір екрану iPhone 7 + 6 +, 6S +, 7 + @ 3x 401 5.5 iPhone 7 6, 6S, 7 @ 2x 326 4.7 "iPhone 5 з 5, 5S, 5C @ 2x 326 4.0" iPhone 4 4, 4S @ 2x 326 3.5 "iPhone 1, 2 і 3 покоління @ 1x 163 3.5" iPad Air / Retina iPad 1 і 2 покоління / 3rd & 4th @ 2x 264 9.7 "iPad Pro @ 2x 264 12.9" iPad Mini 2 і 3 покоління @ 2x 326 7.9 "iPad Mini 1 покоління @ 1x 163 7.9" iPad 1 і 2 покоління @ 1x 132 9.7 "
Оброблені пікселі і фізичні пікселі рівні на всіх iOS пристроях крім iPhone 6 Plus. Тут екран має меншу роздільну здатність пікселів ніж воно повинно бути при реальному @ 3x дозволі. Тому розмір обробленого контенту автоматично зменшується до 87% реального розміру (з 2208 х +1242 пікселів до 1920 х 1080 пікселів).
Можна виділити наступні типи іконок в iOS: іконка програми, іконка для магазину додатків AppStore, іконка для Spotlight, іконка для налаштувань. Розміри цих іконок зображені в таблиці нижче.
Іконки зазвичай зберігаються як квадратні PNG файли в різних дозволах. Ніяких додаткових ефектів дизайнеру застосовувати не потрібно. iOS сама застосовує всі необхідні ефекти. Теж саме стосується радіусу кутів іконок. На iOS пристроях і в AppStore ми бачимо «закруглені» кути (кути з радіусом). Ні в якому разі не потрібно самому створювати ці заокруглення і зберігати їх в фінальному файлі. Apple обріже вашу іконку з необхідним радіусом самостійно. Тому результатом вашої роботи має бути просто квадратне зображення в PNG форматі.
Для презентацій замовникам або для того щоб бачити як буде виглядати іконка, ви звичайно можете застосовувати маски з закругленими кутами в Photoshop, але не забудьте їх відключити / видалити перед експортом фінального зображення.
Ще один важливий аспект який слід враховувати - прозорість. Майте на увазі що прозорість не підтримує для іконок додатка взагалі. Тому усі прозорі області будуть заповнені чорним кольором.
Якщо ваша іконка має білий фон, то сіра 1px обведення буде застосована до неї щоб зробити її більш виділяється. Це буде зроблено тільки для іконок які будуть перебувати в розділі «Налаштування» пристрою (якщо ваше додаток представлено там).
Також для створення піктограм, раджу користуватися допоміжними неофіційними шаблонами . Там уже застосована система сіток розроблена компанією Apple для своїх іконок. Це може полегшити вам процес створення дизайну.
В даний момент, системним шрифтом є San Francisco Font . Цей шрифт став основним починаючи з iOS 9. До цього, системним шрифтом був Helvetica Neue. На додаток до основного системного шрифту, є досить багато інших стандартних шрифтів , А також є можливість підключити будь-який сторонній шрифт. Використовувати шрифти завжди необхідно з розумом і не забувати про ліцензії (особливо якщо використовуєте сторонні шрифти).
Починаючи з iOS 7 яскраві кольори стали обличчям iOS (кому-то це подобається, хтось це ненавидить). Ви можете використовувати будь-які кольори для створення своїх дизайнів. Особисто я раджу не захоплюватися використанням великої кількості барвистих квітів, тому як це може збивати користувача. Оптимально буде використовувати 1-2 два основні кольори і 1-2 допоміжних (не враховуючи чорний / білий для тексту і заголовків).
Стандартна Apple палітра виглядає наступним чином:
Якщо вам подобаються кольори які використовує Google в своїх дизайнах, то раджу ознайомитися з непоганою підбіркою рад по дизайну в стилі Google на Behance. У другій частині є дуже докладна таблиця всіх кольорів при друці Google. Частина 1 , Частина 2 .
Піктограми (іконки) це дуже важлива складова дизайну будь-якої програми. Вона може гармонійно доповнити текст, іноді навіть замінити його (з цим потрібно обережно, піктограма повинна бути зрозуміла користувачам). Найчастіше піктограми використовуються в Tab Bar (панель навігації, розташовується внизу екрану) і Nav Bar (панель навігації, розташовується у верхній частині екрану). Цим їх використання не обмежена, ви можете використовувати їх там де вважаєте за необхідне.
Піктограми використовуються в Tab Bar завжди мають два стани: Стандартне стан (в стилі обведення, з шириною обведення в 1 або 1.5 поинта) і Активний стан (з заливкою кольором).
Ніколи не потрібно застосовувати ніяких додаткових ефектів (тіні, внутрішні тіні, світіння і т.п.) так як це не відповідає стилістиці iOS 9. Піктограми повинні бути одноколірними на прозорому тлі.
iOS пропонує прекрасну колекцію готових для використання елементів, які дуже полегшують життя розробникам і дозволяють досить швидко створювати інтерфейси. Багато з елементів є настроюються і можуть змінювати свій зовнішній вигляд за бажанням розробника.
Якщо стандартні елементи не покривають потреб розробника, то він може написати власні елементи або доповнити функціональністю вже існуючі.
Системна панель (Status Bar) містить в собі основну системну інформацію, таку як доступність зв'язку, поточний оператор зв'язку, статус підключення до Wi-Fi / 3g / LTE, поточний час, статус Bluetooth, будильник, заряд батареї. Даний елемент є на більшості основних сучасних операційних систем для мобільних пристроїв (iOS, Android, Windows Phone).
Статус бар візуально з'єднаний з панеллю навігації (Navigation Bar) і використовує його фонову заливку (починаючи з iOS7). Для відповідності візуальному стилю вашого застосування і гарантування читання, «нутрощі» системної панелі представлені в двох стилях оформлення: темному і світлому. Розмір статус бару становить 20 поінтів (тобто 20 пікселів для iPhone молодше 4 версії; 20х2 = 40 пікселів для @ 2x Retina дисплеїв iPhone 4, 4S, 5, 5S, 6; 20х3 = 60 пікселів для @ 3x Retina HD дисплея iPhone 6 Plus).
В iOS передбачена можливість заховати системну панель, але це робити не рекомендується. Так як більшості користувачів достатньо часто необхідна інформація яка знаходиться в системній панелі (час, доступність Wi-Fi, рівень заряду батареї). Якщо системної панелі не буде, користувачеві потрібно буде покинути додаток щоб дізнатися необхідну інформацію. Це розірве плавність і цілісність взаємодії з вашим додатком і може викликати негативні емоції.
Ховати системну панель має сенс лише в тому випадку якщо необхідно відобразити певний елемент без відволікаючих інших елементів (наприклад фотографію, відео і т.п.).
Панель навігації містить в собі керуючі елементи для навігації через екрани додатка і управління контентом поточного екрану (не завжди). Вона завжди буде присутній у верхній частині екрану, прямо під системної панеллю. За замовчуванням, фон панелі навігації злегка прозорий з розмитим контентом під нею. Але ви можете легко зробити фон суцільним кольором, градієнтом або власним зображенням (з цим обережно, слід враховувати різні дозволи екранів щоб не отримати розтягнуті і / або нечіткі елементи).
Елементи панелі навігації завжди повинні розташовуватися в певних місцях:
- Кнопка назад повинна завжди перебувати у лівого краю екрана.
- Тема поточного екрану повинен завжди розміщуватися по центру.
- Кнопки додаткових дій завжди повинні знаходитися біля правого краю екрана. Якщо можливо, завжди краще використовувати лише одну кнопку дії справа. Це зробить екран більш простим для розуміння користувача і дозволить запобігти випадкові натискання і не попадання по кнопках.
Панель інструментів містить набір дій для управління або взаємодії з контентом поточного екрану. На iPhone ця панель завжди розташовується у нижнього краю екрану, в той час як на iPad вона може перебувати у верхнього краю екрану.
Також як і в панелі навігації, фон панелі інструментів може бути змінений (за замовчуванням - невелика прозорість і розмитий фоновий контент).
Панель інструментів використовується коли певний екран вимагає більше ніж 3 основних дії, які досить важко помістити в панель навігації.
Панель пошуку доступна в двох різних стилях за замовчуванням: стандартному і спрощеному. Обидві версії відрізняються лише зовнішнім виглядом і мають однакову функціональність:
- Поки текст не був введений в поле пошуку, там буде знаходиться заданий за замовчуванням текст (Пошук, Search).
- Як тільки користувач починає вводити пошуковий запит, текст «Пошук» або «Search» зникає, а кнопка очищення введеного тексту з'являється у правого краю.
Іноді панель пошуку містить підказку - коротке речення яке визначає повноваження пошуку. Наприклад: «Введіть назву книги, автора або частина тексту для пошуку».
Картотека використовується для швидкої навігації через розділи програми які містять в собі інформацію сгруппированную за певною ознакою (наприклад в додатку «Музика», існують вкладки Пісні, Артисти, Плейлисти і т.п.). Ця панель завжди знаходиться внизу екрану.
Картотека може містити тільки певну кількість вкладок. Якщо вкладок більше ніж може бути відображено на панелі вкладок, то остання вкладка замінюється на вкладку «Ще» яка буде вести до списку захованих вкладок з можливістю зміни порядку відображаються вкладок. Наприклад, в додатку "Музика":
Максимальна кількість відображуваних вкладок на iPhone - п'ять. На iPad їх кількість може досягати семи.
Для того щоб повідомити користувача про нову інформацію на вкладці, використовується піктограма сповіщення з цифрою про кількість подій, що відбулися.
Кожна з вкладок може знаходиться в двох станах - активне і стандартне. Коли вкладка в стандартному стані, вона повинні бути однаково видно щоб дати користувачеві можливість переключитися на неї. В основному, активна і стандартна вкладки відрізняються кольором. Має сенс робити активну вкладку яскравішою, ніж стандартну, щоб користувач міг легко відрізнити їх.
Таблиці використовуються для відображення інформації в формі списку в одну або кілька колонок і з можливістю розбивати рядки на окремі секції або групувати їх.
Існує два можливих види відображення Таблиці, які необхідно використовувати в залежності від типу даних який планується відображати:
проста Таблиця
Проста таблиця складається з певної кількості рядків. Проста таблиця може мати заголовок (у верхній частині сторінки) і опис (внизу таблиці). Також може бути відображена вертикальна навігація в правій частині екрану для навігації через таблицю. Є сенс це робити коли представлений великий масив даних які можуть бути відсортовані якихось способом (наприклад сортування за алфавітом).
групувати Таблиця
Групувати таблиця дозволяє об'єднати рядки в групи. Кожна група може мати заголовок (тут можна вказати назву групи) і опис (можна використовувати для підказки, описи і т.п.). Групувати таблиця повинна містити як мінімум одну групу і кожна група має складатися як мінімум з одного рядка.
Для обох видів таблиці є кілька стилів:
Стандартний
Таблиця містить зображення (або не містить) розташоване зліва і заголовок рядка.
З підзаголовком
Цей стиль дозволяє використовувати маленький підзаголовок під заголовком рядка. Зазвичай підзаголовок використовують для короткого опису або пояснення.
З значенням
Таблиця в цьому стилі дозволяє відображати певне значення яке пов'язане з заголовком рядка. Так само як і стандартний стиль, цей стиль дозволяється використовувати зображення зліва і заголовок рядка. Значення відображається праворуч у рядку.
iOS надає різні варіанти спливаючих вікон для відображення, редагування та управління даними.
Кожен з варіантів спливаючих вікон існує для відображення в певних ситуаціях. Вони мають різний вигляд, але мають одну загальну особливість: вони завжди є самим верхнім шаром на екрані (тобто відображаються поверх всього іншого), а контент ховається під ними.
Вікна такого типу використовуються для виконання конкретних завдань. Ці завдання можуть бути системними, такими як «Поділитися» (Share), або вони можуть бути власним, створеними розробником для цього додатка (кастомними). Коли створюєте дизайн для власних піктограм (іконок), необхідно слідувати правилам як при створенні піктограм для панелі вкладок: суцільна заливка, без ефектів, на прозорому тлі.
Даний тип використовується для виконання певної дії зі списку можливих дій або для підтвердження / відмови вчиненого користувачем дії
В портретному режимі (і в горизонтальному режимі на екранах з маленьким дозволом), дії відображаються у вигляді списку кнопок який випливає знизу і залишається внизу екрана. Завжди має бути присутня кнопка скасування для того щоб відмовитися від виконання дій представлених в списку.
Коли є досить вільного місця (наприклад на iPad), список дій перетворюється в Popovers (більш докладно про них далі). В цьому випадку, кнопка скасування більше не потрібна, так як скасуванням буде дотик в будь-якій області поза цим спливаючого вікна.
Завдання попереджень полягає в повідомленні користувача про критичної інформації і, іноді, змусити (або підштовхнути) користувача прийняти певне рішення.
Попередження завжди містить заголовок (який не повинен бути довшим ніж одна лінія) і одну (для інформаційних попереджень, наприклад кнопка «Добре») або дві кнопки (для попередження які передбачають прийняття рішення, наприклад кнопки «Відправити» і «Скасувати»).
Ви можете додати будь-яке текстове повідомлення якщо необхідно. Також є можливість додати поле введення (до двох) одне з яких може бути шифрованих (для пароля або PIN-коду, наприклад).
Меню редагування дозволяє користувачам виконувати функції типу «Скопіювати», «Вставити», «Вирізати», коли елемент виділено. Ви можете контролювати які пункти будуть відображені в меню, але ви не можете налаштовувати і змінювати їх зовнішній вигляд. Тому якщо вам потрібно меню редагування певного виду, вам прийдется писати його з нуля або використовувати готові бібліотеки доступні в інтернеті.
Їх можна використовувати коли певним чином впливати вимагає попередній вибір кількох елементів.
Даний вид спливаючого вікна з'являється під пов'язаним об'єктом (який викликає це вікно) з стрілкою вказує на цей об'єкт. Фон цього вікна використовує легку прозорість і розмитий контент під цим вікном.
Даний вид спливаючих вікон дуже функціональний і може містити абсолютно різні елементи. Також у нього можуть бути власна панель навігації, карти, таблиці і т.п. Якщо вікно містить багато елементів, то воно росте за розміром до краю екрану, а після цього з'являється можливість прокрутки.
Даний вид вікна дуже корисний для виконання завдань які вимагають заповнення великої кількості полів і виконання великої кількості дій. Вони з'являються поверх всього іншого і, поки відкриті, блокують будь-яка взаємодія з будь-якими іншими елементами.
Зазвичай модальні вікна надають:
- Тема з описом дії.
- Кнопку для закриття модального вікна або виконання будь-яких інших дій.
- Кнопку для збереження або підтвердження будь-якої введеної інформації.
- Різні елементи для введення інформації користувачем.
Доступно три різні стилі модального вікна:
- Редакція: займає весь екран.
- Сторінкове модальне вікно (Page Sheet): в портретній орієнтації, модальне вікно покриває частково контент який лежить під ним і залишає видимої невелику частину контенту (при цьому використовуючи напівпрозору чорну заливку поверх нижчого контенту). У альбомному режимі, даний стиль модального вікна виглядає і функціонує як повноекранне модальне вікно.
- Форма (Form Sheet): в портретній орієнтації, модальне вікно з'являється в центрі екрану, залишаючи видимим навколишній контент із застосуванням чорної напівпрозорої заливки на нього. Розташування даного стилю вікна змінюється автоматично коли з'являється клавіатура. У альбомному режимі, даний стиль вікна функціонує як повноекранне модальне вікно.
На зображенні вище показані 2 види модальних вікон: повноекранне модальне вікно і сторінкове модальне вікно.
В ідеалі, потрібно намагатися мінімізувати кількість використовуваних модальних вікон в додатку. Їх необхідно використовувати тільки в 2 випадках:
- Критично необхідно привернути увагу користувача
- Необхідно терміново виконати дію, не виконання якого може призвести до втрати даних або перешкодити виконанню поточного завдання
Рекомендації по створенню модальних вікон:
- Створюйте модальні вікна простими, короткими і зрозумілими.
- Завжди надавайте зрозумілий і безпечний спосіб залишити модальне вікно.
- Якщо рішення задачі вимагає ієрархію модальних вікон, переконайтеся, що користувач розуміє, що станеться після натискання кнопки "Готово" на будь-якому з рівнів ієрархії.
- Не показуйте модальні вікна поверх спливаючих вікон (Popovers).
- Дотримуйтесь загальному стилю додатка при створенні модальних вікон.
- Намагайтеся показувати заголовок модального вікна, щоб користувач розумів де він знаходитися і що зараз робить.
- Використовуйте відповідну анімацію для появи і приховування модального вікна.
- Якщо ви використовуєте різні види анімації і переходів для модальних вікон в додатку, робіть це таким чином, щоб це мало сенс для користувача.
iOS надає широкий вибір керуючих елементів які можу знадобитися вам при створенні програми. Найбільш важливі і поширені будуть розглянуті нижче. З повним списком контролів ви можете ознайомитися в iOS бібліотеці .
кнопки
Найбільш поширений вид контрола. У iOS7 вид кнопки зазнав значних змін в порівнянні з попередніми версіями iOS і власне тепер кнопки виглядають не зовсім як кнопки, а скоріше як просто привертає увагу виділений текст.
Кнопки мають величезну кількість налаштувань зовнішнього вигляду які дозволяють змінювати і налаштовувати вам практично все: стиль тексту, тіні, іконки і т.п.
Слід пам'ятати, що кнопки зазвичай мають кілька станів, які повинні відрізнятися між собою: стандартне, виділене, активне, неактивне.
Picker (Пикер, контрол вибору)
Даний вид контролів використовується для вибору одного значення зі списку доступних значень. Розширеним видом пікером є пікер дати, який дозволяє користувачеві прокручувати через список років, місяців, днів, годин, хвилин і вибирати необхідні значення.
В даних контролю змінити можна тільки колір фону. Зазвичай вони з'являються в нижній частині екрана, там де розташовується клавіатура. Але в загальному, використовувати їх можна де душа забажає.
Segment control
Сегментний контрол складається як мінімум з двох частин (сегментів) які можуть бути використані наприклад для створення вкладок категоризації контенту або фільтрації контенту.
Кожен сегмент може містити текст або зображення (іконку), але ніколи обидва ці елементи одночасно. Також не рекомендується змішувати вкладки з іконками з текстовими вкладками без іконок. Ширина сегмента змінюється автоматично в залежності від кількості сегментів.
Slider (Слайдер, повзунок)
Слайдера дозволяють користувачеві вибрати певну одне значення з безлічі доступних. Вибір значення проходить дуже плавно без будь-яких різких стрибків або певного кроку не будуть змінені. Саме тому використання слайдерів рекомендовано коли користувач повинен вибрати очікуване, але не точно значення. Наприклад, слайдер буде доречно використовувати для регулювання гучності звуку, так як користувач може чути різницю і бачити різницю між тихо і дуже тихо.
Також є можливість установки зображень (іконок) для максимального і мінімального значення, які відображаються праворуч і ліворуч від слайдера.
Stepper (Степпер)
Степпери повинні бути використані коли користувачеві необхідно вибрати точно значення із запропонованих можливих значень (наприклад 1-20). Степпер завжди складається з двох сегментованих кнопок, одна для зменшення, а друга для збільшення значення. Зміна значення відбувається з певним кроком (наприклад, натискання на кнопку збільшення значення, збільшить поточне значення на одиницю).
Візуально, степпер дуже добре налаштовуємо:
- Ви можете використовувати власні іконки для кнопок.
- Ви можете змінювати колір обведення, фон і т.п.
- Також ви можете використовувати будь-яке зображення в якості фону або роздільник.
Switcher (Перемикач, включатель.виключатель)
Перемикач дозволяє користувачеві швидко перемикатися між двома можливим станами: включено і вимкнене. Є можливість зміни кольору включеного і вимкненого стану. На цьому можливості налаштувань перемикача вичерпані. Немає можливості змінити розмір і інші параметри перемикача.
Keyboard (Клавіатура)
Доступні різні варіанти клавіатур. Стандартні клавіатури не можуть бути змінені. Але розробники і дизайнери мають можливість створювати і використовувати власні клавіатури.
Завдяки технології 3D Touch користувачі пристроїв, на яких вона підтримується, можуть швидко ініціювати певні дії прямо з домашнього екрану шляхом сильного натискання на іконку програми. Всередині програми користувачі можуть включити попередній елемента, відкрити елемент на окремому екрані або виконати інші дії, використовуючи різну силу натискання
Peek - дозволяє користувачам предпросматрівать елемент і виконувати пов'язані з ним дії, не покидаючи поточний екран. Елемент підказує користувачеві, що він підтримує Peek шляхом відображення маленького прямокутного перегляду (підказка) у відповідь на легке натиснення.
Peek:
- З'являється, коли користувач натискає на елемент, що підтримує Peek, і зникає, коли палець користувача зменшує силу натискання на екран.
- Відкриває більш детальне відображення елемента (називається pop), коли користувач натискає сильніше на Peek.
- Дозволяє користувачеві швидкі дії з елементом при свайпа вгору на екрані peek (за умови, що дана функція закладена програмістом).
Коли користувач злегка натискає на екран, елемент, який підтримує Peek, підказує, що є подальшу взаємодію, шляхом відображення прямокутного предпросмота, заданого розробником.
Ця прямокутна область предпросмотра повинна бути досить великою, щоб палець не перекривав її, і досить докладної, щоб користувач міг вирішити, чи варто йому натиснути трохи сильніше, щоб подивитися Peek.
Використовуйте Peek для швидкого передпоказу елемента. Найбільш оптимальний варіант, коли Peek дає користувачеві досить інформації про елементі, доповнюючи те, над чим працює користувач. Наприклад, користувач може використовувати peek, щоб предпросмотреть веб сторінку в надісланому йому повідомленні, щоб вирішити, чи варто на неї переходити або поділитися нею з іншими друзями. У таблиці Peek може показувати більш детальний вид рядка.
Надавайте Pop (більш детальний вид) для кожного Peek. Незважаючи на те, що Peek повинен давати користувачеві всю необхідну інформацію, ви завжди повинні надавати можливість користувачу переключиться в Pop, якщо він вирішить переключитися з поточного завдання і сфокусуватися на елементі. Pop повинен показувати той самий екран, який користувач отримав би, якби просто натиснув на елемент.
Не використовуйте peek і меню редагування (edit menu) для одного елемента. Обидва дії викликаються схожим принципом (довгий, сильне натискання на текст), це може викликати у користувача подив.
Намагайтеся не використовувати елементи візуально схожі на кнопки всередині peek. Якщо користувач прибере палець з екрана, щоб натиснути кнопку, peek зникне (закриється).
Надавайте можливість швидких дій для peek. Усередині peek, користувач може свайпнуть вгору (провести не відриваючи пальця від низу до верху), щоб побачити доступні дії, що відносяться до цього елементу. Наприклад, швидкі дії всередині програму Mail включають в себе "Відповісти всім", "Переслати" та "Перемістити повідомлення". Швидкі дії для peek не обов'язкові. Додавайте їх, тільки якщо в цьому є необхідність, і вони будуть корисні користувачеві.
Швидкі дії дозволяють користувачеві швидко і зручно виконувати різні операції, пов'язані з додатком, прямо з домашнього екрану.
Швидкі дії для застосування на домашньому екрані можна викликати тривалим сильним натисканням на іконку програми. Швидкі дії для додатка можуть містити заголовок дії, іконку і додатковий рядок тексту (не обов'язково). Ніякі інші елементи не підтримуються.
Швидкі дії повинні надавати доступ тільки до основних і найбільш корисним функцій програми. Наприклад, карти дозволяють користувачеві шукати по довколишніх місцях або побудувати шлях додому, не відкриваючи попередньо додаток карт. Кожна програма має мати як мінімум один швидкий дію. Максимум можна додати 4 швидких дії.
Не використовуйте швидкі дії для полегшення навігації за додатком. Якщо користувачеві важко або ж времязатратно відвідати основні екрани вашого застосування, то необхідно, для початку, виправити і полегшити навігацію. І тільки потім сфокусуватися на наданні швидких дій, які будуть глибоко інтегровані в ваш додаток і будуть корисні користувачеві.
Не використовуйте швидкі дії як спосіб повідомлення користувача. Користувачі iOS очікують отримувати повідомлення з додатків іншими способами (більш детально читайте на сайті Apple в розділі Notifications ).
Використовуйте простий і зрозумілий заголовок для дії, а також відповідну за змістом іконку. Заголовок повинен чітко вказувати на результат, який отримає користувач після натискання на швидке дію. Наприклад: "Прокласти Шлях Додому", "Створити Новий Контакт", "Нове Повідомлення". Ви можете використовувати додатковий підзаголовок (не обов'язково). Не додавайте назву вашої програми або іншу непотрібну інформацію в заголовок і підзаголовок. Також варто пам'ятати, що люди можуть використовувати ваше додатки на різних мовах, тому варто завчасно подбати про локалізацію.
Дуже важливо, щоб заголовок був лаконічним, наскільки це можливо, і зрозумілий для користувача. Якщо у вас довгий заголовок, і ви встановите додатковий підзаголовок, система автоматично обріже довгий заголовок, щоб вона розмістилася в один рядок. Якщо у вас не буде встановлено підзаголовок, то довгий заголовок автоматично перенесеться на наступний рядок.
Як іконки ви можете використовувати іконку з стандартного набору або створити свою. Більш детально про розміри, відступи і положенні іконки ви можете дізнатися з файлу шаблону іконки .
Система автоматично відображає іконки зліва чи справа в залежності від положення іконки вашого застосування на екрані. Нижче ви можете побачити кілька різних варіантів швидких дій.
Основні
iOS Human Interface Guidelines Керівництво по створенню користувацьких інтерфейсів від Apple
UIKit User Interface Catalog Елементи iOS інтерфейсу
iOS Шрифти Тут можна подивитися стандартні iOS шрифти і перевірити як буде виглядати будь-який текст із застосуванням цих шрифтів.
прототипування
Principle В даний момент, найкращий інструмент (на мій погляд) для створення анімованих прототипів. Володіє дуже широкими функціональними можливостями і дуже низьким вхідним бар'єром. Єдиний мінус - доступний тільки на Mac
Origami Фреймвёрк для Quartz composer від Facebook (Відмінний, але може бути складним для початківців + Доступний тільки на Mac)
Pixate Прекрасний потужний інструмент для створення анімованих прототипів. Я перейшов на нього з Origami і не пошкодував. Origami більш функціональний, але і прототипи робляться набагато довше. Я користувався Pixate аж до виходу Principle. Pixate був недавно придбаний компанією Google і став безкоштовним. Це все ще прекрасний інструмент у якого хороше майбутнє
InVision Інструмент в якому я робив свої перші прототипи, дуже легкий у використанні, але досить обмежена
Marvel Інструмент на любителя. Чомусь у мене не пішов
UXPin Досить хороший і зручний інструмент
Вихідні тексти для Photoshop і Sketch
iOS 9 GUI для iPhone (PSD) Легендарний набір початкових кодів для Photoshop від хлопців зі студії TeehanLax, яка тепер є частиною Facebook
iOS 9 GUI для iPhone (Sketch) Не менш легендарний набір для Sketch від TeehanLax (тепер Facebook)
iOS 9 GUI для iPhone (Sketch) Набір Sketch початкових кодів для iPhone від дизайнера Meng To
iOS 9 GUI для iPad (Sketch) Набір Sketch початкових кодів для iPad від дизайнера Meng To
Галереї патернів (скріншоти екранів з додатків)
Моя галерея на Pinterest Велика і якісна галерея c розбивкою мобільних інтерфейсів (і не тільки) за категоріями. постійно оновлюється
Mobile Patterns Велика галерея патернів. періодично оновлюється
Pttrns Хороша галерея патернів. Оновлюється досить часто.
Корисні речі
UIStencils Хлопці продають прекрасні інструменти для UI дизайнерів (Mobile, Web). Від Скетчбук до металевих трафаретів. дуже раджу
DotGrid Продають хороші альбоми та Скетчбук
Rotring Якщо механічний олівець, то тільки Rotring. Металеві, дуже хорошої якості і з найоптимальнішим вагою
