色彩设计在WEB界面应用的功能性详解

今天的世界是互联网的世界。技术的进步,让我们开始关注“信息的品质”。在信息技术云集的互联网世界中,一个网站的与众不同和独特的色彩,是在众多网站中脱颖而出的首要条件之一。“色彩”它是自然美、生活美、艺术美的重要组成部分。在计算机技术和信息网络科技快速发达的今天,色彩设计的创造力在这一高科技领域也得以延伸。从互联网上五彩缤纷的页面来看,任何一件WEB界面设计作品都离不开色彩设计。商务网络界面要利用色彩设计传达产品形象信息,旅游网络界面要利用色彩设计传达实物风景信息,游戏网络界面要利用色彩设计传达三维空问信息,时装网络界面要利用色彩设计传达服装装饰信息,WEB界面中的色彩设计是对客观事物的真实再现,其认识作用是信息传达的重要要素之一。色彩作为设计最基本的元素,既是网络作品的表述语言,又是视觉传达的手段和方式,给WEB界面作品带来了鲜活的生命力,也给WEB界面设计者拓展了更为灿烂丰富的思考空问,具有举足轻重的作用。本文试将色彩设计在WEB界面应用的功能做了以下几种分析概括,权做抛砖引玉。

一、 视觉引导功能

视觉引导功能遵循的是一条流畅的路径,网页色彩能顺利地引导用户在页面上移动体验。

在WEB界面设计中,色彩担负起和线条、文字一样的视觉引导和强调的作用。设计师可以充分利用色彩导向作用力量去美化页面,对重要的信息进行色彩的整合和强化,引导浏览者的注意力,有利于推广新产品。对需要强调的内容适当运用色彩加以突出,使浏览者加深记忆,提高网站的信息传递效率。在产品展示类型的网页中,色彩的强调功能尤为明显。我们在浏览一些页面中不难发现世界顶级护肤品牌HR赫莲娜的展示页面,它成功地利用色彩将浏览者的注意力引导到产品之上,给人留下深刻的印象。又如在某些商品展示类的网站,色彩的导向传递功能运用尤为明显:亮色系比如以黄色为背景一般所代表的意思是促销产品热卖产品,而蓝色、褐色或深绿色等冷色调的搭配则多用来表现商品的价值。

二、企业形象识别功能

企业标准色是企业形象识别要素之一,网站设计者将企业网络界面色彩与企业标准色相呼应起到了加深企业形象的作用。格罗佩斯(Walter Gropius)在他的《艺术家与技术家在何处相会》一文中提到“如果物体的形象很适合于它的工作,它的本质就能被人看的清楚明确。”从这里可以很深刻的了解到企业形象在信息传递和接纳过程当中所起到的非常重要的作用因素。色彩也是形成企业形象的关键要素,企业标准色是企业形象的色彩表示系统,人们一看到此色彩就会联想到该企业。把CI设计这一理念应用到网站整体形象规划与设计开发上来,以企业CI设计中的标准色作为WEB界面的主色调展开设计,使WEB界面成为企业形象的延伸和宣传,无疑是把WEB界面设计推向正规化、品牌化发展的道路。它可以使网站与企业具有共通的视觉特征,便于宣传和识别,通常达到事半功倍、相得益彰的效果。

百事可乐在全世界拥有较高的知名度,使人过目不忘的蓝色和标准字体已成为它的标志。我们可以浏览一下百事可乐系列站点,每个网站的主体风格不尽相同,美国总站稳重些,英国站比较活泼,即使站点风格有些差异但都保持了一致的文化特点,都采用了大快蓝色的底色,给人以热情、活力、喜悦的感觉,应用在网络界面设计中,让受众群联想到饮用百事可乐所带来的快乐心情,无形中就加深了百事可乐品牌在消费者的心目中的形象。

三、 视觉区域划分功能

WEB界面的首要功能是信息传递,色彩正是创造有序的视觉信息流程的重要因素。利用不同色彩设计进行视觉区域划分是网络界面设计中的常用手法,也是色彩在WEB界面设计中的重要功能。网络界面中的信息不仅数量多,而且种类繁杂,往往在一个页面中可以看到各种各样的信息问题,利用色彩分布,可以将不同类型的信息分类排列,并配合相应内容,有针对性地设计色彩;利用各种色彩带给人的不同心理效果,很好的区分出主次顺序,从而形成有序的视觉流程。

色彩的视觉区域划分功能实用性强,变化性强,灵活易用,适用面广泛,在信息繁杂丰富的门户类网站中应用较多,而且效果较为明显。利用色彩和辅助线把网络界面分成几个区域,这些区域可以是规则也可以是不规则的,以适应多种信息内容编排的需要。“FDI世界园”是一家招商投资网站,它的网络界面设计十分简洁,多趣味性。由多种色块矩形区域拼合成了网络界面的整体框架,用按钮形式来显示导航功能选择,很清晰地把网站的内容分类展示给浏览者,配合上网站通用的icon,整个网站十分舒畅,同时减轻的用户的视觉负担。

四、审美功能

WEB界面不仅具有实用的物质功能,而且具有审美的精神功能,发挥审美功能的界面形象与发挥实用功能的界面实体是同一的,它们具有同质同构的联系,网络界面是以一定的使用目的或物质功能为存在前提的,其审美功能必须以其使用目的为导向,即审美功能不能背离其使用目的。由于人的视觉对于色彩有着特殊的敏感性,因此色彩所产生的美感魅力往往更为直接。

色彩既是视觉信息传达的方式(实用功能),又是艺术设计的语言(审美功能),当网络界面的色彩所反映的情趣与人们的审美情绪发生共鸣时,也就是说色彩配合的形式结构与人们审美心理的形式结构相对应时,人们就会感觉到色彩和谐的愉悦。色彩设计对WEB界面设计作品的艺术品位起着举足轻重的作用,不仅在视觉上,而且在心理作用和象征作用中都可以得到充分的体现。因此,网络界面设计要以色彩的科学知识为基础,进而从美学的角度去探讨色彩设计的表现形式,增强WEB界面设计作品的艺术性,以创造出更富审美情趣的作品。在国内68design网页设计的站点,其中国内优秀设计作品中一家叫冰艺工作室的网站还是比较吸引人的眼球,让人不由自觉的想去点击它。它每个网络界面所选择的色彩和图形都能使浏览者自然地将其与产品风格联系在一起,界面中间色彩和四周部分黑、白、灰无彩色的色调搭配形成了动静相宜、多样统一的韵律美,给网络界面注入了活泼而新鲜的活力,从而达成令人赏心悦目的界面形式,和谐中富于变化,具有独特的创造性和审美价值。

五、品牌语言传递功能

品牌宣传效果不仅应该在视觉上,而且应该在心理上和象征上得到体会和理解。不同色相具有不同的语意特征。人们经过长期的社会生产实践和生活体验,对色彩形成了不同的情感和心理感受,人们将这种长期积累的色彩印象赋予各种语意特点并将其应用到生产、生活中。

在众多的网站类型中,不同的网站类型都有自身的色彩语意相关性。如儿童用品的网站设计多使用色彩亮丽、醒目的纯色;蓝色常用在表现同科技产业等相关新兴产业的WEB界面设计上。因此,设计者在界面色彩语言表达中应充分考虑不同色彩的语意特点,并将其和WEB界面主题内容结合起来。

六、主题鲜明功能

网络是信息的海洋,浏览者在网络中漫游无疑是寻找他们所需要的信息资源,网络界面传递的信息内容与传递方式应该是相互统一的,这是设计作品成功的必要条件之一。网络界面如何使浏览者迅速、快捷、准确的掌握主题,整合信息资源,这就需要设计师利用色彩的对比调和手段,产生视觉落差,来表现信息的重点,从而提高浏览者获取信息的效率。设计师可利用不同色彩自身的表现力、情感效应以及审美心理感觉等,使网络界面的内容与形式有机地结合起来,以色彩的内在力量来美化页面,或含蓄优雅,或动感强烈,或时尚新颖,或单纯醒目,烘托主题、突出主题。在网络界面设计的许多成功作品中我们都可以看出这一点。三星galaxys3公司的商业网站,进入该网站的第一需要就是找到所需的产品,WEB界面设计者就利用了产品图片显示颜色和灰色块强烈对比所产生的视觉落差,突出了右上角黑色文字主题内容和产品薄轻便的优势,以色彩的内在力量引起浏览者的重点关注,引导浏览者以最便捷的方式使用该网络界面,同时,灰色色块背景好似深沉的蓝色里的交音阶,高贵、气质不凡,铺色用心,恰到好处,使网站风格突出,大大增强了网站的艺术性和吸引力,从而提高了网站的知名度。

结语:

色彩在网络界面中的应用都有其极强的功能性,将CIS中的标准色应用于网络界面能够完成企业形象识别功能、将不同色彩的色块协调组合在一起能够完成视觉区域划分功能、将构成强烈对比的色彩有主次的组合能够起到突出主题重点的作用、根据受众群体的审美心理进行的色彩设计有增强艺术效果的功能。科学的、高度审美的色彩设计是网络界面设计的重要元素,也是界面设计中技术与艺术结合发展的重要标志,作为WEB界面设计师,必须具备较高的色彩设计素养,理性设计和感性设计相结合,有目的的、创造性地进行WEB界面色彩设计。

来源:UI

时间: 2024-10-12 08:23:37

色彩设计在WEB界面应用的功能性详解的相关文章

asp.net中web.config配置节点大全详解【转】

web.config 文件查找规则: (1)如果在当前页面所在目录下存在web.config文件,查看是否存在所要查找的结点名称,如果存在返回结果并停止查找. (2)如果当前页面所在目录下不存在web.config文件或者web.config文件中不存在该结点名,则查找它的上级目录,直到网站的根目录. (3)如果网站根目录下不存在web.config文件或者web.config文件中不存在该节点名则在%windir%"Microsoft.NET"Framework"v2.0.

使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解

在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基础作出了一些说明,建议在阅读本文前首先阅读前文,这里 Kayo 再引用前文的重要内容. “jQuery Mobile 在基于本地事件上,创建了一系列的自定义事件,大部分事件是基于触摸设备的使用情况开发的,当然这些事件对于桌面环境也会有适当的处理,开发者可以使用 bind() 函数绑定到需要的页面对象中. 值得

springmvc在web.xml中的配置详解

                          <servlet> <servlet-name>springMvc</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation</param-

高性能Web服务之nginx应用详解

一.Nginx特性 * *模块化,目前只能将模块编译进Nginx,暂时不支持动态装卸模块.(httpd优势) * *可靠性,一个主进程(master)控制多个工作进程(worker),工作进程响应用户多个请求(httpd劣势) * *低内存消耗,(httpd劣势) * *支持热部署,(httpd相同) * *支持事件驱动I/O,AI/O,支持mmap(httpd2.4才算支持event,劣势) 二.Nginx基本架构 Nginx由一个master进程生成多个worker进程,每个worker进程

高性能Web服务之haproxy应用详解及实现论坛的动静分离机制

HAProxy提供高可用性.负载均衡以及基于TCP和HTTP应用的代理,支持虚拟主机,它是免费.快速并且可靠的一种解决方案.HAProxy特别适用于那些负载特大的web站点,这些站点通常又需要会话保持或七层处理.HAProxy运行在当前的硬件上,完全可以支持数以万计的并发连接.并且它的运行模式使得它可以很简单安全的整合进您当前的架构中, 同时可以保护你的web服务器不被暴露到网络上. 下面通过案例架构详解HAproxy应用,架构图如下所示: 以上架构实现过程如下: (1).在node1,node

Nginx架构及其web服务搭建优化配置详解

Nginx安装配置及其理论详解 Nginx的功能介绍绍及其优势性能 Nginx的官方站点Nginx.org Nginx的版本号,次版本号如是表示偶数一般表示是稳定版,如果是基数一般表示是开发版.我们可以根据需要来使用. Nginx的优势特性: 1.模块化设计,有着很好的扩展性.(想实现什么功能,只需要安装模块就好) 2.高可靠性:因为他是主控进程和worker是同步实现的,一个worker出现问题,会立刻启动另一个worker. 3.较低的内存消耗,一万个长连接(keep-alive),在Ngi

Web 服务器压力测试实例详解

发表于 2012-1-6 14:53 | 来自  51CTO网页 Web 服务器搭建完成上线在即,其能够承载多大的访问量,响应速度.容错能力等性能指标,所有这些是管理人员最想知道也最为担心的.如何才能知晓这一切呢?通过工具进行 Web 压力测试是个好方法.通过它可以有效地测试 Web 服务器的运行状态和响应时间等性能指标. 一.测试环境: 服务器操作系统:w indow s XP  专业版(32 位/SP2/DirectX 9.0c )Web 服务器:Apache 2.2.9IP 地址:略压力测

web.xml加载顺序详解

web.xml加载顺序 1.先加载<context-param>标签 2.创建servletContext容器 3.把<context-parame>标签中数据转化成键值树交给servletContext容器 4.创建Listener实例 5.加载filter(过滤器) 6.加载Interceptor(拦截器) 7.加载servlet 注:filter加载顺序:根据web.xml中<filter-mapper>来决定 servlet一样如此 1.自定义Listener,

Web 缓存欺骗攻击技术详解

你是否曾想过你只需要访问如:https://www.paypal.com/myaccount/home/stylesheet.css或https://www.paypal.com/myaccount/settings/notifications/logo.png这样的链接就可能会泄露你的敏感数据,甚至允许攻击者控制你的帐户? Web缓存欺骗是一种新的Web攻击向量,这种攻击技术的出现使得多种Web缓存技术和框架面临风险. Web缓存和服务器反应的一点介绍 很多网站通常都倾向于使用web缓存功能(