引导用户的视线——《瞬间之美》
- by 小白兔
我发现,如果把注册区域移到主要图片展示区的下面,就能创造出一种被称为是Diagonal Balance(对角线平衡)的和谐状态。这个设计理念源自于“古腾堡”图标。
人们在浏览页面或布局的时候,实现往往区域从左上角移到右下角,就好像页面的布局设计有某种自然引力一样。因为人们通常都是从左至右、由上往下的阅读,久而久之视线自然会沿着这一路径移动。古腾堡图标简单的描述了这一阅读轨迹规律。
古腾堡图表中,左上角是第一视觉落点区(Primary Optical Area, POA),而右下角是最终视觉落点区(Terminal Anchor, TA)。与之相对,右上角和左下角是视觉盲点。因此,采用对角线平衡通常都是一个好设计所需要考虑的因素,因为设计师遵从了用户习惯性的眼动规律。
简单来说,为了实现“对角线平衡”的布局设计,我们可以运用视觉元素来创建一条虚拟的“线”,让用户的实现跟随它从左上到右下呈对角线似的移动。这条对角线就像箭头一样指向最终视觉落点。
举个例子,在Mini汽车的美国官网首页上,动画里个元素出现的先后顺序同样也采取了对角线设计。首先,网站的Logo标识出现在页面的左上角,如图:
然后页面上划出了一个矩形线框,从左上角到右下角以动画形式出现,如图:
最后,一系列Mini Cooper的小车模从右下角驶入屏幕,如图:
我们常见的对话框也同样遵循了从左至右、由上往下的视觉规律,如图:
为了把这一方式应用到客户的主页上,我交换了注册区和图片展示区的位置,使站点 logo 和 Sign Up Now按钮之间形成了一条对角线,如图:
然而,为了让这个社区的页面真正的焕发光彩,我还需要加入一点颜色。
使用颜色来吸引注意
颜色能把人的注意力吸引到特定的元素上去,而且效果非常奇妙,尤其当某个元素的颜色与其它的形成反差时更是如此。相对于一致性来说,人类对物体间的差异性更为敏感。因此在页面中加入一些颜色,可以非常有效的把浏览者的视线引导到我们希望他们看到的地方。
为了着重强调在首页中采用对角线平衡设计,我把站点 logo的主色调蓝色应用到了 Sign Up Now 按钮上,然后把它也设置为主要图片展示区域的背景颜色。
随后,我决定页面中的其他元素将不会再用到海蓝色。
通过使用相同颜色将三个元素捆绑到一起,用户的视线将由站点 logo 引导到充满趣味的相关内容(特色图片区),然后在移动到 Sign Up Now 按钮。
因此,从最初简单的布局设计开始(只是把需要的栏目堆放到了页面上,而没有做其他考虑),我逐步的做了一些小小的变动,创建了一条对角线,从而支持了用户由左上到右下的视觉自然规律。采用视觉移动的自然轨迹意味着最终的设计将有助于用户更快的熟悉站点,并且指引用户下一步该做什么,这样会让页面更加友好。换句话说,设计让用户对网站产生了美好的第一印象。
对角线平衡法则并不一定适用于每个页面设计,因此不必强制遵守。但是如果发现对角线平衡可能有助于强调整个页面意图,不妨考虑一试。另外,当你在开始某个设计的时候,时刻想着对角线平衡法则,很多情况下它都会发挥作用。






