相关分类
photoshop教程
Illustrator教程
CorelDraw教程
painter教程
Indesign教程
UI设计教程
sketch教程
设计理论
飞特网 顶部通栏广告

视觉流进化论,产品迭代中的视觉继承与升级

正言发布于:2018-4-23 09:59 |原作者: 阿里巴巴_UED|
正言
广东省 深圳市 
发私信 + 关注
简介: 前言:一个产品从起步到日趋成熟通常要经历多次迭代。在这个过程中,对于视觉设计师而言,如何在不断变化的产品中保持设计的延续,同时又能够有所突破,应该是大多数人都曾经面临或正在面临的问题。本文将阐述自己在产品多次改版中视觉延续方面的思考总结,以微供市场多次改版为 ...

前言:

一个产品从起步到日趋成熟通常要经历多次迭代。在这个过程中,对于视觉设计师而言,如何在不断变化的产品中保持设计的延续,同时又能够有所突破,应该是大多数人都曾经面临或正在面临的问题。

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

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

从用户的角度,如果一个业务/产品的每个版本的设计表现都完全不一样,那么用户要不停的去理解学习新的版本。同时,也不利于此业务/产品在用户中的品牌心智建立。一个成熟的设计表现,一定是经过深刻的思考,在表现层的背后能够抽取可被继承的设计延续之"道"。

例如,iOS6到iOS7,从拟物到扁平的颠覆性表现层变化。但是依然有被继承下来的精髓,比如标志性的圆角icon和流畅的交互体验。

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

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

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

1)你是这个业务的第一个设计师,业务目前还没有任何设计产出;

2)此业务之前已有设计师,并进行了一些设计成果。

如果你是第一种,那么恭喜你将跳过第一个环节。在接下来的案例中,本文作者面临的正是第二中情况:接手业务时,之前已有设计师进行了一版设计。此时需要向前一位设计师了解清楚之前设计的理念,分析思考前序设计是否能够或者有哪些理念能够在后面的设计中继续被应用。

了解前序设计理念至关重要,能够帮助规避掉之后设计中的一些问题:1.慎重思考新设计是否要有巨大区别,避免重大的颠覆性设计产出对用户端造成的认知差异;2.当你要对前序设计进行升级时,从容面对来自其他方面的质疑。

案例:微供市场导购首页

微供市场简介:微供市场是1688旗下,针对社交电商(微商)群体提供专属货源、代发服务、订单管理的一站式社交分销货源服务市场。

接手微供市场之时,从前一位设计师处了解到的当下页面的设计理念:如下图。分析设计理念在目前视觉表现上的点,找出问题。通过第二步的"向内看",判断理念正确与否,是否继承。

视觉流进化论,产品迭代中的视觉继承与升级 飞特网 设计理论

FEVTE编注:更多平面设计理论学习请访问飞特网平面设计理论知识栏目,地址:https://www.fevte.com/plan/shejililun/

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

如果一个业务/产品的视觉表现在不段迭代的多版本中,每一次都有着颠覆性的变化,没有丝毫的传承。那么几乎可以肯定,在设计之初一定是直接从表现层出发,而非向形式以内领悟为何要这么设计的深层原因的"道"。

如何从业务本质洞悉设计延续之"道"?

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

1)业务/产品区别于其他的内容特色是什么?

2)业务/产品的核心用户的特点是什么?

3)串联起业务/产品和用户的场景是什么?

案例:

可以通过下图帮助自己不遗漏:从左到右,跑通每一条线,就必须要回答业务表达的三个问题。以微供改版视觉设计前的思考为例,整个阿里的各业务线今年提到的高频词"人、货、场",因此我将上边三大问题点的内容换成"人、货、场"做解答。

1)业务/产品区别于其他的内容特色是什么?——"区别与大市场的独特私密货源"

2)业务/产品的核心用户的特点是什么? ——"社交分销买家(微商)"

3)串联起业务/产品和用户的场景是什么? ——"基于社交关系的交易场景"

视觉流进化论,产品迭代中的视觉继承与升级 飞特网 设计理论

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

视觉流进化论,产品迭代中的视觉继承与升级 飞特网 设计理论

对于用户的部分要再深入思考,从多维度细化用户画像,从中推导出设计原则调性

案例:

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

柔和:女性宝妈为主要群体,多为个人兼职,做熟人生意,货源追求差异品质化。所以要避免集市感的喧闹。

克制:社交熟人关系的生意,若长久必克制。

统一:用户碎片式的移动端进货体验,避免复杂的视觉和交互表现,尽量统一,降低成本。

视觉流进化论,产品迭代中的视觉继承与升级 飞特网 设计理论

最终,在向内深挖业务问题和用户的基础上,得出如下的设计之"道"

视觉流进化论,产品迭代中的视觉继承与升级 飞特网 设计理论

当对将要着手的业务/产品设计之"道"有了自己的理解诠释之后,再回过头去看之前的设计。首先,设计理念部分的"品质"和"亲近暖心"符合好货源及调性柔和的理念。其次,先前表现层的比如留白的排版,线性的icon都是能够被沿用,在新的设计中继续体现设计理念的部分。

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

视觉流进化论,产品迭代中的视觉继承与升级 飞特网 设计理论

继承与升级:

色彩:

根据设计核心的"社交关系",推导扩展社交中的人情味,亲近感以及沟通的活力。再结合微供源自1688的业务属性,在原有红色基础上增加了能够给人以温暖亲切感的橙黄色,中和得出了新的微供主色。根据"柔和、克制"原则,在界面表现上,控制主色使用面积,仅在关键操作提示及特殊内容强调处应用。


123下一页
15

好评
8

差评

刚表态过的朋友 (23 人)

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • shero杨

正言
广东省 深圳市 
+关注 发私信

最新评论

您需要登录后才可以评论和提交作业 登录 | 立即注册
本周热点文章
2020 新飞特 从心开始
关于飞特| 广告服务| 付款方式| 版权申明| 网站地图| 联系我们| 加入我们| 举报| 帮助中心| 移动版| 手机版| 飞特网

委托设计