注册本站  论坛  繁體中文

慧民电脑芯片级维修-电脑技巧
手机 | MP3 | MP4 | 显卡 | 主板 | 显示器 | 光存储 | 笔记本 | 网络设备 | 移动存储 | 数码相机
键鼠 | CPU | 音箱 | GPS | 电视 | 服务器 | 投影机 | 机箱电源 | 品牌电脑 | 办公打印 |
| 网站首页 | Cisco | Windows | Linux | Java | Dotnet | Oracle | 网页设计 | 平面设计 | 安全 | 软件应用 | 电脑维修 | 办公维修 |
您现在的位置: 电脑技巧 >> 网页设计 >> 心得技巧 >> 网页设计正文

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

文章来源:weilaixu 作者:佚名 更新时间:2008-10-8 16:00:47 【 】 【加入收藏

上一篇文章:网页设计教程(4):关于素材和言志

网页设计进阶之五--构图的均衡与视觉引导、曲线/弧/光和影的运用

构图的均衡1、在非等形等量的情况下的构图以“均衡”来概括和衡量。与等形等量的平衡各站构图的50%。
2、均衡的要素:平衡、变化和统一、明暗、色彩、空间层次等等等等。

构图的关系
形状、位置、面积、方向、层次

构图的规律
平衡/规律

视觉引导的基本特征:(遵循正常的阅读顺序)
一、色彩引导
点击在新窗口中浏览此图片

二、形状引导
点击在新窗口中浏览此图片

三、姿势引导
点击在新窗口中浏览此图片

四、明暗引导

五、瞬间捕捉
点击在新窗口中浏览此图片

六、比例

------------------------------------可爱的分割线-----------------------------------

    可能你会觉得有很多重复的地方。但如果不将它们独立出来。无法更细致的让读者理解。可能还有不是很准确或我未分析出的东西。希望大家能够帮忙给补齐咯。

画面/视觉引导的作用:
1、引导阅读顺序。虽然是正常的阅读顺序,但还是有所变化的。
2、引导至重点
3、引导区分页面的轻重关系及内容与功能块的区分
4、引导对设计思路的理解
5、引导区域文化(比如中文/ENGLISH)
6、引导,具体内容集中体现在导航。

曲线、弧、光和影
    新手对姿势引导、形状引导理解不够深的时候,慎用弧
------------------------------------谨慎的分割线-----------------------------------
曲线和弧,可以很柔和的当作分割页面来应用.效果大家都知道,很好.但是如何运用得当呢?
遵循以上的所有要点.明确的知道你的弧起到什么作用.稍微去思考思考颜色和透明值的设置,我想,这不是很难的吧.
点击在新窗口中浏览此图片

一个起始点和一个结束点.要考虑到画面的大小,考虑到不同分辨率下各看到多少内容.如果没有结束点,那么视觉延伸和
引导的联想应该怎样去表达.
想一想荷花荷叶的形状,想一想芭蕉页的形状,想一想飞机在天上打弯的尾气.其实弧就在你的身边... ...
什么样的弧,才让人感觉自然呢?目前这一点还没研究出来.估计我也没那个能力去研究.
帖一篇物理方面的吧:

光和影
这里说的不是电影.
具体我也说不清楚.总之这种效果很绚,很GOOD.我很喜欢.
它还是遵循以上所说的视觉引导和弧的理论.
点击在新窗口中浏览此图片

在我的收藏夹里,这个网站的注释为:”光与影的颠峰应用”,地址:

引申的其他概念
本篇文章其实也是在无意之中完成的。在开始的时候,我花了大约2个小时的时间将均衡这一名词做了解释,目的是为了
提高同事的能力。之前将的一些东西他们掌握的很好。在均衡的手写教程和口头讲解结束后。我想到的画面的视觉引导
这一主题。随后做出了概述。与均衡的原理想结合,让我产生了阐述一下弧的想法,随后深入到光和影的处理。刚好手上
有这方面的优秀作品。
在这些东西或深或浅或残缺的阐述之后,我的脑袋里不由得冒出一个词“视觉重量”。
目前还未能对这个词做出准确的定义或论述。但是我想我能够把它给形容出来。
1:规律与秩序决定视觉重量的层次、轻重
2:对比与统一产生的和谐,才能衬托出视觉重量的均衡
3:一斤棉花和一斤铁(直觉告诉我和这个有关)
4:阅读习惯,首尾要比中间要重一些。(在等形等量的基础上。比如一行字)
5:质感与联想。
   这一点解释起来就比较容易的多。白云和棉花的感觉是压不死人的,虽然可以通过色调给人一种窒息、压抑的感觉。
但是比起大理石或钢铁之类的质感还是要轻很多。调动了读者的联想思维。那么视觉重量的概念会更清晰一些。
6:二维和三维在同等表现下,三维的视觉重量要比二维重。

我试图找出一些物理上的依据,但是通过搜索引擎只找到H.K.哈特兰,G.沃尔德的<发现眼睛的化学及重量视觉过程>的这个
条目,说的是这俩人获得过诺贝尔奖.但是没有相关的阐述.而且我英文很差.
-----------------------------------------------------------------------------------
下边是我的手稿,手机拍的:
点击在新窗口中浏览此图片

原始JPG下载

  • 上一篇网页设计:

  • 下一篇网页设计:
  • 最 新 热 门
     ireworks制作多样式实用网页按钮
     ireworks简单绘制甲壳虫小轿车
     ireworks仿真绘画质感金属球
     ireworks快速制作带血的金属刀具
     ireworks教程:果冻水晶字
     ireworks教程:gif动画图片批量增加水印
     ireworks教程:美女照片超绚背景
     ireworks教程:3D旋转gif动画
     ireworks教程:制作粉色恋人闪字
     ireworks CS3教程:切片工具切网页模板
    最 新 推 荐
     国网站用户体验排行榜
     计理论:以人为本的绿色设计
     结网页设计制作的一些通则
     页设计关于超级链接的设计原则
     页制作关于HTML格式和长文件的建议
     页布局的9个建议
     页页面设计的4个实用建议
     页内容页面制作的9个实用建议
     页设计经验谈:自以为是的网页设计者
     页制作过程中代码注释书写规范
    相 关 文 章

    结网页设计制作的一些通则
    页设计关于超级链接的设计原则
    页页面设计的4个实用建议
    页设计经验谈:自以为是的网页设计者
    页设计中的栅格系统
    页设计教程(8):网页层次和空间设计
    里巴巴中秋logo结合网页的设计过程
    页设计教程(7):提高网页制作效率
    页设计教程(6):要保持设计激情
    页设计要有目的有思路和想法与坚持

    | 设为首页 | 加入收藏 | 联系站长 | 友情链接 | 版权申明 | 网站公告

     

    Copyright 2006-2008 pcjx.com All Rights Reserved
    电脑技巧 版权所有 粤ICP备06059145号 地图
    门市地址:广东省佛山市南海区黄岐黄海路133号
    本网站所有内容未经许可不得转载或做其他使用