Дизайнеры из Сатурна, разработчики из Юпитера: или почему коммуникация имеет значение

1656559107 dizajnery iz saturna razrabotchiki iz yupitera ili pochemu kommunikacziya imeet

Содержание статьи

Альбинос Тоннина

Об эффекте «Но это выглядит иначе по спецификациям», наборам пользовательского интерфейса и другие вещи.

1*8fAGPEkr7UAqhNf0z3T5Zg

Две разные планеты, но по крайней мере они находятся на одной Солнечной Система! И на этом аналогия с планетами кончается.

Советы по аллергии

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

Дизайнеры, что-то мне подсказывает, что вы знаете о Design Systems и что вы можете докопаться до них 🙂 Если вы хотите читать больше, Натан Кертис много писал об этом. Я люблю и уважаю его работу над Design Systems.

Разработчикия собираюсь показать некоторый код в конце. Игровая площадка – это программа библиотеки React + CSS-in-JS (например, эмоций или стилизованных компонентов).

Типичный сценарий

Наш дизайнер создал серию хороших дизайнов, включая макет нашего Документы страница:

1*k0iI0xz1Qls-w1vT-PwWLw
https://www.sketchappsources.com/free-source/2576-ooto-productivity-dashboards-sketch-freebie-resource.html

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

Как же дизайнеры создали этот образ? Вероятно, они использовали a инструментарий проектирования. Очень популярен Sketch.

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

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

Не считая того, разработчики работают по другому.

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

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

Файл Visual Spec

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

Есть макеты, пробелы и цвета (и т.д.), которые необходимо задокументировать. Sketch или любой другой инструмент не знает многое о вашей текущей кодовой базе, структуре файлов или абстракции, то что может сделать Sketch? Измерить вещи. И вот что будет произведено:

1*t8K0NcmFdWBkCTalH92aVw

Проходит несколько дней…

Все готово, и дизайнеры впервые его видят:

1*Op-Fmt6HD_onew7zktxn9Q

Разочарованные дизайнеры, разочарованные разработчики.

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

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

Мой дедушка говорил:

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

Вам нужен хороший пользовательский интерфейс пользователя

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

Почему вам действительно нужен хороший пользовательский интерфейс пользователя

  • Ваше приложение становится все сложнее?
  • Много ли говорят дизайнеры о несоответствиях в приложении?
  • CI/CD? Быстро быстро?
  • Удаленные команды?
  • Несколько запутались с этими файлами CSS?
  • Начинаете заботиться о размере программы?
  • Является ли опыт пользователя основой вашей бизнес-модели?

Вам не нужно все это отмечать – даже одного может быть достаточно 🙂

Зачем требуется собственный набор инструментов пользовательского интерфейса

Система дизайна – это все Язык. Визуальный язык, язык дизайна интерфейса и т.д. Чтобы определить свое, нужно приложить много усилий: продукт, дизайн, инженерия, все эти отделы будут активно задействованы.

Много раз это просто не жизнеспособный вариант. Есть удивительные фреймворки, семантический пользовательский интерфейс, ant-design, Bootstrap, Material-UI. Все они приходят из своего рода предварительно изготовлены Язык и а проверенный в бою инструментарий пользовательского интерфейсаготов к использованию.

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

Воровать как художник

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

Посмотрите этот список систем проектирования: https://adele.uxpin.com:

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

Давайте сделаем один

Я покажу вам, как легко скачать собственную систему дизайна.

Я позвоню Ларри.

Давайте возьмем небольшую часть нашего макета и попытаемся построить его с нуля:

1*Ctk5K5_2twIWj8JBx2KrGw

Первый конечный результат

Следующий CodeSandbox является единственным приложением в мире, которое реализует Ларри:

Вы можете найти Ларри на GitHub: https://github.com/albinotonnina/larry

Документация

Эта часть является самой важной. Кто этим занимается, может, дизайнеры? Обычно да, но поверьте мне в этом: вы оба должны все равно участвовать в документировании своего языка. Здесь вы оба должны согласиться буквально со всем.

Давайте начнем определять некоторые действительно основные конвенции:

Цвета

Давайте сгенерируем палитру для нашего макета.

1*KqcQkVqdJBKSuS7loVd7Yw

Я предлагаю вам определить серию семантических имен из этих цветов, например:

headerText = японское индиго
параграфТекст = японское индиго
elementBackgroundDefault = Снег
elementBackgroundHover = BrilliantAzure
elementButton = светло-серый — альфа 60%

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

Интервал

Обратите особое внимание на расстояние. Без четкой стратегии по интервалам все может пойти не так.

Определите и согласуйте систему интервалов, например:

1*8vWeubT5wjJs-cOQHf7cNQ

Файл спецификации будет выглядеть так:

1*wopFDrMRdrdLlPv-XMO6Zw

Типография

Убедитесь, что размеры шрифта, весы шрифта, высота строк, поля, цвета в заголовках, абзацах и так далее совпадают. Назовите их именами, которые вам нравятся, например. HeaderHuge, HeaderLarge, HeaderTiny или правильно используйте семантические тэги (h1, h2, h3). Просто убедитесь, что вы согласны с этим.

Узоры

Что рифмуется с UI Toolkit? Библиотека узоров! Вам нужно начать заполнять свою библиотеку шаблонов. Вам нужно, чтобы компоненты, которые вам нужны, вели себя так, как вы договорились, чтобы вы могли составлять их так, как хотите, в любое время.

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

Добавить более специализированы новые частицынапример компонент Text или компонент Flex, который вы можете вообразить как компонент Box + некоторые утилиты flex.

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

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

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

1*YYrdHo0lKQrNkVZQ9W7D_g
Пример более сложного компонента пользовательского интерфейса

Вы понимаете суть?

Вы определили константы и вам нужно построить некоторые частицы.

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

Итак, дизайнеры и разработчики, сразу после статьи иди, сотвори своего собственного Ларри если у вас его нет!

код

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

Тема, определите константы

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

1*ctftgBakeNeruWAQdJArfw

Здесь нет ограничений для сложности/полноты, ведь это вопрос создания объекта JavaScript, просто представьте, что вы можете сделать!

1*RjRcYjLRD5haC8DDgQYKrw

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

Библиотеки CSS-in_JS – это удивительные инструменты, а стилизованная система делает их еще лучше. Это набор утилит для Design Systems и состоит из функций, принимаемых props как аргумент и возвращают объекты стиля, упрощая использование значений по теме и реагирование на стили между точками остановки.

Этот подход использует преимущества этих утилит, поэтому не стесняйтесь его оценивать.

Подключите тему к программе

Предоставьте эти константы своей программе: каждый компонент программы будет иметь доступ к константам темы.

1*6M6Q9zuKzNlcWPphfUI9ww

Создайте основные компоненты пользовательского интерфейса

1*1eIZb7yNcdppncpoj5fCLw
примитивный компонент Box UI

Более специализированные компоненты пользовательского интерфейса

Вот компонент Flex.

1*kd_s4cbWxxqcJTlC2N04fw

Вводите компоненты пользовательского интерфейса в свои файлы функций

1*qSxzGojmAS-vfB3LTkZctw

Пора что-то воспроизвести

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

1*5vObQKvSpUX9engeMaNX6A

Структура файлов

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

Ларри весь в «дизайн-система» папку. Здесь вы можете найти его константы и общие и многократные компоненты пользовательского интерфейса.

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

1*eN6vUZcqCJfmHMdVmKu5EQ

Вывод

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

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

1*LRjLAzWqaLiYl4N5DZH8Kg
https://dribbble.com/shots/2712522-Designer-vs-Developer

Спасибо, что читаете

Есть ли у вас положительный опыт, которым можно поделиться? Пожалуйста, сделайте это в комментариях.

Привет, меня зовут Альбино Тоннина, я инженер-программист, работающий в Лондоне, вы можете найти меня в Twitter, Github или Instagram или по всему городу.

1*ndz2zpAwq7qvQhhQI0ieLQ

Мои последние статьи

Как потерять работу в ИТ за 10 минут
Говоря о веб-макетах… представляем технику Magic Hat?✨

Следите за мной в Twitter!

Добавить комментарий

Ваш адрес email не будет опубликован.