Дизайн мобильных приложений: создание собственного приложения — часть 3

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

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

Как только вы определили, как технически реализовать концепцию вашего приложения, следующим шагом будет разработка графического интерфейса пользователя (сокращенно GUI). Пользовательский интерфейс — это центр дизайна мобильного приложения; здесь вы представляете готовый дизайн приложения. По этой причине нельзя недооценивать важность дизайна графического пользовательского интерфейса при разработке приложений: многие эксперты-разработчики считают дизайн графического пользовательского интерфейса не менее важным, чем само содержание приложения. В этом есть смысл — даже если приложение обладает захватывающими функциями, которые пробуждают интерес многих пользователей и приводят к тысячам загрузок, плохой дизайн приложения быстро затмит предлагаемые функции и оттолкнет пользователей. Наиболее важными элементами для удобства пользователей являются расположение, размер и компоновка контента в вашем приложении. 

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

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

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

Google предлагает множество компонентов графического интерфейса, которые можно бесплатно загрузить с сайта Material Design (включая шаблоны и иконки). Apple предлагает аналогичные возможности — хотя они несколько более ограничены. Некоторые компоненты для создания идеального макета iOS можно бесплатно загрузить со страницы разработчиков Apple. Некоторые разработчики также предлагают свои собственные скомпилированные наборы GUI сообществу бесплатно (например, на designcode.io для iOS или на sketchappsources.com для Android).

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

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

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

Когда дело доходит до выбора шрифта для приложения, вы можете легко обратиться к системной типографике выбранной вами платформы приложений. С момента выхода iOS 9 таким шрифтом является ‘San Fransisco’ — предыдущие системные шрифты iOS включали ‘Helvetica’ и ‘Helvetica New’. В Android с версии 4.0 используется шрифт «Roboto». Многие разработчики приложений решают придерживаться стандартизированных шрифтов, используемых в приложениях для Android и iOS, и на то есть веские причины: Дизайн шрифтов оптимизирован для операционной системы и экономит ценное пространство на экранах мобильных устройств. Шрифты также узнаваемы пользователями, что делает взаимодействие между вашим приложением и системными приложениями более плавным и повышает доверие пользователей к вашему приложению. Системные шрифты также можно использовать сразу — другие шрифты требуют предварительной установки.

Но есть преимущества выбора шрифта, отличного от системных шрифтов iOS и Android — особенно если ваше приложение содержит много текста, и вы хотите, чтобы этот текст выделялся и отличал ваше приложение от конкурентов. Существует множество бесплатных шрифтов, которые можно скачать в Интернете, но выбор подходящего для вашего приложения обычно сводится к теме и содержанию вашего приложения. Если концепция довольно художественная и стильная, то элегантный шрифт будет иметь смысл, но если она игривая и мультяшная, то эксцентричный, джазовый шрифт может подойти лучше. Но самое главное: если ваше приложение содержит много текста, то шрифт должен быть читабельным и приятным на вид. Именно поэтому популярны стандартные шрифты, такие как «Open Sans» или «Lato» — узкие и без засечек, что делает их подходящими для самых разных приложений.

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

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

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

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

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

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

Юзабилити (удобство использования) приложения тесно связано с общим пользовательским опытом (или сокращенно UX). Пользовательский опыт — это все восприятие приложения пользователем, включая его ожидания до загрузки приложения и ретроспективную оценку приложения после его использования. Удобство использования или юзабилити, с другой стороны, относятся только к восприятию приложения пользователем во время его использования, и поэтому являются частью пользовательского опыта в целом. Юзабилити в основном измеряет, насколько эффективным, действенным и удовлетворительным является процесс использования приложения.

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

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

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

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

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

Еще одним важным фактором при оценке удобства использования приложения является то, насколько удобны элементы управления. Самое главное, на что следует обратить внимание, — это размер, расположение и дизайн кнопок в пользовательском интерфейсе. Убедитесь, что все интерактивные элементы (выпадающие меню, кнопки, ссылки и т.д.) легко узнаваемы и просты для нажатия. При расположении кнопок важно убедиться, что пользователи с более широкими пальцами могут легко нажать на кнопку, не нажимая случайно на другую в то же время. Слишком маленькие или неудачно расположенные кнопки приводят к ошибочным нажатиям и разочаровывают пользователей приложения.

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

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

Если вы хотите поэкспериментировать с различными макетами, вы можете воспользоваться специализированными программами — есть инструменты, предлагаемые различными поставщиками, которые помогают разобраться с тонкостями дизайна мобильных приложений. Преимуществом является наличие цифровых шаблонов дизайна каждого отдельного экрана приложения, которые можно создать с помощью таких программ, как Photoshop или Sketch. Затем эти файлы изображений можно открыть в инструменте проектирования приложений, соединить их в один файл и представить в виде прототипа приложения (также известного как макет).

Использование этих инструментов обычно довольно простое, и многие из них работают с редактором WYSIWYG (что видишь, то и получаешь) и элементами управления перетаскиванием. Связывая различные экраны GUI в приложении вместе и включая взаимодействия, вы можете эффективно имитировать использование приложения. Затем прототип можно протестировать на смартфоне или планшете, где также можно проверить нажатия и пролистывание экрана.

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

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

Одна из особенностей инструмента — простота использования функции коллективной работы. Вы можете предоставить нескольким пользователям доступ к макетам и делать заметки прямо в прототипе с помощью функции комментариев, чтобы обмениваться идеями по поводу дизайна приложения. Многие известные компании, такие как IBM, Twitter, Netflix и SoundCloud, использовали InVision для создания прототипов дизайна.

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

Недостатком является то, что бесплатная версия позволяет создать прототип приложения только с 10 экранами. Этого обычно недостаточно для полноценного тестирования приложения, но вы все равно можете бесплатно пользоваться функциями и работой инструмента проектирования приложений Fluid UI столько, сколько вам нужно.
 

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

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