今天为大家奉上一篇来自作者@飞屋睿的关于网页设计的文章,此篇主要从设计的骨架入手来讲解如何构好图、让我们的设计更有骨感不再“软塌塌”。作者通过几种设计形式加上图文结合为我们详细的讲解了该如何设计并告诉我们需要做得就是找好自己的表达目标,每个页面设置好一个视觉焦点,根据焦点来表达重点内容。骨骼总是为内容而服务的,内容应该是高于形式。
前言
行家自有解剖眼光看出内在的门道,一段音乐的背后隐藏着节奏,一幅画作之下潜伏着一个构图,这些节奏、构图都无声隐于幕后。不要让你的设计看上去软塌塌的无骨感,重要的是摸清它的骨骼。
设计的骨架:视觉解剖
网页设计也有所谓的支撑其视觉效果的骨架,这个骨架在早期的网页设计的视觉上是非常明显的。
1983年苹果官网的首页设计,可以清晰的看到这种矩形块状的整形切割。
随着网页设计的发展,其骨架也慢慢渐隐,但它依然发挥着支撑起整个视线框架。这里,有人会与栅格系统联系起来。网页的栅格系统更多发挥的是对齐元素的作用,而骨架的功能会更加笼统。
页面设计的骨架,针对的是每一页面的骨架。每一个网站都会有不同的页面,我们会把页面分级为首页——二级页面——三级页面。通常来说,首页运用一个骨架,二级页面、三级页面也分别有一个骨架。首页的骨架有时还会根据分屏展示的不同展示不同的骨架样式。但无论有多少变化,一个网站的诸多页面的骨架之间,都会存在一种内在的视觉统一。
首页的视觉骨架尤其重要,因为首页承担着网页的第一印象,还主导着整个网站的风格方向,因此确定好首页的视觉骨架,是设计最初最难明确的问题。很多设计师在设计最初所耗费最多时间,用于实验各种页面版式的类型以期最完美的效果展现,而事实上,最完美其实是个伪命题,在有限的时间内,你需要做得就是找好自己的表达目标,每个页面设置好一个视觉焦点,根据焦点来表达你的重点内容。换句话说,你最希望用户了解什么?这个问题的答案应该是要无比清晰的在大脑中伴随设计全过程。
十字准星式:瞄准期待
人的视线总是集中在页面中心,因此将焦点设置在中心位置最迎合视线的做法。例如将网站的简介放置于页面中心,为了让页面更丰富,可以增加大图的背景加强表达的维度。十字线条经过的地方即是视线引导的路径,因此需要在线条的位置放上重要的元素。中心的位置其实也是一个期待点,瞄准视觉期待点,对设计师来说最大的便利就是省力。
无论网页的导航等其他元素放置于页面的哪个位置(尽量围绕线条经过的方向),这两个页面都是属于十字准星型的骨架结构,焦点始终位于正中,导航无论居于哪里,都属于次要的视觉地位。
正中的地位带来绝对的稳定感,它也是设计师最容易做到的表达。这种骨架结构,相对比较稳定,因此在需要在细节上营造一些惊喜,来打破这种相对静止的版式。
垂直双栏式:双面一体
将一个网页分成两栏并不意味着均分,它们是按照垂直方向形成了两列的不同布局。常见的的确是平均分配的表现情况,网页的焦点内容可以选择任一侧,另一侧作为补充。简称双面一体是因为,你不能制造两个焦点,分两个部分,它们也应该共同营造一个焦点。