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

Дизайн мобильного приложения [Изображение: Pixabay]
[Изображение: Pixabay]

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

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

Что такое дизайн мобильного приложения?

Проще говоря, дизайнеры приложений несут ответственность за то, чтобы приложение выглядело хорошо, а разработчики - за его правильную работу. Дизайн мобильного приложения включает в себя как пользовательский интерфейс (UI), так и взаимодействие с пользователем (UX). Дизайнеры несут ответственность за общий стиль приложения, включая такие вещи, как цветовая схема, выбор шрифта, а также типы кнопок и виджетов, которые будет использовать пользователь. Так с чего же начать? В начале.



huion new 1060 plus (8192) обзор

Для какой платформы мне следует разрабатывать?

Два мобильных телефона

Android или iOS? [Изображение: Pixabay]

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

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

Какие инструменты мне следует использовать?

Логотипы Photoshop, Adobe XD и Sketch

Photoshop, Adobe XD и Sketch - сильные соперники

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

Популярные варианты дизайна приложений включают Adobe Photoshop, Adobe XD и Sketch. Их много, намного больше, но они сильнейшие в отрасли. Зарегистрируйтесь в Adobe Creative Cloud здесь .

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

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

Одно важное замечание: если вы планируете кросс-платформенную разработку или поддержку, Adobe XD - явный победитель, поскольку Sketch доступен только в macOS.

Рекомендации по проектированию ОС

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

  • Целеустремленный дизайн
  • Будьте проще (лучше меньше, да лучше)
  • Поддерживайте поток
  • Читаемость - ключ к успеху
  • Уважайте платформу

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

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

Хорошая новость в том, что вам не нужно угадывать, что приемлемо. И у Apple, и у Android есть набор руководств по дизайну, которые вы можете просмотреть перед тем, как начать (и пока вы активно разрабатываете):

Каркасы и поток приложений

Каркас, нарисованный ручкой

Используйте специальный инструмент для создания каркасов или используйте ручку и бумагу [Изображение: Pixabay]

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

Хотя есть много посвященных каркасные инструменты , дизайнеры нередко просто используют ручку и бумагу. Однако, если вы ищете что-то более высокотехнологичное и совместное (что особенно важно, когда вы работаете с удаленной командой), подумайте о создании каркасов в Sketch или Adobe XD. Преимущество использования этих инструментов для создания каркасов состоит в том, что вы можете с относительной легкостью превратить свои каркасы с низкой точностью в предварительный просмотр с высокой точностью.

Примечание: с Adobe XD , вы даже можете получить бесплатные комплекты, которые помогут вам начать работу.

Мокапы и прототипы

Визуализация дизайна мобильного приложения

Пора превратить ваши каркасы в рабочий продукт [Изображение: Pixabay]

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

лучшая камера для съемки произведений искусства

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

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

Узнайте больше об этом шаге в нашей статье: 4 разных способа создания макетов веб-сайтов и приложений .

Сдача в разработку

Кто-то передает кому-то каркасный рисунок

Этот шаг на самом деле будет выглядеть не так [Изображение: Pixabay]

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

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

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

Прочитайте больше: