7 практических советов для UI дизайнера

7 практических советов для UI дизайнера

Positronum

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

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

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

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

1. Используйте цвет и вес для создания иерархии вместо размера

Распространенная ошибка, когда стиль UI-текста слишком сильно зависит от размера шрифта для управления иерархией.

"Этот текст важен? Давайте сделаем его больше"

"Этот текст вторичен? Давайте сделаем его меньше"

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

"Этот текст важен? Давайте сделаем его смелее"

"Этот текст вторичен? Давайте используем более светлый цвет"

Попробуйте придерживаться двух или трех цветов:

  • Темный (но не черный) цвет для основного содержимого (например, для заголовка статьи)
  • Серый для вторичного контента (например, для даты публикации статьи)
  • Более светлый серый для вспомогательного содержимого (возможно, для копирайта в футере)

Аналогично, для работы с UI обычно достаточно двух видов начертания одного шрифта:

  • Обычное начертание (400 или 500 в зависимости от шрифта) для большинства текстов
  • Более тяжелое начертание (600 или 700) для текста, который вы хотите подчеркнуть

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

2. Не используйте серый текст на цветном фоне

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

Это потому, что эффект, который мы видим на сером фоне, уменьшает контрастность .

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

Есть два способа уменьшить контрастность при работе с яркими фонами:

1. Уменьшите непрозрачность белого текста

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

2. Выделите цвет, основанный на цвете фона

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

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

3. Оффсет теней

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

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

Это относится к вставным теням, например, к отверстиям и формам ввода:

4. Используйте меньше обводок

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

Границы и обводки - отличный способ отделить два элемента друг от друга, но он не единственный, а чрезмерное использование обводок может сделать ваш дизайн слишком загроможденным.

В следующий раз, когда вы захотите использовать обводки, попробуйте одну из этих идей:

1. Используйте падающую тень

Тени отлично справляются с функциями границ и обводок, но при этом не притягивают к себе столько внимания.

2. Используйте два разных цвета фона

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

3. Добавьте дополнительные интервалы

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

5. Не "раздувайте" иконки, которые сделаны маленькими

Если вы разрабатываете что-то, что может иметь большие иконки (например, возможно, раздел «функции» для лендинга), вы, вероятно, инстинктивно захотите взять бесплатный набор значков, таких как Font Awesome или Zondicons, и увеличить размер до тех пор, пока они не будут соответствовать вашим потребностям.

В конце концов, это векторные изображения, поэтому качество не пострадает, если вы увеличите размер, правильно?

Хотя верно, что векторные изображения не ухудшатся по качеству, когда вы увеличиваете их размер, иконки, которые были нарисованы на 16-24px, никогда не будут выглядеть профессионально, если вы "раздуете" их в 3-4 раза. Им не хватает деталей, так что в таком формате они всегда буду чувствовать себя непропорционально.

Если у вас есть маленькие иконки, попробуйте внести их в другую форму (например, геометрическую фигуру) и придать форме цвет фона:

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

6. Используйте акцентные границы, чтобы добавить цвет к мягкому дизайну

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

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

Например, рядом с предупреждающим сообщением:

...или для выделения активных элементов навигации:

...или даже по всей верхней стороне всего вашего макета:

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

7. Не каждой кнопке нужен фоновый цвет

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

Фреймворки, вроде Bootstrap, поощряют это, предоставляя вам меню семантических стилей для выбора, когда вы добавляете новую кнопку:

"Это позитивное действие? Сделайте зеленую кнопку"

"Удаляет ли это данные? Сделайте кнопку красной"

Семантика - важная часть дизайна кнопок, но есть более важное измерение, которое обычно забывается: иерархия.

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

При разработке этих действий важно сообщить свое место в иерархии.

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

"А как насчет разрушительных действий, разве они не всегда будут красными?"

Не обязательно! Если деструктивное действие не является основным действием на странице, возможно, было бы лучше дать ему вторичную или третичную обработку кнопок.

Сохраните большой, красный и смелый стиль, когда это негативное действие на самом деле является основным действием в интерфейсе, например, в диалоговом окне подтверждения:



Источник: https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886