選擇語言Bahasa Indonesia (Bahasa Indonesia)Bahasa Malaysia (Malay)Čeština (Czech)Dansk (Danish)Deutsch (German)English (English)Español (Spanish)繁體中文 (Chinese (Traditional))Français (French)한국어 (Korean)Italiano (Italian)简体中文 (Chinese (Simplified))Nederlands (Dutch)日本語 (Japanese)Norsk (Norwegian)Polski (Polish)Português (Portuguese)Română (Romanian)Русский (Russian)Svenska (Swedish)Tagalog (Tagalog)ภาษาไทย (Thai)Türkçe (Turkish)العربية (Arabic)
عفواً، لم نتمكن من العثور على الصفحة التي تبحث عنها. برجاء المحاولة مرة أخرى للصفحة السابقة أو الانتقال لـمركز المساعدة للمزيد من المعلومات
الإنتقال لموجزك الرئيسيOmlouváme se, nemůžeme najít stránku, kterou hledáte. Zkuste se vrátit zpátky na předchozí stránku, nebo se podívejte do našeho Centra nápovědy pro více informací
Přejít do informačního kanáluVi kan desværre ikke finde den side, du leder efter.
Gå tilbage til den forrige side, eller besøg Hjælp for at få flere oplysninger Gå til dit feedDie gewünschte Seite konnte leider nicht gefunden werden. Versuchen Sie, zur vorherigen Seite zurückzukehren, oder besuchen Sie unseren Hilfebereich, um mehr zu erfahren.
Zu Ihrem FeedUh oh, we can’t seem to find the page you’re looking for. Try going back to the previous page or see our Help Center for more information
Go to your feedVaya, parece que no podemos encontrar la página que buscas. Intenta volver a la página anterior o visita nuestro Centro de ayuda para más información.
Ir a tu feedNous ne trouvons pas la page que vous recherchez. Essayez de retourner à la page précédente ou consultez notre assistance clientèle pour plus d’informations
Ouvrez votre filMaaf, sepertinya kami tidak dapat menemukan halaman yang Anda cari.
Coba kembali ke halaman sebelumnya atau lihat Pusat Bantuan kami untuk informasi lebih lanjut Buka feed AndaNon abbiamo trovato la pagina che stai cercando. Prova a tornare alla pagina precedente o visita il nostro Centro assistenza per saperne di più.
Vai al tuo feed申し訳ありません。お探しのページが見つかりません。前のページに戻るか、ヘルプセンターで詳細をご確認ください
フィードに移動원하시는 페이지를 찾을 수 없습니다. 이전 페이지로 돌아가거나 고객센터에서 자세히 알아보세요.
홈으로 가기Harap maaf, kami tidak dapat menemui laman yang ingin anda cari. Cuba kembali ke laman sebelumnya atau lihat Pusat Bantuan kami untuk maklumat lanjut
Pergi ke suapanDe pagina waar u naar op zoek bent, kan niet worden gevonden. Probeer terug te gaan naar de vorige pagina of bezoek het Help Center voor meer informatie
Ga naar uw feedVi finner ikke siden du leter etter.
Gå tilbake til forrige side eller besøk vår brukerstøtte for mer informasjon Gå til din feedNie możemy znaleźć strony, której szukasz. Spróbuj wrócić do poprzedniej strony lub nasze Centrum pomocy, aby uzyskać więcej informacji
Przejdź do swojego kanałuA página que você está procurando não foi encontrada. Volte para a página anterior ou visite nossa Central de Ajuda para mais informações
Voltar para seu feedNe pare rău, nu găsim pagina pe care o căutaţi. Reveniţi la pagina anterioară sau consultaţi Centrul nostru de asistenţă pentru mai multe informaţii
Accesaţi fluxul dvs.Не удаётся найти искомую вами страницу. Вернитесь на предыдущую страницу или посетите страницу нашего справочного центра для получения дополнительной информации.
Перейти к лентеSidan du letar efter hittades inte.
Gå tillbaka till föregående sida eller besök vårt Hjälpcenter för mer information Gå till ditt nyhetsflödeขออภัย ดูเหมือนเราไม่พบหน้าที่คุณกำลังมองหาอยู่ ลองกลับไปที่หน้าเพจก่อน หรือดู ศูนย์ความช่วยเหลือ ของเราสำหรับข้อมูลเพิ่มเติม
ไปที่ฟีดของคุณNaku, mukhang hindi namin mahanap ang pahina na hinahanap mo. Subukang bumalik sa nakaraang pahina o tingnan ang aming Help Center para sa higit pang impormasyon
Pumunta sa iyong feedAradığınız sayfa bulunamadı. Önceki sayfaya geri dönün veya daha fazla bilgi için Yardım Merkezimizi görüntüleyin
Haber akışınıza gidin抱歉，无法找到页面。试试返回到前一页，或前往帮助中心了解更多信息
前往动态汇总我們好像找不到該頁面。請回到上一頁或前往說明中心來進一步瞭解
前往首頁動態дизайнов, тем, шаблонов и графических элементов, загружаемых на Dribbble,
Посмотреть брендбук
Брендбук
Посмотреть рекомендации
Рекомендации
Посмотреть рекомендации по иллюстрациям для Truebill
Инструкции по иллюстрации для Truebill
Посмотреть целевую страницу Бренды
Целевая страница Branda
Пользовательский интерфейс View Material — рекомендации по визуальной идентификации
Материал пользовательского интерфейса — рекомендации по визуальной идентификации
Посмотреть брендбук Postlight
Брендбук Postlight
Посмотреть компоненты дизайн-системы 🔥
Компоненты дизайн-системы 🔥
Посмотреть ODS — Система дизайна Odama 🔥
ODS — система дизайна Odama 🔥
Просмотр MVSG
Просмотр CVMaker — Рекомендации
CVMaker — Рекомендации
Посмотреть 🌐 Система дизайна
🌐 Дизайн-система
Посмотреть брендбук UpCrunch
Брендбук UpCrunch
Просмотреть логотип Cyexult — Руководство по бренду
Cyexult — логотип руководства по бренду
Посмотреть принципы дизайна разворота
Принципы проектирования разворота
Посмотреть руководство по бренду MyTraffic
Руководство по бренду MyTraffic
Посмотреть руководство по стилю S-Case
Руководство по стилю S-Case
Посмотреть брендбук DealProm
Брендбук «ДилПром»
Посмотреть руководство бренда Kretya 🔥
Руководство бренда Kretya 🔥
Просмотр компонентов пользовательского интерфейса
Компоненты пользовательского интерфейса
Посмотреть брендинг Bunchup
Брендинг Bunchup
Просмотр стога сена — рекомендации
Стог сена – направляющие
Посмотреть Revenew — Руководство по фирменному стилю
Revenew — Руководство по фирменному стилю
Посмотреть брендинг SafePal
Брендинг SafePal
Посмотреть дизайн логотипа Twistail
Дизайн логотипа Twistail
Зарегистрируйтесь, чтобы продолжить или войдите в систему
Загрузка еще…
Создание руководства по стилю пользовательского интерфейса для лучшего UX
Прослушать аудиоверсию этой статьи
В 1976 году Джонни Кэш выпустил песню One Piece at a Time , в которой рассказывается история рабочего автомобильного завода из Детройта, который двадцать лет собирает детали Cadillac, украденные при сборке.
линия.
К сожалению, когда рабочий начинает собирать свой пиратский Cadillac, он обнаруживает, что многие детали несовместимы, поскольку ключевые конструктивные особенности изменились за эти годы. Приложив немного изобретательности, кастомный автомобиль собирается вместе, но это неприглядная мешанина, которая вызывает насмешки, где бы она ни находилась.
Задняя часть тоже выглядела довольно забавно
Но мы собрали ее, и когда мы прошли
Ну, тогда мы заметили, что у нас был только один хвостовой плавник.
Дизайнеры и разработчики современных цифровых технологий сталкиваются с аналогичной проблемой. Течение времени — грозный враг, способный нанести ущерб преемственности цифровых продуктов. Со временем члены команды приходят и уходят, тенденции развиваются, а функции меняются. Кроме того, быстрый темп нашего современного цифрового ландшафта означает, что инновации в продуктах происходят за кварталы, а не за годы.
Если у бизнес-группы или команды дизайнеров нет общей записи, которая документирует предполагаемый внешний вид продукта, возникнут визуальные и эмпирические несоответствия, пользователи будут разочарованы, а репутация бренда пострадает.
Руководства по стилю пользовательского интерфейса — это инструмент проектирования и разработки, который обеспечивает согласованность пользовательского интерфейса и взаимодействия с цифровым продуктом. По своей сути они:
- Записывают все элементы дизайна и взаимодействия, происходящие в продукте
- Перечислите важные компоненты пользовательского интерфейса, такие как кнопки, типографика, цвет, меню навигации и т. д.
- Документируйте важные компоненты UX, такие как состояния наведения, выпадающие заливки, анимацию и т. д.
- Содержат живые элементы и фрагменты кода, на которые разработчики могут ссылаться и использовать
Прежде чем мы подробно рассмотрим, как составить руководство по стилю пользовательского интерфейса на экспертном уровне, важно понять, что универсального подхода не существует. Ценность руководств по стилю выходит за рамки крупных брендов с большими продуктовыми командами. Средние и малые предприятия, стремящиеся к постоянному цифровому опыту, также выигрывают, когда руководства по стилю пользовательского интерфейса изготавливаются на заказ в соответствии с их конкретными потребностями.
У дизайнеров, знакомых с рекомендациями по фирменному стилю, не должно возникнуть проблем при переходе к руководствам по стилю пользовательского интерфейса, потому что многие ключевые компоненты дизайна, которые необходимо включить, в значительной степени совпадают.
Совет для профессионалов: Документируйте только важные компоненты проекта. Излишняя информация делает руководства по стилю пользовательского интерфейса раздутыми и трудными для работы.
Типографика Схема
Типографика — один из наиболее распространенных элементов дизайна интерфейса, поэтому недостаточно просто перечислить названия шрифтов, используемых в продукте. Для заголовков, подзаголовков, заголовков (h2, h3, h4), основного текста и подписей должны быть даны четкие инструкции.
Кроме того, должны быть указаны размеры шрифта, указан вес и определены стили. Высота строки и кернинг также необходимы, и было бы неплохо выделить подходящий шрифт, который будет использоваться при возникновении особых обстоятельств.
Адаптивные макеты
Когда цифровые продукты разрабатываются на основе адаптивных сеточных систем, руководства по стилю пользовательского интерфейса должны учитывать макеты интерфейса для разных размеров экрана. Это означает включение примечаний и примеров для интервалов, заполнения и размещения. Также полезно показывать наложения системы сетки продукта по отношению к разным размерам экрана.
Главная цель здесь — предоставить достаточно контекста, чтобы избежать необходимости в одноразовых дизайнах экранов. Со временем они накапливаются и подрывают целостность цифрового продукта.
Цветовая палитра
Один из самых быстрых способов испортить интерфейс — это непоследовательное использование цветов, поэтому необходимо четко определить цветовые комбинации. Список цветов и их значений (HEX, UIColor) — хорошее начало, но также следует привести конкретные пары и примеры использования.
Если руководство по стилю пользовательского интерфейса ссылается на набор рекомендаций по идентичности бренда, проверьте, доступна ли дополнительная схема с более светлыми акцентными цветами.
Если нет, создайте свой собственный и документируйте. Выбор значений серого также полезен.
Кнопки
Практически в каждом интерфейсе есть кнопки, поэтому не пожалейте времени, чтобы задокументировать их размеры, стили, цвета, размещение, интервалы и типографские элементы. Если разные кнопки используются в разных контекстах, также укажите это.
Дополнительные компоненты пользовательского интерфейса, которые могут понадобиться
- Иконография
- Подсказки и всплывающие окна
- Модалы
- Элементы формы
- Таблицы данных
- Меню навигации
- Диаграммы и визуализация данных
- Вкладки
- Выключатели
- Диалоги
- Списки сетки содержимого
- Вертикальные списки
- Панели инструментов
- Средства выбора даты и времени
- Индикаторы загрузки
- Флажки
- Оповещения
- Выпадающие меню
- Слайдеры
- Шаговые двигатели
- Пагинация
Организация и контекстуализация инструкций по проектированию
В дополнение к обязательным компонентам пользовательского интерфейса существует ряд практических функций, которые упрощают использование, навигацию и внедрение руководств по стилю пользовательского интерфейса для компаний и проектных групп.
Оглавление
Хорошо организованное и четко обозначенное оглавление — это простой способ помочь каждому быстро найти содержимое документа.
Контекстные примечания
Невозможно предсказать каждое проблематичное дизайнерское решение, которое может возникнуть в течение срока службы продукта, поэтому формулирование обоснования дизайна часто используемых компонентов пользовательского интерфейса может упростить решение непредвиденных ситуаций.
Например:
«В основе нашего продукта лежит демонстрация лучших изображений архитектуры со всего мира. По этой причине макет нашего интерфейса отдает предпочтение большим ярким изображениям, а не тексту. По возможности делайте изображения центром нашего продукта».
Инструкции по расстановке и расположению
Расстановка и расстановка часто рассматриваются в разделе «Адаптивные макеты». В зависимости от сложности цифрового продукта инструкции могут состоять из общих «эмпирических правил» или быть весьма детализированными.
Что можно и чего нельзя делать
Часто бывает полезно четко указать, что можно и чего нельзя делать при проектировании. Например:
- « Используйте белую версию логотипа нашей компании в нижнем колонтитуле интерфейса».
- « Не используйте альтернативные цветные версии словесного знака нашей компании на черном фоне».
Что можно и чего нельзя делать, чтобы избежать споров и сэкономить время на проектирование и разработку, но всегда лучше предоставить примечание о контексте, подобное этому:
«Этот список того, что можно и чего нельзя делать, охватывает широкий спектр важных дизайнерских решений, но не учитывает все возможные случаи неправильного использования элементов дизайна нашего продукта. Имея это в виду, используйте здравый смысл, когда возникает неопределенность, и делайте выбор, который точно отражает общий внешний вид нашего продукта».
Динамические элементы и фрагменты кода
Руководства по идентичности бренда обычно являются статическими документами, но руководства по стилю пользовательского интерфейса включают живые элементы, которые работают так же, как и в конечном продукте, т.
е. кнопки ведут себя как кнопки, раскрывающиеся меню фактически раскрываются, а анимация анимированный.
Фрагменты кода позволяют разработчикам быстро копировать и вставлять код живых элементов в серверную часть продукта.
Теперь, когда мы понимаем, как создать руководство по стилю, а также компоненты и функции, включенные в руководство по стилю пользовательского интерфейса, мы переключаем наше внимание на совместное использование и общение. В частности, каковы варианты размещения руководств по стилю пользовательского интерфейса?
Традиционно руководства по стилю пользовательского интерфейса существовали в виде веб-страниц. Это обеспечивает дизайнерам и разработчикам легкий доступ и позволяет элементам дизайна функционировать так же, как в продукте.
Совсем недавно появилось несколько облачных платформ, позволяющих командам совместно разрабатывать, создавать прототипы и тестировать продукты. На этих же платформах также можно размещать руководства по стилю пользовательского интерфейса и позволять членам команды постоянно обмениваться отзывами и идеями.
Давайте посмотрим, как некоторые из этих платформ описывают свой подход к руководствам по стилю пользовательского интерфейса.
Figma
«Создавайте дизайн-системы со связанными компонентами пользовательского интерфейса, которыми может пользоваться вся команда. Получайте обновления при внесении изменений в общие компоненты»
Phase
«Библиотеки такими, какими они всегда должны были быть: цвета, свойства и элементы… даже время перехода — теперь все в компоненте. Редактируйте на месте — все в порядке. Переопределите все, что вам не нужно, для каждого экземпляра».
InVision
«Все компоненты бренда и UX, включая документацию по использованию, управляются из одного места. Изменения синхронизируются со всей командой, и дизайнеры могут в любой момент переключиться на последнюю версию или откатить обновления».
Material.io
«Создайте свою собственную тему Material и создайте библиотеку фирменных символов, применив изменения стиля к цвету, форме и типографике.
Делитесь, загружайте и представляйте варианты дизайна в галерее. Затем используйте режим проверки для доступа к документации разработчика».
Руководства по стилю пользовательского интерфейса должны быть просты в использовании
При сборке руководств по стилю пользовательского интерфейса общение не должно восприниматься как нечто само собой разумеющееся. Продуктовые команды состоят из людей из разных дисциплин, культурного происхождения и профессионального опыта. Используйте эти принципы, чтобы обеспечить ясность и простоту использования.
Простые макеты
Руководства по стилю пользовательского интерфейса требуют чистых, незагроможденных экранных макетов. Каждый экран должен быть хорошо организован, четко помечен и легко читаем. Нет никакой пользы в перегрузке экранов визуальной информацией, поэтому стремитесь к минималистичным и просторным аранжировкам.
Краткие инструкции
Инструкции должны быть краткими и понятными. Избегайте длинных абзацев и используйте маркеры.
Где возможно, продемонстрируйте визуальные эффекты вместо слов.
Информативные сценарии использования
Хотите знать, когда использовать этот стиль ползунка вместо того? «Использование сценариев» устраняет эту путаницу. Опять же, визуальные эффекты здесь сильнее слов, поэтому приведите примеры, которые четко демонстрируют как сценарий, так и правильный путь вперед.
Соответствующие истории версий
Цифровые продукты часто обновляются. Поскольку команды разработчиков стремятся усовершенствовать каждую деталь интерфейса, важно вести постоянный учет того, как развивались компоненты дизайна. Здесь следует действовать по своему усмотрению — для небольших компаний и продуктовых групп ведение обширной библиотеки истории версий может оказаться нецелесообразным.
Современные команды дизайнеров и разработчиков ценят эффективность и междисциплинарное сотрудничество, о чем свидетельствуют системы языка дизайна, рекламируемые такими крупными брендами, как MailChimp, Google и Salesforce.
Языковые системы дизайна позволяют различным командам, работающим над сложными цифровыми продуктами, общаться с помощью стандартизированного визуального языка. Руководства по стилю пользовательского интерфейса вплетены в структуру языковых систем дизайна и служат инструментом, на который можно положиться для быстрой итерации и последовательного цифрового взаимодействия.
В то же время дизайн — это занятие не только для крупных компаний. Разнообразные продуктовые команды и цифровые проекты могут извлечь выгоду из хорошо составленных руководств по стилю пользовательского интерфейса, но ресурсы (финансовые, время и таланты) варьируются от бизнеса к бизнесу.
По этой причине руководства по стилю пользовательского интерфейса наиболее полезны, когда они адаптированы к потребностям отдельных предприятий и проектных групп. Высшая цель каждого руководства по стилю пользовательского интерфейса — это баланс ясности и практичности, который приводит к неизменно приятному пользовательскому опыту.
• • •
Дополнительная информация в блоге Toptal Design:
- Стили шрифтов для веб-дизайна и полиграфического дизайна
- Адаптивный дизайн — рекомендации и рекомендации
- Почему стартапам нужно руководство по стилю
- . Рекомендации по удобству использования и дизайну значков
- Используйте свое вдохновение — руководство по мудбордам
Понимание основ
Что такое руководство по стилю брендинга?
Руководство по стилю брендинга — это документ, содержащий все элементы визуального дизайна компании (логотип, цвет, типографика, иконография и т. д.). Руководство по стилю брендинга содержит эмпирические правила и контекстные примечания, которые помогут дизайнерам добиться единообразия бренда при создании ресурсов для печати, Интернета, мобильных устройств и т. д.
Почему важно иметь руководство по стилю?
Важно иметь руководство по стилю, чтобы помочь дизайнерам поддерживать единообразие бренда при разработке материалов для печати, Интернета, мобильных устройств и т.
