设计的组件化

我们在设计一个系统的时候会不可避免的与各个不同的角色互动:不同的设计师、不同的前端工程师,这其中不可避免的会出现大量的沟通和协作问题,如何在这类多角色互动中提高效率,降低沟通损耗就不可避免的成为一个问题。「组件化」可以在某些层面帮助我们更好的解决这个问题。在复用和设计过程中,与 Brad Frost 提出的 Atomic Design 有相似之处。

什么是组件?

组件是一个个不可再被拆分的基本设计元素,例如一个 Button、一个 Input 等。每一个组件都应该有自己的迭代和设计过程,组件属于平台设计的一部分,与业务设计互补,每次设计迭代也正是在迭代这一个个组件。

组件化的好处是什么?

良好的组件化在应用时能够带给我们三个好处:

复用

我们可以以非常低的成本得到一个完整功能的组件,组件本身与业务逻辑无关,产品设计师无须过多关心组件本身的逻辑。以 Button 组件为例,我们设计了 2 种样式,分别适用于默认场景(.Button)、主要场景(.Button-primary),产品设计师只需要针对不同的场景分别使用适合该场景的 Button 即可,他不需要关心这个 Button 自身的 padding、margin、size 等。

一致

这种高复用可以让整个系统一致性更好,当我们想要修改 .Button 的 padding 时,所有使用了 Button 组件的位置都会变更。之前开玩笑说判断一个网站的组件化做的是不是足够好的方法是:你能否用 StyleBot 很快的帮它换一个皮肤,同时在它之后的迭代中不会出现本该一致的地方却不一致的问题。这种一致性会直接反馈到用户的使用中,不会被各种不一致的操作迷惑。

效率

高复用和一致性最终产生的结果就是设计和开发效率的提升,我们可以通过搭积木的方式很快的得到一个基本可用的界面,产品设计师可以更加专注在问题的解决上,而不是花了大把时间在基本组件的设计上。同时开发也可以直接利用已经做好的组件进行开发,开发效率直线提高。甚至我们可以直接基于浏览器设计,使用组件库可以更快的得到一个可交互的高保真的设计稿。

针对平台设计的好处有二:

平台设计迭代落实到人

基于不同特性的组件可以交由不同的设计师进行维护,例如 Animation 组件会对动画更有要求、TextEditor 需要对富文本处理更有了解、icon 部分则需要对不同浏览器 icon 解决方案有研究,这样每个人都会负责一部分组件的迭代,不会出现设计很久没有被迭代过、一个组件被随意设计未经全面考量等等。

组件迭代更系统

基于不同的组件特征将他们分配给不同的设计师,这些设计师可以站在更高的平台角度而非业务角度来思考这些组件应当被如何设计。可以更加全面的思考一个好的组件应该是什么样的、当组件无法满足业务需求时进行更加完整的扩展和升级。更系统的迭代不代表脱离业务,大部分的组件设计师同时也是业务设计师,他们会更了解业务的需求是什么,在此基础上抽想出更加通用的组件设计。

组件的类型和粒度

一个组件一般有三种状态,例如同样的一个 Button:

  • 默认:最常见的一种状态,纯界面区别。如 .Button、.Button-primary
  • 交互:交互后发生的变化,与该组件交互后的状态一般有两种实现方式:1、样式(.Button-primary.is-active);2、伪类(:focus),可根据不同的需求采用不同的实现方式。
  • 子组件:该组件是其他组件的一部分,如果该组件作为其他组件的一部分时样式有所变化,则需要单独定义样式,如 TopNav--AddQuestionButton、TopNav--SigninButton。

当该组件可能会成为另一个组件的一部分时,需要明确该组件的子组件状态和常规状态时的区别和联系是什么。下面是一个常规的 input 组件:

.input {
  padding: 8px 10px;
  font-size: 13px;
  line-height: 15px;
  box-shadow: 0 1px 1px rgba(0,0,0,.1) inset;
  border-radius: 3px;
  background: #fff;
  border: 1px solid #ccc;
  color: #222;
  box-sizing: border-box;
}

当我们在一个新的 dialog 中使用到了这个 input 组件,但在场景下 input 有些许变化,这时需要明确几个问题:

  1. 变化是否有必要:大家都喜欢抛弃旧的搞新的,这样没有历史包袱,但这种变化对于整个系统而言并不一定是好事。
  2. input 之间是否还有关系:1、两者的使用场景分别是什么;2、哪些样式会被共用。
  3. 变化幅度有多大:基于之前的共用样式范围,一般有两种情况:1、少量样式不共用;2、大量样式不共用。第一种情况一般会复用旧的样式,同时写新样式覆盖掉原来 input 中不需要共用的部分,例如.Input.DialogInput。第二种情况的少量样式共用,比如只有 border 一样,其他的都不一样,那基本上会重写整个组件样式。

我们在组件开发和设计前明确清楚两个组件的关系是什么,这样可以降低设计和开发成本,提升迭代效率。

组件设计应该如何迭代

两个大原则:1、组件迭代不应该 block 业务迭代;2、任何组件改动都应由该组件负责人负责跟进。

当现有组件无法满足业务需求时,业务设计师应及时与组件设计师及时沟通确认需求,如果可以在当前方案中快速调整适应业务需求,则在组件调整完毕后使用新的组件方案;如果存在折衷方案:折衷方案如果违背组件设计意图,则不能使用该方案。如果不违背设计意图,则可以采用该方案。如有必要,组件设计师需要事后重新调整组件方案兼容该需求。

每次组件迭代应该关注以下几点:

  • 视觉表现:是否与平台主视觉一致
  • 业务兼容、扩展性:当前已知的业务需求能否在该组件下被良好满足,是否有足够好的扩展空间而不至于迭代时需要重新设计
  • 逻辑一致性:该组件在不同设备下的操作逻辑是否一致和友好(可根据平台特性有所变更)
  • 极端情况表现:文案过长、屏幕过宽、空状态…
  • 视障用户友好:使用键盘 tab 时友好、样式正常、色盲用户友好…
  • 浏览器和性能限制:微信浏览器滚动过程中无法执行 JS、尽可能不要用 JS 动画…

如何管理和呈现组件?

采用 Sketch Shared Style(Text Style & Layer Style) 维护设计组件样式,Symbol 维护 icon 和大型组件,Symbol 内可以嵌套 Shared Style,采用 Git 协作。每一个组件需要包含如下内容:

  • 组件使用规范
    • 视觉样式(组件规则:size、padding、margin 等)
    • 状态变化:hover、disable 等;内容变化:空状态、报错等
    • 交互逻辑(界面变化时的转场逻辑:切换、出现消失)
    • 动画(CSS 和效果展示:需要附上关键数值)
  • 迭代历史:每次组件迭代时遇到的问题、思考过程、最终方案、数据表现(如果有)
  • 最佳实践和注意事项:该组件的正确用法、最佳实践和目前已知的缺陷。

将组件以目录形式组织在 Git 中,每个组件单成目录包含上述内容,每次迭代另开分支,不应该在 Master 上直接修改,修改完主模板文件并测试通过文档补全后再合并进 Master 并周知其他设计师全平台升级。

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/15813/

(0)
交互精选交互精选
上一篇 2016-06-15 21:53
下一篇 2016-06-16

相关推荐

  • 用Axure写PRD:虎扑app产品需求文档(附下载链接)

    需求文档是产品经理的基本功,产品小白入门的必经之路,但对于小白来说,没经历过一个完整的项目,自然也没有产品可以写,所以倒推产品是一个练手的好方法。Axure也是产品经理的基本功,画原型图的利器,但axure不止是能画原型,还可以用来写prd,正如臻龙大神说的做这样一个一体化产品需求文档出于的目的就是传统的方式产生的文件过多,过于杂乱,不易整理和回溯。如果把每个版本的内容都整理在一个html中,这样无论是团队协作还是文档回溯都能大大提高效...

    2018-03-15
  • 超实用的格式塔原理小科普

    在界面排版,网页广告设计等视觉传达设计工作中,视觉上的画面琐碎,零散,信息混乱无序总是视觉设计师无可避免的问题。

    2017-06-02
  • 色彩和体验的平衡:为色盲用户设计网站

    如何为色盲用户设计网站?本文作者与大家分享了5点小技巧。WCAG 2.0级AA要求正常文本的对比度为4.5:1,大文本的对比度为3:1(14点和大于或大于18点或更大)。——WebAim颜色对比检查器

    2017-08-02
  • 交互设计文档怎么写? | 设计基础

    摘要交互设计师的工作虽不只是画交互稿子,但是好的交互稿不仅能够完美阐释产品内容和设计师的设计思路,还能够在项目各方协调工作中起到重要作用。保证完整的呈现产品需求和设计思路的交互稿,能够让各方工作人员有一致的工作目标,而有良好体验的交互稿,还能够便于各方理解,提高后期开发对设计的还原度,提高各方工作效率。对于一个设计团队来说,统一的文档规范和设计规范,不仅能够减少合作方的学习成本,提升设计师和设计部门影响力。即使产品不同需求不同设计师不同...

    2018-02-09
  • 浅析用户体验在APP界面设计中的表现及应用

    如果要成功运营一款APP,第一个基本的原则就是要全线贯彻落实“以用户为中心”的理念。当今这个时代,在设计过程中能够体现出“以用户为中心”原则的设计就叫做用户体验设计。这就不得不提到两个名词:即用户体验和用户界面概念的理解。一个成功的交互产品离不开优秀的用户体验,一个高用户的App更无法脱离用户体验设计。当产品和用户之间的连接点变成了摩擦点,那么工业设计师的设计就是失败的。相反,如果产品能让人们感觉更安全,更舒适,更乐于购买,更加高效,甚至只是让人们单纯地更加快乐,那么此处的设计师是成功的。

    2017-05-15
  • 产品经理黑魔法 | 自启动与后台

    最近写黑魔法上瘾了,每天稍微有点空闲,Glen都在思考互联网行业都有哪些黑魔法。有机会大家还可以探讨一下魔咒课、魔药课、占卜课等哈利波特魔法课程。

    2017-06-03
  • 移动端文字与排版设计的六个原则

    .space-betw {
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    }

    - (NSDictionary *)demoTextAttributes {
    NSMutableParagraphStyle *ps = [NSMutableParagraphStyle new];
    ps.alignment = NSTextAlignmentJustified;
    // here, NSBaselineOffsetAttributeName must be set though the default value is 0 to make the justified work.
    return @{NSParagraphStyleAttributeName :ps, NSBaselineOffsetAttributeName : @0.0f};
    }

    2017-05-31
  • 设计高效好用表单的10个技巧

    让问题保持直观的顺序。你应当站在用户的角度按照逻辑提问题,而非按照程序或者数据库的逻辑。如果问题之间没有逻辑存在,那么可以按照字母顺序来排布。
    以直觉的顺序组织选项。比如选项为日期的时候,按照周一周二周三这样的顺序来排布,而非乱序。
    时刻反思从用户那里获得的信息是否必要,如何使用。这样做是为了消除不必要的选项,提升完成率。

    一旦用户点击输入框,标签会消失,用户容易忘记谈需要输入的内容以及形式
    当用户看到输入框中有内容填充的时候,会误解为这个字段已经被填写而无需输入了

    2017-05-21
  • 交互设计师从业时间长度与对应状态

    不同的经历决定了你的认知,而我们中的很多人往往以自己的认知去度量别人的工作和成果,每每于此,长不自拔而废咦! 从业0-2年: 这个阶段往往是浑浑噩噩进入这个行业,读了几本书,分析过几个案例,感觉自己掌握了…

    IxD案例 2016-05-24
  • 【交互设计】信息图(infographic)的圆形表达

    信息图形(Infographic),又称为信息图,是指数据、信息或知识的可视化表现形式。信息图形主要应用于必须要有一个清楚准确的解释或表达甚为复杂且大量的信息。公元1958年,Stephen Toulmin提出了一种图形化的理论…

    2017-08-01