論高校新聞網界面設計中的色彩控制

高鳳燕 （聊城大學 傳媒技術學院 252059）

論高校新聞網界面設計中的色彩控制

高鳳燕 （聊城大學 傳媒技術學院 252059）

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

高校；新聞網；界面設計；網頁設計；色彩

所謂的色彩控制，就是從整體統領全局，協調好色彩之間的關系、色彩與其他設計元素之間的關系、色彩與信息傳達之間的關系，做好色彩搭配。本文以聊城大學新聞網的界面設計為例，探究高校新聞網界面設計中的色彩控制問題。

一、 設計背景

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

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

第二，頭條設置獨立、醒目；

第三，導航清晰，便于用戶快速定位。

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

二、 選擇色彩組合

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

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

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

色彩具有獨特的內部互動性，增加或刪除一種顏色，都會影響到整個畫面的效果。只有從一開始就對色彩進行系統地規(guī)劃和設計，才能有效維護色彩之間的關聯，確保信息傳遞的合理性。高校新聞網界面色彩設計的總原則是“總體協調，局部對比”，同時還要符合國際互聯網平臺的色彩標準，即網頁安全色。

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

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

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

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

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

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

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

四、 完善設計細節(jié)

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

五、結語

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

[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] 宗世英，王以寧．培養(yǎng)視覺素養(yǎng)的網頁界面視覺原則[J]．現代遠距離教育，2010（05）：68-71．

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