软塌塌没骨感?一起来学学网页设计中的视觉解剖

@飞屋睿UIdesign :不想让你的设计看上去软塌塌的无骨感?重要的是摸清它的骨骼!网页设计也有所谓的支撑其视觉效果的骨架,这个骨架在早期的网页设计的视觉上是非常明显的。尽管随着网页设计的发展,其骨架慢慢渐隐,但行家自有解剖眼光,看出内在的门道,一起来学习。

网页构图技巧:

  1. 《基础小科普!聊聊两种最常见的网页布局设计模式》
  2. 《跨领域技巧!如何利用6个摄影构图法搞定设计布局?》

设计的骨架:视觉解剖

1983年苹果官网的首页设计,可以清晰的看到这种矩形块状的整形切割。

软塌塌没骨感?一起来学学网页设计中的视觉解剖

随着网页设计的发展,其骨架也慢慢渐隐,但它依然发挥着支撑起整个视线框架。这里,有人会与栅格系统联系起来。网页的栅格系统更多发挥的是对齐元素的作用,而骨架的功能会更加笼统。

页面设计的骨架,针对的是每一页面的骨架。每一个网站都会有不同的页面,我们会把页面分级为首页——二级页面——三级页面。通常来说,首页运用一个骨架,二级页面、三级页面也分别有一个骨架。首页的骨架有时还会根据分屏展示的不同展示不同的骨架样式。但无论有多少变化,一个网站的诸多页面的骨架之间,都会存在一种内在的视觉统一。

首页的视觉骨架尤其重要,因为首页承担着网页的第一印象,还主导着整个网站的风格方向,因此确定好首页的视觉骨架,是设计最初最难明确的问题。很多设计师在设计最初所耗费最多时间,用于实验各种页面版式的类型以期最完美的效果展现,而事实上,最完美其实是个伪命题,在有限的时间内,你需要做得就是找好自己的表达目标,每个页面设置好一个视觉焦点,根据焦点来表达你的重点内容。换句话说,你最希望用户了解什么?这个问题的答案应该是要无比清晰的在大脑中伴随设计全过程。

十字准星式:瞄准期待

人的视线总是集中在页面中心,因此将焦点设置在中心位置最迎合视线的做法。例如将网站的简介放置于页面中心,为了让页面更丰富,可以增加大图的背景加强表达的维度。十字线条经过的地方即是视线引导的路径,因此需要在线条的位置放上重要的元素。中心的位置其实也是一个期待点,瞄准视觉期待点,对设计师来说最大的便利就是省力。

软塌塌没骨感?一起来学学网页设计中的视觉解剖

无论网页的导航等其他元素放置于页面的哪个位置(尽量围绕线条经过的方向),这两个页面都是属于十字准星型的骨架结构,焦点始终位于正中,导航无论居于哪里,都属于次要的视觉地位。

软塌塌没骨感?一起来学学网页设计中的视觉解剖

软塌塌没骨感?一起来学学网页设计中的视觉解剖

正中的地位带来绝对的稳定感,它也是设计师最容易做到的表达。这种骨架结构,相对比较稳定,因此在需要在细节上营造一些惊喜,来打破这种相对静止的版式。

软塌塌没骨感?一起来学学网页设计中的视觉解剖

软塌塌没骨感?一起来学学网页设计中的视觉解剖

垂直双栏式:双面一体

将一个网页分成两栏并不意味着均分,它们是按照垂直方向形成了两列的不同布局。常见的的确是平均分配的表现情况,网页的焦点内容可以选择任一侧,另一侧作为补充。简称双面一体是因为,你不能制造两个焦点,分两个部分,它们也应该共同营造一个焦点。

软塌塌没骨感?一起来学学网页设计中的视觉解剖

软塌塌没骨感?一起来学学网页设计中的视觉解剖

软塌塌没骨感?一起来学学网页设计中的视觉解剖

双栏式的页面设计表现比较灵活,通常会有一偏倚轻重这,样就能确立好视觉焦点,形成对比,制造情景冲突。视觉重点在某一侧,利用背景色的不同加强视觉重量的对比。

软塌塌没骨感?一起来学学网页设计中的视觉解剖

软塌塌没骨感?一起来学学网页设计中的视觉解剖

两列缩略图垂直排列,让版式活跃起来的方法就是增加某一处高度的不同,强调一点细微的变化。

软塌塌没骨感?一起来学学网页设计中的视觉解剖

网格式:有序与无序

这种骨架样式通常是基于某一个网格而搭建内容,网格的表现形式多样,每个网格都用以展示不同的内容,可以是比较规范的网格,也可以是错落有致……虽说每个网页都可以基于网格而设计,但是网页的表现未必要严格遵循网格本身。

规范的网格通常比较倾向古典怀旧,它传递出一种相对严格的秩序之美。

软塌塌没骨感?一起来学学网页设计中的视觉解剖

相对有些错落变换的网格,更具现代风格,规则与反规则的交错。

软塌塌没骨感?一起来学学网页设计中的视觉解剖

动感倾斜式:坠落的骗局

倾斜的线条容易形成动感的张力,利用这一点所形成的视觉骨架就能很好表现与“运动”“冲击力”等动感较强的内容页面。

软塌塌没骨感?一起来学学网页设计中的视觉解剖

斜向的页面所制造的坠落式的冲击力应该和配图样式相关,因此对慎选斜向的配图非常重要,尤其是当大部分图片其实都只适合正向方向的展示。

这些所谓的骨架原理在于隐藏于表层下方的最基地的视觉结构,事实上,其他的元素通常并不严格局限于某个区域,这就让顶层的枝叶更加丰富。

在我们着手进行页面设计前,确定好一个视觉骨架的方向至关重要,这让我们并不依赖于运气去“撞”到某个好的表达,并且你也不需要单独设定某个固定的骨架,还可以两两并用,一个网站有多个页面,多个页面都可以拥有不同的布局。同一个页面,也会因为内容的不同采用不同的视觉结构表达。

下面这一个网页里的多个页面,每个页面都根据不同的焦点表现形态选择了不同的布局,骨骼总是为内容而服务的。

软塌塌没骨感?一起来学学网页设计中的视觉解剖

软塌塌没骨感?一起来学学网页设计中的视觉解剖

软塌塌没骨感?一起来学学网页设计中的视觉解剖

后记

始终要承认的是,内容应该是高于形式的,设计时的任何视觉骨架都是为内容而服务的,因此内容可以以任何外在的形式来表现。说了半天,尽管我们都在讲“颜值”,其实还是那句“饱读诗书气自华”。

「本月最值得阅读收藏的完美像素使用手册」

  1. 《值得每个设计师收藏的《完美像素使用手册》之原理篇》
  2. 《中文版来了!值得每个设计师收藏的《完美像素使用手册》之细节篇》
  3. 《第三集!值得每个设计师收藏的《完美像素使用手册》之易用性篇》
  4. 《第四集!值得每个设计师收藏的《完美像素使用手册》之软件技巧篇》
  5. 《最终版!值得每个设计师收藏的《完美像素使用手册》之软件技巧篇》

原文地址:ifeiwu

软塌塌没骨感?一起来学学网页设计中的视觉解剖

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量150万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

收藏 11
点赞

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。