形式美与视觉流程

形式美与视觉流程 1形式美学法则2视觉流程 1形式美学法则 网页设计与其他平面美术设计一样 同是依赖视觉感受的艺术形式 视觉语言在网页设计中无处不见 从文字排版 选择插图 色彩搭配 标志设计 技术运用等给视觉带来的冲击力 到创意的切入等等 见图8 1 图1视觉语言在网页中的应用 1 1视觉形式美的基本法则1 主从与重心任何艺术上的感受都必须具有统一性 这是一条已经公认的艺术原则 为了加强艺术作品整体的完整统一性 各组成部分应该有主与从的区别 重点与一般的区别 任何一件作品其构成整体的多个局部之间必须有机联系 作品的美感是从统一的整体效果中感受到的 主从关系是整体局部之间的法则 如果各部分不分主次 同等对待 或者竞相突出自己 都会破坏整体的完整统一性 会流于松散 单调和杂乱 重心是指在设计中有意识地突出和强调其中某个部分或要素 使其成为整体中最能产生视觉吸引力的 兴趣中心 见图2 图2主从与重点 2 对称与均衡所谓均衡 是指在特定空间范围内 形式诸要素之间保持视觉上力的平衡关系 静态的均衡就是对称 或以中轴线对称 或以对称中心辐射对称 对称的构成能表达秩序 安静和稳定 庄重与威严等心理感觉 并能给人以美感 尽管对称的形式自然就是均衡的 但是我们并不满足于这一形式 而常用轻巧灵活的对称形式来保持均衡 这就是动态的均衡 均衡是指不等质和不等量的形态求得非对称形式 它是对称的变质 在静中倾向于动 与对称相比较 均衡是不以中轴来配置的另一种形式格局 见图3 图3对称与均衡 3 对比与和谐对比与和谐反映了矛盾的两种状态 对比是在差异中趋向于不同 和谐是在差异中倾向于相同 对比是对差异性的强调 是利用多种因素的互比互衬来达到量感 虚实感和方向感的表达力 如形的大小 方圆 线条的曲直 粗细 疏密 空间的大小 色彩的明暗 冷暖对比等 对比基本上可以归纳为形式的对比和感觉的对比 形式上的对比以大小 明暗 曲直 粗细 强弱 多少等对照来加强视觉效果 对比的画面效果鲜明 刺激 响亮 力度感强 感觉上的对比是指心理和生理上的感受 多从动静 软硬 轻重 刚柔 快慢等方面给人以各种质感和快感的深刻印象 和谐是近似性的强调 是使两种以上的要素相互具有共性 形成视觉上的统一效果 和谐是综合了对称 均衡 比例等美的要素 从变化中求统一 很巧妙地构成要素间的调和 能满足人们心里潜在的对秩序的追求 和谐可以从画面的类似性组织而获得 如大小的类似性 形态的类似性 色彩的类似性 位置的类似性 速度的类似性等 对比是把两个极不相同的东西并列 使人感到鲜明 醒目 振奋 活跃 和谐是把两个相似的东西并列 使人感到融合 协调 在变化中保持一致 对比与和谐是相对的 是对立统一的艺术手段 不是简单数值上的差异 而是以人的视觉感受为依据 对比与和谐相辅相成 过分的对比会太强烈 刺激 而过分的和谐又会平庸 单调 在设计运用中要注意对比与和谐的适度 要求鲜明而不刺激 调和而不平淡 从形式构图上讲 对比要求集中 多体现在画面主题和特别强调的点 线和小的块面上 和谐则体现在画面的整体照应之中 任何视觉传播设计都需要一定量的变化 如果画面由同质要素构成 就容易得到既对比又秩序之美 但会有单调 呆板之感 如果画面由许多对比要素所构成 则容易造成杂乱和不协调 假如 画面由类似要素的许多部分所构成 也就是说 在大部分调和中有部分对比或不协调 就容易得到既有秩序又有变化之美 产生和谐又对比的效果 见图4 图4对比与和谐 4 节奏与韵律节奏是韵律形式的纯化 韵律是节奏形式的深化 节奏富于理性 而韵律则富于感性 构成要素做长短 强弱的周期性变化来产生节奏 最单纯的节奏是重复 节奏带有机械的美 韵律不是简单的重复 它是有一定变化的互相交替 是情调在节奏中的融合 能在整体中产生不寻常的美感 韵律是构成要素连续反复所造成的抑扬调子 具有感情的因素 韵律能给人情趣 满足人的精神享受 它在造型中的重要作用是能使形式产生情趣 具有抒情意味 韵律能增强设计作品的感情因素和感染力 引起共鸣 产生美感 开阔艺术的表现力 见图5 图5节奏与韵律 韵律按其形式特点分类 一般有下列几种形式 连续型韵律 以一种或几种要素连续 重复地排列而形成 多种要素以基本相同的间隔有规律地重复出现 交错型韵律 各组成要素交替在画面上出现 表现出一种有规律的变化 增强了画面的情趣感 交错型韵律可以通过图形 方向 位置 色彩等的变化而产生 渐变型韵律 有规律地渐变形成的韵律 可以由构成要素的大小 形状 方向 色彩有规律地演变而得到 如逐渐加长或缩短 变宽或变窄 色彩上变冷或变暖等 起伏型韵律 渐变韵律依一定规律时而增加 时而减少 形成破浪式的起伏 产生一种生动活泼的运动感 旋转型韵律 构成要素按照一定的轴心或轨迹做有秩序的或渐变的旋转运动 造成强有力的动态和特殊的情趣 自由型韵律 构成要素不按一定规律地做一种松散的 自由式的构成 有很强的流动感 灵活生动 妙趣横生 极富于人情味和趣味性 5 比例与尺度比例是指一件事物整体与局部及局部与局部之间的关系 一切造型艺术都存在比例是否和谐的问题 和谐的比例可以引起人们的美感 使总的组合有明显理想的艺术表现力 美好的构成都有适度的比例与尺度 即构成的各部分之间 部分与整体之间的关系要符合比例 见图6 图7 图6比例与尺度 一 图7比例与尺度 二 6 空白与虚实设计中在要强调 突出并给人以强烈印象的构成要素的周围留下空白 就能扩大和提高视觉效果 同时利于视线流动 破除沉闷感 除此之外 空白在画面的虚实处理中还有特殊的作用 虚实作为一种表现形式是为深化主题服务的 画面构成中必须有虚有实 虚实呼应 画面的主题形象要 实 陪体和背景要 虚 虚 是为了突出 实 应该藏虚露实 宾虚主实 不能平均处理 见图8 图8空白与虚实 一 空白的处理也就是画面的空间设计 有人总想把版面 充分利用 总想把文字 图像安排得满满的 认为画面留有空间是一种浪费 其实这种庞杂堵塞的构图往往使人望而生畏 留不下一点印象 空间在构图上有着不可忽视的作用 这种构图上的 少 却是效果上的 多 空间也能引起人们的注意 使人产生兴趣 给人留下深刻的印象 从而最大限度地达到传播目的 见图9 空白是画面形象的重要组成部分 是空间形象的表现 空间能给人以想象的机会 空间不仅是空白 根据创意的视觉表现需要 可能是大块的色彩 也可能是繁复的 多色的但色阶接近的 面积较小而密布的纹样 见图10 图9空白与虚实 二 图10空白与虚实 三 7 形式美法则的实效在对主要的形式美法则进行了简要分析之后 需要说明的是形式美的法则虽已形成一些规律性的审美特性 但却不是固定不变的 更不是僵死的法则 随着时代的发展 形式美的法则也会不断发展变化 我们必须结合广告主题及创意的要求加以运用 使之有助于美的创造 而不要因这些法则拘束了美的创造 1 2视觉形式的构成形式美法则是艺术形式的一般法则 它是形式构成的规律 形式美和传播信息内容是统一的 是为内容服务的 可增强作品的感染力 使人们在阅读作品的过程中享受美的信息 产生吸引人注目的引导作用 形式美以不同的形式展示和表现事物对象的存在 无论是具体的直接可感的形式 还是比较抽象的形式 都能给内容赋彩增色 见图11 图11视觉形式示例 图12多样统一 1 3视觉形式的应用1 大小的对比所谓对比 就是将性质相反的要素配置在一起 使之产生排斥和分离的感觉 达到视觉上的紧张感 对比可以起到强调作用 利用一方反衬另一方 对比即矛盾 没有对比就不可能顺利地进行视觉传达 大小关系为造型要素中最受重视的一项 几乎可以决定意象与调和的关系 大小差别小 给人的感觉较沉着温和 大小差别大 给人的感觉较明显 而且具有强力感 字体大小的对比可以增加画面的精致感 补充画面的力量 大的字体在画面上可以表现强而有力的效果 但缺乏精致感 若配合细小的字体来构成画面 不但可以相辅相成 而且会形成生动有力的对比关系 大小对比是字体编排设计的基本方法 2 明暗的对比黑白或明暗是色感中最基本的要素 在视觉传达设计中也同样如此 明暗对比是广告色彩对比中最基本的对比关系 如果色彩没有明度上的差异 其识别性就会大大降低 色相 彩度的关系就没有基础 在画面上 当明亮部分和黑暗部分形成对比的时候 会产生时差的空间感 明亮的部分是一种环境 而黑暗的部分好像是另外一种环境 给人以强烈的反差 明和暗的对比 相当于光和影的对比关系 利用这些要素可以制造从阴暗的地方窥视明亮的地方 或从明亮的地方探视黑暗的地方的新奇感觉 见图13 图13明暗的对比 3 粗细的对比字体的粗细对比是具有男性化与女性化视觉特征的对比关系 粗的线条 形状会让人觉得粗犷有力 细的线条形状则给人以细腻 精巧的感觉 具有女性化的主要特征 见图14 字体的粗细对比具有主从的关系 在进行字体的编排设计时 往往粗的字体容易成为主体 细的字体容易成为陪体 这是因为粗体字在视觉上比细体字更有张力的缘故 必须注意的是二者的分量 主次要分明 如果细体字分量多 粗体字的分量就应该减少一些 这样搭配起来才明快 图14粗细的对比 4 曲直的对比曲直的对比在视觉传达设计中占有很大的比重 相对于直线的刚劲 挺拔和男性化 曲线很富有柔和感 优美感和女性化 自然界皆由这两种形态构成 只是我们平时没有注意这种关系 只有当曲线或直线表示某种特定的对象时 我们才有了深刻的印象 同时也会产生相应的情感 因此在网页视觉传达设计中 我们可以用曲线或直线来勾勒网页框架 产品外形 或者为了突出曲线的特性而通过直线来进行对比 为了使直线的个性更加鲜明而以曲线来陪衬 见图15 图15曲直的对比 5 质感的对比在视觉传达设计中 质感是非常重要的造型要素 如坚实 柔软 迟滞 平滑 粗糙 细腻等词皆是形容质感 质感不仅仅是一种触感 也是很重要的心理感受 而且在很多情况下两者是融为一体不可区分的 在网页背景图的设计与选用中 不同质感的背景 有不同的表现风格 见图16 图16质感的对比 6 位置的对比画面的位置感是和画面的区域划分相关的 如水平分割产生的由上到下的位置变化 垂直分割产生的由左到右的位置变化 因对角线和中轴线的分割产生的对角和对称的位置关系等 7 主从关系在任何艺术形式中 只有主角和配角的关系明确时 观众的心理才会安定下来 确定主从关系 明确表示主角和配角的设计手法是一种正统的设计方法 容易使人产生稳定感 如果轻重不分 主次不明 会令观众无所适从 8 动静关系在视觉传达设计中 各个视觉要素之间也存在着动与静的关系 扩散的或流动的形象会显动 水平的或垂直的形象会显静 变化多或斜向分割的构图会显动 垂直或水平分割的构图会显静 真实 自然的画面也有动与静的问题 在设计作品上 处理好动与静的关系 才会获得自然而生动的效果 9 起承关系在视觉画面的空间中 由于各种力的相互关系而产生动感 进而支配画面的空间 产生动感的形状和接受该动态的另一形状互相配合 使空间变化生动 见图17 图17起承关系 10 图地关系图地关系类似于主辅关系或主次关系 是画面中重要的视觉关系元素 一般的印刷品都是白纸印黑字 白纸称为地 黑字称为图 相反地 有时会在黑底上印上白字 此时黑底为地 白字为图 习惯上 将白地的画面称为正片 将黑地的画面称为负片 在视觉设计中 利用图地关系的变化 可以设计出具有变化风格的画面 11 对称在画面的中央画一条中心线 使图形被分为对等的两部分 如果相对的两部分形态相同 称为对称 被横线分割的对等形态是上下对称 被垂直线分割的对等形态是左右对称 见图18 对称的形态在自然界中是常见的形态 如生物体 古代楼宇 汽车等 图18对称 12 均衡左右对称的形态因在对称轴的两侧保持着平衡而不会左倾右斜 使人感到极为安定 我们把这种状态作为均衡的状态来理解 换句话来说 对称是均衡的最佳状态 均衡又称平衡 是指在部分与部分的重量或感觉的关系 在画面上 如果出现三个以上的主题 或者存在着部分与部分之间的关系时 就会产生均衡的问题 13 强调强调也是一种对比 为了使重点信息和关键的信息能够从画面中跳出来 很快被观众注意到 往往采用 突出个别 的手法 即在统一中求变化 使重点和特点 出类拔萃 在颜色柔和的画面中配以粗黑的字体 在柔软的曲线中加上锐角的记号 这些都会产生强调的作用 另外 还可以采用强调符号 强调符号如同胡椒和辣椒 只要一点点就会构成味觉的刺激 14 比例在造型上所谓比例 proportion 是量 长度 面积等 的比率 例如有一个长方形 其长与宽的比例便是该矩形的比例 这时显示比例的数字越大 便意味着长方形越加细长 比例近似1时 则成了近似正方形的矩形 15 节奏节奏是指音乐中交替出现的有规律的强弱 长短的现象 在音乐 诗歌 舞蹈和电影等具有实践形式的艺术中 节奏能以听觉和视觉来表现 对音乐来说 节奏是极为重要的因素 在不具备实践因素的造型作品中 也有不少把节奏认作是反复的形态和构造 连续的线 断续的线等等 即使是静止的平面作品 观众观察的视线也必定要追寻形态要素的配置 所以可以说视线在实践上的运动就是使人感觉到的节奏 节奏最常见的形式就是有规律的反复 其视觉要素阅读间隔时间短的会产生快的节奏 阅读间隔时间长的会产生慢的节奏 视觉要素张力强的节奏强 视觉要素张力弱的节奏弱 在平面视觉传达中 视觉节奏的强弱 快慢和变化是通过图形 字体 色彩和构图配置来实现的 见图19 图19节奏 16 韵律人们往往把节奏和韵律看作一回事 实际上节奏和韵律不完全相同 节奏一般是指简单的有规律的重复 韵律是一种谐和美的格律 韵 是一种美的音色 律 是规律 韵律要求美的音律在严格的旋律中进行 韵律是有变化的节奏 具有表现性的特征 与节奏一样 韵律的基本要素也是重复 重复才能产生韵律 在视觉设计中 运用的视觉要素不同和构成方法的细微差别 都会产生千变万化的韵律 见图20 图20韵律 17 导线画面的导线是指能够吸引人的视线从一个物体向另一个物体运动的线索 引起视觉运动的主要原因之一是物体的方向性特征 如画面人物的视线 人物面孔的朝向 见图21 另一个原因是画面图形之间的连接 呼应 过渡等引起的运动 画面的导线是统一视觉流程的关键因素 也是构图完整的重要内容 在设计中常常利用导线的变化使画面更吸引人注目 图21导线示例 18 左右的重心在人的感觉上 左右有微妙的相差 画面的右下角是一处吸引力特别强的地方 考虑左右平衡时 如何处理这个地方就称为关键性问题 人的视觉对从右上到左下的流向较为自然 编排文字时 将右下角空着来编排标题与插图 就会产生一种很自然的流向 如果把它逆转 就会失去平衡而显得不自然 这种左右方向的平衡感 可能是和人们惯用右手有点关系吧 19 向心与扩散我们观察周围的任何事物时 心理上总是期望找到重点 中心或主题 这能方便我们理解和记忆 观众在阅读一则广告作品时 在心理上也同样在找其中心 好像有了中心才有安全感 这就构成了视觉设计中的向心 一般而言 向心构图的画面看上去显得平稳 紧凑 集中 画面的空间趋于某个中心是设计中常采用的手法 但有时因过于正统而流于俗套 20 留白量留白量是版面视觉设计的重要问题之一 如同人讲话时使用不同的速度和语气抑扬是为传达一定的信息一样 留白量也是为使对象得到理解而服务的 影响留白量大小的因素主要包括 宣传主题的差异 内容信息量的大小 图片 文字的造型 面积和数量等 一般来讲 留白量多的画面能给人以高雅 鲜明 精致之感 留白量少的画面则给人以丰富 饱满 紧凑之感 见图22 当然 一个画面的传达是由多种因素组成的 处理得不好 留白量多的画面也可能松散 单调 留白量少的画面也会拥挤 繁杂 琐碎 图22留白量 21 统一与调和统一与调和是使网页画面具有整体效果的关键 统一实际上是指多样中的统一 也即变化的统一 首先介绍多样和变化的概念 所谓多样是具有不同要素的各种部分 起码是指两个以上部分的不同状态而言 只要这些部分以构成某一造形对象为前提而存在 或被选择 被采用 就必须具有一些共通的要素 各部分都应同时包括异质的要素和等质的要素 各要素分量占多少 根据情况有所不同 22 形态的意象在视觉设计的作品中 经过反复推敲和审定的视觉形象都是为了传达一定的信息 现实生活中常见的物体 一旦成为画面的视觉要素 就带有特殊的意义 就像一个人 一旦成为演员出现在舞台上 所代表的就不是他自己而是剧中的角色 网页作品中经过概括和提炼的视觉形象都是具有典型意象的 圆形在人的意象中是一种运动形态 太阳 月亮 地球都是圆的 圆形也能产生圆滑 圆润 圆满 温和 柔软的感觉 用圆规画出来的圆 有精致 坚硬之感 徒手画出来的圆 有自然 柔和的曲线之美 椭圆形较正圆 则更活泼而有变化 动感也好些 三角形是一种锐角形象 有锐利刺激之感 正立的三角形是最稳定的形象 反之 倒三角形是最不稳定的形象 只有在运动中才能竖立 方形是平稳 严谨 正统的形态 它的四个角都是90 在方形中 正方形是最稳定的形态 而长方形的变化较多 特别是具有黄金比的长方形 还有 长方形都很有个性 2视觉流程 所谓视觉流程 是指人们的视觉在接受外界信息时的流动过程 因为人受视野的客观限制 不可能同时接受所有的物像 必须按照一定的流动顺序进行运动 以感知外部世界 这种流动顺序既有随意性又是积极主动的 而且是按一定的规律运动的 网页画面中的任何视觉形象 都有其主动性和诱导性 垂直线引导人的视线作上下运动 水平线引导人的视线作左右运动 斜线比水平线和垂直线有更强的张力 能把人的视线引向斜方向 不断改变方向的折线将使人的视线按其方向的改变而改变 不仅线条如此 形状也是如此 正方形的视线引导方向是四方辐射的 包括对角线的延长方向和四边的延长方向 见图23 圆形的视线引导方向是呈辐射状的 给人以均衡的扩散感 三角形的视线引导方向是向三个方向扩散的 见图23 此外 形态的视觉诱导功能还体现在形态的相互关系之中 如从大到小或从小到大 从强到弱或从弱到强 从疏到密或从密到疏 从黑到白或从白到黑等 图23urbarvo 视觉流程设计时 我们就要考虑到将最重要的信息安排在注意价值高的部位 这便是视域的优选 不同的视域 不仅注意力价值不同 在心理上也给人以不同的感受 上部 给人以轻快 飘浮 积极 高昂的感觉 下部 给人以压抑 沉重 消沉 限制 低矮 稳定的印象 左侧 感觉轻便 自由 舒展 活动 右侧 感觉紧促 局限 庄重 2 1视线流动的规律各种客观信息不断作用于人们的感觉器官 由于形态 色彩能量的张力对视觉的刺激而引起视线不断移动和变化 这就是视觉运动 当然这种运动不是真正的运动 而是一种生理和心理的感受 是依赖视觉经验的知觉而引起的 是一种联觉 1 视线的转移具有直线性特点 即视线从一个视点转移至另一个视点 从一种刺激样式转至另一种刺激样式时是直线转移 因为直线段是连接两个刺激物的最短距离 2 视觉信息具有较强的刺激度时 容易为人的视觉所感知 视线就会被吸引过来 成为有意识的注意 这是视觉流动的第一阶段 3 视线是顺着事物之间的间隔距离递减的方向移动 4 当人的视觉对信息产生注意后 如果视觉信息在形态和结构上具有强烈的冲击力 形成与周围环境的差异性 就能进一步引起人们的视觉兴趣 在物像内按一定的顺序进行运动并接受其信息 5 人们的视觉注意力往往先落在刺激强度最大的地方 然后按照视觉物像各构成要素的关联性和刺激度由强到弱地流动 6 视觉流动总是反复多次的 视觉在物像上停留的时间越长和次数越多 获得的信息量就越大 反之 若视觉在物像上停留的时间越短 次数越少 获得的信息量就越少 7 视线流动的顺序还受到人的生理和心理因素的影响 这种流程顺序既有随意性又有主动性 而且遵循一定的规律 图24将重要元素安排在左上方时的视觉效果 8 由于人的视觉运动是积极主动的 具有很强的自由选择性 往往是选择感兴趣的视觉物像而忽略其他要素 从而造成视觉流程的不规则性与不稳定性 9 在画面中 组合在一起具有相似性的因素具有引导视觉流程的作用 如形状的相似 大小的相似 色彩的相似 位置的相似等 在进行视觉流程设计时 应引导观众的视线按照设计的意图 以合理的顺序和有效的感知方式 发挥最大的信息传达功能 2 2视觉流程的诱导与暗示视觉元素通过诱导媒介 让观众视线按照设计意图沿一定方向有顺序地由主及次 突出重点 把画面各构成要素串连起来 形成一个有机的统一体 以发挥最大的信息传达功能 人的视觉因受各种视觉元素的制约以及注意力价值的差异和视域优选的影响 总是循着一定的规律和方向运动 一般情况下 界定范围内的视觉运动是由内至外 由中心至周边 视线的诱导因素主要为有方向的线或具方向感的结构 一条直线可以分割视域空间 也可以诱导视线沿直线运动 水平线向左右运动 垂直线向上下运动 斜线与水平线和垂直线比较 更具有动势的变化 有更强的视觉诉求力 斜线引导斜向运动 习惯上自左下而右上 或自左上而右下 折线依其折向而流动 曲线 波状线亦沿曲度而起伏 基本形连续排列 便显示出一种韵律感 如由大而小渐次排列 视线的流动会鲜明地往一个方向进行 景物中的透视及其夹角 可引导视线向纵深流去 运动也是控制注意力视线从一个物体转向另一个物体的重要因素 一个箭头或一个有指向的手指 能把注意力引向指着的方向 同样 任何运动 像人散步 动物奔跑 车轮转动等 也能使注意力集中在运动的方向上 眼睛总是倾向于跟踪人或物运动的方向进行观察 视觉作品中某些特定的 信息量大的动