美学在网页设计中的作用
摘要
网站正迅速成为信息搜索,公司演示,购物,娱乐,教育和社交联系的首选媒体选择。 与此同时,我们生活在一个视觉符号在我们日常生活中发挥着越来越重要作用的时期。 本文的目的是介绍和讨论美学在成功网站设计中发挥重要作用的四个主要领域:美学在支持内容和功能,吸引目标受众的品味,为发送者创建所需图像以及满足网站类型的要求方面发挥着重要作用。
关键词:网页设计,视觉传达,美学,功能,品味,形象,网站类型
绪论
本文中的美学一词涵盖了视觉,声音和互动的效果手段。 然而,本文主要关注在颜色,排版,设计,图片,视频剪辑,flash动画等方面的视觉效果。
一旦输入单词,选择颜色或显示在屏幕上的文本,视觉通信就成为现实,任何视觉表达,无论是否有意,都会向网站的访问者传达信息。 Web设计人员永远无法绕过图形设计元素的效果。这些都在每个网站上给出。如果我们为菜单选择一种充满活力,温暖的红色,我们会传达与我们选择平静,冷色调的蓝色不同的东西。如果我们为我们的头条新闻制作了专门设计的排版,那么我们在网站上留下的印象比我们选择最常见的排版更为个性化,例如,Verdana然而,复杂的多媒体装置,令人印象深刻的图片和视频剪辑,至少在原则上是可选的附加功能,因为它们不是必须在任何Web设计中处理的因素。我们被迫使用文本和颜色的视觉元素,但我们可以通过刺激多媒体Flash安装和漂亮的图片来绕过美学效果。
我们唯一无法避免的是网站上始终存在视觉交流,无论视觉效果的使用是否是故意的。 我们需要了解图形效果和视觉符号,以便我们的沟通可以是有意的.1除了创造或多或少的美学体验之外,视觉效果在内容的交流中起着重要作用。
功能
此上下文中的术语功能涵盖了界面和人机交互(HCI)的用户友好方面,其主要目标是创建有效的网站,用户可以快速有效地获得所需的信息,而不会因为长时间的下载时间或在网站上导航时迷茫而延迟。雅各布尼尔森在全球范围内发挥了重要作用,为超功能网站的设计提供指导,例如1993年的可用性工程师和1999年的设计网络可用性。尼尔森对用户友好型网页设计的定义包含五个中心 组件:可学习性,效率,记忆力,错误和满意度。 可用性专家Rolf Molich在用户友好的Web设计中运行了一个额外的组件,这是可理解性的一个方面。 这些组件在考虑功能方面的Web站点质量方面都很重要。
Figure 1. www.useit.com
大量的视觉和图形考虑不足的草率网站表明,仍然有一些网页设计师按照狭隘的“功能”概念进行操作,完全忽视了视觉通信在支持功能方面的价值。 Web大师Jakob Nielsen的网站www.useit.com是一个淡化图形效果使用的网站的例子。尼尔森本人在“为什么这个网站几乎没有图形”这一条目中证实了这一点。他解释说,他不想在艺术家身上浪费钱,而是选择自己做平面设计。尼尔森网站的问题在于,尽管尼尔森认为他的网站几乎没有任何图形效果,但他无法绕过这样一个事实:网站上的少数图形确实能够通信;但www.useit.com上的视觉传播并未经过仔细考虑。主页顶部的花哨黄色横幅将让许多人与页面上其他地方使用的柔和的黄色和蓝色颜色发生冲突,并引起对Nielsen应该对用户“隐形”的颜色的注意。
在这种情况下,视觉效果的随意处理表明一个邋遢和不专业的发送者,这不是尼尔森的准确形象,可能并不是他对网站的意图。 然而,网站上的另一页“关于雅各布尼尔森”,其中包含雅各布尼尔森的传记和图片,创造了颜色和位置之间的和谐与平衡。 有开放空间和蓝色的一致使用。 此页面给出了一个组织发送者并且具有质感的印象,这可能更符合尼尔森想要通过他的网站出现的方式。
换句话说,图形效果是任何网站不可避免的一部分。 我们不能选择是否应该包括它们。 我们必须考虑图形效果,即使目标是创建“隐形”视觉通信,通过与功能和内容的无缝集成来实现其目的。
可能确实被视为可选和开放讨论的是视频剪辑,Flash动画,漂亮图片等形式的额外美学体验的范围。这些效果在网站上的使用应取决于预期的目标受众, 发件人图像和网站类型。
网站的历史考察
自从网站的兴起于20世纪90年代初期开始,功能与美学之间的关系一直是激烈讨论的话题。
互联网功能和可用性的支持者之一是上述的雅各布尼尔森,他提供了一些关于软件开发和人机交互(HCI)的最重要的研究。 尼尔森在1993年的“可用性工程”一书中引用了超功能方法,在那里他引入了“Less is More”的口号,这是他从现代主义建筑师Mies van der Rohe借来的一句话(Engholm,2003,p。127)。 但随着20世纪90年代上半期美国网络设计在网页设计中的作用日益成为一个争论问题,人们对美学与功能之间的关系提出了不同的看法。
大卫·西格尔(David Siegel)在1996年出版的“创建杀手网站”一书中提出了美学维度的重要性,他是美学网站的支持者。 另一方面,功能主义者认为,只要网站是功能性的和用户友好的,网站是蓝色还是红色并不重要。 Flash的引入引发了激烈的争论。 网页设计师Curt Cloninger认为,Flash具有创造美学体验的惊人可能性,是对HTML的重要补充。 Nielsen反对使用Flash,因为下载时间过长会降低功能和可用性。 但是在90年代后半期,人们越来越关注更多地强调美学效果。
然而,在21世纪初,人们再次倾向于支持超功能性网站而没有任何多余的美学。 有几个原因。 首先,网页设计师必须意识到在网站上使用Flash元素会造成太多挫折,因为许多用户甚至无法打开页面,或者下载时间太长。 此外,在大多数情况下,Flash元素并没有提供任何审美享受; 相反,他们经常扰乱和骚扰用户。 设计师无法控制他们对这款新玩具的兴奋,Flash经常被没有图形设计背景的人随意使用。 这导致了凌乱的Web站点,Flash元素在页面上闪烁并移动,而没有为用户创建美学体验。 一次又一次,人们不得不同意雅各布·尼尔森(Jakob Nielsen)的观点,即网站上的美学更少。
此外,1990年代末的互联网危机和国际金融危机导致许多组织削减了使用Flash和其他先进美学效果设计独特网站的巨大成本。 这导致人们越来越关注标准布局形式的廉价解决方案,例如”Obvious”,导致对审美表达的重视程度降低,特别是对于来自私人和公共组织的许多信息和演示网站。
美学在当代网页设计中的作用
虽然功能和美学之间的关系已经讨论了很长时间,但是更广泛的讨论侧重于网页设计中的美学效果。有几个原因。首先,IT技术的快速发展和当今宽带的引入使得能够容纳希望以多感官审美体验的形式接收通信的用户,而不必因为下载时间长的原因牺牲内容和功能。正如人们越来越期望更多地了解IT开发,人们也期望从事网页设计的人不仅拥有功能方面的知识,而且还了解如何通过美学手段进行沟通。我们已经到了一个网站的技术和功能方面被视为理所当然的时代。人们只是希望它能够发挥作用。该技术被视为审美体验的基础。根据Ida Engholm的说法,网页设计中功能和美学的讨论类似于战后时代消费增长期间设计风格的转变,当时许多市场上销售的产品从自行车到电器只是基本概念的微小差异而彼此不同。人们期望该产品能够使用最新版本的技术来实际解决所有技术和功能问题。接下来是对通过外部美学和图像相关信号”differentiating”的关心
(Engholm 2003,第134页)。
其次,在20世纪,用视觉符号取代语言的日益增长的趋势,特别是在产品营销方面,似乎在21世纪爆发了。 生活方式专家Henrik Vejlgaard在他的书“Forbrug i Designer-samfundet”[设计师协会中的消费]中指出:“在一个图片多于文字的世界里,没有人有时间或者劳神阅读冗长的广告文案。” (Vejlgaard 2004,第49页)。 视觉符号已成为我们日常生活中不可或缺的一部分; 因此,了解它们的交际效果越来越重要。 视觉传播的方向不仅在市场营销中普遍存在,而且在所有形式的专业传播中都很普遍,包括网站作为媒介。 特别是,年轻人通过视觉符号进行交流 - 并希望与之沟通。
美学支持发件人图像,内容和功能,网站类型和目标受众
重要的是尤其是对于网页设计师能够区分视觉美学在网站创建中发挥作用的不同方式。
- 美学效果在所有类型的网站中都具有重要作用,涉及发送者的感知方式,即组织传达的图像或信息背后的个人信息。 所有网站都有发件人或信息来源,网站上的所有语言,功能和美学效果都会传达有关该来源的信息。
- 美学效果必须支持内容和功能方面。 当网站包含支持导航和交互功能的美学效果时,它们更加用户友好。
- 审美效果必须适应网站的类型。 例如,我们期望娱乐网站提供合理数量的美学体验,而我们对信息搜索网站的主要期望是我们可以尽可能有效地获得所需信息。
- 审美效果应适应目标受众。 针对年轻观众的演示网站必须根据视觉美学的当代趋势进行设计,并且应该与针对一般成年人群的演示网站不同。
因此,最成功的网站是网页设计师根据上述四个方面创建美学方面的网站:发送者图像,功能,流派和目标受众。
美学支持发件人形象
审美效果在创建发件人的个人资料以及网站背后的组织或个人形象方面起着至关重要的作用。 因此,即使是主要具有信息目的的网站也在美学上反映了网站背后的组织,这一点很重要。
例如,丹麦铁路服务(DSB)以其典型的方式在其网站上创建了一个视觉资料2。 DSB的网站包含独特而现代的设计,不同于针对广大人群的服务组织常用的更简单和匿名的设计。 为了获得一个独特的表达式,DSB创建了一个非传统的动态设计,包括他们自己的字体“via”,用于标题。 布局干净,表明DSB是一个了解当代趋势的组织良好的公司。 每个细节似乎都经过精心策划:con-temporary字体,图片的使用和布局的合理。
Figure 2. www.DSB.dk
美学支持的内容和功能
对于Internet上的许多Web站点,功能具有最高优先级,并且仅包括美学以支持它。 这通常是信息站点类型的情况,其主要目的是尽可能快速有效地获得所需信息,例如www.google.com就是这种情况。
然而,越来越难以论证美学应该被低估以支持功能,即使对于信息搜索网站也是如此,尽管功能当然是最重要的。 信息搜索站点应尝试通过视觉符号进行通信的原因很充分。 在锚定文本方面,视觉图标是有效的和简单的交互式视觉效果手段。 它们可以是引导用户注意链接的有用手段。 细分移动可以用于吸引用户的注意力并将他的注意力引导到特定的重要区域。 使用诸如红色和黄色的主色有效地引起用户的注意并将注意力引导到特定的信息。 插图的使用有助于解释复杂或冗长的信息。
例如,信息站点www.rub.ruc.dk的用户可以查看RUC图书馆的地图,并准确查看图书馆的哪个部分以及图书所在的书架。
Figure 3. www.rub.ruc.dk
对于受到诸如银行,政府机关,公共机构,教育组织等公约约束的大型严肃,真实的展示场所,通常会强调功能方面。 在这些网站上,设计师通过在与该类型有关的预期集合中并根据用户的需求进行操作来尝试满足组织的要求。 在这个网站类别中,通过可以以适当的方式支持导航方面和内容的视觉效果,具有更大的用户友好性的巨大潜力。 视觉效果不一定能提供很好的体验,即使从狭隘的功能主义观点来看,它们仍然可能被视为无关的美学效果。
美学支持网站类型
网站类型受到了相对较少的学术关注。 詹妮弗弗莱明在她的书 ”Web Navigation”中定义了六类导航设计:电子商务网站,社区网站,娱乐网站,演示网站,教育网站和信息网站。 弗莱明的六个类别侧重于导航和功能方面。
很少有网站以弗莱明的六种导航设计之一的“纯粹”形式出现,尽管一类通常更为突出。 例如,根据弗莱明的类别,大多数银行网站都是演示,电子商务和信息的混合。 这表明几乎不可能找到一种包含所有问题的网站化网站。
艾达·恩霍尔姆(Ida Engholm)在她2003年的博士论文中,根据技术方面以及风格方面以及组织或业务类型对网站进行了分类。 在她的论文WWW的设计历史 - 网站udviklingen i et genre- og stilteoretisk perspektiv [WWW的设计历史 - 以流派和风格的视角开发网站],Engholm根据风格特征对网站进行分类。 例如:HTML风格,现代主义风格,数字现代主义风格,垃圾风格,CAD风格,像素风格,卡哇伊风格,漫画风格,日本极简风格,数字解构主义者 风格,朋克摇滚风格等
Engholm基于风格方面的网站类别是Fleming六个基于导航和功能方面的网站类别的有用补充。
导航设计以及图形和风格方面必须适应特定组织的特定需求。 重要的是,网页设计师要理解功能方面不应总是优先于美学方面。 艺术博物馆或家具设计公司的展示网站当然必须是用户友好的,但图形,风格和美学效果起着重要作用。 一个功能性的网站,但没有经过深思熟虑的美学效果,对于艺术博物馆来说,可信度低,可能对博物馆的形象有害,即使导航和信息搜索工作得很好。
如果您想参观柏林的包豪斯博物馆,并且在他们的网站www.bauhaus.de上遇到了您在www.google.com上找到的同样的美学,您可能会怀疑这个博物馆值得一游。 然而,谷歌的网站属于信息搜索类型,用户对美学体验的期望完全不同。 Google的目标受众不会
剩余内容已隐藏,支付完成后下载完整资料
10.1515/nor-2017-0201
Nordicom Review 28 (2007) 1, pp. 63-76
The Role of Aesthetics in Web Design
LISBETH THORLACIUS
Abstract
Web sites are rapidly becoming the preferred media choice for information search, com-pany presentation, shopping, entertainment, education, and social contacts. At the same time we live in a period where visual symbols play an increasingly important role in our daily lives. The aim of this article is to present and discuss the four main areas in which aesthetics play an important role in the design of successful Web sites: aesthetics play an important role in supporting the content and the functionality, in appealing to the taste of the target audience, in creating the desired image for the sender, and in addressing the requirements of the Web site genre.
Key Words: web design, visual communication, aesthetics, functionality, taste, image, website genre
Introduction
The term aesthetics in the context of this article covers visual, sound and interactive means of effect. However, the article focuses primarily on the visual means of effect in terms of colours, typography, design, pictures, video clips, flash animations, etc.
Visual communication is a reality as soon as a word is typed, a colour chosen, or a text displayed on the screen, and any visual expression, whether it is intentional or not, communicates something to the visitor of the site. The Web designer can never bypass the effects of graphic design elements. These are given on every Web site. If we choose a vibrant, warm red colour for the menu, we communicate something different than if we had chosen a calm, cool blue colour. If we have a specially designed typography made for our headlines we leave a more personal impression on our Website than if we choose the most common typography such as, for example, Verdana. However, complex, multimedia installations, impressive pictures, and video clips are, at least in principle, optional extras, since they are not given factors that must be dealt with in any Web de-sign. We are forced to work with the visual elements of text and colour, but we can bypass aesthetic effects in the form of stimulating multimedia Flash installations and pretty pictures.
The only thing we cannot avoid is that there is always visual communication on a Web site, whether the use of visual effects is deliberate or not. We need to know about graphic effects and visual symbols, so that our communication can be intentional.1 The visual effects play an important role in the communication of content, in addition to creating more or less aesthetic experiences.
63
Functionality
The term functionality in this context covers the user friendly aspects of interfaces and Human Computer Interaction (HCI), where the main objective is to create effective websites where the user quickly and efficiently can obtain the desired pieces of infor-mation without being delayed by long downloading times or blind alleys when navigat-ing on the site. Jakob Nielsen has played an important role worldwide in giving direc-tives for the design of hyper-functional Web sites in, for example, Usability Engineer-ing from 1993 and Designing web usability from 1999. Nielsenrsquo;s definition of user friendly Web design embraces five central components: learnability, efficiency, memorability, errors and satisfaction. The usability expert, Rolf Molich operates with an additional component within user friendly Web design which is the aspect of understandability. These components are all important in considering the quality of the Web site in terms of functionality.
Figure 1. www.useit.com
The large amount of visually and graphically ill-considered, rash Web sites illustrates that there are still some Web designers who operate according to a narrow conception of “functionality” and completely neglect the value of the visual communication in sup-porting the functionality. The Web site of Web guru Jakob Nielsen, www.useit.com, is an example of a site that downplays the use of graphic effects. This is confirmed by Nielsen himself in the entry ”Why this site has almost no graphics.” He explains that he did not want to waste money on an artist and chose instead to do the graphic design himself. The problem with Nielsenrsquo;s Web site is that even though Nielsen feels that his
64
site has almost no graphic effects, he can not bypass the fact that the few graphics on the site do communicate something; but the visual communication at www.useit.com has not been carefully considered. The garish yellow banner at the top of the home page will for many people clash against the pastel yellow and blue colours used elsewhere on the page and call attention to that which according to Nielsen should be ”invisible” to the user.
In this case, the casual handling of visual effects indicates a sloppy and unprofes-sional sender, which is not an accurate image of Nielsen and probably has not been his intention with the Web site. However, another page on the Web site, ”About Jakob Nielsen”, which contains a biography and pictures of Jakob Nielsen, is created with harmony and balance between the colours and their placement. There is open space and a consistent use of blue colours. This page gives an impression of a sender who is or-ganized and has a sense of quality, which probably is more aligned with how Nielsen wants to appear through his Web site.
The graphic effects, in other words, are an inevitable part of any Web site. We can-not choose whether or not they should be included. We have to consider graphic effects, e
剩余内容已隐藏,支付完成后下载完整资料
资料编号:[276217],资料为PDF文档或Word文档,PDF文档可免费转换为Word
您可能感兴趣的文章
- 饮用水微生物群:一个全面的时空研究,以监测巴黎供水系统的水质外文翻译资料
- 步进电机控制和摩擦模型对复杂机械系统精确定位的影响外文翻译资料
- 具有温湿度控制的开式阴极PEM燃料电池性能的提升外文翻译资料
- 警报定时系统对驾驶员行为的影响:调查驾驶员信任的差异以及根据警报定时对警报的响应外文翻译资料
- 门禁系统的零知识认证解决方案外文翻译资料
- 车辆废气及室外环境中悬浮微粒中有机磷的含量—-个案研究外文翻译资料
- ZigBee协议对城市风力涡轮机的无线监控: 支持应用软件和传感器模块外文翻译资料
- ZigBee系统在医疗保健中提供位置信息和传感器数据传输的方案外文翻译资料
- 基于PLC的模糊控制器在污水处理系统中的应用外文翻译资料
- 光伏并联最大功率点跟踪系统独立应用程序外文翻译资料
