首页
下载应用
提交文章
关于我们
🔥 热搜 🔥
1
1
2
1'"
3
1'
4
kN
5
朱令
6
张靓颖
7
抖音
8
朱令去世一周年,清华学子控诉清华在朱令案中的冷血和无耻
9
@亘古
10
百度
分类
社会
娱乐
国际
人权
科技
经济
其它
首页
下载应用
提交文章
关于我们
🔥
热搜
🔥
1
1
2
1'"
3
1'
4
kN
5
朱令
6
张靓颖
7
抖音
8
朱令去世一周年,清华学子控诉清华在朱令案中的冷血和无耻
9
@亘古
10
百度
分类
社会
娱乐
国际
人权
科技
经济
其它
宾曰语云被法学教授投诉:严重侵权,“违法犯罪”!
京东Plus的隐藏特权,很多会员都没领取,白交了会员费...
呼吁四川大学澄清:1998年1月,川大有多少个“姜涛与爱人程月玲”?
二湘:朱令去世一周年,清华学子控诉清华在朱令案中的冷血和无耻
多长高8厘米!国内知名专家首次公开“追高秘笈”!担心孩子长不高的家长速来!
生成图片,分享到微信朋友圈
查看原文
其他
鹅厂的设计,果然擅长复杂问题简单化
Original
设计师ZoeYZ
体验进阶
2023-02-17
收录于合集 #设计案例
58个
今年全民K歌的设计团队发了一篇录唱模块改版文章:
唱我想唱——全民K歌8.0录唱模块设计总结
原文比较复杂,当时我没有细看,最近再次研究,发现里面有蛮多值得借鉴的思考点。
其中最重要的核心,就是——
复杂问题简单化
。
现在的互联网产品都恨不得往超级app发展,功能越做越复杂。如何在混乱中梳理出一条合理的脉络,确保用户体验的简洁,不可避免地成为了设计师的难题。
全民K歌这次改版就给了一个很好的案例,他们通过
四个步骤
,就简化了很多原本看似复杂的问题。
这四个步骤原文并没有明确提到,是我从方案和文章思路整理出的,分别是:
⏳整合概念
🧩简化布局
⚖️统一样式
✨效果强化
接下来,我将帮大家从这四个步骤,分析一下
复杂问题简单化
的
设计思路
。
⏳整合概念
看到一个混乱的色板,我们的大脑因为无法理解、找不出规律,所以会觉得混乱、畏惧。
可如果将颜色按照顺序整理好,我们便能一眼看出规律,一点也不觉得混乱
了。
因
为我们潜意识里知道,可见光的颜色,都可以归类到彩虹的几种类别里,而再简化点,还能分出冷色和暖色:
产品设计也是如此,不怕数量多,只怕零散缺少分类。
1.创作入口整合
全民K歌原本歌曲录制、视频录制、清唱和上传视频这四种创作方式都是零散割裂的。
从使用频率和用户习惯考虑,将歌曲录制单独拎出,将其它三种方式整合成自由创作,外层入口就从四个简化成了两个,对大部分用户来说更好理解了。
2. 功能整合
面对一堆功能该如何是好?
可以像全民K歌这样,把功能分成几种类型。例如录制页,除了录制和模式切换之外,其它功能就可以分为信息引导、内容预览和辅助操作三种类型。
这样一简化,布局都清晰多了。
3. 模块整合
没必要的东西,可以大胆去除。
例如之前换模板和换背景是分开的,但是从模板预览图看来,很多用户第一反应并不会把模板和背景割裂开看,而是以为模板就是附带背景的。
所以改版后,将动效和背景都整合到模板里,更符合用户预期。
🧩简化布局
页面看起来复杂,还可能是因为布局混乱,信息杂糅在一起。
4. 界面分割
例如调音台页,原本将画面调节和音效调节放在同一块区域,通过 tab 来切换。
而且右上角还额外加了一小块画面调节入口,让原本拥挤的布局更显混乱。
改版后,干脆将画面调节全部放到上半界面,将音效调节全部放到下半界面,泾渭分明、简洁明了。
5. 布局简化
有的时候,界面上的东西太多,超出了主流用户的真实需求,那么要做的就是简化了。
例如老版本的调音台内容特别复杂,但是从用户习惯来看,常用的就只有音量和混响这两种而已,其它大量功能很少用到却占据大量空间。
这种情况下,反而要通过 tab 来隐藏不常用的功能,从而只露出常用功能,让页面看起来更加简洁清爽。
⚖️统一样式
做设计经常会出现这样的情况,一开始什么都没有过于简陋,就各种堆叠样式,叠着叠着,有一天突然发现样式太多,越来越混乱了。
全民K歌这次改版也遇到了这样的问题。
6. 统一色彩
旧版录唱页设计了 13 款色调,加上各种反馈图案,视觉规则越来越复杂。
这次改版,将高亮色统一为品牌红色。
7. 细节提升
因为颜色统一了,所以很多细节可以处理得更好。
例如文字的高亮色与非高亮色的对比可以更加明确、进度条可以加上渐变色、效果字可以做得更细致鲜亮……
8. 色彩调整
统一色彩并不意味着要完全丧失个性,全民K歌选择在主题色下,通过专辑封面来展示魔法色。
测试了 TOP30 的专辑封面,以确保展示效果。
✨效果强化
将样式统一优化后,才能在此基础上强化出更好的效果。
下图是原本的录制反馈,当初受限于多套主题色,视觉效果的丰富度和冲击力不够。
9. 重复强化
新版将单个粒子撞击改为多个粒子撞击,让视觉效果更加连续生动。
10. 等级差异
把文字反馈根据等级进行差异化处理,即便不仔细看字,也能略微感受到等级差异。
11. 连续叠加
Perfect 连击后,通过数字和光感来强调连击,增强效果。
总结
我感觉腾讯的产品一直很擅长复杂问题简单化,可能是因为以娱乐为主,玩法再多也不得不考虑到用户的理解能力,确保用户体验能够长期保持小白友好的程度。
但是这个方法,也不是什么场景都适用的。对于电商、办公等功能型产品来说,需要的就是专业和细节,复杂与否反而问题不大。
大家在学习大厂方法时,也还是需要注意一下适用场景才好。
想要学习或者练习体验/交互设计的朋友,可以了解一下「体验设计学习社」。
作品集详细点评+答疑+免费训练营&学习打卡等活动,更有各类大厂内推:
如果你只是想要多认识一些同行,也可以加入我们无广告的纯粹体验研讨微信群:
您可能也对以下帖子感兴趣
{{{title}}}
文章有问题?点此查看未经处理的缓存