网页设计构图方法详解(2)

来源:网络   作者:热心网友   发布时间:2016-09-21    浏览次数:245

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

ifeiwutut78-10

ifeiwutut78-11

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

ifeiwutut78-12

网格式:有序与无序

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

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

ifeiwutut78-13

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

ifeiwutut78-14

动感倾斜式:坠落的骗局

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

ifeiwutut78-15

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

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

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

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

ifeiwutut78-16

ifeiwutut78-17

ifeiwutut78-18

后记

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

12共2页
联盟广告
×

感觉还不错,那就赞助一下吧!您的鼓励就是我们坚持的动力!

打赏说明:您的赞助我们将用于购买网络带宽和优质设计资源,提升用户体验!

相关推荐

http://www.shejixf.com/sucaixiazai/gaoqingtupian/4966.html
×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

充值学币 立即开通