Я подготовил короткую статью которая поможет вам решить а каком направлении двигаться если вы решили окунуться в разработку мобильных приложений (Со стороны дизайна).
Создание мобильных приложений для различных платформ вряд ли можно назвать трендом - это обязательный элемент работы любой уважающей себя компании. Статистика говорит сама за себя - в настоящее время в мире в 5 раз больше мобильных устройств, чем настольных компьютеров, и почти 25% пользователей используют только мобильные устройства для просмотра веб-страниц. Крупнейшие польские сайты уже имеют до 50% трафика с мобильных устройств. Направление ясно, и способы донести до пользователей мобильный контент - одна из самых больших проблем современных дизайнеров сегодня.
Как правило, доступ к контенту на мобильных устройствах можно осуществить двумя способами - с помощью адаптивного веб-сайта или нативного приложения. Оба метода используются и будут использоваться параллельно, но, как показывают исследования, использование хорошо разработанного нативного приложения становится все более удобной и удобной для пользователя формой, которая имеет ряд преимуществ:
- Более быстрая работа приложения (собственный код, без ограничений, связанных с необходимостью использования браузера)
- Возможность использовать приложение в автономном режиме (или хотя бы часть его функциональности)
- Look & Feel - то есть адаптация интерфейса к конкретной платформе, к которой привыкли пользователи
- Использование собственных возможностей устройства, таких как акселерометр, гироскоп, GPS и т. Д. в большей степени, чем спецификации HMTL5 в браузере позволяют
Давайте сосредоточимся здесь только на вопросах, связанных с дизайном нативных приложений, хотя, вероятно, многие из обсуждаемых проблем также переводятся на адаптивные веб-сайты. Как оказалось, разработка нативных приложений не так проста, как может показаться. В отличие от веб-интерфейсов, где, прежде всего, существует полная стилистическая свобода (хотя есть некоторые тенденции, такие как эволюция плоских или все более популярных и интересных материалов), при разработке собственных приложений мы должны придерживаться определенных общих принципов и концепций дизайна, и наше воображение не только ограничено меньшей площадью экрана, но также некоторыми правилами, которые учитываются в процессе сертификации, то есть проверкой нашего приложения, прежде чем оно будет найдено в магазинах, таких как AppStore или Google Play.
В целом, мы можем выделить две наиболее важные платформы проектирования, которые следует учитывать при создании мобильных приложений:
Android development: https://developer.android.com
iOS development: https://developer.apple.com
Полезно иметь опыт использования iOS или Android, поскольку это позволит вам легко определить, какие компоненты популярны для данной платформы и как реализованы наиболее важные схемы, такие как поток информации и навигация. Один из главных принципов при разработке мобильных устройств - это «Win as one», названная так Microsoft , что в принципе говорит, что стоит разрабатывать приложения так, чтобы их наиболее важные повторяющиеся элементы, такие как навигация, были похожи в различных приложениях, благодаря этому пользователи смогут использовать их интуитивно - если они научатся использовать одно приложение, они смогут обрабатывать другие приложения. Все это накладывает на дизайнеров, некоторые ограничения и заключает в диаграммы, но не обманывайте себя - речь идет не об использовании точно таких же компонентов, идентичных значков и т. Д., Например, достаточно сохранять некоторую характерную разметку или помещаем например, кнопка «Назад» в нужном месте, в то время как стиль этих элементов в принципе не навязан, и мы можем позволить себе творчество.
Упрощенный процесс создания мобильных приложений
Сам процесс от пустой страницы в графическом приложении до готового приложения довольно сложен, и вы должны знать, что типичные мобильные приложения создаются отдельно для каждой платформы, а также с использованием разных языков программирования. Когда дело доходит до инструментов, это выглядит следующим образом:
- Прикладное программирование
- Дизайн - Photoshop, Figma, Sketch, Zepplin, Illustrator
- Концептуальная работа (макеты, плакаты, каркасы и т. Д.)
- Программирование: Android - Java, Kotlin (Android Studio)
- Программирование: iOS - Swift, Objective-C (Xcode)
- Процесс сертификации (в AppStore, Google Play, кастомных магазинах Samsung Store, Huawei Store...)
Гибридные приложения
Есть способ создать одно приложение, которое будет, например, кодироваться с помощью языка C Sharp, JavaScript, Dart и других, а затем скомпилировано для нескольких платформ одновременно. Такие возможности предоставляют внешние инструменты, такие как Xamarin, React Native или Flutter. Тогда весь процесс упрощается и его легче поддерживать, потому что у нас есть только один исходный код для всех приложений. Тем не менее, мы должны создавать разные представления для каждой платформы, то есть разрабатывать приложения для iOS и Android по отдельности, и только логика приложения будет общей, что сэкономит много времени и затрат. Однако, с другой стороны, эти решения имеют свои недостатки - они поддерживаются и разрабатываются отдельными компаниями, и мы не можем быть уверены в их поддержке в будущем, кроме того, они часто платные и к тому же довольно дорогие.
Так же их поддержка усложняется в геометрической прогрессии если нам нужно развивать проект дальше.
Узнайте больше:
Xamarin: https://dotnet.microsoft.com/apps/xamarin
React Native: https://facebook.github.io/react-native/
Flutter: https://flutter.dev/
Познакомьтесь с вашей платформой
Вы должны знать, что реализация приложений также требует наличия разных сред - Mac OS и Windows, для разных платформ.
Наконец, нам еще предстоит пройти процесс сертификации, связанный с сообщением о нашем приложении в магазины. Как правило, нет другого выбора, кроме как загрузить наше приложение пользователями, например, из магазинов. Поэтому приложения должны проходить специальный процесс, который включает проверку их правильной работы, а также определенных основных требований. Например, если приложение использует GPS и не запрашивает у пользователя разрешения, оно может быть отклонено в процессе сертификации.
Что б зарегистрироваться как разработчик мобильных приложений нужно заплатить 25$ единоразово (для Android) и 99$ ежегодно (для iOS). Но это не означает что ваш аккаунт не могут удалить если Вы нарушите правила публикации.
Дизайн - самые важные аспекты
Есть много зависимостей, которые следует учитывать в процессе проектирования и создания дизайна, ниже приведены несколько моментов, которые играют наибольшую роль в разработке дизайна мобильных приложений:
Разрешения разработанных приложений
Одним словом, существует огромная фрагментация разрешений, на которых работают самые популярные мобильные платформы - iOS и Android. Невозможно обратиться к каждому экрану отдельно и подготовить отдельный дизайн приложения для каждого разрешения. Более того, мы также не можем физически протестировать каждое из доступных разрешений на разных устройствах. Поэтому мы должны сделать определенные предположения, которые позволят проектировать отдельно от конкретных значений в пикселях или диагонали устройства. Технически, каждая платформа использует различные упрощения для дизайна, но наиболее важные понятия являются общими:
- Как правило, мы должны проектировать не учитывая от пиксели и диагонали, начиная с начального значения в правильных пропорциях
- Вышесказанное может быть эффективно реализовано, только если мы работаем с графикой, которая хорошо масштабируется, то есть мы создаем векторы или работаем с интеллектуальными объектами
- iOS использует единицу измерения pt, независимую от разрешения - где для каждой точки может быть, например, 1 или более пикселей, если мы имеем дело с дисплеем Retina (высокое разрешение). Android также имеет свои собственные независимые значения, такие как mdpi, hdpi, xhdpi и другие.
- Со стороны кодирования - обычно выглядит так, что мы можем создать так называемый универсальное приложение которое будет работать как на телефонах, так и на планшетах, и устанавливать только определенные зависимости относительно расположения элементов в представлении.
Наборы разрешений:
Android: http://developer.android.com/guide/practices/screens_support.html#testing
iOS: https://en.wikipedia.org/wiki/List_of_iOS_devices
Градация
Аппаратное масштабирование является еще одной проблемой, связанной с дизайном приложения. В настоящее время экраны имеют очень высокое разрешение, например full hd на экране телефона, что означает, что 1/1 отображаемых элементов будет очень маленьким и неразборчивым для получателя. Следовательно, во многих случаях используется масштабирование на уровне системы, и, например, все элементы экрана увеличены в 2 раза для лучшей читаемости (экраны Retina в iOS).
Основные значения:
Проектирование на ощупь
Важным аспектом дизайна для мобильных устройств является сенсорный интерфейс, который определяет другое поведение и способы использования устройств. Мышь является очень точным индикатором, где, в принципе, мы можем практически указывать на пиксель на экране - в отличие от пальца, и в этом случае рекомендуется создавать сенсорные элементы с минимальным размером 5 × 5 мм физически экрана, оптимально 7 × 7 мм или 9 × 9 мм. Ввод контента на клавиатуре удобен, в случае мобильных устройств мы должны отказаться от набора текста и принять во внимание другие возможности, которые дают нам такие устройства, например, микрофон, камеру а также сенсорные свойства устройства,
Взаимодействия и анимация
В дополнение к размышлениям о взаимодействиях, связанных с сенсорной работой вашего приложения, вы также должны обратить внимание на планирование анимации и прохождение приложения. Часто, помимо самой эстетической функции, анимации позволяют пользователю ориентироваться в контексте, в котором он находится в данный момент, и плавно переключаться между функциями приложения, например, отвечать на сообщения, удалять элементы списка и т. Д.
UI / UX элементы
Каждая платформа имеет свои особые правила в контексте элементов управления, таких как ползунки, поисковые системы, флажки, радио, списки и многое другое. Определенно стоит использовать системные решения, потому что в первую очередь они интуитивно понятны для пользователей, и, кроме того, их будет легко внедрить в приложение для разработчика. Тем не менее, следует подчеркнуть, что вы должны знать, как выглядят элементы управления и как будут работать заранее, поэтому проверьте документацию и рекомендации, такие как Рекомендации Apple по интерфейсу пользователя.
Шрифты, иконки, цвета
Для элементов интерфейса вы обычно будете использовать определенные шрифты или значки и советы по цвету для конкретных платформ. Для iOS вы будете использовать семейство San Francisco, Android - Roboto. Однако это не обязательно - вы можете прикрепить любой шрифт к приложению. Однако вам нужно помнить две вещи: во-первых, для этого вам нужно убедиться, что лицензия на шрифт это позволяет, и, во-вторых, шрифт должен быть дополнительно встроен в приложение. По этим причинам обычно рекомендуется использовать перечисленные выше шрифты, поскольку они установлены на каждом из устройств в данной системе, и вам больше не нужно ни о чем беспокоиться.
ОСОБЕННОСТИ
При разработке мобильных приложений мы часто используем готовые решения, такие как UI Kit или GUI - это обычно бесплатные наборы элементов управления или другие элементы, готовые для их сборки, доступные в виде файлов .psd, .sketch и .ai. Благодаря этому вам не придется самостоятельно разрабатывать типовые решения. Кроме того, в сети вы найдете множество библиотек значков или фотографий, которые вы можете скачать бесплатно или купить за несколько, несколько долларов - такие инвестиции всегда окупаются, поскольку создание одних значков занимает много времени.
Проверьте, например: http://www.invisionapp.com/now
Что еще тебе понадобится?
На этапе публикации приложения вам необходимо получить вышеупомянутую учетную запись разработчика, а также подготовить заявку для презентации в магазине. Это включает в себя подготовку дополнительных наборов графики различных размеров, таких как значки приложений, снимки экрана и тому подобное. Кроме того, вам нужно будет создать описания вашего приложения. Вы также должны загрузить экран, который появляется при загрузке ... и это, вероятно, все 😉
Инструменты
Выше, рядом с языками программирования, я перечислил среды разработки, которые используются при реализации мобильных приложений. Когда дело доходит до самого процесса проектирования, он использует стандартные отраслевые инструменты, такие как Photoshop и Sketch. Преимущество последнего заключается в работе в основном с векторами, что означает, что мы можем легко экспортировать графику и для более высоких разрешений.
Photoshop это дает точность «с точки зрения пикселей», но в любом случае, некоторые элементы - такие как элементы интерфейса, значки, я проектирую в Sketch и встраиваю как интеллектуальные объекты в Photoshop.
Sketch - это инструмент, который получает все большее признание и в настоящее время чрезвычайно популярен среди дизайнеров пользовательского интерфейса - я лично использую его гораздо чаще, чем Photoshop, если у меня есть мобильное приложение для дизайна. Это замечательный, очень быстрый инструмент, оптимизированный для создания интерфейса и имеющий функции, которые заточены только для этой задачи.
Я определенно рекомендую Sketch, потому что создавать приложения гораздо приятнее и быстрее, чем в Photoshop!
Sketch: http://bohemiancoding.com/sketch
Photoshop: http://www.adobe.com
Тестирование
Тестирование вашего мобильного приложения чрезвычайно важно. Лучше всего делать это на устройстве, под которое вы разрабатываете. Подключите устройство к компьютеру с помощью кабеля USB. И разрешите "Отладку по USB" в "Настройки" -> "Для разработчиков", если мы говорим про Android, iPhone сам подскажет что делать. Тестирование на устройстве позволит вам проверить не только то, как приложение выглядит, как отображаются шрифты и цвета, но и оценить, можно ли использовать его интерфейс на мобильном устройстве.
