Помните, сколько было недовольства после выхода iOS 7? :) В Apple тоже прекрасно понимали, что далеко не все сразу примуь новую внешность системы. Поэтому компания расстаралась как можно подробнее донести свои идеи до тысяч посетителей конференции. Среди сотен различных докладов и выступлений стоило обратить внимание на презентацию Майка Стерна под названием «Лучшие практические рекомендации по разработке первоклассного iOS-дизайна».

Сам Майк носит гордое звание евангелиста Apple по пользовательскому опыту. То есть именно он активнее всех несет в массы свет новшеств «Яблока» в области пользовательских интерфейсов и опыта использования «яблочных» продуктов. Поэтому его мнение даже касательно одних только иконок в стиле iOS 7 весьма интересно прочесть даже спустя год с лишним.

Иконки приложений в App Store

В своем выступлении Стерн выделил шесть основных правил, которых дизайнеру стоит придерживаться, дабы получилась красивая «плоская» иконка. Вряд ли стоит лишний раз повторять, насколько хорошая пиктограмма важна для программы. С нее начинается знакомство пользователя с приложением, по знакомому рисунку человек находит любимую программу на своем домашнем экране. Плохой же значок — по статистике, одна из трех основных причин, по которым покупатели App Store игнорируют приложения.

Так что же классные иконки iOS-продуктов делает такими классными?

Совет 1: сосредоточьтесь на уникальной форме

Расположенные ниже четыре иконки очень разные. Одни пестрые, другие залиты градиентом, но в основе каждой из них лежит уникальный символ простой формы. Это позволяет значкам оставаться узнаваемыми даже при беглом взгляде на расстоянии.

Красивые значки на основе простых форм

Иконки предстают перед пользователем в разных размерах: большие на страницах App Store, поменьше — на домашнем экране, и совсем крошечные среди настроек iOS. Убедитесь, что выбранный для вашей иконки образ хорошо масштабируется и остается узнаваемым в любом размере.

Совет 2: Тщательно подбирайте цвета

Ограничивайтесь небольшой цветовой палитрой. Одного-двух цветов вполне достаточно. Конечно, можно привести множество примеров разноцветных значков, но подобрать много гармоничных цветов не так-то просто.

Совет 3: Не используйте фотографии

Постарайтесь не брать за основу пиктограмм фотографии. Приложение Sipp — хороший пример того, как в иконке можно использовать такие же элементы, как и на фото, однако здесь они оформлены нарочито нарисованной буквы S.

Фотографии в иконках

Совет 4: Меньше букафф!

Если вы можете обойтись без текстовых элементов, пожалуй, лучше так и поступить. Попробуйте в качестве иконки приложения использовать лишь один символ или логотип. Отличные примеры значков такого типа — пиктограммы Ness, Pocket, Vine, Snapguide и Pinterest.

Иконки на основе символов и логотипов

Совет 5: Точно имитируйте материалы

Возможно, несколько неожиданное наставление, учитывая, что в iOS 7 скевоморфизму сказано решительное «нет». Однако вот вам значок рисовалки Paper. Да и «лазерная голограмма» Square Wallet тоже красиво смотрится на домашнем экране. Иконка 1Password прекрасно символизирует защиту данных и тоже вызывает у пользователя положительные эмоции. В значке же LifeKraze настолько явно просматриваются идеи скевоморфизма, что Майк даже отметил, что не представляет, как эту иконку нарисовали — высочайший уровень мастерства.

Скевоморфизм в iOS 7

Совет 6: Проявите творческий подход

Вы стараетесь выделиться из толпы. Routesy, Hipstamatic, Evernote Food, Brewski Me — эти значки точно не останутся незамеченными. Зачастую секрет узнаваемости заключается в простой идее, когда даже самая сложная визуализация основана на сочетании простых форм.

Узнаваемые иконки

И еще один совет: Тестируйте свою иконку на разных обоях

Хотя сам значок может выглядеть суперотлично на фоне классических «дождевых капель», никто не гарантирует такой же результат с другими обоями. Так что нужно как следует постараться, чтобы протестировать иконку на фоне самых разнообразных фоновых изображений, в том числе и внутри папок. Значок нужно оценить в самых разных условиях.

Тестирование значков на разных обоях

Показательный пример: Turnplay

Знаменитая студия «иконописи» Ramotion провела потрясающую работу над Turnplay — небольшим приложением, которое воспроизводило музыкальные файлы, словно они были записаны на виниловые пластинки.

Интерфейс программы Turnplay

Когда дело дошло до создания пиктограммы для Turnplay, дизайнеры Ramotion пошли по проторенному пути, начав со старых-добрых бумажных набросков. Как же круто рассматривать карандашные дизайны, настолько насыщенные мелкими деталями, в которых отражено развитие каждой отдельно взятой идеи. Как видно на рисунке ниже, команда Ramotion никогда не теряла из виду дизайн самого приложения, даже когда прорисовка и детализация становились все более и более сложными.

Черновики иконки

Среди многочисленных вариантов заметны попытки обыграть в значке букву T, пальцы на виниле и т. д. И вдруг у них получилась такая иконка: вертушка с символом воспроизведения по центру — простой значок, основанный на простых формах:

Финальная иконка Turnplay

Если у вас есть желание посмотреть презентацию Майка Стерна полностью (ищите в списке выступлений пункт Best Practices for Great iOS UI Design), вы точно не пожалете о потраченном часе своего времени. Не забудьте только, что для просмотра видео нужна учетная запись разработчика Apple (базовая регистрация бесплатна).

По материалу TheNextWeb.