赞助商
立即赞助

大厂设计师如何做改版设计?来看这份实战案例!

UI设计3年前 (2021)发布 流光
3.7K 0 0

表情面板是百度APP互动场中非常重要的基础输验功能。文以三个核心设计节为例,分享在不同设计阶段,对表情面板验细节的理和感悟,阐述大量平台产品在进行验微创新时,对设计方案的严谨论证及思考。

大厂设计师如何做改版设计?来看这份实战案例!

表情面板改版背景

在百度APP评论场景,天有几十含有表情评论生量,表情于评论互动氛围造起着至关要作用。

百度APP emoji 2.0升级,除样式升级外,表情数量由原来的77个增加为180+,原有的横滑翻页互形式更受。

设计目标

通优化表情面板互形式,提升表情使用率,促进互动氛围提升,有以下3个核心目标:

大厂设计师如何做改版设计?来看这份实战案例!

横滑表情面板现有问题分析

1. 展现屏效低

横滑分页示+表情分类tab占据表情面1/4的位置,但是现有表情仅有一个分类,且短期拓展可性较低,导致一屏只展示20个表情。

大厂设计师如何做改版设计?来看这份实战案例!

2. 操作顺畅度弱

横滑翻页效率慢:表情2.0升后表情数量的扩充至180+表情,横滑翻页的交互形式需要滑动10页才能完。

输入切换顺畅:表情面低于系统键盘,切换键盘时有面跳。

大厂设计师如何做改版设计?来看这份实战案例!

3. 运营能力弱

节假日等殊日期,会计专属的活动运营表情,有表情面板没有置运营表情位置,放最后一页则触达率过低,有逻辑是将首页最后一行的前3个位置作为运营表情位置,导致了表情顺序不稳定,用户查找习惯被破。

大厂设计师如何做改版设计?来看这份实战案例!

设计过程

度APP作平台性产品,用户体,表面板涉及发论、发动态、直播间发弹幕、IM发消息多场景。了降低全线的风险,确保终方案的效性,分别设中、线、线后阶段采取方案研究估、性测试、验证方式对设方案行严谨推导及论证,确保设的合理性,深入理解用户使用表面板的行特点。

大厂设计师如何做改版设计?来看这份实战案例!

设计前:表情面板类型的研究与评估

1. 法:哈里图表比较评估法

法介绍:哈里图表是用于设计概念未经细化初始阶段比较评估法,根据预定设计要求,分析并呈现概念设计案优势与劣势,过比评估选择更具优势设计概念。

表情板类型发散

发散:基于原有滑翻页板,从翻页和翻页两个维度发散出了纵滑滚动、滑滚动共3板类型。

大厂设计师如何做改版设计?来看这份实战案例!

按照3个优目标细分7个评估指标

7个评估指标优先级:

首屏展示效率>浏览便捷度>匹配运能力>屏曝难度>单屏展示数量>定位查找难度>功能拓展性

大厂设计师如何做改版设计?来看这份实战案例!

方案对评估

表格中评估指标的重要程由上至依次降低,每个指标的评分等级分为4类: -2,-1,+1,+2。然后对3种表情面类进行对打分:明确分数等级后,把相应的方涂黑(-2,+2需要涂黑两)

大厂设计师如何做改版设计?来看这份实战案例!

方案评估决策

决策阶段不是简的将所有得相加,而是观察哪个方案占正向黑色面积更多,且黑色面积靠上的越多越占优势。可以出「类型2:纵滑滚动」各项指标表现更优。

大厂设计师如何做改版设计?来看这份实战案例!

设计方案说明

类型2:纵滑滚动结构的基础,对方案行细化,主以下几设点:

设点1:提升操作顺畅度、展示效率

提高面板高度与键盘高,提升输入稳性。

通过布局优化+纵滑滚动,提升浏览便捷度,展示数量提升35%-105%

大厂设计师如何做改版设计?来看这份实战案例!

设点2:增加一行常用表

面5历史表,使用便捷;后面两推荐表,好的匹配表运营能力

大厂设计师如何做改版设计?来看这份实战案例!

设计点3:感官反馈,提升操趣味

触反馈:长按表情出现详情气泡时,有震动反馈;

听觉反馈:点击表音效反馈;

大厂设计师如何做改版设计?来看这份实战案例!

设计点4:续新增分类或管理功能的拓展思考

续增加表情分类或是设置功能,以在面板底部增加一行固定功能口放置拓展功能;同时,纵滑面板释放横滑手势,以通横滑切换表情分类。

大厂设计师如何做改版设计?来看这份实战案例!

上线前:定性测试

全量上线前为保证体验符合预期,开展了新表情板定性用户测试。过用户喜爱度研究及表情搜寻任务分析,比改版前后两案异。

1. 用户喜爱度调研

喜欢新案「纵滑表情板」用户更多。

喜欢的主观原因主要包括:更方便、更顺畅,查找,顺手,展示内容更…

大厂设计师如何做改版设计?来看这份实战案例!

2. 表情搜寻任务可用性测试

搜寻实验说明:针滑翻页案和纵滑滚动案两交互形,使用样表情,在表情随意挑选2个,打乱序后,让用户在表情板查找,观察比用户找到表情所需时。

大厂设计师如何做改版设计?来看这份实战案例!

测试结论显示:在前6表情纵滑案表情搜寻任务使用时明显短于滑案;7-16表情纵滑案于滑案;

大厂设计师如何做改版设计?来看这份实战案例!

注:由于实使用表情板场景与搜寻任务不,表情序与使用量有关,越靠前表情使用量越高,测试结论仅作为参考。

上线后:定量验证

定量验证有三个维度:

  • 对改版前后表情面核心数据的变,评估项目收益,对方案的有效性进行定量验证;
  • 纵滑表情板用户为进打,深入分析和结纵滑板用户为特。
  • 根据数据分析结论,对纵滑面板的局提出建议及优化点,为续表情面板的长期优化打下基础。

大厂设计师如何做改版设计?来看这份实战案例!

1. 数据收益析

核心指标:含表情评论PV/UV占比、表情面板转化率

含表情评论PV/UV占比

在总评论量保证稳步提升的基础上,双端含有表情占比的PV、UV均上涨显,且PV上涨比例>UV上涨比例:

  • PV涨:同数论中含表的论涨;
  • UV上涨:同等数量发评论用户中,发表含表情评论的用户量上涨;
  • PV上涨例>UV上涨例:发含表情评论的户中,人均发表量升;

面板转化率

面板转化率提升明显,明调起表面板后,用户概率的使用表并发表了含表的论。

大厂设计师如何做改版设计?来看这份实战案例!

注:

  • 评论含表情PV占比=含表情评论PV/评论表成功PV
  • 论含表UV占比=含表论UV/论发表功UV
  • 表情面板转化率=含表情评论PV/表情面板展现PV

收益总结

以上核心数据双端均上涨明显且上涨趋势一致,数据收益呈正向,次改版提升表情的使用率,对互动氛围提升到非常正向的用。

2. 纵滑表情面板的使用行为分析

为打规则细化

法: GSM模型分析评估指标

大厂设计师如何做改版设计?来看这份实战案例!

分析行为数据

分析上线后的表情面打点数据,总结户行为特点:

大厂设计师如何做改版设计?来看这份实战案例!

根据用户行为总结建议及优化点

大厂设计师如何做改版设计?来看这份实战案例!

总结

通分析打点数据理纵滑面板的用户行为特点,让设计师更贴近用户,理用户在验新的表情面板时有怎样的反馈,哪设计点是符合设计预期的,哪是超出预期或者不符合预期的,从而为续表情面板的持续迭代优化提供理论参考。

感悟

在设计不同阶段,通不同的论证和分析对表情面板验细节有更深的理和感悟。

细致的设研究能程度保证设方案的合理性。

上线前的用户定性测是一种低成本快速倾听用户反馈,规避风险的方法。当然,由于定性测的受众较少,会存在一定的局限性,要正确的评估用户研究结论的可参考价值。

上线后的定量数据验证是通过对数据的解读来分析户真实使情况的方法,尤是对于平台性的大体量产而言,通过数据分析更够帮助设计师更好的了解户,客观的反映设计方案的效果。当然,数据本身虽是客观的,但对于数据的解读却一定做到客观,这是一个需要深入习、长期坚持并循环验证的过程。

大厂设计师如何做改版设计?来看这份实战案例!

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

2018年8月,Burberry 发布了新的 Logo 形象,一款无衬线大写字体 Logo,并且去掉了原来经典的骑士形象。因其颠覆性的形象改变...
信息至上
本期 SOAP,我们邀请到京东物流「快递小鸽」的 IP 创意主理人方宇宁MIMI,和大家分享「小鸽」的创意思路及为大厂创作 IP 的心...
IP设计
之前给大家详细的解析了个人插画组件库的设计方法以及个人见解。 今天就带大家来全面分析一下品牌插画组件库的建立及应用。 ...
品牌插画
金山 WPS Office 移动端是金山公司打造的、运行于多平台上的全方位全功能办公软件,国内同类产品长期排名领先,支持查看、创...
WPS
​​@N可可洛N、@爆炒地瓜​​​​:Ramotion (https://dribbble.com/Ramotion)是一个从事品牌和 UX 设计的专业工作室,服务客户...
专访
2019 年是造物节的第四年,也是品牌设计的第四年,前面每一年设计师们都会利用自己的认知,理解和专业给出各自的答案。今年造...
AlibabaDesign
@苏大牙牙牙 :文章包括品牌理念、品牌识别、APP大改版、品牌延伸。 △ 点击查看完整视频 一、项目背景 百度网盘是百度提供...
品牌升级
@苏大牙牙牙 :从明确产品方向,到设计团队如何赋能到产品,最终传递给用户更好的服务感知,百度网盘做了全新的服务升级。 项...
改版设计