論高校新聞網(wǎng)界面設(shè)計(jì)中的色彩控制

高鳳燕 （聊城大學(xué) 傳媒技術(shù)學(xué)院 252059）

論高校新聞網(wǎng)界面設(shè)計(jì)中的色彩控制

高鳳燕 （聊城大學(xué) 傳媒技術(shù)學(xué)院 252059）

高校新聞網(wǎng)的界面色彩對(duì)于樹立高校的品牌形象起著重要作用。以聊城大學(xué)新聞網(wǎng)的設(shè)計(jì)實(shí)踐為基礎(chǔ)，從設(shè)計(jì)目標(biāo)的確立、色彩組合的選擇、界面色彩的規(guī)劃和設(shè)計(jì)細(xì)節(jié)的完善四個(gè)方面闡述設(shè)計(jì)過程，對(duì)高校新聞網(wǎng)界面色彩的選取原則、色彩搭配方法進(jìn)行了分析和詮釋。要實(shí)現(xiàn)對(duì)高校新聞網(wǎng)界面色彩的控制，就要站在足夠的高度統(tǒng)領(lǐng)全局，綜合考慮畫面色彩的對(duì)比與和諧，解決好色彩的主從關(guān)系、位置關(guān)系、面積大小、深淺變化、情感表達(dá)、信息傳達(dá)等問題。

高校；新聞網(wǎng)；界面設(shè)計(jì)；網(wǎng)頁設(shè)計(jì)；色彩

所謂的色彩控制，就是從整體統(tǒng)領(lǐng)全局，協(xié)調(diào)好色彩之間的關(guān)系、色彩與其他設(shè)計(jì)元素之間的關(guān)系、色彩與信息傳達(dá)之間的關(guān)系，做好色彩搭配。本文以聊城大學(xué)新聞網(wǎng)的界面設(shè)計(jì)為例，探究高校新聞網(wǎng)界面設(shè)計(jì)中的色彩控制問題。

一、 設(shè)計(jì)背景

聊大新聞網(wǎng)舊版界面色彩風(fēng)格較明確，也遵循了新聞網(wǎng)的一般規(guī)律，但頭重腳輕，色彩單調(diào)而缺乏生氣；導(dǎo)航部分缺少“本站首頁”，訪問二級(jí)頁面時(shí)只能通過“當(dāng)前位置”的提示欄返回首頁，信息交互不順暢，用戶體驗(yàn)欠佳。本次改版前，聊城大學(xué)新聞中心對(duì)網(wǎng)站的定位及功能做了明確界定：“以網(wǎng)絡(luò)為傳輸手段的校內(nèi)媒體信息綜合傳播平臺(tái)，聚合校內(nèi)各媒體信息資源，發(fā)揮網(wǎng)絡(luò)傳播的優(yōu)勢(shì)和特色，通過網(wǎng)絡(luò)進(jìn)行快速便捷、便于分享、關(guān)聯(lián)信息豐富完整的瀏覽傳播”。在此基礎(chǔ)上，新聞中心對(duì)界面布局做出大致規(guī)劃，并提出以下設(shè)計(jì)要求：

第一，符合新聞網(wǎng)的一般規(guī)范，如頁面寬度、分欄、圖片數(shù)量與尺寸大小等；

第二，頭條設(shè)置獨(dú)立、醒目；

第三，導(dǎo)航清晰，便于用戶快速定位。

準(zhǔn)確的網(wǎng)站定位明確了訪問者的性質(zhì)，內(nèi)容與功能的界定決定了網(wǎng)站首頁的布局和信息組織方式。網(wǎng)站有了準(zhǔn)確的定位，就可以選擇與之相匹配的視覺形象，并根據(jù)目標(biāo)受眾來選定主色調(diào)。因此，設(shè)計(jì)過程中只需著力解決好兩個(gè)問題：一是通過對(duì)內(nèi)容主次的體現(xiàn)，使用戶建立良好的視覺流程；二是把色彩感覺處理好，在尊重既有用戶情感體驗(yàn)的基礎(chǔ)上讓人耳目一新。

二、 選擇色彩組合

不同的色彩組合可以傳達(dá)不同的色彩情感。對(duì)于受眾來說，色彩是感性的，明顯受到情緒、心理、文化環(huán)境等因素的影響；對(duì)于創(chuàng)作者來說，色彩是理性的，如何決定符合設(shè)計(jì)意圖的色彩、如何編排和運(yùn)用色彩，每一環(huán)節(jié)都要“處心積慮”。綜觀國(guó)內(nèi)外各大新聞網(wǎng)站，網(wǎng)頁的功能分區(qū)、標(biāo)題識(shí)別無不依賴于網(wǎng)頁的色彩設(shè)計(jì)。一般來說，新聞網(wǎng)的色彩設(shè)計(jì)包括主動(dòng)色與被動(dòng)色：前者作為欄目或主要標(biāo)題的顏色以及版面分區(qū)的界限，用于引導(dǎo)視覺流程；后者則用于小標(biāo)題和新聞標(biāo)題，在鼠標(biāo)劃過時(shí)才突出顯示。就具體顏色來說，藍(lán)、深紅、灰和黑最常見。藍(lán)色為冷色調(diào)，代表理性，多用于首頁的新聞小標(biāo)題中，能夠在一定程度上體現(xiàn)新聞的真實(shí)性；紅色為暖色調(diào)，辨識(shí)度最高，傳播速度最快，但因其刺激性太強(qiáng)，使用過多容易產(chǎn)生視覺疲勞，多在欄目板塊及標(biāo)題中小面積出現(xiàn)或作為被動(dòng)色使用；黑色、藍(lán)色更適合作為網(wǎng)頁文本色。

高校新聞網(wǎng)作為大學(xué)的下屬網(wǎng)站，既要符合新聞網(wǎng)的設(shè)計(jì)規(guī)律，又要體現(xiàn)教育行業(yè)的特質(zhì)，有VI系統(tǒng)的更應(yīng)該規(guī)范用色。聊城大學(xué)的標(biāo)準(zhǔn)色包括橙色、藍(lán)綠色和灰色三種色彩。根據(jù)主色、輔色、點(diǎn)綴色的分配原則，選定標(biāo)準(zhǔn)色中的藍(lán)綠色為主色，確立穩(wěn)重、平和、冷靜、睿智的作品基調(diào)，凸顯高校新聞網(wǎng)的教育特質(zhì)；橙色作為點(diǎn)綴色與被動(dòng)色使用，用于突出重點(diǎn)內(nèi)容、引導(dǎo)閱讀，打破藍(lán)綠色帶來的沉寂感，傳達(dá)青春、活力的色彩感受；灰色作為輔助色使用，緩解藍(lán)綠色與橙色對(duì)比帶來的緊張感，增強(qiáng)閱讀舒適度；其他輔助色根據(jù)實(shí)際需要在藍(lán)綠色或橙色同色系中酌情選用，以控制界面中的色彩數(shù)量。

三、 規(guī)劃界面色彩

色彩具有獨(dú)特的內(nèi)部互動(dòng)性，增加或刪除一種顏色，都會(huì)影響到整個(gè)畫面的效果。只有從一開始就對(duì)色彩進(jìn)行系統(tǒng)地規(guī)劃和設(shè)計(jì)，才能有效維護(hù)色彩之間的關(guān)聯(lián)，確保信息傳遞的合理性。高校新聞網(wǎng)界面色彩設(shè)計(jì)的總原則是“總體協(xié)調(diào)，局部對(duì)比”，同時(shí)還要符合國(guó)際互聯(lián)網(wǎng)平臺(tái)的色彩標(biāo)準(zhǔn)，即網(wǎng)頁安全色。

（一）品牌區(qū)域的色彩配置

標(biāo)識(shí)所在區(qū)域就是品牌區(qū)域。當(dāng)標(biāo)識(shí)色彩復(fù)雜時(shí)，只能將其孤立起來；當(dāng)標(biāo)識(shí)色彩簡(jiǎn)潔時(shí)，可以將其置于色塊或圖像背景中。人們的視線很容易聚焦在品牌區(qū)域，這說明它有很重要的地位，因此，品牌區(qū)域的色彩通常是主色，如果不是，就要很慎重地安排該區(qū)域色彩與主色之間的關(guān)系。舊版網(wǎng)頁中以標(biāo)準(zhǔn)色漸變?yōu)楸尘?，?biāo)識(shí)反白應(yīng)用，添加了地球元素，整體又做了立體化處理，感覺上較為繁復(fù)；“聊大”兩個(gè)字因使用黃色而成為視覺焦點(diǎn)，“新聞網(wǎng)”卻并不顯眼。本次設(shè)計(jì)沿用了標(biāo)準(zhǔn)標(biāo)識(shí)的用色，保證了學(xué)校視覺形象的統(tǒng)一，橙色的“新聞網(wǎng)”文字與其形成鮮明對(duì)比，白色背景則將這種明暗、冷暖的強(qiáng)對(duì)比關(guān)系襯托得更加純粹。導(dǎo)航根據(jù)性質(zhì)的不同分為兩行：主導(dǎo)航條選用標(biāo)準(zhǔn)藍(lán)綠色使品牌區(qū)域的主色調(diào)更加明確；次導(dǎo)航條與標(biāo)識(shí)中的英文網(wǎng)址處于同一水平位置，使品牌區(qū)域的畫面感覺更加均衡。輔助圖形與界面頂端的淺灰色長(zhǎng)條融為一體，塑造了畫面的空間層次，更增添了飛揚(yáng)、靈動(dòng)之氣。

（二）視覺中心區(qū)域的色彩配置

在網(wǎng)頁中能吸引用戶視線并能引起閱讀興趣或情感共鳴的部分就是網(wǎng)頁中的視覺中心。有心理研究表明：同一版面中，上方和左側(cè)給人以輕松、親切之感，下方和右側(cè)則給人以沉重、冰冷之感，前者對(duì)人的視覺影響總強(qiáng)于后者。因此，網(wǎng)頁的上部與中心位置就成了視覺的最佳區(qū)域，網(wǎng)頁中重要的信息板塊都會(huì)置于該區(qū)域內(nèi)，且大多以明快的色彩或獨(dú)特的形式與周圍元素形成反差，通過色彩引導(dǎo)用戶閱讀重點(diǎn)內(nèi)容，營(yíng)造閱讀的秩序感。本例中視覺中心區(qū)域設(shè)置了高明度的藍(lán)綠色背景，打破了主色帶來的有些過分的穩(wěn)重與壓抑感；同時(shí)，因與主色保持同一色系，主色調(diào)色量增加，色彩風(fēng)格得以強(qiáng)化。圖片新聞以接近頁面整體寬度2/3的絕對(duì)優(yōu)勢(shì)置于左側(cè)，成為該區(qū)域的焦點(diǎn)；右側(cè)1/3寬度的較小板塊放置“通知公告”、“媒體聊大”、“專題新聞”等內(nèi)容，通過引人注目的橙色強(qiáng)調(diào)其地位的重要?！肮庥傲拇蟆睓谀恳蛩故镜臄z影作品色彩較為豐富，下方襯以與背景色相同的色帶來統(tǒng)一視覺感受，與導(dǎo)航條相呼應(yīng)，強(qiáng)化形式美感；標(biāo)題背景圖片的選擇也獨(dú)具匠心，暖暖的橙色天空與界面中的橙色板塊遙相呼應(yīng)，聊城大學(xué)標(biāo)志性建筑“彩虹橋”的美麗剪影詮釋了“光影聊大”的臻美意境。

（三）其他區(qū)域的色彩配置

網(wǎng)頁界面設(shè)計(jì)的基本原則之一就是信息傳遞的合理性，新聞網(wǎng)站的信息量較之一般的商業(yè)網(wǎng)站要大得多，所以建立良好的視覺流程、營(yíng)造信息的組織感與秩序感尤為重要?，F(xiàn)在幾乎所有的網(wǎng)頁界面都包括頭部、內(nèi)容區(qū)域和底部，這三部分的用色原則各不相同。如上所述，頭部用色重點(diǎn)在于確立品牌形象與色彩風(fēng)格，而內(nèi)容區(qū)域則側(cè)重強(qiáng)化信息的組織與秩序，給予訪問者更深層次的閱讀感受；底部用色往往與頭部相呼應(yīng)，建立界面整體的均衡狀態(tài)。本例中內(nèi)容區(qū)域的多數(shù)板塊采用灰底黑字，欄目標(biāo)題與主色一致，對(duì)比柔和，不易造成視覺疲勞；“聊大人物”采用橙色背景標(biāo)題引導(dǎo)閱讀，“視頻聊大”與“友情鏈接”欄目用色與頁面上部的背景色相呼應(yīng)，形成了色彩節(jié)奏與韻律的變化。頁面底部再次運(yùn)用主色與點(diǎn)綴色的對(duì)比與品牌區(qū)域形成互動(dòng)，整個(gè)界面色彩感覺更加穩(wěn)定。

格式塔心理美學(xué)認(rèn)為，整體先于部分而確定部分的性質(zhì)和意義。在這種美學(xué)思想的指導(dǎo)下，設(shè)計(jì)過程中實(shí)時(shí)把握全局、規(guī)劃界面整體用色就顯得越發(fā)重要。

四、 完善設(shè)計(jì)細(xì)節(jié)

在設(shè)計(jì)過程中，每個(gè)細(xì)節(jié)都是整體畫面中的一部分，處理好細(xì)節(jié)與細(xì)節(jié)、細(xì)節(jié)與整體之間的關(guān)系，才能真正掌握色彩設(shè)計(jì)的精髓。初稿完成后交付客戶審稿，如果前期對(duì)客戶需求把握得比較精準(zhǔn)，一般不會(huì)有太大問題，但細(xì)節(jié)方面都會(huì)得到不同程度的反饋意見。有針對(duì)性的進(jìn)行細(xì)節(jié)調(diào)整，讓作品更加完善，讓色彩表達(dá)的效果更加準(zhǔn)確。本例在設(shè)計(jì)后期針對(duì)客戶的反饋意見又進(jìn)行了一些調(diào)整，如在圖片新聞下方增加了“綜合新聞”欄目，“聊大微博”用圖片鏈接到官方新浪微博，設(shè)計(jì)被動(dòng)色，友情鏈接還是按照常規(guī)樣式置于頁面底部，等等。由于色彩是同形式和內(nèi)容共同發(fā)揮作用的，形式變動(dòng)后，為協(xié)調(diào)畫面的平衡關(guān)系，色彩也進(jìn)行了相應(yīng)調(diào)整。另外，界面設(shè)計(jì)要注重用戶體驗(yàn)，人性化設(shè)計(jì)也是不可忽略的一個(gè)方面。例如，將性質(zhì)接近的校媒板塊統(tǒng)一色調(diào)以方便用戶分類獲取信息；灰色的欄目背景減淡以拉開與文字的明度對(duì)比，創(chuàng)造更加舒適的閱讀體驗(yàn)。

五、結(jié)語

高校新聞網(wǎng)的界面設(shè)計(jì)對(duì)于樹立高校的品牌形象起著舉足輕重的作用，設(shè)計(jì)過程中要站在足夠的高度統(tǒng)領(lǐng)全局，實(shí)現(xiàn)對(duì)網(wǎng)頁界面的色彩控制。其前提是要“選好色”，關(guān)鍵是要“用好色”。“選好色”建立在良好的客戶溝通與設(shè)計(jì)分析基礎(chǔ)之上；“用好色”則要綜合考慮畫面色彩的對(duì)比與和諧，解決好色彩的主從關(guān)系、位置關(guān)系、面積大小、深淺變化、情感表達(dá)、信息傳達(dá)等問題。

[1]梁景紅．寫給大家看的色彩書②：色彩怎么選，設(shè)計(jì)怎么做[M]．北京：人民郵電出版社，2012．5．

[2]彭綱．論網(wǎng)頁的色彩[J]．裝飾，2004（02）：94．

[3]嚴(yán)晨，楊智坤．網(wǎng)頁設(shè)計(jì)中的功能性與藝術(shù)性關(guān)系研究[J]．科技與出版，2011（06）：59-60．

[4]李振華． 新聞網(wǎng)頁中的視覺識(shí)別系統(tǒng)設(shè)計(jì)[J]．新聞愛好者，2010（19）：45-46．

[5]李宏汀，王平飛．青年人與老年人網(wǎng)頁顏色偏愛研究[J]．心理科學(xué)，2012（04）：848-851．

[6]董海斌，王麗梅，孫浩章．網(wǎng)頁界面設(shè)計(jì)中的平面視覺元素[J]．包裝工程，2010（02）：89-91．

[7] 王勇，董軒志．基于用戶體驗(yàn)視角下的網(wǎng)頁視覺傳達(dá)設(shè)計(jì)研究[J]．包裝工程，2013（12）：14-17．

[8] 嚴(yán)晨．網(wǎng)頁頁面設(shè)計(jì)中的5 條基本原則[J]．科技與出版，2011（02）：60-61．

[9] 嚴(yán)晨．格式塔心理美學(xué)在網(wǎng)頁設(shè)計(jì)中的體現(xiàn)[J]．科技與出版，2012（02）：66-67．

[10] 宗世英，王以寧．培養(yǎng)視覺素養(yǎng)的網(wǎng)頁界面視覺原則[J]．現(xiàn)代遠(yuǎn)距離教育，2010（05）：68-71．

高鳳燕（1978- ），女，漢族，河北人，碩士，聊城大學(xué)傳媒技術(shù)學(xué)院數(shù)字媒體系主任、講師，研究方向：數(shù)字媒體藝術(shù)與動(dòng)畫應(yīng)用。