论高校新闻网界面设计中的色彩控制

高凤燕 （聊城大学 传媒技术学院 252059）

论高校新闻网界面设计中的色彩控制

高凤燕 （聊城大学 传媒技术学院 252059）

高校新闻网的界面色彩对于树立高校的品牌形象起着重要作用。以聊城大学新闻网的设计实践为基础，从设计目标的确立、色彩组合的选择、界面色彩的规划和设计细节的完善四个方面阐述设计过程，对高校新闻网界面色彩的选取原则、色彩搭配方法进行了分析和诠释。要实现对高校新闻网界面色彩的控制，就要站在足够的高度统领全局，综合考虑画面色彩的对比与和谐，解决好色彩的主从关系、位置关系、面积大小、深浅变化、情感表达、信息传达等问题。

高校；新闻网；界面设计；网页设计；色彩

所谓的色彩控制，就是从整体统领全局，协调好色彩之间的关系、色彩与其他设计元素之间的关系、色彩与信息传达之间的关系，做好色彩搭配。本文以聊城大学新闻网的界面设计为例，探究高校新闻网界面设计中的色彩控制问题。

一、 设计背景

聊大新闻网旧版界面色彩风格较明确，也遵循了新闻网的一般规律，但头重脚轻，色彩单调而缺乏生气；导航部分缺少“本站首页”，访问二级页面时只能通过“当前位置”的提示栏返回首页，信息交互不顺畅，用户体验欠佳。本次改版前，聊城大学新闻中心对网站的定位及功能做了明确界定：“以网络为传输手段的校内媒体信息综合传播平台，聚合校内各媒体信息资源，发挥网络传播的优势和特色，通过网络进行快速便捷、便于分享、关联信息丰富完整的浏览传播”。在此基础上，新闻中心对界面布局做出大致规划，并提出以下设计要求：

第一，符合新闻网的一般规范，如页面宽度、分栏、图片数量与尺寸大小等；

第二，头条设置独立、醒目；

第三，导航清晰，便于用户快速定位。

准确的网站定位明确了访问者的性质，内容与功能的界定决定了网站首页的布局和信息组织方式。网站有了准确的定位，就可以选择与之相匹配的视觉形象，并根据目标受众来选定主色调。因此，设计过程中只需着力解决好两个问题：一是通过对内容主次的体现，使用户建立良好的视觉流程；二是把色彩感觉处理好，在尊重既有用户情感体验的基础上让人耳目一新。

二、 选择色彩组合

不同的色彩组合可以传达不同的色彩情感。对于受众来说，色彩是感性的，明显受到情绪、心理、文化环境等因素的影响；对于创作者来说，色彩是理性的，如何决定符合设计意图的色彩、如何编排和运用色彩，每一环节都要“处心积虑”。综观国内外各大新闻网站，网页的功能分区、标题识别无不依赖于网页的色彩设计。一般来说，新闻网的色彩设计包括主动色与被动色：前者作为栏目或主要标题的颜色以及版面分区的界限，用于引导视觉流程；后者则用于小标题和新闻标题，在鼠标划过时才突出显示。就具体颜色来说，蓝、深红、灰和黑最常见。蓝色为冷色调，代表理性，多用于首页的新闻小标题中，能够在一定程度上体现新闻的真实性；红色为暖色调，辨识度最高，传播速度最快，但因其刺激性太强，使用过多容易产生视觉疲劳，多在栏目板块及标题中小面积出现或作为被动色使用；黑色、蓝色更适合作为网页文本色。

高校新闻网作为大学的下属网站，既要符合新闻网的设计规律，又要体现教育行业的特质，有VI系统的更应该规范用色。聊城大学的标准色包括橙色、蓝绿色和灰色三种色彩。根据主色、辅色、点缀色的分配原则，选定标准色中的蓝绿色为主色，确立稳重、平和、冷静、睿智的作品基调，凸显高校新闻网的教育特质；橙色作为点缀色与被动色使用，用于突出重点内容、引导阅读，打破蓝绿色带来的沉寂感，传达青春、活力的色彩感受；灰色作为辅助色使用，缓解蓝绿色与橙色对比带来的紧张感，增强阅读舒适度；其他辅助色根据实际需要在蓝绿色或橙色同色系中酌情选用，以控制界面中的色彩数量。

三、 规划界面色彩

色彩具有独特的内部互动性，增加或删除一种颜色，都会影响到整个画面的效果。只有从一开始就对色彩进行系统地规划和设计，才能有效维护色彩之间的关联，确保信息传递的合理性。高校新闻网界面色彩设计的总原则是“总体协调，局部对比”，同时还要符合国际互联网平台的色彩标准，即网页安全色。

（一）品牌区域的色彩配置

标识所在区域就是品牌区域。当标识色彩复杂时，只能将其孤立起来；当标识色彩简洁时，可以将其置于色块或图像背景中。人们的视线很容易聚焦在品牌区域，这说明它有很重要的地位，因此，品牌区域的色彩通常是主色，如果不是，就要很慎重地安排该区域色彩与主色之间的关系。旧版网页中以标准色渐变为背景，标识反白应用，添加了地球元素，整体又做了立体化处理，感觉上较为繁复；“聊大”两个字因使用黄色而成为视觉焦点，“新闻网”却并不显眼。本次设计沿用了标准标识的用色，保证了学校视觉形象的统一，橙色的“新闻网”文字与其形成鲜明对比，白色背景则将这种明暗、冷暖的强对比关系衬托得更加纯粹。导航根据性质的不同分为两行：主导航条选用标准蓝绿色使品牌区域的主色调更加明确；次导航条与标识中的英文网址处于同一水平位置，使品牌区域的画面感觉更加均衡。辅助图形与界面顶端的浅灰色长条融为一体，塑造了画面的空间层次，更增添了飞扬、灵动之气。

（二）视觉中心区域的色彩配置

在网页中能吸引用户视线并能引起阅读兴趣或情感共鸣的部分就是网页中的视觉中心。有心理研究表明：同一版面中，上方和左侧给人以轻松、亲切之感，下方和右侧则给人以沉重、冰冷之感，前者对人的视觉影响总强于后者。因此，网页的上部与中心位置就成了视觉的最佳区域，网页中重要的信息板块都会置于该区域内，且大多以明快的色彩或独特的形式与周围元素形成反差，通过色彩引导用户阅读重点内容，营造阅读的秩序感。本例中视觉中心区域设置了高明度的蓝绿色背景，打破了主色带来的有些过分的稳重与压抑感；同时，因与主色保持同一色系，主色调色量增加，色彩风格得以强化。图片新闻以接近页面整体宽度2/3的绝对优势置于左侧，成为该区域的焦点；右侧1/3宽度的较小板块放置“通知公告”、“媒体聊大”、“专题新闻”等内容，通过引人注目的橙色强调其地位的重要。“光影聊大”栏目因所展示的摄影作品色彩较为丰富，下方衬以与背景色相同的色带来统一视觉感受，与导航条相呼应，强化形式美感；标题背景图片的选择也独具匠心，暖暖的橙色天空与界面中的橙色板块遥相呼应，聊城大学标志性建筑“彩虹桥”的美丽剪影诠释了“光影聊大”的臻美意境。

（三）其他区域的色彩配置

网页界面设计的基本原则之一就是信息传递的合理性，新闻网站的信息量较之一般的商业网站要大得多，所以建立良好的视觉流程、营造信息的组织感与秩序感尤为重要。现在几乎所有的网页界面都包括头部、内容区域和底部，这三部分的用色原则各不相同。如上所述，头部用色重点在于确立品牌形象与色彩风格，而内容区域则侧重强化信息的组织与秩序，给予访问者更深层次的阅读感受；底部用色往往与头部相呼应，建立界面整体的均衡状态。本例中内容区域的多数板块采用灰底黑字，栏目标题与主色一致，对比柔和，不易造成视觉疲劳；“聊大人物”采用橙色背景标题引导阅读，“视频聊大”与“友情链接”栏目用色与页面上部的背景色相呼应，形成了色彩节奏与韵律的变化。页面底部再次运用主色与点缀色的对比与品牌区域形成互动，整个界面色彩感觉更加稳定。

格式塔心理美学认为，整体先于部分而确定部分的性质和意义。在这种美学思想的指导下，设计过程中实时把握全局、规划界面整体用色就显得越发重要。

四、 完善设计细节

在设计过程中，每个细节都是整体画面中的一部分，处理好细节与细节、细节与整体之间的关系，才能真正掌握色彩设计的精髓。初稿完成后交付客户审稿，如果前期对客户需求把握得比较精准，一般不会有太大问题，但细节方面都会得到不同程度的反馈意见。有针对性的进行细节调整，让作品更加完善，让色彩表达的效果更加准确。本例在设计后期针对客户的反馈意见又进行了一些调整，如在图片新闻下方增加了“综合新闻”栏目，“聊大微博”用图片链接到官方新浪微博，设计被动色，友情链接还是按照常规样式置于页面底部，等等。由于色彩是同形式和内容共同发挥作用的，形式变动后，为协调画面的平衡关系，色彩也进行了相应调整。另外，界面设计要注重用户体验，人性化设计也是不可忽略的一个方面。例如，将性质接近的校媒板块统一色调以方便用户分类获取信息；灰色的栏目背景减淡以拉开与文字的明度对比，创造更加舒适的阅读体验。

五、结语

高校新闻网的界面设计对于树立高校的品牌形象起着举足轻重的作用，设计过程中要站在足够的高度统领全局，实现对网页界面的色彩控制。其前提是要“选好色”，关键是要“用好色”。“选好色”建立在良好的客户沟通与设计分析基础之上；“用好色”则要综合考虑画面色彩的对比与和谐，解决好色彩的主从关系、位置关系、面积大小、深浅变化、情感表达、信息传达等问题。

[1]梁景红．写给大家看的色彩书②：色彩怎么选，设计怎么做[M]．北京：人民邮电出版社，2012．5．

[2]彭纲．论网页的色彩[J]．装饰，2004（02）：94．

[3]严晨，杨智坤．网页设计中的功能性与艺术性关系研究[J]．科技与出版，2011（06）：59-60．

[4]李振华． 新闻网页中的视觉识别系统设计[J]．新闻爱好者，2010（19）：45-46．

[5]李宏汀，王平飞．青年人与老年人网页颜色偏爱研究[J]．心理科学，2012（04）：848-851．

[6]董海斌，王丽梅，孙浩章．网页界面设计中的平面视觉元素[J]．包装工程，2010（02）：89-91．

[7] 王勇，董轩志．基于用户体验视角下的网页视觉传达设计研究[J]．包装工程，2013（12）：14-17．

[8] 严晨．网页页面设计中的5 条基本原则[J]．科技与出版，2011（02）：60-61．

[9] 严晨．格式塔心理美学在网页设计中的体现[J]．科技与出版，2012（02）：66-67．

[10] 宗世英，王以宁．培养视觉素养的网页界面视觉原则[J]．现代远距离教育，2010（05）：68-71．

高凤燕（1978- ），女，汉族，河北人，硕士，聊城大学传媒技术学院数字媒体系主任、讲师，研究方向：数字媒体艺术与动画应用。