網(wǎng)頁版微博的模塊色彩研究

摘 要：目前網(wǎng)頁版微博的界面多以模塊化的布局形式為主，界面的色彩和風(fēng)格的設(shè)計(jì)是微博發(fā)揮良好的交流作用的元素之一。文章從網(wǎng)頁版微博的組合模塊入手，分析目前微博的色彩及色彩在模塊上發(fā)揮的功能，并發(fā)現(xiàn)色彩使微博發(fā)揮良好交流作用的一些使用方法。

關(guān)鍵詞：微博；色彩；界面設(shè)計(jì)

1 網(wǎng)頁版微博介紹

1.1 關(guān)于微博

微博于2009年底在國內(nèi)開始興起，作為一個基于用戶關(guān)系的信息分享、傳播以及獲取的平臺，蘊(yùn)含著大量的信息量。由于微博內(nèi)容碎片化、海量化、層級性等內(nèi)容呈現(xiàn)方式，使用戶清晰的獲取信息是微博視覺傳達(dá)的關(guān)鍵。微博作為當(dāng)前最流行的即時網(wǎng)絡(luò)社群傳播工具，普及度甚廣。

1.2 網(wǎng)頁版微博的色彩

網(wǎng)頁版微博的界面視覺設(shè)計(jì)直接決定著網(wǎng)頁與用戶能否成功對話，色彩無疑是設(shè)計(jì)中極為重要的一個方面。當(dāng)用戶打開一個網(wǎng)頁時，留下第一印象的并不是它的內(nèi)容或版式布局，而是網(wǎng)頁的色彩。色彩具有容易被人注視和感知的特征，并能夠持久地給訪問者留下深刻的印象。色彩作為網(wǎng)頁版微博界面的重要元素之一，對微博如何全面展現(xiàn)用戶風(fēng)格和發(fā)揮傳播功能發(fā)揮著巨大的作用，基于網(wǎng)頁版微博的界面按模塊化功能劃分，文章著重針對界面模塊的色彩功能進(jìn)行分析，研究色彩在網(wǎng)頁版微博中的作用和運(yùn)用規(guī)律。

2 網(wǎng)頁版微博的界面構(gòu)成及作用

網(wǎng)頁版微博的界面布局形式有兩種，一種是傳統(tǒng)的兩欄式（如圖1），也是微博最初出現(xiàn)時的界面布局形式，一種是目前的新版三欄式界面（如圖2）。二欄式微博總寬為800px，有一級導(dǎo)航和二級導(dǎo)航、發(fā)布框、內(nèi)容區(qū)、個人簡介區(qū)等。目前最流行用戶最多的微博界面是三欄式布局，增加了左側(cè)導(dǎo)航和右側(cè)欄各種引導(dǎo)和公告，三欄式界面微博的頁面信息量比二欄式界面的微博更大。微博界面中的主要模塊是頂部總導(dǎo)航欄、左側(cè)分類和應(yīng)用導(dǎo)航欄、發(fā)布欄、內(nèi)容區(qū)、右側(cè)個人簡介和活動推廣區(qū)。

3 網(wǎng)頁版微博界面模塊的色彩分析

3.1 總導(dǎo)航欄色彩分析

總導(dǎo)航欄——總導(dǎo)航欄位于網(wǎng)頁版微博界面的頂部，模塊較小，并且隨著頁面上拉下滑都保持位置不變。現(xiàn)有的網(wǎng)頁版微博產(chǎn)品的導(dǎo)航欄色彩都趨向于透明，映襯出用戶個性設(shè)置的背景顏色，但總導(dǎo)航欄底部的框線會采用明度較高的色彩以顯示總導(dǎo)航欄與其他模塊的區(qū)分。總導(dǎo)航欄上除門戶網(wǎng)站的logo的色彩外，字符和功能圖標(biāo)的色彩都運(yùn)用簡潔素雅的純色，一般字符都為白色。當(dāng)總導(dǎo)航欄有消息提醒時，提醒標(biāo)志的顏色一般是明度、純度都較高的顏色，如紅色、橙色等比較醒目的顏色。

3.2 左側(cè)分類和應(yīng)用導(dǎo)航欄色彩分析

左側(cè)分類和應(yīng)用導(dǎo)航欄——位于主界面左側(cè)，色調(diào)趨向半透明化，半映襯出背景顏色。相對于總導(dǎo)航欄的功能導(dǎo)航，左側(cè)分類和應(yīng)用導(dǎo)航欄的功能導(dǎo)航主要是微博互動的一些功能圖標(biāo)，便于用戶交流、轉(zhuǎn)發(fā)、評論等。圖標(biāo)和字體的顏色以黑白灰變換為主，這樣不論用戶設(shè)置的背景是任何純度、明度的顏色都可以保持圖標(biāo)的辨識度。該模塊中的應(yīng)用導(dǎo)航部分顯示的應(yīng)用圖標(biāo)主要是明快、活潑的亮度較高的顏色，這在圖標(biāo)較小的情況下也能辨識度高。

3.3 發(fā)布欄和內(nèi)容區(qū)色彩分析

發(fā)布欄和內(nèi)容區(qū)——該模塊是整個網(wǎng)頁版微博界面的主要區(qū)域，需要展示給用戶大量的文字和圖片，是微博發(fā)揮良好的社交功能的關(guān)鍵。當(dāng)用戶設(shè)置背景是純度較高的暖色調(diào)或色彩絢麗時該模塊并不趨向于透明化，色彩不隨背景顏色的變化而改變，以白色為主；當(dāng)用戶設(shè)置的背景色彩是冷色調(diào)，如黑色、深藍(lán)色時，該模塊會在調(diào)整背景色的透明度或者飽和度的基礎(chǔ)上，產(chǎn)生新的色彩，這樣既有利于整體界面看起來色彩統(tǒng)一，有層次感。該模塊中的字符顏色會隨著背景顏色的變化而變化。被轉(zhuǎn)發(fā)的微博內(nèi)容為了顯示來自于其他用戶的區(qū)別，對話框的顏色會與該模塊的主色調(diào)稍微區(qū)分開來，但也是在背景色的基礎(chǔ)上調(diào)整透明度或者飽和度。

3.4 個人主頁界面色彩分析

個人主頁界面——個人主頁主要顯示的是用戶介紹和用戶本人發(fā)布的微博，用戶可以個性化設(shè)置頁面頂部的“封面圖片”，主界面就是用戶個人的微博內(nèi)容，整個主界面是一體的，也是以白色為主或在背景色的基礎(chǔ)上變換出相搭配的色彩。字符顏色隨著背景顏色的變化而變化。

4 網(wǎng)頁版微博界面模塊色彩的運(yùn)用規(guī)律

在功能性方面：微博界面中的字符內(nèi)容的層次性和狀態(tài)都是通過色彩的變化來表現(xiàn)出來的；彈出的提示信息采用醒目的顏色；導(dǎo)航欄的功能圖標(biāo)按鍵以黑白灰為主，在背景色可變的情況下增加圖標(biāo)的辨識度，而由于發(fā)布欄一直保持白色為主不變，發(fā)布欄下面的發(fā)布信息相關(guān)的功能圖標(biāo)則是多采用純度、明度較高的暖色，給用戶輕松明快的感受。在整體性方面：導(dǎo)航欄的顏色都是透明色；主要界面色彩在背景主色彩的透明度或飽和度的基礎(chǔ)上與背景色保持和諧一致，突出整個界面色彩的統(tǒng)一性和對比性；主要模塊的字符的顏色也隨著背景顏色的變化而變化；模塊與模塊之間采用高亮度顏色的邊框線條分割；整體上網(wǎng)頁版微博界面的色彩運(yùn)用都會給用戶一種趨向于透明、映襯背景色的感覺，使各個模塊的風(fēng)格相統(tǒng)一。整個網(wǎng)頁版微博界面的色彩運(yùn)用的規(guī)律就是變化中保持統(tǒng)一和諧，在色彩不變的模塊和色彩可改變的內(nèi)容中尋找調(diào)和，運(yùn)用無彩色系作為不變的色彩的同時通過色彩在飽和度、透明度上略微的變化來增加界面的層次感和用戶對微博的個性化需求。

參考文獻(xiàn)

[1]饒簡元.網(wǎng)頁的色彩認(rèn)知與構(gòu)建[J].藝術(shù)評論，2011（6）：38.

[2]王君.網(wǎng)頁設(shè)計(jì)在平面設(shè)計(jì)中的運(yùn)用[J].包裝工程，2012，33（16）：140-142.

[3]劉娟.門戶網(wǎng)站微博的傳播理念與傳播形態(tài)比較[J].調(diào)查與研究，2011（11）：10.

[4]王犖思.信息設(shè)計(jì)的視覺語言淺析[J].裝飾，2005（4）：42-43.

[5]Ben Shneiderman，Addison Wesley/Pearson.用戶界面設(shè)計(jì)-有效的人機(jī)交互策略[M].北京：電子工業(yè)出版社，2004.

[6]林毅惠.設(shè)計(jì)美學(xué)在網(wǎng)頁制作實(shí)踐中的研究[J].福建電腦，2011，27（3）：46-47.

[7]危麗麗，過宏雷.從用戶體驗(yàn)角度談網(wǎng)頁設(shè)計(jì)中的色彩元素[J].大眾文藝，2012（6）.

[8]羅仕鑒.人機(jī)界面設(shè)計(jì)[M].北京：機(jī)械工業(yè)出版，2004.

[9]http：//baike.baidu.com/view/1567099.htm[DB].