Руководство по эксплуатации дизайн

набор из шести инструкций по безопасному использованию в экспериментах

Фиолетовый модный умный дом, инструкция по эксплуатации продукта в три раза

геометрический дизайн инструкции по эксплуатации медицинского изделия

зеленый высокотехнологичный продукт инструкция по эксплуатации

синий медицинский продукт инструкция по эксплуатации дизайн

простой дизайн инструкции по эксплуатации медицинского продукта

полный комплект дизайна инструкции по эксплуатации медицинского продукта

Брошюра с инструкциями по сетевой продукции Fashion Blue Интернет-компании

простой бизнес дизайн инструкции по эксплуатации медицинского продукта

мода градиент цвет высокотехнологичный продукт инструкция по эксплуатации

сине-зеленый медицинский продукт инструкция по эксплуатации

желтый высокотехнологичный продукт инструкция по эксплуатации дизайн набор

синий высокотехнологичный продукт инструкция по эксплуатации

табло инструкций по безопасности эскалатора самообслуживания торгового центра

листовка с инструкциями по работе

современный новогодний настольный календарь на 2021 год дизайн шаблона вектор для бесплатного использования

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

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

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

современный творческий новогодний настольный календарь на 2021 год дизайн шаблона вектор для бесплатного использования

пост в социальных сетях и шаблон баннера для совместного использования автомобилей

COVID 19 Инструкции правила Флюи

Рекламный плакат с нулевыми отходами по ограничению использования пластика

цикл переработки ресурсов с использованием иллюстративного пропагандистского баннера

переработка ресурсов и повторное использование баннеров

Плакат годовщины смерти героя с использованием текстуры бронзового барабана

Плакат с косметикой для эффективного использования воды на синем фоне

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

Плакат годовщины смерти короля-героя с использованием медных мотивов статуи короля-героя

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

брошюра о корпоративном бизнесе с шаблоном профиля компании для многоцелевого использования

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

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

элегантный дизайн шаблона сертификата для многоцелевого использования

простая и свежая инструкция по зачислению в детский сад trifold

Момент касания м письмо дизайн логотипа для многоцелевого использования

дизайн целевой страницы безопасных платежей в Интернете, использование кредитной карты для ноутбука

средний буква м шаблон дизайна логотипа для многоцелевого использования

Зеленый и желтый градиентный сертиент с значком, готов к использованию

Прием в школу моды инструкция по регистрации и обучению для первокурсников

Простой элегантный баннер по уходу за кожей с использованием натуральных биологических клеток

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

взаимное письмо m брак СМИ логотип для многоцелевого использования

корпоративный флаер для семинаров и конференций только для коммерческого использования cmyk moode для печати

мода европейские и американские первокурсники инструкции по регистрации образование прием в школу trifold

современное резюме сопроводительное письмо для корпоративного и коммерческого использования

Шаблон сертификата Golden и Blue Gradient готов к использованию

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

Интерфейс общается с пользователем и подталкивает его к целевым действиям. Плохой UI-дизайн снижает прибыль от продукта — потенциальные клиенты не будут пользоваться неудобным приложением. При этом «плохой» не значит ужасный по всем параметрам, как шуточные проекты из r/badUIbattles. Метрики уронит даже мелкое различие в оттенках зелёного на главном меню по сравнению с другими экранами.

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

Что такое руководство по стилю в UI/UX-дизайне?

У всех корпоративных блогов — у этого тоже! — есть редакторский стандарт. Этот документ описывает Tone of Voice и целевую аудиторию блога, что можно и нельзя писать в статьях, правила расстановки неразрывных пробелов и кавычек — то, что должно быть во всех публикациях. Руководства по стилю для блогов и других изданий помогают контролировать качество текстов и дополняют ТЗ для авторов.

Руководство по стилю UI — это «редстандарт» для интерфейса приложения. Оно закрепляет шаблоны дизайна в проекте — цветовые схемы, шрифты, иконки, кнопки и другие UI-элементы.

Зачем моему стартапу дизайн руководства по стилю UI?

Вернёмся к примеру из введения. Он показывает главную задачу руководства по стилю — обеспечить единообразие. Для дизайнеров UI-кит — это референс, без которого беспорядок в интерфейсе будет раздражать пользователей. С руководством по стилю фиолетовые кнопки будут одного и того же оттенка фиолетового на всех экранах приложения, а во всех заголовках будет использован шрифт Roboto.

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

Наконец, руководства по стилю ускоряют онбординг новых сотрудников. Допустим, UI/UX дизайн-компания, которая работает с несколькими проектами одновременно, наняла джуна. Новый сотрудник ничего не знает о шаблонах дизайна в этих проектах. Без готовых гайдов другие дизайнеры потратили бы много времени на объяснения нюансов. А руководство по стилю можно изучить один раз — и сразу начать работать.

Класс! А можно примеры?

Даже если вы не работаете в UI/UX дизайн-компании, вы должны заботиться об опыте пользователя. Мы собрали подборку из 5 примеров дизайна руководства по стилю UI — возьмите их в качестве референса. 

Spotify

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

Почему этот стайлгайд нам понравился? В своём руководстве по стилю Spotify применили интересный подход к словесным инструкциям. Обычно в гайдах для дизайнеров почти нет текста. Но Spotify собрал список хороших и плохих примеров с подробными комментариями. С одной стороны, гайд получился строгим и работает на обеспечение единообразия в дизайне. Но при этом он гибкий и позволяет сторонним разработчикам выбирать из нескольких опций.

Airbnb

Что это? Airbnb — это старый маркетплейс для краткосрочной аренды жилья. В 2018 году они переделали интерфейс приложения и сайта. Чтобы дизайн на всех платформах был одинаковым, Airbnb создали новую дизайн-систему. В неё вошёл новый дизайн руководства по стилю UI. Цель нового гайда — обеспечить единообразие на всех платформах и упростить командную работу.

Почему этот стайлгайд нам понравился? Гайд Airbnb хорошо иллюстрирует процесс дизайна руководства по стилю UI. Они начали с основной палитры и шрифтов, перешли к основным элементам интерфейса — и сейчас документ разросся до библиотеки веб-страниц и экранов для iOS и Android.

Scratch Track

Что это? Scratch Track — диктофон для музыкантов с простым аудиоредактором и чатом для групповой работы над набросками песен. Это минималистичное руководство по стилю для приложения на iOS сделал дизайнер Джастин Реннингер. Несмотря на размеры, в гайд вошли цветовые схемы, шрифты, правила типографии, и даже несколько экранов — окно чатов, списки и форма авторизации.

Почему этот стайлгайд нам понравился? Одностраничный гайд Джастина Реннингера показывает, что короткое руководство по стилю тоже может быть информативным. Гайды для дизайнеров должны быть понятными и информативными, но их размер зависит от сложности проекта. Не всем продуктам нужна библиотека из 50 экранов для браузеров, iOS и Android. Если ваше приложение — простой диктофон с групповым чатом,одной страницы с референсами достаточно.

Udacity

Что это? Udacity — это онлайн-школа с курсами по разработке, кибербезопасности и другим IT-направлениям. Их UI-кит сделал Брэд Уэйдж из UI/UX дизайн-компании Focus Lab. Udacity используют его для вебсайта и мобильных приложений.

Почему этот стайлгайд нам понравился? Он показался нам интересным по двум причинам. Во-первых, из-за цветов. Вы можете подумать, что их слишком много. Но на самом деле Udacity использует эту яркую палитру даже в футуристичных 3D-иллюстрациях на сайте — и таким образом сохраняет единообразие в дизайне.

А ещё вы изучаете гайд и по текстам понимаете, что Udacity — это онлайн-школа. Это не характерно для таких документов — но иногда разумно вместо «Lorem ipsum…» использовать тексты, которые тематически связаны с проектом.

Affirm для Android

Что это? Affirm — это финтех-приложение для оплаты любых покупок в рассрочку. Их руководство по стилю для приложения на Android подготовил Джон Фрэнсис. В гайде есть цветовые схемы, типография, несколько экранов и краткое описание принципов дизайна. 

Почему этот стайлгайд нам понравился? Гайд Affirm — ещё один пример того, как можно использовать словесные инструкции. Документ описывает роли элементов интерфейса и их характеристик. Некоторые утверждения избыточны — например, «кнопки нужны для обозначения целевого действия». Но есть и хорошие — например, о том, что цвета выстраивают иерархию UI-элементов.

UI-дизайн в Purrweb: наш подход к руководствам по стилю

IoT-приложение для умных холодильников или доставка продуктов для ресторанов — команда Purrweb знает, как важен интерфейс в любых приложениях. Далее расскажем о нашем подходе к дизайну руководства по стилю UI и о том, какую роль гайды для дизайнеров играют в разработке.

Но почему нам это важно?

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

Наш подход к дизайну руководства по стилю UI

Разработка руководств по стилю — это стандартная процедура. Мы делаем гайды для всех проектов по одному шаблону — так проще вводить новых сотрудников в рабочий процесс. Рассмотрим процесс сборки гайда на примере Grecha.pro — B2B-приложения доставки продуктов для ресторанов.

Концепт. Мы начинаем с 2–3 экранов будущего приложения и согласовываем дизайн с клиентом. Например, так выглядел дизайн-концепт Grecha.pro.

Основные элементы. После правок мы добавляем в гайд базовые UI-элементы, которые мы придумали ранее:

• типографию,
• цвета,
• кнопки,
• дропдауны,
• поля ввода,
• иконки.

На этом этапе важно включить в гайд все состояния элементов. Например, разные размеры кнопок и варианты полей ввода — с иконками, заголовками, и без них. Так, в гайд для Grecha.pro вошли 4 типа полей ввода и 12 типов кнопок.

Дополнительные элементы. На этом этапе мы дополняем руководства по стилю новыми элементами, которые мы придумали в ходе разработки. Например, мы решили добавить экран с календарём. Мы разрабатываем его по правилам гайда — и добавляем этот экран в руководство. Так мы стандартизируем этот элемент интерфейса и упрощаем будущие решения.

Одним из таких элементов в гайде Grecha.pro стали экраны заказа. На ранних этапах разработки мы ещё не продумали все сценарии, поэтому отложили дизайн этого элемента. В гайде эти экраны появились позже.

Purrweb заботится об опыте пользователя. MVP — не финальный релиз, но даже в этом случае нужно думать о дизайне. Мы разрабатываем руководства по стилю для каждого проекта, чтобы улучшить опыт пользователя и быстрее собирать приложения. Мы ведём проекты от идеи до загрузки в магазины приложений. Но вы всё ещё сможете выбрать оттенок серого для неактивных кнопок. 

Мы будем рады поработать с вами — расскажите о своих идеях в форме ниже.

Previous

Next

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---