互動設計案例：設計要達到簡潔清晰自然易懂

文章描述：互動設計實用指南系列(4)—簡潔清晰，自然易懂.

我們生活在資訊繁雜的社會，尤其是在互連網時代，人們開始通過網路開始接觸越來越多的資訊，那麼，如何擷取/傳遞有效而準確的資訊將非常重要。在網頁互動設計中，我們提出：資訊擷取和傳達的過程必須是簡潔清晰，自然易懂。這樣使用者才能夠有效擷取這些資訊，並迅速作出決定。

1.什麼是“簡潔自然，清晰易懂”？

簡潔清晰：使資訊最簡化

“少即是多”。提倡使用最少的元素來表達最多的資訊。如果資訊繁雜，將使使用者承擔大量的資訊負擔，造成資訊過載，影響效率，不能協助使用者解決問題。

自然易懂：使用使用者語言

使用者擷取資訊的方式多樣，並且對資訊的理解程度也各有不同，所以使用使用者平時使用和理解的表達方式去傳遞資訊，更可以被使用者所接受。

2.資訊表述的種類與設計原則

在網頁互動設計中，用於傳達給使用者以有效資訊的方式有多種，其中包括：頁面配置，互動文本，介面色彩，映像與表徵圖，聲音等。

1）頁面配置

介面中的資訊布局，會直接影響使用者擷取資訊的效率。所以，一般介面的布局因功能不同考慮的側重點不同，並且會讓使用者有一種“區塊感”，方便使用者對資訊的掃描性瀏覽。

①介面布局盡量有秩序，排列整齊，防止過緊或過松，有明顯的“區塊感”。切忌混亂。

②布局要充分表現其功能性，對於每個地區所代表的功能應有所區別。如：標題區，工作區，提示/協助區等

③頁面中最重要的資訊所在的模組將是在螢幕中最明顯的位置上。並且，應該是最大的。

④布局中的資訊需要有明顯的標誌和簡單介紹，比如標題列和標題等。

⑤資訊的位置保證一致性，讓使用者可以無需重建立立對頁面資訊分布的理解。

2）互動文本

互動文本指產品介面涉及互動操作中需要使用者理解並反饋的所有的文字：包括標題、按鈕文字、連結文字，對話方塊提示、各種提示資訊、協助等。這些文字直接影響使用者在互動過程中對預期的理解，好的互動文本設計，可以提高使用者完成任務的效率。

①表述的資訊盡量口語化，不用或少用專業術語；

②表述語氣柔和、禮貌，避免使用被動語態，否定句等；

③簡潔、清楚的表達，文字較多要適當斷句，盡量避免左右滾屏，折行。

④對於同種操作的互動文本，操作行文字保持統一性。

⑤字型使用預設/標準的字型，大小以使用者的視覺清晰分辨為主；

3）介面色彩

人眼一共約能區分一千萬種顏色，所以使用者與介面中顏色的關注度非常的高，有效使用色彩區分資訊的層級，分類等，有助於使用者對資訊和操作產生關聯，有效減少使用者的記憶負擔。

①根據不同的產品使用“情境”，選擇其合適的顏色。如，管理介面經常使用藍色。

②考慮顏色對使用者的心理和文化的影響。比如，黃色代表警告，綠色代表成功等。

③避免介面中同時出現3種以上的顏色。

④顏色的對比明顯，如在深色的背景中使用淺色的文字。

⑤使用顏色指導使用者關注到到最重要的資訊。

4）映像表徵圖

相對於單純的文本，映像以及符號化的表徵圖更加符合使用者的認識習慣。往往表述一種資訊，一張圖片或者一個標識更能讓不同使用者理解與接受。適當的使用圖片與符號化的表徵圖，會讓使用者很自然的建立起認知習慣。

①表意清晰，明確，有高度的概括性與指向性，讓使用者能夠快速的聯想到對應的功能和操作。

②同類或同一緯度的資訊，在形式和色彩風格上盡量保持一致性；

③僅在突出重要訊息，使用者可能產生理解偏差的情況下使用。避免濫用。

④盡量與互動文本結合使用。

5）聲音

在網頁的互動設計中，用於聲音的資訊表述方式相對與視覺來說不是很多。一般應用於提示，提醒，協助等資訊的表述。此類資訊表述讓使用者通過聽覺擷取反饋，更加的直接與有效。

①表述清晰，語氣親切，不生硬，有禮貌。

②使用符合使用者認知習慣的聲音。如，使用敲門聲提示好友來訪資訊等。

③使用不讓使用者反感（如：恐怖，噁心，煩躁）的聲音。

④在使用者可預知的情況下發出聲音。

3.小結

對於不同的資訊表述方式，我們都要求設計師在表達資訊的時候做到簡潔清晰，自然易懂，盡量讓使用者覺得這是自然而然，而且又是清晰明了的資訊。就像小溪流水一樣自然，就像軍人命令一樣明確。這樣才會讓使用者快速，準確的完成任務。

作者：青雲