Руководство приложение ios

Создание любых приложений, в том числе для устройств на iOS, требует достаточно обширных знаний. Математику и логику программисту также нужно знать, даже если на начальном этапе это не понадобится. Развитие современных технологий дало разработчикам возможность не изучать досконально архитектуры ПК, тем не менее понимание основ (системы счисления и способы их преобразования, скорость работы подпрограмм, эффективность различных алгоритмов) в этой области необходимо.

Программисту, специализирующемуся на iOS-приложениях, нужно на профессиональном уровне разбираться в самих операционных системах от Apple (как macOS, так и iOS). Добавим обязательное требование к iOS-разработчику, заключающееся в знании языков программирования, созданных для этой архитектуры (Objective-C, Swift). Навыки владения Delphi, C++, C# или VB.NET здесь особо не нужны.

Безусловно, знать хотя бы основы того же C++ не помешает, тем более что его элементы встречаются и в «яблочных» языках. И все же наибольшей популярностью в разработке для Apple-устройств пользуется Objective-C. Этот язык появился еще в начале 1980-х годов (то есть гораздо раньше C++). Более молодой Swift создатели выпустили в свет в 2014-м. И Objective-C, и Swift активно используются в разработке. Первый нужен для поддержки старого ПО, на втором же пишутся все новые приложения. По этой причине знать желательно оба языка.

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

А вот английский язык необходимо знать, так как вся актуальная документация по разработке на сайте Apple написана именно на нем. Да и в целом в программировании английский играет ключевую роль.

Основы разработки приложений под iOS

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

• Создание iOS-приложений требует предварительного тщательного анализа отзывов и пожеланий целевой аудитории.
• Программирование для устройств Apple выполняется в среде Xcode IDE, которая работает только в OS X.
• Для размещения готового приложения в AppStore необходимо строго соблюдать требования этого магазина.

1. Выбор языка для начала. Начинать разрабатывать можно как простые, так и кросс-платформенные приложения. В первом случае используется один из двух основных языков для разработки под iOS — Objective-C и Swift. Во втором случае может быть использован код на Java, C++, Python и т. п.
2. Выбор типа программирования (нативное, гибридное, «чистый web»). Выбор здесь определяется самой концепцией приложения. Если от будущей программы не требуются постоянная доступность, автономность работы в условиях отсутствия интернета и наличие уведомлений для пользователя, лучшим вариантом будет веб-приложение. Благодаря запуску прямо из браузера такую программу можно использовать на любой платформе. Среди других преимуществ отметим универсальность, автоматические обновления, дешевизну разработки.Гибридную или нативную разработку стоит выбрать при создании полноценного мобильного приложения. В первом случае создаются сразу несколько версий программы соответственно для нескольких операционных систем. Это дешевле программирования исключительно под iOS, но и дает в итоге меньшую производительность и безопасность приложения.Выбор гибридного типа разработки обоснован, если:
   • необходимо создать простое приложение;
   • предполагается недорогое использование на двух платформах;

   При этом, как указывалось ранее, нужно быть готовым к плохой производительности и к постоянной зависимости от интернета, поскольку гибридные программы работают на связке HTML5 + JS.

   Нативный подход позволяет обойтись без «костылей». Приложение разрабатывается только на стандартном для iOS языке.

   Когда стоит выбрать последний вариант?

   • Приложение создается для работы на одной платформе.
   • Предполагается использование функций, специфичных для данной платформы.
   • Требуется постоянное обновление программы, скоординированное с выходом обновлений ОС или выпуском новых версий устройств Apple.
3. Стоимость размещения приложения в AppStore. На проверку магазином заявки на публикацию уходят обычно сутки. Далее после одобрения создатель программы должен подписать соглашение и заплатить 99 долларов в качестве взноса за iOS Developer Program. Причем, платеж не единоразовый — его необходимо проводить ежегодно.

Скачать
файл

Пошаговая инструкция по разработке приложения для iOS-приложения

1. Выбор идеи. Первый этап является ключевым и одновременно самым интересным. Он определит популярность приложения среди аудитории AppStore. Здесь самое сложное для разработчика — определиться, что будет представлять собой программа: логическую игру, агрегатор онлайн-магазинов и т. д. Необходимо решить, какую именно задачу должно решать приложение. Быстрый ответ на этот вопрос будет означать, что разработчик выбрал правильное направление.
2. Выбор инструментария. Сформулировав идею, не стоит сразу писать для нее код. В разработке мобильных приложений iOS важное значение имеет дизайн (внешний вид). И для этих целей отлично подойдет векторный редактор Sketch. Причем оценивать варианты наработок можно сразу же на устройстве благодаря плагину Sketch Preview и бесплатному просмотрщику Skala Preview. После создания дизайна и назначения функций кнопкам программист может приступать непосредственно к коду.
3. Этап разработки. Приложение для iOS разрабатывается, как правило, на Objective-C, хотя все более популярным среди разработчиков становится Swift. Этот язык примечателен более простым синтаксисом и, как следствие, он проще в освоении. Тем не менее, для самостоятельной разработки приложений под iOS Swift требуется тщательное штудирование специализированных учебников и справочников. За время такого обучения другой разработчик может уже реализовать намеченную идею, создав аналогичное приложение.

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

4. Выбор названия. Любопытный факт: имя определяет большую часть успеха приложения. Именно с названием (не считая иконки) впервые сталкивается пользователь, когда находит приложение, например, через поиск. Поэтому к неймингу нужно отнестись серьезно:
   • для игры подойдет огромное множество вариантов, пришедших в голову создателю;
   • узкоспециализированное приложение желательно назвать в соответствии с функцией (например, вариант для заметок — «Notes»);
   • лучше подбирать англоязычное название, понятное иностранным пользователям (например, приложение из категории «музыка» логично назвать «Music»).

   Дарим скидку от 60%
   на обучение «Инженер-программист» до 01 октября

   Уже через 9 месяцев сможете устроиться на работу с доходом от 150 000 рублей

   Забронировать скидку

   
   

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

5. Размещение в магазине. Готовое к загрузке и тщательно протестированное приложение можно публиковать в AppStore. Но перед этим необходимо купить подписку разработчика за 99 долларов в год, о чем мы уже упоминали ранее. Далее рекомендуется внимательно изучить гайдлайны магазина.

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

Пример разработки iOS-приложений на языке Swift

В качестве примера возьмем простое приложение, которое рассчитывает индекс массы тела и количество калорий, требуемое для поддержания массы. Расчет будет вестись с использованием стандартной формулы ИМТ и формулы Гарисса Бенедикта.

1. В первую очередь необходимо создать проект в среде Xcode. Сделайте это, нажав комбинацию клавиш Cmd+Shift+N или выбрав в меню File — New пункт Project.
2. Выберите вариант Tabbed Application и нажмите Next.
3. Придумайте название приложения в соответствии с приведенными критериями и впишите его в поле Product Name. Нажмите Next и сохраните проект в определенной папке. Параметры Organization Name и Organization Identifier можно оставить как есть. Важно убедиться, что в поле Language выбран Swift.
4. После сохранения проекта вы увидите рабочее пространство среды разработки. Слева и справа расположены панели, соответственно, Navigator и Utilites. В них имеется набор вкладок, позволяющих использовать различные функции. К примеру, в первой вкладке панели Navigator отображается перечень файлов проекта, а третья вкладка выполняет поиск по проекту.
5. В первой вкладке Навигатора отыщите Main.storyboard и нажмите на него. Данный файл определяет имеющиеся в приложении экраны (контроллеры), в которые можно добавлять элементы. Между экранами также могут задаваться связи. Выбранный контроллер выделяется синей рамкой, а в панели Utilites отображаются его свойства (к примеру, размер). Для изменения размера экрана достаточно выбрать другое значение в поле Size.
6. Запустите готовый шаблон приложения и оцените его внешний вид в симуляторе, выбрав вверху слева тип устройства и нажав на Play (либо Cmd + R). Перед вами отобразится приложение из двух экранов, переключаться между которыми можно с помощью таб-бара.
7. Указанные табы необходимо переименовать. Сперва кликните по каждому табу либо выберите его из иерархического списка элементов управления. Выбранный элемент должен подсветиться зеленым цветом.
8. Далее нужно выбрать функцию Attributes Inspector в панели Utilites. Переименуйте табы, поменяв значение первого таба на «BMR/BMI», а второго таба — на «ккал». На данном этапе первый экран содержит различные надписи. Их нужно удалить, выделяя мышкой и нажимая клавишу Delete.
9. Добавьте собственные элементы управления к сцене. Для этого выберите нужные объекты из библиотеки Object Library, расположенной в нижней части панели Utilites. Отыщите объект Label и переместите его на экран «BMR/BMI». Предварительно дважды щелкните по сцене для приведения ее масштаба к стандартному. Панель Utilites среди прочего содержит функции изменения текста, шрифта и т. д.
10. Переместите несколько других лейблов, пропишите им текст как на изображении. В последнем лейбле необходимо установить параметру Lines значение 2 для автоматического переноса текста на новую строку.
11. Далее добавьте 3 текстовых поля (Text Field), установив их параметры Keyboard type в значение Number Pad. Сам текст оставьте по умолчанию.
12. Следующим шагом нужно добавить элементы управления, позволяющие пользователям выбирать пол и количество тренировок в неделю. Это можно сделать путем добавления элемента Segmented Control из библиотеки Object Library на экран. В данном элементе есть возможность изменять количество сегментов и устанавливать текст для каждого сегмента.
13. Добавьте кнопку в проект и задайте ей заголовок. Этот элемент называется button. Затем добавьте еще один лейбл со значением параметра Lines, равном 4.
14. Откройте Assistant Editor, выбрав контроллер BMI/BMR и щелкнув по двум пересекающимся кольцам вверху справа. Отобразится код выбранного контроллера.
15. Добавьте элементы управления. Кликните по первому текстовому полю для ввода возраста, зажмите Ctrl и повторно кликните по этому полю. Удерживая клавишу мыши, перетащите элемент внутрь класса. Должна всплыть подсказка “Insert Outlet, Action, …”. Как только она появилась, отпустите клавишу мыши. Отобразится окно создания связи. Впишите в поле имени значение ageTextField и нажмите Connect.
16. Таким образом, вы создали переменную ageTextField. Повторите данную операцию для оставшихся текстовых полей, лейблов и элементов segmented controls, предполагающих текстовое значение результата. Далее переместите кнопку. Тип соединения следует указать Action, а в поле имени вписать calculateTapped.
17. Затем в метод calculateTapped нужно скопировать указанный ниже код, предназначенный непосредственно для расчета целевых значений и вывода результата на экран.
18. Проведите итоговую проверку работоспособности приложения, запустив его.

Различия в разработке мобильных приложений для iOS и Android

Для создания нативного приложения с идеальным дизайном нужно учитывать принципиальные различия между системами iOS и Android. Данные платформы различаются не только внешним видом приложений, но также и структурой.

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

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

   Это важно учитывать разработчикам. Допустим, все устройства на базе Android имеют общую панель навигации, расположенную снизу и содержащую кнопку «Назад». Используя эту кнопку, пользователи легко возвращаются на предыдущий экран или этап. Практически все Android-приложения поддерживают эту возможность.

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

   Это значит, что при создании дизайна в рамках разработки iOS-приложений с нуля необходимо такую возможность предоставлять, создавая отдельную навигационную панель для каждого приложения. Кнопка «Назад» при этом размещается в левом верхнем углу.

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

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

2. Другие отличительные признаки навигационных паттернов в приложениях для iOS и Android. У системы Android имеется свой свод рекомендаций — так называемые Material Design Guidelines. Там для разработчиков предлагаются на выбор несколько вариантов навигации. Например, в приложениях широко применяется шаблон, комбинирующий навигационную панель с вкладками.Панелью навигации служит меню, появляющееся слева или справа при нажатии на кнопку с тремя горизонтальными чертами (меню «гамбургер»). Вкладки, размещаемые под заголовком экрана, предназначены для организации контента на верхнем уровне, давая пользователю самостоятельно переключать визуальное представление данных или функциональные элементы всего приложения.

   

   

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

   В Guidelines также предлагается нижняя навигация, панели которой служат для переключения видов верхнего уровня одним нажатием. Для нативных приложений это достаточно важный компонент. Одновременное использование вкладок и нижней навигации не рекомендовано, так как это может запутать пользователя.В Apple разработаны собственные Human Interface Guidelines, где какой-либо аналог стандартной навигационной панели отсутствует. Вместо этого для глобальной навигации предполагается использование панели вкладок, размещаемой снизу экрана. Через этот элемент пользователи могут быстро переключаться между основными блоками приложения.

   Как правило, в панель вкладок добавляется не более 5 пунктов назначения. Аналогом данного элемента в Material Design служит нижняя навигация, однако чаще всего такое решение используется именно в iOS-приложениях.

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

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

3. Нативные слои «bottom sheets» и «action sheets». Первый вариант используется в продуктах под Android. В свою очередь существует 2 типа нижних листов: модальные и постоянные. Модальные слои могут вмещать в себе либо контент, предполагающий различные действия, либо список приложений, появляющийся после нажатия кнопки «Поделиться». Аналогичную роль в приложениях iOS выполняют, соответственно, элементы «action sheets» и «activity views». Тем не менее, их следует отличать от «bottom sheets» в Android.
4. Сенсорные цели и сетки. Apple для своих мобильных ОС рекомендует устанавливать сенсорные цели (touch target) со следующими параметрами: 44px @1x. Для устройств Android рекомендованные значения выглядят так: 48dp / 48px @1x. Кроме того, в соответствии с Material Design Guidelines при разработке приложений элементы интерфейса желательно согласовывать с квадратной базовой сеткой 8dp.
5. Типографика. Две платформы отличаются друг от друга и стандартными шрифтами. В iOS это San Francisco, в Android — соответственно, Roboto. Также на Android-устройствах и, в частности, в Google Chrome в качестве стандартного устанавливается шрифт Noto специально для языков, не поддерживаемых Roboto. Программист в процессе создания приложения для той или иной платформы должен учитывать специфичные особенности типографики.

Правильный выбор между iOS и Android:

• Не следует концентрироваться на какой-то определенной системе. Разработчики на протяжении года могут создавать программы для Android, а затем легко переключиться на разработку под iOS. В любом случае все накопленные знания пригодятся. Часть практических навыков, приобретенных на Android, будут применимы и в среде разработки iOS-приложений.
• Прежде всего, программисту нужно знать общую терминологию, облегчающую общение с другими разработчиками мобильных приложений. Так, наименование многих компонентов или архитектур, специфичных для iOS, будут понятны специалистам по Android.
• Не стоит игнорировать специальные курсы по разработке приложений для iOS. Обучение этим навыкам с преподавателями позволит в течение нескольких месяцев изучить актуальные языки программирования, найти единомышленников в сообществах и в целом освоиться в новой профессии. Подобные программы существуют при университетах, а также в рамках курсов дополнительного образования. Как правило, там обучают разработке и для iOS, и для Android.

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

1. Appy Pie. Эта платформа сегодня развивается наиболее стремительно и уже успела оставить отчетливый след в сфере разработки iOS-приложений. Для начинающих Appy Pie подойдет в том числе. Благодаря своей гибкости в оплате тарифов данная среда разработки будет полезна также представителям малого и среднего бизнеса. В частности, здесь можно начать разрабатывать приложения на бесплатной основе, а уже в процессе выбрать подписку, наиболее удовлетворяющую бюджету.
2. Shoutem. Продукт был выпущен на рынок в 2011 году и с тех пор непрерывно развивается, став одним из лучших на рынке. Платформа предлагает на выбор множество гибко настраиваемых шаблонов, в результате использования которых можно добиться уникальности во внешнем виде и дизайне приложения и высокой функциональности.Shoutem идеально подходит для разработки приложений по управлению мероприятиями. Также здесь имеется функция Social Wall («социальная стена»), благодаря которой можно эффективно взаимодействовать с другими пользователями.
3. Swiftic. Продукт появился на свет в 2010 году, поначалу являясь израильским аналогом Como. На сегодняшний день платформа выросла до очень больших масштабов — на ее базе создано более миллиона мобильных приложений. В среде Swiftic имеется большое разнообразие блоков и компонентов, с помощью которых можно создавать планировщики, формировать карты лояльности, собирать целые интернет-магазины.

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

4. GoodBarber. Данная платформа способна приятно удивить практически всем. Продукт, созданный на острове Корсика, включает в себя очень качественные шаблоны и имеет привлекательный внешний вид. Помимо этого, в GoodBarber реализованы соцсети, чаты, iBeacons, геофенсинг и множество других новейших функций.
5. BuildFire. Высочайшая надежность этой платформы подтверждена уже более чем 30 тысячами клиентов, реализовавших в BuildFire свои приложения. В основном это предприятия, бренды и инфлюенсеры. Данная среда разработки считается одним из лидеров в области ускоренной разработки мобильных приложений.

Программы для разработки iOS-приложений на Windows

Рассмотрим в данном разделе решения, позволяющие программировать для iOS в системе Windows.

1. Genuitec MobiOne. Программа работает на базе HTML/JS и с использованием фреймворка PhoneGap. Таким образом, программисты могут разрабатывать в среде Windows приложения, пользуясь функционалом веб-технологий, и затем запускать их через фреймворк Objective-C, отвечающий на действия UIWebView.

   Благодаря последнему предоставляется доступ к стандартным возможностям устройств на iOS. Фреймворки бесплатны, но для тестирования и компиляции понадобится компьютер или ноутбук от Apple.

2. Flash CS5.5. Flash CS5.5 в связке с Flash iPhone Packager неплохо решает поставленную задачу. С помощью упаковщика для системы iOS компиляция приложений возможна в среде Windows. Flash iPhone Packager обеспечивает соблюдение новейших стандартов Apple. Тем не менее, в этом случае не стоит рассчитывать на нормальную работу приложений с высокими аппаратными требованиями (Papervision, например).

   Компьютер от Apple при разработке приложения данными средствами не понадобится. На вопрос, можно ли создавать приложения на Flash для iOS в отсутствие официальной среды разработки Adobe, ответ безусловно будет положительным. Компиляция при этом осуществляется с помощью Flex. Упакованные приложения должны соответствовать рекомендациям ASME.
3. Stonetrip S3D. Это не только среда разработки, но и игровой движок, созданный под Windows. Здесь используется язык LUA. Как для компилирования, так и для тестирования понадобится компьютер от Apple.
4. Airplay SDK. Программа дает возможность разрабатывать и выпускать 2D и 3D игры для iOS в системе Windows. Бесплатность решения обеспечивается независимыми разработчиками.
5. Unity 3D. В данном редакторе, также включающем в себя игровой движок, используются языки программирования Boo и C#. Это дает возможность работать как под Windows, так и под Mac.
6. Appcelerator Titanium. Неплохое решение, которое поддерживается достаточно большим и активным сообществом. Для создания приложений здесь применяются веб-технологии HTML/JS, поэтому высокая производительность от компьютера не требуется. Скомпилированные приложения могут загружаться в AppStore стандартным образом.
7. Dragonfire SDK. Этот интересный продукт позволяет разрабатывать приложения с собственными SDK в среде Windows. После этого останется загрузить на сервер платформы исходный код для компиляции и скачать уже готовое iOS-приложение одним файлом. Единственное условие для такой операции: необходима версия Ultimate. В продукте реализована качественная симуляция работы приложения.

К этому списку можно было бы добавить еще несколько любопытных решений, но они либо полностью платные, либо еще находятся в разработке на стадии тестирования. Значительная часть разрабатываемых продуктов по сути являются упрощенными вариантами Dragonfire SDK.

То есть предполагается возможность создания iOS-приложений в системе Windows путем компиляции исходного кода разработчика. Из перечисленных выше решений наиболее богатый функционал отмечен у бесплатной программы Airplay SDK.

Цена разработки приложений для iOS

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

И все же попытаемся определить, сколько стоит разработка приложения для iOS хотя бы примерно в зависимости от требуемых характеристик.

1. Стандартное оффлайн-приложение с простейшим функционалом (например, визитная карточка): ценовой диапазон — 150-450 тысяч рублей, средний срок выполнения — 1 неделя.
2. Приложение, подразумевающее взаимодействие через интернет с серверной частью (модерация сообщений, наполнение сайта контентом и т. п.): ценовой диапазон — 450-950 тысяч рублей, средний срок выполнения — 2-3 недели.
3. Чат-бот или интерактивный помощник: ориентировочная стоимость — 1 млн рублей, средний срок выполнения — 1 месяц.
4. Приложение, реализующее принцип IoT (например, для связи с другими устройствами посредством Bluetooth или Wi-Fi): ценовой диапазон — 1-1,5 млн рублей, средний срок выполнения — 1,5 месяца.
5. Мессенджер: ценовой диапазон — 1,5-2,5 млн рублей, средний срок выполнения — 2 месяца.
6. Приложение, реализующее технологии дополненной и виртуальной реальности: ценовой диапазон — 1,8-2,5 млн рублей, средний срок выполнения — 2 месяца.
7. Приложения для оказания услуг (доставка продуктов, заказ такси, взаимодействие с курьерами и т. д.): ценовой диапазон — 2-3 млн рублей, средний срок выполнения — 2 месяца.
8. Интернет-магазины и каталоги продукции с поиском, скидочной механикой, эквайрингом и личным кабинетом клиента: ориентировочная стоимость — 2 млн рублей, средний срок выполнения — 2 месяца.
9. Приложения для соцсетей, различные по функционалу: ценовой диапазон — 2-4 млн рублей, средний срок выполнения — 3 месяца.
10. Корпоративные приложения, интегрированные с множеством других сервисов, обладающие высокими требованиями к защите информации и безопасности данных: наиболее дорогой в разработке сегмент мобильного ПО.

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

Без приложений для мобильных устройств современному бизнесу никуда. Поэтому хороший Android-разработчик на вес золота. Востребованным специалистом можно стать всего за 9 месяцев. Воспользуйтесь уникальной возможностью изучить основы разработки приложений для Android. Вы изучите языки программирования Java и Kotlin, фреймворки и другие инструменты. Научитесь создавать игры, соцсети, интернет-магазины и получите опыт работы с реальными проектами. Записывайтесь на курс уже сегодня.

Уровень сложности
Простой

Время на прочтение
17 мин

Количество просмотров 6.9K

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

Важные уточнения

• Работа велась с бесплатной версией, без плагинов с доступом в интернет и тому подобного. 

• Все происходило в апреле 2023 года с наиболее актуальной на тот момент версией ChatGPT. 

• Процесс написания приложения занял 2 выходных дня.

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

• Для удобства чтения будут приводиться оригиналы и переводы на русский язык некоторых моих запросов и пересказ ответов ChatGPT.

• У меня нет никакого опыта разработки на SWIFT и проектировании мобильных приложений как таковых.

• Тем не менее за время учебы в бакалавриате я ознакомилась с принципами ООП и некоторыми языками разработки.

• Ни к каким сторонним источникам информации для чистоты эксперимента я не прибегала. Так что никакого Google или StackOverflow.

• Статья носит ознакомительный характер и не является туториалом.

Планирование

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

👩🏼: What would be the basic functions of a minimalistic to-do list iphone app?

👩🏼: Какие должны быть базовые функции минималистичного to-do приложения для айфона?

ChatGPT определил следующий функционал:

• Создание задачи

• Редактирование задачи*

• Отметка задачи как выполненной

• Удаление задачи

• Установка напоминаний*

• Категоризация задач*

• Определение приоритетов задач*

• Поиск задач*

• Синхронизация между устройствами*

• Резервное копирование* и восстановление

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

*не были реализованы

Давай создадим это приложение

ChatGPT сразу же предупреждает пользователя, что, как языковая модель, он не может создать приложение. Однако предлагает свои услуги как «проводника и гида».

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

👩🏼: Guide me step by step to create this app . provide me with detailed explanations and all the necessary code. note that i am a zero and am creating this app from scratch. be precise

👩🏼: Проведи меня шаг за шагом в создании этого приложения. Предоставь мне детальные объяснения и весь необходимый код. Учитывай, что я полный ноль и создаю это приложение тоже с нуля. Будь точным.

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

Список функций

Отличный план, давай ему следовать

Следующим шагом стала просьба предоставить детальное объяснение и код для каждого шага.

👩🏼: Nice plan we’ll follow it. provide detailed explanation and code for each step

👩🏼: Хороший план, будем ему следовать. Предоставь детальное объяснение и код каждого шага

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

Пример кода

struct Task {
    var name: String
    var dueDate: Date?
    var priority: Int
    var category: String
}

Пример кода

import UIKit
class ViewController: UIViewController, UITableViewDelegate {
    var tasks = Task
    var recentlyDeletedTasks = Task
    weak var textField: UITextField!
    var tableView: UITableView!
    override func viewDidLoad() {
        super.viewDidLoad()
        setupViews()
    }
    private func setupViews() {
        let addButton = UIBarButtonItem(barButtonSystemItem: .add, target: self, action: #selector(addTask(:)))
        navigationItem.rightBarButtonItem = addButton
        let tableView = UITableView()
        tableView.translatesAutoresizingMaskIntoConstraints = false
        tableView.register(UITableViewCell.self, forCellReuseIdentifier: "TaskCell")
        tableView.delegate = self
        tableView.dataSource = self
        view.addSubview(tableView)
        NSLayoutConstraint.activate([
            tableView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
            tableView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
            tableView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor),
            tableView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)
        ])
    }
func addTask( sender: Any) {
        // Create a new task with the data from the text field
        let task = Task(name: textField.text!, dueDate: nil, priority: 1, category: "Uncategorized")
        // Add the task to the array
        tasks.append(task)
        // Clear the text field
        textField.text = ""
        // Dismiss the keyboard
        textField.resignFirstResponder()
        // Reload the table view to display the new task
        tableView.reloadData()
    }
}
extension ViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "TaskCell", for: indexPath)
        if indexPath.section == 0 {
            let task = tasks[indexPath.row]
            cell.textLabel?.text = task.name
        } else if indexPath.section == 1 {
            let task = recentlyDeletedTasks[indexPath.row]
            cell.textLabel?.text = task.name
            cell.textLabel?.textColor = .red // Change the text color to red to indicate recently deleted task
        }
        return cell
    }
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        if section == 0 {
            // Return the number of tasks in the array
            return tasks.count
        } else if section == 1 {
            // Return the number of recently deleted tasks
            return recentlyDeletedTasks.count
        }
        return 0
    }
    func numberOfSections(in tableView: UITableView) -> Int {
        return 2
    }
    func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCell.EditingStyle, forRowAt indexPath: IndexPath) {
        if editingStyle == .delete {
            // Remove the task from the array
            let deletedTask = tasks[indexPath.row]
            tasks.remove(at: indexPath.row)
            recentlyDeletedTasks.append(deletedTask)
            // Delete the row from the table view
            tableView.deleteRows(at: [indexPath], with: .fade)
        }
    }
}
extension ViewController: UITableViewDelegate {
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        tableView.deselectRow(at: indexPath, animated: true)
    }
}
extension ViewController: UITextFieldDelegate {
    func textFieldShouldReturn(_ textField:

Для решения проблемы прерываний я прибегала к двум методам.

• Просить чат расписать решение по шагам

• Просить его привести только ту часть кода, которая интересует на данный момент.

  Например так:

🤖: To implement the hide/reveal functionality for the Recently Deleted section, you would need to replace the following block of code:

Пример кода

if !recentlyDeletedItems.isEmpty {
  Text("Recently Deleted")
    .font(.headline)
    .padding(.horizontal)
  List {
    ForEach(recentlyDeletedItems, id: .id) { item in
    HStack {
      Toggle(isOn: Binding(get: { 
      self.selectedItems.contains(recentlyDeletedItems.firstIndex(of: item)!)
    }, set: { newValue in
  let index = recentlyDeletedItems.firstIndex(of: item)!
  if newValue {
    self.selectedItems.insert(index)
              } else {
  self.selectedItems.remove(index)
         }
  recentlyDeletedItems[index].isIncluded = newValue
          })) {
  Text(item.title)
              }
          }
    }
  }
  .listStyle(.insetGrouped)
  .padding(.horizontal)
}
with the following code:
HStack {
  Text("Recently Deleted")
  .font(.headline)
  .padding(.horizontal)
  Spacer()
  Button(action: {
  self.showingRecentlyDeleted.toggle()
    }) {
        Image(systemName: showingRecentlyDeleted ? "chevron.up" : "chevron.down")
        .foregroundColor(.blue)
       }
}
if showingRecentlyDeleted {
  List {
    ForEach(recentlyDeletedItems, id: .id) { item in
    HStack {
      Toggle(isOn: Binding(get: {
        self.selectedItems.contains(recentlyDeletedItems.firstIndex(of: item)!)
          }, set: { newValue in
      let index = recentlyDeletedItems.firstIndex(of: item)!
      if newValue {
        self.selectedItems.insert(index)
      } else {
     self.selectedItems.remove(index)
        }
    recentlyDeletedItems[index].isIncluded = newValue
      })) {
          Text(item.title)
          }
      }
    }
  }
.listStyle(.insetGrouped)
.padding(.horizontal)
}

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

Но у меня нет этого файла

Временами ChatGPT «заговаривается». Начинает упоминать файлы, о которых раньше не шло и речи. Возможно он, как и многие из нас, хотел это сказать, подумал что сказал, но на самом деле нет. Предположительно это связано именно с ограничением на длину ответа. То есть эта часть текста подразумевалась, но из-за прерывания так и не была отображена пользователю. А вот для ChatGPT она все же существовала. Еще одна гипотеза основывается на вероятных источниках знаний, на которых чат обучался. Как подтверждает сам ChatGPT, он обучался на открытых источниках, в том числе на коде с GitHub и StackOverflow. Это означает, что весь генерируемыйй чатом код — это компиляция из чужих «модулей».

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

ChatGPT предлагает выбрать ViewController, но такого файла нет. Приходится об этом напоминать. Чат дает инструкции, что сделать, чтобы создать файл:

Один раз я столкнулась с тем, что чат «забыл», что мы делаем приложение на IPhone, а не на Mac, и предложил решение «раз уж ты делаешь macOS приложение». Пришлось его одернуть.

Баги, баги, баги

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

Далее будет несколько примеров, как чат исправляет свои ошибки.

Тут ChatGPT извиняется за ошибку в предыдущем ответе и предлагает исправленный вариант:

Здесь он дает недостающий кусок кода:

Сообщаю чату, что проблема не исчезла. Он дает альтернативные инструкции:

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

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

🤖: It seems like you have defined the tableView delegate and datasource methods inside the addTask function, which is not the correct way to define them. You need to define them outside the addTask function and also make sure to conform to the UITableViewDataSource and UITableViewDelegate protocols in your ViewController class. Here’s an updated code that should work:

Пример кода

import UIKit
class ViewController: UIViewController {
    var tasks = Task
    weak var textField: UITextField!
    override func viewDidLoad() {
        super.viewDidLoad()
        setupViews()
    }
    private func setupViews() {
        let addButton = UIBarButtonItem(barButtonSystemItem: .add, target: self, action: #selector(addTask(:)))
        navigationItem.rightBarButtonItem = addButton
        let tableView = UITableView()
        tableView.translatesAutoresizingMaskIntoConstraints = false
        tableView.register(UITableViewCell.self, forCellReuseIdentifier: "TaskCell")
        tableView.delegate = self
        tableView.dataSource = self
        view.addSubview(tableView)
        NSLayoutConstraint.activate([
            tableView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
            tableView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
            tableView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor),
            tableView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)
        ])
    }
func addTask( sender: Any) {
        // Create a new task with the data from the text field
        let task = Task(name: textField.text!, dueDate: nil, priority: 1, category: "Uncategorized")
        // Add the task to the array
        tasks.append(task)
        // Clear the text field
        textField.text = ""
        // Dismiss the keyboard
        textField.resignFirstResponder()
        // Reload the table view to display the new task
        tableView.reloadData()
    }
}
extension ViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // Return the number of tasks in the array
        return tasks.count
    }
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        // Dequeue a reusable cell from the table view
        let cell = tableView.dequeueReusableCell(withIdentifier: "TaskCell", for: indexPath)
        // Get the task for this row
        let task = tasks[indexPath.row]
        // Configure the cell with the task data
        cell.textLabel?.text = task.name
        return cell
    }
    func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCell.EditingStyle, forRowAt indexPath: IndexPath) {
        if editingStyle == .delete {
            // Remove the task from the array
            tasks.remove(at: indexPath.row)
            // Delete the row from the table view
            tableView.deleteRows(at: [indexPath], with: .fade)
        }
    }
}
extension ViewController: UITableViewDelegate {
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        tableView.deselectRow(at: indexPath, animated: true)
    
}

🤖: Make sure to replace Task with your own Task model class. I hope this helps!

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

Описание кода

Больше функций. И багов.

Причина неработающей функции так и не была найдена. Знаний чатбота на данном этапе на это не хватает.

Выводы

Написать приложение с нулевыми знаниями языка программирования, используя ChatGPT, оказалось вполне возможно. Есть несколько «но», которые стоит учитывать:

• Понадобится определенное количество времени(около получаса), чтобы подобрать правильный запрос и вывести бота на нужные рельсы.

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

• Будет много ошибок в коде. В среднем выходило 1-2 ошибки на каждый кусок кода, который ChatGPT выдавал. Не все из них удастся исправить силами одного лишь чатбота.

• Большую часть времени (75% по моему опыту) займет устранение ошибок. Остальные шаги, включая планирование функционала и дизайна интерфейса, отнимут не более нескольких часов.

Если среди вас найдутся эксперты в SWIFT, была бы благодарна, если бы вы оценили качество кода, который сгенерировал ChatGPT.

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

Что это за сервисы и действительно ли они подходят для решения сложных задач? Об этом и многом другом поговорим в сегодняшней статье.

Нужно ли мне мобильное приложение?

Статистика Flurry Analytics и comScore говорит о том, что пользователи тратят лишь 14% своего времени на веб-серфинг. Остальное время уходит на приложения – это игры, программы для здоровья и развития, сервисы доставки и многое другое.

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

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

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

Когда мне нужно создавать приложение

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

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

Вот еще некоторые случаи, когда самостоятельная разработка приложения будет уместна:

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

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

Что нужно знать перед разработкой приложения

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

Что представляет собой мобильное приложение

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

Загрузка приложений обычно осуществляется через такие магазины, как Google Play и App Store. Иногда пользователи скачивают программы и через интернет, но такая возможность доступна лишь на Android-устройствах.

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

Как определить функциональность приложения

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

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

• Удобная навигация. В интернет-магазине без этого сейчас никуда – клиент должен быть полностью обеспечен всеми функциями, которые могут ему пригодиться в тех или иных случаях.
• Блок оформления покупок. Необходимо позаботиться о том, чтобы приложение включало в себя корзину, систему оплаты и отслеживание статуса заказа.
• Личный кабинет. Здесь должны присутствовать такие разделы, как «История покупок», «Желания», «Избранное».
• Push-уведомления. Они сообщат пользователю о новых акциях и поступлениях.

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

Как подобрать красивый дизайн

Качественный и стильный дизайн – это довольно сложная работа. Если вы хотите создать что-то уникальное, то потребуется немало времени на изучение всех аспектов. Но что же делать, если его нет? Вот некоторые рекомендации, которые помогут вам быстро создать макет мобильного приложения:

• Используйте приложения типае Figma или Adobe XD – это бесплатные программы, созданные для дизайнеров. Они распространяются бесплатно и позволяют создавать баннеры, макеты мобильных/десктопных приложений и многое другое.
• Для подбора цветов можно использовать такие сервисы, как Material Palette и Adobe Color.

• Вдохновиться работами можно на Pinterest, Behance и Dribbble. Детально изучайте референсы из вашей сферы и пробуйте их повторить. В результате можно прийти к общей стилистике и сделать что-то красивое, но уже со своими «фишками».

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

Топ-5 лучших конструкторов для создания приложения на Android и iOS

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

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

Create My Free App

Create My Free App дает возможность создавать полноценные приложения без навыков проектирования и программирования. С его помощью, например, можно бесплатно написать приложение для интернет-магазина или кафе.

Особенности:

• совместим как с Android, так и iOS;
• предлагает всевозможные настройки дизайна;
• много встроенных вариантов тем.

Стоимость: бесплатно

Официальная страница: Create My Free App

Mobincube

Инструмент для создания и монетизации iOS и Android-приложений. Базовая функциональность сервиса доступна бесплатно. Конструктор позволяет сделать приложения разных типов.

Особенности:

• приятный дизайн;
• возможность использовать аналитику Google в стандартном тарифном плане;
• открытый исходный код.

Стоимость: бесплатно или от $2.99/месяц

Официальная страница: Mobincube

Appypie

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

Особенности:

• простота использования, благодаря которой можно создавать приложение прямо на сайте;
• 30-дневная гарантия возврата средств в том случае, если сервис не понравится;
• бесплатное ПО.

Стоимость: от 999 рублей/месяц

Официальная страница: Applypie

Kalipso Studio

Kalipso Studio – это функциональный конструктор, позволяющий создавать приложения без навыков программирования. Kalipso позволяет развернуть приложение на пяти операционных системах: Windows Mobile, Windows CE, Windows 10, iOS и Android.

Особенности:

• широкая функциональность;
• бесплатный пробный период;
• интеграция базы данных.

Стоимость: от $83/месяц

Официальная страница: Kalipsostudio

AppsBuilder

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

Особенности:

• ценовая политика;
• дизайн и простота использования;
• отличная функциональность.

Стоимость: от $15/месяц

Официальная страница: AppsBuilder

Создаем приложение своими руками

Выше мы рассмотрели несколько специальных сервисов для создания мобильных приложений. Теперь давайте попробуем воспользоваться одним из них. Для примера возьмем инструмент Mobincube – в нем есть бесплатная версия с ограниченным функционалом, с помощью которого можно создать готовое приложение на iOS и Android.

Что ж, приступим!

1. Первым делом переходим на официальную страницу и проходим регистрацию.
2. Как только аккаунт будет зарегистрирован, нас автоматически перенаправит в личный кабинет. Чтобы создать приложение с нуля, выбираем «Create a new App».
3. Далее нам предлагают два варианта создания приложения – для новичков (Templates) либо для опытных (Blank). Так как наше руководство для новичков, то выбираем для примера «Templates».
4. Следующим шагом нам предлагают выбрать одну из категорий для будущего приложения. Пусть это будет «Детский сад» (Kindergarten). Даем ему название и жмем «Create».
5. В результате мы попадаем в окно редактирования шаблона. Здесь нам доступны различные инструменты для конструирования программы: картинки, тексты, таблицы, видео и многое другое. Помимо этого, есть еще одна интересная опция, описанная вверху страницы – там нас информируют о том, что сервис может помочь в создании приложения для выбранной категории. Пройдя такую инструкцию, мы сможем получить уже готовый продукт со всеми нужными элементами. Давайте сделаем это – жмем «Next» и следуем инструкции.
6. После прохождения всей инструкции во вкладке «Preview» можно скопировать ссылку на приложение и посмотреть, как оно будет работать на телефоне.
7. Например, у меня получилось вот так:

Если постараться, можно создать довольно практичную программу для простых задач.

Чтобы опубликовать приложение в Google Play или App Store, воспользуйтесь вкладкой «Publish».

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

Конструкторы приложений: есть ли у них будущее?

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

Конструкторы позволяют нам создавать такие приложения, которые разрешено публиковать в Google Play и App Store. Это означает, что ими могут пользоваться и другие пользователи, а значит, приложение даже такого типа можно сделать востребованным, если провести правильный анализ целевой аудитории и сделать хороший рекламный ход. Существенный недостаток таких сервисов – это шаблонность, которая не дает настроить приложение под себя. Другая проблема – довольно высокая цена за хороший функционал.

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

Ця стаття українською:

В статье я расскажу все, что нужно знать, чтобы начать создавать iOS-приложение, соответствующее стандартам iOS 16

Возможно, вы никогда не проектировали приложение для iPhone и не знаете, с чего начать.

Возможно, вы уже спроектировали с десяток приложений, но ищите лучшие примеры. Руководство Apple «Human Interface Guidelines» просто ужасно.

В любом случае, эта статья для вас. В ней я расскажу все, что нужно знать, чтобы создавать iOS-приложение, соответствующее стандартам iOS 15.

Размеры экранов iPhone

В течение 5 или 6 лет после выпуска первого iPhone размеры экрана были вполне управляемыми. Если ваш дизайн работал на экране с разрешением 320×480, вы были великолепны. Теперь это дикий запад. Только за последние 3 года добавилось 3 новых размера экрана!

Вот полный список размеров экранов iPhone (добавьте эту ссылку в закладки; или скачайте PDF-файл ниже).

*Технически дисплей телефона 2.61x

• Размер артборда. Это «размер точки» или «@ 1x» размер данного устройства. Я настоятельно рекомендую проектировать артборды такого размера. (Ниже я объясню, чем отличаются точки от пикселей)
• Масштаб эскпорта. Это как сделать растровое изображение (PNG, JPG) намного больше при экспорте, чтобы максимально использовать преимущества более высокого разрешения некоторых устройств.

Артборд какого размера мне следует использовать для дизайна iPhone?

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

• Если вы записываете аналитику в своем текущем приложении или веб-сайте, отметьте их * для наиболее распространенных размеров экрана вашей аудитории
• Если вы проектируете приложение для широкой аудитории, используйте общий самый популярный размер экрана iPhone: 375x667 pt
• Если вы проектируете приложение для тех, кто разбирается в технологиях или дизайне, самым популярным размером экрана iPhone, скорее всего, будет новейший 375x812 pt.

* Google Analytics записывает это в Audience > Mobile > Devices, затем перейдите на ярлык «Primary Dimension» и установите для него «Screen Resolution».

Дизайн, который хорошо работает на более узком экране (375pt), почти наверняка будет хорошо работать на более широком экране (414pt) – но не наоборот. Поэтому всегда лучше сначала спроектировать более узкие экраны, а затем перепроверить и настроить их для более крупных экранов. Поскольку высота не является ограничением, не так важно, имеют ли ваши артборды высоту 667 или 812 пикселей.

iOS Точки vs. Пиксели

«Точка» (point) – это показатель, по которому дизайнеры могут сравнивать размеры шрифтов и элементов интерфейса на iOS девайсах. «Пиксель» (pixel) – это крошечный квадрат света, из которых состоит экран вашего iPhone. Меньшие пиксели означают более четкое изображение, и это здорово. Но если вы просто уменьшите свои пиксели, все на экране тоже уменьшится! Чтобы сбалансировать это, дизайнеры измеряют размер элементов на экране в точках. Если пиксели в два раза меньше изначальной высоты / ширины, мы можем просто использовать квадрат 2×2 пикселя для каждой точки (это называется масштаб @ 2x). А если пиксели составляют примерно треть изначальной высоты / ширины, мы можем использовать квадрат 3х3 пикселя для каждой точки.

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

Руководство дизайнера по DPI и PPI

iPhone Layout

Хотя разные iOS-приложения имеют разный Layout, многие стандартные страницы будут иметь Layout, подобный следующему:

Примечание: в разделе загрузок в конце статьи у меня есть шаблон iPhone для Figma, у которого есть линейки, разделяющие эти области страницы, а также строка состояния и индикатор «Домой». Это позволяет очень быстро заполнять этот фреймворк страницы.

Строка состояния

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

Строка состояния содержит индикаторы времени, сигнала, Wi-Fi и батареи, и может быть написана (текст и иконки) черным или белым цветом.

Фон для строки состояния может быть любого цвета – или даже быть прозрачным. Чтобы найти вариации цвета, которые соответствующим образом контрастируют с белым, используйте Accessible Color Generator.

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

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

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

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

Только начиная с iPhone X появилась «челка» и закругленные углы на границе. Старые iPhone (и все iPad) имеют более короткую и компактную строку состояния.

Панель навигации

В навигационной панели приложение отображается навигация (сюрприз!), заголовок страницы, основные действия страницы и (часто) поиск.

Вы можете представить навигационную панель iOS, как состоящую из трех «строк».

В моем Figma-шаблоне интерфейса iPhone, я разместил направляющие во всех местах, где обычно располагаются эти строки.

• Строка состояния: 44pt в высоту
• Первая строка: 44pt в высоту
• Вторая строка: 54pt в высоту
• Третья строка: 48pt в высоту

(Эти измерения не всегда точны, и значения в стандартных iOS-приложениях несколько отличаются, но эти цифры помогут вам начать работу)

Таким образом, приложение для iPhone будет показывать одну, две или три строки, в зависимости от (а) потребностей страницы и (б) состояния скролла.

Используйте одну строку, если вам просто нужно компактно отобразить некоторые действия страницы (даже заголовок страницы не является обязательным).

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

Но, если вам нужно показать поиск, то понадобиться третья строка (даже, если первая строка оставлена ​​пустой!).

На скриншотах выше показано только pre—scrolled поведение. Как только пользователь начинает скроллить, iOS начинает вести себя следующим образом.

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

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

Когда строки навигационной панели iOS исчезают при прокрутке, они снова появляются, когда пользователь прокручивает страницу вверх.

Обратите внимание, что переходы между состояниями очень плавно анимированы – небольшая, но характерная деталь стиля iOS.

Панель вкладок

В iOS-приложениях основные пункты назначения в приложении перечислены в виде вкладок в нижней части.

Давайте отметим несколько особенностей стиля:

• Выбранная иконка обозначается цветом заливки темы приложения.
• Фон может быть слегка полупрозрачным и размытым – эффект «матового стекла», в стиле навигационной панели
• Метки имеют текст 10-11pt в SF, шрифт по умолчанию

И несколько замечаний о поведении панели вкладок и ее кнопок:

• Различные вкладки запоминают свое состояние. Если вы путешествуете в определенное место назначения на одной вкладке, переключаетесь на другую вкладку, а затем переключаетесь обратно на первую вкладку, вы будете там, где остановились в этой вкладке, а не на ее «главном экране»
• Если вы нажмете на активную вкладку, вы вернетесь к «главному экрану» для этой вкладки
• Панель вкладок всегда видна внутри приложения, за исключением: 1) момента, когда отображается клавиатура 2) когда открыто модальное окно (во время критически важных задач пользователь должен сосредоточиться на текущей задаче, а не переходить к другим частям приложения)

Всего должно быть 2-5 вкладок. Если вам нужно отобразить больше 5 вкладок, пятой иконкой должно быть «More», чтобы показать другие пункты назначения на экране выбора при нажатии.

Индикатор «Домой»

Все новые iPhone (X и более поздние версии) имеют индикатор «Домой» (home indicator) – тонкую закругленную полоску, всегда присутствующую внизу экрана. За исключением тех случаев, когда вы уже на главном экране.

Он черный на всех светлых экранах, но может быть белым на темных экранах.

Слегка перетаскивая его, вы можете перемещаться между приложениями и главным экраном:

• Перетащите слегка вверх: вы перейдете на экран многозадачности для переключения между приложениями.
• Перетащите далеко вверх: вы перейдете на главный экран

Обычно индикатор «Домой» имеет свою собственную «рамку» высотой 34pt, в которой другие фиксированные элементы не отображаются.

Но прокручиваемые списки могут отображаться при скролле под индикатором «Домой» – и вы даже можете выбрать нажатием элемент под ним. Индикатор «Домой» реагирует только на свайп вверх.

Навигация

Основные пункты назначений приложений

Навигация между основными областями приложения описана в разделе Панель вкладок.

«Назад»

В iOS вы можете перемещаться назад 4 различными способами, в зависимости от контекста.

2 первых способа обычно применяются к одним и тем же экранам.

На большинстве экранов вы можете перейти назад (1) действием, расположенном в верхнем левом углу или (2) свайпом вправо от левого края экрана.

Посмотрите раздел модальные окна ниже, чтобы узнать больше о том, как их закрыть.

Поиск

В iOS-приложениях есть 3 основных точки входа:

1. Панель поиска в навигационной панели
2. Иконка поиска на навигационной панели
3. Иконка поиска на панели вкладок

Однако, независимо от того, где находится точка входа в поиск, процесс поиска выглядит довольно схожим:

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

Модальные окна (Modal Sheets)

Некоторые задачи включают один экран – или линейную серию экранов – которые вы хотите, чтобы пользователи выполняли, не выходя из контекста, в котором они находятся.

Теперь в iOS 15 для этого у нас есть идеальный элемент интерфейса – Modal sheet.

Modal sheet – это обычная страница, которая (а) скользит снизу вверх, закрывая почти всю предыдущую страницу, но (б) оставляет предыдущую страницу видимой, но утопленной в фоновом режиме.

Modal sheet можно закрыть:

• Нажатием на действие «Закрыть» вверху («Отмена» в верхнем правом углу)
• Свайпом вниз по самой модальной карточке

Элементы интерфейса и элементы управления

Списки (AKA Табличные представления)

Помните: «90% мобильного дизайна – это списки». Если вы хотите научиться проектировать приложения для iPhone, узнайте, что Apple думает о своих списках (или, как они их называют, «Табличные представления»)

Всякий раз, когда вы создаете список на iPhone, вам нужно задать себе три вопроса:

1. Какой текст я хочу отобразить?
2. Хочу ли я добавить иконку / изображение?
3. Что расположено в правой половине клетки?

Давайте рассмотрим каждый из них по очереди.

Какой текст вы хотите отобразить в каждом элементе списка? Вы можете выбрать:

1. Только основной текст (17pt обычный)
2. Основной текст (17pt обычный) со вторичным текстом (15pt обычный)
3. Кастомный макет – например, основной текст (17pt обычный), вторичный текст (15pt обычный, НО СВЕТЛЕЕ) и третичный текст (15pt обычный, НО СВЕТЛЕЕ)

Слева от текста вы можете при желании отобразить иконку или изображение.

Наконец, есть несколько вариантов для правой части элемента списка:

• (Указывающий направо) шеврон. Почти по умолчанию он позволяет пользователям понять, что при нажатии они перейдут на другой экран
• Текст и шеврон. Это означает, что пользователь может перейти на другой экран, чтобы выбрать значение, которое будет здесь показано
• Галочка. Позволяет пользователю выбирать один из элементов списка в этой группе (Примечание: не множественный выбор, как веб-списки с флажками)
• Переключатель. Позволяет пользователю включать или отключать свойство, на которое ссылается элемент списка.
• Текстовые кнопки. Используйте системный цвет для ссылки на другую страницу или сценарий. Используйте красный текст для обозначения «разрушительного действия» – выключения или удаления чего-либо и т. д.

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

Кнопки

Обычно мы думаем о кнопках, как о цветных прямоугольниках с центрированным текстом. И приложения для iPhone, безусловно, используют подобные кнопки. Но, если вы пришли из мира веб-дизайна, вы можете удивиться, узнав, что многие кнопки в iOS представляют собой просто (а) иконки или (б) цветной текст расположенные в: (1) навигационной панели (вверху экрана) или (2) панели действий (внизу экрана).

Тем не менее, iOS также имеет кнопки на странице.

Поскольку действия со всей страницей появляются в фиксированных меню (панель навигации или панель действий), многие кнопки на странице применяются только к определенной части страницы и, следовательно, появляются на карточках.

Элементы управления вводом

Одна неочевидная вещь об элементах управления вводом в iOS-приложениях, состоит в том, что они почти все стилизованы как элементы списка.

Текстовые поля

Поле ввода текста выглядит как элемент списка с подсказкой, которая исчезает при наборе текста.

Переключатели (Switches)

Переключатели появляются внутри элемента списка с меткой слева и переключателем двоичного выбора справа.

Выбор даты и / или времени

Сначала он выглядит как элемент списка с меткой слева и значением справа, но, если вы нажмете на элемент списка, он развернется в специальный элемент управления «spinner».

Вы можете изменить это, чтобы выбрать (a) только время, (b) только дату, (c) и время и дату, или (d) какое-то другое пользовательское значение. При этом я не рекомендую использовать это в качестве универсальной замены для выпадающих списков. Вместо этого на мобильных устройствах вам часто нужно использовать п «экран выбора», который является отличной отправной точкой.?

Экраны выбора

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

Итак, ингредиенты:

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

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

Типографика

Для получения дополнительной информации о типографике iOS (и, в частности, о размерах шрифтов), см. другую статью автора.

У iOS есть отличительная парадигма для стиля текста. Когда многие дизайн-системы используют стиль с размером или заглавными буквами, iOS-стили используют вес шрифта или цвет. Вот краткий обзор стилей текста iOS:

Текст заголовка

Заголовки страниц пишутся двумя разными способами в приложениях для iPhone.

Когда пользователь еще не прокрутил (или прокрутил, но затем прокрутил обратно вверх):

• Размер: 34pt
• Вес шрифта: полужирный
• Цвет: #000
• Цвет темной темы: #FFF
• Выравнивание: по левому краю

Когда пользователь прокрутил вниз:

• Размер: 17pt
• Вес шрифта: средний
• Цвет: #030303
• Цвет темной темы: #FFF
• Выравнивание: по центру

Текст по умолчанию

«Стиль по умолчанию» для текста в приложениях на iPhone – это:

• Размер: 17pt
• Вес шрифта: нормальный
• Цвет: #000
• Цвет темной темы: #FFF

Вы можете многого добиться, сделав небольшие изменения в этом базовом стиле.

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

Аналогично, текстовые кнопки ссылок в основном являются текстом по умолчанию, но с разными цветами.

И текст подсказки для поля поиска – это текст по умолчанию, но светло-серый.

Вторичный текст

iOS-приложения имеют стандартизированный стиль для любого вспомогательного «вторичного» текста.

• Размер: 15pt
• Вес шрифта: нормальный
• Цвет: #8A8A8E
• Цвет темной темы: #8D8D93

Третичный текст и подписи

Любые пояснительные «подписи» делаются еще меньше и легче, чем вторичный текст.

• Размер: 13pt
• Вес шрифта: нормальный
• Цвет: #6D6D72
• Цвет темной темы: #8D8D93

Минимальный размер текста

Просто определив минимальный размер текста вы сможете избежать головной боли с любой дизайн-системой. Для iOS-приложений это метки на панели действий с размером 10pt:

• Размер: 10pt
• Вес шрифта: нормальный
• Цвет: #999 (когда не выделен)
• Цвет темной темы: #757575 (когда не выделен)

Иконки приложений

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

Вы можете сделать это следующим образом.

(Если вы используете Sketch, вы можете сделать это довольно просто с помощью их шаблона – File > New from Template > iOS App Icon)

Однако, если вы похожи на меня, вы захотите убедиться, что учтены наиболее распространенные (или более новые) размеры дисплеев устройств. В конце концов, разве вся суть этого @3x масштаба не в том, что отдельные пиксели слишком малы, чтобы их видеть?

Вот план дизайна иконки iOS-приложения 80/20 от Эрика:

1. Создайте квадратную иконку, которая будет хорошо смотреться с разрешением 60x60px (и убедитесь, что она хорошо выглядит в маске с помощью Apple superelljpse *)
2. Увеличьте ее до @ 2x (120x120px) и, при желании, настройте ее так, чтобы она была настолько идеальной, насколько вам хочется
3. Увеличьте ее до @ 3x (180x180px) и, при желании, настройте ее так, чтобы она была настолько идеальной, насколько вам хочется
4. Увеличьте ее до 1024x1024px
5. Экспортируйте все 4 размера в формате PNG. Готово ?

Суперэллипс iOS (AKA «Squircle») Форма иконки

Даже если вы всегда экспортируете свои иконки в виде квадратов, Apple будет урезать углы, используя форму, называемую суперэллипсом.

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

Это действительно имеет значение, только если ваша иконка имеет границу, и в этом случае форма вашей границы должна определяться суперэллипсом, а не скругленным прямоугольником. Вот как создать суперэллипс в Sketch и Figma:

Как создать в Sketch Apple-иконку в форме суперэллипса

1. Создайте квадрат, используя меню «Insert» или клавишу «r».
2. Измените радиус угла на длину одного размера, умноженную на 0,222
3. Измените «Radius (Round Corners)» на «Radius (Smooth Corners)»

Как создать в Figma Apple-иконку в форме суперэллипса

1. Создайте квадрат, используя пункт меню «Rectangle» или клавишу «r»
2. Измените радиус угла на длину одного размера, умноженную на 0,222
3. Откройте меню «Independent Corners» (справа от настройки радиуса угла)
4. Откройте меню «Corner Smoothing» (иконка «…») и установите для него индикатор «iOS» на 60%.

Другие особенности iOS

Есть пара вещей, о которых вам, вероятно, стоит знать, если вы проектируете приложение для iPhone. Я просто перечислю их здесь:

Размер цели нажатия (Tap Target Size)

Все, что пользователь должен иметь возможность нажимать – каждая кнопка, каждый ползунок, каждый элемент управления вводом – должны иметь размер не менее 44×44 pt.

Единственное исключение, когда нарушать это правило простительно – это текстовые ссылки. В тексте абзаца каждая строка текста, вероятно, будет немного короче, чем 44pt. Это означает, что (a) ваши ссылки будут иметь цель нажатия размером менее 44pt и (b) если в двух последовательных строках текста есть ссылки в одной и той же позиции, пользователям будет довольно сложно точно их нажать. Хотя этого не всегда можно избежать, стоит знать, что нужно стараться это минимизировать.

Даже Apple не всегда соблюдает строгие правила, касающиеся цели нажатия, хотя, я и советую вам их не нарушать

Темная тема

Начиная с iOS 13 появилась поддержка темной темы на уровне ОС. Приложения имеют (как правило) темный фон и светлый текст вместо светлого фона и темного текста.

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

• Цвета текста инвертированы. Черный текст становится белым, темно-серый текст становится светло-серым, а средний серый текст остается в основном таким же. Если вы посмотрите на приведенные выше стилитипографики, вы заметите, что iOS фактически отбрасывает несколько дополнительных оттенков и упрощает цвета текста для своей темной темы. Если вы не знаете, нужно ли делать серый цвет средней яркости темнее или светлее, выберите вариант с более контрастным текстом по отношению к фону.
• Цвет фона смещен. В отличие от текста, где более темные цвета становятся более светлыми, фоновые цвета просто смещаются в темную сторону. Если цвет фона был светлее в светлой теме, он все еще светлее в темной. Почему? Потому что свет падает с неба. Если вы осознаете это, вы поймете, что мы полагаемся на цвет фона для глубинных сигналов (в отличие от текста). И поэтому он работает совершенно по-другому.
• Тематические цвета видны на темном фоне. Любые акцентные цвета, которые вы ранее использовали на светлом фоне, теперь должны аналогичным образом выделяться на темном фоне. Поскольку яркость белого составляет 100%, а черного – 0%, это часто означает, что вы будете снижать яркость ярких цветов (и, в моей более широкой теории регулировки цветов, повышать их насыщенность).

Цвета взяты из iOS System Colors

Создание темной темы интерфейса – это отдельная тема, заслуживающая отдельного руководства, и это одна из тех вещей, которые я более подробно рассмотрю в своем курсе Learn UI Design.

Ресурсы

Я создал несколько ресурсов. Ссылки и описания ниже

Таблица размеров экранов iPhone

Пиксели, точки, дюймы, боже мой. Это краткое руководство по размеру и разрешению экрана каждой модели iPhone.

Скачать бесплатно

Шаблон iPhone 13

Этот файл Figma (который вы также можете экспортировать в формате SVG и открыть в Sketch или XD) включает все модели iPhone 13 и iPhone 12 (включая Mini, Pro и Pro Max) с (а) линейками для выделения общих частей экрана, (б) маска с выемкой и закругленными углами и (в) легко перекрашиваемая строка состояния.

Скачать бесплатно

Дополнительные ресурсы

Руководство Apple «Human Interface Guidelines» для iOS. Известно, что стандарты Apple трудно читать. Сначала вам нужно пройтись по их абстрактным принципам, и вы постоянно будете сталкиваться с их нестандартной терминологией (почему списки называются «Таблицами» (Tables ) и расположены в разделе «Представления» (Views) !? Разве это не должно быть в разделе «Элементы управления»? Нет, но по-видимому, простой текст является «элементом управления» – просто посмотрите раздел «Метки» (Labels). В любом случае, я скажу, что, как только вы перестроите свое мышление, руководство Apple обретет больше смысла. Кроме того, если вы проектируете приложение для iPhone, вам все равно придётся его прочитать. Лучше всего к этому привыкнуть.

iOS vs. Android App UI Design: Полное руководство. Хорошо, допустим, вы решите, что в какой-то момент будете делать версию своего приложения для Android. Лучше всего начать думать о некоторых конструктивных различиях уже сейчас. Кто знает, в конечном итоге возможно вы позаимствуете ряд идей из принципов дизайна Android.

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

iOS дизайн рекомендации от Ivo Mynttinen. Самое полное руководство, которое я смог найти, по созданию приложений для iPhone, написанное понятным языком (помимо этой статьи ?).

Подводя итог

Я что-то упустил? В чем-то ошибся? Напишите мне erik@learnui.design. Я буду обновлять это руководство для повышения его точности и читабельности.

Последнее примечание ?

Вас также могут заинтересовать:

• Learn UI Design, мой полноформатный онлайн-видео курс по дизайну пользовательского интерфейса
• The Design Newsletter, информационная рассылка, на которую уже подписалось более 50 000 человек. Она содержит оригинальные статьи о дизайне, нацеленные на предоставление вам тактических советов по улучшению ваших UX / UI навыков.

Перевод статьи learnui.design