当我第一次使用Gmail网页产品时，对他整洁的页面布局，感到非常惊讶。核心邮件内容被优先“安排”，一些低频的功能入口，或是不重要的信息则被合理的“隐藏”，视觉呈现上也是用色明确，不过度使用强调色，种种细节上的精心处理，能让我们在处理邮件时更加专注、高效。

分区设定

Gmail界面布局非常简洁，整个界面可被划分为三个功能区块：主体内容区，导航栏和边栏。

Gmail主体内容区域主要用来承载邮件信息，邮件内容以列表形态，整齐的排布在页面的中心区域，在页面的左侧边栏，竖向排布着一整列的图标按钮。在页面的顶部是网页的导航栏，导航栏上的搜索框占据了较多的视觉重量。

为什么Gmail界面布局如此简洁呢？这和Gmail产品定位非常相关，Gmail是一款工具性产品，必须要为用户创设一个高效的工作环境。在使用邮箱产品时，收发和处理邮件是用户最核心的关切。所以Gmail的主体区域被用来承载邮件内容，这样能方便用户查阅邮件。而搜索邮件对多数用户而言是一个高频的操作行为，所以在导航区域，搜索框被设计的非常醒目。

图标按钮的使用

Gmail在全球范围内有数以亿计的用户，这款产品毋庸置疑是一款成功的产品，而他的设计者从不满足于当下的产品形态，从未停止在设计上追求极致的“简洁”。

Gmail早期版本的邮件创建按钮，采用了悬浮按钮的设计形态，常驻于屏幕右下角区域。新版Gmail将创建按钮和其他功能按钮进行了整合。整合后，创建按钮被“安排”在左栏全部按钮的最上方，同时为其增加了一个浅色背景。由于位置凸显且样式突出，用户能很容易的识别和使用这个按钮。

Gmail简洁的界面风格，离不开大量图标按钮的使用，图标按钮相较于文字按钮，可以让页面看起来更加整洁，然而大量图标按钮的应用，也会带来了新问题，用户很难通过这些图标按钮，准确理解其所代表的含义。

为了让用户更好的理解图标所指，Gmail使用了不同的交互处理方式。首先，对于导航栏上的图标，Gmail通过气泡说明进行指引，当我们将鼠标hover（悬停）到这些图标上时，就会触发一个黑色的说明气泡，用户可以通过阅读气泡上的文字，理解这个图标按钮的入口含义。

而对于左侧边栏上的图标按钮，Gmail采用了一种非常棒的交互处理方式，当鼠标hover到边栏图标区域时，会触发一个内容面板，面板上的每个图标的旁边，都会对应有一个文字标签。用户通过阅读文字标签，可以很容易的理解这些按钮的功能含义。

当我们将鼠标移出面板后，面板会自动收起。整个页面重归“简洁”。

设计启示

Gmail在设计体验上有很多值得称道的地方，其中对图标按钮如何准确示意而采用的交互处理方式，能给我们不少启示，如今，很多视觉设计师，在设计图形标志时，经常会陷入自我怀疑，因为现实世界中，不同的用户，因为文化背景不同，受教育程度不同，成长环境不一样，在图形认知上存在天然的偏差。为了让图形设计不影响用户的理解，采用合适的交互方式，进行涵义补充，可能是一个不错的选择。