Переход с веб-версии на мобильный дизайн. Что нужно знать?

ДНЕПР, УКРАИНА

Нью-Йорк, США

WhatsApp, Telegram, Skype

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

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

сфера дизайна приложений


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

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

Хорошие новости: это все еще дизайн


«Как досадить своим друзьям-дизайнерам и вызвать у них мигрень.»

 

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

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

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

Разнообразие устройств


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

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


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

Основные операционные системы


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

кроссбраузерная разработка приложений

3D-исполнение логотипа компании Apple и робота-талисмана Android, задействованных в световых боях, с логотипом Windows на заднем плане.

 

Просто в качестве примера. Я недавно начал работать над дизайном Android-приложения для своего личного проекта. Не так давно я перешел от использования iPhone-устройств, поэтому, к сожалению, немного подзабыл, как пользоваться Android-устройствами. Я должен постоянно напоминать себе, что есть кнопка «back» на устройствах Android и что drawermenu является основной моделью при навигации. И это лишь некоторые из незначительных различий между этими двумя ОС.

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

Что еще необходимо знать о мобильном дизайне приложений для нескольких платформ? Не накладывайте дизайн, предназначенный для одной платформы, на другую. Это верный способ убить юзабилити. Изучайте эти моменты при помощи использования приложений каждой из платформ. Обратите внимание на модели взаимодействия и нативные UI-компоненты. Используйте готовые UI-наборы, чтобы сэкономить время на копирование UI-элементов для каждой операционной системы. Или же используйте такой мощный инструмент, как Proto.io, который содержит встроенные нативные компоненты, ускоряющие процесс дизайна.
 

Сложность простоты


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

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

Дизайн для мобильных приложений может вызвать ряд вопросов у веб-дизайнеров. Процесс того, как мы продумываем и создаем дизайн для веб-сайтов, как правило, довольно статичен. За последние годы мы усовершенствовали часть взаимодействия при помощи JavaScript и CSS3. Тем не менее, суть сайта не заключается в движении и взаимодействии.

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

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

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

создание мобильных приложений
 

Быстро развивающийся мир приложений


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

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

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

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

Давайте сообща сделаем этот шаг от веб к мобильному дизайну приложения!

Источник




Как не “пролететь” с разработчиком. Полное руководство для тех, кто в поиске
Тестирование UI (пользовательского интерфейса)
Как интернет вещей (IoT) спасет ваш бизнес