《网页设计色彩运用研究6700字（论文）》

冷色系色彩在网页设计中的应用研究及案例分析——以“湖北毛尖茶叶”为例目录TOC\o"1-3"\h\u14900绪论 摘要设计行业不断革新，从起居饮食到精神层面，每一个角落都渗透着设计的思想。如今是互联网产业蓬勃发展的新时代，软件业、移动互联网产业纷纷进入人们的生活，而这些网站以及营运的界面是用户与产品之间沟通交流的一个平台，界面色彩是用户与产品体验的第一视觉因素，是设计成功与否的重要基础，而冷色调占据了网页界面设计色彩使用，使用户在更舒适的视觉环境中操作界面，为网页产品获得较高的“收视率”，研究冷色调对网页界面设计有着深远的意义。中国的茶文化博大精深，人们不仅种植茶，同时也会对其加工、售卖，很大一部分中国人都喜欢喝茶，茶作为中国的农产品，也是一种传统文化。随着现代互联网技术的不断发展，很多地区的茶农们不在追求以往的面对面交易，人们为了积极拓展市场，纷纷开展了互联网交易，建立了属于自身的网页，全国各地的消费者借助网站就了解茶文化，积极推广本地的茶叶。在进行农产品的网页界面设计中，冷色调的融入对于吸引受众起到了很大的作用，通过阅读和查找大量国内外网络信息和书籍、期刊，发现冷色调的色彩体验，才是用户喜爱的，也是网页界面能够长期屹立不败的法宝。对此，本文也尝试利用冷色系对农产品网页界面进行设计，在设计过程中将湖北的毛尖茶作为研究对象，建立起一个冷色系的网页，借助沉稳、个性的色彩搭配，吸引人们对此进行关注，有效推动湖北毛尖茶的发展，让更多人认识湖北本地的茶文化。【关键词】：冷色系；农产品；网页界面设计；湖北毛尖绪论研究背景21世纪，人类社会正向数字时代转变，现如今已经是互联网的天下，互联网正在全世界进行着越来越深刻的革命。网页设计是近二十年以来意义深远的新兴设计领域。新的媒介同时带来高度的挑战性，网页作为一种新兴的信息载体，相对于传统媒体(报刊、杂志、电视等)来说，它的构成元素更加复杂，包含了文字、图像、色彩、声音、动画等各元素。在网页众多元素中，色彩元素往往是首先吸引浏览者目光的，之后才是网站的信息内容。色彩不但给浏览者带来美感和愉悦感，而且可以有效地传达企业形象、提升品牌价值。网页的色彩是树立网站形象的关键之一。一个网站设计成功与否，在某种程度上与设计者对色彩的运用和搭配有着不可分割的关系。不过，就目前的行业发展情况来看，网页界面色彩运用等方面得到了重视，在行为与色彩之间的使用和协调已经开始研究和探索，但还是远远不够的，对于“什么行业需要什么样的色彩?”“各种类型的客户对于色彩的心理诉求是什么?”“什么色调、色度具体应该如何?”等一系列问题还未做到进一步的解决。研究目的与意义介于网络的不断普及、色彩在网页设计中的重要性逐渐凸显，对于网页设计配色的研究就显得十分有必要，随着经济、文化、艺术的不断发展，各领域对色彩的认识与需求也发生了巨大的变化，如何从色彩艺术设计发达的国家获取经验，如何积极有效地发展我国的色彩事业，成为值得思考的问题。本文主要围绕网页设计中的色彩运用展开的，尝试将冷色系应用到农产品的网页界面设计中，将湖北毛尖茶作为设计的重点进行分析，先是对网页设计相关概念进行，随之探究冷色系在网页设计中的应用与实现手段，本课堂在研究中也对一些较为经典的网页配色进行的分析与总结，可以为设计师提供一些参考，在研究过程中，笔者根据研究路线提出了研究目标、具体的解决办法，最终实现了色彩、图形、界面、用户体验之间融合问题的解决。研究内容与方法本次研究冷色系色彩在农产品网页界面设计中的应用研充，以“湖北毛尖茶叶”为例，主要分析了在湖北毛尖茶的网页界面设计中，如何有效将冷色系进行应用，为受众带来一种不一样的视觉体验，吸引受众关注，并以此推动湖北的茶文化。研究先是对网页界面设计以及冷色系相关知识点进行了简单分析，随后总结了冷色调在网页界面设计中能够给消费者带来的感官体验，随后开展本次的设计实践，对设计的构思、方法进行总结，并对设计作品展开分析。在研究中，主要使用了文献研究法以及案例分析法，搜集国内外关于冷色系应用以及网页设计的相关研究资料，同时观看了一些优秀的茶叶网站设计案例，为本次研究提供了良好的基础，随后以湖北毛尖茶作为案例研究对象，展开设计实践，旨在打造一个充满视觉冲击的网页界面，吸引受众的同时传播湖北的茶叶文化。一、相关概念分析（一）网页界面设计的概念与发展1.网页界面设计概念网站是由网页集合而成的，至于要多少网页集合在一起才能称作网站没有规定，即使只有一个网页也能被称为网站。大家通过浏览器所看到的画面便是网页，网页其实就是一个html文件，而浏览器是用来解读这份文件的。而如果我们想要制作一个网站，就需要编辑若干个html文件，然后通过超链接的形式把它们连接在一起，这样一个网站便制作成功了。网页设计从另一个角度来说是UI设计，也就是用户交互界面的设计。网页设计是一种建立在新型媒介之上的新型设计，网页既拥有传统媒体的优点，同时又使传播变得更为直接、省力和有效，它是区别于传统媒介如报刊、影视的一个新媒体。网页具有很强的视觉效果，它具有其它媒体所不具有的互动性、互操作性、受众面广等特点。网页设计是一个感性思考和理性分析相结合的复杂过程，它的方向取决于设计的任务，它的实现依赖于网页的制作。网页总体设计方案要主题鲜明，在目标明确的基础上完成网站的构思创意，对网站的整体风格做出定位，规划网站的组织结构。2.网页界面设计发展网页设计的发展大致经历了三个阶段：第一个阶段，简单的静态网页。作为人机交流的媒介，最早的网页是由字符组成，那时候的网站还只能保存单纯的文本，对于网页的艺术设计的要求低，只是追求功能性的作用，起到单纯的传递信息的作用。早期的网站主要用于一些科学工作者的工作需要，所以网站的重点是交流科学发展的信息。第二个阶段，图文并茂的网页。随着计算机技术的不断发展，简单的静态网页已不再能满足人们的审美需求。1990年发布的第一个图形化浏览器“WorldWideWeb",使图像、声音、动画、视频，甚至3D技术开始在因特网上流行起来，网站的内容开始变得丰富起来，逐步由以技术为主，转而走上了技术与艺术相结合的道路。第三个阶段，动态交互式网页。随着动态网页技术和可视化开发工具的出现，网页设计者可以根据需要丰富网页的内容和交互性，越来越多的艺术设计人员也加入了网页设计的行列。网页技术的出现为艺术设计提供了一个全新的载体，众多艺术设计团队的加入，也使网页变得更加的丰富多彩。（二）冷色系相关内容分析1.冷色系色彩有着冷暖之分，冷色系只是色彩的一个具体分类，它的对立就是暖色系，在冷色系中，色彩的组成主要有蓝绿、蓝青、蓝、蓝紫，但是冷色系并不能完全指这些色彩，当这些色彩的明度、饱和度减少，或者是两个色彩出现了调和，但是基本的属性不变，其也属于冷色系。图1.1冷色系色彩组成现代人更喜欢冷色系的调和，将两种或两种以上的色彩合理搭配，产生统一谐调的效果，主要目的就是达到视觉统一，达到人们心理平衡。2.网页设计的色彩搭配心理学家认为，人的第一感觉是视觉，而对视觉影响最大的则是色彩。色彩是影响网页界面给人感知的第一视觉因素，不同的色彩与对象的体验差异，会产生不同的色彩感知与联想。例如，从色相上来说，红色、橙色和黄色使人兴奋、热情充满跃动感；黄色使人联想到阳光，是一种快活的颜色；黑颜色显得比较庄重；蓝紫色则给人冷静、严肃之感。从明度上说，色彩越重则越让使用者觉得劳累、紧张，轻度的色彩则会使人心情放松。之所以存在色彩，是因为自有光开始，我们的眼睛就在接受色彩信息，因为网页上的产品需要色彩，因为网页界面在友好性的体验中需要合理的色彩来完善产品，因为人们需要通过色彩信息的提示来丰富网页与他们的互动，是因为用户需要色彩来寄托心理诉求。色彩是用来表达软件情感最直接的一种设计元素。当我们与某种颜色目光相交的一瞬间，能体会它的情感诉说，传递讯息。在网页界面设计时，依据用户群的不同以及网页性质差异，如果是一个政府机关所使用的网页，色彩应该简约、大气，而不是像给个人用户使用的较为花哨，色彩多样，否则不能体现政府工作的严谨和庄重，针对农产品网页设计，在色彩搭配上应该尽量充满吸引力，这样才能引发受众停留、浏览，如果色彩设计过于亮眼或者是过于深沉，不够活跃，很难吸引受众注意。由此可以看出，色彩也享有举足轻重的地位，从背景色，到每个元素的颜色再到文字颜色、链接颜色等都为界面的完整性和专业性提供有力保证。3.冷色系在网页界面设计中的色彩心理UI设计师在做网页界面设计时往往会采用冷色调，也是与它产生的色彩心理相关的。心理学家对此曾做过许多实验，他们发现，在红色环境中，人的脉搏会加快，血压会身高，情绪会冲动。而处在蓝色环境中，脉搏会减缓，情绪会沉静。由此科学家得出，色彩可以影响脑电波，脑电波对红色的反应是紧张，对蓝色的反应是放松。这些实验的结果向我们证实了色彩能够对人产生一定的心理作用，色彩的冷暖给人造成的心理上影响并非自然环境中的温度引起的，而是视觉效果在人心理的正常反映。这也和长期积累的视觉经验相关，正因为这些经验的积累也恰好能为UI色彩的选择提供帮助，我们知道UI需要的色彩应该是令用户感觉到舒适的、无负担的、清晰的色彩，而冷色调给人的心理体会是冷静、清爽、放松，并不像暖色调那么张扬，引起人们心理躁动感，那么“冷”正是UI最适合的色彩情感。这种“冷”也蕴含着一份关怀与放松，网页界面设计的初衷是希望用户能够通过它了解更多知识，解决问题，而不是徒增烦恼，令视觉增加负担的，那么选择合适的“冷”才是界面UI色彩应该为用户考虑的。二、冷色调在农产品网页界面设计应用中的影响（一）冷色系对用户情感的稳定色彩所产生的视觉影响对于人类来说是具有许多方面的因素影响所产生的效果，其中有包括身体上的以及情绪上的。人的视觉效果产生上会对不同的颜色与颜色之间的关系产生不同的感觉。例如:开心和忧郁，温暖和冷淡，清新和热烈等。而产生这些感受的人也是各种各样的，像不同地方、年龄、职业、性别、文化差异的人在他的生活环境和经历方面的不一样都会令这一感受存在巨大的差异。例如绿色，其具有清新、自然、健康的象征意义，同时还表示希望的意象。在商业化模式的设计当中，代表了效率以及企业的形象。例如下图3.1与图3.2的两个农产品网页界面设计，设计师就运用了满眼的绿色，虽然色调有所不同，但是能够给人带来一种舒适的视觉感受，人们看到绿色就会觉得充满生机与活力。图3.1中国菜网界面截图图3.2中国农产品网界面截图（二）带给用户强烈的视觉冲击在网页界面设计中，色彩搭配最重要的作用是增加作品本身的吸引力，因为在网页界面作品中，无论作品是什么，色彩元素对人的影响是最重要的。当观赏者观看一个网页界面设计作品时，第一印象通常是由色彩元素创造出来的，那么UI设计师在创作之初就应该从色彩元素入手，注重色彩的安排，提升整个平面设计作品的魅力。通过作品的情感操作，可以提高作品的层次，让观者在观看作品时对作品的内涵有更深的理解。鲜艳的冷色系颜色能够比其他的颜色更快的吸引人们的注意，更能够进一步的刺激人们的视觉神经从而去了解更多的内容。图3.3FinforaFin产品网站截图图3.4农产品质量检测网站（三）丰富作品功能语意设计师在网页界面设计作品中把色彩进行合理搭配，原本单调的作品可以变得丰富多彩。由于网页界面设计是当前商业经济环境的产物，设计师在设计和创作作品时也应充分考虑当前市场的实际演变，色彩搭配时代也面临着市场的挑战。要吸引观众的注意力，就要准确把握观众的心理动态，用平淡的色彩表达作品也要根据群众的审美需要进行协调，这与大众的审美是分不开的，它还可以起到促进观众对作品理解的重要作用。在这里，设计师应该确保网页界面设计的色彩调整与主流价值观相一致。网页界面中色彩的功能语意指设计中理性层面的语意传达，不同的界面在表达中传达不同的理性特征和界面功能，给用户高雅、时尚、大方等感受，伴随着科技的不断进步，隐性和显性技术手段是色彩语意传达的重要手段，它们共同为色彩所服务，使网页界面的色彩具有了实用性和认知性两种功能。界面色彩的实用性功能表现在充分关注消费者需求，针对其行为、情感产生的感受，迎合社会大众的使用习惯。从界面的色彩侧面反映出使用者的个性特征，表现出不同的性别、群体隐藏的认知特征例如，灰色、黑色、蓝色的界面传递出沉着、稳固、宁静的认知语意。三、“湖北毛尖茶”冷色系网页界面设计实践分析（一）设计理念本次主要展开了对湖北毛尖茶的网页界面设计实践，在设计过程中，主要重点就是将冷色系应用其中，充分发挥冷色系对于网页界面设计的推动作用。在设计过程中，秉持着以人为本以及现代化的设计理念。以人为本主要体现在，色彩的搭配上注重人的情感体验，本身冷色系与暖色系对于人的心理产生的影响都是不同的，冷色系也分为刺激性的冷、个性化的冷以及温暖化的冷，在进行设计中，笔者将充分考虑受众需求，对色彩进行合理的搭配与应用，以此来满足人的情感需要，同时人性化还体现在，网页的组织结构布置上，以简洁明了的形式展现，浏览者在观看过程中不会感到复杂，能够轻松找到自己想要了解的内容。现代化的设计理念体现在，设计过程中将充分利用符合当代审美潮流与审美思想的设计手法，打造极具个性化的网页界面设计。（二）设计定位本次进行的“湖北毛尖茶”网页界面设计，在进行产品定位上，笔者将其定义为融合个性化色彩体验的茶文化展示平台，设计的风格为简约、色彩个性。整个设计形式为一个网页设计，主要使用者定位具有消费能力以及喜爱喝茶，热爱茶文化的问题。这些群体普遍具有一定的消费能力，人们希望从网页中认识与了解一些关于湖北毛尖茶的科普，并且有专门的渠道进行购买。（三）设计特点分析本次进行的湖北毛尖茶网页界面设计，设计特点分为以下几点。首先是统一与和谐。因为在设计中会应用到不同的颜色，为了使色彩呈现出和谐，不会显得过于凌乱，笔者在设计过程中对色彩进行合理搭配，选择同为冷色系的不同色彩，在明度、饱和度上进行控制。同时，网页界面上包含了文字、图像、颜色，因此，网页界面的设计需要增加情感内容，同时还要有合理的规划，使用户能够在感情上依赖。其次是方便易用的操作功能。网页界面的设计以方便用户的功能为基础，使用户能够在最短的时间内操作，并接受其应用，使用户感受到高效率，增强用户与网页的黏性。（四）设计具体内容1.LOGO设计2.图标设计3.界面视觉设计结论作为一名平面设计师，除了深刻认识色彩搭配对界面设计的重要性，更重要的是学会运用色彩搭配的相关知识，设计出满足大众审美需求、充分展现美的优秀UI设计作品，丰富受众的感情，把握设计为人民服务的方向，从而达到提高人民艺术素质、陶冶艺术情感的目的。在进行“湖北毛尖茶”设计过程中，色彩起到了重要的作用，笔者运用了冷色系，强调情感表达，满足多元化的配色规律，这样才能有效展现网页界面设计作品最深层次的思想，提升人们对于作品的认知。

参考文献[1]秦岁明,何梦楠.扁平化风格在网页界面设计中的应用[J].包装工程,2015(6):00095-00096.[2]赵倩