设计思维的“断舍离”—以云市场首页改版3.0来谈

用户头像
北京/网页设计师/6年前/2530浏览
设计思维的“断舍离”—以云市场首页改版3.0来谈

设计思维的“断舍离”即遵循清晰、简约和轻量的设计原则,整理繁杂的元素,优化布局,让页面更舒适的设计理念。

一. 前言

 断舍离的概念起源于瑜伽的修行哲学—“断行”、“舍行”和“离行”,即斩断欲望、脱离执念。后被日本杂物管理咨询师山下英子用在聚焦于人与物的关系行动上,这就演变成如今大家熟知的“断舍离”,即通过收拾物品来了解自己,整理自己内心的混沌,让人生更舒适的行为技术。换句话说,衍生到设计思维的“断舍离”即遵循清晰、简约和轻量的设计原则,整理繁杂的元素,优化布局,让页面更舒适的设计理念。实际上,在云市场整个项目设计过程中,我遇到过很多问题而且一直在思考:作为一个B类电商平台,百度云云市场需要什么样的设计?对于这种以价格取胜的企业级服务型的产品,又只有一个全人力设计师支持的条件下,我能做到哪些呢?再有,市场上的电商平台大多以牺牲美观为代价,换上臃肿的布局,亮丽的色彩以换取流量,在信息过载的今天,我们应该做一个怎样的立体化品牌建设区别于竞品?本文以云市场改版3.0为例,谈设计思维的破局及首页品牌建设的一次过程。


二. 什么是断舍离

  断舍离是什么?断=断绝想要进入自己家不需要的东西;舍=舍弃家里到处泛滥的破烂儿;通过不断重复断和舍,最后会到达这样的状态:离=脱离对物品的执念,处于游刃有余的自在的空间。

  

  同理,什么是设计思维的“断舍离”?断=断绝繁杂的视觉流程和操作流程,降低用户学习成本、缩短使用流程;舍=舍 弃不必要的视觉元素甚至设计形式,让页面中最重要的元素实现其预期的效果;离=脱离对元素的执念,使整体结构清晰,功能明确。

  

  云市场3.0就是遵循这样的设计理念进行改版工作,希望通过发散设计思维来给用户带来清晰、简约和轻量的页面效果。


三. 断舍离的思考法则


1. 以用户为核心,把时间轴放在当下

  断舍离必不可少的思考法则即先学会"舍","舍"得秘诀就是完全以用户和业务为中心,并且以当下为时间轴进行思考就行了。


以用户为轴心

  假如这里有一副我正在用的眼镜,我拿着这副眼镜对你说“请用吧”,你也不一定会用。可如果要是问这副眼镜是不是“能用的眼镜”,答案显然是“能用”,也就是说它是可以被使用的。同样是可以用的东西,对它的判定却是因人而异。这就是说,能用的东西和我用的东西是不同的。那么,单单只是因为能用就留在那里的东西是不是很多呢?这是让物品当了主角的状态,物品原本是因为“我用”才有价值,如果拿物品当了主语,把焦点聚在了物品的状态。

  带着这种观点再回来看看我们的云市场首页,你就会发现,只要是空白的地方,就全都塞满了入口。也就是说,聚焦在这些模块上进行设计,只不过在做垃圾分类。如果大量累积类似这样的东西,就会降低首页的品质。其实从PV和UV上来说,他们已经没有存在的必要了。所以,在考虑模块是否应该被留下时,思考的主语是“用户”,而不是模块本身,这样,才能形成正确的思考模式。

 

了解当下的业务

  为了让大家更容易理解设计与业务之间关系的变化,我们把这种关系置换成人与物的关系来看看。就好比被各种物品堆满的房间里,有很多物品已经是根本没用的垃圾,这是不是会让你觉得不舒服呢?如果再稍微提高一点,四周都是垃圾上升到了四周都是必备品的阶段。此时,数量会比前一个阶段有所减少,你是否也会觉得轻松一点。如果再往前发展一步,就到了需要确认物品是否真的有用的阶段。这个阶段,就要引入时间轴的概念了。也许某样物品曾经是对你很重要的宝贝,会让你涌出对过去的怀念和留恋。但在今天,这样物品对当下的自己来说,已经不必要了。这种时候,就应该送给谁,或是送去二手店,或是扔掉。反复几次之后,你就能渐渐发现对当下的自己来说,什么是不必要的了。如果还能持续进步的话,就能到达最高的级别—只选择必需品,而且自己又喜欢的东西的阶段。

  同理,置换成设计与业务之间的关系后发现,云市场首页改版3.0由以下几种原因构成:

  1. 业务策略变化

  2. 信息传达混乱

  3. 视觉风格老旧

  首先,有一些业务已经是无人管理甚至淘汰的状态,有一些业务已经迭代优化,或者策略和内容调整,却依然霸占着有限的空间。其次,如果再深挖一点,引入时间轴的概念,也许某项业务过去是产品经理或是运营主推的,可以带来很大的收益,但在今天,这项业务已经停止发展,甚至有所亏损,这时这种业务就应该减少投入,或是直接砍掉,不然会导致框架结构繁琐,布局得不到合理利用。最后,有一些意义不大的视觉元素和设计形式,让页面中最重要的元素达不到预期的效果,且已经跟不上设计潮流。如果将以上这些痛点全部解决,视觉效果会变得更加简约,操作流程会变得更加清晰,提升整站的用户体验。所以,针对以上三点问题我们得出我们的设计目标是清晰、简约和轻量。


2. 理清改版的整体目标

  改版就像扫除一样,需要收拾和整理,以及表现为扫、擦、刷的打扫,在断舍离里,即筛选出必须的物品。

  经济学里有个众人皆知的80/20原则,说的是“80%的营业额都是由20%的营业员达成的”。按照这个意思,80/20原则也可以说成是巨额的成果是由少数业务创造的经验原则。因此改版的整体目标则是清晰、简约和轻量,通过产品、视觉、动效设计来推动改版。

  1. 业务策略变化引起的内容变化,主要指人工智能、数据应用和区块链等新类目接入云市场,旧版无法承载其内容,希望为用户提供更加丰富、精准的内容和服务。

  2. 信息传达混乱引起的内容变化,主要是因为界面布局和配色缺少逻辑性,导致页面不够简约;头图占用首屏空间过多,首屏利用率低。因此,希望通过改版带来全新的用户体验。

  3. 视觉风格老旧引起的用户流失;整体风格过于活泼且图形太强眼,没有塑造出安全、稳定、高效的视觉氛围,不符合B 类电商用户的心理预期,希望通过立体化品牌提升用户的留存和转化。


3.从信息过多到知行合一

  中国有一种相术,比如手相、面相、风水等等,通过对外在形象的观察分析,观测人的命运。这并不只限于占卜术一类的东西,中医的望诊(通过脸色、舌苔等外在表象判断人的体质及症状)也一样,通过看得见的世界中的信息,判断藏于表象里面的那个看不见的世界状况。

  断舍离中也有“相”这个概念。就像网站的状态往往会呈现出产品的一些问题。更多地了解看得见的页面,以让产品变得更好,这就是断舍离的宗旨。可是,在断舍离当中,首先要了解首页的“相”,然后通过“舍”和“断”这样的行为,就能使首页发生巨大的变化。换句话说,通过仅占4%到15%的“看得见的世界”的变动,让“看不见的世界”一起发生变化。因此,云市场立体化的品牌建设首先要从首页改版切入。


四. 断舍离的实践方法

  了解完业务,并且知道解决思路后,接下来就要从目标用户着手,了解他们是谁?他们有什么特性?他们有哪些需求?云市场业务的目标用户为中小型企业及个人。分布于各类应用场景,且技术水平偏低,对建站、镜像、安全、运维等应用层服务需求强烈,同时部分大型客户解决方案中缺乏应用层产品支持。主要涉及行业为;金融、保险、区块链、安全、医疗、招商、暴利零售行业等。而我们的目标用户的核心关键为企业的上层决策者,即决定企业的发展方向的领军人物。因此根据业务诉求、用户诉求及改版痛点,我们抽象提炼出3个关键词:清晰、简约和轻量。

  这一点主要是用户价值的具像化,并推导出如何实现用户价值的设计目标,用户价值即用户清晰地知道首页的结构逻辑,知道如何选择服务能更有效地解决问题,更高效地触达内容。设计思维的“断舍离”可以帮助设计师整理需求,梳理判断整体结构,将现有功能进行优化布局或者精简合并,提供更显性化、匹配度更高、更丰富的视觉层次设计。

  

  基于整个链路来思考用户体验,即用户从触达到离开产品的整体体感流程,得出在关键节点提供内容和用户预期的匹配度越高所带来的用户体验越好。从整个链路可以看出,首页对于用户来说是核心体验部分,所以首页的品牌建设显得尤为重要。

  好的设计既可以提升功能体验,又可以关注内容本身,因此应充分利用屏幕。经过头脑风暴,分析产品维度,将从表现层入手,按分屏设计,解决结构层和框架层的问题。通常用户浏览路径和推荐内容的匹配度相关,所以分屏设计能够更好地保证用户信息的触达和转化效率,更好地帮助我们拆分用户需求,并抓住核心诉求及视觉,从而匹配更有效的内容。

  首屏这个相当于用户来到一个商场的门口,此时用户最想获得的信息应该是布局形式、路标导购和关键信息。那么对于网站来说,用户最想获得的信息即导航、目录和banner。不同于C类电商,对于B类电商平台而言,特别是云产品的用户,目标需求是很明确的,他们清楚知道自己需要什么,因此应该在旧版首页基础上进行设计思维的“断舍离”。

“断”即断绝繁杂的流程,去除不必要的视觉元素甚至设计形式,突出页面中最重要的元素;降低用户学习成本,梳理整体结构,优化功能布局或者精简合并;缩短使用流程,优化视觉流程和操作流程。

  

  为了达到清晰的目标,我们需要理清逻辑、合并布局,然后经过竞品分析、以及不断思考和验证,我们将导航拆分为两级导航,使官网和云市场的功能分隔更加清晰,去掉多余的颜色,使服务商入驻这种不那么重要的功能和其他功能合并安放,使得搜索及发布需求这样的重点功能能够突显。

  

  为了达到简约的视觉效果,去掉了图标,因为B类产品的图标其实并不能完全表达产品的含义;取消了颜色倾向,不在页面上出现多余的色彩。

  

  头图缩短至400像素,既彰显了其重要性,也不会霸占太多空间;通过色彩以及留白来打造简约的概念,头图采用当下流行的莫兰迪灰彰显品质感,并且规范了布局样式,图形主要聚集在右侧,使画面显得整齐干净。

  

  广告位从平铺改为有主次的样式,便于运营推广和提高点击率。大量留白,增加透气感,为了使页面显得简约又能引起用户的注意。因此,将动效引入,使得广告位显得轻量,又能达到良好的效果。


  那么图形的处理也是按照品牌当时的定义,根据几何图形来绘制产品图形。

  

  除了云市场首页,我们还做了品牌字形延展的子品牌设计—优选商城,这是一个集合了云市场所有精品的平台,其中文字logo更加修长、细腻,区别于云市场方正的感觉。


结语

  百度云云市场的这次首页改版实际上是一次快速迭代改版需求,如何能在不改动页面框架得同时,又能给人耳目一新的感受是此次改版的痛点及难点,虽然设计思维的断舍离在云市场首页改版过程中发挥了一定的作用,但是也存在一定的局限性,但是思考方法值得大家借鉴。

  最后,感谢各方同学对于此次改版的付出,在耗时一年的推进改版上线的过程中,自己也收获颇丰,不仅提升了产品方向的思维能力,同时也锻炼了行为方向的推动能力,协调各方资源,终于在2019年初推动上线。借事修人,借人成事,希望与大家共勉。





26
举报
|
47
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
卡通风格网页页面3D渲染
网页设计——纸杯蛋糕
B19【星空诗意&网页幽灵按钮】公司产品服务简介汇报
卡通风格网页页面3D渲染
女生坐在网页面前办公矢量插画
互联网,互联网插画,商务,数据,项目,合作,精准,投放,网页插画,插画,大数据,智能,商业,网页,网页设计,插画设计,互联,未来,交流,沟通,渐变
一个男生和两个女生站在网页前面打招呼矢量
男生和女生站在网页面前矢量扁平插画
网页页面矢量插画
运动风人物插画
四个人物分别在上网贴纸合集
三个青年站在网页周边矢量插画
男生坐在网页面前办公矢量插画
浏览电脑网页的元素
网页背景
卡通风格网页页面3D渲染
三个青年正在装修网页矢量插画
网页电商背景矢量插画
卡通风格网页页面3D渲染
卡通风格网页页面3D渲染
三位美女围着网页看信息矢量插画
卡通女孩与网页表格3D渲染
商务网页
互联网,互联网插画,商务,数据,项目,合作,网页插画,插画,大数据,智能,商业,网页,网页设计,插画设计,互联,未来,沟通,渐变,蓝色插画,商铺,覆盖,管理,项目管理,效率,提升,高效,关系,拓展,
一个人拿着优惠券准备支付购物电商矢量插画
你可能喜欢
大家都在看
登录注册