Сегодня я хотел бы познакомить наших замечательных читателей с традиционным вольным переводом статьи «Broken iOS icons». Её автором является Невен Мрган (Neven Mrgan), американский иллюстратор, графический дизайнер и веб-разработчик, а посвящена она одной проблеме, которую некоторые разработчики либо не замечают, либо забывают решить перед отправкой своих программ на рецензию в App Store — это неправильные иконки для мобильных приложений.

Я стал замечать все больше и больше иконок приложений с хорошими идеями, исполнением и одной ужасающей проблемой, от которых у «чересчур впечатлительных» дизайнеров вроде меня волосы встают дыбом. Вот только некоторые из них, которые были взяты из вкладки Featured магазина приложений для iPad:

Отмечаете общие черты? Давайте увеличим!

Радиус скругления фона иконки больше радиуса скругления маски iOS, в результате чего образуются лишние белые пиксели.

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

Но что в этом случае делать дизайнеру? Я бы порекомендовал вообще не связываться с прозрачностью. Не пытайтесь подгонять фон под маску iOS и заполняйте его целиком. Вот что я имею в виду:

Вы могли заметить, что на рекомендованной иконке слева присутствует внутренняя тень в верхней части, которая соответствует маске iOS. Ничего страшного: даже если ваша тень точно не совпадает с этой  маской, разница будет незначительной. Но это не так, когда речь заходит о целом фоне! К сожалению, в оригинальных примерах определение «незначительно» явно не подходит.

Кроме этого, одного рисования макетов в Photoshop не достаточно: дизайнер должен обязательно проверить на устройстве окончательный вариант приложения с окончательной иконкой и убедиться в том, что все выглядит великолепно. Существует небольшой трюк для дизайнеров, позволяющий «не дергать» разработчиков каждые 5 минут: установите значок приложения в качестве apple-touch-icon на своей веб-странице, а затем добавьте веб-ссылку на эту страницу на домашний экран гаджета. Просто и быстро.

Но есть еще одна проблема:

Я понимаю, что текстовые метки для iOS-приложений ограничены, но пожалуйста, подбирайте названия, которые умещаются в это ограничение. Обрезанное название выше выглядит «супер-непрофессионально». Проявите творческий подход! Например, Wolfenstein 3D отображается на экране как Wolf3D.

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


Читайте также: