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

上一篇文章:网页设计教程(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下载

时间: 2024-10-07 09:46:09

网页设计教程(5):网页视觉设计的相关文章

网页设计教程(8):网页层次和空间设计

上一篇:网页设计教程(7):提高网页制作效率 一:很有必要的唠叨.有秩序,有规律,有特殊.叫层次!层次的迭代,表达出空间的存在感.点,线,面.点动成线,线动成面,面动成体,多个体的复杂构成.即为空间.当然,这里说的是数学空间或逻辑空间.可不是什么哲学空间. 二:离不开的感觉--透视:之前写过一篇关于透视的文章,这里再配几张图辅助理解.透视并不是最重要的,但它是很必要的!   三:最常用的表现手法--虚实和对比:   这是一张很常见的XP里的一张图片,看它的层次.近大远小--近实远虚--近重远轻.

网页设计教程(6):要保持设计激情

上一篇文章:网页设计教程(5):网页视觉设计. 1:除非你现在已经过了不惑之年了,否则你就一定要保持年轻人特有的激情!      这里的激情,包含了那种说不明白的近似于冲动的东西,或者idea.也包含了对行业的热情.做网站不丢脸,做网站不低端!360行,每一行都是要有"人"去做的!    2:要不间断的学习.    我们这一行,能力与学历基本挂不上勾,我的大专毕业证都没拿着.可怜的计算机一级都没过.学校里的学习跟自己务实的学习是比不起来的.就如同hiheng说的,哪个大学能系统的教教c

CSS网页设计教程:表单Button的Outline

文章简介:CSS网页设计教程:表单Button的Outline. outline的使用,大家都喜欢在reset样式表中直接重置: * {   outline: none; } Eric Meyers在他的CSS Reset是这样重置的: /* remember to define focus styles! */ :focus {     outline: 0; } 这些方法大家都可以说常见了.可是有一点可能大家还是不太清楚--outline在表单的button中使用时,在firefox浏览器下

Webjx收集整理最新20个Photoshop网页设计教程

在你打开一个网站的时候,首先注意到的当然是它的设计,第一印象至关重要,网站的设计将帮助访问者决定是否继续浏览该网站.今天,本文收集了最新20个 Photoshop 网页设计教程,帮助你设计出更精美的网页. How to create a colorful business web layout Create a consulting web layout Create a movie video streaming website Create a gritty portfolio layout

网页设计教程(2):论摹仿和抄袭

在上一篇中介绍了网页设计的步骤和方法,具体可以回顾看看上篇文章:网页设计教程(1):步骤和整体布局 在05年入行数月之后,逢劳动节放假,经历了连续一个多月每天到12点的加班之后.我在自己的日记本写了一篇关于摹仿和抄袭的文章.写了足足5大张.现在看起来,道理是讲的很明白了,不过是太偏激了一点,现在从新写一下.新手看看下边一段就可以了. 摹仿的要素: 我说的是"摹仿",而不是",模仿"...如果你一直是"模仿",那么你还是别看了...... 要素无非

网页设计教程(3):设计步骤及思考

上一篇教程:网页设计教程(2):论摹仿和抄袭    与之前的步骤不同,这是实际操作的步骤.本文包括了大局的步骤和栏目,图片,小到一个图标的选取等等等等,可能会漏掉很多的东西.欢迎补充.我只是引导你去思考,本章绝对不是网页的标准制作步骤,我相信也没有什么标准的制作步骤.      本章的设计步骤是建立在网页设计进阶之一 (步骤和大局观)之上的.可能会涉及一些平面相关的知识.和网页与平面的比较.网页与平面的区别我会在以后在写.      本章所讲的基于PHOTOSHOP软件制作.      本章印证

网页设计教程(4):关于素材和言志

上一篇网页制作教程:网页设计教程(3):设计步骤及思考 关于收集素材:三遍记忆,让你记住海量素材的准确位置和用途,提高其可用性       这仅仅是一个示意图.在以往的日子里,我做到了只要脑袋里冒出一个想法,立刻就能知道我需要用的素材在什么位置...那时候我很穷,穷到连买书的钱都没有,更别说是买动辄几百快的设计资源光盘了.      设计师最大的特色,我认为是他特有的那个文件夹,或叫"杂七杂八",或叫"乱七八糟",或叫"什么都有"或叫"

网页设计教程(7):提高网页制作效率

上一篇:网页设计教程(6):要保持设计激情. 本来这第七章应该是针对设计中的层次.空间的技法及深层次的探讨.但今天暖暖跟我哭诉她事情总是处理不完.加上今年3·4月份公司的一大堆生意的顺利完成.以及那时候总结出的一些经验.觉得效率这个问题还是很有必要跟大家分享分享的.时间仓促,分类不明确,还请见谅! 本文从三个方面着手,一个是企业网站的建设(教育政府类也归纳到企业站点里),二是小型门户站点的建设,三呢,我把平面广告设计也顺带提一点.主要还是网站. 其实企业站点的工作量并不大,相信很多有经验的同仁能

最新20个很棒的 Photoshop 网页设计教程

在你打开一个网站的时候,首先注意到的当然是它的设计,第一印象至关重要,网站的设计将帮助访问者决定是否继续浏览该网站.今天,本文收集了最新20个 Photoshop 网页设计教程,帮助你设计出更精美的网页. How to create a colorful business web layout Create a consulting web layout Create a movie video streaming website Create a gritty portfolio layout