Как создать руководство по стилю интерфейса

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

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

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

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

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

Начните с определения гайдлайна

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

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

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

Global Experience Language (GEL) BBC может служить в качестве блестящего примера краткого руководства по стилю.

Визуальное представление является критически важным для бренда. Можете ли вы представить Apple stores, оформленные как магазины Ikea? Или арки McDonald's в пурпурных тонах? Или шрифт Baskerville на сайте BBC?

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

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

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

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

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

Что из старого может нам пригодиться

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

Руководствам по стилю интерфейса стали уделять все больше внимания после выхода в 2011 году статьи Анны Дебенхэм для 24 Ways, она стала очень хорошим пособием для разработчиков интерфейсов и дизайнеров.

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

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

Руководство по стилю интерфейса (описание стилей):

• Обеспечивает некий общий контекст и поясняет задачи документа;
• Показывает различные элементы дизайна;
• Объясняет, как и почему эти элементы должны быть использованы, с точки зрения проектирования;
• Объясняет, когда и где уместно использовать эти элементы;
• Обеспечивает подробное пояснение каждого из элементов, если это необходимо.

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

Библиотеки шаблонов представляют игровые фишки, но не правила игры. В то время как описания стилей описывают эти правила:

Руководство GEL содержит информацию о настройках различных типов веб-страниц.

Примеры

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

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

Точно так же, как и Twitter Bootstrap на самом деле является обширной библиотекой шаблонов, а не руководством по стилю. (Хотя, в защиту Bootstrap стоит отметить, что он не может обеспечить нам контекст, так как контекст зависит от нашего собственного проекта.)

Еще один хороший пример руководства по стилю интерфейса - это Global Experience Language (GEL) BBC. Это экспансивная система, в основе которой заложен не просто визуальный стиль - выбор элементов зависит от описанной философии и продуманных принципов дизайна.

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

Библиотеки шаблонов

Библиотеки шаблонов служат для различных целей. Они должны отвечать на вопрос «Какие кнопки я могу выбрать?».

Тем не менее, такие вопросы, как "Какие кнопки следует использовать для моей конкретной ситуации?» или «Как я могу их использовать в данном контексте?» - обычно это задача для руководства по стилю:

В конечном счете, большая разница между ними кроется в той части документации, которая описывает когда, как, где и почему - и вы можете на основе этого пытаться воплотить все в PSD-файле Adobe Photoshop.

Руководство по стилю интерфейса: новый Photoshop

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

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

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

Как говорит дизайнер Энди Кларк: «Мы делаем сайты - не картинки сайтов».

Успокойтесь: отправлять в утиль Photoshop не нужно.

Просто вы можете придумать, как создать более адаптивный дизайн, как вы могли бы воплотить свои ответы на вопросы «почему», «как», «когда» и «где» в PSD-файле. Руководство по стилю поможет вам в этом, работаете ли вы в Photoshop или нет.

Практическое пособие: Создайте свое собственное руководство по стилю интерфейса

Если вы решили создавать библиотеку шаблонов, а не руководство по стилю, есть много инструментов, которые помогут вам в этом. Такие как Pattern Primer Джереми Кейта. KSS Кайла Нита еще один отличный вариант.

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

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

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

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

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

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

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

Например, вы можете создать документ в Markdown, подтянуть код CSS, разметить синтаксис и вывести результативный HTML-код. Затем его можно экспортировать в LaTeX, чтобы создать в нем PDF-файл, веб-страницу или документ Word - на выбор.

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

01. Установите Dexy

Если на вашей системе установлен Python, и вы можете вводить команды в эмуляторе терминала, то установка Dexy осуществляется очень просто. Запустите эмулятор терминала, введите следующую команду и нажмите клавишу ввод:

pip install dexy

Если у вас не установлен pip, можно ввести easy_install dexy. В зависимости от вашей системы, возможно, в начале строки вам нужно будет прописать sudo. Для установки Dexy вам будет предложено ввести пароль.

Теперь нужно указать Dexy создать папку проекта. Это делается через указание маршрута от папки, в которой по умолчанию устанавливается Dexy.

Введите следующую команду:

dexy gen --t dexy:default --d myproject

Она указывает Dexy использовать для создания папку шаблона по умолчанию (t), а также сгенерировать (gen) папку проекта (d). Если все прошло успешно, вы увидите следующее подтверждение того, что ваш проект был создан:

$ dexy gen --t dexy:default --d myproject

Все в порядке! Ваш новый проект Dexy был создан в директории «MyProject».

Перейдя в папку MyProject, вы увидите, что Dexy уже создал в ней некоторые файлы и папки. Удалите файл hello.txt и вместо него создайте в папке пустой файл index.html.

Это будет наш образец руководства по стилю интерфейса. Для удобства мы создаем его в формате HTML:

Само руководство по стилю в данном случае является HTML-документом с включением шаблонов Jinja, что позволяет автоматически его обновлять.

02. Создайте веб-макет

Чтобы продемонстрировать функционал Dexy, мы сделаем очень простой документ. Создайте в папке MyProject папку mockup и добавьте в нее HTML-файл mockup.html со следующим кодом:

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Макет</title><link rel="stylesheet"href="style.css" media="all"></head><body class="mockup"> <h1>Пример макета</h1>  <p>Здесь расположена кнопка</p> <!-- раздел "button" -->  <buttonclass="button">Кнопка</button>  <!-- раздел "link" --> <p>Здесь расположена ссылка: <a href="http://www.  netmagazine.com"class="button">Ссылка</a></p>  <!-- раздел "end" --></body></html>

Обратите внимание на специальные комментарии - они указывают Dexy, какие разделы HTML используются в нашем руководстве по стилю. Также обратите внимание на класс mockup в теле элемента. Позже он понадобится нам для свойств стилей.

Теперь представьте, что этот документ является HTML-макетом дизайна для веб-сайта или приложения. Он может содержать несколько страниц, таких как home.html, form.html и так далее.

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

Сохраните файл и создайте в той же папке файл style.css:

/*** @export "buttoncss" css */.mockup .button {  padding:.5em 1em;  font: 1em sans-serif;  text-decoration: none; background-color: steelblue;  color: white;  border:none;  border-radius: 5px;  box-shadow: 1px 1px 2pxsilver;}.mockup .button:hover {  cursor: pointer; background-color: olive;}

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

Просмотр Dexy показывает нам доступные сниппеты шаблонов Jinja, их можно скопировать в руководство по стилю.

Чтобы посмотреть, как выглядит ваш макет, откройте HTML-файл в браузере.

03. Задайте файл конфигурации Dexy

Чтобы создать действительно простое руководство по стилю интерфейса, описывающее стиль кнопки этого макета, перейдите в корневую папку Dexy (сейчас вы находитесь в папке myproject) и откройте файл dexy.yaml.

Этот YAML-файл является командным центром Dexy для вашего проекта.

Замените содержимое этого файла следующим кодом:

guide:
  - index.html|jinja:
    - sources
assets:
  - "*/*.html"
  - "*/*.css"
sources:
  - mockup/mockup.html|htmlsections
  - mockup/mockup.html|htmlsections|pyg:
    - pyg: { lexer: html }
  - mockup/style.css|idio

Этот код указывает Dexy искать руководство по стилю в файле index.html, содержащем шаблоны Jinja на основе Python, которые должны быть обработаны. В принципе, данный файл будет содержать код-заполнитель, который будет заменен кодом макета.

Для этого index.html пропускается через фильтр Jinja. Первая строка с источником означает, что index.html должен использовать все из исходного раздела расположенного ниже.

Раздел assets указывает Dexy просто скопировать файлы макета в будущую конечную папку. И, наконец, раздел источника захватывает HTML и CSS коды макета и пропускает их через фильтры Dexy.

Фильтры разбивают файлы на разделы, размеченные специальными комментариями, и применяют подсветку синтаксиса с помощью Pygments syntax highlighter Python.

При запуске Dexy вы можете разместить все эти фрагменты в вашем руководстве по стилю с помощью шаблонов Jinja. (Чуть позже вы поймете, как это делается):

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

04. Создайте свое руководство по стилю интерфейса

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

Введите следующий код в созданный ранее пустой файл index.html:

<!DOCTYPE html><html lang="en">  <head>  <metacharset="utf-8">  <title>Руководство по стилю интерфейса</title>  <stylemedia="all">    body {      font-family: sans-serif;      padding: 2em 10%;      line-height: 1.3;    }    p { color: dimgray; }    code { color: black; }  </style><!-- Обратите внимание, что мы импортируем CSS-код макета сюда и нс уже есть область названная для этого стиля, класс .mockup -->  <link rel="stylesheet"href="mockup/style.css">  <style>    {{ pygments['pastie.css'] }}  </style>  </head>  <body> <h1> Руководство по стилю интерфейса </h1>  <p>Это пример того, как вы можете создать очень простой образец руководства по стилю интерфейса. Dexy предоставляет для этого огромное количество возможностей, в то же время он использует различные фильтры. Это общий, дающий некоторое понятие пример для того, чтобы вы могли начать работу.</p>  <h2>Кнопка</h2>  <p>Эта кнопка может быть использована в сочетании с формой, также ее следует применять к ссылкам <em>appear</em> как непосредственно кнопку. Така выглядит кнопка: </p>  <!-- Класс "mockup" позволяет применять стили макета. -->  <div class="mockup">    {{ d['mockup/mockup.html|htmlsections'] ['button'] }}  </div>  <h3> HTML-код кнопки</h3>  <p> HTML-код кнопки может варьироваться, однако чтобы она выводилась корректно, в коде должен присутствовать класс<code>button</code> :</p>  {{ d['mockup/mockup.html|htmlsections|pyg'] ['button'] }}  <p>Ссылки также могут быть оформлены в вилде кнопок. Это стандартные ссылки, которые содержат класс <code>button</code>:</p>  {{ d['mockup/mockup.html|htmlsections|pyg'] ['link'] }}  <h3> CSS-код кнопок</h3>  <p>CSS-код кнопок и ссылок-кнопок очень прост - поскольку он просто привязан к классу <code>button</code> , аналогичный CSS-код может быть использован и для кнопок, и для ссылок-кнопок.</p>  {{ d['mockup/style.css|idio']['buttoncss'] }}  </body></html>

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

Эти фрагменты - они описаны в файле конфигурации YAML - станут доступны при запуске Dexy. В данном случае, мы описываем и конечный HTML-код, и код с подсветкой синтаксиса для кнопки.

Сохраните этот файл. Теперь запустите Dexy, для этого просто вводим команду dexy в директории myproject и нажимаем Enter.

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

finished in 0.2339

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

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

Остановить сервер Dexy вы можете, нажав в терминале Ctrl + C. При запуске dexy viewer стартует сервер, который выводит, исходя из конфигурации Dexy, страницу со всеми шаблонами Jinja, доступными для использования в коде вашего руководства по стилю.

Как и в случае с dexy serve, останавливается сервер с помощью сочетания клавиш Ctrl + C:

Поскольку готовое руководство по стилю является документом HTML, с помощью CSS вы можете задать его стили так, как вам будет нужно. Dexy является независимым от конкретного языка программирования, поэтому может нормально взаимодействовать и с другими языками.

Внесение изменений

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

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

Попробуйте вот что: откройте файл style.css вашего макета и измените цвет фона кнопки со стального на оранжевый. Затем перейдите в каталог проекта и в терминале запустите dexy -r. Эта команда перегружает Dexy.

Запустите dexy serve и перейдите по предлагаемому URL-адресу в браузере. Кнопка в нашем примере теперь имеет оранжевый цвет, и код CSS также был обновлен.

Когда вы вносите много изменений в CSS и HTML коды ваших макетов (Dexy не зависит от языка, так что работает и с другими языками), обновление руководства по стилю интерфейса осуществляется намного проще.

Найдите свой собственный путь

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

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

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

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