Файл: Этапы разработки, тестирования и ввода.pdf

Почему так?

Согласно данным, размещённым в Google Play Developer Console, на момент написания этой статьи операционную систему Android поддерживает 15 105 уникальных моделей устройств. Все эти устройства отличаются разным набором кнопок, разными разрешениями экранов и другим.

Ещё для Android-устройств характерен феномен фрагментации. В чём он заключается? При выходе новой официальной версии операционной системы вся огромная армияAndroid-пользователей не спешит дружно на неё переехать, как это происходит с пользователями Apple.^[50]

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

Но Google всех спас и разработал Material Design — инструмент для дизайна и разработкиAndroid-продуктов. Если дизайнер соблюдает правила Material Design, дизайн выглядит единообразным для всего этого бестиария устройств. А разработчик может сэкономить время на то, чтобы встроить графический дизайн в интерфейс приложения. Поэтому дизайнерам важно соблюдать гайдлайны при разработке приложений для Android.

Accessibility

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

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

• Contrastchecker. Он подбирает такие цветовые сочетания шрифта и фона, чтобы читать текст с экрана мониторов и мобильных устройств было легче. Эти сочетания одобрены руководством по обеспечению доступности web-контента (WCAG). Они оцениваются по шести критериям, учитывающим размер кегля, уровень контрастности и некорректное восприятие цветов.

Stark. Это плагин для Sketch. Он открывается в виде окна, через которое просвечивается уже готовый дизайн, и проверяет элементы по тому же принципу, что и Contrastchecker.

Итоги этапа

На основе проектирования и с учётом гайдлайнов дизайнеры рисуют в Sketch дизайн-макеты для приложений и сайтов, а иллюстрации и анимации создают в продуктах Adobe.

Также создаётся дизайн-концепция. Это очень удобный формат для вашего первого знакомства с продуктом и для согласования дизайна. Дизайн-концепция состоит из нескольких экранов с близким к финальному вариантом интерфейса, дающих прочувствовать настроение приложения (лёгкое, серьёзное и т. д.).^[51]

---

Далее идет перевод статьи Романа Гапонова, сооснователя компании Django Stars, которая занимается разработкой веб и мобильных приложений. Роман поделился своим и его компании опытом о процессе разработки пользовательского интерфейса.

Создание концепции

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

На этом этапе могут быть затронуты и такие аспекты, как размеры и расположение кнопок и форм, шрифты и многие другие аспекты структуры интерфейса. Давайте сравним финтех-приложение и сервис такси-компании.^[52]

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

Брейнсторминг и эскизы

Как только концепция проекта ясна, двигаемся к следующему этапу — брейнстормингу. Он нужен, чтобы превратить идею интерфейса в реальность. Можно использовать ручку и лист бумаги — это быстрее, чем использование таких продвинутых инструментов, как Balsamiq Mockups, Sketch, Photoshop и InVision.^[53]

ДИАГРАММА ПЕРЕХОДОВ

Создание эскиза дает нам структуру интерфейса. Но как пользователь должен взаимодействовать с ним? Здесь поможет User Flow Diagram. Она проиллюстрирует логику продукта, показав всевозможные способы взаимодействия с интерфейсом, дорожную карту этих взаимодействий и состояние интерфейса на каждом этапе.

Утверждение структуры и диаграммы переходов

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

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

---

Выбор стиля интерфейса

Когда клиент все утверждает — можно двигаться дальше. Что будем делать? Выберем стиль интерфейса. Есть множество вариантов: от минимализма и Metro до material design и скевоморфизма. На этом этапе у клиентов просят прислать несколько ссылок на примеры стиля интерфейса, который им нравится, а также спрашивается об их планах на ближайшее будущее продукта. Уделяется внимание текущим трендам, масштабированию интерфейса, определяется время, которое необходимо на разработку и внедрение дизайна.^[54]

Подтверждение стиля

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

Прототипирование, дизайн и их демонстрация

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

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

Макет

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

Кликабельный прототип

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

---

Анимированные flow

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

Утверждение дизайна

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

Вывод

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

Заключение

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

Библиография

IntechCore Этапы разработки программного обеспечиния. URL: https://ru.intechcore.com/stages-software-development/

Woxaap Стоимость разработки мобильного приложения URL: https://woxapp.com/ru/app-development-cost/

Wikipedia URL: https://ru.wikipedia.org

CMS Magazine Мобильное тестирование: полное руководство URL: https://cmsmagazine.ru/journal/items-testing-mobile-apps/

JetRuby Этапы тестирования мобильных приложений URL: https://jetruby.com/ru/blog/testirovanie-mobilnyh-prilozhenii/

Live Typing Что такое разработка пользовательского интерфейса и зачем её заказывать URL: https://livetyping.com/ru/blog/chto-takoe-razrabotka-polzovatelskogo-interfeisa-i-zachem-tt-zakazyvat

---

Live Typing Как мы делаем проекты: дизайн URL: https://livetyping.com/ru/blog/kak-my-delaem-proekty-dizajn

Алан Купер. Психбольница в руках пациентов. URL: https://www.e-reading.club/book.php?book=31710

Джеф Раскин. Интерфейс. Новые направления в проектировании компьютерных систем. URL: https://www.e-reading.club/book.php?book=89632

Хабр 8 этапов процесса разработки интерфейса мобильного приложения URL: https://habr.com/ru/company/skillbox/blog/416641/

Приложение

*

Пример перегруженного дизайна. Источник: https://livetyping.com/ru/blog/chto-takoe-razrabotka-polzovatelskogo-interfeisa-i-zachem-tt-zakazyvat

*

Пример чистого дизайна. Источник: https://livetyping.com/ru/blog/chto-takoe-razrabotka-polzovatelskogo-interfeisa-i-zachem-tt-zakazyvat

*

Skeuomorphic design и flat design. Источник: https://livetyping.com/ru/blog/chto-takoe-razrabotka-polzovatelskogo-interfeisa-i-zachem-tt-zakazyvat

*

User Flow Diagram. Источник: https://livetyping.com/ru/blog/chto-takoe-razrabotka-polzovatelskogo-interfeisa-i-zachem-tt-zakazyvat

*

Пример мокапа. Источник: https://livetyping.com/ru/blog/chto-takoe-razrabotka-polzovatelskogo-interfeisa-i-zachem-tt-zakazyvat

1. https://ru.intechcore.com/stages-software-development/ ↑

2. https://ru.intechcore.com/stages-software-development/ ↑

3. https://ru.intechcore.com/stages-software-development/ ↑

4. https://ru.intechcore.com/stages-software-development/ ↑

5. ↑

6. https://ru.intechcore.com/stages-software-development/ ↑

7. https://woxapp.com/ru/app-development-cost/ ↑

8. https://woxapp.com/ru/app-development-cost/ ↑

9.  https://woxapp.com/ru/app-development-cost/ ↑

10. https://woxapp.com/ru/app-development-cost/ ↑

11. https://woxapp.com/ru/app-development-cost/ ↑

12. https://woxapp.com/ru/app-development-cost/ ↑

13. https://woxapp.com/ru/app-development-cost/ ↑

14. https://cmsmagazine.ru/journal/items-testing-mobile-apps/ ↑

15. https://cmsmagazine.ru/journal/items-testing-mobile-apps/ ↑

16. https://cmsmagazine.ru/journal/items-testing-mobile-apps/ ↑

17. https://cmsmagazine.ru/journal/items-testing-mobile-apps/ ↑

18. https://cmsmagazine.ru/journal/items-testing-mobile-apps/ ↑

19. https://cmsmagazine.ru/journal/items-testing-mobile-apps/ ↑

20. https://cmsmagazine.ru/journal/items-testing-mobile-apps/ ↑

21. https://cmsmagazine.ru/journal/items-testing-mobile-apps/ ↑

22. https://cmsmagazine.ru/journal/items-testing-mobile-apps/ ↑

23. https://cmsmagazine.ru/journal/items-testing-mobile-apps/ ↑

24. https://cmsmagazine.ru/journal/items-testing-mobile-apps/ ↑

25. https://cmsmagazine.ru/journal/items-testing-mobile-apps/ ↑

26. https://cmsmagazine.ru/journal/items-testing-mobile-apps/ ↑

27. https://cmsmagazine.ru/journal/items-testing-mobile-apps/ ↑

28. https://cmsmagazine.ru/journal/items-testing-mobile-apps/ ↑

29. https://cmsmagazine.ru/journal/items-testing-mobile-apps/ ↑

30. https://cmsmagazine.ru/journal/items-testing-mobile-apps/ ↑

31. https://cmsmagazine.ru/journal/items-testing-mobile-apps/ ↑

32. https://jetruby.com/ru/blog/testirovanie-mobilnyh-prilozhenii/ ↑

33. https://jetruby.com/ru/blog/testirovanie-mobilnyh-prilozhenii/ ↑

34. https://jetruby.com/ru/blog/testirovanie-mobilnyh-prilozhenii/ ↑

35. https://jetruby.com/ru/blog/testirovanie-mobilnyh-prilozhenii/ ↑

36. https://jetruby.com/ru/blog/testirovanie-mobilnyh-prilozhenii/ ↑

37. https://ru.wikipedia.org ↑

38. https://www.e-reading.club/book.php?book=89632 ↑

39. https://livetyping.com/ru/blog/chto-takoe-razrabotka-polzovatelskogo-interfeisa-i-zachem-tt-zakazyvat ↑

40. https://livetyping.com/ru/blog/chto-takoe-razrabotka-polzovatelskogo-interfeisa-i-zachem-tt-zakazyvat ↑

41. https://livetyping.com/ru/blog/chto-takoe-razrabotka-polzovatelskogo-interfeisa-i-zachem-tt-zakazyvat ↑

42. https://www.e-reading.club/book.php?book=31710 ↑

43. https://livetyping.com/ru/blog/chto-takoe-razrabotka-polzovatelskogo-interfeisa-i-zachem-tt-zakazyvat ↑

44. https://livetyping.com/ru/blog/chto-takoe-razrabotka-polzovatelskogo-interfeisa-i-zachem-tt-zakazyvat ↑

45. https://livetyping.com/ru/blog/chto-takoe-razrabotka-polzovatelskogo-interfeisa-i-zachem-tt-zakazyvat ↑

46. https://livetyping.com/ru/blog/chto-takoe-razrabotka-polzovatelskogo-interfeisa-i-zachem-tt-zakazyvat ↑

47. https://livetyping.com/ru/blog/kak-my-delaem-proekty-dizajn ↑

48. ↑

49. https://livetyping.com/ru/blog/kak-my-delaem-proekty-dizajn ↑

50. https://livetyping.com/ru/blog/kak-my-delaem-proekty-dizajn ↑

51. https://livetyping.com/ru/blog/kak-my-delaem-proekty-dizajn ↑

52. https://habr.com/ru/company/skillbox/blog/416641/ ↑

53. https://habr.com/ru/company/skillbox/blog/416641/ ↑

54. https://habr.com/ru/company/skillbox/blog/416641/ ↑

55. https://habr.com/ru/company/skillbox/blog/416641/ ↑

56. https://habr.com/ru/company/skillbox/blog/416641/ ↑

---