【交互设计 】 融合的设计理念QQ浏览器新版设计分享

转载自：老二牛车教育 » 【交互设计 】 融合的设计理念QQ浏览器新版设计分享

每一次全新版本的设计都伴随着挑战与激情，它们化成对产品不断精细打磨的动力。在经过反复的推敲和锤炼后，孕育出了QQ浏览器的全新版本。这个版本优化了交互结构，新增应用+以及边栏小工具。当然，UI 的变化是一目了然的。早在去年年底，我们就投入到QQ浏览器的新版设计中。现回过头来看，整个的设计都贯穿了融的设计理念。

“融”的设计理念

融，有融入、融合之意。就如同光线、水珠、环境的包融。打破惯有的格局，追求一种更和谐平衡的关系。并尝试摒弃工具式应用带给人的死气，呆板的形象。融，同时也包含了简洁，优雅、流畅的特点。让用户获得更好的沉浸式体验。并确定以简约、清新、开阔、沉浸式为主的设计关键词。

设计目标的融合

这次新版本的视觉设计风格主要从三个方面综合考虑

增强品牌形象

自从 QQ 浏览器更换 logo 及 slogan 后,品牌的统一度得到更大的提升，发展方向也更加明确，这次新版本的设计需要在此基础之上进一步增强 QQ 浏览器品牌形象。

把握设计趋势

无论是 Windows Phone 7 那种极度平面化的设计，还是 Android4.0 明快的线型设计, 都反映出移动设计不断的向简洁，轻快方向行进的趋势。因此，我们的新版设计是需要符合这种设计趋势的。

紧扣浏览体验

浏览器是用户获取信息的一道重要窗口。其核心诉求还是方便快捷的为用户提供各方面的内容。打造内容提供平台，创造沉浸式阅读体验，是浏览器设计的重要任务。

 

设计表现的融合

色彩质感

从 QQ 浏览器的新品牌颜色、云的概念以及浏览器闪屏，我们想到了蓝天白云，天地交融，一览众山小的场景。这正是融的设计理念所想传达出来的开阔豁达的感觉。因此，经典蓝白加上平滑渐变，扁平质感，作为了 QQ 浏览器的首要选择。

层次结构

我们尝试打破头部区标题栏与内容区传统有形的界限。而是采用有机自然的方式将两者融和过渡，既保证了头部区功能的有效表达，又在视觉上有使两者浑然一体。底部工具栏也采用相同的处理，和内容区有平滑的连接。整个设计就在视觉上最大程度的增大了内容区，突出内容，进一步创造沉浸式的阅读体验。

由浏览器闪屏到起始页的演变，保持了品牌的延伸，也承载了融的设计理念。

简洁一致的设计

我们对其它页面也进行了层级结构优化。在不同的页面创造统一的视觉体验，简化冗余信息的同时，将页面以更轻盈，简洁的方式呈现。

体验功能的融合

一图一世界，轻量的皮肤设置功能

在新版的设计中，我们加入了换肤功能，并采用的是最轻量级的换肤。结合融的设计理念，所有控件都注重“黑白灰”的设计，因此界面保持了很高的包容度。这样，仅仅是简单更换一张图片，就可以使界面视觉效果有所不同。页面元素高宽容度的设计既能与背景融为一体，又保持了内容信息的可读性。这种换肤方式提高了产品的差异化又满足了用户彰显个性的需求，并且相比传统的换肤方式，可以有效降低设计出图数量。

结合场景的设计

当用户进入到夜间模式时，整个背景将变换成夜晚的星空，将情景融入页面的设计，营造整体的氛围。让用户体会到产品的情感和人性化的关怀，并创造沉浸式的使用体验。（后续版本实现）

隐藏着的低调，侧边栏的设计

浏览器的功能越来越强大，如何有效的安排信息的排布，区分主次功能层级，将很大程度影响产品的使用体验。新版本中，我们从新对菜单项进行了功能归类，由以前的三屏简化成一屏。当用户呼出菜单时，可以一目了然那些主要且常用的功能。将增强阅读型的功能整合进入侧边小工具栏，用户可随时通过右上角的按钮或者页面外滑动呼出。这样既保持了菜单项的简洁，又对功能信息项做了区分。

 

细节的融合

图标的重绘

之前版本的图标更多的采用面形的设计。加上它本身的质感，多多少少还是会显得厚重。在新版中，我们将所有图标都采用线形重新绘制，中性配色，保持高包容度。更好的融合新版简约清新的观感。

版本发布后，新的 UI 设计也获得用户的肯定和赞许。这只是我们向前迈进的又一步，整套设计还有一些新的特性和变化会陆续在后面的版本中实现^_^。当然，目前版本还存在着许多的不足。真心期待大家的反馈和建议。你们的支持，是我们前进的最大动力，让我们一起把浏览器的体验做得更好。

转载请注明：老二牛车教育 » 【交互设计 】 融合的设计理念QQ浏览器新版设计分享