所有关于尺寸大小的原则都在上图中体现得淋漓尽致。一眼看去你首先注意的就是巨大的 H 型公司 LOGO,然后是旁边的「Nike Making」,它所使用的较大字号以及加粗效果使得其看上去十分显眼。位于加粗字体下方的几行文字使用了较小字号,因此它们不会分散浏览者针对主要元素的注意力。如果你对于该页面足够有兴趣想要四处看看,就会注意到位于角落里的小 Logo 以及菜单目录,甚至是位于页面右边的导航栏。这种可视化设计是很有借鉴意义的。首先,巨大的彩色 H 型 Logo 能够抓住浏览者的眼球,然后你会看到旁边具有对比效果的附有超链接的说明文字。视觉可视化设计引导出了用户的浏览路径,就像费茨定律说的那样,放大可点击区域可以使得用户更为轻松的点击,加强互动效果。让浏览页面的用户最终点击进去进一步了解产品,这就是设计师想要得到的效果。
In Pieces 网站就很好地向我们展示了如何利用格式塔原则。与页面中央图像具有直接联系的元素被安置在图像下方,与该页面相关的导航选项统一组合在页面右侧。而整个网站的导航栏则作为整体安排在页面右方,其他相关链接则统一安放在页面底部。同时还需要注意的是,该网页在设计中将滚动选项放在了页面水平线上最为显著的位置。让我们在再来看看网页设计中如何运用留白。设计新手通常会犯的一个错误就是将网页中的空白当成是空白画布一般,总想着去将其填满,而没有意识到留白本身就是一种设计工具。有经验的设计师都明白网页中展现的视觉元素越少,主要元素就愈发凸显。在重要的元素之间适当留白,可以让它们始终处于用户的视觉中心。Dmitry Fadeyev 针对页面留白的设计方法进行了研究,发现在段落与页面边缘适当留白可以将用户对网站的理解能力提升 20%。
Nua Bikes 就为我们展示了一个运用留白的好例子。其页面设计极致简约,也没有能够形成视觉对比的元素组合,该页面设计将用户所有目光都集中于最为重要的信息上——有自行车供出售。想要更多地了解页面留白的魔力,我推荐你进一步阅读设计师 Mark Boulton 的相关文章,他在细节上剖析了留白手法的使用,展示了留白的积极与负面影响,还将留白分为了宏观与微观两大种类。
当你浏览 Le Mystère de Grimouville 网站时,带有纹理效果的标题不仅仅能够吸引注意力,还营造出了一种复古的风格。在该页面中,主标题的纹理、尺寸、位置统一发挥了作用,使得它和下方的重要性偏低的文本区分开来。该网页设计中对于纹理的使用还创造出了一种神秘的气息,这与该网站的主题相符合——它讲诉了一个在过去四年中诺曼底 140 位居民遭遇的闹鬼故事。
Jib Strategic 网站是一个与 Le Mystère de Grimouville 完全相反的例子,它在背景图上使用了纹理效果,用以凸显页面上的内容。该网站的设计不仅仅是抓住了用户的目光,还打造出了一种木质纹理的复古风,但是页面中所使用的新颖排版和可爱的图像又让它看上去相当时尚。除了纹理之外,你所选择的图像以及图形的风格也会影响到页面的视觉层次。花俏的图标设计与 Logo 能够吸引注意力,同时也反映了设计者的特点。同样,无论你的网站采取了何种布局与配色方案,丰富的图片与设计感的图标都会抓住眼球。