数极客首页

如何构建高复用性的交互组件库?

如何构建高复用性的交互组件库?

有一天,当你几乎完成了一个项目全套的交互设计稿后。

PM:「那个……把底栏第二和第三个Tab对调一下位置吧。」

你吓得坐到了地上:「为什么!不是一个月前评审时就定好的吗?」

PM叹了口气,用八百字痛陈了客户的压力和他的歉意。

你哭:「有200多个页面要改,明天评审还来得及吗?」

PM没有说话,只是同情地拍了拍你的肩膀……

而如果你的导航栏是通过组件统一搭建的,完成这一改动只需要1秒。

如何构建高复用性的交互组件库?

什么是组件库

1、组件库的概念

组件库就是界面设计常用控件或元素的集合,从某种意义上说,交互设计线框图的组件库比视觉设计阶段的UI组件库价值更高。UI设计阶段,不同产品、不同项目的常用组件即使有共通之处,也一定是不完全相同的。而在交互设计的线框图阶段,一个优秀的组件库可以同时在许多项目中发光发热。

一个好的组件库,衡量标准主要包括灵活性、复用性、全面性。灵活性指一个组件的字段、icon、配色都应该可以灵活改写,以应对多样化的需求。复用性指对于通用组件,应当是可以在不同项目间复用的。全面性则指一套组件库应当覆盖尽可能多的常用元素。

组件化的初衷并非提高一致性、利于团队合作这些高大上的目的,而是人类进步的第一生产力——「懒」。消灭重复劳动是提高效率的主要途径,勤劳如小蜜蜂的设计师也不例外,那么组件化就是无论交互还是UI设计中我们不得不思考的问题。

虽然之前总是强调大家不要过分关注工具,对交互设计师而言,业务目标、流程和信息架构上的思考才是我们的核心价值所在。但这不代表工具就不需要思考和积累,一把更锋利的工具才能帮助我们把有限的时间和精力放在上面所说的核心思考上,而不是沦为埋头画图的线框仔。

2、复用性:组件库的意义

上面说到组件化是源于「懒」,并不是说组件化的作用仅限于简化重复操作。除了提高设计师个人的设计效率这一显而易见的好处之外,在交互设计阶段对常见的元素控件进行组件化,还有很多更深层次的意义:

  1. 一致性「从娃娃抓起」:从交互稿阶段开始,就让整个项目的产出物具有高度的一致性,使用同一组件库画的每个顶栏、每个列表、每个弹框都是遵循同一规则的。
  2. 与视觉设计无缝衔接:Sketch为交互设计和视觉设计阶段的无缝衔接提供了最好的平台,交互组件库可以直接交付视觉设计师进行视觉设计,形成真正的UI组件库(UI Kit)。
  3. 有助于形成设计规范:当UI组件库形成后,「设计规范的积淀」——这个贯穿交互和UI设计管理工作中的老大难问题,就已经解决了一大半了,经过评审确认的UI组件库可以直接作为视觉设计规范的一部分。
  4. 利于团队合作:无论是交互设计组件库还是UI组件库,经过整理和完善,在项目或者团队中推行开来,对项目内,或者不同项目间设计成果的一致性、合作效率都大有裨益,也有助于让整个品牌形成有效的辨识度。
如何构建高复用性的交互组件库?

既然组件化有这么多的好处,哪些元素可以进行组件化呢?其实很简单,凡是你觉得已经重复画了很多次的元素,不同场景下都会用到的元素,都可以考虑将其单独拿出来进行组件化。

3、灵活性:「Symbol套Symbol」

Sketch 41的一个让设计效率产生质变的更新就是Symbol可以内嵌Symbol了,尺寸相同的符号可以在Symbol Override的下拉列表中直接选择切换——想必大家已经等这个功能很久了。

有了「Symbol套Symbol」的功能后,在组件化时进行合理的拆分和嵌套,可以让你做出一个很”聪明“的Symbol——可以帮你「以一敌十」的那种。

如何构建高复用性的交互组件库?

虽然在第一次建立Symbol时,需要仔细考虑怎样的拆分和嵌套是最有利于设计效率的,也许会觉得太费脑子,还不如直接画多个Symbol方便。但当一个通用性很强的Symbol通过各种内嵌Symbol组合而成后,毫不夸张地说,你会发现它替代的是以往成十上百个Symbol的功能。

而当你为常用的控件制作并积累了许多这些高通用性的Symbol后,一套复用性极佳的组件库库逐渐积淀成型后,你一定会惊叹于把一个方案构想呈现在线框图上原来可以这么快。

4、全面性:循序渐进的积累过程

在积累一个个的组件,逐渐形成组件库的过程中,不要想一下子做得非常全面。组件库的积累是一个不断在项目中补充、维护和更新的过程。而且,即使一个资深的设计师经过几年的工作也很难说能积累出绝对「全面」的组件库,每个项目都有各自的特色,一个能帮我们解决70%问题的组件库已经算得上是复用性很棒的了。

同时,Sketch的Symbol可以通过命名中的「/」符号自动形成目录结构,这有助于使用组件库的设计师快速找到想要的组件,也有助于制作或维护组件库的人随时审视一个类型的组件是否有重复或者不完善的情况。

如何构建高复用性的交互组件库?

以上讲述了组件库的概念和意义之后,下文将主要介绍如何构建一套具有复用性的组件库,即侧重「库」的层面而不是「个体」的层面——会讲的是组件库应该涵盖哪些类型的元素、每类元素在组件化时要考虑哪些方面、有哪些Tips需要注意,而不是一篇具体如何在Sketch中进行组件化的教程——当然,如果有朋友对这个教程有兴趣的话,后面有时间时我会考虑写一写。

因此,有Sketch使用基础的同学阅读本文应该会更明白我在说什么,也更明白做出各种拆分的原因。但在组件库中需要涵盖的组件类型和拆分方式上,希望这篇文章对使用Axure、OG、AI、ID等工具设计交互稿的同学同样有用。

组件库的内容

再优秀的组件库也没法「一招鲜吃遍天」,何况Symbol数目过多会影响Sketch的流畅度。因此,一个全面的设计师或者一个优秀的设计团队,需要针对不同平台和不同的产品类型准备不同的组件库。

在准备针对某一产品类型的组件库时,该类型的产品中那些口碑最好的竞品,在设计规范方面自然是我们最宝贵的学习资源。例如下面这套组件库的积累过程中,除了学习和参考iOS平台的原生设计规范外,也部分参考了IM类的经典产品——微信的设计规范。

下面,将基于我在实际项目中浅薄的个人经验,以其中一个iOS平台下、适用于IM或内容性平台APP的组件库作为例子,逐一介绍我认为比较常见和重要、也比较适合进行组件化的12类组件。

  1. 顶部导航栏(含状态栏)
  2. 底栏
  3. 键盘
  4. 表单
  5. 按钮
  6. 会话
  7. 弹框
  8. Toast
  9. 上拉菜单(ActionSheet)
  10. 发布
  11. 内容
  12. Icon

1、顶部导航栏(含状态栏)

如何构建高复用性的交互组件库?

2、底栏

如何构建高复用性的交互组件库?

3、键盘

如何构建高复用性的交互组件库?

4、表单

如何构建高复用性的交互组件库?

5、按钮

这里的按钮特指容易组件化、也容易在各产品间复用的文字按钮,而icon按钮一般在设计相应的产品时,在产品内部相应地制定规范即可。

对这类按钮,按尺寸可以分为全宽、半宽、小型、表单式共4种,按功能样式同样可以分为主要操作、次要操作、警告操作、线型按钮4种,按照以上两个维度的组合,基本可以满足一般产品中常见的文字按钮需求。

如何构建高复用性的交互组件库?

6、会话

如何构建高复用性的交互组件库?

7、弹框

如何构建高复用性的交互组件库?

8、Toast

常见的Toast形式需要考虑居中型(带icon)、顶端型(带icon)、底端型(纯文字)三类。带icon的Toast,在线框图阶段准备以下4类即可应对绝大多数场景:成功型、失败型、警告型和等待型。

如何构建高复用性的交互组件库?

9、上拉菜单(ActionSheet)

菜单标题、普通按钮、取消按钮、Gap(普通按钮组与取消按钮之间的间距)等Symbol即可组合出满足大多数需要的ActionSheet。其中,普通按钮需要考虑居中、居左、带icon居左这三种形式,其中主文字居左时还要考虑右端是否有描述文字。

此外,导航栏”更多”按钮调出的下拉菜单实际上也是可以考虑组件化的控件,但ActionSheet作为一个有平台规范约束的控件,一致性和复用性较好,在设计师个人的组件积淀中更有组件化的价值,而对下拉菜单、分享菜单等其他形式,在有针对性地设计一个产品时再对其进行组件化设计也来得及。因此本文的介绍中暂不涉及这些菜单。

如何构建高复用性的交互组件库?

10、发布

如何构建高复用性的交互组件库?

11、内容

与在Axure中习惯用一个叉号表示图片的占位符类似,这里实际上就是将这类图片占位符根据产品需要,细化成多种更具体的类型,从而让交互稿更有效地传达设计师的意图。

比较通用的可以考虑以下几种:地图、一般性照片(风景等)、饮食、图书、人物、统计图表(柱状图、趋势图、饼图)、用户头像,以及音视频的播放器。其他的可以根据自己当前产品的需要,自行添加。

如何构建高复用性的交互组件库?

12、Icon

当做过的产品比较多时我们很容易感觉到,常见的icon无非界面、社交、电商支付、档案、书影音、文字编辑、饮食、设备、交通、天气等类型,如果随时整理和积累,在新项目中找icon时,就可以不知不觉享受到信手拈来的快感。

一般而言,建议每个icon准备以下4类:浅色线性、浅色实心、深色线性、深色实心。

不过icon集不一定要全部放进项目的Symbol库,尤其是当积累了一定数目时,Symbol数量过大会显著拖慢Sketch的响应速度。因此更建议icon集单独在一个文件中积累,项目需要时再按需选择即可。

如何构建高复用性的交互组件库?

示例:用组件库设计页面

最后,基于第二节示例中的组件库,简单地举几个通过组件绘制页面的小例子吧。页面内容本身不用细看,只是作为简单的示例罢了。
以下界面的所有设计都是用上面介绍的组件完成的。组件中所有文本都可以直接改写成设计中需要的内容,内嵌的Symbol也可以通过下拉列表方便地切换,更是大大提高了组件的使用效率。

  1. 「联系人」页

    顶栏、底栏组件使用示例:
    如何构建高复用性的交互组件库?

    作者:Qinsman

    本文由@Qinsman 原创发布,未经许可,请勿转载。

    给大家推荐我国新一代大数据用户行为分析与数据智能平台:数极客(https://www.shujike.com),是支持无埋点、前端埋点、后端埋点、API导入四种混合数据采集方式,整合分析用户行为数据和业务数据,可以自动监测网站、APP、小程序等多种渠道推广效果分析,是增长黑客们必备的互联网数据分析软件。数极客支持实时多维分析、漏斗分析、留存分析、路径分析等十大数据分析方法以及APP数据分析网站统计网站分析小程序数据统计用户画像等应用场景,业内首创了六种提升转化率的数据分析模型,是用户行为分析领域首款应用定量分析与定性分析方法的数据分析产品

    发表评论

    评论已关闭。

相关文章