美文网首页UI/交互设计规范
工作效率 | 如何制作交互组件库

工作效率 | 如何制作交互组件库

作者: imsilentfish | 来源:发表于2016-07-05 22:36 被阅读0次

曾几何时,每次交互稿都是徒手画,或者截个图在现有的界面上改造。渐渐感到同一平台,每个版本都有很多重复劳动,是时候做个交互组件库了~


什么是组件库?

就是类似axure左侧栏的这一坨标准控件,方便直接拖拽使用。

但如何制作满足自己产品需要的交互组件库,一开始是模糊的。最初只是根据自己的需要随便列一些出来,在做的过程中逐渐清晰。


交互组件库的作用:

提高个人工作效率

方便多人合作

使交互文档具有统一美

哪些东西可以做成交互组件?

只需记住一点:当你感觉到某种UI组合,每次都需要重新画一遍的时候,就可以考虑把这种UI组合做成交互组件。

上面所说的“重复劳动”对不同人来说可能定义不尽相同。比如对我来说,即使把Tab的选中状态变一下,也是一种重复劳动。那我就会把不同Tab的选中状态都做一份。这样等到要制作“我的音乐”相关交互的时候,直接把下面第二个组件拖过去就可以了。

但对于某些Tab组合来说,每个Tab底下的内容可能是差不多的,做交互的时候往往只需要表达第一个Tab下的页面就可以了。这种我就只把第一个Tab的选中状态做一下。

总得来说,怎样对自己方便就怎样做。

交互组件应该具备的特点:

组件组件,最大的一个特点就是可组合性。

整理的时候,思考哪些UI组合是不同页面都会共用的,把这些元素剥离出来,就成了交互组件。根据自己的经验,我会把组件归为几大类:

顶栏类

导航类

弹窗类

弹出浮层类

toast类

列表类

键盘类

icon类(各种png图标)

另外,一些常用的主界面和内容页我也会做成组件。这样当我要拿搜索页说事儿的时候,就可以直接把整个搜索页拖过去,而不需要花时间再搭一遍积木了。


单个交互组件应该具备的特点:

可编辑性。PNG图标、文字、选中……每一个元素都是可以单独编辑的。


组件的颜色?

尽量以黑(性)白(冷)灰(淡)风格为主。

如何把各种组件想全?

不用想全,边做边补。所以不同平台的交互组件库应该有专人维护更新,才能保证组件库始终好用。这点其实知易行难,一定要提醒自己“磨刀不误砍柴工”。

组件边上需要写说明文字吗?

总得来说,组件库是给画交互稿的人用的,不是给别人看的。所以个人倾向每个组件边上不写任何说明文字,组件的名字已经反映在axure文档的侧导航上。只要侧导航分类符合心智模型(好找),页面上清清爽爽的组件(方便拖拽),就能满足我的需求了。

因此,判断一个交互组件库是否好用的标准是:

你自己是不是经常使用自己的组件库

别人乐不乐意使用你的组件库

微信公众号:听音乐做设计

相关文章

  • 工作效率 | 如何制作交互组件库

    曾几何时,每次交互稿都是徒手画,或者截个图在现有的界面上改造。渐渐感到同一平台,每个版本都有很多重复劳动,是时候做...

  • 设计前的要点-活动设计要点

    交互组件库作用 提高个人小效率 方便多人协作 交互文档样式统一 好的交互组件库 自己愿意用 别人也愿意用 交互设计...

  • 组件化开发的个人理解和实际运用

    前言:上一篇准备工作组件化开发之私有库制作以及常见问题 已经说明了如何去制作私有库并上传,以及私有库podspec...

  • webView.delegate = self 的崩溃

    1.问题起源在工作中制作了一个webView容器的组件库,提供了各种jsBridge的交互方法供APP端调用。在某...

  • Sketch组件

    关于Symbol的使用 组件库构建思路:解构-拆分-重构 1.基础组件的制作 2.组件嵌套制作 3.系统组件与通用...

  • Swift 私有库制作教程

    本篇文章讲的是 如何制作一个组件。 一、组件的创建 1、首先我们来为项目创建一个公共基础三方库 组件 MCBas...

  • 前端搭建组件库流程记录

    antd、element ui 这类组件库是单个非连续性的交互组件,现在参照这些组件库搭建出适合我们公司业务需求的...

  • 组件

    antd、element ui 这类组件库是单个非连续性的交互组件,现在参照这些组件库搭建出适合我们公司业务需求的...

  • 前端知识用的东西

    ubuntu如何制作U盘系统镜像 个人简历模板 天天网盘搜索 前端组件库 前端面试题 洞悉漏洞 jquery插件库...

  • 关于交互组件库

    在网易云音乐的UED上看到这样一篇有点干货的文章,这是属于交互设计师养成习惯的重要环节,本来想自己写一篇,看到这个...

网友评论

    本文标题:工作效率 | 如何制作交互组件库

    本文链接:https://www.haomeiwen.com/subject/csxkjttx.html