1 4 800x440 - 8 советов, как по-быстрому улучшить свой интерфейс

Небольшие и простые в использовании советы по улучшению ваших дизайнов.

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

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

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

Давайте погрузимся в мир UI и UX совершенства …

1. Осветлите текст, если он кажется слегка тяжелым

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

Это можно легко исправить, выбрав темно-серый цвет (то есть #4F4F4F), что позволит немного визуально облегчить текст.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 8 советов, как по-быстрому улучшить свой интерфейс

2. Чем меньше размер шрифта, тем больше высота строки

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

И наоборот, с увеличением размера шрифта, уменьшите высоту строки.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 8 советов, как по-быстрому улучшить свой интерфейс

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

Вам не всегда нужно наполнять свой дизайн множеством цветов.

Если проект позволяет это, просто используйте ограниченную цветовую палитру, выбрав базовый цвет, а затем используя оттенки и тени (Tints и Shades), можно добиться однородности дизайна.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 8 советов, как по-быстрому улучшить свой интерфейс

4. Выделите наиболее важные элементы

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 8 советов, как по-быстрому улучшить свой интерфейс

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

При создании иконок интерфейса соблюдайте согласованность.

Убедитесь, что все иконки имеют одинаковый визуальный стиль; одинаковый вес, и либо заполнены, либо имеют рамку.

Не смешивайте разные стили.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 8 советов, как по-быстрому улучшить свой интерфейс

6. Всегда делайте «Призыв к действию» самым заметным элементом на экране

Убедитесь, что «Призыв к действию» максимально заметен благодаря использованию цветового контраста, размера и меток.

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 8 советов, как по-быстрому улучшить свой интерфейс

7. Добавьте дополнительные визуальные подсказки в сообщение об ошибке

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

Помогает любая мелочь, верно?

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 8 советов, как по-быстрому улучшить свой интерфейс

8. Выделите наиболее часто используемое действие меню

При проектировании меню приложения убедитесь, что наиболее часто используемое действие (например, «Загрузить изображение», «Добавить файл» и т. д.) выделяется на экране.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 8 советов, как по-быстрому улучшить свой интерфейс

Еще больше советов по дизайну можно найти в Twitter автора, подписывайтесь на его аккаунт.

Хотите быстро создавать лучшие дизайны в Sketch и Figma? Ознакомьтесь с моей дизайн-системой и Starter Kit.

Спасибо за прочтение.

Свежие вакансии
                        Rightapplications Rightapplications UX дизайнер Офис Харьков
                        Emlid Emlid UX/UI Designer Офис Санкт-Петербург
                        Тинькофф Тинькофф Креативный веб-дизайнер Офис Москва
Все вакансии

Оригинал: uxdesign.cc

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Добавить комментарий
Похожие записи

10 золотых правил UI дизайна

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

Как создавать темные темы. Руководство от Superhuman

В этой статье мы расскажем, как создавать темные темы, которые будут читабельными, сбалансированными и восхитительными

Основы иерархии в дизайне интерфейса (UI)

Понятие иерархии, ресурсы и значение иерархии для дизайна интерфейсов