融合设计–QQ浏览器(android)设计分享.pdfVIP

融合的设计– QQ浏览器(android)设计分享 每一次全新版本的设计都伴随着挑战与激情 ，它们化成 产品不断精细打磨的动力。在经过反复的 推敲和锤炼后 ，孕育出了Q Q浏览器的全新版本。这个版本优化了交互结构 ，新增应用+以及边栏小 工具。当然 ，UI 的变化是一目了然的。早在去年年底 ，我们就投入到Q Q浏览器的新版设计中。现 回过头来看 ，整个的设计都贯穿了融的设计理念。 “融”的设计理念 融 ，有融入、融合之意。就如同光线、水珠、环境的包融。打破惯有的格局 ，追求一种更和谐平衡 的关系。并尝试摒弃工具式应用带给人的死气 ，呆板的形象。融 ，同时也包含了简洁 ，优雅、流畅 的特点。让用户获得更好的沉浸式体验。并确定以简约、清新、开阔、沉浸式为主的设计关键词。 设计目标的融合 这次新版本的视觉设计风格主要从三个方面综合考虑 增强品牌形象 自从 Q Q 浏览器更换 logo 及 slogan 后,品牌的统一度得到更大的提升 ，发展方向也更加明确 ，这次 新版本的设计需要在此基础之上进一步增强 Q Q 浏览器品牌形象。 把握设计趋势 无论是 W indows Pho ne 7 那种极度平面化的设计 ，还是 A ndro id4 .0 明快的线型设计, 都反映出移动 设计不断的向简洁 ，轻快方向行进的趋势。因此 ，我们的新版设计是需要符合这种设计趋势的。 紧扣浏览体验 浏览器是用户获取信息的一道重要窗口。其核心诉求还是方便快捷的为用户提供各方面的内容。打 造内容提供平台 ，创造沉浸式阅读体验 ，是浏览器设计的重要任务。 设计表现的融合 色彩质感 从 Q Q 浏览器的新品牌颜色、云的概念以及浏览器闪屏 ，我们想到了蓝天白云 ，天地交融 ，一览众 山小的场景。这正是融的设计理念所想传达出来的开阔豁达的感觉。因此 ，经典蓝白加上平滑渐变 ，扁平质感 ，作为了 Q Q 浏览器的首要选择。 次结构 我们尝试打破头部区标题栏与内容区传统有形的界限。而是采用有机自然的方式将两者融和过渡 ， 既保证了头部区功能的有效表达 ，又在视觉上有使两者浑然一体。底部工具栏也采用相同的处理 ， 和内容区有平滑的连接。整个设计就在视觉上最大程度的增大了内容区 ，突出内容 ，进一步创造沉 浸式的阅读体验。 由浏览器闪屏到起始页的演变 ，保持了品牌的延伸 ，也承载了融的设计理念。 简洁一致的设计 我们 其它页面也进行了层级结构优化。在不同的页面创造统一的视觉体验 ，简化冗余信息的同时 ，将页面以更轻盈 ，简洁的方式呈现。 体验功能的融合 一图一世界 ，轻量的皮肤设置功能 在新版的设计中 ，我们加入了换肤功能 ，并采用的是最轻量级的换肤。结合融的设计理念 ，所有控 件都注重“黑白灰”的设计 ，因此界面保持了很高的包容度。这样 ，仅仅是简单更换一张图片 ，就可 以使界面视觉效果有所不同。页面元素高宽容度的设计既能与背景融为一体 ，又保持了内容信息的 可读性。这种换肤方式提高了产品的差异化又满足了用户彰显个性的需求 ，并且相比传统的换肤 方式 ，可以有效降低设计出图数量。 结合场景的设计 当用户进入到夜间模式时 ，整个背景将变换成夜晚的星空 ，将情景融入页面的设计 ，营造整体的 氛围。让用户体会到产品的情感和人性化的关怀 ，并创造沉浸式的使用体验。 （后续版本实现 ） 隐藏着的低调 ，侧边栏的设计 浏览器的功能越来越强大 ，如何有效的安排信息的排布 ，区分主次功能层级 ，将很大程度影响产品 的使用体验。新版本中 ，我们从新 菜单项进行了功能归类 ，由以前的三屏简化成一屏。当用户呼 出菜单时 ，可以一目了然那些主要且常用的功能。将增强阅读型的功能整合进入侧边小工具栏 ，用 户可随时通过右上角的按钮或者页面外滑动呼出。这样既保持了菜单项的简洁 ，又 功能信息项做 了区分。 细节的融合 图标的重绘 之前版本的图标更多的采用面形的设计。加上它本身的质感 ，多多少少还是会显得厚重。在新版中 ，我们将所有图标都采用线形重新绘制 ，中性配色 ，保持高包容度。更好的融合新版简约清新的 观感。 版本发布后 ，新的 UI 设计也获得用户的肯定和赞许。这只是我们向前迈进的又一步 ，整套设计还有 一些新的特性和变化会陆续在后面的版本中实现^ ^。当然 ，目前版本还存在着许多的不足。真心 期待大家的反馈和建议。你们的支持 ，是我们前进的最大动力 ，让我们一起把浏览器的体验做得 更好。 (本文出自Tencent W SD Blog ，转载时请注明出处) 人人都是产品经理 （woship