Как создать своё первое iOS-приложение. Подробная инструкция от профессионалов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

Оригинал

2. Создание сториборда. Storyboard отвечает за отображение экранов приложения в вашей программе. Сториборды отображают то, что находится на каждом отдельном окне, и показывают их взаимодействие. Эта штука даёт возможность хорошо проработать вашу игру. Далее делаем следующее: Выбираем Файл, затем New, затем Файл. Далее нажимаем на «User Interface». Кликаем на сториборд, выбираем «next». В меню устройств нужно выбрать устройство, для которого предназначена ваша программа. В моём случае — I phone. Называем объект «Main».

3. Назначаем сториборд к вашему проекту. Теперь назначаем сториборд в качестве главного интерфейса нашей программы. Если все сделать правильно, сториборд будет доступен сразу, когда мы запустим нашу программу. Вот, как нужно действовать: выбираем имя своего файла во вкладке слева, нажимаем targets и выбираем свой проект из этого заголовка. Перейдите в меню «Generals» и выберите «Deployments Infos». В Main Interface вводим Main.Storyboard и переходим к следующему шагу.

4. Добавляем первый экран. Для этого нам понадобится контроллер вида. С помощью них мы сможем сгенерировать приблизительный вид приложения. Изначально можно изучить контроллеры вида и выбрать их из нескольких пресетов. Если вдруг вы в этом деле чайник, то лучше, конечно, выбрать из существующих. Таким образом, мы увидим, как будет выглядеть приложение в руках у обычного юзера. Выбираем «Mains Storyboards». Находим Object Library. Внизу правой части можно этот самый Object Library выбрать. Справа вы увидите появившееся окошко, которое именуется холстом. Перетаскиваем туда «Views Controller». Когда пользователь запустит приложение, он увидит загрузочное окошко. Поздравляем!

5. Добавляем объекты на наш экран. После выбора контроллера вида, вы можете добавлять объекты в ваше приложение. Их можно найти во все том же Object Library. Эту библиотеку можно найти внутри контроллера вида.

6. Изменяем добавленные объекты. С помощью простых инструментов у вас появляется возможность изменения интерфейса, что позволит придать приложению красоты и индивидуальности. К тому же вы сможете добавить текст-подсказку для пользователя, чтобы помочь ему разобраться в игре. Также вы можете изменять размеры объектов, шрифт текста и так далее.

7. Добавление дополнительных экранов. Ваше приложение не может состоять из одного экрана — в этом просто нет смысла. Поэтому вам понадобится создавать их самостоятельно. Делается это предельно просто — контроллер вида на пустую часть экрана.

8. Активируем «Navigation Controller». Эту фичу мы будем использовать для перемещения между несколькими окошками. Достигается с помощью Navigation Controller. Navigation Bar добавляется вверху программы. Запомните, Navigation Controller добавляется строго к начальному экрану для контроля за перемещением по всем остальным окнам. Для этого выбираем загрузочный экран. Нажимаем на editor, затем на Embed In, затем тыкаем на Navigation controller. После проделанных шагов появляется навигационная панель.

9. Добавляем функциональность Navigation Controller. Когда меню навигации было создано, к нему необходимо добавить инструменты. С помощью этой фичи пользователь сможет «переезжать» по приложению из одного места в другое. Мы предлагаем добавить стандартный функционал. Добавьте заголовок (для этого нужно открыть пункт Navigation Item, а затем Attributes Inspector, после чего вводим заголовок), Navigation button и обеспечиваем кнопкам свойства.

10. Связываем экран с кнопкой. Для связывания кнопок нажимаем ctrl, а затем перетаскиваем их её на следующий экран. Вскоре вылезет пункт Action Segue с доступными опциями. Выбираем «Push» для перемещения по окошкам.

11. С помощью вышеперечисленных шагов можно создать программу с очень примитивным функционалом и интерфейсом. Если вы все же хотите создать действительно интересное приложение с возможностью обработки данных — изучайте язык Objective C.