Зміст
- 01. Спробуйте Skala Preview
- 02. Пройдіть через нього за допомогою DevRocket
- 03. Дизайн іконок у квадраті
- 04. Використовуйте шаблон дизайну значків Apple
- 05. Дизайн для iPhone 4 і збільшення
- 06. Запам’ятайте свої пікселі
- 07. K.I.S.S.
- 08. Динамічний тип
- 09. Рядок стану iOS 7
Проектування для iOS завжди викликало особливі проблеми, з якими дизайнеру доводиться боротися. У той час як попередні версії iOS були зосереджені на скеуморфному зовнішньому вигляді, чудова «плоска» естетика iOS 7 вимагає іншого підходу, і найкращі програми для iPhone просто повинні адаптуватися до цього.
З огляду на те, що вся індустрія рухається до плоскої тенденції дизайну, не було справжнім сюрпризом, коли минулого року команда дизайнерів Джоні Айв в Apple взяла iOS у цьому напрямку. Графіка тепер сміливіша, кольоровіша і більше зосереджена на функціях, ніж форма. Тож, навіть якщо ви вже знаєте, як створити програму, зверніть увагу на ці поради та прийоми для створення інтерфейсів, готових до iOS 7, у Photoshop.
01. Спробуйте Skala Preview
Skala Preview - це надзвичайно зручний інструмент для всіх дизайнерів програм. Це дозволяє побачити ваш дизайн - ідеальний для пікселів та кольоровий - на екрані вашого пов’язаного пристрою, прямо з Photoshop. Це знімає здогадки і економить багато часу.
02. Пройдіть через нього за допомогою DevRocket
DevRocket - ще один плагін Photoshop, який чудово підходить для дизайнерів iOS.За допомогою нього ви можете створювати шаблони в обох орієнтаціях, перемикатися між Retina та стандартним у Photoshop і навіть експортувати з обома роздільною здатністю. Суттєвий.
03. Дизайн іконок у квадраті
Вам може здатися, що оскільки на вашому iPhone з’являються піктограми програм із закругленими кутами, саме так вам потрібно їх розробити. Не так. Візьміть до уваги видиму область і позначте її у Photoshop як керівництво дизайном. Надішліть квадратне зображення в App Store, а решта нехай зробить Apple.
04. Використовуйте шаблон дизайну значків Apple
Існує безліч шаблонів, які допоможуть вам розробити піктограму, яка працює з новою сіткою макета Apple (знайдіть її тут безкоштовно). Вони чудові, оскільки дозволяють створювати кілька значків, просто вставляючи графіку в заздалегідь визначені маски шарів.
05. Дизайн для iPhone 4 і збільшення
Якщо у вас немає часу на створення спеціального інтерфейсу для iPhone 4 і 5, спроектуйте трохи менший екран iPhone 4 і масштабуйте його. Якщо у вас є час, використовуйте додатковий простір для iPhone 5 і надайте своїй програмі - і її головній функції - приміщення для дихання.
06. Запам’ятайте свої пікселі
Розробка дисплея Retina означає роботу з двома роздільною здатністю - звичайного розміру та подвоєного розміру для Retina. Щоб уникнути нечітких країв при зменшенні дизайну, дотримуйтесь рівних пропорцій зображення (не непарних) і встановіть прапорець Прив’язати до пікселя у Photoshop.
07. K.I.S.S.
Не забивайтеся градієнтами, рамками та тінями, оскільки це не підійде для більш простого, яскравого відчуття iOS 7. Якщо ви хочете, щоб ваш додаток виглядав як вдома, надайте багато вільного місця та уникайте скеуоморфного підходу на користь плоского дизайну.
08. Динамічний тип
Текст в iOS 7 можна динамічно масштабувати відповідно до потреб користувача. Apple подбала про системні шрифти, щоб забезпечити розбірливість - якщо ви обираєте власні шрифти, розгляньте те саме. Оскільки кнопки без полів зараз популярні, використовуйте колір тексту, щоб вказати, які елементи є інтерактивними.
09. Рядок стану iOS 7
З новим акцентом на функції над орнаментом, дизайнери повинні зробити так, щоб вміст сягав усієї ширини та висоти екрана. Хорошим прикладом цього є додаток Apple Weather. Хмари пливуть за рядком стану, максимально використовуючи повноекранну нерухомість.
Слова: Дейв Браун та Вікі Робертс
Apposition - це мобільна та цифрова творча студія. Засновник та керуючий директор Дейв працює з фахівцем з питань PR та комунікацій Вікі над проектами для клієнтів, включаючи Unilever та BBC. Ця стаття спочатку з’явилася у випуску 225 Computer Computer.
