Создание красивых мобильных приложений с нуля

1663362034 sozdanie krasivyh mobilnyh prilozhenij s nulya

от Harshita Arora

Я начал учить графический дизайн, когда мне было 13 лет. Я научился создавать веб-сайты на онлайн-курсах и целыми днями играл с Photoshop и Affinity Designer. Этот опыт научил меня мыслить как дизайнер.

Я занимаюсь дизайном и разработкой приложений уже почти год. Я посещал программу в Массачусетском технологическом институте, где работал с командой по разработке Universeaty. Два месяца назад я начал работать над новым приложением Crypto Price Tracker, которое недавно запустило 28 января.

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

Процесс проектирования:

  1. Создайте диаграмму потока данных для каждого экрана.
  2. Создание/рисование каркасов.
  3. Выбирайте шаблоны дизайна и цветовую гамму.
  4. Создайте макеты.
  5. Создайте анимированный прототип программы и попросите людей протестировать его и предоставить отзыв.
  6. Внесите последние штрихи в макеты, чтобы окончательные экраны были готовы к началу кодирования.

Давайте начнем!

Диаграмма пользователя

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

Обычно пользовательская блок-схема состоит из 3 типов фигур.

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

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

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

sQTKDXA1ocHyurFP1Xvzy0fOabE9bqu9TR7k
Диаграмма потока пользовательских данных для основного интерфейса.

Каркасы

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

Я использую печатные шаблоны из UI Stencils для рисования каркасов. Это экономит время и дает хорошее полотно для рисования и заметок.

Вот пример каркаса.

pMB5oT19AL3Cx02O3Ut6qc8QMGotOZO2SrHd
Каркас для основного интерфейса.

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

Паттерны дизайна и цветовые палитры

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

Лучшие платформы для поиска шаблонов дизайна – Mobile Patterns и Pttrns. Чтобы найти хорошие цветовые палитры, перейдите к Color Hunt.

Макеты

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

Существуют дизайнерские приложения и инструменты для создания макетов. Я использую Affinity Designer. Наиболее часто используемым инструментом для дизайна iOS является Sketch.

Вот пример неких ранешних дизайнов моей программы.

dcKdLyb87k6pV3u7B9eQsoiqh2HWmmA7KmuW
Доведение рисунка карандашом до пикселей!

Я больше экспериментировала с разными цветовыми палитрами.

6tYeMeNm6LFTHRBdXXToUY8isV4XmwbnkK5u

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

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

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

-cGRDrYKax41rdeUDC9q39udfYrVliFJ4SMX
Золотой градиент с черным удивительно красиво смотрится!

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

Когда все мои экраны были готовы, я собрал прототип Adobe XD и попросил нескольких друзей поэкспериментировать и оставить отзыв.

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

WbFarZPetpzDnI4c9pfdVxSrClRjC5vb17XN
Основной интерфейс!

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

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

Я заканчиваю пост одной из моих любимых цитат о дизайне.

«Дизайн – это не только то, как он выглядит и чувствуется. Дизайн – это то, как это работает»
-Стив Джобс

Если статья была полезна, напишите ее в Twitter.

Добавить комментарий

Ваш адрес email не будет опубликован.