编辑编者按:你是否常常会真的结构设计的页面太过复杂不如简约?如何才能变得简单呢?第一集该文中,作者根据自身事例,解决了模块粗陋、使用者新体验欠佳、听觉结构设计杂乱等难题,推荐想学习中文网站结构设计的社会群体阅读。

网站改版(网站改版需要多长时间呢)-第1张

从业人员多年,无从辨认出两个令人恐惧的事实,当数据成为来衡量考核制度的绝对指标,两个商品好像或许会走呆板和失序。——主导者们挥动着OKR的匕首,在仅有的区域内成义。

你拿了两个出口处,他就要弱化按键,网络流量不如数量来凑,实在不行动效也行。

主导者领到结果,令人满意退场,但难题却一直留了下来。

酷育全站正因如此。前后十年,他们从结构设计工具的导流平台逐渐普遍化,主页异萼着各种模块,使用者寻找文本的方向不得不变长。而与此同时,公司不断攻城略地,主页的文本架构也极难支撑起酷育从家居到实值的战略政治理念。

所以这一次,他们沉腕拨镫、量身定制,终于迎了崭新的全站3.0。

从表述难题起程,他们有所作为,去进行了数据挖掘和新体验走查,辨认出所有的难题能具体来说到3个方向:模块粗陋、使用者新体验欠佳、听觉结构设计杂乱。如前所述以上,他们确定了他们的结构设计策略,即:文本去肿、新体验取向、听觉升级换代:

网站改版(网站改版需要多长时间呢)-第2张

于是他们的结构设计关键字也就独断:

网站改版(网站改版需要多长时间呢)-第3张

一、柔和:从呆板重回科学规范

做商品很容易中延展效应的陷阱,真的商品方法论能等同使用者理解。他们做自然生态、做自然生态圈,把商品商业价值剖析得井然科学规范,并逐个波洛吉区使用者,但使用者虽则自己看到的是什么、这是不是他想的,对你的商品商业价值根本不在意。

愿景美好,现实惨淡。他们从使用者行为热力图中能辨认出,全站主页的滚屏衰减非常严重,除去工具出口处开始结构设计外,只有优秀结构设计有一定量的点击,而其余如社区、变现、品牌馆等文本鲜少有人问津。

网站改版(网站改版需要多长时间呢)-第4张

那么,怎么让日益呆板的商品形态重回柔和,是这次更新的重点。他们为此进行了如下升级换代:

1. 模块精简

在前期调研中,他们收到了很多使用者吐槽,通过整理分析,他们辨认出全站主页的难题能归结为三个点:卡片样式太多、文本更新迟滞、质量良莠不齐。所以在这次更新中,他们把低访问、不维护的模块全部舍去,只在主页留下了结构设计模板和优秀结构设计。

网站改版(网站改版需要多长时间呢)-第5张

同时他们也联同运营去优化了文本分发机制,并在算法推荐后设置了人为关卡,通过审核标准的建立,去保证主页UGC文本的质量。

网站改版(网站改版需要多长时间呢)-第6张

2. 导航瘦身

双导航被诟病已久,层级难处理、出口处太混乱,几乎每个结构设计师们都在子频道结构设计时骂过娘。这一次他们双管齐下,不仅合并了双层导航,同时也对此前积微成著的出口处进行了归纳和统一,在符合目标的同时,让一切井然科学规范。

网站改版(网站改版需要多长时间呢)-第7张

二、体贴:把使用者当成主角

十年,对两个商品来说已然很长。他们走了太远,回过头想想,他们真的做到使用者至上了吗?

所以在这次更新中,使用者是他们当仁不让的主角,大架构下的每个改动都为了更贴近使用者。

1. 你想的,给你更多

酷育的核心依旧是快速出图的云结构设计工具,他们从数据辨认出,68%的使用者在进入酷育全站后的行为就是去工具,而结构设计模板就是他们为此新增的模块。

使用者能直接选择模板,一键生成方案。同时他们通过场景的细分去呼应更大的人群,这也收到了大量的使用者好评。

网站改版(网站改版需要多长时间呢)-第8张

2. 瀑布流,看得更自在

使用者的主要动线是找参考→做方案,而找参考的逛街感,和瀑布流非常契合。所以他们将优秀结构设计瀑布化,这让使用者能拥有更流畅的浏览新体验。他们也去解决了标签多而杂的难题。通过代码取色、色值校准,他们使标签和文本协调统一,真正用图说话。

网站改版(网站改版需要多长时间呢)-第9张

3. 每一块屏,他们都不放弃

如前所述后台统计,他们辨认出使用者的屏宽在1280px-2560px之间不等,尺寸相当悬殊。如果采用APP式的一套通吃,无法让所有使用者拥有优质的新体验。——所以这次他们不仅要保持大屏完美,也要让小屏令人满意。

他们分析了多种布局解法,最后制定了一套适合全站文本的卡片化响应方案。

他们把元素拆分成两类:一是字号和间距,他们设置了屏幕断点,在不同断点使用不同的动态数值;二是文本卡片,他们设置了基准卡片大小,通过公式去计算出动态像素里单个卡片的数量和大小。

网站改版(网站改版需要多长时间呢)-第10张

同时,文本的露出率也非常重要,通过难题走查,他们配置了一套动态适配规则,以保证所有使用者能拥有完整、舒适的浏览新体验。

网站改版(网站改版需要多长时间呢)-第11张

三、未知X:来点听觉催化剂

不同的听觉意向会与商品发生奇妙无穷的化学反应,未知的X将渗透到感知和功能的方方面面。这个X应该是什么呢?形而上的结构设计推导并没有给他们答案。最终他们决定重回本源,落归到家居→实值的实处进行脑暴,并聚焦在了三个关键字上:

网站改版(网站改版需要多长时间呢)-第12张

但是温度不免局限于家居,科技酷炫但太冰冷,光影对于空间的表达、美好的折射,成为了团队内外的一致选择:

网站改版(网站改版需要多长时间呢)-第13张网站改版(网站改版需要多长时间呢)-第14张

1. 听觉语言

改头换面不是每次更新的必须,结构设计师不以大刀阔斧来证明自己的存在感,更重要的是能去找到使用者感知和实现成本的平衡点。

如前所述合适的原则,他们从色彩、质感、图标这三个方面进行提炼,去表述了酷育全站新的听觉语言。

色彩:原有的品牌蓝并无过错,他们沿用并对之进行了流体演绎。同时他们规范了功能色的使用,避免重蹈乱的覆辙。

网站改版(网站改版需要多长时间呢)-第15张

质感:新拟态很火,也和他们很合。通过对结构设计系统中border-radius、box-shadow等听觉token的表述,他们实现了一套轻量且富有层次的组件主题。

网站改版(网站改版需要多长时间呢)-第16张

图标:玻璃和几何的搭配极具现代感,崭新的图标结构设计也为全站带来了自然而灵动的生命力。

网站改版(网站改版需要多长时间呢)-第17张

2. 标志升级换代

从2016到2021,市面上的结构设计风格经历了多轮更迭,而他们的LOGO始终未变。当3D大行其道,原先扁平的图形已极难满足一些场景的表达政治理念。

同时随着公司业务的发展,也有了建筑、公装、建模等多类子品牌的标志需求。所以他们也去进行了标志的整体化升级换代,使之拥有了更广泛的可能性。

网站改版(网站改版需要多长时间呢)-第18张网站改版(网站改版需要多长时间呢)-第19张

3. 界面表达

结构设计语言也不单是局部元素的呈现,更需要落到场景中去实际应用。贯穿始终的结构设计表达才能让使用者有通感的新体验。

来看看他们如何让使用者感受到这道光:

网站改版(网站改版需要多长时间呢)-第20张

四、总结

一些看似简单的改动背后,也往往沉淀了结构设计师的诸多考量和心血。说实话,突出的听觉表现是一件太容易的事,难的是如何放下华而不实的那部分,让结构设计细节为商品带来真正的提升。

他们为什么要做?他们怎么做?这么做真的有商业价值吗?还有没有更优解法?……多问问自己总是没错,这让他们能更加优雅地去面对结构设计生涯中的一道道难题。

作者:不戳;公众号:酷育使用者新体验结构设计

本文由 @酷育使用者新体验结构设计 原创发布于人人都是商品经理,未经许可,禁止转载

题图来自 Unsplash,如前所述 CC0 协议