提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
设计师难免遇到多种状态处理,设计简单,可是后期维护才抓狂,学会用组件搭建多种样式的方法让设计一时爽,后期维护一直爽~~~
最近的一个项目中涉及到订单的各个状态,梳理下来多多少少有16种状态,包括可复用样式,最后也有14种订单卡片样式。本着方便开发进行组件定义,也方便我自己后期快速维护,用组件的方式来梳理这14种样式是目前为止最好的方式。庆幸sketch的组件功能如此好用,这要是用PS来做,后期维护成本可就惊人了。
本篇文章会从以下几方面讲。
1、简单介绍sketch组件
2、如何利用组件梳理繁多样式
3、如何将繁多样式输出给开发
1、简单介绍sketch组件
1.1 sketch组件是什么?
本篇文章主要是讲如何利用sketch组件来梳理多种样式,对于sketch组件的讲解会简单一些,想深入了解sketch组件的小伙伴们可以直接在网上搜sketch组件就能出来许多讲解得十分清晰的文章,我也是从这些文章中获取sketch的使用技巧的,非常实用。但是为了还未开始使用sketch的小伙们能更快地看懂下面的内容,这里还是会简单讲解一下sketch组件的使用方法。
我对sketch组件的理解是,它有些像PS中的智能对象,但是比智能对象更加智能……可能有点绕,我举个不太恰当的例子。
小明有一块橡皮泥,然后他把橡皮泥分了一块给小红
然后小明把剩下的橡皮泥定义为组件
这时候小黄和小绿来了,小明又把自己的橡皮泥(已经是组件)分别分给了小黄和小绿一块
这时候 小明 小红 小黄 小绿 四人各有一块橡皮泥,除了小红的橡皮泥,其他三人的都是被定义过的橡皮泥
这时候小明把自己的橡皮泥捏成了兔子,小黄、小绿的橡皮泥也变成了兔子,但是小红的没变
这就是组件
定义了A为组件后,调用A使用在1、2、3的场景中,更改A的样式后,1、2、3场景中的A的样式也会相继改变。
1.2 组件如何使用?
下面是创建组件的教程图,原谅我使用粗糙的教程图来表达,我认为这样会更容易理解一些。
2、如何利用组件梳理繁多样式
如果需求中订单的样式真的有如此多,第一件事应该是梳理所有状态并理解它们的业务逻辑,而不建议立马吭哧吭哧上手就干。只有理解业务逻辑后才能更好地梳理信息层级和状态样式。
紧接着就需要梳理所有状态可复用的样式,哪些样式是可复用的,哪些是需要改变的,都梳理出来,这样才能方便我们建立组件。下面就拿最近的一个项目来举例子,这个项目订单有16种状态,订单卡片的样式也有14种,但是我梳理下来发现,有大量可重复利用的组件,于是我利用组件来搭建这些卡片,最后使用的组件也不过几个而已。
看下面的图片,总共也就定义了9个组件。听起来很多,可是后期如果遇到修改,那可少加多少班呢。
那么如何用这几个组件搭建出多种状态,并且清晰得展示出来?
我先对订单卡片的组件进行拆解,将组件分为5个部分,订单卡片的样式不过是替换下图中5个部分的样式罢了。
5个部分又可以细分,如A部分可以分为A-1、A-2,剩下要做的就是拼凑了。是不是简单了。
难点来了,我们自己当然对自己设计的东西非常熟悉了,可是面对这么多状态和样式,开发就蒙了,到底哪种样式对应哪种状态?十几种样式……你让开发咋整??最后实现出来样式和我们设计的不符,这锅是谁背??
为了避免这些问题,将所有样式按订单状态梳理出来是非常有必要的,这会让开发小哥哥少掉些头发……
3、如何将繁多样式输出给开发
建议工具:蓝湖(其它线上协作工具也OK的)
我个人的工作习惯是把所有样式都梳理出来,传到蓝湖,方便开发进行查看。下面就是我梳理的所有状态样式,内容很多,不过足够清晰。
第一张画板是组件拆解,这个主要是给开发的参考,帮助开发小伙伴们进行组件定义。
第二张画板是对所有状态样式的整理……
以上就是我对如何整理繁多样式的一点小心得,如果你有更好的方法,欢迎一起探讨学习。
Powered by Froala Editor
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册