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

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

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

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

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

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

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

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

更多类似的例子:

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

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

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

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

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

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

更多类似的例子:

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

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

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

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

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

更多类似的例子:

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

浅谈网页设计中的构图相关推荐

  1. 浅谈网页设计中的色彩理论

    无可争议的是,色彩是任何设计领域中最重要的一方面. 设计师在决定了一个网站风格的同时,也决定了网站的情感,而情感的表达很大程度上取决于颜色的选择.颜色是很有力的工具,所有设计师在设计网页时就应该明白这 ...

  2. 浅谈网页设计中的黄金分割

    您还可以参考以下网页设计相关资源: <美学设计-黄金分割与九宫格> <使用CSS创建三列固定布局结构> <精选15个国外CSS框架> <精选31个网站界面设计 ...

  3. 网页设计师谈网页设计中的色彩理论

    色彩是任何设计领域中最重要的一方面. 设计师在决定了一个网站风格的同时,也决定了网站的情感,而情感的表达很大程度上取决于颜色的选择.颜色是很有力的工具,所有设计师在设计网页时就应该明白这一点. 一.颜 ...

  4. 浅谈网页设计的形式美法则

    不知为什么会突然想起写这方面的内容,作为一个前端开发人员,设计能力不是主要的,但是我觉得艺术或者关于美学方面的知识,了解多些对提升自我是大有裨益的.它不仅仅对前端开发的用户体验方面有较大的帮助,也会提 ...

  5. [转]浅谈apple设计中的黄金分割

    你研究或者不研究,美就在那里,不偏不移:你发现或者不发现,黄金分割就在那里,不多不少.了解他,发现美,也给自己增加精彩,好作品不会没有依据. 黄金分割相关书籍 黄金分割漫话 分寸,设计:发现黄金比例恒 ...

  6. allegro差分信号走线_浅谈硬件设计中的一些思路和方法(5)—信号系统,又学到了...

    房价在涨,客户需求在涨,体重在涨,房租在涨,火气在涨,唯一不涨的大概只有薪资了??? 现在客户好套路啊~我们卖的A+B,他非要让我在B上开一个兼容C的口子,然后他用C+B.问题是C不是我们的产品啊~让 ...

  7. 中鸣循迹机器人_浅谈机器人设计方法

    浅谈机器人设计方法 摘要: 机器人是人类完成智能化中非常重要的工具, 随着时代的发展, 机器 人已经在世界有了一定的发展,甚至很多国家机器人已经运用到实际的生活中 去. 而机器人的设计方法无疑是很多人 ...

  8. 计算机中用户的分类有哪些,用户分类浅谈交互设计 -电脑资料

    说到网络产品,离不开的话题就是用户,就像传统行业的消费者, 不分类不好定位, 好的用户分类让我知道了我在追求哪些人,满足哪些人,影响哪些人.但分不好类又会错位,更糟,那怎样才能对某一款产品的用户群进行 ...

  9. c语言弱符号与函数指针,浅谈C语言中的强符号、弱符号、强引用和弱引用【转】...

    首先我表示很悲剧,在看<程序员的自我修养--链接.装载与库>之前我竟不知道C有强符号.弱符号.强引用和弱引用.在看到3.5.5节弱符号和强符号时,我感觉有些困惑,所以写下此篇,希望能和同样 ...

最新文章

  1. 使用css实现瀑布流的效果
  2. golang channel错误 send to non-chan type int/string
  3. redmine 贴图操作
  4. UA PHYS515 电磁理论II 静电场问题6 正交函数系简介
  5. 使用超图桌面版制作点图层并发布为地图服务
  6. 平流式隔油池计算_玻璃钢隔油池
  7. 基于Java语言构建区块链(四)—— 交易(UTXO)
  8. crontab文件在哪个目录_目录形式URL与文件形式URL哪个更有利于SEO
  9. hdu5831 Rikka with Parenthesis II
  10. OSGI常用控制台命令
  11. mysql的读写分离配置
  12. pythonnet 引用_Python netmiko模块的使用
  13. Axure|【医药、医疗】药企员工内部培训平台原型
  14. java List转Map
  15. 最小二乘法曲线拟合以及Matlab实现-----实验结果资源和总结
  16. 24个希腊字母的英文写法
  17. 1 - Hello MyBatis
  18. 分布式技术原理与实战45讲--05 第05讲:共识问题:区块链如何确认记账权?
  19. 错误 The inferior stopped because it received a signal from the Operating System
  20. Review impala

热门文章

  1. Linux学习(一)虚拟机安装linux资源,linux目录结构,购买阿里云服务器远程登陆linux,下载安装并使用Xshell与Xftp
  2. 文本关键词的提取算法实验
  3. 推荐9款最佳的编程字体
  4. 神器 | 教你去除视频马赛克
  5. 和弦笔记:和弦组成音/和弦命名规律/sus和add的区别
  6. CDN加速的作用以及APP被渗透入侵的解决方案
  7. java 微信请求超时_java – SQL服务器“超出锁定请求超时时间”..再次
  8. mysql分组查询学生平均年龄_8.21MySQL(四)基本查询语句及方法、连表、子查询...
  9. c++switch语言,C++ switch语句
  10. C语言简易程序设计————11、打印楼梯与笑脸