Style Guide
10 Лучших примеров и шаблонов руководства по стилю пользовательского интерфейса для улучшения пользовательского интерфейса
31 июля 2020 года 1519923
В наши дни заблаговременное создание эффективных, но унифицированных руководств по стилю пользовательского интерфейса имеет важное значение для согласованности продукта и бренда. Однако, будучи новичком в разработке пользовательского интерфейса, действительно ли вы знаете, что это такое, как они могут помочь и как вы можете легко их создать?
Если нет, то здесь мы обсудим основы руководств по стилю пользовательского интерфейса и подробно расскажем вам о том, что это такое и как его легко создать. Лучшие примеры руководств по стилю пользовательского интерфейса, шаблоны и генераторы также описаны, чтобы помочь вам быстро создавать лучшие руководства по стилю и UX продукта.
Что такое руководство по стилю пользовательского интерфейса?
Руководства по стилю пользовательского интерфейса - это целостный набор стандартов дизайна для элементов пользовательского интерфейса и взаимодействий, которые встречаются в разных продуктах для веб-приложений / приложений, обеспечивая согласованность продукта в разных группах разработчиков, компаниях и брендах.
Часто они представляют собой серию руководств или визуальных ссылок, помогающих дизайнерам (даже в разных часовых поясах) определять или настраивать типографику, элементы пользовательского интерфейса и взаимодействия одинаковым образом все время.
Они необходимы дизайнерам и группам разработчиков, чтобы постоянно придерживаться одного и того же стиля визуального дизайна.
Зачем вам могут понадобиться руководства по стилю пользовательского интерфейса?
Большинство проектных групп или компаний создают руководство по стилю пользовательского интерфейса, прежде чем приступать к созданию веб-продукта или приложения. Почему? Вот основные преимущества, которые руководства по стилю пользовательского интерфейса могут принести вам и вашей команде:
Это способствует маркетингу и продажам с постоянными брендами.
Это помогает дизайнерам и разработчикам лучше общаться и сотрудничать.
Это помогает создать согласованный пользовательский интерфейс и пользовательский интерфейс во всех ваших продуктах.
Это упрощает обучение для любых новых членов команды, клиентов или заинтересованных сторон.
Его легко обновлять на основе новых стандартов дизайна и тенденций на протяжении всего жизненного цикла продукта.
Что должно содержать руководство по стилю пользовательского интерфейса?
Руководства по стилю пользовательского интерфейса - это полезный инструмент проектирования и разработки, который может помочь дизайнерам и разработчикам работать вместе на одном визуальном языке. Итак, хорошее руководство по стилю пользовательского интерфейса должно включать в себя много вещей, таких как:
Основные компоненты пользовательского интерфейса: типографика, макеты, цветовые палитры, кнопки, шрифты, логотипы, иконки, оповещения, загрузчики и слайдеры и т. Д.
Инструкции по дизайну: Должны быть приведены необходимые инструкции, в которых четко объясняются основные рекомендации, используемые форматы файлов, тон и голос дизайна, а также другие детали, такие как инструкции по размещению и размещению, примечания по дизайну и многое другое.
Руководство по стилю пользовательского интерфейса против системы проектирования
Изучая термин "Руководство по стилю пользовательского интерфейса", вы можете легко спутать его с другим термином "система проектирования". Знаете ли вы разницу между руководством по стилю пользовательского интерфейса и системой проектирования? Если нет, то вот подробности:
Система проектирования - это полный набор стандартов проектирования, документации и принципов, помогающих как разработчикам, так и дизайнерам с легкостью создавать согласованные продукты и увеличивать продажи. Он содержит все, что связано с согласованностью продукта и бренда, например, руководства по стилю, библиотеки компонентов, технические спецификации, шаблоны проектирования и т. Д. Это высокий уровень абстракции языка дизайна.
Руководство по стилю - это небольшая часть системы дизайна, которая состоит из набора правил, касающихся брендинга и визуального стиля продуктов. Это низкий уровень абстракции языка дизайна.
10 лучших примеров и шаблонов руководства по стилю пользовательского интерфейса
Чтобы помочь вам лучше понять руководства по стилю пользовательского интерфейса и быстрее создавать свои собственные руководства по стилю, мы перечислили 10 лучших примеров и шаблонов руководств по стилю пользовательского интерфейса:
1. Пример руководства по стилю пользовательского интерфейса Dusk Network
Этот пример руководства по стилю пользовательского интерфейса представляет собой полный набор руководств по стилю пользовательского интерфейса, специально созданных для Dusk Network. Включены многие рекомендации по элементам, такие как кнопки, значки, интервалы между элементами, государства-члены, графика и так далее. Это идеальный пример комплексного стиля пользовательского интерфейса для вашего веб-сайта или проектов приложений.
2. Пример руководства по стилю пользовательского интерфейса веб-сайта
Руководство по стилю пользовательского интерфейса веб-сайта - это пример веб-сайта, созданный для веб-сайта агентства для мальчиков и девочек, в котором подробно описываются основные цвета, шрифты, кнопки, списки, формы и другие элементы.
3. Пример руководства по стилю пользовательского интерфейса Jeca
Пример руководства по стилю пользовательского интерфейса Jeca - это типичный пример руководства по стилю пользовательского интерфейса, созданный для веб-сайта Классической академии Джонатана Эдвардса. Дизайнеры использовали современную типографику и элементы пользовательского интерфейса, чтобы контент сайта был легко читаемым и быстро усваиваемым посетителями. Это хороший пример руководства по стилю пользовательского интерфейса для веб-сайта онлайн-школы или университета.
4. Пример руководства по стилю пользовательского интерфейса NGUIX
NGUIX UI Style Guide Example - это унифицированное руководство по стилю, созданное для улучшения сотрудничества между дизайнерами и разработчиками. В этом руководстве по стилю определены многие элементы, включая кнопки, флажки, средства выбора цвета, метки, входные данные, средства выбора даты и многое другое.
5. Пример руководства по стилю пользовательского интерфейса для панелей мониторинга
Этот пример руководства по стилю создан для сложной информационной панели. Определены многие элементы для визуализации данных, такие как круговые диаграммы, линейные диаграммы, числа и многое другое. Это идеальный пример того, как создать руководство по стилю пользовательского интерфейса для веб-сайтов / приложений, в которых необходимо четко визуализировать данные.
6. Бесплатный креативный шаблон руководства по стилю пользовательского интерфейса Adobe XD
Руководство по стилю пользовательского интерфейса Adobe XD - это творческая халява, которой поделился дизайнер пользовательского интерфейса Мехеди Хасан. Он включает в себя рекомендации по шрифтам, элементам пользовательского интерфейса, цветам, сеткам и многому другому. Это хороший инструмент для дизайнеров для создания веб-сайта / приложения с яркими цветами.
7. Бесплатный шаблон руководства по стилю пользовательского интерфейса Sketch
Бесплатный шаблон руководства по стилю пользовательского интерфейса Sketch - это бесплатный шаблон руководства по стилю, созданный с помощью приложения Sketch и содержащий рекомендации по цветам страниц, кнопкам, шрифтам, выпадающему списку, сообщениям о вводе и ошибках и т. Д.
8. UIDE Style Guide Template Freebie
Этот бесплатный шаблон совместим с приложением Sketch и включает в себя полный набор элементов пользовательского интерфейса, таких как цвета, шрифты, типографика, флажки, ползунки, таблицы, кнопки, ввод текста и многое другое. Вы можете свободно скачать и использовать его для своего следующего личного проекта или проекта электронной коммерции.
9. Бесплатный шаблон руководства по стилю пользовательского интерфейса Eggplore Sketch
Баклажаны, которыми поделились Стивен и Гахуи, снабжены множеством символов и элементов многократного использования. Он был создан в Sketch и может очень помочь вам с легкостью создать собственное руководство по стилю.
10. Бесплатный шаблон руководства по стилю пользовательского интерфейса для Adobe XD
Этот бесплатный шаблон Adobe XD создан для проектов веб-сайтов и охватывает веб-элементы и их различные состояния. Доступны два варианта: светлый и темный.
Как вы можете создавать руководства по стилю дизайна пользовательского интерфейса?
Вам нужно создавать руководства по стилю пользовательского интерфейса с нуля самостоятельно? Вот 9 простых шагов, которым вы можете следовать:
Шаг 1. Начните с общего визуального стиля
Привлекательный, но интригующий визуальный стиль быстро привлекает пользователей и легко выделяет ваш сайт / приложение на фоне других. Итак, прежде чем вы начнете создавать руководство по стилю с нуля, первое, что вы должны сделать, это определить общий визуальный стиль.
В наши дни можно использовать множество стилей визуального дизайна, таких как модный минималистичный стиль дизайна, брутальный стиль дизайна, стиль дизайна иллюстраций, стиль плоского дизайна, стиль 3D-дизайна и т.д. В случае возникновения каких-либо разногласий лучше обсудить их со всей вашей продуктовой командой, а не только с одним или двумя членами.
Шаг 2. Определите рекомендации по логотипу
Ваш логотип - один из самых важных элементов, который может помочь в создании вашего бренда и беспрепятственном продвижении вашей продукции. Итак, в ваше руководство по стилю должны быть включены рекомендации по логотипу, такие как его размеры, цвета, пробелы вокруг него, "можно и нельзя" и т.д. Также приведите несколько примеров, чтобы всем было понятно.
Шаг 3. Выберите макет и типографику
Чтобы улучшить имидж вашего бренда и удобство использования, вы должны четко определить макет и типографику в руководстве по стилю. Следует включить многие аспекты, такие как способ размещения изображений и содержимого, размер основных заголовков, основного текста и кавычек, интервал между заголовками и основным текстом, цвета типографики и цвета фона и т. Д.
Вы не должны забывать о рекомендациях по сетке страницы, если планируете размещать содержимое страницы с помощью сеток.
Шаг 4. Не забудьте элементы пользовательского интерфейса
Элементы пользовательского интерфейса являются одной из наиболее важных частей руководства по стилю пользовательского интерфейса. Многие часто используемые элементы, такие как кнопки, значки, навигация, формы, уведомления и т.д., должны быть определены с их свойствами и правилами, чтобы помочь создать согласованность продукта.
Шаг 5. Выберите тексты и шрифты
Текст и шрифты - большая часть вашего пользовательского интерфейса. Чтобы создать лучший и более удобный пользовательский интерфейс, вы должны включить все шрифты и объяснить, как их использовать, в свое руководство по стилю.
Шаг 6. Выберите основные цветовые палитры
Цветовые палитры определяют общий визуальный эффект веб-сайта / приложения и эффективно вызывают эмоции пользователей. Итак, вы не должны забывать включать цветовые палитры, такие как основные и дополнительные цвета, типографское оформление на цветном фоне, основные цвета для подсветки, цвета ссылок и кнопок и т. Д.
Шаг 7. Включите рекомендации по визуализации изображений и данных
Изображения и данные являются неотъемлемой частью дизайна страницы. Ваше руководство по стилю должно включать рекомендации по визуализации изображений и данных. Например, необходимо создать некоторые рекомендации для всех задействованных изображений и форм, таких как фотографии, иллюстрации, диаграммы, инфографика, диаграммы и многое другое.
Шаг 8. Определите рекомендации для ошибок, предупреждений и всплывающих подсказок
Сообщения об ошибках, предупреждения и всплывающие подсказки являются важными методами для разработчиков, помогающими направлять пользователей и улучшать пользовательский интерфейс. В своем руководстве по стилю вы должны определить рекомендации для этих элементов для лучшей согласованности продукта.
Шаг 9. Другое
В ваше руководство по стилю должны быть включены правила для многих других элементов пользовательского интерфейса и взаимодействий, таких как пробелы, тон дизайна веб-сайта, голос и так далее.
Лучшие генераторы руководств по стилю пользовательского интерфейса, которые вы не можете пропустить
Вместо того, чтобы создавать все с нуля самостоятельно, вы можете использовать генераторы руководств по стилю пользовательского интерфейса, чтобы создать их с легкостью. Вот 4 лучших генератора руководств по стилю пользовательского интерфейса, которые могут ускорить процесс проектирования:
1. Стилизуйте меня
Stylify Me - это простая онлайн-платформа для дизайна, которая поможет вам легко собирать руководства по стилю пользовательского интерфейса с существующего веб-сайта, введя ссылку на веб-сайт. Многие элементы, такие как цвета, шрифты, типографика, размер, интервал и т.д., можно просматривать и загружать.
2. Производитель
Fabricator - это еще одна онлайн-платформа для разработки, которая предоставляет пользователям способы создания руководства по стилю из вашего собственного кода инструментария пользовательского интерфейса. Это также поможет вам создать свой собственный инструментарий пользовательского интерфейса и организовать свою систему проектирования так, как вам нужно.
3. Aigis
Aigis позволяет быстро создавать руководства по стилю из любого текстового файла. Многие форматы текстовых файлов, такие как .css, .scss, md, .styl и т.д., совместимы с ним.
4. Mockplus
Mockplus - это онлайн-платформа для проектирования, которая предлагает пользователям подходы к сбору и эффективному управлению руководствами по стилю пользовательского интерфейса, компонентами и даже системами проектирования в режиме онлайн. Также предоставляется простой плагин, который поможет им с легкостью собирать и повторно использовать руководства по стилю пользовательского интерфейса и системы проектирования из Sketch.
Являясь профессиональной онлайн-платформой для проектирования, Mockplus объединяет весь ваш рабочий процесс и предлагает полный набор функций, связанных с проектированием, прототипированием, совместной работой, комментариями, обсуждениями, передачей дизайна и т.д.
Сколько времени требуется для создания руководства по стилю?
Эффективное руководство по стилю пользовательского интерфейса включает в себя многие аспекты веб-сайта / приложений и должно быть завершено с помощью всей команды разработчиков. Таким образом, обычно на создание базового руководства по стилю пользовательского интерфейса уходит одна или две недели, в зависимости от области применения и количества раундов редактирования. Если вы и ваша команда выбрали удобный генератор руководств по стилю пользовательского интерфейса, вы также можете сэкономить много времени.
Краткие сведения
Хорошее руководство по стилю может не только помочь дизайнерам и разработчикам лучше общаться и сотрудничать, но и помочь им легко создавать более согласованные продукты.
Мы надеемся, что эти основы руководства по стилю пользовательского интерфейса, примеры, шаблоны и генераторы помогут вам узнать о них больше и с легкостью создавать свои собственные руководства по стилю.
Last updated
