10 чит-кодов для проектирования пользовательских интерфейсов

Я, вероятно, предположил бы, что большинство из нас начинали в дизайне пользовательского интерфейса с минимальными знаниями или вообще ничего. Но даже несмотря на то, что шансы были поначалу против нас, мы пробежались по многочисленным книгам и статьям по дизайну, чтобы понять, как работают цвета, типографика, макет и т. Д. Я помню, как у нас в Make Technology, компании, ориентированной на UX, было установлено, что дизайн нельзя просто объяснить цветами, формами и текстом. Это процесс, который имеет «почему» за ним, что всякий раз, когда мы создаем текст больше, добавляем тень или меняем цвет, должна быть причина, почему все должно быть.

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

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

1. Этот текст важен, сделайте его больше!

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

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

Извиняюсь, если фото в низком разрешении

Так как мне создать лучший контраст?

  • Не используйте один вид веса с разными размерами шрифта для создания контраста и иерархии.
  • Вместо этого используйте более смелый и более темный стиль для основного контента или меньше и светлее для вторичного контента (менее важно).
  • Создайте три вида цветов текста, которые варьируются от темного до светлого (см. Пример ниже). Обычно я использую свой основной цвет в качестве цвета основного текста.
  • Не бойтесь применять большие шрифты к вашим элементам (например, заголовок размером 24 пикселя, основной текст размером 16 пикселей, мета-размер 10 пикселей и т. Д.). Большой разрыв = лучший контраст.
  • Проверьте Modularscale онлайн-калькулятор, который вы можете использовать для создания лучшей иерархии шрифтов.
  • Помните, что контраст = размер + вес + цвет.
  • Наконец, не забудьте проверить его контрастность. Вы можете использовать этот калькулятор, чтобы проверить его доступность.
от основного цвета я перехожу от более темного для заголовков к более светлому для вспомогательного содержимого.

2. Не создавайте несколько оттенков черного

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

Мы все знаем, что использование черного цвета текста (# 000) вызывает у читателей напряжение глаз, и поэтому наше решение заключается в создании более темных вариантов в качестве альтернативы. Но вместо выбора цвета 3 или более шестнадцатеричных значений цвета, мы можем использовать черный с различной непрозрачностью в качестве решения:

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

3. Посчитайте цвета

Большинству из нас не хватает выбора правильных цветовых комбинаций, и всякий раз, когда мы видим дизайн с хорошо организованной цветовой палитрой, мы задаемся вопросом: «Как они это сделали?» (Как показано ниже):

взято из momoandspirits

Пока я не узнал, что понимание цветов не только для тех, кто обладает даром дизайна с начала времен, что простое сложение и вычитание в Hue, Saturation, Brightness (HSB) сделает волшебство (мы будем использовать HSB для этого формула вместо RGB). Вы можете легко избавиться от скучного белого на цветном фоне и превратить его в произведение Пикассо, как показано ниже:

Так откуда же сложение и вычитание в HSB?

Два подхода к пониманию цветов

На самом деле мы можем использовать два подхода, и, как мы видим, оба варианта имеют один и тот же базовый цвет # B9F4BC (фон круга), но различаются, когда речь идет о цвете папок и полос. Когда мы начинаем, всегда помните, что первое число соответствует Hue, затем Saturation и, наконец, Brightness.

Вариант А

Вариант А

В варианте A мы можем видеть, что мы сохраняли значение Hue 123 по всем фигурам (круг, папка, полоса), в то время как изменение насыщенности и яркости является тем местом, где происходит изменение.

Теперь, когда мы сфокусируемся на насыщенности базы, которая равна 24, и ее яркости, 96, оба значения изменились, когда мы создали более темный зеленый цвет для папки. От Насыщенности 24 он стал 40 (с шагом +16), а от Яркости 96 он стал 82 (с уменьшением -14), что показывает нам, что изменение насыщенности, будь то инкрементное или декрементное, требует обратно пропорциональной регулировки яркости, чтобы создать хороший контраст (наоборот). И то же самое произошло в Strip, используя насыщенность и яркость папки в качестве базового значения, мы переместились с 40 на 44 (с шагом +04) и снизились с 82 до 75 (с понижением -07) для яркости. по формуле:

Более темное значение = увеличение насыщенности - уменьшение яркости
Более светлое значение = уменьшение насыщенности - это приращение яркости

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

Вариант Б

Вариант Б

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

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

Теперь в варианте B, если мы хотим иметь более темный вариант основного цвета, все, что нам нужно сделать, это переместить наш палитру цветов в направлении, где находится ближайший RGB в нашей цветовой палитре, или переместить его в направлении CMY для более легкая вариация Например:

Палитра цветов

Поскольку мы хотим создать более темный вариант нашего основного цвета # B9F4BC (круговой фон), который должен быть применен в значке нашей папки, нам нужно переместить наш палитру цветов в направлении, где расположен ближайший RGB (в данном случае это синий). дело). Но если мы хотим иметь более легкую версию нашей папки, мы будем перемещать наш сборщик влево, около CMY (в данном случае желтый).

* Чаще RGB приводит к более темным вариациям, а CMY к более светлым.

После перемещения палитры цветов к желаемому варианту мы теперь применяем формулу в варианте A, в результате чего мы получаем такую ​​цветовую комбинацию:

Красный, Зеленый, Синий (RGB) + Опция A Формула = Более темные вариации
Голубой, Пурпурный, Желтый (CMY) + Вариант A Формула = Легкие вариации

4. Используйте интервалы для разделения групп

Будь щедрым дарителем космоса

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

Как гласит закон близости:

Объекты, которые находятся близко или близко друг к другу, имеют тенденцию группироваться вместе.

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

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

Цвета как разделители

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

6. Умножьте вместо текста Drop Shadow

Дизайн заголовка

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

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

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

Спецификации для вариантов смешивания Multiply

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

7. Длина линии

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

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

с большим пробелом справа

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

центрированный контент

8. Не изобретай велосипед

Что делает дизайн несовместимым, так это когда он не основан на компонентах. Это когда вы поняли, что вы сделали 5 видов интерфейса карты, 10 кнопок, 5 стилей заголовков и т. Д.

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

Вместо того, чтобы изобретать велосипед и создавать другую карту для Art Group (пример выше), мы можем использовать карту Article и заменить ее содержимым Art Group. Это сэкономит время для дизайнеров, а также сделает интерфейс совместимым.

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

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

10. Повесьте пули

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

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

Эта статья вдохновлена ​​7 практическими советами по измене дизайна и тоннами статей по дизайну, которые я прочитал :)

Другие истории от меня

По любым вопросам, пинг меня на mhariellmosqueriola@gmail.com

giphy