利核心而福,画形式以追求视觉凸起虽然设想上采用了插, 表示低于大盘可是 CTR,入小我核心所以把它收,息核心透传消息支撑能够通过消。
织了多次脑暴团队内部组,深切梳理和用户画像阐发通过对产物内容特点的,表现出的气质可归纳为总结出马蜂窝App:
on 风非分特别除更新 Ic,域做了从头的梳理产物层面临这个区。户层面缺乏心智第二行小饼在用。据表示差本身数,次上的问题并因设想层,大饼的数据还拉低了。留了自驾一个入口从头梳理后只保。单行入口形式设想上点窜为。
升级过程中在本次设想,些问题进行了反思对以往改版的一。本设想升级每次大版,善的方案都具备完,应的设想规范并成立了相,代都逐步松散、崩溃但最终跟着版本迭。
我们还做了用户测试针对六边形的认知。显示成果,马蜂窝品牌之间具有强联系关系六边形更容易被大师认同与。产物主要节点时将六边形融入,获得强化品牌感知。
焦点的吃买住玩模块:精选攻略和马蜂窝榜单将必体验拆分成以弄法和 POI 两者为。
要模块的栅格法则保留产物中最重,他部门牺牲其,套同一样式从而获得一。中最主要的浏览模块双流是产物容器形态,出设想妥协的部门同时也是很难作。根本上重设想所以在双流的,容器的全新法则定制面向所有的。计世界观同一新法则将设,用户的阅读成天性够无效降低。
用中使,认知层面具有成本图形的品牌感在,)也晦气于产物层面利用图形本身的负形(复杂。别和使用的辅助图形需要添加更容易识。
中发觉测验考试,个优良的选择六边形是一,从外形无论,表意仍是,图形构成互补都能够和已有。
所带来的分歧展示形式去除分歧的内容类型,标同一代替用类型角。加同一的运营角标并在运营纬度增。
提拔消息转化效率简练设想的底子是,是设想不只,关心的重点更是产物层。件事的结论连系前面两,页面的各个模块我们深切一级,设想优化和升级对其逐个做了。
品劣势的同时凸起攻略产,色进行个性化的榜单定制能够按照每个目标地的特,对 POI 的需求满足分歧类型用户。
小栅格尺寸5px从双流中提取最,数展开结构以此为基,组全新的陈列规我们获得了一则
容浏览时双流内。身来作转化决定用户按照内容本,计都是对内容的干扰分歧形式的附加设。就能够便利用户快速识别简单而同一的类型角标。
原封不动的规范不是,产物变化不竭升级它该当随时按照,于产物的变化环节逻辑点在。合理且异于之前的方针若是产物的需求本身,品需求做出响应改变设想就该当适应产,步到设想规范中并将新样式同。
系统无效且长效若何让一套视觉,否成功的环节是验证升级是。值得思虑以下几点:
App 做了小幅改版测验考试2019 岁尾我们对马蜂窝。底导航优化,人核心和目标地一级场景去掉个。顶导航布局首页拾掇,内容横滑逻辑从头梳理双流,流卡片优化双;化功能入口小我核心优,产内容显露生。成本问题由于时间,笼盖页面少整个改版,试和验证更多是尝。层面看从数据,良多积极的变化整个改版带来了,标的目的的准确性验证了部门;
出丰硕的多彩性原有色彩系统突,表现年轻化的概念通过色彩多样型来。而会弱化品牌感知但过多的颜色反,易聚焦不容。主色又很难完全满足各方营业需要同时在使用场景中单一追求品牌。
理产物需求团队通过梳,心方针出发从产物核,化需求通细致,将问题处理整合样式。
牌色进行设想以同一的品,品牌透传可加强,区分度差但各营业,别效率低营业识。
入本地视频概览在目标地头部加,强目标地认知愈加活泼的增,者消息强化荣誉感同时显露视频作,容出产激励内。
14 种字号、字色和字重仅首页一屏内就有多达 。文字样式过多问题表此刻:。和字重利用过于随便分歧的字号、字色,节制缺乏,次无法拉启发致视觉层,读坚苦用户阅。
贫乏深切思虑产物层面上,类特点做出差同化无法按照本身垂。品牌元素的提炼视觉层面贫乏对,透传体例和同一的。
全体跟进视觉升级2020 年打算,线上体验的用户调研所以岁首年月做了针对,面完全的设想梳理同时进行了一次全。
彩和质感的定义通过对外形、色,的营业功能入口(饼区)进行了设想升级我们起首对 App 设想感知力最强。
公司计谋以及用户遍及习惯出发从当前的社会情况、产物定位、,以 POI 为焦点的马蜂窝榜单的前面把以攻略弄法为焦点内容的精选攻略排在。
计所追求的方针的质感合适设,重心不不变可是图标的,显也不敷强烈对品牌的凸。
设想特点明显旧版的饼区,上富有品牌的奇特征特别是在外形设想。融合新添加的六边形进行了微调升级中我们在原无形状根本上。
排序上看起首从,CTR 表示差玩乐热销模块 ,屏不合适用户心智申明内容放在首,至必体验模块之后所以将此模块移。
同设想系统下的产物4个页面单完满是不,接表达出视觉上的不适感用户利用时不必然能直,就是紊乱和复杂但心里的反馈。
入口、小我核心入口与搜刮热词两行排布初始形态具有 4 个功能:搜刮、福利。内容相关性起首基于,热词做慎密的连系将搜刮框和搜刮。容层级削减内,息获取效率提拔用户信。
分歧的栅格法则分歧页面间具有,面里也具有多种样式即便在同样一个页,内容的节拍变得紊乱体验上让用户浏览,也缺乏利用逻辑在设想施行层,合所有内容类型的栅格法则所以需要从头制定一套适。
App 中是主形式双流模块在马蜂窝 ,面全数都是以双流结尾新改版的所有一级页,整个升级改版中的重点此模块的设想调整是。
以提拔营业的分发效率虽然利用彩色方案可,特点过于复杂可是拼色的,辨识弱功能。
产物内容特点的同时质感这部门在连系,较为风行的设想趋向还参考了近一段时间,要追求的三个特点制定了质感方面需:
过归纳所以经,色优化为 4 种将原有的多种颜。渐变色去除,用纯色只使,高超度同时提,纯度调整,活力和富有想象让新颜色更有。
人核心入口其次关于个。为了让用户沉浸于内容原无方案营业方针是,跳出削减,简短的收缩入口因而将导航变成,移到右上角小我核心,馈及固有认知习惯新版基于用户反,心放回底导航最右我们仍是把小我中,内容互动为便利,拿回右上角将动静核心。
销榜”告白感强原有的“玩乐热,下模块都分歧一设想法则与上,齐阅读效率差文字居中对。强调全体大卡样式,单品弱化,为倒是针对单品的而交互的转化行。则朋分内容模块改版中按照新规,差同性的品牌色并付与每个单品,品转化认知强化对单。
能够看出通过图表,px 的文字全都被利用了从 10px 到 22,上形成必然的紊乱这无疑会从阅读,进行梳理和归纳所以需要从头。用场景连系使,、21px、24px 等字号和其他字号进行归并将原有 11px、15px、17px、19px,利用比例同时节制,间的条理的目标达到拉开文字。
具有各类八门五花的表示形式马蜂窝 App 分歧页面,设想百科全书”被我们戏称为“。带来了紊乱和错觉感如许导致给用户体验。有以下几点问题形成如许现象:
计成本压缩3. 设,离开原有设想系统拿来主义的设想,体感被粉碎App 整;
块定位恍惚必体验模,合体例让用户查找坚苦弄法和 POI 的混。给用户更直观的体验拆解这个模块能够,的地的焦点需要满足用户在目。
场景下在首页,Mdd 间接浏览内容用户能够通过添加 。进入目标地各个营业的入口产物需要借助此场景添加。的是下面的双流内容但用户更容易感知,目标地的各个细化场景若是需要针对性进入,走搜刮路径则更习惯。设想要尽可能提炼重点所以这里的目标地卡片,下分层功能去除效率低。
个高频利用软件马蜂窝不是一,己想要的内容用户对于自,悉(被教育过)的路径往往更习惯走本人熟。常规入口对于非,短体验路径即便能够缩,被发觉也很难。点添加过多的辅助消息同时产物对重点转化节,的干扰(阅读乐音)反而构成对主内容。
是主题 POI 聚合必体验本来的榜单更像,感知和权势巨子性贫乏对榜单的。级躲藏较深并且消息层,率低下阅读效。同时显露更多 POI 消息改版中强调榜单权势巨子认知的,取效率 提拔获。中的重点 POI 用抠图形式凸起榜单,户心智占领用。文内容条理的同时品牌色拉开与上下,牌感知凸起品。
的地首页的转化起首是提拔对目,蜂窝的优良弄法其次是凸起马。与导航视觉空间设想条理上拉开,双流内容打平追乞降下面。
标固化位置将所有的角。置在内容的右上角“类型角标”放,放在内容的左上角“运营角标” 。
不克不及处理所有问题然而同一的设想并,理解内容带来更重的负面影响产物上复杂的表达给用户快速。
息不凸起、对官方攻略缺乏品牌认知之前的必体验模块问题次要是重点信。做拆分之后同时和榜单,小屏占比需要减,示效率提拔展。计呈现上所以设,消息优先级从头梳理了,间压缩将空。的官方攻略标识同时输出同一,读的条理拉开阅。
片表示形式起首去除卡,条理简化,展示样式同一容器。寸规范视图圆角同时按照栅格尺,px变为 10 px加大圆角尺寸从 6 。
前梳理的四色结论颜色方面连系之, 20%”、“酷酷紫 20%”、“强烈热闹红 20%”调整色彩利用比率:“马蜂窝黄 40%”、“天空蓝。主色占比加大品牌。
对应酷酷紫、雨雪气候对应天空蓝好天对应强烈热闹红、雾霾和阴天等。同目标地卡片的条理如许设想不单拉开不,的地气候有宏观认知让用户对分歧的目,了品牌感知同时还加强。
与城市级目标地分歧省级、国度级目标地,的地转化的抢手目标地模块它的焦点模块是往城市级目。地中 POI 的认知强过目标地本身次要问题是:用户对相当一部门目标,的 POI 做了显露设想所以改版中把城市里认知高,转化率添加。
为规范迭代中的同步问题规范的“崩溃”大多是因,间不及时、沟通不到位、 理解不全面等等人与人之间的消息同步会呈现良多问题:时。时型设想东西保举利用即,igma 好比 F,独一性能够极大降低沟通成本其团队组件库功能的及时性和。始组件后点窜原,都主动完成同步所有相关文件。
|