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

专为互联网人打造的365天成长计划,500门视频课程随便看,构建你的产品、运营知识体系。查看详情

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

 

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

设计目标的融合

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

增强品牌形象

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

把握设计趋势

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

紧扣浏览体验

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

 

设计表现的融合

色彩质感

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

层次结构

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

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

简洁一致的设计

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

体验功能的融合

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

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



结合场景的设计

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

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

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

 

细节的融合

图标的重绘

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

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

 

(本文出自Tencent WSD Blog,转载时请注明出处)

 

评论
有话不说憋着难受!