经典推荐:网页设计构图技巧 - 优设网 - UISDC

经典推荐:网页设计构图技巧

2013/05/03 14111评论区

一篇开拓网页设计思路的文章,虽然有些年代了,但是其中分享的构图技巧到现在依然是非常受用的,如果你能领悟个中精髓,融会贯通。那么今后你设计出来的网站,一定会从格局形势上让客户眼前一亮!

网页给人最直观的感受就是它的页面框架与构造,就像一座大楼的主体框架与形态,你可能记不起东方明珠塔和艾菲尔铁塔是用什么颜色或什么材料涂的外墙,但我想你一定记得起它们是什么样的形状。同样,网页设计中的构图也足以影响到整个网站给人的感受。虽然比喻并不十分恰当,但就网页其构图而言,些许的改变和简单的创新也许就能起到事半功倍的效果,使网站给人耳目一新的感受。

如何将网页这座楼盖的漂亮?以下就例举一些在网页设计上能起到事半功倍的构图技巧。个人拙见,希望能够抛砖引玉。

【一】坚实的地基——几何图形的力量

几何图形在页面中往往能起到大梁的作用,也是网页内容最为常用的承载面板。图形之间合理的搭配和有效的穿插,能使页面除了信息传达外,更具层次感和观赏性。

此网站把圆角矩形巧妙地与信息模块穿插在一起,在营造了网站的主体富有节奏的形状之外,更加强了页面的层次感,使页面不在枯燥单调。

圆形和椭圆形的结合搭载了轮播广告和重要信息,使得整个页面既有亮点又不失简洁。

同样是圆角矩形的穿插结合, 色彩填充的图形交集既展示了重要信息又勾勒出整个网站的风格形态。

竖着的大圆角矩形和线条勾勒出整个完整画面,各种信息镶嵌于各个形状之中,使其相得益彰。

更多类似的例子:

【二】钢筋上的铆钉——破格而出的素材

素材应用的好,往往能起到画龙点睛的作用,而素材除了点缀页面和表达主题之外,还能作为构图中的一种主要元素存在,这些素材通常破格而出作为连接页面的纽带,使页面结构更加的稳固,故称其为“铆钉”。

看似随机的摆放,其实是有意将素材摆放于左上和右下两个对角点,视觉上俗称的暗线。左下角信息内容的图片和右上角的登录窗口组成了另外一条对角暗线, 两者并组成了X结构。四个素材起到到了固定和压轴的作用,稳固而又美观。

飞跃的人越于页面之上,护目镜挂于导航栏之上。这两个素材的使用使整个页面既贴切主题又生动。在构图上,人连接穿插了1、2两个板块,而护目镜所在的2板块链接了3、4板块,视觉上的感官延续让页面脉络清晰不脱节,富有节奏感。

页面非常简单,除了图形构筑的基础形,还有几朵起到“铆钉”作用的花儿。花朵破框而出,使素材有机的融于框内又搭于整个页面之上 。让人有种花是由圆洞内长到页面之上的错觉,简单而富有层次。

这个页面中素材和主体框架的结合很巧妙,破框而出喷溅的牛奶和静态的巧克力、杯子,动静结合置于顶部,使得整个页面主次清晰而又连贯。

更多类似的例子:


 

【三】打造斜塔之美—斜的视觉张力

比萨斜塔之斜是地质沙化下沉还是设计师故意为之,至今还是有人在争论。抛开争议,斜塔的魅力让许多人都想来到它身边一睹这位倾斜美人之容。凑巧的是,在浩瀚的宇宙中最美丽的星球,也就是地球,也斜着身子对着太阳转着。话题扯的比较远,斜线,或者说是斜着的物体,似乎天生有一种张力。在网页设计中亦是如此。而在这里所表现的为视觉的张力,是种视觉心里上的延伸力而非物理上的。当页面过于平均,毫无亮点时,打破通体的平均尤为重要。打破平均的方式有很多,而斜线似乎是网页设计中最常用的一招,屡试不爽。

斜线的张力让整个页面富有动感和延伸性,即可为页面起到修饰的作用,又能作为信息的承载模块,两者有机的融合并不让人觉得倾斜的标题不好识别或者有碍阅读,反之更能让整个页面富有形式感和表现力。

斜线的运用加上素材和圆形的穿插结合,让整个页面具有动感,同时视线又随着斜线的走向带入至素材和标题之上 ,具有张力的同时又让这些线起到一个很好到视觉导向作用。

以斜线为暗线排版而成的信息组件和右边斜线切割而成的图片形成形态上的互补,形成节奏上虚实和疏密的对比,使整个画面既有斜线带来的张力和动感,又不乏整体的稳固和均衡。

更多类似的例子:

以上简单的介绍了网页设计中的一个步骤:构图,罗列了一些比较常用而又有效果的方法。除此之外,应该还有很多,希望大家补充。但我相信无论构图也好,色彩搭配也罢,亦或是节奏旋律等等。它们总是围绕着一个共同点去进行,那就是使页面在信息顺利传达的前提下变得美观而生动。有了这一大准则,我想在设计页面时,需要的不仅是一大堆技法和技巧,还有一颗永不停止的探索美和创造美的心。

 

原文地址:edu.dogame.com.cn
本文由优设网@好一朵大柚子编辑发布

 
================关于优设网================
“优设网uisdc.com“是一个分享网页设计、无线端设计以及PS教程的干货网站。

【特色推荐】
设计讲座:定期邀请国内互联网公司的设计前辈及行业总监在群内及YY语音(YY频道:15335158)分享实战经验。
设计微博:拥有粉丝量26万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

youshege11111125411132222
 

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/web-design-composition-skills

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

界面设计 设计圈干货 排版布局 版式设计 职场 优设专访 优设大课堂 设计达人 设计师干货 web前端开发 配色 视觉设计 素材下载 AI教程 设计理论 设计流程 神器下载 字体下载 设计师专访 psd下载 海报设计 设计规范 设计趋势 用户体验设计 动效设计 logo设计 平面设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里