Перейти к содержанию

Норман Старший

Members
  • Публикаций

    4
  • Зарегистрирован

  • Посещение

Репутация

0 Neutral
  1. Перевод статьи Harshita Arora В этой статье я поделюсь поэтапным процессом проектирования, которому я следую при работе над приложениями. Это должно помочь тем, кто хочет научиться или улучшить свои навыки цифрового дизайна. Я начала изучать графический дизайн, когда мне было 13 лет. Я научилась проектировать веб-сайты по онлайн-курсам и целыми днями игрался с Photoshop и Affinity Designer. Этот опыт научил меня мыслить, как дизайнер. Я занимаюсь проектированием и разработкой приложений уже почти год. Я приняла участие в программе Массачусетского технологического института, где я работала в команде по разработке приложения Universeaty. Два месяца назад я начала работать над новым приложением Crypto Price Tracker, которое вышло недавно, 28 января. В этой статье я поделюсь поэтапным процессом проектирования, которому я следую при работе над приложениями. Это должно помочь тем, кто хочет научиться или улучшить свои навыки цифрового дизайна. Дизайн – это не только то, как использовать программное обеспечение для проектирования, и эта статья не научит вас, как его использовать. Есть сотни качественных обучающих программ в Интернете. Дизайн также касается понимания сути вашего продукта, его функциональности, а также проектирования, не забывая о конечных пользователях. Вот чему вас научит эта статья. Процесс проектирования: Создайте юзерфлоу для каждого экрана. Создайте / нарисуйте прототипы. Выберите шаблоны дизайна и цветовые палитры. Создайте дизайн. Создайте анимированный прототип приложения и попросите людей проверить его и оставить отзыв. Сделайте финальную ретушь макетов, чтобы все финальные экраны были готовы к разработке. Давайте начнем! Юзерфлоу Первый шаг – выяснить, какие функции вы хотите видеть в своем приложении. После того, как у вас появились идеи, создайте юзерфлоу. Это блок-схема работы вашего приложения. Обычно юзерфлоу состоит из трех типов фигур. Прямоугольники используются для представления экранов. Ромбы используются для условий (например, нажатие кнопки входа в систему, свайп влево, увеличение). Стрелки соединяют экраны и условия вместе. Юзерфлоу очень полезны, потому что они дают хорошее логическое представление о том, как приложение будет функционировать. Вот диаграмма юзерфлоу, которую я нарисовала, когда начала работать над дизайном моего приложения. Блок-схема юзерфлоу для основного интерфейса. Прототипы После того, как вы завершили делать юзерфлоу для каждого экрана, вы начнете работать с протопипами всех экранов. Прототипы – это, по сути, низко детализированные наброски ваше приложение. По сути, эскиз или схема того, где будут располагаться изображения, ярлыки, кнопки и прочее. Грубый эскиз того, как ваше приложение будет работать. Я использую печатные шаблоны из UI Stencils для рисования каркасов. Это экономит время и дает хорошую рабочую область для рисования и заметок. Вот пример прототипа. Прототип интерфейса мобильного приложения После создания прототипов вы можете использовать приложение под названием Pop и сделать снимок всех своих рисунков с помощью приложения и получить кликабельный прототип, связав все экраны с помощью кнопок. Наброски дизайна и цветовые палитры Это моя любимая часть. Это похоже на разглядывание витрин. Множество паттернов дизайна и цветовых палитр на выбор. Я выберу те, которые мне нравятся, и буду экспериментировать с ними. Лучшие платформы для поиска паттернов – это Mobile Patterns и Pttrns. И чтобы найти хорошие цветовые палитры, посетите сайт Color Hunt. Дизайн Наконец вы переходите к использованию программного обеспечения для создания дизайна. Это похоже на то, что вы вошли в свое приложение в будущем, и сделали несколько скриншотов. Это должно выглядеть реалистично и в значительной степени похоже на реальную вещь. Существуют программные средства разработки и инструменты для создания дизайна. Я использую Affinity Designer. Наиболее часто используемым инструментом для дизайна iOS является Sketch. Вот пример некоторых ранних дизайнов моего приложения. Перенесение карандашного рисунка в пиксели! Я больше экспериментировала с различными цветовыми палитрами. Разные цветовые решения мобильного приложения Я поделилась первоначальными макетами с друзьями, чтобы получить их отзывы. Кажется, многим понравилась схема с золотым градиентом и черным. Будьте готовы получить отзывы и поэкспериментировать с новыми предложениями! Вы получите удивительные отзывы от своих пользователей, когда разговариваете с ними, а не когда лихорадочно просматриваете Dribbble или Behance. Поэтому я переработала макет и удалила фоновые графики, потому что их генерация была технически трудоемким процессом, и они снижали читабельность. Что в итоге вышло: Золотой градиент с черным на удивление хорошо выглядит! Я была довольна цветовой схемой, значками на панели вкладок и общей компоновкой. Я пошла дальше и разработала остальные экраны, следуя тем же принципам дизайна. Это был долгий, но безумно увлекательный процесс! Когда все мои экраны были готовы, я собрала прототип в Adobe XD и попросила нескольких друзей поэкспериментировать и дать свой отзыв. После последних штрихов именно так выглядит финальная версия моего дизайна. Финальная версия дизайна После того, как все экраны были завершены, я импортировала их в Xcode и начала разработку приложения. Вот и все! Я надеюсь, что эта статья поможет вам начать работу над дизайном приложения или поможет стать лучшим дизайнером. И если вам нравится мое приложение, вы можете скачать его здесь. Я заканчиваю статью одной из моих любимых цитат о дизайне «Дизайн – это не только, как предмет выглядит и ощущается. Дизайн – это то, как он работает» – Стив Джобс
×
×
  • Создать...

Важная информация

By using this site, you agree to our Условия использования.