Как фронтенд-инженер, если вы имеете базовое представление о HTML и CSS и хотите создавать красивые пользовательские интерфейсы в браузере, не оглядывайтесь по сторонам! В этой статье вы улучшите свои навыки проектирования пользовательского интерфейса, зная эти семь основ:
оставьте поле пустым
выровнять
В сравнении
Доля
пластина
цвет
визуальная иерархия
Давайте начнем!
оставьте поле пустым
Первая основа дизайна, которую мы собираемся рассмотреть, этопространство пустое, также известный как отрицательное пространство. Как следует из названия, это пространство между элементами на странице.
Элементы, сжатые на странице без пробелов, не только выглядят непривлекательно, но и затрудняют навигацию и чтение.
Пустое пространство можно настроить несколькими способами, включая отступы, поля и высоту строки. Взгляните на изображение ниже, чтобы увидеть разницу, которую создает эффективное пустое пространство.
выровнять
Далеевыровнять. Это процесс обеспечения правильного позиционирования каждого элемента по отношению к другим элементам, например, за счет того, что его столбцы выровнены вниз на странице.
Как вы можете видеть на изображении ниже, элементы первой страницы находятся во многих разных столбцах (слабое выравнивание), что гораздо менее привлекательно и читабельно, чем на второй странице, которая имеет сильное выравнивание:
В сравнении
Также учитывайте при создании страницы или приложенияКонтраст, этот момент очень важен. Контраст — это разница между цветами, отображаемыми рядом друг с другом на странице.
Как видно из этого примера, страницы с плохой контрастностью плохо читаются, а элементы не выделяются.
Страницы с хорошей контрастностью (например, приведенная ниже) не только выглядят лучше, но и более удобны для пользователя и легко доступны.
Чтобы помочь вам получить правильный коэффициент контрастности, WCAG (Руководство по доступности веб-контента) рекомендует минимальный (AA) коэффициент контрастности не менее 4,5: 1 или 3: 1 для большого текста или повышенный (AAA) коэффициент контрастности 7: 1 или 4,5:1 (крупный текст). Есть много плагинов или веб-сайтов, которые могут помочь вам проверить.
Доля
ДоляЭто также важная часть пользовательского интерфейса, поэтому тщательно продумайте размер каждого элемента. Например, элемент должен быть достаточно большим относительно страницы (чтобы не было больших пробелов). Точно так же элементы более высокой важности, такие как заголовки, должны быть больше, чем элементы меньшей важности.
Посмотрите на изображения до и после ниже и обратите внимание на то, как выглядит страница при правильной настройке.
формат
Дизайн макетаТакже оказывает большое влияние на пользовательский интерфейс. Существует множество способов настроить этот параметр, включая выбор шрифта, размер шрифта, выравнивание, расстояние между буквами, высоту строки, стиль шрифта, цвет и контрастность и многое другое.
В общем, используйте не более двух семейств шрифтов на странице и убедитесь, что различные аспекты работают вместе, чтобы установить порядок важности. Это называетсявизуальная иерархияМы подробно представимся ниже.
Если вы будете следовать этим советам, ваша страница будет выглядеть так:
Вместо того, чтобы быть запутанным и непонятным, как это:
цвет
Дизайн пользовательского интерфейса, который в первую очередь влияет на взаимодействие с пользователем,цвет. Психология цвета утверждает, что каждый цвет имеет значение для некоторых людей — например, красный может представлять опасность, а белый — чистоту и спокойствие.
Но следите за цветами. Значение может меняться из-за культурных различий, поэтому при выборе цвета обязательно проведите исследование и примите во внимание свою целевую аудиторию.
Также имейте в виду, что слишком много цветов может ухудшить пользовательский интерфейс, а выбранные вами цвета должны дополнять друг друга. Как правило, вы не ошибетесь, поместив более светлые или более темные варианты одного и того же оттенка рядом друг с другом. Просто взгляните на сравнение двух картинок ниже, это первая с горячими глазами!
визуальная иерархия
Последний пункт в нашем спискевизуальная иерархия. Некоторые элементы пользовательского интерфейса важнее других. Визуальная иерархия позволяет установить эту важность.
Это можно сделать с помощью положения, контраста, цвета, масштаба, стиля или их комбинации, как показано на втором изображении ниже, которое имеет лучшую визуальную иерархию, чем первое.
Суммировать
В этой статье мы рассмотрим семь основных принципов дизайна: пустое пространство, цвет, контраст, пропорции, выравнивание, типографика и визуальная иерархия. Все они одинаково важны для пользовательского интерфейса — если какой-либо из этих элементов отсутствует, весь пользовательский интерфейс будет скомпрометирован.
Добро пожаловать в общедоступную учетную запись внешнего интерфейса: Front-end Pioneer, получите бесплатный набор утилит для разработки внешнего интерфейса.