[ad_1]
Специалисты обычно предполагают, что все, что они знают, очевидно, и им нужно напоминать себе, что это не так для большей части населения.
Что действительно есть у специалистов, так это скорость, с которой они принимают решения в своей работе. Это отражает годы целенаправленной работы и опыта, а не предполагаемую реальность, которой обладают все. Есть момент, когда специалист должен сделать шаг назад и посмотреть на жизнь шире, иначе его по-прежнему интересуют только мысли другого специалиста; фактически создавая искусство для других художников.
Одна из наиболее ценных вещей, которым можно научить, — это предположения, используемые при принятии решений; объяснение строгих правил, которые используют дизайнеры, поможет другим быстрее научиться ездить на велосипеде.
Итак, вот 16 советов по дизайну мобильных приложений. Пойдем!
- 01. Все существует в сетке
- 02. Каждый элемент определяет расстояние
- 03. Цвет создает иерархию
- 04. Цвет — это не то, что вам нравится, это бренд
- 05. Розовый — это не оттенок красного
- 06. Логотипы добавляют стиля, но они не делают и не ломают
- 07. Заголовок страницы
- 08. Определите элементы, а затем повторите их
- 09. Можно использовать простые приемы для разделения текста и создания иерархии
- 10. Устаревший — это еще одно слово для немодного
- 11. Большинство приложений — это просто списки
- 12. Как принять решение по макету
- 13. Действия требуют обратной связи и быстроты
- 14. Отложите регистрацию
- 15. Когда использовать необычный шрифт
- 16. В каждой системе есть визуальные ориентиры
01. Все существует в сетке
На каждой поверхности есть невидимая сетка. Вы можете не видеть его, но он поможет вам.
02. Каждый элемент определяет расстояние
В тот момент, когда точка, слово или линия помещаются на холст/монитор/экран, вы определяете свои поля и отступы. Каждый штрих определяет пространство, с которым вам предстоит работать.
При этом убедитесь, что вы поддерживаете постоянную ширину и высоту с полями и отступами. Шестьдесят пикселей в одном месте и 20 пикселей в другом должны иметь вескую причину (например, один раздел является потомком другого). В остальном все должно быть одинаково.
03. Цвет создает иерархию
Значение цвета используется для обозначения цели. Начнем с черного и оттенков серого. Если вы сделаете одну кнопку черной, другую темно-серой, а третью светло-серой, вы, по сути, скажете следующее: «Кнопка 1 наиболее важна для посетителя, кнопка 2 менее важна, а кнопка 3 наименее важна. «
Старайтесь не делать цвета кнопок того же цвета, что и сайт или приложение, так как они исчезнут. Кроме того, рекомендуется избегать создания кнопок «купить» или других кнопок с призывом к действию, выделенных ярко-красным цветом, поскольку это означает остановку в США и может фактически помешать пользователям нажимать на нее, часто думая, что это не приведет их к их цели. цель (см. изображение).
Это поднимает следующий вопрос, который заключается в том, что цветовые ассоциации основаны на культуре и должны учитываться при определении рынка. Например, я когда-то работал в команде, у которой главная кнопка «доступ» была красной, которую мы позже изменили на зеленую, и количество кликов увеличилось вдвое.
Красный может означать: «Стой, не делай этого, ты уверен? Предупреждение!» знание этого поможет вам получить результаты, более близкие к вашим потребностям.
04. Цвет — это не то, что вам нравится, это бренд
Бренд сосредоточен на эмоциональных отношениях ваших потребителей или клиентов с вашей услугой или продуктом. Цвет помогает определить эти отношения тонким, но эффективным способом. Вам не обязательно должны нравиться ваши цвета, чтобы они были эффективными.
05. Розовый — это не оттенок красного
Изучите значение слов «оттенок» и «оттенок», так как я буду ругать вас за неправильное использование этого слова в разговоре.
Цвет 101: Оттенок — это основной цвет, такой как красный, синий, зеленый и т. д. Если к цвету добавляется белый, это оттенок этого цвета, если добавляется черный, это оттенок этого цвета. Понятно? Таким образом, при описании цвета чего-либо он может иметь красный оттенок и быть оттенком или оттенком, но не тем и другим одновременно. Вы спросите, а как же Канарейка? Это маркетинговое название цвета, которое непоследовательно используется для обозначения мебели или лака для ногтей.
Я использую такие цвета, как «Robins Blue», «Pumpkin Pie» и «Baby Vomit», когда разговариваю с клиентами, потому что они очеловечивают цвета и вызывают у них соответствующую ассоциацию, но, говоря технически, использую слова «оттенок» и «оттенок».
О, и что такое Baby Vomit, спросите вы? Это цвет, который я наблюдаю в логотипах в последнее время. Я всегда думал, что хуже быть не может, если клиент настаивает на использовании Corporate Blue. Ну, конечно может. Новый злодей — Baby Vomit.
06. Логотипы добавляют стиля, но они не делают и не ломают
Бренд делает клиента настолько же, насколько клиент делает бренд. Логотип не сделает вас успешным бизнесом, но плохо продуманный логотип плохо отразится на вашем бизнесе.
Люди говорят, что логотип вне времени. По умолчанию дизайн модный, поэтому логотип не может быть вечным. Логотипы привязаны к эпохе, в которой они были созданы. В этом нет ничего плохого. CocaCola не вечна — она очень напоминает 1920-е годы — примерно в то время, когда она была разработана. С тех пор он был обновлен до чистого вектора, помогая ему чувствовать себя соответствующим нашим чувствам, но суть винтажная, а не современная.
07. Заголовок страницы
Заголовки экранов на веб-сайтах — отличный способ напомнить пользователю, где он находится после того, как он открыл 35 вкладок и не помнит содержимое.
В приложениях они занимают драгоценное место, а недвижимость здесь дороже, чем на Манхэттене, поэтому, если вы думаете, что ваш пользователь не забудет, на каком экране он находится, вы можете иногда пропустить его или сделать так, чтобы он исчез до обновления. или прокрутите.
В качестве альтернативы это пространство может быть преобразовано в область поиска, когда пользователю нужна эта функция. (Хотя заголовки хорошо обрамляют экран и могут придать дизайну изысканный вид.)
08. Определите элементы, а затем повторите их
Если одна из кнопок «Перейти» окрашена в фиолетовый цвет, то все кнопки «Перейти» должны быть фиолетового цвета. Если один экран имеет отступ 20 пикселей со всех сторон, все экраны должны поддерживать эту согласованность.
Вот что мы имеем в виду, когда определяем элементы и повторяем их. Каждый элемент должен быть определен, как и цвета внутри приложения.
09. Можно использовать простые приемы для разделения текста и создания иерархии
Все заглавные буквы, заглавные буквы, отступы, контраст и подчеркивание: все это стилистические решения. Ни один из них не обязательно лучше любого другого, и вы можете использовать их в любом месте, если вы последовательны.
10. Устаревший — это еще одно слово для немодного
Дизайн ориентирован на тенденции, и в настоящее время тенденция заключается в переходе к более плоскому дизайну. Плоский дизайн (откроется в новой вкладке) не означает, что у него нет текстуры или теней, а также не означает, что каждый аспект должен иметь реалистичную текстуру. Как правило, вы должны знать, что ваша аудитория ожидает увидеть, поскольку они будут осуждать вас за это. Если ваше приложение выглядит устаревшим — пользователи это заметят.
«Скевоморфизм (откроется в новой вкладке) это универсальный термин, когда объекты сохраняют декоративные элементы прошлого, производные итерации — элементы, которые больше не нужны для функций текущих объектов». (Остин Карр (откроется в новой вкладке) — писатель по дизайну и технологиям для Fast Company)
11. Большинство приложений — это просто списки
Большинство мобильных приложений (это не игра) в основном представляют собой способ навигации по спискам. Задача дизайнера состоит в том, чтобы скрыть тот факт, что это всего лишь список, и сделать его интересным, полезным и веселым опытом. Вот почему IA и правильная иерархия так важны — с правильной основой макет может быть очень разнообразным, но передавать одну и ту же информацию.
12. Как принять решение по макету
Библиотеки дизайна существуют, чтобы помочь решить, какой макет лучше всего подходит для конкретной проблемы. Вот несколько хороших.
13. Действия требуют обратной связи и быстроты
Пользователи ожидают, что их телефоны будут быстро и эффективно реагировать на все их действия. Это не всегда так, и разработчики часто говорят мне, что некоторые действия занимают много времени. Так что, возможно, вам придется найти способ подделать его.
Каждое взаимодействие должно иметь обратную связь. Например, когда на действие пользователя (пролистывание, касание, щелчок) отвечает анимация, это дает пользователю обратную связь о том, что он был услышан и его процесс выполняется.
Подумайте о том, как это работает в веб-дизайне: когда пользователь наводит курсор на кнопку, она меняется, а затем снова меняется при нажатии. Это должно произойти и в мобильной версии. Если пользователь обновляется, должен быть движущийся символ. Если они что-то ударяют, оно должно скользить, или светиться, или подпрыгивать — что угодно, чтобы пользователь знал, что это работает.
Это также дает системе время для обработки исходного взаимодействия или звонка, чтобы оно выглядело так, как будто оно было мгновенным. Короче говоря, большая часть дизайна взаимодействия — это дым и зеркала.
14. Отложите регистрацию
Предложение зарегистрироваться на одной странице. Попросите пользователя зарегистрироваться, как только он «понравится» или «отметит сердцем» элемент; позвольте им обручиться первыми. У вас будет значительный отток пользователей от входа в систему, и обычно регистрация в любом случае не представляет большой ценности для бренда.
15. Когда использовать необычный шрифт
При разработке композиций время лучше потратить на что-то другое. Большинство людей быстро различают шрифт с засечками, шрифт без засечек, декоративный или сокращенный шрифт, но часто думают, что плитка — это шрифт с засечками, гуманист — это шрифт без засечек и все такое прочее. Джессика Хиш (откроется в новой вкладке) является декоративным. Наиболее важными соображениями при выборе шрифта являются:
- Могу ли я легко использовать его на мобильных устройствах/в Интернете?
- Есть ли разные веса?
- Это разборчиво?
Я согласен с мнением, что на освоение шрифтового дизайна уходит вся жизнь, поэтому, если вы выберете шрифт из хорошей фабрики, особых проблем возникнуть не должно.
При работе с мобильными приложениями имейте в виду, что многие пользователи не могут отличить Arial, Avenir, Roboto или Helvetica. Это означает, что пока шрифт чистый и легко читаемый, все в порядке. Время добавлять более сложный шрифт — это когда вы сосредотачиваетесь на бренде, а не на удобстве использования. В этом случае новый, нетипичный шрифт будет создавать ощущение присутствия где-то, может быть, ностальгии, может быть, даже прихоти. Сделаете ли вы это или нет, зависит от ваших приоритетов, но не стоит зацикливаться на этом.
16. В каждой системе есть визуальные ориентиры
Android, Windows и iOS имеют рекомендации по дизайну, которые охватывают различные стили дизайна и довольно подробные с конкретной информацией, такой как ширина между текстом. Это отличный ресурс, когда вы не знаете, как действовать дальше.
Это хороший свод правил для начала. Позвольте мне знать ваши мысли!
Слова: Валерий Лисянский
Валерий Лисянский — партнер SWARM (откроется в новой вкладке), бутик-агентство из Нью-Йорка, которое создает приложения для мобильных устройств, носимых устройств и второго экрана. Свяжись с ней в Твиттер (откроется в новой вкладке).
Как это? Прочтите это!
[ad_2]
