fbpx
Как стать организованнее в процессе UI дизайна?

Как стать организованнее в процессе UI дизайна?

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

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

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

Конечно, основная идея визуальных коллекций и их применение в процессе дизайна далеко не нова. Я вдохновился Material Design, переменными SCSS,Macaw, Origami, Atomic Design и разными библиотеками паттернов.

Мои намерения чисты

Работая над более крупными проектами, я по уши насытился трудностями дизайн-процесса в Sketch из-за недостатка структурированности. И хотя последние обновления (такие, как вложенные символы) и плагин стилей в Craft помогли в нужном направлении, все равно я не достиг совершенного рабочего процесса. Чтобы вы лучше поняли мою позицию, вот несколько примеров:

Четкий обзор переменных

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

1-ybz4zKzJkKCIS1VnAxv4_w
Что за бардак?

Группировка стилей

Какие части дизайна связаны с конкретными изменениями в переменных? Я хочу определить, какой шрифт для каких случаев подходит лучше – sans-serif для стилей интерфейса и для более крупных текстов, чтобы читабельность была на хорошем уровне. В другом примере: есть 2 шрифта для стилей типографики – одна версия для светлых фонов и одна – для темных.

1-GAT5kxP6qFlt2TN2a62H4g
Эм… какой шрифт и для чего я использую?

Парование переменных

Я хочу, чтобы все мои размеры шрифта 16px типа Karla имели высоту 1.2, вне зависимости от того, абзац это или заметка, описание элемента или цитата.

1-JzorSfy3HQUHD8vGBReniw
Попытка соблюдения одинакового сочетания жирности шрифта и высоты строк – это мучение.

Изменение только одной переменной

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

1-xu_fPo1nzpRmNBDFuBlo8A
Но я просто хотел изменить шрифт заголовка…

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

Основные принципы

Все есть объект

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

1-WN9WWdfij0e__yevOQ5h9Q

Параметры всего

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

1-NKtW53ya82qSuPj8qzyZrw

Наследование параметров

Тут начинается веселье. Вы создаете базовые строительные блоки, переменные свотчей, т.е. $font-size-s, $grey-500, $border-radius-s или $sans-serif.
Все это вместе формирует базовую строительную библиотеку переменных, которые вы комбинируете для создания визуальной иерархии.

1-GqMCJxuMmTkFdELJF_Od8A
Некоторые из базовых строительных блоков

Затем вы бы могли создать переменные некоторых категорий, скажем, $font-size-main, $color-link-secondary, $border-radius-secondary или $font-headlines. Они работают как посредники между базовыми свотчами и вашими объектами. Присвойте эти переменные разным случаям и ситуациям, точно как в SCSS.

Наконец, вы применяете эти наследованные переменные на объектах – кнопках, абзацах, заголовках, названиях элементов списков, описаниях элементов списков, цитатах и т.д… И вуаля:

1-yv5Hp8FvCoHLn4g0_wMD4w

Будьте готовы ко всему

Вы можете создать дизайн всевозможного типа (основной, дополнительный и т.д.) или состояния (нормальное, неактивное, ховер для кнопки) объекта. Это требует усилий, но не так много времени. Зато вы будете полностью готовы. Возможно, потом вы скажете себе “спасибо”.

1-MGBn2ld1E204VogQsH7sZQ
Можно разработать дизайн всевозможных типов объекта

Как этим пользоваться во время дизайна

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

Например, стили нельзя наследовать в Sketch как в SCSS. Поэтому я создаю визуальные стили для каждой визуальной комбинации.

1-2EkLpcMGUUpDznxeWzlhsA
Я создаю визуальные стили для каждой используемой мной визуальной комбинации.

Чтобы изменить только один размер описаний элементов списка, я неизбежно меняю все объекты, которые используют тот же текстовый стиль, даже если мне нужно изменить всего один отдельный элемент. Мне приходится менять все объекты, в которых используется font-size-s.

Представьте себе узловой редактор (что-то вроде Mindnode), в котором вы можете видеть и управлять визуальными связями ваших проектов. Можно было бы считывать файлы SCSS и подключать к Sketch для обновления общих стилей.

1-OGZHqea-Rmlvq4RWm-Lj2w
Такой узловой редактор мог бы помочь наладить визуальную иерархию.

Примеры использования

1-E0MGQfWdqEvnqt_xKBE9vg

Шрифты

У вас может быть шрифт $sans-serif для вашего UI и заголовков, $serif для более длинных текстов и $display для особых случаев.

1-fuM_NM3OvbFm73IWk3BZFg

1-vfPPEgikRDpcO-r--wC69w

Размеры шрифта и высоты строк

В этом примере высоты строк спарованы с конкретными шрифтами конкретного размера (Например, каждый шрифт 12 px Karla должен иметь высоту строки 1.8, а 14px должен иметь высоту 1.75, 16px – 1.6 и т.д.). Вы можете думать о них по-отдельности, но они неизбежно связаны. И помните – более крупным размерам шрифта нужны меньшие высоты строк, потому что они смотрятся пропорционально больше. Вы также могли бы дифференцировать объекты на объекты с высотой строки 1 и объекты со специфичной высотой строки (не равной 1), чтобы соответствующим образом настроить поля.

1-pPM4-z5425nzyVaaPssphg

Цвета

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

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

Зачем думать подобным образом?

1-H6vPIYCCH-8z2j0RKCnrqw

Проще в работе

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

1-5ABd_E4mMOnaUqdMJ66k3g

Лучшее постоянство

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

1-4_xv6AQgUAmufr6DcMBPKQ

Проще для понимания

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

Файл-пример

1-86XLxnLKWTSWdtLtAM1TYg

Есть масса вариантов создания визуальной иерархии. Вы можете скачать файл Sketch с некоторыми моими примерами (вам понадобится Karlafont, который можно скачать с Google Fonts). Развлекайтесь!

В качестве заключения: как мы можем ломать наши дизайн-инструменты, чтобы они полностью поддерживали этот подход? Каков ваш подход при создании визуальной системы? Очень интересно прочитать ваши мысли на эту тему. Делитесь ими в комментариях!

2 Комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Похожие статьи
UX идея для Uber Бразилия
Подробнее

UX идея для Uber Бразилия

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

Лучшие статьи, раз в неделю, с доставкой на почту

Total
0
Share