1 заметка с тегом

интерфейсы

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

<br><br>

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

Я опросил разных дизайнеров и узнал, как они работают с интерфейсами, а также какие правила используют.

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

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





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


Итак, как мне улучшить контраст?

  1. Не используйте один вид веса с разными размерами шрифтов для создания контраста и иерархии.
  2. Вместо этого используйте более смелый и более темный стиль для основного контента, или меньше и светлее для вторичного содержимого.
  3. Создайте три типа текстовых цветов, которые варьируются от темного оттенка до светлого (см. Пример ниже). Обычно я использую свой базовый цвет как цвет текста.



  1. Не бойтесь применять большие пробелы в шрифтах к своим элементам (например, заголовок 24px, основной текст 16px, метаданные 10px и т. д.). Большой разрыв = лучший контраст.
  2. Изучите Modularscale — это онлайн-калькулятор, который вы можете использовать для создания лучшей иерархии шрифтов.
  3. Помните, что контраст = размер + вес + цвет.
  4. Наконец, обязательно проверьте коэффициент контрастности. Вы можете использовать этот калькулятор, чтобы это проверить.


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

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





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

3 Сделайте математику для понимания цветов

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



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





Итак, где же происходит сложение и вычитание в HSB?





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

Вариант А

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

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





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





Вариант B





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

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

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





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

После того, как мы переместим ползунок, получится это:





Параметры:





Формула получается такая:





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





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

Как говорится в законе о близости:





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

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





Создание строк в интерфейсе может показаться скучным в плане проектирования, так как требуется только дублирование элементов n-количество раз. Но с пользовательской стороны чтение строк может оказаться сложным, особенно если между ними нет различия. Таким образом использование чередования фона в строках будет очень полезным решением для пользователя, а вы окажетесь хорошим дизайнером :)

6 Забудьте про тень под текстом



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

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



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


7 Ширина текста


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

Если вы делаете сделали ширину меньше, но увидели большое пространство справа, как ниже:



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




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


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

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

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


9 Используйте цвета бренда в качестве акцентов


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

10 Выносите checkbox’ы



Когда вы создаете дизайн такого списка, выносите маркеры, нумерации за контейнер, так информацию воспринимать легче.
2018   интерфейсы