Чеклист: как улучшить основные элементы пользовательского интерфейса вашего продукта.

Опубликовано 15 March 2020

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

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


1. Типография.


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


Отслеживание заглавных букв.


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


Чеклист: как улучшить основные элементы пользовательского интерфейса вашего продукта.


Легкие, тонкие и завитые стили шрифта.


Вы должны быть осторожны с этими стилями. Можно использовать свет, но это зависит от шрифта. Если вы создаете продукт, который пользователи в конечном итоге увидят на экранах, лучше забыть о стилях «Тонкий» и «Волнистый». Их очень сложно читать, и на некоторых экранах они могут создавать эффект разбитых полупикселей.


Чеклист: как улучшить основные элементы пользовательского интерфейса вашего продукта.


Размеры шрифтов заголовков и основного текста.


Давайте поговорим о веб-типографии. Существует шесть уровней заголовков (h1 - h6). Сначала вы должны убедиться, что в вашем проекте не более четырех заголовков, и контролировать их логику и последовательность. Самый большой заголовок (может находиться в первом блоке главной страницы) веб-сайта или целевой страницы может быть настолько большим, насколько вы пожелаете: современные тенденции поощряют выразительную типографику. Тем не менее, постарайтесь не заходить слишком далеко с остальными заголовками, потому что слишком большой текст так же трудно читать, как и слишком маленький. Теперь для основного текста. Настройки браузера по умолчанию (давайте использовать Google Chrome в качестве ссылки) будут отображать каждый текст размером 16px. Этот размер довольно удобен для чтения, но я использую не менее 17 пикселей для основного текста и 14 пикселей для дополнительного текста. Зарезервируйте 12 пикселей как минимально возможный размер, в то время как меньшие размеры становятся едва читаемыми из-за проблем со зрением или плохих мониторов. Не забудьте избегать близких размеров. Не используйте 16px и 17px в одних и тех же сегментах: это вносит путаницу и визуальную неряшливость во внешний вид продукта и является совершенно необоснованным.


Высота линии.


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


Чеклист: как улучшить основные элементы пользовательского интерфейса вашего продукта.


Текст и заголовки.


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


Чеклист: как улучшить основные элементы пользовательского интерфейса вашего продукта.


Контраст текста.


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


Чеклист: как улучшить основные элементы пользовательского интерфейса вашего продукта.




2. Интервалы и поля.


Отрицательное пространство («воздух» между элементами) важно для хорошего дизайна. Пространство помогает прояснить отношения между элементами, обеспечивает ритм и баланс.


Избавьтесь от дополнительных рамок и линий.


Самый простой способ отделить один семантический блок от другого - использовать фрейм или строку размером 1 пиксель. Это не всегда лучший подход. Я видел элементы дизайна, где внутри коробки была коробка, а внутри еще несколько коробок, каждая из которых имела собственную рамку размером 1 пиксель. В таких ситуациях нужно остановиться и подумать: действительно ли это уместно и необходимо? Современные интерфейсы, как правило, имеют карты везде: карта в интернет-магазине, карта в приложении по уходу за животными, карта ресторана, которая доставляет вашу любимую пиццу в приложении доставки. Иногда разумно использовать кадр размером 1 пиксель, но есть другие способы различения таких элементов, как тени или интервалы. Главное, чтобы поля между картами были больше, чем отступы внутри них. Удаление фреймов на любом элементе может сэкономить место для содержимого, если вам не нужно дополнительное пространство для внутренних полей. В конце концов, именно контент является наиболее важной частью любого продукта, поэтому не стоит неоправданно сокращать пространство, отведенное для него.


Чеклист: как улучшить основные элементы пользовательского интерфейса вашего продукта.


Что принадлежит чему?


Поля помогают визуально определить, принадлежит ли один элемент другому. Давайте рассмотрим макет статьи на новостном сайте. Допустим, он состоит из одного рисунка, заголовка, 3–4 строк текста предварительного просмотра и даты публикации. Заголовок должен «жениться» на тексте и составлять сплошной элемент. У даты должно быть немного большее поле, чем между заголовком и текстом. Наконец, картинка должна быть перемещена так далеко от заголовка, как дата, или еще дальше. Звучит запутанно? Лучше посмотрите на соответствующую картинку ниже.


Чеклист: как улучшить основные элементы пользовательского интерфейса вашего продукта.


Меньше - больше.


Всегда есть клиент или менеджер, который требует, чтобы вся информация размещалась в одном блоке или на одном экране мобильного приложения. Так что название, и телефон, и все меню, и специальное предложение подойдут. И не забудьте большой логотип. Я не большой переговорщик и не могу придумать простой способ заставить их передумать. Но, по крайней мере, вы могли бы сказать следующее: чем меньше информации пользователь получает сразу, тем легче ему будет действовать (например, сделать телефонный звонок). Постепенное получение информации обеспечивает более легкое и приятное обслуживание клиентов. Клиент никогда не должен испытывать трудности с расшифровкой макета вашего пользовательского интерфейса - никто никогда не хочет этого. И куча тесно сгруппированных элементов не эстетична и, в конце концов, безобразна.


Неровные края экрана.


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


Чеклист: как улучшить основные элементы пользовательского интерфейса вашего продукта.




3. Цвет и изображения.


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


Логотип.


Я не слишком часто делаю логотипы, за свою карьеру их было около 20, и вот что я узнал: создать хороший логотип очень сложно. Тем не менее, дизайнер может создать приличный логотип, просто следуя основным правилам и принципам. Например, тщательный подбор цвета. Однажды я увидел рыболовный магазин под названием «VIP catch» с фиолетовым логотипом. Сочетание пурпурного и слова «VIP» на самом деле не создает ассоциации с рыбалкой. В общем, вы можете использовать любой цвет для любой отрасли, если нет явного отключения, такого как фиолетовый сценарий «XXX VIP Catch». Еще один совет по поводу логотипа: если вам трудно поместить изображение (символ) в логотип - просто не делайте этого. Попробуйте сделать его логотипом только для шрифтов, делайте меньше и делайте лучше. Избавьте этот мир от другого юридического офиса с печатью или весами на их логотипе.


Тень.


Тень под объектом никогда не должна быть черной. Это всегда будет более темный оттенок поверхности, на которую он нанесен. Объекты обычно имеют несколько теней: одна маленькая и яркая, прямо под ней (если она стоит или лежит на чем-то), а вторая более размытая и прозрачная. Избегайте «грязных», неестественных теней в вашем UI дизайне.


Чеклист: как улучшить основные элементы пользовательского интерфейса вашего продукта.


Иконки и изображения.


Все, что может быть вектором, должно быть вектором. Все пиктограммы, стрелки и логотипы должны предоставляться разработчикам в формате SVG (PDF для разработки на iOS). Иконки PNG имеют размытые края и выглядят плохо, особенно на дисплеях сетчатки. Кроме того, векторные изображения занимают меньше памяти.


Подробнее о иконках.


Если вы работаете над набором значков для веб-сайта или приложения, убедитесь, что все они принадлежат одной «семье». Это означает равную ширину хода, равный радиус границы. Убедитесь, что каждая иконка вписывается в квадрат одинакового размера и имеет одинаковую массу. Если на некоторых значках есть круги, убедитесь, что они имеют одинаковый диаметр. Иконки должны иметь единый стиль.



Чеклист: как улучшить основные элементы пользовательского интерфейса вашего продукта.



4. Здравый смысл.


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


Избегайте странных макетов.


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


Чеклист: как улучшить основные элементы пользовательского интерфейса вашего продукта.


Размеры и свойства макета.


Прежде чем приступить к дизайну мобильного приложения, важно спросить разработчиков о размерах экрана. Обычно это будет 320px для iOS и 360px для Android. Хотя это более или менее ясно и предсказуемо для мобильных приложений, дизайн веб-сайта может быть сложным, поскольку он будет использоваться на самых разных устройствах. Следующая ситуация была очень распространена в моем собственном опыте как разработчика внешнего интерфейса: предоставленная компоновка была сделана для огромных мониторов. Между блоками были поля 400–600 пикселей, размеры шрифтов огромные, странная сетка. К счастью, я тоже дизайнер, и я мог решить эту проблему сам, настроив поля и размеры, чтобы они хорошо выглядели на любом экране. Однако разработчики внешнего интерфейса обычно не имеют опыта проектирования и будут реализовывать дизайн именно так, как он им был предоставлен. В результате элементы будут слишком большими на обычном экране ноутбука. Обратите внимание, что средний предел экрана ноутбука составляет около 700 пикселей по вертикали, поэтому попробуйте вписать один семантический блок в это измерение.


Lorem Ipsum.


Образец текста Lorem Ipsum в вашем дизайне выглядит дешево и непрофессионально, поэтому избегайте его использования. Это только показывает, что дизайнеру было лень создавать какой-то достойный контент. Более того, вам больше не нужно создавать его самостоятельно, есть множество плагинов для Sketch и Figma, которые будут генерировать контент для вас. Другой совет: старайтесь не дублировать блоки, даже если это только для демонстрации. Размещайте разные картинки, заголовки и превью текстов разной длины.



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