新媒体学习-第四讲:网页设计与编排原则

二十世纪的美国名建筑师法兰克莱特﹝Frank Lloyd Wright﹞曾说:「盖房子之前,我一定要先了解是谁要住在里面,也要了解地基和周遭的情况。」
 

网页设计前应该注意的事项


 


第一:先分析可能对你的网页有兴趣的观众


  一般平面印刷形式的信息没有超连接,没有声音,没有动画,也没有因特网资源,而多媒体网页却拥有这些功能。同时多媒体网页也会像电视机一般,呈现生动的视觉效果,它的用户又比电视机观众多了对内容选择的主控权。因此设计多媒体网页时,首先要考虑的事就是分析它的观众。以下几个问题可以帮设计师做观众分析时的参考:

  1. 网页的观众存在吗?全球信息网的使用人数与通讯量成长非常迅速,将来有一天,全球信息网很有可能成为全球第一大媒体,超越电视、杂志、 书籍、报纸等。既使现在你的听众并不存在,你还是有设置全球信息网的网站的价值。

     
  2. 网页的观众的类别是什么?他们是计算机玩家或技术专家?他们是学术界人士?他们是企业界人士?他们是艺术家?他们是因特网爱好者?他们是街头上的一般大众?

     
  3. 网页的观众期待什么?他们为什么会访问你的网页?假如他们到访你的网页,你有什么东西会使他们产生兴趣而留下来?

     
  4. 网页的观众喜欢什么?他们很严肃,比较喜欢读文章吗?他们喜欢声音与动画吗?

     
  5. 网页的观众知道什么?他们对于全球信息网的熟悉程度如何呢?他们对于你的主题的认识程度如何呢?

  每一类型的多媒体网页都可能有不同的观众或使用者。传统的传播媒体因其内容独特,早已有了忠实的拥护者,像书迷们会读书和杂志,影迷们会看电影,而乐迷们则会买 CD 和卡带来听。在许多情况下,多媒体网页也吸引许多和传统媒体相同的用户,然而,多媒体网页却能透过新的互动方式,走出传统媒体的局限,为读者提供更深更丰富的内涵。

  一般多媒体网页的设计方向,若不是指向单一特殊类型的观众或使用者,就是朝向广大的观众。这两种观众都有着非常不同的特质和偏好。因此,网页在设计上要能满足他们特别的需要。多媒体网页的观众可能是生意上往来的客户、公司的员工、或者是教育计划案里的学生等。当我们为这些观众服务时,务必要能使其感到满意。

  多媒体网页的观众或用户不仅透过网络使用网站上所提供的信息,有时还能协助网站的设计和测试。或许除了生产之外,目标观众或用户的意见几乎在多媒体网页的每一步发展过程中都要参考。在网页雏形发展的阶段中,测试潜在观众或使用者对网页的反应,都能够协助设计者规划下一个版本的设计,甚至为市场测试提供有价值的响应。

 


第二:确定多媒体网页的设计目标


  所有设计可能都是来自于简单的想法。好比设计一个城市的旅游导览,可以地图、文字解说、影片、手册、或以上综合的方式来呈现内容。若将每个可能的设计具体化,则须从很多不同的方面来考虑尝试,如特性、目的、信息结构等。例如设计一个旅游指南要考虑的就包括了使用的目的、如何使用、形式为何等重点。当然,多媒体产品计划的具体化也是由许多的点子和创意而来。一个好的创意来自于大家的通力合作,结合大家的想法,而这就需要彼此间的脑力激荡。大家在脑力激荡中可以无所限制,天马行空的创意。

  设计目标应包含一个多媒体产品企画的目的和讯息。一个好的设计小组不会 草率的决定一个设计,一定会从很多的设计模型中千挑万选,找到最适当的一个。一个真正好的设计是不会引起人注意的,因为最好的产品在呈现及使用过程中顺利而不失误,因而使用者自然而然专注于内容而不会注意到设计的好坏。因此,好的设计应包含以下特性:

  1. 力求单纯化。由于多媒体产品的内容和接口共同创造互动的关系,接口和互动的形式除了力求清楚,更要求简单。若界面提供太多的选择和太复杂的使用方法会让使用者困惑,然后渐渐不想使用了。 

     
  2. 设计一致性。多媒体产品中接口设计要有一致性,让使用者很容易学习并建立对作品的信任感。

     
  3. 要有参与性。多媒体产品应该邀请用户加入,创造互动的关系,也就是让他们与产品内容对话。

     
  4. 内容有深度。要确定我们的多媒体产品能让用户比以往的传统媒体,探索到更多的东西。

     
  5. 娱乐性适当。多媒体产品应该提供适当的娱乐性,并依内容的性质,观众的性质来决定娱乐的方式。

     
  6. 价格合理化。价格合理化有赖于完整的市场调查。不同市场区隔的观众愿意花在购买产品的金额都不尽相同,因此订定一个合理,而且一般用户负担得起的价格是很重要的。

  全球信息网网页最擅长完成下列三个目标:

  ﹝一﹞让阅听人熟悉你的名字、产品、服务与点子。

  ﹝二﹞向众多的潜在阅听人发表你的文字、影像与其他各种电子数据。

  ﹝三﹞让阅听人对世界性的公司、机关组织,产生近在身旁的亲切感。

  以下是一些值得您参考的点子,想想出版网页的目标是什么?

  • 推销产品
  • 提供服务
  • 提供广告空间
  • 募集资金
  • 介绍自己的公司
  • 改变公司形象
  • 创造网络小区
  • 陈述一个故事
  • 调查顾客意见
  • 展现自己写程序的能力
  • 展现自己的设计能力
  • 为课堂交作业
  • 完成一个工作计划
  • 呈现个人履历表
  • 呈现个人作品
  • 教别人某种技巧
  • 让别人了解自己
  • 让别人了解公司
  • 告知公司工作计划
  • 提供工作机会
  • 提供产品服务
  • 娱乐观众
  • 研究一个主题
  • 出版个人观点
  • 收集电子邮件
  • 提供信息给其他媒体
  • 实验新的传播科技
  • 为了进入二十一世纪
  • 结识他人
  • 变成有钱人
  • 变成名人

 


第三:分析使用者可能使用的浏览器


  由于观众使用各种不同的浏览器,以及浏览器的功能不断更新,对于网页设计者是一大挑战。有些信息在某一种浏览器上呈现很好,却在另一个浏览器上的呈现却看起来很奇怪。有些观众甚至还在使用只能阅读文字的浏览器呢。有很多新的动态网页技术看来很炫,但对一般使用者来说是件痛苦的事,因为这些动态效果为使它们的计算机当机。

 


第四:分析用户可能使用的计算机运作平台


  除了浏览器不同之外,观众使用的计算机运作平台也不尽相同。计算机屏幕的分辨率各有不同,所使用的屏幕字体也不相同。有的计算机能支持声音、电影,甚至有关虚拟现实的档案。在个人计算机上看的网页跟在麦金塔计算机上看到的网页就是不同。许多人的计算机屏幕还设定在 640x480 的分辨率上。尤其是小型记事本越来越普遍, 640x480 的分辨率依然会是主流。

 


第五:分析用户可能使用的网络带宽


  当全球信息网变得越普遍,越多人使用调制解调器获取信息。从调制解调器下载网页的传输速度比以太网络慢,要花费较多时间,因此有些人不喜欢下载图形。常常使用调制解调器的人对大的档案如:全页图文件、声音、动态影像和虚拟现实的档案都会尽量避免下载。

 


第六:尊重知识产权


  有人认为因特网上所有的图档和文本文件是没有版权的,这是完全错误的想法。虽然目前既存的出版法比因特网的诞生还要早,很难将现有的术语应用到 WWW 上;不过还是有很多虽然针对纸上出版的法律实际上也适用于网络的出版。最近几年,法官已开始密切注意网络的版权问题。如果一定要使用别人的数据,需特别谨慎。以下一些建议,希望您在使用别人的数据时能够注意到:

  1. 在 WWW 上找到的数据不一定都是公开免费的;
  2. 使用他人的数据前,最好先取得他人的同意;
  3. 不要使用他人已注册的数据,如米老鼠等;
  4. 即使你在使用他人的数据时,并没有从中得利,也不代表你的行为是合法。

  在特定环境下适当地使用是被允许的,例如:为教育的目的、写报告、做研究、批评或发表评论等。还有所引用的资料的本质和数量也是判断是否违反著作权的考虑因素。一般来说,引用陈述事实的数据比引用创作本身较不会引起著作权的麻烦。最好的解决之道是尽量自己创作所需的资料。

  一般来说,网页的版权宣告是都是置于首页结尾的地方。

 


第七:要准备随时更新信息


  创造一个网站最有挑战性的部份是需要经常更新网站的内容,尤其是一些随着时间必需更新的信息。为了告诉读者有关信息的时效性,通常我们会在网页上注明最后更新信息的时间,并且注明负责信息更新的负责人姓名与电子邮件地址,以方便读者与其连络。

 


第八:要重视观众的评价


  要了解读者对某一个网页的评价是件不容易的事。有人会认为要做一些修改,有人会认为它所提供的内容很有价值,有人会仅仅说很好。因此通常会透过电子邮件收集读者的意见,做为网页改进的参考。一般来说,电子邮件〝Mailto:〞的指令会置于首页的最后面。更进一步的方法就是如以下范例,直接在浏览器上要求读者留下意见。

 

 

 

网页设计经常面对的问题

 


第一:整体版面的呈现方式


  原则上,一个多媒体网页页面的配置,能够加强设计者所欲表达的概念与目的。页面上的每一个元素,都会影响读者对页面上其他元素的解读,在看一个页面时,我们应该把整个组合看做是一个统一的整体,而非许多小单位的集合。

  在进行版面配置时,要注意版面的平衡与空间的留白,设计者应该根据图像与背景的关系、对比的关系、类似的原理、以及比例的关系,将整个空间以最有效的方式加以分配、组织。以下是设计者要注意的问题:

  1. 版面留白量。设计者可以很容易地改变背景颜色,因此,当我们提到「空白」时,所指的就是背景颜色,或是所谓图像与背景的关系的背景部分。在一个页面的组合中,留白的部分和被置于其上的元素同样重要。就像乐章中的休止符,让听者能据知对音乐达成理解与鉴赏一样,留白的空间让页面有了格式,因此,千万不要忽略留白的重要性。在早期的 HTML 版本中,要随心所欲地安排版面配置还很困难,由于在处理行列与对齐上的技术困难,使得版面常常陷入一种不平衡的局面。你必须考虑到所有的留白,这并不是说你得填满所有的空白,而是,你必须把这些留白也一起纳入考虑,达成页面的平衡。

  2. 视觉平衡的考虑。在安排页面上的诸元素时,你应该考虑每个元素之间的视觉比重,这个比重可以由对象的大小、亮度﹝深色对象比浅色对象重﹞、以及纹路或内文的密度。视觉对比也很重要,如果加以有效地运用,对比可以很快地抓住读者的注意力。但是如果元素之间的对比过大,则容易造成反效果,使整体失去和谐与平衡。另外,视觉上的谐调和对比一样重要,你必须考虑对象之间大小比例的关系,将每一个元素对其他元素作相对的评估,比如说,一个很大的对象如果跟一个小对象放在一起,它会显得更大,而影响到整体的平衡。

      有许多方法可以达成平衡,其中最简单的就是那种规规矩矩或是对称的版面,比如说左右两半或是上下部分彼此相似,甚至有些设计者把页面上的每个元素向中央对齐。在某些情况下,这种设计方式可以有不错的效果,但是通常内文的易读性就会大大地降低。一般而言,一个对称式的平衡是属于静态的,而无法引导读者的目光去搜寻页面上的其他元素。另外还有一种平衡的方式则是非制式且不对称的。

      一个不对称的页面结构必须藉由技巧性地安排不同视觉比重的各种元素来达 成。例如,一段很长的文字就可以用一个深色的图形来平衡,一系列的小元素可以用一个大的元素来平衡。其变化的可能性是有很多的。一个不对称的平衡页面 有时是经由设计者的天赋巧思所设计出来的,有时则是经过仔细的计算。初学者可藉由网格线的辅助来设计页面的平衡。一个不对称或是非制式的组合方式可以使 页面在视觉上显得较生动活泼


      一般而言,一个页面会出现不平衡的情况,若不是因为技术上的限制,就是 因为设计者缺乏慨念。目前软件的技术已能符合大部分格式设计的要求,因此很快地,设计者就必须为失败的设计负起全责。有时候设计者的意图是要制造出一 种让人感到不安、不稳定的感觉,这时一个不平衡的页面也许就可以适当地传达出这种概念或感觉,但如果这种不平衡不是出于故意的安排,那么,这样一个页 面会让你的网站功效大打折扣。

  3. 网页设计前后的一致性。一般而言,你不会只设计一页网页,而是将许多页面以一个主题为中心相互链接起来,因此,在开始设计时,你必须将整个网站的方案做全盘考虑。由于超媒体的便利性,我们都习惯只需用鼠标轻轻一点,就能从某一页跳到另一页,而在这种情形下,视觉上的改变可能会让读者认为我们已从一个网站跳到另一个网站,通常我们当然不希望读者在我们的网站中,从一页跳到另一页时产生这种错觉。因此,你就得在你的页面之间建立一个统一性,例如使用一个固定的标题图示、一种特别的版面安排、或是一组特定的色系。记住,在考虑如何让你的页面具有一致性时,对这一致性做一点点的变化,会使你的网站更具有视觉趣味,并且使读者更有兴趣去浏览它。有时你也许会想要对你的页面设计作变化,让它不那么枯燥无聊,有时你也可能想要建立一个版面规格让每一页的内容配置都能保有一致性。

  4. 纸上设计与网页设计的比较。在设计多媒体网页时,我们应记住的是,计算机的屏幕通常是宽大于高,这使得我们很难同时在计算机上和纸上作设计,几年前,有人预言一个无纸的时代即将来临,但到了今日,看起来我们的用纸量比过去有过之而无不及,无论计算机多么方便,人们还是习惯把网页打印出来看,如果你是以水平而非垂直的方向在扩展你的网页,那就会有些打印上的问题。有些浏览器会在打印前先把页面重新安排过,但是通常这也会破坏所有有趣的页面设计。因此,你必须了解,有些材料最好是以垂直的格式来表现,这样比较便于打印。

  5. 使用设计参考网格线。在设计版面时,利用网格线来安置对象的位置是一个蛮不错的建议。网格线就像是隐形的路标,有助于在网站的页面中建立组织化的单元。许多的桌面排版软件中都附有标线以便于对象的对齐,有些编写网页的工具也会提供这类的工具,但一般的文书编辑器则没有。在这种情况下,你可以为你的页面画一个草图,一但你决定了所依据的网格线,你就可以用这个架构去对齐你的图像与文字,让你的页面达到平衡。HTML 的分割页框的功能,则可以让你在页面上定义出不同的区块,这使你只需更新有改变的元素即可,而不用每次都重新修改一整页。

      有些人可能会觉得使用网格线会让画面的整体设计变得单调无趣,但其实如果运用得当的话,并不会如此。一但你建立了网页的架构,你就可以在这个网格线架构下衍生出许多种安排对象的方式,并且每页之间在元素排列上的变化是非常重要的。一个元素可以占据一个或两个、甚至更多个区域,文字也可以放在一块本来被拿来放图像的区块,你可以为一个网站准备两个或以上的网格线,然后依照每一页的内容做不同的应用,通常当一个网站中使用多个网格线模式时,是为了要在页面转换之间,创造出视觉上的韵律感。

  6. 视觉焦点的安排。在完成了一个页面的编写之后,用浏览器开启它,往后站一步来看。不要读内文的文字,把你的眼睛闭上几秒钟,然后打开,看着你的网页。页面上的哪个部分最吸引你的眼光?你目光的下一个目标又是哪里?试着去追溯你的眼睛浏览整个页面的轨迹。作为一个设计者,也许你会有些偏见,所以你可以找别人来帮你看看你的焦点与浏览路径是否适当。如果你的焦点在颜色对比、大小、密度或是色值上太过强势,那么读者的目光就会很难从上面移开,而其他的部份就会被认为是不重要的。但如果页面上的所有元素看起来都差不多,那们读者就很容易被搞胡涂,不知道该从哪里看起,也不知道下一步要看哪一项。无论如何,不管设计者是否是有意识地考虑到读者的目光,你都要记得,目光浏览的路径,也会影响到读者对这个网页的满意度与阅读经验。

整体版面设计要领

﹝一﹞标题的呈现方式

  1. 标题宜以包括图像及文字的综合设计表现之。

  2. 台湾地区使用者喜欢色彩较丰富的标题。

  3. 标题宜居于版面中间位置,并以长方形方式呈现。

  4. 标题宜突显于背景之上。

 

 

﹝二﹞版面的留白的呈现方式

  1. 版面留白量以 50% 为宜。

  2. 背景色彩纯度过高会造成版面空白量感觉消失。

﹝三﹞连结点的呈现方式

  1. 横列式较长的文字链接点以单字段,向左对齐的呈现方式为宜。

  2. 横列式较短的文字链接点以双字段,位置居中的呈现方式为宜;文字则向左对齐为宜。

  3. 直列式的图文连结点,它们之间距宜加宽,以利区分。

  4. 链接点之前用小图像或小色球以指引强调链接的功能,能方便读者搜寻。

﹝四﹞重要信息呈现方式

  1. 重要信息应置于标题之后,首页连结点或内文之前。

  2. 重要信息可以配合运用置于前端明显的位置或突出的图像以强调之。

  3. 重要信息可以运用不同颜色区块以强调之。

﹝五﹞讯息的连贯性

  1. 保持固定的版式,求取统一感,方便读者阅读与搜寻。

 


第二:配合网页主题的颜色


  在设计一个网页时,你应该对所有颜色的使用做一个全盘的考虑,而不是只 注重个别元素的配色。你应该把背景颜色、每个元素的色彩、内文的颜色、以及超链接选项的颜色﹝包括已连结及未链接过的项目﹞都纳入考虑。你应该建立起 一个统一的基本色调架构,并且依据此架构来决定每一项元素的配色。

  色彩对于加强你的网页内容是很重要的,一般而言,我们建立一个网站的目 的就是要让大家来读它的内容,而大部分的网络用户都是很快地在网页与网页之间点选跳接,不会仔细地每页都看,这时候,如果你能有效地运用色彩的配置,那么,无论你的内文是否真的吸引了它们,你都能吸引读者对你的网页多看一眼。

  1. 色彩过多与不及皆不好。我们生活在一个信息爆炸的时代,为了避免负荷超载,我们通常会根据自己的标准,从许多垃圾信件中挑出有用的信息。广告商们早就知道要擅用颜色的效能来吸引人们的注意力并且去读它们的文案,公司们也知道如何利用色彩来增加文件﹝从年度报表到公开发表简报﹞的易读性。

      如果网络上的所有网页都像过去好几年间一样,只有文字而没有色彩,那么我们就很难去分辨这一页和那一页有何不同。一个只有黑白两色,而且在文字的大小和图形上都了无变化的网页,会让读者不得不停下来读一读它的内文,然后才能决定这是不是一个有用的信息。一个只有纯文本的文件是有一些优点,它很明显地会占用较少的磁盘空间、因此也能增加网络传输的速度,读者的阅读也不会被图像所干扰,而能把焦点都集中在内文上;不使用图形也会使你的内容更加精简。但是完全不使用颜色也有一些危险,人们通常期望一个 WWW 网站能够图文并茂,这对于读者是否会停留在这个网站并且仔细地阅读它的内容是个决定性的因素,就算是一小点的颜色,对一个以纯文本为主的网页,都能大大地增加它的可读性。

      太多的颜色比颜色不足还糟糕,许多设计学生在颜色的使用上有一种趋势,就像刚引进其他的如字型技术一般的图形技术时的情形一样,当一个学生发现了计算机可以一次将二十个不同的字体放在同一页上面时,他们就会兴奋地试验各种做法,直到有一天他们自己发现了计算机的这种容纳性并不能让设计的效果变得更好为止。同样的原则也试用在绘图软件会是网页设计上。由于无法把缤纷的背景放在网页上,许多人因此致力于尽可能将更多的色彩组合在一起,背景颜色也应注意和内文及图形相互协调、搭配。

     
  2. 使用限量的色块。选择一个色系,这其中可以包含和谐色与对比色,但要限制你用在网页上的颜色数量。要确保每一种元素要能够共同创造出一种色调的统一,有一种办法是选择在色盘中属于同范围的颜色。

  3. 掌控复杂的色块。有许多的网站会为了某些理由而使用很多种颜色,在这种情形下,调和主色和其他颜色之间的关系就非常重要。就像前面所说过的,有一种评量你的用色的方式就是往后站一点,然后从一段距离以外来看这个画面,哪一个颜色首先映入你的眼帘?这些所使用的颜色会让你有任何紧张或是视觉矛盾的感觉吗?所有的颜色使否得到同样的注意?在图形或背景中使用五彩缤纷的色彩,通常会破坏掉和谐的感觉,一系列使用了很多种色彩的写实影像就应该由某些共同的颜色来把它们串联起来。

  4. 注意颜色的对比。在考虑要用什么颜色、以及把这个颜色放在那里时,你应该要注意到这个颜色对它周围的色块以及与它重迭的元素有什么影响,有些网页设计者在使用一个背景颜色或图形前,并没有仔细地考虑过它与内文和图像的关系,大致上而言,背景颜色应该要尽量打淡一点,不要让所有的目光都集中到它身上而使得网页的内容黯然失色,在文字和背景图案间也要有适当的对比,这样文字才能具有易读性。

      在背景和前景之间的适当对比可以藉由将深色与浅色元素之间的差异值最大化来达成。在考虑到对比时,色彩的反差也是很重要的。如果将整个页面转换成灰阶模式,有许多红红绿绿的色彩将会变成同样的颜色而无法分辨,虽然在彩色页面上他们看起来具有很高的反差,但对许多色盲的人来说,他们并无法分辨这两种颜色,所以,当你在设计中使用这些颜色时,也要考虑到这个问题。

  5. 注意色彩的变化。为了有助于浏览者了解网页的内容与主题事件,有效地对网页作变化是很重要的。如果特别以某些变化来标示某些项目,那么浏览者就很容易抓到整个网页的主题。报纸也常常利用标题的字型与字体的变化,来标示出每篇报导的相对重要性。变化可以被有效地应用在文字及图像上,例如,Netscape 的浏览器就将超链接文字的字型做了默认的变化,并且标示出已链接与未链接的项目。这个浏览气的设计者事实上就是以实际应用为考虑,让人们可以分辨出接下来要点选什么,他们将图像设计的原则应用到超链接选项之重要性的处理上。

      超联结选项并不是网页上唯一需要被标示出来的项目。你也许会想要将你的标题做不同于文字的处理,并且把主要的图像和附加的图像区分开来。

     
  6. 网页颜色要系统化。当你在设计网页时,你必须要了解︰人们大部分都是从首页开始看,虽然这并非绝对。因此,通常在最高层的网页,也就是被视为首页的那一页,就必须包含了对这个网站内容、主题的整体概述,这一页必须在设计上具有吸引力,并且包含能表达你的意图的重要信息。一般来说,放在越上面的东西越重要,所以,在设计时要注意,让你的页面内容信息显得比页首丰富。

      虽然大部分的人都会从首页开始看,你最好还是不要完全依据这个假设来设计网页。很多人都会把一些自己觉得有趣的网站的网址寄给朋友,而这些网址并不一定是指向你的首页。一个普遍的错误是,你常常会放上一个「回上页」或「回主画面」的按钮,但其实浏览者也许并没有看过你的网站结构中的前一页。

背景颜色设计要领

﹝一﹞背景与主体的关系

  1. 背景与主体明度对比为 3:1 到 5:1 之间为宜。

﹝二﹞背景的色彩

  1. 淡色系列的背景有助于整体和谐。

﹝三﹞背景的材质机能

  1. 淡色材质背景为佳,能与主题分离之浅色标志或文字背景亦可。

 

 

 

 


第三:适合内容的图像设计


  用在网页上的图像应该要支持并能够增强 HTML 文件的内容,在设计图像时必须考虑很多事情,包括技术上的限制到美学上的考虑。技术上的限制虽然都已渐渐地获得解决,但是仍然不可忽视;而关于图像与用及设计的美学问题,则不会有太大的改变,我们今天所讨论的这些原则,将一直适用于大多数的应用实例中。 

  1. 具备美术修养。当一个艺术家在为多媒体设计图像时,有许多小花招。如果要设计一个成功的图像,则必须要体认到一点︰计算机不会替你创造艺术。一件好的艺术作品必须出自艺术家的艺术天赋与不断的练习。当然,这并不是说如果你不是一个艺术家,你就没有办法创造出一个好的图像。

  2. 具备鉴赏的眼光。要做出成功的图像,有一个很重要的技巧是要有一双具批判性的眼光。如果你能够客观地评量你的作品并且发现它的缺点,那么你就能够改进它。如果你相信你的作品只是〝还不错〞,那么它就还有一点点变得更好的可能。许多艺术家一直不断地在寻求自身艺术造诣的更上层楼,而为了要训练自己具有批判性的眼光,最好的方式就是常常接收他人对自己作品的回馈。有了多年来为学生作品打分数的经验后,我发现其他人对同一作品会有不同于我的观点的解释,甚至常常有些人会指出我完全没注意到的部分,而这个部分一但被我注意到,我也就能产生另一种不同的观点。

      当你向他人寻求对你的作品的忠告时,你必须要能够不带防卫地接受那些具建设性的批评。想想看别人所说的话,然后自己在心中衡量一下,要不就是回绝这个建议,要不就是改变你的图像来改正有问题的部分。如果你回绝这个建议,那么你也要能够合理地解释为什么这不是一个好建议。「因为我想要这样子做」并不是一个好理由。去找到一个愿意提出诚实并有意的评语的人是很重要的,像「我喜欢」这样的评语并不能帮助你把作品做得更好,请对方说说这个图像在效用上的优缺点会是个不错的方式。

  3. 熟练的绘图技巧。光是想着要改进你的技巧,并且具有批判的眼光是不够的,你将会发现若想要创作出成功的图像,艺术技巧是绝对必要的。你可以依循某些规则或诀窍来学习发展这些技巧。虽然我们在网络上可以看到许多经过处理的影像,但是大部分的时候我们也必须具备实际绘图的能力,手跟眼之间的协调、以及将眼睛所见的立体物体转换成计算机上的平面图像所需的视觉转换能力,都需要许多年的训练与经验才能做得好。我所能提出的最好的建议是,你可以随身带着一本素描簿,并且在任何时候画下你所见的事物,这样不久你就能够自然且随意地表达你所想表达的东西。要有创意地处理影像也需要技巧,你必须考虑颜色、整体设计、对比、色值、符号意涵、以及许多其他的因素。要用 PHOTOSHOP 把两个影像放在一起,然后制造出一个图像放在你的网页上,这看起来很容易,但你必须注意,如果你在设计一个图像时,将它独立于整体网页的设计考虑之外,那么你的网页可能会显得杂乱无章而使得效果有所打折。

  4. 图像性质前后一致。你的网页上的每一个图像都与彼此有着紧密的关联,所以,当它们被合置在一个网页上时,你不能对它们作各自独立的处理,因此,发展一套图像的规则并且确实地应用在图像的创造上就非常重要了。例如,你可以藉由在每一个图像上加一道 3 个像素宽的边框,并且让每一个图像保持 1" X 1" 的大小,让图像间拥有一个共同的特质。当你建立起一套规则并实际地运用到你的网页图像上时,人们也许并不会注意到,但是,如果你的图像大小不一,有的有边框、有的没有,那么人们就很容易注意到,而使你的网页不那么吸引人。

     
  5. 阴影表现方式一致。当你在一个图形或文字上使用阴影时,这通常表现出一种深度的错觉;当你在文字下方加上阴影,会使得那文字似乎栩栩地跃然于纸上,这阴影用于图像时,它也会让读者觉得这影像比较逼近自己。并不是所有时候都必须使用阴影,你应该小心并有创意地用它。在使用阴影效果时,你应该了解到,有阴影就表示有一个潜在的光源,比如说,你的对象有一个下方 4 个像素、右方 5 个像素的阴影,那么看的人就会有意识或无意识地认定在相反方向的地方有一个光源。一个常见的错误是,在某个物体的某一边制造出阴影,却又在同一页或同一个影像上的相反的那一边也制造出阴影,这样的错误会导致视觉混淆,而让人无法确定光源到底来自哪个方向。 

     
  6. 图像大小有统一性。当处理成对出现或一系列的图像时,你应该注意让所有的图像保持统一的规格,如果这些图像都是以同样的比例制作的,那么这倒不是难事,但是如果这些图形有的是水平的、有的是垂直的,那么要把它们统一起来就有些难度了。如果可能的话,就把垂直和水平的影像分别集中在一起,并且统一它们的规格。如果你把垂直和水平的影像放在同一个区块中,那么就重新调整它们的大小,让其中一个向度保持一样的尺寸,这将有助于建立统一感。由于我们一般都习惯使用固定的行间距,所以,调整影像让它在同一向度上具有一样的长度,将有助于维持整齐的行列。当一个影像以水平方向向其他影像对齐时,就调整影像使它的高度相等,而垂直方向的对齐,则有赖于影像宽度的一致。

     
  7. 图像排列有秩序。在一个有许多图像的网页上,即使每个图像都有一致的规格,仍然有可能因为缺乏有创意地排列,而显得凌乱随便。如果你事先为你的网页建立了网格线,那么只要将你的图像依网格线对齐,就能够强制产生一个架构。不管你是否使用网格线,你都必须有意识地决定如何安排这些图像的位置,不要被 HTML 的技术限制住你对图像编排的控制。

     
  8. 模仿其它媒体表现方式。有些时候艺术家们会模仿其他的媒体来创作图像,比如说,我们都已习惯看到图像后方出现阴影,而未曾质疑在计算机的影像上是不可能像现实世界中一样出现阴影的。作为一个艺术家,他常常会去模拟或是借用某种媒材的视觉特性,并把它转换到另一种媒材上面。在某些情况中,它的意图是要在平面上制造出三度空间的幻觉,有许多技巧可以制造出这种三度空间的效果︰

    • 线条透视画法﹝将线条延伸聚集在无限远的一点上﹞
    • 将两个影像轮廓重迭﹝在上者看起来比较近﹞
    • 色彩透视画法﹝较远的物体具有较浅的颜色、且较不精细﹞
    • 大小关系﹝大的物体看起来比较近﹞
    • 做立体模型/做阴影/做渐层﹝将物体件加上三维效果﹞
    • 以方向性灯光制造阴影﹝强调物体到表面的距离﹞
    • 在平面上的位置﹝上面的物体看起来比较远﹞
    • 粗线条﹝看起来向前方前进﹞
    • 色彩﹝亮/暖色系看起来向前方前进,暗/冷色系则看起来像在后退﹞


      当第一次看到某些模拟手法时,我们常常会觉得惊讶或是新鲜。例如,在网页上看到一个木质的边框没什么了不起,可是从计算机屏幕上看到一个金属材质的注册标志,就很少见了。当你仿照其他的媒体而创造出图像,就有可能引起浏览者的好奇心,因而继续浏览你的网页。


     

  9. 谨慎使用滤镜效果。虽然有创意的滤镜效果能够加强网站的视觉效果,但是有许多处理的方式都已经被过度使用而变成陈腔滥调了。例如,页尾卷起的效果,在一开始被引进时,就被大量地引用,不管这样的效果有没有意义或是它和页面的内容图片有没有关系。当你发现一种新的滤镜效果时,要小心,这样的处理方式可能会被误用或是过度使用,而使的原来的本意大打折扣。因此使用滤镜时,要谨慎并且要有选择性,试着避免直接使用它的默认值,并且尽量将多种滤镜组合使用,以创造出不能被归类为某一种滤镜效果的图形。

  10. 谨慎使用动画效果。动画效果对你的网页可以说是既能载舟,也能覆舟,所以你必须仔细考虑何时?以及为何要使用动画,在许多例子中,动画是被用来标示你的画面上的一些新鲜有趣的东西,有时动画则可以增加信息的负载量,制造出某一种气氛、或是配合支持网页的内容。要记住,在大部分的情况中,动画都会使得下载的速度变慢,而让联机必须一直处于开启状态。

      如果你创造了一个动画,请仔细的想想看这个动画会与网页上的其他元素会产生怎样的互动?它会对读者的感受与所要传达的信息有帮助吗?动画的动作跟色彩或是其中元素的安排一样重要。如果你打算要放进一个动画,那就让它值得观赏者花费那些下载的时间,并且让你的动画变动的动作看起来尽可能地顺畅。


    图像设计要领

    ﹝一﹞图像的主体

    1. 清晰可见,去除不必要噪声。

       

    ﹝二﹞图像的意义
     

    1. 简单明了。

       

    ﹝三﹞图像内文字的本身
     

    1. 清楚容易视认。

       

    ﹝四﹞图像内文字的装饰
     

    1. 没有过分花俏装饰,造成文字辨识不易。

     

 

 

 

 

 


第四:色彩的意义与选择


  你在为网页设计图形时,应该特别注意色彩的选择。如同前面所提到的,网页上的影像并不能独立于其他组件单独运作。因此在对图形加入色彩之前,你应该首先考虑网页的整体色彩架构。

  在网页中使用色彩的原因应当如下:

    • 区分项目
    • 统一组件
    • 唤起情绪反应
    • 提高视觉反应
    • 将观念符号化
    • 打破传统
    • 吸引注意力

  在影像中的色彩,会受到周围色彩的影响。例如,当红色置于绿色附近,绿色会被增强。经过细心组合与安置的色彩可以让个别的颜色在视觉上彼此影响。互补的色彩有彼此机动配合的作用。对比的色彩,会令人产生一种紧张或兴奋的感觉。调和色彩,也就是在色彩轮盘上彼此靠近的颜色,会产生一种和谐与稳定的感觉。最好在你的影像上,选定一定范围的色彩,而不要运用如彩虹般众多的的色彩。 

  1. 色彩与情绪。德国的理论家,诗人与小说家哥德,曾经研究色彩对于观察者的感官与心理的效应。他相信当一个人观看色彩时,会建构出一复杂组合的心理经验,并认为色彩可以激发记忆与期待。虽然他的想法不被当时的科学界所接受,不过现在我们却发现他的研究具有实质的内容。虽然在不同文化之间,对于色彩的效应并不存在着所谓普遍的认知,我们依然可以肯定西方对于色彩在心灵上的效应所做的观察。譬如:

    • 红色,橘色与黄色具有激励效应,快乐的,热情的特质。
    • 蓝色与绿色具有安抚与镇定的效应,忧郁的特质。
    • 紫色具有神秘与不安的特质。

       

      已经有研究显示,色彩甚至能影响观察者的新陈代谢与对他们所处的环境的感受。有报导说,在蓝色的房间内感觉较冷,而在黄色的房间内感觉较暖和。有人认为,在红色范围内的色调有助组织复原,然而蓝色与绿色会减少荷尔蒙的活动。

  2. 色彩与象征。在不同的文化中,色彩具有相当不同的象征意义。当为因特网设计图形使用色彩时,须注意某些色彩被认为具有强烈的象征或宗教意义。在西方文化中,白色象征纯洁;当使用迭加色彩系统时,它是所有色彩的组合。然而,在某些亚洲文化中,白色象征死亡。黑色,没有光线时,普遍地象征夜晚;但是在某些文化中,也意指死亡,危险和邪恶。黄色经常让人联想到阳光,但是在世界上干热的地区,太阳被认为有害。黄色有时让人联想到黄金与富有,但是在某些文化中,也已被认为哀悼的色彩。红色象征热情与爱情,但是在某些文化中,意指低俗与怪异。因为对色彩的联想缺乏普遍的象征意义,使得很难认定全球的人如何诠释你所选择的色彩。

  3. 色彩与冷暖。如同前面所提到的,色彩被使用来对于你的图形创造一种三度空间的感觉。暖色系,﹝黄色,红色和橘色﹞,在构图中呈现往前跳跃。冷色系,﹝蓝色和绿色﹞,似乎产生后退的感觉。经由选择能帮助区分背景与前景的色彩,将对你有利。选择色彩使得背景变成明亮的黄色或橘色且使得前景物体变成蓝色或绿色,是一项常见的错误。假如你把焦点放在个别的色彩上,影像可能会集中在一起,但是当往后站立,当色彩似乎与设计者想要建立的空间关系相矛盾时,你会注意到有视觉的紧张与混淆。

     
  4. 有效的色彩与绘图。当设计图像时,应考虑整个网站,而不仅仅是为了个别的部分。你要考虑这个图像如何与你在其他地方所做的东西有一致性呢?假如你仅仅为了吸引观众的注意,而使用一个图像,并且在视觉上与观念上,对于内容没有任何关系,也许最好不要使用这个图像。设计图像最重要的事情是,避免不必要的图像或是那些会贬抑你的观念的图像。例如,没有必要为一个容易经由文字传达意念的事物,去创造图像,除非这个图像能超越仅用文字的表达方式。总之,当设计超文件网页时,图像可以是用来传达你的观念的有效的方式。但是,一定要注意整合图像,文字与其相关内容,以创造一个整体性的网页是重要的一件事。

    色彩使用要领

    ﹝一﹞纯色的使用
     

    1. 同版面不宜超过三种纯色。

       

    ﹝二﹞整体色彩的表现
     

    1. 要做到和谐并能达到视觉平衡。

       

    ﹝三﹞色彩的对比
     

    1. 不同类信息之间避免使用类似色调,以致区隔不明显。

       

    ﹝四﹞机能性色彩区块的应用
     

    1. 运用小色球或色块能造成集群化的效果,以协助视觉搜寻。

     

 

 

 

 

 

 

 

 


第四:文字的运用


  论是在哪一种版面配置中,文字都同时扮演了内文与网页上的图像元素这 两种角色,前面对色彩、图像对齐等规则的建议,同时也都适用于文字。 

  1. 文字为设计基本元素。在一开始学习版面设计时,你最好不要拿有意涵的内文来用在你的版面上,你可试着把文字看做编织纹路,因为在讨论网页设计与排版时,文字的实际内容并不重要。当然,对一个网页设计来说,经过校对而没有任何文法或错字的文字内容是很基本必须的。为了将文字当作一个设计元素来讨论,我们要注意文本块的形状与版面安排方式上面。

  2. 水平与垂直排列。无论你是否在网页中运用了隐藏的网格线,你都应该将文本块的边缘跟你的图形边框或是网页上的其他元素对齐。当然有时也会有效果不错的穿插着的文字,但它必须跟其他元素达到良好的平衡,让人觉得那是经过特意设计的,而不是一个设计错误。HTML 语法中的表格功能,让网页设计者更能够随意地控制文字的置中或对齐,而注意页面的规格与文本块的宽度之间的关系,也是很重要的。

  3. 字型的运用要有统一性。要有效地使用字型与字体,设立一个规则并切实地遵守。例如,所有的英文书名都使用斜体字,所有的副标题字体都设为四级的大小,诸如此类的用法。这能让观众从文字体裁的式样,快速地了解网页的文字内容。

  4. 标题字的运用。如果你用标题或是较大字体的格式来作为对某一页的快速导览,那么观众通常就能很快地找到他们要的信息。HTML 提供了从〈Hl〉到〈H6〉的旗标,来控制字体的大小,从一号到六号,其中一号代表最大的字体。所有的浏览器都支持这组旗标,不过实际上的字体大小多少会有些出入。另一种制作标题的方式就是用〈FONT SIZE = 4〉???〈/ FONT〉这组旗标,来设定字体的大小。这种方式在没有分段符号的情况下较具弹性,而你也可以用它来改变某一行的字体大小。

  5. 反锯齿状与锯齿状的文字。既然我们所做的是用在屏幕上的设计,那就难免会受到屏幕分辨率的限制,在大部分的个人计算机以及麦金塔的标准分辨率屏幕上,我们都可以清楚地以肉眼看出组成文字的像素,﹝尤其是有棱有角的字,如 W﹞,这对大标题以及斜体字的使用来说,是一个颇大的困扰。一般来说,这对 SGIs 及 SUN 的工作站屏幕则不是问题,因为他们有较高的分辨率。有时你也许会使用反锯齿文字﹝即无锯齿线﹞,在这种情况下,你必须创造出一个包含这项文字的图形,当然,这是一种妥协,你想要增加你的字型质量,就得要花费较多的下载时间。

     
  6. 可读性的问题。虽然我们已有许多种方式可以控制格式,但在字型变化的能力上则仍有待努力。由于平台之间兼容性的问题,使得我们只能使用平台间某些共同的字型。虽然用户能设定浏览器的默认字型,但是选择并不多。基本的选择就是非比例﹝即所有的字符都具有一样的字符空间﹞,以及比例字型。后者较容易阅读,但前者在行列的设计上有比较好的效果。﹝PRE﹞这个旗标除了注意到文字中的空格键以外,它也是以一种非比例的方式排列。

  7. 文章与字型的整合。 ﹝FONTFASE=" "﹞的旗标让网页设计者得以直接指定字型,虽然这让网页能够以一种比较有创造性的方式处理格式,但是当所指定的字型只在某些平台上受到支持时,它就常常会变成无效的设定。这种规格挑战了 WWW 的跨平台原 理,它也为下一代的 WWW 对字型之支持的发展铺路。

  8. 英文大写字体的运用。在打字机的年代,我们对文字的格式并没有什么选择性,当我们想要让某些文字看起来格外醒目时,我们通常会用大写来打每一个字母。

       在聊天室或是电子邮件里,当你全部使用大写时,不但太过粗鲁,而且全部大写的字也会让人不易阅读。我们通常依照一个字的形状来辨识它,而很少会一个字母一个字母地去拼出〝the〞这个字,我们很快速地认出这个字并继续阅读下面的文字。当全部使用大写时,每个字看起来就会变成一样的形状,只是长度不同罢了,这会让文字的可读性大大地降低。

  9. 浏览器与文字。人们就像一个浏览器,我们扫视过许多画面,但是只对其中很小的部分加以注意。当我们在网页之间移动时,不太可能在每个地方都停下来逐字逐句地读,阅读计算机屏幕上的文字要比阅读纸上的文字困难得多,这是因为眼睛容易紧绷着,而且计算机屏幕的位置也会造成影响。

       一般来说,要阅读一个以文字为主的网站是不太容易的,因为人们通常并不想花费太多的时间在阅读一个网站的文件上,因此,保持讯息的简明,并控制文字的量是很重要的。对网页作适当的格式化安排,让它可以被印出来并且让人们能够不必经由计算机阅读它。如果你有许多文字信息,那么把它们拆成几页,用目录或大纲的形式让用户可以依照自己的进度依序阅读。一般原则是,一个网页的长度最好不要超过屏幕高度的三倍。

  10. 运用小字块。将一大块的文字分割成几个较容易控制的小区块也是不错的方式,使用分隔符、图形,或是在段与段之间加以分隔,能够让人在视觉上稍作休息,再继续读下一段文字。一段简短的文字是要比一大块没有间断的文字要容易阅读得多。

  11. 文字与互动设计。文字可以以多种形式来增进互动性,除了超链接功能外,也可以让观众自己输入信息,而有不同的体验。

    文字运用要领

    ﹝一﹞每一行文字的长度 
     

    1. 最好 25 到 35 个中文字﹝50 到 70 个英文字母﹞

       

    ﹝二﹞行距与字距
     

    1. 行距与字距已由软件内定。设计者能以段落与段落间空行,及首行缩排方式以辅助阅读。

       

    ﹝三﹞字体大小
     

    1. 标题以 H1 到 H3 为佳,内文 font size = 3 到 4 级为佳。

       

    ﹝四﹞同版面的字型
     

    1. 三种字型以内。

       

    ﹝五﹞文字的颜色
     

    1. 三种颜色以内。

       

    ﹝六﹞已选过的文字
     

    1. 在颜色上要能与未选过之文字链接点辨别,也要与背景区分。

       

    ﹝七﹞内文的排列
     

    1. 向左对齐并与左边界保持适当距离。可以善用表格填入文字以达此 效果。 
       

    ﹝八﹞表格或列表内的字
     

    1. 运用相同字型与字体大小,以利辨别。

     


 


自我测验
  1. 网页设计与编排原则选择一个你喜欢的网站,加以分析并列初期优缺点。

 

注:本站上发表的所有内容,均为原作者或投稿者的观点,不代表美术网的立场及价值观取向,请浏览者自行判断取舍
  • 1
  • 2
赞助商推荐
关于美术网

美术网(www.meishu.com)专注解决美术家网络推广问题,全力打造美术家专属网络经纪人服务,美术网站内设美术搜索,网络美术展,美术报,美术知识库,名家档案,美术视频库,资源库,美术论坛,美术高考网及书画衍生品的加工与分销等为一体的名画库等总共20余个栏目,我们以弘扬中华民族的文化事业为己任,以建设世界一流的美术文化生态系统为目标,诚邀合作共赢。

  • 1
  • 2
Copyright (c) 2013-2019 中国美术网 All Rights Reserved 鲁ICP备12031715号-1 法律顾问:杨俊涛律师 客服QQ:800015090 微信①:4081532
Copyright (c) 2013 中国美术网 All Rights Reserved
鲁ICP备12031715号-1 法律顾问:杨俊涛律师 客服QQ:800015090 微信:4081532