Как сделать так, чтобы ваши идеи выглядели хорошо: руководство для начинающих по визуальному дизайну мобильных приложений
Опубликовано: 2015-11-24Вы придумали блестящую идею приложения, но не знаете разницы между шрифтом и гарнитурой или думаете, что гамбургер-меню — это то, что вы видите только в машине? Даже предприниматели с небольшим опытом или без него могут создавать отличные приложения с правильной командой и инструментами, но не помешает разобраться в каркасе.
Независимо от того, являетесь ли вы новичком в дизайне пользовательского интерфейса для мобильных устройств, думаете о том, чтобы окунуться в создание приложений, или просто любопытным пользователем с несколькими отличными идеями, это руководство поможет вам встать на правильный путь, когда дело доходит до того, чтобы ваше приложение выглядело хорошо — и , что более важно, чувствовать себя хорошо в руке пользователя.
Основные принципы визуального дизайна мобильных приложений
Одна из самых распространенных ошибок визуального дизайна, которую допускают начинающие дизайнеры и предприниматели, заключается в том, что они предполагают, что мобильное приложение — это просто уменьшенная версия настольного приложения или веб-сайта с тем же содержанием, функциями, функциями и элементами пользовательского интерфейса. Если это привычка, в которую вы попали, сейчас самое время отказаться от нее и никогда не оглядываться назад. Дизайн пользовательского интерфейса мобильного приложения — это отдельное животное, и ограничения устройств, операционных систем и поведения пользователей диктуют совершенно иной опыт, чем то, что было бы уместно на большом компьютере.
Даже если у вас есть опыт проектирования для других медиа и вы уже умеете отличать отличный визуальный дизайн, разработка приложений для планшетов и смартфонов требует, чтобы вы знали хотя бы несколько вещей о технологии, с которой работаете. Размер экрана — очевидный параметр, на который следует обращать внимание, как и скорость и время автономной работы самого устройства.
Кроме того, Apple и Android имеют свою собственную философию дизайна и рекомендации для приложений, работающих в соответствующих операционных системах. Следование этим рекомендациям поможет вашим пользователям чувствовать непрерывность и компетентность при использовании вашего приложения — в конце концов, они используют другие приложения в течение дня.
То же самое происходит, когда вы разрабатываете носимые устройства. Например, у FitBit Flex или Charge есть только тонкая черная полоса, на которой отображается их пользовательский интерфейс. Как они умещают такую информацию, как количество шагов, пройденные этажи, сожженные калории и даже дату и время, в таком маленьком пространстве? И еще лучше, как они делают его таким удобным и красивым?
Признавая ограниченность пространства, расставляя приоритеты в том, что пользователю нужно знать и когда (и, что особенно важно, позволяя пользователям изменять порядок экранов в соответствии со своими потребностями и приоритетами), и используя простые, легко узнаваемые значки. Есть причина, по которой все и их матери (и даже президент Соединенных Штатов!) в наши дни, кажется, имеют FitBit, и хороший визуальный дизайн является частью этого.
Не перегружайте экран
Давайте уберем очевидное: мобильные приложения не дают вам тонны экранной недвижимости для работы, даже в эпоху фаблетов. Одним из наиболее важных аспектов создания мобильного визуального дизайна является решение того, что действительно должно быть на экране в данный момент времени.
Звучит просто, правда? Ну, как только вы начинаете копаться в этом, это не всегда полностью вырезано и высохло. У вас может быть представление о том, как должен выглядеть экран входа в систему, но как только вы создадите цифровой прототип, вы можете обнаружить, что не можете вместить все формы, которые вы изначально хотели (или можете, но это не так). выглядит ужасно, а чувствует себя еще хуже). В качестве альтернативы вы можете обнаружить, что элегантно простой экран входа в систему, который вы имели в виду, совершенно не интуитивно понятен пользователю, которому нужно больше инструкций.
Так как же решить, что куда? Многое из этого приходит с практикой, пользовательским тестированием и пониманием того, что другие приложения делают правильно, но есть некоторые общие рекомендации, которым нужно следовать.
Не перегружайте пользователя
Когда пользователи впервые откроют ваше приложение, как они узнают, что делать? Является ли опыт интуитивно понятным? Если нет, то как вы покажете своим пользователям различные функции и функции вашего приложения?
Два важных способа убедиться, что вы попали в золотую середину, — установить фокус и установить визуальную иерархию.
Как мы уже писали ранее, расставить приоритеты на вашем экране таким образом, чтобы одни элементы привлекали больше внимания, чем другие, — это просто хороший визуальный дизайн независимо от среды — это не уникально для пользовательского интерфейса мобильного приложения. Тем не менее, ваш пользовательский интерфейс не будет работать без четкой и прочной иерархии, а ограничения в пространстве делают особенно важным, чтобы ваш фокус был легко различим. Эта иерархия помогает вашему пользователю узнать, на что смотреть и что делать при взаимодействии с вашим приложением.
Приступая к визуальному дизайну, возьмите все, что вы хотите включить в экран приложения, и решите, что наиболее важно для пользователя. Этот элемент — будь то фотография, фрагмент текста, поле ввода или кнопка — должен доминировать на вашем экране с точки зрения пространства и визуальной различимости. Затем установите иерархию для всего остального, что будет занимать экран в это время.
Давайте снова используем экран входа в систему в качестве примера. Наиболее важными аспектами этого экрана являются поля, в которые пользователи будут вводить свои имена и пароли. Если эти поля слишком малы или спрятаны в углу, пользователю будет не только сложнее их заметить, но и с ними будет сложнее взаимодействовать (никто не любит увеличивать масштаб для ввода текста).
Жесты и обратная связь
Рекомендуется для вас:
Что означает положение о борьбе со спекуляцией для индийских стартапов?
Как стартапы Edtech помогают повысить квалификацию рабочей силы Индии и стать готовыми к будущему ...
Технологические акции нового века на этой неделе: проблемы Zomato продолжаются, EaseMyTrip публикует...
Индийские стартапы срезают путь в погоне за финансированием
Цифровая маркетинговая платформа Logicserve Bags Финансирование 80 CR INR, ребрендинг как LS Dig...
Отчет предупреждает о возобновлении нормативного контроля над Lendingtech Space
Подождите — разве мы не говорили о визуальном дизайне, о том, что на самом деле видит пользователь? Так какое отношение к этому имеют жесты и обратная связь? Одна из особенностей визуального дизайна для мобильных устройств заключается в том, что вы не говорите о чисто визуальном опыте. То, что видит пользователь, должно соответствовать тому, что он чувствует, поскольку ваши пользователи будут прикасаться к вашему приложению, чтобы взаимодействовать с ним. Вы не можете отделить зрение от осязания при приближении к мобильному интерфейсу.
Например, есть несколько способов сообщить пользователю, что кнопка — это кнопка. Вы можете использовать тени или другие трехмерные подсказки, чтобы показать, что это элемент, который пользователь должен нажать или провести пальцем, или анимировать его таким образом, чтобы пользователь знал, как с ним взаимодействовать (и как ). взаимодействовать с ним!).
Но даже способ перемещения кнопки может зависеть от того, что делает пользователь. Например, если пользователь не проводит пальцем по экрану полностью, кнопка может немного сместиться в сторону, прежде чем вернуться в исходное положение, ожидая более уверенного жеста от пользователя. Или, если кнопку нужно нажать и удерживать, она может вернуть тактильную обратную связь, указывающую пользователю, когда ее можно отпустить. Все это влияет на то, как вы проектируете и анимируете элементы пользовательского интерфейса.
Если все это звучит сложно, представьте, что чувствует пользователь, который даже не слышал о вашем приложении, не говоря уже о эскизах и досках в вашем офисе. Вот почему онбординг пользователей важен — вы можете использовать стрелки, текст с инструкциями и другие визуальные подсказки, чтобы предупредить своих пользователей о действиях, которые им необходимо предпринять. Сделать эти подсказки красивыми и интуитивно понятными — еще один важный фактор, который следует учитывать при подходе к визуальному дизайну мобильного приложения.
Типография 101
Существует множество шрифтов и шрифтов. Нет необходимости знать все до единого или даже большую часть того, что там есть. Хорошей новостью является то, что для большинства мобильных приложений вам нужно знать лишь некоторые из них, потому что популярные шрифты популярны по одной причине: большое количество людей считают их красивыми и читабельными.
Вы, вероятно, знакомы, например, с Helvetica (и если вам нужен краткий ускоренный курс по типографике, вы можете посмотреть удивительно интересный документальный фильм о Helvetica). От мобильных пользовательских интерфейсов до железнодорожных станций и логотипов брендов, Helvetica имеет почти универсальную привлекательность (хотя, как и у The Beatles или шоколада, у всего есть по крайней мере несколько громких недоброжелателей). И тому есть причина: это простой, читабельный и приятный на вид шрифт.
Некоторые шрифты были разработаны специально для мобильных устройств. Например, пользовательский интерфейс Segoe от Microsoft был разработан таким образом, чтобы его можно было легко читать на экранах устройств даже небольшого размера. Точно так же Google разработал Roboto для Android, а Apple использует пользовательский интерфейс Сан-Франциско. У каждой ОС есть свои рекомендации и руководства по типографике, но большинство из них можно свести к одним и тем же основным принципам:
- Держите его читабельным
Существует бесконечное количество шрифтов на выбор, и некоторые из них выглядят очень ярко и захватывающе. Однако, в конце концов, важнее всего то, насколько легко читать текст. Лучше выбрать простой шрифт без засечек, который не заставляет вас щуриться, чем шрифт, который выглядит красиво, но заставляет ваших пользователей работать над ним. (И помните: хороший визуальный дизайн — это доступный визуальный дизайн, и у многих ваших пользователей могут быть проблемы со зрением. Сделайте ваш пользовательский интерфейс максимально удобным для глаз.)
- Придерживайтесь одного или двух шрифтов
Это своего рода следствие «сохраняйте удобочитаемость». С точки зрения мобильного пользовательского интерфейса на самом деле нет необходимости использовать несколько разных шрифтов в визуальном дизайне — и это часто может повредить читабельности. Один шрифт подойдет, или два, если вы считаете, что это абсолютно необходимо. Чтобы установить иерархию с помощью вашей типографики, вы должны полагаться на разные размеры, вес и стиль шрифта, а не на несколько гарнитур.
- Не изобретайте велосипед
Типографика — это тема, о которой мы могли бы написать книги, и есть много людей, которые посвящают этому предмету свою жизнь. К счастью, вам не обязательно быть одним из них (если вы действительно этого не хотите!). Если вы только начинаете, взгляните на шрифты, которые используют подобные приложения, или используйте определенные шрифты, рекомендованные руководством по ОС. Хотя это может показаться менее творческим подходом к визуальному дизайну, использование SF-UI для приложения iOS или Roboto для приложения Android дает вашему пользователю более продолжительную работу с мобильным устройством и гарантирует, что ваше приложение будет удобочитаемым.
Теория цвета для дизайнеров пользовательского интерфейса мобильных приложений
Еще более многочисленными, чем шрифты, являются цвета. С таким количеством бесконечных возможностей легко придумать цветовую схему для вашего мобильного приложения, которая, ну, не более чем экстраординарна. Посмотрим правде в глаза: если вы не изучали визуальный дизайн или просто не обладали к нему умением, вы можете получить мобильный пользовательский интерфейс, который напоминает некоторые из худших решений в отношении гардероба, которые принимали ваши родители в семидесятых (серьезно, кто сказал вашему отцу, что горчично-желтый спортивный костюм был хорошей идеей, особенно с голубыми платформами?).
Как и в случае с типографикой, ОС, для которой вы разрабатываете дизайн, вероятно, имеет свои собственные рекомендации относительно того, что вы должны искать в цветовой схеме. Однако независимо от ОС несколько рекомендаций являются универсальными:
- Ограничьте свою палитру двумя-четырьмя цветами.
Пользовательский интерфейс вашего мобильного приложения — не время хвастаться своей любовью к Лизе Франк. Как и в случае со шрифтами, чем меньше, тем лучше, когда дело доходит до выбора цветовой схемы для вашего приложения. Слишком много цветов и оттенков усложняют визуальный дизайн, затрудняя пользователям поиск в вашем приложении и понимание того, с чем они должны взаимодействовать.
- Определите основные и акцентные цвета и используйте их соответствующим образом.
Вы должны использовать цвет таким образом, чтобы он сообщал пользователям, что происходит или что им следует делать. Например, элементы, с которыми пользователю необходимо взаимодействовать (такие как меню или кнопки), могут быть другого цвета, и этот цвет может измениться, когда пользователь коснется или проведет пальцем по элементу.
Для каждой палитры вы выбираете основной цвет или набор основных цветов для неинтерактивных элементов вашего пользовательского интерфейса, а также цвет акцента для демонстрации интерактивности. Чтобы представить это в перспективе, вы не должны использовать свой акцентный цвет для блоков текста, которые пользователь просто прокручивает, или статических иллюстраций, и вы не должны использовать свои основные цвета на кнопках. Если вы последовательно используете основные и акцентные цвета, ваши пользователи смогут более интуитивно ориентироваться в вашем приложении.
- Используйте цвет, чтобы сделать ваш дизайн более читабельным, и выбирайте цвета, которые хорошо сочетаются друг с другом.
Есть несколько факторов, которые влияют на то, будут ли ваши цвета хорошо сочетаться в схеме. Одна из самых важных вещей, которую следует учитывать, — это контраст: например, ярко-желтый цвет не будет очень заметен поверх лимонно-зеленого. Однако то, что два цвета или оттенка хорошо контрастируют друг с другом, не означает, что они будут хорошо сочетаться друг с другом. Этот ярко-желтый цвет также будет «вибрировать», если он находится поверх или рядом с ярко-синим оттенком.
Почему это происходит, можно написать в отдельной статье в блоге, но чтобы начать работу с выбором цветовой палитры, попробуйте взглянуть на палитры, которые Google и Apple рекомендуют в своих соответствующих руководствах по визуальному дизайну. Опять же, они уже проделали за вас большую часть работы по принятию визуально приятных решений для вашего интерфейса, поэтому вы можете сосредоточиться на предоставлении функций и функций, которые нужны вашим пользователям.
Еще одно замечание: ваша цветовая схема имеет большое значение, когда речь идет о доступности. Когда вы запускаете проверку качества в пользовательском интерфейсе мобильного приложения, одна вещь, которую вы должны проверить, — это то, будет ли приложение пригодным для использования людьми с дальтонизмом (у которых, например, могут быть проблемы с различением красного и зеленого). Один из способов сделать ваше приложение более доступным — позволить пользователям выбирать из набора настраиваемых цветовых палитр, чтобы их личное взаимодействие с приложением соответствовало их визуальным потребностям и предпочтениям.
Используйте прототип мобильного приложения, чтобы проверить свои возможности визуального дизайна
Изучение того, как эффективно реализовать визуальный дизайн в пользовательском интерфейсе мобильного приложения, — это постепенный процесс, но один из лучших способов проверить свои эстетические идеи — создать цифровой прототип вашего приложения.
С помощью прототипа мобильного дизайна вы можете быстро провести A/B-тестирование различных аспектов визуального дизайна, от шрифтов и цветов до типов навигации. Вы можете не только протестировать приложение самостоятельно, внося необходимые коррективы, но и попросить друзей, родственников, коллег и бета-тестеров высказать свое мнение. В конце концов, вы можете произвести впечатление на комнату, полную художников, потрясающим дизайном, но наибольшее значение имеют мнения ваших пользователей.
Первоначально опубликовано в блоге Proto 30 октября.