Особенности разработки дизайна пользовательского интерфейса для мобильного приложения

Ким В.Ю.

МИЭМ НИУ ВШЭ, департамент Компьютерной инженерии
vlgohn
96@gmail.com

Аннотация. В данной статье рассматриваются ключевые особенности создания дизайна пользовательского интерфейса (UI - англ., User Interface) для мобильного приложения. На что стоит обратить внимание в первую очередь, и какие ошибки допускать не стоит.

Ключевые слова: Дизайн, пользовательский интерфейс, особенности разработки, мобильное приложение.

1. Введение

В настоящее время, когда прогресс никого не обошел стороной, а смартфоны и планшетные компьютеры стали неотъемлемой частью нашей жизни, компаний-разработчиков мобильных приложений становится все больше и больше. Например, в России с 2007 по 2013 гг. количество компаний данной категории увеличилось более чем в 10 раз [1]. И это не удивительно, учитывая стремительные темпы роста рынка мобильных приложений, как следствие роста рынка самих смартфонов (в мире продажи смартфонов в период 2013-2014 гг. увеличились на 26%) [2].

Итак, с таким большим числом разрабатываемых приложений стоит понять: с чего же начинается его непосредственная разработка. Если опустить все прочие мелочи, то все будет начинаться с разработки дизайна пользовательского интерфейса (UI - англ., User Interface), который крайне важен, чтобы мобильное приложение было удобным и практичным [3].

2. Особенности

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

Так на что же стоит обратить внимание во время разработки дизайна UI? В первую очередь следует обратить внимание на следующую

проблему. Учитывая, что на данный момент плоский дизайн стал преобладать на обеих наиболее популярных платформах для мобильных приложений, а именно Android и iOS, правильно распределить элементы управления становится сложнее. Ведь в плоском дизайне невозможно сделать визуальное разделение на несколько уровней, чтобы один элемент был «поверх» другого. В данном случае следует сделать акцент на визуальную иерархию, то есть располагать элементы управления правильным образом, а именно так, чтобы наиболее важные из них были выделены сильнее, находясь при этом с остальными элементами на одном уровне [4].

Далее следует учесть линию взгляда пользователя. Как правило, большинство пользователей будут просматривать экран приложения слева- направо и сверху-вниз. Учитывая данный фактор, стоит тщательно разработать сценарий использования приложения, чтобы пользователь смог интуитивно находить элементы управления по мере надобности. [4,5]

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

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

Важным этапом при разработке дизайн также является масштабирование элементов управления, ведь от того, как их расположить, во многом зависит степень удобства при использовании приложения. Как показывает статистика, 49% пользователей смартфонов держат свои устройство одной рукой, использую для управления свой большой палец [7]. Отталкиваясь от этого, можно примерно представить площадь экрана, с которой пользователь сможет комфортно работать.

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

 

3. Что нас ждет в будущем?

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

Также на данный момент лучшие производители смартфонов открывают новый сегмент рынка носимой электроники - умные часы (от англ. Smart watch). В этом случае при разработке дизайн приложения для столь маленького устройства, диагональ экрана которого в среднем не превышает и двух дюймов, будут учитываться несколько другие правила, по сравнению с разработкой дизайна приложений для смартфонов.

 

4. Заключение

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

 

5. Список литературы

  1. J’son & Partners Consulting. Рынок разработки мобильных приложений. (дата обращения: 23.02.2015г.)
  2. J’son & Partners Consulting. Российский рынок смартфонов. Итоги 2014 года.  (дата обращения: 23.02.2015г.)
  3. Peter Eckert. Dollars And Sense: The Business Case For Investing In UI Design. (дата обращения: 24.02.2015г.)
  4. Студия дизайна Genue. Что следует знать о плоском дизайне. (дата обращения: 24.02.2015г.)
  5. Modem UI Design for Web and Mobility Delivers a Better Overall User Experience. (дата обращения: 25.02.2015г.)
  6. Thinking Beyond the PC - Why UI Design Will Play an Important Role in Application Interaction Across Multiple Platforms. (дата обращения: 25.02.2015г.)
  7. Steven Hoober. How Do Users Really Hold Mobile Devices. (дата обращения: 25.02.2015г.)

 

Вас заинтересует / Intresting for you:

Запросы разрешений от системы ...
Запросы разрешений от системы ... 4446 просмотров dbstalker Sun, 24 Feb 2019, 06:24:29
Как контролировать запуск прил...
Как контролировать запуск прил... 2328 просмотров Семен Fri, 04 Oct 2019, 16:54:20
Как получить доступ к глобальн...
Как получить доступ к глобальн... 2180 просмотров Семен Tue, 05 Mar 2019, 15:17:56
Разработка успешного Android-п...
Разработка успешного Android-п... 6997 просмотров Валерий Павлюков Mon, 26 Nov 2018, 10:43:29
Войдите чтобы комментировать