设计的基础理论知识.doc

《设计的基础理论知识.doc》由会员分享，可在线阅读，更多相关《设计的基础理论知识.doc（13页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、设计的根底理论学问一：根底理论用美和技术两方面衡量生活的合理性。网页界面设计是将技术性与艺术性融为一体的创 造性活动。在网页消灭的早期，和设计进展的早期阶段一样，网页设计是以功能性为第一指导原则， 以技术因素为主要考虑对象，以完成或实现必要的功能为目标。以字符组成的界面可以起到根本的信息传达作用，同时技术要求相对较低，易于实现，并且有较好的稳定性，故而这种形式的界面在很长一段时间内是人机沟通的主要形式。我国对网页界面设计这一课题的系统争辩还略显薄弱，特别是载艺术设计领域中对网页 界面设计的探讨尤显缺乏。版式设计对设计人员的综合力量与文化素养要求比较高，往往不如文字编排和图形设计那样简洁 把握。

2、从艺术领域来看，颜色本身及其有无，并不意味者艺术作品的艺术性的凹凸，但在网页 界面设计领域，彩色的网页总是要胜于单色的网页。一般状况下使用 256 色就可以将图片的颜色根本复原出来。网络信息的受传者存在着职业、文化、修养、兴趣、生活阅历以及消费水公平方面的明显差异， 因此在网页界面中消灭的视觉形象要适应大多数扫瞄者的口味，越明确，越通俗，越具体越好。 在这样一个内容丰富、信息繁杂的巨大网络世界里，网页界面设计必需以其强有力的视觉冲击效果来吸引扫瞄者的留意，进而使特定的信息得以准确快速地传播。这就要求网页界面设计的形式应力求删繁就简，“以少胜多”，一切分散扫瞄者留意力的图形、线条、可有可无的“装

3、饰”都应摒弃，使参与形式构成的诸元素均与欲传播的内容直接相关。“简洁”是各种艺术形式都必需遵循的普遍原则，正所谓“无声胜有声”，网页界面设计尤其要做到这一点。在社会文化高度兴旺的现代社会，人们因文化素养的提高和价值观念的变化，生活情趣和审美趣味更趋向简洁、单纯。简洁的图形，醒目的文字，大的色块更符合形式美 的要求和当今人们的欣赏趣味，给人以悦目、舒适、现代的感觉以及美的享受，令人百看不厌， 并能回味无穷，联想丰富。网页界面可以依据其传达信息内容的特点来进展类型的划分，主要可分为 6 种形式：（1） 信息查询类：以有用功能为主，留意视觉元素的均衡排布，较少装饰性的元素，如Yahoo!。（2） 群

4、众媒体类：如浪网闻中心。（3） 宣传窗口类：从企业特有形象入手，充分表现企业文化特征，如 Adidas。（4） 电子商务类：使扫瞄者在访问时进展开心的沟通是设计的重点，要求既要具备人们 乐于承受的交互性，又要有吸引扫瞄者留意的页面形式，如当当书店。（5） 沟通平台类：以便利使用为主要特点，指示性强，易于理解，如 BBS。（6） 网络社区类：由于网络社区通常不带有商业性质，因此它的界面设计可以依据社区 内容充分发挥制造性，营造一个自由、舒适、开心的气氛。二：与视觉传达的设计视觉传达设计简称视觉设计Visual Communication Design 或 Graphic Design，有时也被称

5、为信息设计Information Design，视觉传达设计的过程，是设计者将思想和设计概 念转变为视觉符号形式的过程，即概念视觉化的过程，对信息的接收者来说，则是相反的过程， 即视觉概念化的过程，贯穿和联结两个过程的是信息。图形符号具有很强的直观性，但同时在信息传达明确性方面不如文字，有时会消灭“误 读”的可能。在界面设计中，要求信息的发送者和接收者之间必需具备局部一样的信息学问背景，否则在两者之间就必需存在一个翻译或讲解系统作为中间媒介来进展沟通。例如对于一个没有任何西方文化和语言背景的中国人来说，“Just Do It”的文字符号就不会产生任何“动感，活力， 激情”的印象，此时可以通过鲜

6、亮的图象和活泼的颜色来关心传达这个概念。形式美的制造法则：（1） 秩序产生的美感。它通过对称、比例、连续、渐变、重复、放射、盘旋等方式，表 现出严谨有序的设计理念，是制造形式美感的最根本的方式。（2） 和谐产生的美感。它是以美学上的整体性观念为根底的。构成界面形式的文字、图 形、颜色等因素之间相互作用，相互协调衬托，都为界面的功能美与形式美效劳。（3） 变化产生的美感。变化的法则表达了设计存在的终极意义，即不断地推陈出，不 断地制造的形式。在艺术问题上没有什么严格的法则，艺术天才不行能是构造的奴隶，他不管怎么干，都不会侵害 艺术原理，而只会制造出的原理。细心收集和审慎选择艺术和设计的古今范例有

7、助于训练设计师的大脑和视力。界面的借鉴不仅要从同类设计作品中求得，更重要的是从文化传统中找寻。日本现代设 计在不长的时间里进展到较高水平，重要缘由之一就是很多日本设计师自觉地将日本的文化传统 融入到现代设计理念之中。三：图形图象设计图形图象的视觉冲击力比文字大 85%，故有人说，一图胜千字。除了圆形以外，点还可以是方形、三角形、星形、自由形等很多外形，在视觉上，只要相对地小， 就有点的效果。图形图象的扩展造型元素，是在点线面这些根本造型元素根底上进展的，它进一步分析 了形成图形图象不同视觉效果的影响因素：空间，运动，质感。图形图象所产生的空间感，一方面可以通过摄影、绘画的技法获得，一幅好的摄影

8、绘画作品使物象有呼之欲出的感觉；另一方面还可以运用不同的手法对点线面等元素进展组合，从而使平面图形图象的三维空间感得以加强。这些手法是疏密、大小、方向、重叠、虚实、色调的变 化和光影的利用。图形图象可以承受三种方法产生动感：（1） 承受叠合的片断形态，最常用的方法是重复和渐变，如将动作分解成一系列片断形态。（2） 表现形态的运动轨迹，正如人们看到流星拖着长长的尾巴因而推断它正在划过夜空。（3） 承受运动过程中形态或不稳定的形态，将物象运动过程中某一时刻的片断形态或处于不稳定状态的形态捕获下来，并选取动态或动势最大的状态，由于人们寻常对重力作用的生疏， 会不自觉地产生联想：接下去会发生什么？怎样

9、运动？如一个在轮滑过程中飞身跃起的人物形象。创意就是客观地思考，然后天才地表达。假设说，图形图象的创意解决了“做什么”的问题，设计就是具体的“怎样做”。 “传统”虽然在时间上代表历史，但在观念上并不代表陈旧。传统的东西可以让历史得以连续，让文化保持差异性，从而让人们内心产生归属感。中国的传统文化源远流长，在绘画、 书法、建筑、音乐、戏曲、医药、哲学等很多领域都有自己独特的民族风格。图象的退底，是将图片中所选形象的背景沿边沿剪裁掉。退底后的形象，其外轮廓呈自由外形，具有清楚清楚的视觉形态，显得机敏自如，当与其他背景搭配时，既简洁协调，又简洁 突出该形象。图象的虚实比照能够产生空间感，实的物体感觉

10、近，虚的物体感觉远。要想使图象“虚”， 一种方法是将图象模糊，再有就是将图象的颜色层次削减，纯度降低，尽量与背景靠近。局部是相对于整体而言的，相对局部的图象能让视线集中，有一种点到为止，意尤未尽的感觉。四：颜色设计在人的视觉中所能感受到的颜色范围内，绝大局部是非高纯度的色，即含有肯定程度灰的色。一般 24 位显示适配器可产生约 1670 万种颜色，虽然数字很大，但 RGB 的颜色范围要远远小于可见光谱的范围。由于 CMYK 与 RGB 分别是减色原理和加色原理，因此输出的图像与在显示器上看到的颜色相比要暗一些。Lab 颜色模式以明度、纯度和色相对颜色进展表述，因此其在进展图像处理或在不同平台和

11、系统间交换时，都不会产生色偏或失真的状况。人由亮处进入暗环境后，最初大约 15 分钟可以根本适应，到达完全的暗适应大约需要40 分钟。从生理角度讲，眼睛最能适应的光是中等明度的全色光，即中间灰色，当外界光并非中间灰色时，视觉会自动调整这种不平衡现象，因而会消灭视觉残像。为了降低视觉残像的影响， 应避开使用高纯度的单一颜色，或是在纯色中参加肯定量的灰。明度高的颜色在视网膜上形成的物象边缘会有一圈光包围着，视觉感受好似物象扩大了一些。不同色光在视网膜上所成影像位置有前差异，因此产生颜色的进退感。日光中波长较长 的色光如红橙黄成像在视网膜的较前部位，因而产生颜色靠近的感觉；而波长较短的色光如绿蓝 紫

12、成像在视网膜的靠后部位，因而产生颜色后退的感觉。中国传统年画和西方教学的彩色玻璃艺术大量使用色相比照手法。色相的差异是由可见 光波的波长差异造成的，查在色相比照中不能完全依据波长的差异来确定色相的比照程度，红色 光与紫色光的波长差异虽然很大，但都处于可见光的两极，都接近不行见光的波长，因而从视觉 感受上两者的色相是相近的。明度是颜色三要素中具有相对独立性的一个要素，它可以摆脱任何有彩色的特征而独立存在。色相和纯度都必需依靠明度而存在。颜色外形的生疏程度主要取决于形的颜色与四周颜色的关系，特别是它们之间明度比照的关系，色相比照也可以造成对形的识别，但其作用远不如明度比照那么重要，例如，红绿比照是

13、最强的色相比照，但因明度差异较小，形的清楚度不高，浅绿与深绿配色，虽然属于同类色相， 但明度差异大，因此形就具有较高的清楚度。为了到达颜色和谐的目的，除转变颜色的三要素外，合理安排各种颜色所占的面积是调 整颜色协作效果的有效手段。当两种颜色以相等的面积消灭时，颜色的冲突到达最顶峰，比照效 果最为突出，如将一方面积减小力气减弱，整体颜色比照效果也就相应减弱。颜色的力气取决于颜色的明度和面积，明度比例如下：黄:橙:红:紫:蓝:绿=9:8:6:3:4:6 由上述比例可推导出各对补色的明度比例关系，并进一步确定各补色之间到达颜色力气平衡的面积比例关系：黄:紫=1:3 橙:蓝=1:2 红:绿=1:1颜色

14、面积比例关系依据的原理是人视觉生理需求的色量平衡，即调和出视觉乐于承受的 中性灰色所需要的色量比例。该平衡理论可以通过色盘的旋转混合的方法得以验证。从上面的理论看，红绿配色面积比 1:1 时为和谐，但实际应用中红绿面积相等时会给人以刺激猛烈的感受，并不能真正表达精彩彩的调和统一，这是由于颜色的纯度在配色中起到相当 重要的作用，红色的纯度大约为绿色的两倍，因此在配色时红的面积应缩小至绿色面积的二分之 一，这样才能获得调和的颜色效果。颜色的秩序调和主要依靠色立体来实现，孟赛尔色立体和奥斯特瓦德色立体都是可应用 的颜色模型。在色立体中做规章几何线形，线形所经过的颜色就会形成有序的排列。颜色的轻重感主

15、要取决于颜色的明度，明度高的色感觉轻，明度低的色感觉重，在相等明度条件下，冷色一般比暖色感觉略轻。颜色构图中上轻下重符合人的视觉习惯，轻色通常用于上部，重色用于下部，假设界面上部为重色时，在下部的边缘部位应照应一块重色范围，可以达到平衡构图的目的。五：文字的编排设计以语言进展信息传达时，语气、语调以及面部表情、姿势手势是语言的关心和补充，而 在界面设计中，文字的字体、规格及其编排形式，就相当于文字的关心信息传达手段。宋体字型构造方中有圆，刚柔相济，既高雅庄重，又不失韵昧灵气，从视觉角度来说， 宋体阅读最省目力，不易造成视觉疲乏，具有很好的易读性和识别性。楷体字型严峻悦目，间架构造舒张有度，可读

16、性和识别性均较好，适用于较长的文本段 落，也可用于标题。仿宋体笔画粗细均匀，秀丽直立，有轻快、易读的特点，适用于文本段落。因其字型娟 秀，力度感差，故不宜用作标题。黑体不仅庄重醒目，而且极富现代感，因其形体粗大，在较小字体级数时宜彩等线体即 细黑，否则不易识别。圆体视觉冲击力不如黑体，但在视觉心理上给人以光明清爽、轻松开心的感觉，但其识 别性弱，故只适宜作标题性文字。手写体分为两种，一种来源于传统书法，如隶书体，行书体，另一种是以现代风格制造 的自由手写体，如广告体，POP 体。手写体只适用于标题和广告性文字，长篇文本段落和小字体级数时不宜使用，应尽量避开在同一页面中使用两种不同的手写体，由于

17、手写体形态特征鲜亮显 著，很难形成统一风格，不同手写体易造成界面杂乱的视觉形象，手写体与黑体宋体等标准的字 体相协作，则会产生动静适宜，相得宜彰的效果。美术体是在宋体、黑体等标准字体根底上变化而成的各种字体，如综艺体、琥珀体。美 术体具有鲜亮的风格特征，不适于文本段落，也不宜混杂使用，多用于字体级数较大的标题，发 挥引人注目，活泼界面气氛的作用。拉丁字母依据其根本构造可以分为三种类型：（1） 饰线体Serif：此类字体在笔画末端带有装饰性局部，笔画精细比照明显，与中 文的宋体具有近似形态特征，饰线体在阅读时具有较好的易读性，适于用作长篇幅文本段落。代 表字体是罗马体Times New Roma

18、n。（2） 无饰线体Sans Serif：笔画的粗细比照不明显，笔画末端没有装饰性局部，字体形态与中文的黑体相类似。由于其笔画粗细均匀，故在远距离易于识别，具有很好的识别性，多 用于标题和指示性文字。无饰线体具有简洁规整的形态特征，符合现代的审美标准。代表字体是 赫尔维梯卡体Helvetica。（3） 装饰体Decorative，也称Display：即通常所说的“花”体，由于此类字体信笺 于形式的装饰意味，阅读时较为费力，易读性较差，只适合于标题或较短文本，类似于中文的美 术体和手写体。代表字体是草体Script。在某些特别场合，如广告或呈现性的短语中，拉丁字母全部使用小写字母，能够造成一 种

19、平易近人的亲切感。拉丁字母字体大都包含字幅正、长、扁、黑度细、粗、超粗、直斜的变化，因 而由一种根本字型可以变化出多种具有相像特征的同族字体，这些字体统称为“字族”。同一页面中字体应尽量在同一字族中选用，以保证界面具有明确、统一的风格特征。 在计算机字库中，有关字体特征的表示大多彩缩略语，如 Cn(Condensed，长体)，Ex(Expanded，扁体)，Lt(Light，细)，Med(Medium，中粗)，DemBol 或Dm(Demi Bold，半粗)， Bd(Bold，粗)，XBd(Extra Bold，特粗)，It(Italic，斜体)等。中文正文的字符数每行以 20-35个为宜，西

20、文则约 40-70 个字符最易阅读，因此较宽的文字幅面应考虑承受分栏的排布方式。通常设定行距为字高的 150-200%，西文的行距通常小于中文行距。粗细比照是刚与柔的比照，也有人称之为男性性格与女性性格的比照。在同一行文字中使用粗细比照的效果最为猛烈。粗字少细字多易取得平衡，给人以明快颖的感觉，细字少粗字 多，则不易平衡，但往往会产生具有幽默感的特别效果。界面中文字编排要求视觉上产生类似于天平平衡的印象，失去平衡的文字编排设计，将 得不到扫瞄者的信任，并给人以粗劣的印象。可能通过左右延长的水平线，上下延长的垂直线，动感的弧线和斜线，穿插的图形来诱 导视线依照设计师安排好的构造形式挨次扫瞄。在界

21、面的四角配置文字或符号，界面的势力范围就明确地确定下来，界面中即使存在让人感觉动乱不定的元素也会因此而稳定下来。在四角中，左上和右下具有特别的吸引力，是处理的重点，处理得好，可以使界面左右均衡，同时还会形成从左上到右下沿对角线流淌的视觉过程， 给人以自然稳定的感觉。非规律性造型形式的错落变化，应消灭在四周有较充分的留白空间的场所，效果较为显 著。如在界面中心或正上方表现效果较好，标题性文字往往使用此手法处理。分栏式构造中，文字群体通常只消灭在一栏中，每行的字符数相对较少，易于扫瞄。分栏中假设都排布文字群体，界面会显得格外拥挤，故不宜承受。其他栏中可设置名目、标题、导 航等简洁的文字信息，整体形

22、式繁简比照，疏密得当。国内使用较多的是三分栏，国外四分栏式 构造则较为普遍。六：版式的构成与设计网页界面中除了点、线面这些实体造型元素，其余的空间就是“空白”，空白不肯定是“白”， 它可以是与背风光一样的表示“虚”的空间范围。空白能使实体在视觉上产生动态，获得张力。 在中国传统绘画中，空白的表现力丰富，同时又使笔墨生支灵妙，无怪乎古人所说“形得之于形外”，“计白守黑”。页面中奇异地留白，讲究空白之美，有助于更好地衬托主题，渲染气氛， 集中视线，加强空间层次，使版面疏密有序，布局清楚。黄金之比所以有如此神圣和不行思议的力气，乃是由于黄金比是含有无理数的数字，用 公式表示为 =(1+)/2 约=1

23、.618。黄金矩形去掉短边为边长的正方形时，剩下的矩形仍为黄金矩形。以正方形的对角线为长边，所得矩形为矩形，再以矩形的对角线为长边，所得矩形为矩形，以此类推，可以得到任意自然数的矩形。矩形对折成半时，面积虽然只剩一半，但外形不变，仍是矩 形。网页界面的版式设计中，其比例关系一般表达在：页面所限定空间的长宽比，实体内容与虚空间空白的面积比，页面被分割的比例，图文的关系比以及各造型元素内部的比例等形 式上的数量关系。对称的版式设计稳定、庄重、整齐、秩序、清静、沉静，如同中国古代宫殿一样庄重、 严峻，表达了一种古典主义的风格。为避开对称产生的单调和呆板，要在对称中略带变化。视觉艺术中的节奏和韵律来自

24、音乐的概念，节奏较多地强调“节拍”，韵律较多地强调“变化”，假设说韵律感不够，是指缺少变化，过于呆板；假设说节奏感不强，是指变化缺乏条 理规章。比照是指因多种元素相异的特点相比较而更加鲜亮猛烈的紧急感。比照有形的比照大小、方圆、长短、曲直、宽窄，色的比照色相、明度、纯度、冷暖，质的比照刚柔、粗 细、强弱、干湿、轻重、软硬、虚实，势的比照疾缓、疏密、动静、抑扬、进退等。比照 关系越清楚，视觉效果就越猛烈，在一个页面中，通常是多种比照关系同时并存，以产生多姿多彩的表现效果。人眼的视线沿水平方向运动比沿垂直方向运动快而且不易疲乏。视线的变化习惯于从左 到右，从上到下和顺时针方向运动。调查显示，视区内

25、上部比下部注目程度高，左侧比右侧更引人留意。欲使网页在传递视觉信息时顺畅高效，页面须具备清楚的条理性和组织性，产生肯定的 主从关系。常实行的方式有：（1） 加强主从对象的大小比照。（2） 加大主体形象四周的空白。（3） 加强主从对象之间的颜色比照。（4） 将主体形象在页面反复消灭，强化与视线的接触频率，这种强化方式尤其适合于以产 品为主体形象的网页界面。（5） 加强主从对象在形态上“势”的比照。一般来说，网页的版面中水平或垂直的形态居 多，假设主体形象运用适当的斜线和曲线，就会从水平、垂直线构成的环境中突显出来。通过视觉流程，设计师运用视觉移动规律，将多种视觉信息进展有序组织，诱导浏者的视线依

26、设计师的意图进展流淌，从而使扫瞄者清楚、流畅、快捷地承受最正确信息。视觉流程的几 种表现方式：（1） 单向视觉流程：横向，竖向，斜向。（2） 曲线视觉流程。（3） 导向视觉流程：借助诱导因素来实现。线形导向：以线、文字等线形元素来引导观者的视线。形象导向：以图片中人或物的朝始终引导观者的视线，如人物的目光方向，一个座椅 的朝向等。指示导向：通过指示性的箭头、手指或具有透视感的线条来引导视线。（4） 重心视觉流程：视觉会沿着形象方向与力度的伸展来变换、运动，如表现向心力或重 力的视线运动。（5） 反复视觉流程：其运动虽不如单向、曲线、重心视觉流程运动感猛烈，但更富于节奏和秩序美。（6） 散点视觉

27、流程：没有固定的视觉流淌线，强调一种感性、自由性、任凭性、偶然性。 对于栏目设置比较简单的网站，假设显示全部与该页相关的导航，页面势必变得相当庞大，影响了版面的整体布局。最好的方法是将此页面做成弹出窗口，不影响原有页面的导航信息， 同时只设置与该页关系最近的导航链接和首页链接。在视觉习惯上，页面的垂直均匀分割，当左右两局部形成猛烈比照时，会造成视觉心理 的不平衡。这时，可将分割线作局部或全部的弱化处理，或在分割处参加其他元素，使左右局部 的过渡自然而和谐。七：动画设计周期、关键帧和行为被称为动画的三个属性。使用简洁的 GIF 动画生成的广告图形，点击率会上升 10%-25%，而动画广告的面积平

28、均比静态广告小 5%-25%。动画由于在信息的方向性诱导方面的优势，除了能够加强视线在视觉传达领域的留意外， 在引导视线方面能够发挥更大的能动性，引导视线完全依据设计师的意图去扫瞄，以最快捷的途径，最有效的感知方式猎取视觉信息，使设计师能够更有效地影响扫瞄者的视线运动轨迹。当人们面对平面上一些静止的物体时，会在它们之间平分其留意力，假设其中一个物体 突然动起来，全部的留意力在 1/5 秒后都将转向它。人的正常视觉容量约为每秒 25 比特，即大约每秒 4 个汉字，每分钟约 250 个字左右。动画表达追求的是信息的准确传达，意念的清楚易懂。而做到这一点取决于两个方面：一是动画本身有好的表现手法和设

29、计，使每一个画面或主要变化以最清楚和最有效的方式呈现出来；二是好的时间把握。画面转换的时间要恰到好处，太慢则感觉节奏缓慢，在里面查找不到兴奋点，视觉心理就会感觉空洞、单调，使留意力分散；太快则扫瞄者还没看清要传达的信息，动作已经完毕，创意没有意义，设计也就失败了。一般一个页面有 1-2 个动画区域是比较适度的。假设在页面上必需消灭不止一个动画， 也应赐予较大的区分，如承受面积的大小比照，或使动画的演示有时间差异等。常见的动画设计效果：（1） 颜色循环动画（2） 元素沿直线或曲线的滚动（3） 元素的跳动与闪动。在跳动后保持 5-10 秒的静止，这样跳动吸引扫瞄者的视线，静止则使扫瞄者能看清图像。（4） 元素的淡入与淡出。（5） 元素飞入画面。（6） 元素的缓慢旋转，通常旋转几周后就停顿一会儿。（7） 元素的爆炸与组合。（8） 闪耀和灯光效果。（9） 元素之间的过渡与变形。将一幅图象的局部或整体毫无痕迹地融入另一幅图象中。