Советы по улучшению дизайна интерфейса

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

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

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

Пример

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

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

Пример

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

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

Пример

2. Дурным тоном считается использование серого цвета на цветном фоне.

Пример

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

Пример

Однако, если вам все-таки важно, чтоб пользователи обратили внимание на данный текст, играйте с оттенком цвета фона (сделайте его светлее чем фон).

3. Смещение теней.

Пример

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

4. Используйте меньше границ.

Пример

Это не единственный способ разделения элементов блока. К кому, же этот способ давно уже устарел и не используется в современном дизайне. В качестве альтернативы можно использовать один из следующих методов:

  • Используйте блочные тени для визуального разделения элементов;

Пример

  • Используйте разные цвета фона;

Пример

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

Пример

5. Не увеличивайте размер иконок.

Пример

Иконки, которые были нарисованы в размере 16−24px, никогда не будут выглядеть профессиональными, если вы растяните их в 3−4 раза от их предполагаемого размера. Им не хватает детализации, и они всегда воспринимаются непропорционально «массивными».

Пример

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

Пример

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

6. Используйте акцентные границы.

Пример

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

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

Пример

…или выделить активные элементы навигации:

Пример

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

Пример

7. Покажите пользователю иерархию кнопок на странице.

Пример

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

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

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

Пример

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

Пример

Добавить комментарий

Ваш e-mail не будет опубликован.