网页设计教程(5):网页视觉设计

所属分类: 网页制作 / 应用技巧 阅读数: 870
收藏 0 赞 0 分享

上一篇文章:网页设计教程(4):关于素材和言志
网页设计进阶之五--构图的均衡与视觉引导、曲线/弧/光和影的运用
构图的均衡1、在非等形等量的情况下的构图以“均衡”来概括和衡量。与等形等量的平衡各站构图的50%。
2、均衡的要素:平衡、变化和统一、明暗、色彩、空间层次等等等等。
构图的关系
形状、位置、面积、方向、层次
构图的规律
平衡/规律
视觉引导的基本特征:(遵循正常的阅读顺序)
一、色彩引导
点击在新窗口中浏览此图片
二、形状引导
点击在新窗口中浏览此图片
三、姿势引导
点击在新窗口中浏览此图片
四、明暗引导
五、瞬间捕捉
点击在新窗口中浏览此图片
六、比例
------------------------------------可爱的分割线-----------------------------------
可能你会觉得有很多重复的地方。但如果不将它们独立出来。无法更细致的让读者理解。可能还有不是很准确或我未分析出的东西。希望大家能够帮忙给补齐咯。
画面/视觉引导的作用:
1、引导阅读顺序。虽然是正常的阅读顺序,但还是有所变化的。
2、引导至重点
3、引导区分页面的轻重关系及内容与功能块的区分
4、引导对设计思路的理解
5、引导区域文化(比如中文/ENGLISH)
6、引导,具体内容集中体现在导航。
曲线、弧、光和影
新手对姿势引导、形状引导理解不够深的时候,慎用弧
------------------------------------谨慎的分割线-----------------------------------
曲线和弧,可以很柔和的当作分割页面来应用.效果大家都知道,很好.但是如何运用得当呢?
遵循以上的所有要点.明确的知道你的弧起到什么作用.稍微去思考思考颜色和透明值的设置,我想,这不是很难的吧.
点击在新窗口中浏览此图片
一个起始点和一个结束点.要考虑到画面的大小,考虑到不同分辨率下各看到多少内容.如果没有结束点,那么视觉延伸和
引导的联想应该怎样去表达.
想一想荷花荷叶的形状,想一想芭蕉页的形状,想一想飞机在天上打弯的尾气.其实弧就在你的身边... ...
什么样的弧,才让人感觉自然呢?目前这一点还没研究出来.估计我也没那个能力去研究.
帖一篇物理方面的吧:http://www.arcmanusa.com/arcforum/viewtopic.php?t=108
光和影
这里说的不是电影.
具体我也说不清楚.总之这种效果很绚,很GOOD.我很喜欢.
它还是遵循以上所说的视觉引导和弧的理论.
点击在新窗口中浏览此图片
在我的收藏夹里,这个网站的注释为:”光与影的颠峰应用”,地址:http://www.nopattern.com/nopattern/
引申的其他概念
本篇文章其实也是在无意之中完成的。在开始的时候,我花了大约2个小时的时间将均衡这一名词做了解释,目的是为了
提高同事的能力。之前将的一些东西他们掌握的很好。在均衡的手写教程和口头讲解结束后。我想到的画面的视觉引导
这一主题。随后做出了概述。与均衡的原理想结合,让我产生了阐述一下弧的想法,随后深入到光和影的处理。刚好手上
有这方面的优秀作品。
在这些东西或深或浅或残缺的阐述之后,我的脑袋里不由得冒出一个词“视觉重量”。
目前还未能对这个词做出准确的定义或论述。但是我想我能够把它给形容出来。
1:规律与秩序决定视觉重量的层次、轻重
2:对比与统一产生的和谐,才能衬托出视觉重量的均衡
3:一斤棉花和一斤铁(直觉告诉我和这个有关)
4:阅读习惯,首尾要比中间要重一些。(在等形等量的基础上。比如一行字)
5:质感与联想。
这一点解释起来就比较容易的多。白云和棉花的感觉是压不死人的,虽然可以通过色调给人一种窒息、压抑的感觉。
但是比起大理石或钢铁之类的质感还是要轻很多。调动了读者的联想思维。那么视觉重量的概念会更清晰一些。
6:二维和三维在同等表现下,三维的视觉重量要比二维重。
我试图找出一些物理上的依据,但是通过搜索引擎只找到H.K.哈特兰,G.沃尔德的<发现眼睛的化学及重量视觉过程>的这个
条目,说的是这俩人获得过诺贝尔奖.但是没有相关的阐述.而且我英文很差.
-----------------------------------------------------------------------------------
下边是我的手稿,手机拍的:
点击在新窗口中浏览此图片
原始JPG下载
更多精彩内容其他人还在看

sitemesh教程-页面装饰技术原理及应用

Sitemesh是一种页面装饰技术:它通过过滤器(filter)来拦截页面访问,据被访问页面的URL找到合适的装饰模板等等,感兴趣的朋友可以了解下哦
收藏 0 赞 0 分享

浏览器可以注册的事件小结

我们在网页制作中经常会用到浏览器事件,这里简单的整理下方便需要的朋友
收藏 0 赞 0 分享

从image/x-png谈ContentType(s)

今天在做一个文件上传的功能的时候,发现我总是上传不了png的图片。经过调试发现,应该是在ContentType的地方判断失误了。后来百度了一下发现一个有意思的现象,我发现png的图片的ContentType并不是我在注册表中看到的image/png,而是image/x-png
收藏 0 赞 0 分享

窗口中的各种距离/滚动距离的精确计算汇总

平时在项目开发中,没少跟边距,位置,坐标什么的打交道,悲剧的是,如果你对这些东西没有非常清晰的概念,编码的时候会非常痛苦,到处找资料寻求距离的精确计算,接下来本文提供一个示意他,希望对你有帮助
收藏 0 赞 0 分享

web的各种前端打印方法之CSS控制网页打印样式

使用CSS控制打印样式,握刚刚使用时一塌糊涂,根本不知道CSS中的midia的作用是什么,问到别人说导入这个样式,还傻乎乎的不知所措,接下来介绍CSS控制网页打印样式是如何实现的
收藏 0 赞 0 分享

响应式WEB设计学习(1)—判断屏幕尺寸及百分比的使用

现在移动设备越来越普及,用户使用智能手机、pad上网页越来越普遍,但是传统的fix型的页面在移动终端上无法很好的显示。因此,Ethan Marcotte提出一种响应式web设计的概念,响应式web设计的英文为Responsive Web Design,简写为RWD,感兴趣的朋友可
收藏 0 赞 0 分享

响应式WEB设计学习(2)—视频能够做成响应式吗

除了图片以外,还有一种常见的多媒体形式是视频。有时在web设计中,根据需要会在页面中加入视频,视频大小的自适应单靠CSS本身似乎是做不到的,感兴趣的朋友可以详细了解下
收藏 0 赞 0 分享

响应式WEB设计学习(3)—如何改善移动设备网页的性能

究竟是网页中的何种元素拉低了网页在移动设备中加载的速度呢?这些元素应该做何处理以提升页面在移动设备中的整体性能?是否存在一种设计模式可以同时满足移动端及桌面端的页面设计呢?带着这些疑问开始本文之旅吧
收藏 0 赞 0 分享

网页设计必备手册 216网页安全色大全

网页安全色是指在不同硬件环境、不同操作系统和不同浏览器中都能够正常显示的颜色集合(调色板或者色谱),也就是说这些颜色在任何终端用户的显示设备上都是相同的效果
收藏 0 赞 0 分享

网页设计中设计出有层次感的界面的经验介绍

很多网友常说自己的网站为什么色彩上总是有问题,总是看起来没什么精神,没办法吸引人注意。观察了一些网友们设计的网站发现他们在用色上不够大胆,同时也缺乏对色彩层次的理解。
收藏 0 赞 0 分享
查看更多