跳到内容 跳到导航

创建用户界面样式指南

2020年1月15日更新 (2016年3月1日发布)通过 迈尔斯网站设计& UX

以团队形式创建和改进Web应用程序可能会给品牌一致性带来挑战。这是我们为员工敬业度初创公司6Q解决的方法。



创建用户界面样式指南

新项目和用户界面(UI)始终以最好的意图开始。作为设计师,我通常会对品牌和界面设计元素如何在整个网站或应用程序中进行转换,并与我们的开发团队合作以实现这一点非常清楚。但是随着项目的增加 complexity 以及不同团队成员添加的新功能,这种最初的理想及其背后的原因很容易在迭代中丢失。 我们自己的解决方案 员工调查启动6Q, 是 创建一个UI样式指南(有时称为模式库)作为参考,并确保整个界面的用户界面都一致。样式指南并不是什么新鲜事物-它们已经在印刷行业中用于品牌标识多年了-但是UI样式指南不只是调色板和徽标的可做与不做清单。 

什么是UI样式指南?

UI样式指南由设计者和开发人员可以参考的设计元素和规则组成,以创建凝聚一致的用户体验。 The 6Q style guide 是整个Web应用程序中所有关键品牌元素,语言,版式和用户界面组件的实时文档,直接链接到同一CSS中,因此任何更新都将自动反映在指南中。 作为动态指南而非Word文档,它可以显示 按钮,下拉菜单和模式 可以根据浏览器大小进行交互,设置动画或更改。 

6Q UI样式指南正在进行中  在创建样式指南时,必须做出决定以消除不一致之处,并更新用户界面的原始计划,以反映不断发展的6Q品牌标识和功能。该指南为团队之间讨论每个元素的外观以及如何为我们的用户创造流畅和愉悦的体验提供了清晰的起点。

为什么 创建UI样式指南? 

在创建初始指南的同时, 长期利益显而易见:

  • 时间 is 通过使用一致的设计模式来节省成本,而不是每次都重新发明轮子。
  • 设计和代码一致性 单一维护更容易 point of reference.
  • 超出本指南当前范围之外的应用程序样式的附加内容可能会受到质疑和更紧密地集成在一起。
  • 共享词汇 是围绕设计元素的名称创建的,从而使团队更易于沟通 smoothly.
  • 该项目的任何新设计师或开发人员都可以轻松实现 感受用户界面并确保其工作一致。
  • 作为动态指南,它将与界面本身一起发展,确保以最少的工作保持最新。

6Q风格指南的一部分 Although UI style guides are fantastic for large 网站s or applications with a lot of 复杂, they can also be a useful reference for consistency 在 smaller 网站s managed 通过 teams of people. 有多种工具可用于创建您自己的样式指南,但只有一种 可以作为一个简单的HTML页面制作为网站的一部分,而只需最少的设置时间。  

往前走 

6Q UI样式指南可能会一直在进行中,因为经常会添加新的想法和更新。但是,对于每一个新增加的内容,它都提供了一个很好的起点,可以继续产生凝聚力的用户体验。 

UI风格指南灵感 

这是  公开发布其风格指南的企业中的一些启发性示例: 

概要

像其他任何指南或手册一样,创建样式指南 helps to save time, 保持一致性,使团队成员之间的沟通更加轻松,甚至更多。因此,请始终记住始终在项目过程中创建指南,以方便将来参考!