围观实战项目!QQ应用中心改版优化全过程 - 优设网 - UISDC

围观实战项目!QQ应用中心改版优化全过程

2014/08/27 6536评论区

QQ-redesign-1

编者按:都说思路最值钱,那么在设计项目中,哪样的思路是黄金之路呢?今天分享腾讯同学的一篇好文,总结了QQ应用中心改版的整个过程,解决问题的思路非常清晰,最后效果也有显著改善,推荐苦苦钻研技术的同学借鉴一下,将这么好的东西变成自己的。

围观实战项目!QQ应用中心改版优化全过程

背景

旧版的应用中心已经历了两年线上运营,这个庞大的运营类平台就像久经微调却缺乏统一整理的超市,显现出了种种问题。

资源位暴力挖掘,样式缺乏统一,加上旧版设计已不符合当前日臻主流的扁平化设计趋势,我们于上半年酝酿并完成了本次应用中心的改版。

受限于资源紧张、时间要求高的客观情况,我们化身为商场陈列师,芟繁就简、构筑氛围,希望能给用户带来一种全新的、如同在精品超市购物般舒适贴心的应用寻找和使用体验。

腾讯还有一篇超赞的实战文,戳:《字体设计实战!QQ音乐巅峰榜诞生记》
see-more-QQ-music

用户

根据用户调研、眼动测试、体验地图等前期沉淀,我们可以分析出应用中心首页的主要用户类型与核心场景特点:他们拥有较为显著的个人偏好,却往往没有具体的目标,倾向于随性浏览。此前的用研沉淀表明我们的主流用户既是有偏好的(主要关注好友在玩和应用分类),同时又是无目标的(随便逛逛,看到感兴趣的就试试)。

围观实战项目!QQ应用中心改版优化全过程

用研数据来源 《应用中心首页活跃与流失用户调研报告》 by jolinjin

场景

整个首页场景的核心,可以划分为“浏览应用”与“选择应用”两个部分,同时在浏览和选择的过程中,感受应用中心的整体氛围,形成完整的浏览体验。

关于“浏览”:让用户更快速找到商品;

关于“选择”:让用户更容易做出选择;

关于“体验”:让用户的购物体验更专注,更愉悦;

围观实战项目!QQ应用中心改版优化全过程

方法

我们追求清晰、高效与友好,化繁为简,打造专注愉悦的体验。相应地,我们的设计方法,可以提炼为简形、饰意。通过简形以建立条理,清晰结构,让用户可以快速定位;打磨信息元素,让用户对商品的特点一目了然,顺利做出选择;通过饰意,打造沉浸感和代入感,提升整体的购物愉悦度。

如同商场陈列师,我们梳理结构,搭配商品,组合分类,装饰橱窗,将整理与修饰工作寓于改版之中,用心雕饰。

围观实战项目!QQ应用中心改版优化全过程

“简”为减法,“饰”为加法

“形”为外在,“意”为内涵

——寻求加与减、形与意之间的完美平衡

简形是建立条理的过程,而饰意则是添加风格理念、突出重点。两者是反复交叉、相辅相成、不可分割的平衡关系。

—————我们从用户、场景推导出设计目的和设计方法,下面来说说怎么实施————

简形:减少冗繁

陈列师改造商场的第一步,建立信息条理,整理结构,减少多余的冗繁,把顾客从迷宫般的复杂结构中解放出来。

结构

问题:页面中充斥的各式各样的“假想线”使结构变得凌乱。

解决:我们将原来的4+1结构调整为均等的4等份,强化条理分明、整体清晰的视觉感受。在应用槽位不改变的情况下,减少纵向列数,能让各个应用信息的展示区域更为宽松透气,就像货架间距变宽会让购物环境更松泛舒适,显著减少用户浏览时的心理压力。

成果:新版栅格让首页首屏的安装量跃升了17%.

围观实战项目!QQ应用中心改版优化全过程

元素

问题:在版面里编排的图形元素或文字越多,越容易显得杂乱无章,降低阅读效率。

解决:我们梳理各个视觉元素之间的关系,按照一定规律去编排要素。归类,整理,统一,让每一个货架、每一个元素都烙上相同的气息。

围观实战项目!QQ应用中心改版优化全过程

层次

问题:猜你喜欢模块,过去将推荐理由包覆到推荐结果之内,与用户先阅读原因、再阅读结果的认知顺序不符。

解决:对信息层次的组织好比疏导交通,巧妙处理可以使信息顺畅表达,但失败的话则会引起堵塞,增加理解成本。新版中我们改变了这种布局,提取出推荐理由,同时也将空间释放给了推荐应用的更多信息。

成果:调整后的猜你喜欢模块安装率提升了50%

围观实战项目!QQ应用中心改版优化全过程

饰意:添加变化

应用中心以游戏用户为主,且收入基本来源于游戏应用,太过于追求简化与轻量,将无法满足平台所需求的娱乐、沉浸、带入等特点。为此我们给页面添加了诸多变化,并加入更多游戏化的装饰元素,以中和框架扁平带来的氛围不足,增加页面节奏感与趣味性。犹如在一成不变的陈列架上贴心地饰以点缀,使原本单薄的应用元素鲜活起来,提高应用的整体吸引力。

节奏

问题:版式毫无节奏的长页面使得用户阅读产生疲惫。

解决:在应用中心旧版的左右结构中插入通栏的版式,适当打断用户浏览的视线,产生阅读的节奏感。

围观实战项目!QQ应用中心改版优化全过程

场景

保证协调性和条理性的基础上,将版块的含义和概念可视化,引入场景的概念。通过这种视觉的手段微妙地启发用户的感觉及情绪。以精品推荐模块为例,引入橱窗的场景,将精品辅以道具和装饰、撒上细碎彩带,置于精致的橱窗之中。

围观实战项目!QQ应用中心改版优化全过程

点缀

解决:设计出符合排行榜功能的象征性图形,使得版块得到点缀,进而产生节奏感、动感和视线引导上的变化。在信息量比较大的页面设计中,有时不需要破坏页面的版式和栅格,只是在设计中通过重复排列点缀的方法,小元素也能影响整体的氛围。并且,后期和重构同学讨论,又加入了一些动态效果增添趣味性。

成果:上线后,top20排行榜安装量提升14%,日安装提升1万。

动态效果:http://m.isux.us/open_proj/demo/sisi/demo1.html

围观实战项目!QQ应用中心改版优化全过程

关于改版理念简形饰意的感悟:

围观实战项目!QQ应用中心改版优化全过程

由减而简,添之以饰;自内而外,显之以形。

在设计过程中,过于追求条理会使整体显得平淡,为打破这种平淡,则需要为其添加变化。

而添加变化后,原有的条理被打破,因此又需要重新整理。如此往复,细细雕琢。设计正是这样一个反复进行加与减、保持条理与添加变化的过程。

改版成绩

围观实战项目!QQ应用中心改版优化全过程

未来计划

围观实战项目!QQ应用中心改版优化全过程

未来应用中心的设计优化之旅还很长,下半年对整体项目的品牌宣传、虚拟形象及用户成长值的概念设计还会有更深 入的探索和尝试。结合项目本身,我们在设计实践过程中挖掘机遇、累积经验以及收获成长。同时,也感谢大家在设 计过程中为我们提出宝贵建议,我们将来后续的版本中持续迭代,达到产品设计与体验,更纯粹的“简形饰意”。

既然说到思路,那么就来几个奇特的思路:

外国的月亮圆是有道理的!
《设计师必看!为什么英文要比中文在设计中显得高大上》

是广场舞大妈还是百老汇剧院,关键看这个!
《涨姿势!设计作品中的“廉价感”是如何产生的?》

10年+广告人的最真实案例!
《设计师必读!如何从甲方抽象的概念里提炼LOGO创意》

 原文地址:isux.tencent
作者:sissi

AD13-qq-app-center

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量76万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

sdcweixin

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/qq-app-center-redesign

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

界面设计 设计圈干货 排版布局 版式设计 职场 优设专访 优设大课堂 设计达人 设计师干货 web前端开发 配色 视觉设计 素材下载 AI教程 设计理论 设计流程 神器下载 字体下载 设计师专访 psd下载 海报设计 设计规范 设计趋势 用户体验设计 动效设计 logo设计 平面设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里