设计的组件化

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

相关推荐

  • MECC UED年终惊喜大放送

    时间是让人猝不及防的东西;岁月是一场有去无回的旅行。岁末年初,我们用一场部门小聚来辞旧迎新。有美食,有美景,更有大惊喜哦~首先要感谢在背后默默筹备了1周的工作人员,感谢组织为大家准备了这个充满惊喜的小聚会~感谢她们!👏👏👏👏👏这次我们年末小聚的地点是位于岭南天地——Loccy餐厅三楼那一天天空很高,风很清澈,从头到脚趾都快乐(就是有点冷)清新的绿植、简约的装饰、精致的餐具~最吸引人的还是这满满的礼物堆!现场准备了许多小道具供大家卖萌装逼...

    2018-02-24
  • 体验的情感之谈

    来源:Johny Holland Magazin 当体验设计的范畴在不断延展的时候,也正是其面临着一种设计挑战的时候,即体验设计师希望给用户传递一种可独立于情境或频道、具有相关性(延续性)和一致性(稳定性)的设计。 如同在…

    交互设计 2015-10-20
  • 考研是工作的理想国 | 同济大学设创交互设计考研分享

    打造最优质的设计教育有趣·专业·创新上次发了那篇跨专业考研的分享之后,小编收到了很多小伙伴的后台留言说,能不能多多分享一些考研的心得,为了保持我们有求必应的优良传统,今天的推文也是一篇干货分享帖~此次的分享,来自一位考上同济的在职小姐姐,一起来听听她是怎么平衡工作与考研之间的压力吧~张 炜15年毕业于山东财经大学的数字媒体技术专业,因为爱好也因为工作上遇到的瓶颈,希望能通过考研取得进步,并顺利考入同济设创院的交互设计方向。(即在职又跨专...

    2018-04-25
  • 7个设计技巧,让内容和用户体验无缝地配合起来

    好的设计往往需要好的内容作为基础支撑。无论是内容还是设计,想要让两者最大化的搭配,往往是需要进行调整和优化才行。“不要总是玩弄算法,创造用户想看的内容才是正途。”

    2017-08-04
  • 读书会第三期:《交互设计指南》

    《交互设计指南》的作者Dan Saffer是旧金山一家产品设计资讯公司Kicker Studio的负责人,也是交互设计领域的思想先行者,经常在国际进行各种演讲活动。这本书在国内最常见的是2010年发行的第2版中译本,其实它在2006年就有了第1版的英文版,它在10年前的目标读者群是设计行业的资深者,现在很适合交互设计师入门通读。交互设计的4种方法从2003年至2010年常见的交互设计方法论共有4种:以用户为中心的设计、以活动为中心的设计...

    2018-04-20
  • 为女性设计APP的7个小技巧

    Groove CEO解释了如何以正确的方式为女性设计APP。 提示:如果你将花,心形,及娃娃混在一起设计,那你可能需要重新思考你的设计。 当我的公司Groove着手建立一个定期跟踪器,我们知道这将是一个挑战。 搜索以女性客户为…

    2015-04-28
  • 交互设计可以区分出一个好的产品和一个差的产品——「得米Micah」

    这是 Bestony 推荐给你的第141个公众号基础信息公众号名称: 得米Micah公众号类型:文章型订阅号公众号ID:MicahDesign更新频次:不定期更新简介今天为大家分享的公众号来自一个交互设计师 Micah 。搞互联网的或多或少都听过这个岗位,我在网易待过,也曾经为外包公司干活,也为初创企业作过技术服务,很多时候,不同产品的区别最大的点可能便是在于交互设计。小公司或外包公司会有设计师,但是是我们所说的「视觉设计师」,而大公司...

    2018-03-15
  • 百度贴吧体验升级背后的故事,用户洞察与交互升级

    作者:百度UXC随着产品的发展和用户群体的演变,用户对产品的认知也在发生变化,当用户认知和产品形象发生偏差时,体验升级就势在必行了。而用户对产品的认知大概体现在视觉感受(品牌形象)和使用感受(交互操作)上。对此我们从用户出发寻找设计上的突破口。洞察用户让设计有的放矢视觉感受对于大多数人是一种难以言说的东西,难以通过简单的方式得到答案。面对这个问题,我们选择迎难而上,通过精巧的实验、可视化的方式来解决,邀请用户与设计师一起,参与到品牌升级...

    2018-01-30
  • 设计师的必备技能!你需要学会设计有意义的动效

    编者按:关于动效设计,我们探讨过很多次。直到现在,我们越来越清楚地意识到,动效设计已 经无处不在,已经成为了设计师们必须掌控的一个重要技能。参加过今年的Google I/O大会之后,设计师Paul Stamatiou 也充分…

    2014-12-03
  • 从GUI到CUI,谈谈智能时代的用户体验

    用户体验分为三个层面:有用性、易用性与美观性。有用性是用户体验的根基,美观性属于锦上添花,易用性则与用户对产品的“操作体验”直接相关。User:买一张明天去北京的机票,要国航的;五点前到达,尽量便宜。

    Bot:好的,查到CA XXXX航班,16:00到达,票价XXX元。来自携程。

    User:买了吧。

    Bot:好的。User:订一张明天去北京的机票。

    Bot:好的,还是国航五点前到的最便宜的吧?

    User:对的。

    Bot:好的,已经预定了CA XXXX,16:30到,XXX元。来自携程。

    Bot:另外这次要和上次一样预定当天的万豪酒店吗?

    User:订边上的汉庭,这次公司不报销。

    Bot:好的。User:我要去北京,定个明晚的酒店。

    Bot:好呀好呀,是否要订华贸的万豪酒店?

    User:订边上的汉庭。

    Bot:听起来好杯具,摸摸~

    Bot:话说“边上的汉庭”是什么酒店?

    User:#WTF……(关掉了应用)User:你可爱吗?

    Bot:很可爱呢~

    User:约吗?

    Bot:我们大约有20款车。(难免出现理解不到位的情况)

    User:#hhh果然很SB……User:你可爱吗?

    Bot:您好,这里是XXX汽车经销商,我可以回答你购车相关的问题。

    User:锐腾16款有些什么颜色?

    2017-08-04