谷曉

摘 要：伴隨著網(wǎng)絡(luò)信息的不斷膨脹，“信息爆炸”已經(jīng)成為一個時代話題，怎樣能更有效、更便捷、更有條理的進行信息傳達是急需解決的問題。交互界面作為新興的傳播媒介，集文字、圖像、色彩、影像于一體，具有豐富的媒體表現(xiàn)性與互動性?；诮换ソ缑娴奶攸c，其傳達的信息主要是視覺信息，因此在對交互界面設(shè)計時，其主要設(shè)計元素和設(shè)計原則都可以按照視覺傳達的一般規(guī)律執(zhí)行，圍繞“信息傳達”進行，優(yōu)化用戶體驗。

關(guān)鍵詞：界面；版式；設(shè)計；信息傳達

中圖分類號：TP393.092 文獻標識碼：A 文章編號：1005-5312（2016）20-0055-02

人從出生開始就利用感覺器官、想象、情感和知識與周邊的產(chǎn)品和環(huán)境進行某種形式的交流和對話，人的生活是建立在交流基礎(chǔ)上的生活，沒有交流，信息就會阻斷，發(fā)展進程就會受阻，所以當人類快速發(fā)展并聯(lián)合起來興建要通往天堂的巴別塔時，上帝為了阻礙人類計劃，發(fā)明了不同的語言，劃分出不同的種族，使人與人之間不能相互溝通，導致人類計劃失敗，自此各奔東西。語言和文字是最基礎(chǔ)的交流方式，信息交流的根本是對話，而對話的原則要求清晰、準確，對話的過程檢驗著對信息的交流和理解能力。

中國發(fā)明了印刷和造紙，書籍被印刷并流通，改變了信息只掌握在少數(shù)人手里的局面，并促進了文化的交流。德國人古登堡發(fā)明了古登堡印刷機，開創(chuàng)了一個新的時代，書籍被大量印制，終結(jié)了歐洲中世紀“黑暗時代”教會對文化的壟斷。當代，隨著網(wǎng)絡(luò)技術(shù)、移動智能終端的發(fā)展，信息的交流方式也發(fā)生了改變，書籍和紙張所扮演的角色已逐漸被交互媒介所取代，機器、界面變?yōu)樾碌膫鬟f信息、交流情感的新媒介，而在此基礎(chǔ)上，媒介又是感件，它直接作用于感覺，所以交互設(shè)計的實質(zhì)是創(chuàng)建新的用戶體驗，建立人與機器間的交互聯(lián)系，增強和擴充人們的工作、通信及交互的方式或空間。

在過去交互設(shè)計一般由程序員來做，可是程序員雖然擅長寫編碼和程序，但卻不善于和用戶溝通，可是在人與界面的交互體驗上，無論是用戶與界面還是用戶的界面，其最終的落腳點都在“視覺”上，是視覺“看見”后的執(zhí)行，因而交互界面設(shè)計不僅要美觀，還要有一定的設(shè)計理念和方法作為支撐，使界面版面中的各個元素有條理地展示在用戶面前，創(chuàng)造出一次次輕松愉快的交互體驗經(jīng)歷。

一、交互界面版式設(shè)計的方法

早期的人機交互頁面設(shè)計是由字符組成的。由字符組成的頁面技術(shù)要求相對較低，易于實現(xiàn)，并且有較好的穩(wěn)定性，可以起到傳達基本信息的作用，但是表現(xiàn)形式單一、枯燥，缺乏藝術(shù)性和趣味性，而隨著計算機網(wǎng)絡(luò)技術(shù)的不斷發(fā)展以及人們對精神世界的感知，對交互界面設(shè)計的要求越來越高，于是出現(xiàn)了由圖像、字符、色彩等多元素組合的頁面，內(nèi)容更具設(shè)計感、新鮮感、趣味感，為了更好地吸引用戶，頁面設(shè)計所包含的東西也越來越多，涉及到多個方面（圖1、圖2），從視覺信息傳達的來說，界面版式設(shè)計可以參考以下幾種方法。

（一）減掉“花邊”，簡潔呈現(xiàn)

中國畫有這樣一種描述“計白當黑”，就是說空著的地方和上墨色的地方都是畫作整體的組成部分，當中的“白”不僅是一種顏色，也是一種設(shè)計理念，是一種概念和支撐美學的資源，所以合理利用留白是非常重要的，也是提升審美性和藝術(shù)性的途徑之一。在頁面的設(shè)計上，“加”的多是復雜，“減”的多是簡單，而“加減”恰當，頁面才會簡潔親切。在看多了繁瑣的設(shè)計后，人往往喜歡回歸簡潔，去追求精致優(yōu)雅的感覺，而最簡單有效的方法就是去除頁面中不必要的裝飾，去掉“大花邊”，用理性的邏輯思維去思考物體的形狀和顏色，通過合理信息構(gòu)架簡化界面設(shè)計，用簡潔的設(shè)計體現(xiàn)頁面的特色，通過有限的頁面元素對比來強化信息的傳遞功能。

（二）精化細節(jié)，把控成敗

“細節(jié)決定成敗”這句名言在頁面設(shè)計中是亙古不變的真理，如果一個頁面沒有得到用戶的認可，但是整體上又沒找出問題，這個時候就是細節(jié)問題，頁面的細節(jié)到位能充分地體現(xiàn)出頁面的品質(zhì)，一個優(yōu)秀的作品與卓越的作品相比差距就在于對細節(jié)的把控。

1.元素的對齊。元素位置對齊是實現(xiàn)頁面元素整齊劃一最常用的版式處理方法。利用輔助線使應(yīng)該對齊的內(nèi)容嚴格對齊，對于特殊版面，要靠經(jīng)驗進行微調(diào)，做到視覺上的對齊，而對于字號不同的文字進行對齊操作時，應(yīng)該先把文字輪廓化處理，再進行對齊操作。

2.像素的精確。在界面設(shè)計的時候，會先在PS里面開始，調(diào)整好后在Flash里輸出，最后前端會提取Flash里的文件信息上線，但是在Flash里面，坐標是帶小數(shù)點的，而PS作圖時像素沒有小數(shù)點，所以很多的圖片、按鈕和圖標的邊緣會出現(xiàn)1像素的虛化，讓其外形略顯模糊、粗糙，可根據(jù)情況進行刪減，讓數(shù)據(jù)變成整數(shù)，讓邊緣顯得銳化和精致。

二、兩個一致，四個統(tǒng)一

（一）光源的一致性

有光就有影，現(xiàn)實生活中時刻存在光照和陰影，物體通過光影的反射形成形象。光照不僅能呈現(xiàn)物體的色彩和形體，光照的強弱、方位也會形成不同的情感反應(yīng)，而視覺設(shè)計時需要靠光影區(qū)分材質(zhì)、尺度和透視，若想光影設(shè)計的更自然、準確和生動，就要在設(shè)計時統(tǒng)一界面的光源，如圖3所示，白色的文字框都采用了向下的淺灰色投影來表現(xiàn)兩端向上翹起的效果，這樣整體頁面的邏輯性較強，讓用戶比較舒適。

（二）圖標面積的一致性

在設(shè)計數(shù)字組合時，由于其結(jié)構(gòu)關(guān)系，有的數(shù)字要經(jīng)過特殊的調(diào)整，例如：數(shù)字“1”的從視覺上講最窄，而 “4”和“7”與其它數(shù)字相比而言平衡感和飽和度上稍有不足，因而在設(shè)計時要特殊化對待，以便達到視覺上的平衡，同樣，在設(shè)計圖標家族時也要考慮圖標的特殊化問題，最好的方法是：在設(shè)計的過程中退到離屏幕較遠的地方進行檢查，看看哪些圖標視覺感受會特別輕或者特別重，然后再去調(diào)整圖標的尺寸，做到圖標面積在視覺上的一致性。

（三）整體風格的統(tǒng)一性

交互頁面內(nèi)的設(shè)計元素要服務(wù)于主題，在設(shè)計時要讓頁面的主題內(nèi)容作為各個元素（圖像、文字、色彩等）排列組合的依據(jù)，同時要保證視覺語言的統(tǒng)一與明確，具體是指頁面內(nèi)的各元素能相互映襯、相互關(guān)聯(lián)、相互加強、完美契合，如果頁面里有個元素“開小差”，或者一個細節(jié)被忽略，它對頁面內(nèi)其它元素來說就是“不合群的”，就會削弱視覺語言的明確性，破壞頁面風格的統(tǒng)一性，如圖4所示，該網(wǎng)站的主題包括兩個基本內(nèi)涵，首先要展示商品，其次，要展示產(chǎn)品簡約的設(shè)計理念，因而，頁面中的任何元素都在恪盡職守地服務(wù)于該主題的呈現(xiàn)，與此同時也賦予了頁面整體風格的統(tǒng)一性。

（四）色彩搭配的統(tǒng)一性

弗洛伊德的精神分析學理論指出人對色彩的反應(yīng)是與生命最基本的潛意識直接相關(guān)聯(lián)的，是一種與生俱來的本能反應(yīng)。人的視覺器官在觀察物體最初的20秒內(nèi)，色彩的刺激占80%，形態(tài)占20%，5分鐘后才各占50%。將豐富的色彩用于界面設(shè)計中是創(chuàng)建吸引力的重要手段，但是若將顏色隨意堆砌，會因色彩的混亂引起用戶的厭煩，因此，要讓色彩的變化與對比協(xié)調(diào)、有序、統(tǒng)一。設(shè)計中，首先會綜合運用到以下幾個方法：使用同類色或鄰近色、協(xié)調(diào)畫面中的補色對比、用無彩色調(diào)和、統(tǒng)一消色處理。其次要靈活運用畫面各個元素（如文字、圖像、圖形、邊框、按鈕等）來實現(xiàn)對豐富色彩的統(tǒng)一協(xié)調(diào)處理，通過對各元素的顏色安排來實現(xiàn)對整體色彩對比的控制，從而統(tǒng)一色彩搭配。

（五）頁面結(jié)構(gòu)的統(tǒng)一性

頁面結(jié)構(gòu)是頁面的骨架，對于視覺設(shè)計來說，基于結(jié)構(gòu)性的頁面布局不僅能為用戶帶來審美性的視覺體驗，也有助于降低用戶為獲取信息而付出的認知成本，所以頁面的欄目內(nèi)頁和內(nèi)容頁要和首頁的結(jié)構(gòu)樣式保持一致，同時也要求相應(yīng)的頁面版式設(shè)計風格保持一致。成功的視覺結(jié)構(gòu)設(shè)計可以讓用戶在使用頁面時，首先被首要的內(nèi)容吸引住，然后再看到次要的內(nèi)容，最后才注意到更次要的內(nèi)容。如果不能對頁面進行有效的結(jié)構(gòu)設(shè)計，則會讓用戶難以找到重點、眼花繚亂，讓用戶對該頁面產(chǎn)生負面的審美價值判斷，嚴重時會失去目標用戶。在設(shè)計中，可以基于文字屬性，為文字內(nèi)容創(chuàng)建視覺秩序，具體方法為文字的字號對比、字體對比、顏色對比、位置對比、綜合性對比等；也可以運用有吸引力的視覺元素創(chuàng)建視覺秩序，比如選用精彩的照片元素和創(chuàng)意設(shè)計元素等。

（六）字體搭配的統(tǒng)一性

從圖畫到象形文字再到文字的產(chǎn)生，其實質(zhì)是一個抽象化的過程，當抽象化進程把所指的意義和能指的事物分離后，交流和傳播才有了更大的發(fā)展空間，媒介才有了成長和發(fā)展的可能性。在頁面版式設(shè)計中，雖然圖形符號更直接、更生動、更形象，更容易引發(fā)用戶的情感，但由于其缺乏明確的“邏輯判斷結(jié)構(gòu)”，所以在表達意義上具有模糊性和不確定性，而文字是按照語法和邏輯規(guī)則進行組織、可以準確描述事物關(guān)系和性質(zhì)的符號，它比圖形更準確、深刻、能夠詳細地傳達信息，所以在版面設(shè)計時常常需要文字的說明闡述，文字與圖片相互補充，共同為交互界面信息傳達服務(wù)。但是，在交互界面設(shè)計時，字體選用種類不宜過多，最好控制在2-3種左右，不同的功能內(nèi)容使用不同的字體進行區(qū)分，形同的功能和內(nèi)容使用相同的字體進行合并，否則會讓使用者感覺混亂，同時，字體搭配的統(tǒng)一性還體現(xiàn)在字距、行距、詞距、文字排列樣式的一致。

三、結(jié)語

在信息化高度發(fā)達的當代，網(wǎng)絡(luò)已逐步發(fā)展成為一個形式多樣、內(nèi)容龐大的交互媒體，交互讓人、機器和界面間產(chǎn)生一系列的對話，在對話的過程中完成信息的傳遞?；陧撁娼缑娴奶卣?，其傳達的信息最主要的是視覺信息，因此在設(shè)計時要遵循視覺傳達版式設(shè)計的一般規(guī)律，把握界面版式設(shè)計的方法；同時，考慮交互設(shè)計未來發(fā)展，應(yīng)加入其它通感體驗，善用戶生理、心理體驗，使信息的傳達更有效、更有力、更明確。

參考文獻：

[1]史金玉，鄭童.UI點擊愉悅：情感體驗介入的界面編輯設(shè)計[M].北京：人民美術(shù)出版社，2014.

[2]賈京鵬.界面設(shè)計[M].北京：中國青年出版社，2015.

[3]楊光.讓頁面更上檔次網(wǎng)頁設(shè)計細節(jié)大總結(jié)[J].網(wǎng)事，2014（03）.