- 14
- 0
- 约1.6千字
- 约 9页
- 2020-08-12 发布于江苏
- 举报
网页设计之构图技巧
如何将网页这座楼盖的漂亮 ?以下就例举一些在 网页设计 上能起到事半功倍的构图技巧。个人拙见,希望能够抛砖引玉。
【一】坚实的地基 - 几何图形的力量。
几何图形在页面中往往能起到大梁的作用,也是网页内容最为常用的承载面板。这些图形合理的搭配和有效的穿插,能使页面除了信息传达外,更具层次感和观赏性。
此网站圆角矩形巧妙的结合信息模块穿插在一起,除了营造了网站的主体富有节奏的形状之外,更加强了页面的层次感,不会显得页面枯燥和单调。
圆形和椭圆形的结合搭载了轮播广告和重要信息,使得整个页面既有亮点又不失简洁。
同样是圆角矩形的穿插结合, 色彩填充的图形交集既能展示重要信息又勾勒出整个网站的风格形态。
竖着的大圆角矩形和线条勾勒出整个完整的画面,各种信息镶嵌于各个形状只中,既不显得乱又使其相得益彰。
更多类似的例子:
【二】钢筋上的铆钉—破格而出的素材
素材应用的好,往往能起到画龙点睛的作用,而素材起点缀页面和表达主题之外,还能作为构图中的一种主要元素存在,这些素材通常破格而出作为连接页面的纽带,使页面结构更加的稳固,故称其为“铆钉”。
素材看似随机的摆放,其实是有意的将素材摆放于左上和右下两个对角点,视觉上俗称的暗线,左下角信息
内容的图片和右上角的登录窗口组成了另外一条对角暗线, 两者并组成了 X 结构,而四个素材起到到了固定和压轴的作用,稳固而又美观。
飞跃的人越于页面之上,护目镜挂于导航栏之上。这两个素材的使用使整个页面既贴切于主题又生动,而在构
图上人连接穿插了 1、2 两个板块,而护目镜所在的 2 板块链接了 3、 4 板块,视觉上的感官延续让页面脉络清晰不脱节,切富有节奏感。
页面非常简单,除了图形构筑的基础形,就是几朵起到“铆钉”作用的花儿,花朵破框而出,使得素材有机的
融于框内又搭于整个页面之上 ,让人有种花是由圆洞内长到页面之上的错觉,简单而富有层次。
这个页面的素材和主体框架的结合很巧妙, 破框而出的喷溅牛奶和静态的巧克力、 杯子的动静结合于页面头部,使得整个页面主次清晰而又连贯。
更多类似的例子 :
【三】打造斜塔之美—斜的视觉张力
比萨斜塔之斜是地质沙化下沉还是设计师故意为之,至今还是有人在争论,抛开争议,斜塔的美似乎让许多人
都想来到它身边一睹这位倾斜美人之容,凑巧的是,在浩瀚的宇宙中最美丽的星球,也就是地球,也斜着身子对着
太阳转着。话题扯的比较远,斜线,或者说是斜着的物体,似乎天生有一种张力。在 网页设计 中亦是如此,而在这
里所表现的为视觉的张力,是种视觉心里上的延伸力而非物理上的。当页面过于平均,画面平平毫无亮点时,打破
平均打破通体的平均尤为重要,打破平均的方式有很多,而斜线似乎是 网页设计 中惯用的一招,屡试不爽。
斜线的张力让整个页面富有动感和延伸性,即可为页面起到修饰的作用,又能做为信息的承载模块,两者有机的融合并不让人觉得倾斜的标题不好识别或者有碍阅读,反之更能让整个页面富有形式感和表现力。
斜线的运用加上素材和圆形的穿插结合,让整个页面具有动感,同时视线又随着斜线的走向带入至素材和标题之上 ,具有张力的同时又让这些线起到一个很好到视觉导向作用。
以斜线为暗线排版而成的信息组件和右边斜线切割而成的图片形成形态上的互补,又形成节奏上虚实和疏密的对比,使得整个画面既有斜线带来的张力和动感之外,又不乏整体的稳固和均衡。
更多类似的例子:
以上简单的介绍了 网页设计 中的一个步骤:构图,罗列了一些比较常用而又有效果的方法,除此之外,应该还有很多,希望大家补充,但我相信无论构图也好,色彩搭配也好,亦或是节奏旋律等等。它们总是围绕着一个共同点去进行,那就是使页面在信息顺利传达的前提下变的美观而生动,有了这一大准则,我想设计页面的时候需要的
不是一大堆技法和技巧,而是一颗永不停止探索美和创造美的心。
您可能关注的文档
- 怎样下载网页上的音频.docx
- 教育学常考人物考点.docx
- 材料科学概论考点总结.docx
- 正余弦定理知识点总结与高考考试题型.docx
- 浙江省杭州市2015中考英语完形填空优生预测自练(7).docx
- 海康威视视频组件使用帮助.docx
- 特殊的平行四边形中考填空.docx
- 环境化学考点.docx
- 生物选修一(考点).docx
- 用格式工厂截录视频的方法.docx
- 安徽省安庆市潜山市部分学校2025-2026学年七年级下学期阶段学情自测数学试题-普通用卷.docx
- 2026《微型无人机的设计基础综述》2600字.docx
- 安徽六安市金安区2025-2026学年八年级上学期2月期末物理试题-普通用卷.docx
- 2026《五菱汽车公司经营者股权激励实施成效及其启示》9700字.doc
- 北京市第一零九中学2026届高三下学期开学考试数学试题-普通用卷.docx
- 北京海淀实验中学2026届高三下学期数学开学检测试题-普通用卷.docx
- 2026《五菱汽车公司融资模式及融资风险分析》8700字.doc
- 2026《五菱汽车公司物流成本控制研究》文献综述开题报告(含提纲)3800字.doc
- 2026《五菱汽车公司薪酬改革问题研究》开题报告(文献综述)4200字.doc
- 2026《物流企业反内卷的战略转型研究—以顺丰控股为例》13000字.doc
最近下载
- 《小数的意义和读写》黄漫.ppt VIP
- 普通党员2025年度组织生活会对照检查材料(五个对照).docx VIP
- 2026年江西新能源科技职业学院单招职业技能测试题库及答案1套.docx VIP
- 普通话测验考试60篇朗读文章(有拼音).doc VIP
- 普通党员2026年度组织生活会对照检查材料(五个对照).pdf VIP
- 生成式人工智能应用实战课件 (1).pptx VIP
- 北京爱知之星java工程师面试题 (2).docx VIP
- 北京爱知之星java工程师面试题 (1).docx VIP
- 北京爱知之星运维工程师笔试题.docx VIP
- 北京爱知之星JAVA工程师笔试题 (2).docx VIP
原创力文档

文档评论(0)