UC浏览器8.3 (for iPhone)设计理念.“無”为而设 浏览器

原文： http://red.uc.cn/?p=823 

引子

2012伊始，作为开春之作，iPhone版的UC浏览器8.3带来了全新的视觉设计；这个版本体现的是我们对UC浏览器视觉的全新理解,也承载着我们对今后视觉风格的探索。

iPhone平台的UC浏览器从7.x系列开始，GUI风格都是以蓝色为主调。蓝色，一直给人科技、沉稳、信赖的感觉。

除了蓝色，浏览器还能尝试怎样的配色及风格设计呢？

纵观2011年以来的GUI设计趋势，轻量化、平面化的风格逐渐成为大家探索的主流。

结合UC浏览器8.3版本的首页改版，经过设计师们的屡次探讨研究，我们决定在此版本进行新的UI风格探索，力求在设计上给用户带来全新的视觉体验感受。

最终，我们定下了设计主题：“無”为而设！

追求的是简单、优雅的质朴之美！

 

设计背景

回顾iPhone平台的历史版本，可以看到UC浏览器从拥有较为成熟的设计开始，蓝色就贯穿着整个产品的视觉风格主线。

纵观国内外各种软件，蓝色一直流行在UI设计中。确实，这通常是一种能表现出清新、明快，且不容易引起用户的反感的颜色。

然而本次我们却要跳出这个颜色的温房，尝试一种新的设计风格。

 

设计思想：“無”为而设

关键字：简单、优雅

首先，回归产品的本质，浏览器始终是一个承载着页面信息展示的平台。更多情况下，我们认为浏览器界面本身应该作为配角，用户所要看到的页面信息才是视觉上的要点。而UC浏览器又是专业针对手持设备进行开发，那么我们的界面设计所要面对的一个基本要求和挑战：那就是在有限的显示范围内最大限度的展现网页信息元素。

从对产品的本质思考中，我们能得到2个重要的设计要点：无干扰；更大的视野。因此，我们开始探索一种相对无感知（或者说感知较弱）的颜色，目的是希望其能在众多的色彩中尽量隐去自身，使得在用户浏览网页信息时受到的干扰减到最小。

于是,我们引入”無”这一非常具有禅意的设计理念，它要体现的正是无干扰，低调，沉稳。

颜色风格：经典的黑白灰搭配，画“蓝”点睛；追求简单、优雅的设计风格

8.3版本的颜色风格以经典的黑白灰为主搭配。为了给用户更舒适的界面，避免在长期使用过程中因单纯的灰黑感到沉闷，也为了减少界面由于大量白色而引起的刺眼的感受，我们在灰黑色中掺杂了少量深蓝色 ，并在纯白色中加入了少量的黑色，最终以这2个合并后的元素作为主色调，并以少量的经典蓝色为“点睛”色，在搭配上点亮整个界面设计。

 

最后，我们确定了整体设计以经典的黑白灰为主色调,亮蓝色作为界面的指示颜色搭配的风格，追求的是简单、优雅的设计。

 

启动画面：“無”为而设之初印象

对比上一个版本，8.3版本的启动画面在整体上去除掉了多余的元素，重点突出主体——可爱的吉祥物以及清晰的版本号

首页元素与布局——“少即是多”（less is more），追求简单、优雅的视觉效果以及自然流畅的触控交互体验

1）8.2版本的首屏3个tab的功能模块重组，在8.3版本中改为双屏展示，加之整合了网址导航三行折叠栏使之变成一个主入口；如此以来8.3版本首页的整体设计元素得以精简，在布局上也更为清晰明确

 

2）秉承”少即是多”的理念，首页的“我的导航”设计回归九宫格的方式，将来原本用折叠栏展现的推荐网址隐藏在一个下拉框入口中，整体留给用户的是更广的视野以及带来更流畅的触控交互体验。

 

工具栏：轻打扰，还给用户一个纯粹的浏览体验环境

灰白色的工具栏，设计目的有两点：

A．灰白色一种相对无感知的颜色,能在众多的色彩中隐去自身,在浏览网页时对页面有最小的干扰；运用在工具栏中可达到突出浏览器的页面内容为主体的目的，用户的视觉焦点不会轻易被有颜色的工具栏所吸引

B．灰白色属于浅色系，对比8.2版本的蓝色工具栏，8.3版本的浏览页面整体在视觉和心理方面都更容易给到用户“拥有更大视野”的感受

 

细节设计

1）单色图标——回归质朴的本色

另外在细节上,8.3版本界面上的图标再一次做了改动,主菜单的图标由彩色又回到了质朴的单色.

 

2）彩色图标——形象精致，易于识别

而在下载/文件管理的图标中,为了更好地区分不同文件类型,我们设计出一套有较高识别性的彩色图标.

3）统一的Tab指示样式设计

对于tab的展现方式,8.3统一为使用亮蓝色的长条作为当前tab的指示

 

结语：What is NEXT……？

UC浏览器8.3（for iPhone）推出已有一段时间，期间不少用户纷纷表达了喜爱之情，当然也收到一些大家热心提出的意见和建议。

8.3版本的GUI风格尝试只是2012年的一个开始，后续版本我们会在8.3的基础上整合更多产品功能，补全现有的不足，优化细节体验，打造精品的手机浏览器。