网页设计与配色实例分析

网页设计与配色实例分析

第一章: 网页设计的原则

1.1了解分析客户的需求
网页设计需要设计师综合多方面的知识,把设计的多种元素进行有机的组合,它与网络技术,经济学,心理学以及
美学等领域都有着密切的联系,明确网页设计的中心是为了更好的表达网站主题.

网页设计是一个感性思考与理性分析相结合的过程,它的方向取决于设计的任务,它的实现依赖网页的制作
网页设计的特点是展现企业的形象,介绍产品与服务,体现企业发展战略途径,
要点:
1):因此必须明确设计站点的目的和用户的需求,以消费者为中心
2):根据市场的状况,企业自身的情况进行综合的分析,从而做出切实可行的设计计划
3):总体设计方案要主题鲜明,在目标明确的基础上,完成网站的构思创意.对网站的整体风格和特色作出定位,规划网站
   的组织结构
4):一件完美,完整的网站设计作品,是设计师与客户不断进行沟通设计出的结果
5):网站开始构思的时候需要充分了解客户的需求,要达到什么目的,效果,因此前期的投入是很有必要的,以便准确,完善
   地满足客户预期的要求.
6):产品的种类,特性以及所针对人群的特点于年龄,性别等,这些都是设计师们需要了解的方面,经验丰富的设计师们
   有必要做一些适当的引导.设计师所面对的客户群里,文化背景,性格类型等的差异体现了各种各样的审美情趣.
7):有些客户对于建立站点的目的并不明确,设计师就需要做一些推广建议,设计要静下心来,站在客户的角度上
   耐心解释共同的探讨,以达到网站最终想要达到的目的和效果

分析:学这一节感受最深的时候,网页设计是网络技术,美学,心理学的结合 这一点我很认同
     其次我们进行网页设计也是为了更好的表达的我们设计的主题,而什么样的主题,这就要看我们的设计方案
     这里我觉得和开发程序写需求分析一样,我们这里不仅要有我们的版本模型,更要我我们设计的设计方案写出来
     设计方案包括我们网站的整体色调,排版,要用到的必要的设计元素,整体风格,
     设计方案是很重要的:有几个方面我们需要考虑, 我们自身的设计水平, 我们网站要承载的内容和表达的主题,
     我们所面对的客户, 所以基于上面的几点,我们一定要与我们客户进行耐心的沟通,使用我们的设计与客户的需求
     达到完美的统一.
 

1.2 网站项目的规划
    一个成功的网页设计作品是艺术与技术的结合与统一,以主题鲜明,形式与内容保持一致,把握整体风格为设计原则,艺术是
    设计手段,而不是设计目的.
    规范的网站策划大致具有如下几个方面:
    1):网站的目标
    2):网站的主题
    3):网站的内容
    4):网站的风格
    5):网站的标准

    分析:网的艺术与技术的结合统一,艺术的设计的手段,而不是设计的目的
         网站策划的以上五个方面我觉得是我们做网页设计方案设计的很重要的依据

    网站的性质不同,设计要求也不同, 例如:门户网站,注意页面的分割,信息结构的合理,页面与图片的优化,界面的亲和等问题
    企业网站重点在突出企业形象,产品特点,要求设计样式,图片质量相对较高.
    网站的主题要求小而精,有针对性,尽量向专业靠近;题材尽量要新颖,不要随处可见,这样才你更吸引用户一看再看,网站的名
    称要有特色,方便记忆,要考虑到为了以后网站的形象和宣传做推广.
    
    分析:上面的东西让我总觉得我对不同类型的网站把握的过少,比如韩式网站的风格是什么样的, 这些平时有感受确没有
         从理论上去好好分析过.同时我觉得有必要自己整体出一个有规范的针对自己的特点的需求方案文档,以后所有的
         网页设计都应该先写设计方案,而设计方案就应该以这个为标准.

 网站设计规划书要体现出的8条内容:
 1):建设网站前的市场分析
 2):建设网站的目的以及功能的定位
 3):网站的技术解决方案
 4):网站的内容规划
 5):网页设计
    这里要考虑到范围群体的年龄地域,网络速度,阅读习惯等.
 6):网站维护
 7):网站测试
 8):网站的发布与推广
 
   分析:上面是网站开发是写方案时需要考虑到的几个方面的问题,我觉得可以作为我们的重要参考.其实我们在自己开发项目
         也作了许多这样的工作.

第二章 网页设计的框架
 网页设计是有规律可寻的,掌握如下几个框架,并根据网站的信息内容套用,框架搭建起来,剩下的"填充","丰富","精致",....
 就容易多了.
 分析:我很认同这样的观点,框架就相当于是起房子起的框架,画画是画人的人体骨骼,而填充就些就相当与是往房子里填
      砖头,在画好人体骨骼后往人体上画肌肉.
 
 我们为什么要用框架:   为了能够让浏览者更清楚,便捷地理解网站所要传达的信息内容

 网页的布局以导航拦位置为界,大致可分为:

2.1.1 上下结构式
       为一种上下框架结构式,通常上方为导航条,或者动态的公司企业形象,广告区域.下方为正文,内容部分,此类结构在内容
       较少的企业网站或者个人网站较常出现,有时只在首页使用,二级页面换相应结构.

2.1.2 左右结构式
      左右结构式又称为二分栏式,清晰的分列两旁框架结构,一般左侧是导航条,有时最上方会有一个小的标题或标志,右侧是
      正文 内容部分或者公司企业形象展示,不少企业网站较喜欢采用这类结构

      注:由于网站内容较少,因此多数企业网站都使用上下结构和左右结构为框架,展示区域添加大的图片作为公司形象,新产品
      的展示,以提升公司的整体形象.

     分析:上下结构式 左右结构式并不是严格的区分 往往我们会这样的认为那就是死板了,同时注意这种特点有利于
          展示内容叫少的网站,很大块我们会选择用图片去填充.

2.1.3 上左右结构样式
     这是大中型企业喜欢用的框架式,通常上方为主要菜单导航条,左侧为点击出现的细分栏目导航条,下方为较主要的栏目
     及小广告,右则为内容区域,有不少企业网站喜欢首页使用不同的结构式,上左右结构使用在二级页面.同上左右框架稍有区别
     的是中间部分为内容部分,右侧则是该网站较重要的内容导航区域,或是登陆,搜索区域,小广告等.
     分析:随着网站内容的增多,框架结构的逐渐细分,上左右结构式也更多地应用于跨类别的各类网站

2.1.4 上左中右结构式
      又称三级分栏式,是大型企业,电子企业,电子商务,政府网站,教育机构较喜欢的框架式,也是较常见的结构式.

2.1.5 综合结构式
      这种类型网站较为复杂,特点是功能模块多,信息分类详细,因此根据需要采用区域结构较为合适.
      甚至有可能我统一个页面里柝分出几个不同的框架类型

2.1.6 不规则的结构式
     不规则的结构式有别于上面的框架结构式例子,相对来说,页面的信息量少,通常一张形象广告图片下来,重在渲染这个网站的
      气氛,类似于封面类型,有点击进入下页的入口,无规则的框架风格较为随意自由,凸现网站个性意图,给浏览者带来较强的视     觉冲击,使以产品宣传目的的企业和个人网站的爱好者,都热忠于此种框架式.

2.1.7 少见的结构式
    通常使用这类结构样式的网站有两种情况,一是放置更多的信息栏目和内容的网站,二是追求个性的企业,组织或者个人的网站
    这类结构可以形容另一种风格特色

分析:其实我觉得上面讲了有规律的框架 也讲了没有规律的框架,以后去看任何页面的结构式,我们基本上可以用上面这些去
     分类.

第三章 网页设计元素

网页布局在多数情况下是在顶部放置必要的信息,如公司名称,标志,广告,以及导航条,或将导航条放置在左侧而右侧是正文,这样的布局结构清晰,易于使用,当然,也可以根据网站的性质的需要,尝试这些布局的变化形式, 如左右两拦布局,一半是正文,另一半是形象图片,导航,或者正文不等的两拦布置,通过背景色区分,分别放置图片和文字,在设计中可以多吸取好的网站设计精髓.

分析:这里讲到了网页中一些元素的大致放法,比如说顶部放置必要的信息,如公司名称,标志,广告,以及导航条 等等这些.
 

3.1 网页设计的布局概念

3.1.1 页面尺寸
二种常用的尺寸:一般在800*600的分辨率情况下,页面的尺寸为778*435像素
                 分辨率在1024*768的情况下,页面的尺寸为1003*600像素
第一屏:指的是在不拖动的情况下,显示的内容,而页面的原则长度是不超过三屏,
第一屏的位置:黄金位置,"寸土寸金"之地,放置最主要的内容.这个地方也是浏览者习惯关注的焦点位置,常常放置重要的内容,图片,广告.
分析:我觉得我们一般是使用1024*768的分辨效率下考虑页面,然后我认为确实第一屏也是很重要的,里面放置的最重要的内容
     也应该在焦点位置.

 
3.1.2 整体造型
造型就创造出来的物体给人的整体形象,网页的整体形象应该是图形与文本的结合,通常网页形状的组合造型有:圆形,矩形,三角形,菱形,"S"形等.
圆形代表圆满柔和,团结安全等,时尚站点较喜欢以圆形页面为整体造型,矩形代表中规中矩,平衡和谐的视觉感受,许多政府网页以及部分企业网页都是以矩形为整体造型,三角形代表力量权威,牢固均衡等,较大型的商业站点常以三角形为页面的整体造型,
企业站点常运用菱形作为页面的整体造型,也有不少的网页设计是结合多种形状,以某个形状的构图为主,辅以其他的形状综合而成.
分析:我觉得这一点很重要,我们往往只知道设计网页时去定义框架,但是我们应该知道怎么样去在这个基础上去死板的套用框架,
     那就是需要我们对页面进行造型了.而不同的造型也就代表了不同的风格.

3.1.3 页头
     在习惯术语中,页头也称之为页眉,页头的作用是定义页面的主题,一般站点的名字多数都是显示在页头里,通常展示的标志以
     及其网站的标题,旗帜广告,页头也是整个页面设计的重要组成部分.

3.1.4 文本
     文本是这个网站信息内容的重要组成部分,在页面中多数以行或者块(段落)出现,通常相较于导航条区域,有自己的文字区域     位置,在整个页面视觉节奏上,形成反差对比感

3.1.5 页脚
     页脚和页头能使用页面更完整,页头是在页面的顶部位置,放置站点主题,而页脚放置的是副导航菜单标题,制作者或公司信息     ,版权日期.

3.1.6 图片
     所谓图形并茂,相得益彰,文字和图片具有一种相互补充的视觉关系,最理想的效果是文字图片的密切配合,既能活跃页面,又      能使主页有丰富的内容,图片和文本是丰富网页的两大构成元素, 图片为点缀增加文本的可读性,趣味性,文本为阐述信息内容
  .

    分析:对于这个我体会比较深 我觉得在设计页的时候,很多时候如果我们加了图片进去了就效果大不同了,比如看那些韩式
         风格的网站很多就是用的这种风格.

3.1.7 多煤体
    网站要吸引浏览者注意,页面的内容可以是三维动画,Flash等技术来表现,让声音,动画,视频等其他媒体更多的出现在人们的     视野里,丰富网页多层次的视觉视听效果,更贴近于生活,由于网络带宽的客管限制,在使用多煤体的形式表现内容时,应考虑的     客户端的访问速度.

   分析:这个也很重要我觉得有了一些多煤体,往往会有意想不到的效果

分析:上面这些从页头一直到多煤体我的总体感觉是首先我们要内容认清页面的这些元素,当我们认清以后,我们就要对这些元素
     定义他的特点,一般放置那些东西,这样我们在设计的时候我们也就是把框加和造型定义好以后,我们就应该考虑页里应该放     置那些东西了.

 

3.2网页设计的主要视觉元素

3.2.1 导航样式
   其实它就是一组超链接,是整个网站的提纲,好处很多,也是十分必要的.导航的样式很多有弹出的,移动的等等很多.
   导航的位置结构:可以细分为左文右导航栏,左导航栏右文,左右导航中间栏,推荐使用第一种.
   分析:我觉得不管使用那一种,总之目的一个,起导航的作用我们可以使它更加美观 更加有特色.
        比如说有位置变化的导航,图标修饰的导航,于网站内容相关的流程图表为导航,构思巧妙.
   用颜色来区分的导航

3.2.2 网站标志
   是一站点的特色与内涵,起图形的设计创意来自于网站的名称与内容,一般会出现在站点的每一个页面上,是网站给人的第一印   象,logn的作用很多,最重要的是表达网站的理念.便于人们识别,被广泛用于站点的链接,宣传等,类似的企业标志
 logo一般通过图案,文字的组合,达到被标识的战事说明,沟通交流,从而提升访问者的浏览兴趣,增强网站印象的目的.

分析:我很认同多表示起作用这一点,至于怎么设计标志,就是表达网站的理念.便于人们识别,广泛应用.标志的设计应与网站的属性相吻合,不少知名网站logo设计非常简洁,易记.

3.2.3 文字的排版
文字和图片是网页中的两大构成要素,文字排列组合的好坏,直接影响到其版面的视觉传达效果.

文字设计的成功与否不仅在于字体本身的书写.同时也在于其运用的排列组合是否得当,为了造成
生动对比的视觉效果,可以以风格,大小,方向,明暗度等方面选择对比的因素,也可以把它们当作
视觉中的点,线,面来加以引用,使文字和内容与页面的其他元素有基的结合起来,成为一个整体.

网页的文字一般体现在以下几个方面:网站或网页的标题,网页正文,文字导航栏,版权说明等相关信息,图形中的文字,装饰用的文字等.
通常一套网页结构中最多出现三种字体,一种用作标题,一种用作导航按钮和小图标,另外一种则
用作正文.

1):标题设计
标题可以分为网站的标题和栏目标题两类,网站标题是网站或者企业标志和名称等文字,网站的标题文字要符合网站的主题及风格.
标题除了置于段首,还可以居中,横向,坚向等编排处理,制造新的设计效果.
栏目标题是页面视觉的起始点,一般来说以简洁,清晰,易于阅读为宜,标题文字的字体需要要根据内容和主题来选择,最好与内文字体有所区别,粗壮一些,以示突出.

用图形设计制作标题可以避免千篇一律的文字标题所带给人的单调
感和枯燥感.

分析:我觉得标题是应该突出醒目,简洁,有个性,符合网站的主题风格.

2):文字的层次
网页中的文字需要按照大小,色彩,粗细来分出标题,正文和段落,形成一种视觉的节奏感.
结构中规划最主要的部分就是"对齐"和"平衡"
根据内容和版面的要求,在页面主次安排上,可以突出图形,文字则占较小的份量,也可以突出
文字,填入适当的图形,使整个页面看起来均衡有序.

3)文字的整体编排
  a:文字的叠置
  b:文字的图形化

3.2.4 图像
   是除了文字之外,网页页面上最重要的视觉设计元素莫过于图象了,网页中图像的造型是页面
设计中最重要的视觉要素,从视觉规律上看,人们对与图象的兴趣大过与文字,
我们应该形成画面的主要图象,其他图象起,配套作用.

图片的格式: 网页通常使用的格式为:gif和JPEG 除此以外还有两种未被广泛应用的图象格式:
PNG和MNG

1:图片的格式

(1)GIF格式
 优点:支持透明和交错模式和交错 
 缺点:最多只能使用256种颜色

(2)JPEG格式
 优点:支持24真彩,适当于具有丰富的细节的高质量图象
 缺点:采用了一种失真的压缩算法.通过去掉图象的部分信息来获得较高的压缩比.

(3)PNG格式
  优点:在透明上可以覆盖任何背景上看不到的接缝,改善了gif透明图象描边不挂的问题.
  缺点:首先不支持动画的应用,虽然采用了无损压缩方式,使其具有相同的图象质量的png 
       图象文件比JPEC图象文件小,但是JPEG可以通过适当牺牲画面的品质而取得比pNG更小
       文件尺寸另外,png 不支持CMYK模式

(4)MNG格式

分析:我觉得上面几种图片的格式各有特点,掌握他们各自的优缺点,我们就可以很好的利用他们.

2:图片的类型
1)摄影类 能够直观,真实的再现产品,个人,企业形象,因此在网页中运用范围最广
2)矢量漫画类
3)抽象图形类
4)图标图形类

3:图片的排版
一个页面上的视觉中心,一般放上重要的文字和图片

4:文字图片的留白量
  主要指除字体本身所占用的画面的空间之外的空白,即字间距离以及其周围空白区域,
文字组合的还坏,很大程度取决于空白的运用是否得当,不同类别的文字的空间要适当集中
,并利用空白加以区分.

留好的空白和缝隙是有品位,有智慧,甚至有实力的表现,留空白可以加内容的独立性,又是版面
增强节奏感的最佳方法.

分析:确实我觉得留空白能够体现出作者的设计风格以及很多东西

3.2.5 背景
1:底纹背景 是指网页或表格的背景图案,往往通过不同肌理效果来表现
  对于现在的网络来说使用100K大小的图片已经没有障碍.
底纹背景,通常色调要比较柔和,重要起衬托主页内容,设计的作用,使用浏览者一眼看到它,但
不喧宾夺主,设计的时候要设计好背景中图形与页面其他元素之间的排列关系.做到风格统一
首尾呼应,浑然一体.

2:肌理背景

 

3.2.6 动画

1):gif格式的
2):swf格式的

3.2.7 广告banner

广告文字有一般的尺寸

通常banner的文字要尽可能的简洁明了,考虑到文字的搭配,配合的图形不要太复杂,为了突出
主题,文字尽量使用黑体粗体等字体,而不适宜用过多种类型的字体,避免造成眼花的感觉,为了使
不增加图片的占用空间,图形尽量选择颜色较少的,适应存储为jpg格式的静态图形.

       

第四章 网页设计的风格

4.1 网页设计构成要素

网页的风格,图形,内容千变万化,构成图形图像的最基本的造型元素是点,线,面,的变化组合构成网页设计的多样化,是与别具一格独特性相联系.
点线面的变化是网页设计活力的体现,也是创造形式美的根本要求,使网页设计具有不同审美
倾向的特征
如果以不同图形或者单位来划分,点,线,面是相对的

4.1.1点的构成
在网页设计中分割点的属性可以创造出千变万化的点造型

点具备强烈的视觉吸引力,点的数量会有生动感,点的连续会产生节奏,韵律和方向,疏密的点阵会产生空间感,点的形状,方向,大小,位置,
聚焦,层叠,交错能给人带来不同的心理感受.
视觉上的点可以是圆形,也可以是方型,通过交叠,错位,大小,方向的变化,产生欢快,跳跃的风格.
                                                 

4.1.2 线的构成
线是由点的移动或者连续排列构成的,或者说是由两点连接而成,是不占面积的.
用线能表现作品情感和抽象意义,网页的工整感,速度感也是靠钱来表现的.

线在空间中具有方向感和运动感.
总的来说,线分为直线和曲线二种,直线分为垂直线,斜线,水平线,曲线分为几何线,自由曲线
长短,形状的变化,坚硬,力量,速度的感觉,等等很多都表现很多东西.

可以运用重复,近似,渐变,对比,等手法将不同的线运用的页面中去,以获得不同的效果,但是要
注意对比,协调的效果.
线是分割页面的主要元素之一,是决定页面风格的基本元素,根据各自线形的特征,可以设计出不同风格的
网页.

分析:我觉得线就是我们美术里的线表达的意思一样的

4.1.3 面的构成

点的密集,线的运动就产生了面,面通过大小,位置,形状,角度的变化,形成自己的个性和情感特征.面的组合是灵活多样的,一个面可能有叠加,重合,穿插的效果.

分析:我们通过美术的角度去看面,然后理解通过面面的组合 我们能够达到很到不同的效
果

4.1.4 混合的构成

点,线,面是视觉构成的基本元素,具有不同的情感特征,是最重要的表现手段.
我们单独的用某个点,线,面 可能有些单调,但是如果组合起来的话 往往就会产生许多意想不到的效果

分析:我觉得在网页上设计东西 我们运用点线面 就和我们在一张白纸上画画一样的.
     其实在设计前我可以在纸上画出其草图

4.2 网页设计的风格类型
网页的设计作品实际上没有好坏之分,只有风格类型上的区别,网页的应用范围很广,几乎
覆盖了所有行业, 网页的整体风格要靠图形图象,文字,色彩,版式,动画来表现.

在不同的领域中,艺术创作的角度方式是有区别的,网页风格大致可以分为:平面风格,
矢量风格,像素风格,三维风格

网页的"造相"

凡是较著名,有影响的网站,已经在网页风格方面形成了自己的特点.
"造相"就是要求网页版面总体设计要求能够打动人,吸引人的视觉形象,要有一个强势的区别
于其他网站的独特相貌表情,网站根据各自所要表现的主题,设计出各自不同风格的版面风格.
这个观念可以因设计者的风格,感悟,经历不同,从而达到驾御不同版面的目的.

4.2.1 平面风格
   平面设计是二维的设计,平面风格始终是基于一个二维视图来工作的,侧重于构图,色彩以及表达的思维主旨,往往给人以空灵的意境和透气的爽快的视觉,这种构图形式可以在有限的页面中表现出无限的空间感觉
此种风格在网页设计里最常见

分析:我觉得确定某种风格很重要,然后我们可以画一个有个性的平面风格的图然后在进行设计.

4.2.2 矢量风格
  矢量图使用直线和曲线来描述图形,这些图形的元素大多是一些点,线,矩形,多边型,圆和弧线等基础元素,它们都是通过数学公式计算获得的,矢量图形最大优点是无论放大缩小也会失真,
最大的缺点是难以表现色彩层次的丰富的逼真效果

矢量图是世界通用的设计语言,由于具有夸张,极具有个性的装饰表现手法,目前在国内互联网上被运动的越来越多.
分析:我觉得必须认清它的优点缺陷,并理解它一般能表达的风格,这样在什么时候该用的
     我们就心理有底了.

4.2.3像素风格
  像素图属于点阵式图象,它是一种图标风格的图象,更强调清晰的轮廓,明快的色彩,几乎不用混叠方法来绘制光滑的线条,由于许多不同颜色的点一个巧妙的组合与排列在一起,构成了一副完整的图像,这些点称为像素,图像称为像素画.目前像素画制作技术以日本,韩国比较成熟,像素风格的网站,为互联网添加了独特,亮丽的风景线.
分析:对于这个我不是很明白 我只知道的时候 它们应该是是一个个的像素点构成的吧
质

4.2.4 三维风格

     三维是在定视图,正视图,侧视图以及透视图来创作编辑物体的,以一个具有长,宽,高3种度量的立体物质形态出现,这种形态可以表现在商品的外性上,也可以表现在商品的容器或者其他
地方.在网页设计里,三维风格表现简单得多,三维空间的设计可惜助于三维的造型手法,通过折叠,凹凸的处理,使画面产生浮雕,立体等三维效果,三维构成以丰富的厚重的内涵,深度以及多层次,全方位的展现,给人以深厚,强烈的视觉印象.

分析:对于三维的我觉得我平时见的也比较多,一般立体感比较强

4.3 软件界面简析

软件界面作为一种特殊媒体设计,具有平面,立体设计普遍特征的同时,还具有自身的独特性,
从根本上看,它是一种以功能为主的设计
无论是网页设计还是软件界面的设计,它们之间正越来越多地相互借鉴,相互渗透.

分析:这里告诉的是网页设计与软件界面设计是不同的

4.3.1 UI行业常用名词
UI的本意是用户界面,是英文User和Interface的缩写
网站设计与用户界面设计的区别在于 设计师必须放弃对界面的完全控制,部分由用户及其客户端,硬件来决定
UI是人机交互设计的图形界面设计部分,交互设计所倡导的是使产品内容被简单的使用
分析:我觉得产品内容被简单的使用这个值得参考

GUl 是一种可视化界面,它使用图形界面代替正文界面,也是一种结合计算科学,美学,心理学,
行为学,以各商业领域需要分析的人机系统工程,强调人,机,环境三者作为一个系统进行总体设计

GUL即人机交互图形化用户界面设计,它可以优化产品的性能,使其更适合用户的操作需求,直接提升产品的市场竞争力.
分析:我觉得GUL设计应该是一种专业针对强的设计

4.3.2 软件界面设计
  界面设计是为了满足软件专业化,标准化的需求,对软件使用界面进行美化,优化,规范化的设分支具体包括软件启动封面设计,软件框架设计,按钮软件,面版设计,菜单设计等等
界面可分为感觉(视觉,听觉)和情感两个层次,用户界面设计是屏幕产品的重要组成部分
用户界面设计的三大原则是:置界面于用户的控制之下,减少用户的记忆负担,保持界面的一致性.
界面设计是以功能性界面为基础,以环境界面为前提,以为情感界面为重心而构成的,它们之间
形成有机和系统的联系

界面设计的运用,核心是设计分析
中国软件开发已很大程度上与西方接轨,UI在中国发展需要一个自上而下的推动性改革
分析:我觉得上面的文字可以仔细推敲

软件启动封面大小多为主流显示分辨的1/6大,应醒目地标注制作或者支持的公司标志,
产品商标,软件名称,版本号,网址,版权声明,序列号等信息,以树立软件形象,方便使用者或购买者在软件启动的时候得到提示.

界面色彩的要求:计算机屏幕的发光成像和普通视觉成像有很大的不同,应该注意这种差别并做出
恰当的色彩搭配,对用于长时间使用系统的用户应该使用用户在较长时间使用后不至于感觉到视觉疲劳,例如:以纯度较低的淡彩,灰色为主配色,背景深,前景浅等原则,尽量使用同类色,近似色
系,切记色彩过多,使人产生眼花缭乱的感觉,严重影响用户视觉交互

分析:我觉得上面说的很对,应该好好分析借鉴

4.3.3 面板
我们习惯称之为皮肤
面板的设计应该具有缩放功能,面板应该对功能划分清晰,应用和对话框,弹出框风格匹配,尽量节省空间,切换方便.

4.3.4
图标用来宣传商家的商标或者特定的标志,在软件界面中可以视操作系统的重要元素, 界面中的图标是功能标识,都具有快捷传递信息,便于记忆的特点.

第二部分 网页配色

彩色网页具有吸引力的特征,有悦目,装饰性强等特点.
在实用美术中,常有"远看色彩近看花,先看颜色后看花,七分颜色三分花"的说法,这也说明在任何
设计中,色彩对视觉的刺激起到了第一信息传达的作用.
色彩是光的一种特性,是光线的一部分经有色物体反射刺激眼睛,在头脑中所产生的一种反应

分析: 对于色彩以前我认真研究过,色彩构成的笔记重点全面分析了

5.1 色彩的感觉
    色彩是与人的感觉(外界的刺激)和人的知觉(记忆,联想,对比等)联系在一起的,色彩的感觉往往存在于色彩的知觉中. 每个人对与色彩的感觉是有差异的,由于国家,宗教等不同 不同的人
对色彩的感觉是有差异的

灰色调给人亲切的感觉:
灰色让人有平稳踏实,稳重亲近的感觉,易于长时间地观看,但较压抑
明亮的颜色使人的心情愉悦 但不易于长时间的看,容易有焦躁的感觉
男性相关的颜色:通常使用较深沉硬的黑 棕 咖啡 天蓝色
女性相关的颜色:通常使用粉色,绿色,挑红色或者美黄色等
环抱相关主题的颜色:通常是使用同类色,为蓝色,翠绿等干净明快的浅色系

分析:我觉得上面这些很重要,因为我们既要到不同方面的颜色一般用什么方面
     也应该知道什么样网站用什么颜色.

配色方案通常是根据主题而不同的
以上不同主题还有许多,如中国文化风俗,喜欢使用一些红色,纯紫,亮黄色

色彩有冷,暖的感觉
色彩有进退和张缩的感觉
色彩有轻重,软硬的感觉
色彩有华丽 朴素的感觉
色彩有积极与消极的感觉

5.1.1 色彩的醒目性
色彩和背景之间的明度差,直接影响着观赏者的辨认度

5.1.2 色彩感觉的偏差
 在网页设计中,除非是为了追求特殊个性的主题效果,否则色彩的感觉与内容不符,无论多么美丽的配色,都令人感觉不舒服

5.2 色彩的属性
色相
明度
纯度

5.3 常用的基本概念

原色
间色
复色
补色
邻近色
同类色
暖色
冷色

5.4 网页色彩的色调组合
 5.4.1 色调
 主色调
 辅色调
 点晴色
 背景色

 5.4.2 色彩的对比
 色相对比
 明度对比
 纯度对比
 补色对比
 

 5.4.3 色彩的调和
 同种色的调和
 类似色的调和
 对比色的调和
 渐变色调和

分析:这一章我写的东西比较少,对于这一章的内容在色彩构成里其实我写的很具体了,所以完全可以参照那里,这里只点一下了

第六章   网页中的色彩
最迅速也是最持久地给访问者留下网站的印象是因素是色彩

6.1 网页安全色
使用网页安全颜色进行网页配色可以避免原有的颜色失真的问题,
网页安全色可以在www.visibone.com下载

分析:所谓用网页安全颜色就是它可以避免原有颜色失真的情况,否则就会利用浏览器内置调色版
中与颜色最近的颜色进行替换.我们可以根据安全色谱 很好掌握控制网页中的环境颜色.

6.2 常用的网页的色彩模式

6.2.1 RGB色彩模式
由于显示器是采用RGB这种方式表示色彩,因此该色彩空间法是最常见的表现手法.RGB模式以RGB色彩为基础,而RGB以RGB模式为基础,而RGB型刚依赖混合不同的红绿蓝值来建立色谱中的大多颜色
分析:因为显示器是用RGB实现的,所以我们用RGB色彩模式整合性应该是最好的.

6.2.2  IndexEnd色彩模式
索引颜色模式
该模式限制图象大小,使用次模式可以有效的缩减图象文件的大小,而且可以适度保持图象文件的色彩品质,很适合制作放置于网页页面上的图象文件或丝网印刷中使用的图象文件,GIF就是256色的图象格式.

分析:对于上面的二种模式,我们到底在什么使用那种模式 通常对图象质量要求较高的网站,要求
真实呈现真彩色的产品摄影图片,依次都使用RGB模式.
对于网页色差较小,粗造的肌理材质,使用Indexed模式比较契合网网本身的要求.

 6.3 网页设计中色彩基本原则

6.3.1 整体性
色彩的整体性, 就是网页面上各部分的色彩从色调和比例上都有各自的角色,主色调,辅助色,点睛色,背景色一起组合成有节奏的韵律,和谐统一的色彩关系
色彩的基调是否整体和谐,主要从色相的红,黄,绿等,色性的冷色调,暖色调,明度的亮色阶,暗色阶,纯度的高纯度,低纯度等相互搭配组成来看,通常是根据页面内容以主题进行相应的选择,
比如先确定一种主色,然后辅助色,点睛色,注意色彩的相互衬托关系和各种对比因素,协调因素.
当感觉页面色彩搭配不舒服时,就可以利用白,黑色,灰色在里面起到辅助协调的作用.

6.3.2 适用性
要根据不同类型的网站选择最适合的色彩,不同类型的网站需要运用不同的色彩效果去表现,使
形式与内容相统一,符合人们日常固有的认知习惯,例如:医学类较适合雅致,安静的颜色,食品类
多考虑能引发食欲的食物固有色,环境类当然以绿色,蓝色为首选.

选择色调的时候应综合考虑多方面的因素,而不能真根据自身喜好的习惯颜色来做主观的处理

6.3.3 独特性
 对各色相的特性要有充分的了解,在运用的时候要大胆突出其个性的特征,避免与其他同类网站雷同,要符合该网站的主题内容的要求,在不同脱离使用性的情况下多尝试,是颜色的独特性充分发挥魅力,网站便会在与众同类网站脱颖而出.

6.4 网页设计中色彩的作用

 

6.4.1 视觉区域的划分
根据网站不同主题内容来区别频道或者栏目,使人加深印象

色彩在栏目间的应用
在各导航拦之间做颜色区别,二级页面的主色和其他辅助元素的色彩也随着整体色调而变化.
韩国网站较喜欢用色彩来区别各二级页面的内容区域

色彩在页面中的应用
在同级页面里,色彩随着产品的属性变化,在黑白强烈的视觉反差中,产品的形象突出,形成鲜明的对比
纯净的色彩在黑色与白色的衬托下,其悦目动人之处被发挥到极致.

6.4.2 引导主次关系

有很多因素可以影响色彩的主次关系,色彩的大小就是其中最重要的一项,色彩的大小会令色彩的
的主次关系有一种生动的效果,具体可以是位置的变化,也可以是面积的变化.
例:利用纯度的对比 利用纯度摆放位置,加强视觉的中心焦点
   利用面积以及冷暖的对比 主体物体面积小,利用冷暖对比,令主体产品突出,形成强烈的反差.

利用纯度对比能迅速地强化视觉中心效果,无彩色的黑白对也相当强烈

6.4.3 营造活跃的气氛
  能营造真实的场景空间,活跃并渲染气氛

色彩营造的空间感 属于橙色和黑色的双色调,把其他杂色都过滤,并增加真实的空间感.
色彩所营造的气氛 
纯净的蓝色,在这里用老表现产品的高贵,纯正的品质,效果可是淋漓尽致.

                     第7章 使用的网页配色方案

色彩的心理暗示作用非常重要,它所产生的心理效应发生在不同的层次的类型中.

7.1 色彩的象征特征
色彩的象征是从心理学角度去研究色彩的情感和表现力的
色彩语言具有的象征是由多种因素决定的,色彩的联想,既受人们的经验,记忆,知识等因素决定
也因民族,年龄,性别的差别有所不同,还因性格,教养,职业,生活环境等的差别而存在许多心理上的差异,由此形成的色彩象征的多重性.人们对于色彩特征也并非不变,它会因民族间的交往而相
互接近,逐渐融合

色彩的渐层变化里有高,中,低不同的调子,暗色中含高亮的对比,会给人以清晰,激烈的感觉,如暗色的背景下,淡黄色,鲜黄色给人强烈的视觉刺激;暗色中含有中亮度的对比.会给人沉着,稳定,深沉的感觉,如暗色中间含有纯蓝色,中性色与低亮度的对比,给人以模糊,朦胧,平和的感觉,如浅蓝色与灰色.纯色与暗色的对比,给人以激烈,坚硬的感觉.

在网页设计中也经常采用象征性来表示主题与商品的属性,还会运用色彩的象征性来表达冷暖,
轻重,兴奋,沉静,时尚与古典的感觉.

下面根据红,橙,黄,绿,蓝,紫的色环顺序以及非彩色的黑,白,灰对颜色的象征属性举例分析.

7.1.1 红色的热情
红色的色彩温暖,性格刚烈而外向,是一种对让恩刺激性很强的颜色,红色容易引起人的注意,也容易使人兴奋,激动,紧张,冲动,还是一种容易造成人的视觉疲劳的颜色.
在众多颜色里,红色最鲜明生动,最热烈的颜色,极容易汲引人们的目光,红色与黑色搭配,在商业设计中被誉为商业成功色,鲜亮的红色多用与小面积的点缀色.
红色在不同明度,纯度的状态(粉红,鲜红,深红)里 所表达的情感是不一样的.
在网页颜色的应用的几率中纯粹使用红色为主色调的网站相对较少,通常都配以其他颜色进行调和

中红:   由于红色的特殊属性,通常较多被用语食品,时尚休闲等网站.
浅红:   粉红色传达着柔情,娇美,害羞,甜蜜,纯真,诱惑的心理感受.
深红:   深红色传达着稳重,消极,成熟,高贵,无畏的心理感受.

 

7.1.2 橙色的华丽
橙色具有轻快,欢欣,收获,时尚的效果
在整个色谱里,橙色具有极高的兴奋度,最耀眼的色彩,给人以华贵而温暖,兴奋而热烈的感觉,也是令人振奋的颜色,有健康,富有活动,勇敢自由等象征意义.

中橙:  亮丽的橙色传达着温暖,华美,收获,辉煌,豪华,兴奋,时尚的心理感受.
浅橙:  传达着喜悦,收获,和谐,闪耀,温柔的心理感受.
深橙:  传达着华丽,古典,信仰,跳跃,和谐的心理感受.

 

7.1.3 黄色的明快
黄色是阳光的色彩,含有十分年轻的感觉,具有活泼与轻快的特点,象征光明,希望,高贵,愉快.浅黄色表示柔弱,灰黄色表示病态,它的亮度最高,
和其他颜色配合很活泼,有温暖感觉,具有快乐,希望智慧和轻快的个性,有希望与功名等象征意义,黄色也代表着土地,象征着权利,并且还具有
神秘的宗教色彩.
黄色的性格冷漠,高傲,敏感,具有扩张和不安宁的视觉印象
的扩张:在主色调的前提下,黄色是最明亮的颜色,在几乎搭配任何颜色都能起到很亮丽,悦目的效果

中黄色:  崇高,尊贵,辉煌,扩张的心理感受.
浅黄色:  传达着明朗,愉快,希望,发展,雅致,清爽的心理感觉,较适用于女性文化
深黄色:  传达着高贵,温和,内敛的心理感受.

7.1.4 绿色的活力
绿色与人类息息相关,是永恒的自然之色,代表了生命与希望,也充满了青春的活力,绿色象征着和平与安全,发展与生机,舒适与安宁,松弛
与休息,有缓解眼部疲劳的作用
绿色在黄色和蓝色的冷暖之间,属于较中庸的颜色,这种使得绿色的性格最为平和,安稳,大度,宽容,是一种柔顺,满足,优美里，受欢迎的颜色.

温柔又有春天生机盎然的场景气氛,只使用了少许低纯度的橙色,蓝色作为点缀,立即增添了活力.
中绿:  黄绿色传达着清新,平静,安逸,和平,柔和,春天,青春的心理感受.
浅绿:  浅绿色传达着优雅,休息,安全,和睦,宁静,柔和的心理感受. 
       低纯度,稍微有些灰调的浅绿色,能起到视觉的作用,配以小许高纯度同类色,以增添生气.
深绿:  传达着茂盛,健康,成熟,稳重,生命,开阔的心理感受.

 

7.1.5 蓝色的博大
蓝色是色彩中比较沉静的颜色,象征着永恒与深邃,高远与博大,壮阔与浩渺,是令人心境畅快的颜色
蓝色朴实,稳重,内向等性格,能够衬托那些活泼的因素,具有较强扩张力的色彩,同时也活跃也页面,另一方面蓝色也有消极,冷淡,保守等意味
蓝色与红,黄等颜色运用得当,可以构成和谐对比的调和关系.
蓝色也是网站设计中运用得最多的颜色.

中蓝:  传达着深远,永恒,沉静,无限,理智,城实,寒冷的心理感受
浅蓝:  传达着淡雅,清新,浪漫,高级的心理感受,常常用与化装品,女性,服装网站.
深蓝:  稳重,冷静,严谨,冷漠,深沉,成熟的心理感受.

7.1.6 紫色的高贵
姿色是一种在自然界中比较少见的颜色,象征着女性化,代表着高贵与奢华,优雅与魅力,也具有
庄重,神圣和浪漫的品质,另一方面又有孤独,神秘等意味.

姿色的明度在有彩色的色度中是最低的,紫色的明度给人一种沉闷,神秘的感觉,在紫色中红色的
成分较多时,显得华丽,和谐,在紫色中加入少量的黑,并具有沉稳,庄严的感觉,在紫色中加入白色
,则变得优雅,娇气,并充满女性的魅力.

中紫: 传达着高贵,优雅,幻想,神秘,庄重的心理感受.
浅紫: 传达着妖媚,优雅,娇气,清秀,梦幻的心理感觉,并充满女性的魅力.
深紫: 传达着华贵,深远,神秘,寂寞,珍贵的心理感受.

 

7.1.7 黑色的神秘
黑色是暗色,是纯度,色相,明度最低的非色彩,象征着力量,有时感觉沉寞,虚空,有时感觉庄严,
肃穆,有时有意味着不祥和罪恶,自古以来,世界各族都公认黑色代表死亡与悲哀,黑色还具有能
吸收光线的特征,有一种变幻无常的感觉.
黑色能和许多的色彩构成良好的对比调和关系,运用范围很广,也常用来表示英俊的男人.

只要黑色为背景,前景都是主角,任何色调在它的衬托之下都一览无遗.
黑色在服装,音乐,个人网页等颇具有个性色彩的网站有许多的应用.
黑色传达着严肃,刚健,坚实,粗莽,黑暗,深沉,神秘,寂静,悲哀,压抑的心理感受.
 
7.1.8 灰色的内涵
两种或两种以上的色彩混合,是中性色,具有中等明度,无色彩特点,如搭配不好,页面容易显得
灰暗,肮脏,任何色彩加入灰色都显得蓄而柔和,灰色给人的高品位,含蓄,精致,雅致,耐人寻味
等感觉,同时也容易产生颓废,苍凉,消极,沉闷的意味.灰色能够吸收其他色彩的活力,削弱色彩的
对立面,起到融合的作用
灰色也被称为高级灰色,是经久不衰,最经看的颜色.
灰色传达着中庸,平凡,温和,谦让,中立,高雅的心理感受.
灰色传达着谦虚,平凡,中庸,寂寞,忧郁,消极的心理感受.

7.1.9 白色的纯洁
白色是亮色,是明度组高的非色彩,色感光明,也是最显眼的颜色之一,白色性格朴实,纯洁,快乐,
象征纯粹,朴素,高雅等.
作为非色彩,白色与黑色一样,能与各种颜色相配和,构成明快的对比调和关系,与鲜艳的色彩搭配
时,显得更清爽,更具有活力
通常在网页配色时,若感觉页面沉闷,也可考虑加入白色试试,往往就是点睛之比.

白色传达着洁白,明快,神圣,纯真,朴素,高雅的心理感受.

分析:注意上面讲是按照色相环的顺序来讲的,既讲了每中颜色代表的意思 也赶纯度分为高,中,低来讲了各种颜色按其纯度来分代表的意思,这个很重要,可以作为我们网页配色的很重要的
依据,同时候我们也可以知道 这里配色基本上是:按主色调,辅色调,点睛色,背景来搭配的.
 

7.2 3 种以上的色彩的搭配
经常可以看到一种常规的网页配色方法---不过超过3种以上的颜色,而不少国外网站会出现三,四种颜色的搭配并纯度颇高,使网站极具个性魅力,如一些企业产品网站,商务网站等,赏心悦目的网站不乏其中,它们是如何寻找规律的呢

配色方案1:
1):纯度较高的颜色,搭配纯度较低,明度较高的颜色.
2):不同色相以及不同面积,位置的主次关系,形成有韵味的视觉音符.
3):白色的背景衬托前景,效果显得更清爽,明快整体更统一.
4):背景为复色,补色衬托,配以纯度较高的邻近色红,橙,黄,以不同明度渐变的表现形式,形成了
   视觉的节奏美感,白色块使页面色调更鲜明.
5):深色背景有统一页面各种纷乱色相作用,二级页面不同色相的小文字是该页面的细节亮点所在
6):高纯度的块面积配色以纯度较低且明度比较高的颜色,形成了强烈的视觉节奏感.
7):控制面积,位置的主体物,牢牢锁住视觉中心,使页面主次分明.
8):不同二级页面中间的主体位置,分别使用黑色,白色,灰色来调和页面色调
9):利用了同类色,邻近色,补色之间的关系,相互调和了视觉的感觉.
10):白色的线框使各色块整齐,规律,加上白色的文字,加强了页面的明快感.
11):渐变地调和不同色相,不同的色块.
12):背景色的统一掌控了全局.
13):黑色是最有力的衬托色控制,无论前景怎么变化都能达到和谐统一的目的.
14):背景色,红色边框以及红色纹样背景,统一控制了页面的色相
15):减低纯度,提高明度的各补色之间关系调和

7.3 主题色彩的印象
每一个人的思维方式和接受方式是有差别的,但是同时又有相类似的审美习惯,这其中有一定的
规律和原则,根据年龄性别,嗜好,感受不同,将网页设计大致分类,以次作为参考

7.3.1 不同年龄的印象
1.婴儿
   通常是指出生不到一周的婴儿,适合用明亮,清洁,淡雅的色调,来享受温柔的呵护.
温新的粉红色:粉红色为主的色调,在白色的衬托下尤为温新,干净.
   浅紫色是较能体现女性的温柔的颜色,这里同样有给予宝宝温柔呵护的含义.

2.少年,儿童
   少年儿童活泼的性格,富有朝气的特点,应该使用带有强烈的刺激的色调.
   按颜色区分内容:
   用纯净的颜色区分不同的内容,达到区分不同页面内容的目的,并表达了儿童富有朝气活泼
   好动的性格.

3:青年,成年
  年轻人性格多变,可以说适合的颜色很多,无论是强烈刺激的颜色还是典雅暗淡的颜色,都是适合的范围.

4:中,老年
有强烈刺激的色调转换为素雅,恬静的柔和色调.

7.3.2 性别的印象
男性冷静有力,女性则温柔,亲切.
1):男性
男性多使用冷色调,具有稳重,强大,有力的印象,有表现男性阳刚的鲜艳的色调,有体现绅士风度的儒雅色调,同时对比效果强烈的色调也能体现出男性化.

2):女性
以暖色为中心的色调比较适合体现女性的温柔,可爱,亲切,紫色是表现女性气质的特殊色.素雅,明亮的色调,对比强度低的色调都能很好的体现出女性的气质.

7.3.3 活力休闲的印象
以暖色特别是充满活力的黄色为中心,红,橙色的色彩组合最能创造出温暖的感觉,这种色彩组合
有青春,朝气,活泼,顽皮的特点.红紫色搭配它的补色黄绿色,传递着精力充沛的气息,充分表达
热力,活力与精神的意味.
明度,纯度色调及适当增加对比强度,都符合使用与这个主题.

7.3.4 优雅浪漫的印象
  亮色,淡雅色调是关键的因素,白色背景能产生优雅,浪漫的印象,色相差,明度差尽量控制在清淡,明朗的色调里.粉红色代表浪漫,能引起人的兴趣与快感,而且比较柔和,宁静,使用粉红,淡紫和桃红,会令人感觉柔和,典雅,散发出强烈的女性气息.

7.3.5 简洁质朴的印象
  以干净,整洁的亮色调为中心,可以适当地添加少许灰色以降低纯度,避免使用过多的颜色,尽量使用同类色,邻近色,明度反差不宜过大,要减少对比.

7.3.6 古典神秘的印象
  多使用黑灰,复色为主色调,冷色及明度较低的色调与之搭配较能表现这一主题.
  宝蓝色是古典色彩组合组合的中间装饰色彩,具有持久,稳定与力量的感觉,特别是与
  红橙,黄橙色搭配在一起.
  紫色散发着诡异的气息,能制造出奇幻的效果,各种彩度与亮度的紫色,配上橘色和绿色,
  产生刺激与新奇的感觉.

7.3.7 自然舒适的印象
  明亮又朴素的柔和色调给人以最强烈的自然印象,蓝色,绿色是最大自然的颜色,具有清新,素雅的感觉,能够体现出大自然之美,心情也变得安定,详和.
  采用色相环上绿色的同类色,邻近色,可设计出体现户外环境的鲜明,生动的色调,配上少许红色.更增添生命力的感觉.

 

7.3.8 华丽高贵的印象
色相差,明度差最大化强烈色彩对比,复色作为搭配,并辅以细节精巧的造型,营造出奢华的气质
纯蓝和红色结合在一起,产生蓝紫色,是色相环上最深的颜色,蓝黑,蓝紫和黄橙搭配,象征权威,
深不可测,表现出华丽的皇家气派.

7.3.9 速度力量的印象
力量感的重度,强度通常以明度鲜艳的色调来表现,而速度的轻快则以鲜艳的红色作为基调,
相互结合与冲击力较强的页面,
黄色代表活力和永恒的动感,高纯度对比的配色设计,如黄色和它的补色紫色,含有活力和行动的意味.