QQ浏览器Mac版
背景
作为连接用户和互联网的载体，浏览器一直都是知名互联网公司不可或缺的核心产品。2011年的QQ浏览器Mac版是腾讯第一次尝试为Mac用户打造的产品。我非常幸运的能和一群有天赋的小伙伴一起为这个项目工作。我们的任务是为国内的Mac用户设计一款能够满足他们使用习惯和挑剔眼光的浏览器。
角色
交互设计师
团队
用户研究团队、产品经理、项目经理、 视觉设计师、开发团队、市场运营团队
时长
6个月
挑战
有限时间内从零开始的设计，需要符合Mac用户的审美和习惯
用户和团队对可用性和设计有很高的期待。
竞争对手的都是行业顶尖的产品（Chrome, Safari, Firefox等）。
流程
用户研究 > 竞品分析 > 头脑风暴 > 交互设计 > 视觉设计 > 原型制作 > 开发迭代
用户研究 & 竞品分析
通过定量和定性用户调研我们发现，除了对速度和安全性上的需求，国内用户对Mac平台浏览器的需求依次是能继承苹果的风格和支持手势操作、能跨平台同步数据、强大的收藏管理功能、支持自定义插件和集成QQ即时通信功能。经过讨论，团队决定在第一个版本将精力集中在收藏管理， 跨平台同步和阅读模式上。
设计背景
竞品分析 - Safari
竞品分析 - Chrome
竞品分析 - Firefox
定性用户访谈
竞品分析和结论
定量研究 - 用户基本属性
定性研究 - 用户潜在需求
用户需求挖掘和分类
头脑风暴 & 交互设计
在头脑风暴前后我用Basamiq快速将结论和思路变成可以参照的原型图：
地址栏旁的站点管理菜单展开
收集模式下用户可以截图保存网页上的内容
用户收集的内容和展示方式
浏览以文字为主的网页时可激活阅读模式
阅读模式
阅读模式 - 调整字体和字号
阅读模式提供几种不同的风格
视觉设计师会根据交互稿制作精美的界面原型。在制作的过程中他们往往会针对特定的控件和交互流程提出更具创意的建议和优化，交互设计师再根据这些建议更新流程图并这样反复的迭代和优化。
管理菜单的高保真视觉稿
九宫格站点上的动态菜单
阅读模式 - 选择不同主题
阅读模式 - 调整字体/字号
网页内容收藏和分享
阅读模式 - 书签功能
收藏夹 - 智能推荐
个人中心 - 收藏内容的展示和管理
在iPad版QQ浏览器中同步数据
和QQ浏览器iPad版本同步书签
手机版QQ浏览器书签
和手机版QQ浏览器同步
原型制作
我制作了一段2:44秒时长的Demo用来展示设计团队对收藏管理， 跨平台同步和阅读模式的设计构想。
UI 设计& 迭代开发
经过几个月的紧张工作，QQ浏览器Mac版的发布获得了用户的广泛好评。团队在接下来的2个季度继续发布了5个主要版本并添加了许多新的产品特性。下面是第一个版本发布时的部分截图：
视觉风格由我的同事鲁峰创建
PS. 如果你感兴趣，可以查看我在这个项目中关于文案和图标的一些想法。