产品迭代中，如何做到视觉设计的继承和升级

一个产品从步到趋成熟通常要经历次迭代。在个程中，对视觉设计师而言，如何在不断变化品保持设计延续，时又能够有所突破，应该是大多数都曾经临或正在临问题。

文将阐述自己在产品次改版中视延续方面的思考总结，以微供市场次改版为例，与大家探讨产品迭代中何做到视继承与升级。

一、视觉表现为何要在迭代中有所继承？

从用户的角度，果一个业务/产品的每个版的设计表现完不一样，么用户要不停的去理学习新的版。同时，也不此业务/产品在用户中的品牌心智建立。一个成熟的设计表现，一定是经深刻的思考，在表现的背能够抽取被继承的设计延续之「道」。

例如，iOS6到iOS7，从拟到扁平的颠覆性表层变化。但依然被继承下的精髓，比如标志性的圆角 icon 流畅的交互体验。

二、如何在迭代中做到视觉的继承与升级？

1.「向前看」- 分析自己接手的业务/产品当前的设计状态

一般设计师负责一项业务/产品分为两种情况：

• 你是这个业务第个设计师，业务目前没有任何设计出。
• 此业务之前已有设计师，并进行一设计成果。

如你是第，那么恭喜你将跳过第个环节。在接下来案例，本文作者临正是第情况：接手业务时，前已有设计师进了版设计。此时需要前位设计师了解楚前设计理念，分析思考前序设计是否能够或者有哪些理念能够在后设计继续被应用。

前序设计理念至关重要，能够帮助规避掉之设计中的一问题：

• 慎思考新设计是否要有巨大区，避免大颠覆性设计出用户端造成认知异；
• 当你要对前序设计进行升级时，从容面对来自其他方面的质疑。

案例：微供场导购首页

微供场简介：微供场是1688，针对社交电商（微商）群体供专属货源、代发务、订单管的一式社交分销货源务场。

接手微供市场时，从前位设计师处了解到下页设计理念：如下图。分析设计理念在目前视觉表现上，找出问题。过第步「内看」，判断理念正确与否，是否继承。

2.「向内看」- 洞悉业务的本质，从内在差异思考表现层设计

如果一个务/产的视觉表现在断迭代的多版本中，每一次都有着颠覆性的变，没有丝毫的传承。那么几乎可肯定，在设计之初一定是直接从表现层发，而非向形式领悟为何要这么设计的深层原因的「道」。

如何从业务本质洞悉设计延续「」？

基将要开始设计的业务/产品，问自己三个问题：

• 业务/品区于其他内容特色是什么？
• 业务/产品的核心用户的特点是什么？
• 联起业务/产品用户的场景什么？

案例1：

可以过下图帮助自己不遗漏，从左到右，跑条线，必须要回答业务表三个问题。以微供改版视觉设计前思考为例，个里各业务线今年提到高频词「、货、场」，此我将上边三大问题内容换成「、货、场」做解答。

• 务/产区别于他的容特色是么？——「区别与大场的独特私密货源」
• 业务/品核心用户特是什么？ ——「社交分销买家（微商）」
• 串联业务/产品和用户的场是什么？ ——「基关系的易场」

根据答案，分别脑爆键词语，更丰满的描述「人货场」特征。抽取最核心的词语作为设计键词，并保留描述这些键词的扩展词语。

对于户的分要再深入思考，从多维细户画像，从中推导设计原则调性。

案例2：

从微供核心户的「人群特征、生意特征、工作环境」建立立体的户画像。得柔和、克制、统一的大视觉原则：

• 柔和：性妈为主要群体，多为个人兼职，做熟人生，货源追求差异品质化。所以要避免集市的喧闹。
• 克制：社交熟人系的生意，若长久必克制。
• 统：用户碎片移动端进货体验，避免复杂视觉和交互表现，尽量统，降低成本。

最终，在向内深挖业问题和用户的基础上，得出如下的计之「道」。

当对将要着的业／产品计之「道」有了的理解诠释之后，再回过头去之前的计。首先，计理念部的「品质」和「亲近暖心」符好货源及调性柔和的理念。其次，先前表现层的比如留的排版，线性的 icon 都是能够被沿用，在新的计中继续体现计理念的部。

经过继承和升级的第一次迭代版本：

继承升：

色彩：根据计核心的「社交关系」，推导扩展社交中的人情味，亲近以及沟通的活力。再结供源1688的业属性，在有红色基础上增加了能够给人以温暖亲切的橙黄色，中和得出了新的供主色。根据「柔和、克制」则，在界面表现上，控制主色使用面积，仅在关键操作提示及殊内容调应用。

如果一开始没有上面的向思考，直接从表象发的话，结果很可是摒弃掉之前的暖色系色彩，微信的绿色系作为色。但是，经过深入思考后就会发现，虽然我们的户是「微商」，但是真正的定义是社交电商，而微信只是中一条目前体量较大的渠道而已。如果某天微信的颜色变，或者再是微商的要渠道，那么我们的产颜色是否要调整？

Icon：保留了图形的行 icon，并进行了全的绘制，每个转角都采圆角绘制，每个 icon 看起来更圆润，更生，具有亲和。

设计布：界面当中，各之间增留白间隔，灰色的中性色及质大图突场好货的质感。每个专题，通过规范严格控制营质量，大色与图片同色系的配色，跃界面氛围。同时在配色的取上遵守「柔和」原则。

核心图形元素取：取游售卖过程中的键场景，进行图形取和拆解。通过图形升级微供感官识别信息，形色质构立体的传递务/产第一眼感受。

分图形应：

3.「向外看」- 保持对设计趋势的热情，结合业务状态反思升级

每视觉设师都对设流行趋势都天然的敏锐度，摩拳擦掌总希望新版本中运用流行趋势。但并不所流行的设趋势都可以「拿主义」。对待趋势，应该结合业务当下的变化需求辩证的去看，这一向内看与向外看不断循环往复的过程，行业流行与业务需求中不断寻找平衡点。这也考验设师审辨析能力的时候，怀设的同时，清楚的知道什么可以，什么不可以。

案例：微供市场第二次迭版本

根据对设计流行趋势的收集分析：无框式、更大的标题字、区块间隔弱化、照素材的应用等是当下界面设计中流行的应用趋势。结合当前业务的展变化：

• 用户群体变化：逐步成长，从单经开始有更多下级代理；
• 业务模式的变化：从代到分销的升级；
• 买家运营模式的变化：划分买家级，重点运营腰部以买家给予相应权益。

业务和用户在趋成熟，因此在产品界面视表现上：减去之前的修饰成分，去掉之前卡通化的 icon，将之前有浮表面的图形元素，更克的融界面骨血之中。让整视表达升级到更加成熟的。

UI界面趋势收集：无框式、的标题字体、区块间隔弱化、真实照片素。

结合业务变化升级的视部分：

彩定义的升级：

业务买家划分等级并予相应权益，过视觉用户传递价值感知：

总结

最后，将上述产迭代中的继承与升级心得总结如图。

一个成熟的视觉进过程，实就是设计师本身突破自身专职维的深入思考，从表层视觉思维到逻辑分析思维的转变。串联起整个视觉进过程的是设计师源自心对设计的热情，对已有设计成果的自我反思和断审视，在设计的每个阶成果都经得起推敲的前，依然够做令产焕然一的视觉表现。

欢迎关注「阿里巴巴UED」的微信公众号：