» » 50 советов для разработки безупречного дизайна iOS приложения

50 советов для разработки безупречного дизайна iOS приложения

50 советов для разработки безупречного дизайна iOS приложения

Привожу перевод статьи Ника Карсона. В статье собраны совместно, как мне кажется, главные правила построения интерфейса для iOS приложений.

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

2. Ориентируйтесь на устройство при разработке приложений: учтите не только лишь размер экрана, да и где и когда устройство употребляется. Больше всего iPad употребляется для развлечений меж 8-11 часами вечера, перед сном, тогда как iPhone — в очереди на автобус либо в кофейне. Учтите разные сценарии использования при разработке приложений – включая и то, как далековато устройство размещено от лица юзера.

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

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

5. При адаптации приложения к экранам разных размеров, помните, что при значимом его изменении – к примеру, от iPhone к iPad – метод использования устройства также поменяется. Если размеры ограничены, используйте главные функции приложения, при их увеличении – можно включить любые дополнительные функции, которые не вошли в более сжатую версию, потому что у вас возникает возможность обыграть дополнительное место.

За остальными 45-ю — добро пожаловать подкат.

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

7. Палец больше и наименее точен, чем мышь, потому область нажатия на сенсорном экране обязана иметь значительную погрешность. Чтоб упростить задачку: никогда не располагайте очень много частей управления в одной области экрана либо очень близко друг к другу, и удостоверьтесь, что кнопки довольно значительны для четкого нажатия. Apple советует размер более 44x44.

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

9. При разработке приложений для iOS, направьте внимание на систему обозначений Apple: у их обеспеченный опыт разработки пользовательского интерфейса. Изменение стиля 1-го из частей управления, чтоб сделать лучше вид и атмосферу вашего приложения это одно, но никогда не меняйте функции – это только перепутает юзеров, которые привыкли к стандартным приложениям OS. Например, красноватые кнопки употребляются для удаления объектов, а голубые – для выполнения действий.

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

11. Начните разработку с планирования базисной структуры и потом добавляйте главные многофункциональные блоки. Самый легкий метод сделать это – нарисовать структурную схему приложения, а потом соединить все активные экраны и точки. Попросите стороннего человека поглядеть ваши эскизы и оценить, комфортно ли использовать предлагаемые функции.

12. При выборе внешнего облика и атмосферы приложения, соберите в помощь вдохновляющие материалы – к примеру, составьте мудборд. Будет ли это не положительно и не отрицательно дружеский интерфейс либо изображение реально имеющихся материалов таких как кожа, камень либо металл? Экспериментируйте с разными комбинациями и цветовыми сочетаниями: в этом может посодействовать Adobe Kuler.

13. Размеры рабочей области iOS могут варьироваться от 1024x768 (iPad) до 640x960 (iPhone 4 и 4S) и 320x480 (iPhone 3GS). Нередко приходится вставлять текст описания в дополнение к обычным иконкам, чтоб вместить всю нужную информацию в небольшой экран. Это красивый метод создать особенный зрительный язык общения для ваших приложений, с помощью которого ясно какие функции делают иконки.

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

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

16. Советы Apple по разработке дизайна интерфейса неподменны для заслуги сопоставимости с платформой, но некие правила необходимо нарушить, если того требуют происшествия. Некие приложения — к примеру, Flipboard, Twitter либо Instagram — на сто процентов отличаются от стандартных пользовательских ожиданий – потому не страшитесь выйти за рамки условностей.

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

18. При разработке приложений, функционирующих в реальном времени – таких как игры – решающее значение имеет разработка главных частей довольно большого размера, чтоб юзеры могли просто и стремительно их выбирать. В фазе тестирования найдите юзера с относительно большими руками: это самый действенный метод узнать соответствуют ли элементы требованиям и довольно ли они значительны.

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

20. Изучите как ваше приложение приспосабливается к ландшафтному и портретному режимам. Может быть для отдельных частей требуется больше либо меньше места при смене ориентации, либо необходимо добавить какие-то другие функции либо функции? Тут понадобится возможность демонстрировать и скрывать какие-либо элементы.

21. Как уже упоминалось, иконка дает юзерам 1-ое воспоминание о вашем приложении: если она смотрится необмысленной либо непрезентабельной, приложение не воспримут серьезно. Вы сможете провести поиск по App Store и сопоставить ее с другими иконками данной категории приложений. Неплохой метод оценить, как смотрится иконка вашего приложения, поместить ее на экран посреди других.

22. При разработке приложений форма всегда должна следовать за функционалом. Всегда существует нескончаемое количество вариантов воплощения задачки исходя из убеждений внешнего облика и атмосферы, но при всем этом сначала нужно верно представлять для себя цель сотворения приложения, еще до того, как вы будете заниматься его внешним обликом и определением мотивированной аудитории. Естественно, что различные аудитории предпочтут разные стили – например, приложения для бизнеса не должно быть исполнено в мультяшной манере.

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

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

25. Супер совет — Высококачественный дизайн отлично можно адаптировать под другие размеры – вспомните: такие сервисы как Гугл, Facebook и Twitter были приспособлены под другие формы, либо версии приложений для iPhone либо iPad, такие как к примеру iWork. Маленькие версии более имеют более условную структуру, но, большей частью имеют тот же вид и атмосферу.

26. Зрительное мышление нередко помогает сделать лучше идею, используйте ручку и бумагу, Photoshop либо интерактивный инструмент, к примеру, макеты Balsamiq. Если у вас есть рабочий макет на устройстве, вы сможете получить драгоценное тестирования недорого — просто купите чашечку кофе знакомому, в обмен на неофициальное 10-минутный юзабилити-тестирования.

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

28. Может быть это и разумеется, но чтоб приложение оставалось обычным, опасайтесь напластования функций. Может при сопоставлении с другими приложениями это звучит отлично, но это может усложнить и сделать сложным в использовании ваше приложение. Опасайтесь огромных объемов инфы, втискивание огромного количества инфы в небольшой экран не сделает приложение проще, это просто заморит юзера.

29. Всегда разрабатывайте приложение, отталкиваясь от цели, которую юзер желает добиться — при всем этом, помогите ему сделать это просто и интуитивно – а не только лишь на основании того, что избранный дизайн – самый легкий. Обычно приложения разрабатываются на основании единой технической концепции, где пользовательский интерфейс выстраивается вокруг ее нужд.

30. Большая часть высококачественных приложений имеют единую стилистическую тему, которая в свою очередь, оказывает влияние на конструктивные решения, и присваивает вашим приложениям чувство цельности. Эта тема всегда должна соответствовать главной функции приложения: приведем оборотный пример, когда тема не совершенно соответствует функции – внедрение «прошитой кожи» в новеньком приложении Find a Friend.


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

32. Если зрительная область элемента управления мало меньше стандартного размера тач-области 44x44, удостоверьтесь, что область экрана, отвечающая на прикосновение юзера по размерам больше, и не располагайте элементы управления очень близко друг к другу.

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 нужно учитывать огромное количество аспектов форм использования приложения. При переключении меж ландшафтным и портретным режимами, принципиально учитывать какие элементы поменяются, и какие плавненько перейдут в другую форму.

Благодарности: Yasuko Chujo and Koji Tachibana at e-bird Inc; Scott Meinzer at tap tap tap; Bowen Osborn at Shotzoom; Mladen Djordjevic at NFANY; Christoph Teschner at Algoriddim; Joey Neal at Superstashapp; Ben Zotto at Cocoa Box; Jon Steinmetz at Pixel Research Labs; Mike Rundle at Flyosity; Alex at Androidslide; Steve Varga, AKA Vargatron; and Marcos Weskamp at Flipboard.
Опубликовано: MusTanG (28-10-2016, 23:57)
0 (голосов: 0)
Комментариев пока еще нет. Вы можете стать первым!

Добавить комментарий!


vote-iconОПРОС
В какой сфере вы делаете наиболее частые покупки?

КТО НА САЙТЕ?
( 8) ( 0) ( 6) ( 2)
Юзеры:
- отсутствуют
Гости:
Роботы:
Последние 20 посетителей... - отсутствуют