赞助商
立即赞助

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

品牌设计3年前 (2021)发布 流光
3K 0 0

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

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

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

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

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

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

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

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

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

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

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

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

案例:微供场导购首页

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

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

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

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

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

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

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

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

案例1:

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

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

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

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

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

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

案例2:

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

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

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

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

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

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

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

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

继承升:

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

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

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

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

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

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

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

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

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

分图形应:

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

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

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

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

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

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

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

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

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

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

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

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

彩定义的升级:

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

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

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

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

总结

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

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

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

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

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

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

58UXD:表单是收集用户信息的方式。如果你的产品需要收集大量用户信息来完成为其提供的服务,那么在用户进行信息输入的过程中...
实战案例
现在 UI市场越来越完善,在以前 dribbble 等不敢想象的风格都逐渐出现在产品中。那么在现在的市场什么样的「设计」是好的设计...
实战案例
@C7210 :这是一篇来自 Google Translate 团队设计师的改版经验分享。 Google Translate改版经验谈 2018 年底,我们上线了...
Google Translate
经常听到有人说,自己刚做设计,又身在小公司,不懂得正确的设计流程,也接触不到大公司设计的迭代过程,总觉得自己设计流程...
可用性测试
飞猪首页在这两年,经历过无数次大大小小的改造。而在2018年7-8月,我们对飞猪首页进行了尤为重要的,一次较为完整的改头换面...
改版实战
网易UEDC :「网易考拉」 不仅是网易倾注全力打造的电商产品,更是致力为中国用户提供更高品质生活的海购平台。本次品牌体验...
品牌升级
做出一份赏心悦目的设计文档是设计师进阶的必备能力,下面看看 KSO UEC 的文档整理规范吧!希望可以帮助到大家的日常工作。
视觉设计
一、项目背景 百度网盘是百度提供的个人云存储服务,自2012年上线至今,通过强大的技术能力以及承担高额的带宽成本,为7亿用...
品牌升级