马蜂窝客户端设计升级解析

2019 年底我们对马蜂窝 App 做了小幅改版尝试。优化底导航,一级场景去掉个人中心和目的地。首页整理顶导航结构,重新梳理双流内容横滑逻辑,优化双流卡片;个人中心优化功能入口,露出生产内容。因为时间成本问题,整个改版覆盖页面少,更多是尝试和验证。从数据层面看,整个改版带来了很多积极的变化,验证了部分方向的正确性;

▲ 2019年底的改版尝试

2020 年计划整体跟进视觉升级,所以年初做了针对线上体验的用户调研,同时进行了一次全面彻底的设计梳理。

归纳后发现以下 3 种普遍存在的问题:

 

 

 

来自用户的反馈是:
“ App 用起来感觉很复杂,想找到自己想要的东西是一个很累的过程”

马蜂窝不是一个高频使用软件, 用户对于自己想要的内容,往往更习惯走自己熟悉(被教育过)的路径。对于非常规入口,即便可以缩短体验路径,也很难被发现。同时产品对重点转化节点添加过多的辅助信息,反而形成对主内容的干扰(阅读噪音)。

 

 

 

 

马蜂窝 App 不同页面存在各种五花八门的表现形式,被我们戏称为“设计百科全书”。这样导致给用户体验带来了混乱和错觉感。造成这样现象有以下几点问题:

1. 改版覆盖率低 ,多历史版本共存;

2.产品迭代速度较快,同步不及时,规范外的设计不断出现;

3. 设计成本压缩,拿来主义的设计脱离原有设计体系,App 整体感被破坏;

 

 

 

 

来自用户的反馈是
“感觉越来越像 XXX,慢慢缺少打开的动力”
这个问题存在在两个层面上:
产品层面上缺少深入思考,无法根据自身垂类特点做出差异化。视觉层面缺少对品牌元素的提炼,和统一的透传方式。

根据问题制定本次视觉升级目标

根据目标需要解决三件事:
· 明确品牌性格,提升产品品牌感知
· 建立统一的设计世界观
· 简化产品层次,提升信息转化效率

 

 

 

 

团队内部组织了多次脑暴,通过对产品内容特点的深入梳理和用户画像分析,总结出马蜂窝App 体现出的气质可归纳为:

把品牌性格融入设计细节,通过三个设计层面来体现品牌性格

 

 

 

 

通过线性 Logo 推导的面形辅助图形

使用中,图形的品牌感在认知层面存在成本,图形本身的负形(复杂)也不利于产品层面使用。需要添加更容易识别和应用的辅助图形。

尝试中发现,六边形是一个优质的选择,无论从形状,还是表意,都可以和已有图形形成互补。

六边形的认知成本低,符合品牌调性。
针对六边形的认知我们还做了用户测试。结果显示,六边形更容易被大家认同与马蜂窝品牌之间存在强关联。将六边形融入产品重要节点时,品牌感知得到强化。

▲ 一级页面添加内容按钮

▲ POI 评分

▲ 官方攻略角标

将六边形图案设计在产品的各个细节中,品牌辨识度明显加强

原有色彩体系突出丰富的多彩性,通过色彩多样型来体现年轻化的概念。但过多的颜色反而会弱化品牌感知,不容易聚焦。同时在应用场景中单一追求品牌主色又很难完全满足各方业务需要。

所以经过归纳,将原有的多种颜色优化为 4 种。去除渐变色,只使用纯色,同时提高明度,调整纯度,让新颜色更有活力富有想象

 

 

 

 

质感这部分在结合产品内容特点的同时,还参考了近一段时间较为流行的设计趋势,制定了质感方面需要追求的三个特点:

 

 

 

 

通过对形状、色彩和质感的定义,我们首先对 App 设计感知力最强的业务功能入口(饼区)进行了设计升级。

旧版的饼区设计特点鲜明,尤其是在形状设计上富有品牌的独特性。升级中我们在原有形状基础上融合新添加的六边形进行了微调。

在材质方面也做了多套方案尝试。

方案 a

以统一的品牌色进行设计,可增强品牌透传,但各业务区分度差,业务识别效率低。

 

方案 b

虽然使用彩色方案可以提升业务的分发效率,但是拼色的特点过于复杂,功能辨识弱。

 

方案 c

的质感符合设计所追求的目标,但是图标的重心不稳定,对品牌的凸显也不够强烈。

 

所以最终选择了更简洁通透的叠色风格。

 

颜色方面结合之前梳理的四色结论,调整色彩使用比率:“马蜂窝黄 40%”、“天空蓝 20%”、“酷酷紫 20%”、“热烈红 20%”。加大品牌主色占比

最终方案:

 

 

 

 

改版前一级页面状态:

4 个页面单完全是不同设计体系下的产品,用户使用时不一定能直接表达出视觉上的不适感,但内心的反馈就是混乱复杂

解决这部分问题,设计上需要从 2 个关键点入手---文字栅格规则

 

 

 

 

以首页举例:

仅首页一屏内就有多达 14 种字号、字色和字重。问题表现在:文字样式过多。不同的字号、字色和字重使用过于随意,缺乏节制,导致视觉层次无法拉开,用户阅读困难。

不仅是首页,我们对全端的文字样式占比进行了梳理:

通过图表可以看出,从 10px 到 22px 的文字全都被使用了,这无疑会从阅读上造成一定的混乱,所以需要重新进行梳理和归纳。结合使用场景,将原有 11px、15px、17px、19px、21px、24px 等字号和其他字号进行合并,同时控制使用比例,达到拉开文字间的层次的目的。

 

经过归纳和修改后的占比状态:

 

 

 

 

一级页面中存在的各种模块规则:

不同页面间存在不同的栅格规则,即使在同样一个页面里也存在多种样式,体验上让用户浏览内容的节奏变得混乱,在设计执行层也缺乏使用逻辑,所以需要重新制定一套适合所有内容类型的栅格规则。

保留产品中最重要模块的栅格规则,牺牲其他部分,从而获得一套统一样式。双流是产品容器形态中最重要的浏览模块,同时也是很难作出设计妥协的部分。所以在双流的基础上重设计,定制面向所有的容器的全新规则。新规则将设计世界观统一,可以有效降低用户的阅读成本。

▲ 双流内容中间的间距是5px

从双流中提取最小栅格尺寸 5px ,以此为基数展开布局,我们得到了一组全新的排列规则

然而统一的设计并不能解决所有问题,产品上复杂的表达给用户快速理解内容带来更重的负面影响。

 

 

 

 

简洁设计的根本是提升信息转化效率,不仅是设计,更是产品层关注的重点。结合前面两件事的结论,我们深入一级页面的各个模块,对其一一做了设计优化和升级。

A.顶部导航栏

初始状态存在 4 个功能:搜索福利入口个人中心入口搜索热词两行排布。首先基于内容相关性,将搜索框和搜索热词做紧密的结合。减少内容层级,提升用户信息获取效率。

其次关于个人中心入口。原有方案业务目标是为了让用户沉浸于内容,减少跳出,因此将导航变成简短的收缩入口,个人中心移到右上角,新版基于用户反馈及固有认知习惯,我们还是把个人中心放回底导航最右,为方便内容互动,将消息中心拿回右上角。

福利中心,虽然设计上采用了插画形式以追求视觉突出,但是 CTR 表现低于大盘,所以把它收入个人中心,支持可以通过消息中心透传信息。

 

B.业务功能区

除更新 Icon 风格外,产品层面对这个区域做了重新的梳理。第二行小饼在用户层面缺乏心智。自身数据表现差,并因设计层次上的问题,还拉低了大饼的数据。重新梳理后只保留了自驾一个入口。设计上修改为单行入口形式

 

C.目的地功能区


在首页场景下,用户可以通过添加 Mdd 直接浏览内容。产品需要借助此场景添加进入目的地各个业务的入口。但用户更容易感知的是下面的双流内容,如果需要针对性进入目的地的各个细化场景,则更习惯走搜索路径。所以这里的目的地卡片设计要尽可能提炼重点,去除效率低下分层功能。

改版中,提炼出2个核心任务:
首先是提升对目的地首页的转化,其次是突出马蜂窝的优质玩法。设计层次上拉开与导航视觉空间,追求和下面双流内容打平。

目的地卡片的背景采用重新定义后的色彩,再根据天气的不同对应不同的颜色:

晴天对应热烈红、雾霾和阴天等对应酷酷紫、雨雪天气对应天空蓝。这样设计不但拉开不同目的地卡片的层次,让用户对不同的目的地天气有宏观认知,同时还增强了品牌感知。

D.双流内容区


双流模块在马蜂窝 App 中是主形式,新改版的所有一级页面全部都是以双流结尾, 此模块的设计调整是整个升级改版中的重点。

改版前的存在的双流样式:

主要存在三个明显问题:

信息内容层次复杂,缺乏一致性的设计规则,视觉和交互行为不匹配;

各种角标位置、形式均不统一;

卡片类型繁多,且各种形式强行干扰内容主体阅读;

针对以上问题,重新梳理线上所有双流内容设计。

首先去除卡片表现形式,简化层次,统一容器展现样式。同时按照栅格尺寸规范视图圆角,加大圆角尺寸从 6 px变为 10 px。

去除不同的内容类型所带来的不同展现形式,用类型角标统一取代。并在运营纬度增加统一的运营角标。

将所有的角标固化位置。“类型角标”放置在内容的右上角,“运营角标” 放在内容的左上角。

露出用户人名,统一各种属性元素位置,增加可互动性。

优化后笔记的双流样式:

类型是多篇内容或长内容时,用标题压图的设计方式做区别。

升级后的所有双流卡片设计:

双流内容浏览时。用户根据内容本身来作转化决定,不同形式的附加设计都是对内容的干扰。简单而统一的类型角标就可以方便用户快速识别。

 

升级后和之前旧版对比:

 

 

 

 

目的地是改版中新增加的一级页面,主要是强化用户对旅行垂类产品的认知

目的地存在:

模块堆叠无序,不匹配用户行为路径;

层级复杂,重点信息不突出,获取效率低;

分割样式过多,模块间样式不统一;

等问题。

 

团队通过梳理产品需求,从产品核心目标出发,通过细化需求,整合样式将问题解决。

首先从排序上看,玩乐热销模块 CTR 表现差,说明内容放在首屏不符合用户心智,所以将此模块移至必体验模块之后。

必体验模块定位模糊,玩法和 POI 的混合方式让用户查找困难。拆解这个模块可以给用户更直观的体验,满足用户在目的地的核心需要。

必体验拆分成以玩法和 POI 两者为核心的吃买住玩模块:精选攻略马蜂窝榜单

突出攻略产品优势的同时,可以根据每个目的地的特色进行个性化的榜单定制,满足不同类型用户对 POI 的需求。

从当前的社会环境、产品定位、公司战略以及用户普遍习惯出发,把以攻略玩法为核心内容的精选攻略排在以 POI 为核心的马蜂窝榜单的前面。

确定最终的目的地框架结构为:

A.头部认知


在目的地头部加入当地视频概览,更加生动的增强目的地认知,同时露出视频作者信息强化荣誉感,鼓励内容生产

B.精选攻略


之前的必体验模块问题主要是重点信息不突出、对官方攻略缺乏品牌认知。同时和榜单做拆分之后,需要减小屏占比,提升展示效率。所以设计呈现上,重新梳理了信息优先级,将空间压缩。同时输出统一的官方攻略标识,拉开阅读的层次。

C.马蜂窝榜单


必体验原来的榜单更像是主题 POI 聚合,缺少对榜单的感知和权威性。而且信息层级隐藏较深,阅读效率低下。改版中强调榜单权威认知的同时露出更多 POI 信息,提升获取效率 。用抠图形式突出榜单中的重点 POI ,占领用户心智。品牌色拉开与上下文内容层次的同时,突出品牌感知。

D.玩乐热销


原有的“玩乐热销榜”广告感强,设计规则与上下模块都不统一,文字居中对齐阅读效率差。大卡样式强调整体,弱化单品,而交互的转化行为却是针对单品的。改版中按照新规则分割内容模块,并赋予每个单品差异性的品牌色,强化对单品转化认知。

省级、国家级目的地-热门目的地模块


省级、国家级目的地与城市级目的地不同,它的核心模块是往城市级目的地转化的热门目的地模块。主要问题是:用户对相当一部分目的地中 POI 的认知强过目的地本身,所以改版中把城市里认知高的 POI 做了露出设计,增加转化率

其他模块都按照新规范做了对齐,最后目的地页面改版完的最终效果:

之后的商城首页个人中心也按照全新设计规范进行了改版:

对比改版前,改版后的页面很好地实现了团队制定的视觉升级目标,即
简洁 · 统一 · 有性格

在本次设计升级过程中,对以往改版的一些问题进行了反思。每次大版本设计升级,都具备完善的方案,并建立了相应的设计规范,但最终随着版本迭代都逐渐松散、瓦解。

如何让一套视觉体系有效且长效,是验证升级是否成功的关键。以下几点值得思考:

提升改版覆盖率
保证一级页面可以在可控版本内连续上线,这样体验上的割裂感会大大降低。

一套灵活的设计规范
规范不是一成不变的,它应该随时根据产品变化不断升级,关键逻辑点在于产品的变化。如果产品的需求本身合理且异于之前的目标,设计就应该顺应产品需求做出相应改变,并将新样式同步到设计规范中。

实时同步
规范的“瓦解”大多是因为规范迭代中的同步问题,人与人之间的信息同步会出现很多问题:时间不及时、沟通不到位、 理解不全面等等。推荐使用即时型设计工具,比如 Figma ,其团队组件库功能的实时性和唯一性可以极大降低沟通成本。修改原始组件后,所有相关文件都自动完成同步。

 

以上内容转自:Dribbble & Behance @tommao

3
Fey.Fang

Fey.Fang

学习是进步的基石



微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

马蜂窝客户端设计升级解析
嘿!有什么能帮到您的吗?
返回顶部

显示

忘记密码?

显示

显示

获取验证码

Close