基于視覺信息傳達的交互界面設計

谷曉

摘 要：伴隨著網絡信息的不斷膨脹，“信息爆炸”已經成為一個時代話題，怎樣能更有效、更便捷、更有條理的進行信息傳達是急需解決的問題。交互界面作為新興的傳播媒介，集文字、圖像、色彩、影像于一體，具有豐富的媒體表現性與互動性。基于交互界面的特點，其傳達的信息主要是視覺信息，因此在對交互界面設計時，其主要設計元素和設計原則都可以按照視覺傳達的一般規律執行，圍繞“信息傳達”進行，優化用戶體驗。

關鍵詞：界面；版式；設計；信息傳達

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

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

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

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

一、交互界面版式設計的方法

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

（一）減掉“花邊”，簡潔呈現

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

（二）精化細節，把控成敗

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

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

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

二、兩個一致，四個統一

（一）光源的一致性

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

（二）圖標面積的一致性

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

（三）整體風格的統一性

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

（四）色彩搭配的統一性

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

（五）頁面結構的統一性

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

（六）字體搭配的統一性

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

三、結語

在信息化高度發達的當代，網絡已逐步發展成為一個形式多樣、內容龐大的交互媒體，交互讓人、機器和界面間產生一系列的對話，在對話的過程中完成信息的傳遞。基于頁面界面的特征，其傳達的信息最主要的是視覺信息，因此在設計時要遵循視覺傳達版式設計的一般規律，把握界面版式設計的方法；同時，考慮交互設計未來發展，應加入其它通感體驗，善用戶生理、心理體驗，使信息的傳達更有效、更有力、更明確。

參考文獻：

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

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

[3]楊光.讓頁面更上檔次網頁設計細節大總結[J].網事，2014（03）.