如何利用组件快速梳理 14 种订单样式?

设计师难免遇到多种状态处理,设计简单,可是后期维护才抓狂,学会用组件搭建多种样式的方法让设计一时爽,后期维护一直爽~~~

最近的一个项目中涉及到订单的各个状态,梳理下来多多少少有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的)

我个人的工作习惯是把所有样式都梳理出来,传到蓝湖,方便开发进行查看。下面就是我梳理的所有状态样式,内容很多,不过足够清晰。

第一张画板是组件拆解,这个主要是给开发的参考,帮助开发小伙伴们进行组件定义。

第二张画板是对所有状态样式的整理……

以上就是我对如何整理繁多样式的一点小心得,如果你有更好的方法,欢迎一起探讨学习。

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章