多案例淺談網站回饋式交互設計

仲介交易 SEO診斷 淘寶客 雲主機 技術大廳

出色的設計源于生活，那麼我們就從生活中說起，我們依照使用者生活的使用情景來設計一款產品，我們不需要重新培養的使用者的使用習慣，使用者可以在第一次使用你的產品來完成自己的目標，並且不需要他人的指導。 比如說蘋果公司在設計第一代iMac的過程中，喬納森及其團隊前往日本，曾向日本某糖果行業的人請教，如何在生產糖果顏色的電腦外殼的同時，保持其一貫的半透明度。

在下文中我們將聊聊回饋式交互設計對於網站設計重要性，在這之前我們有必要瞭解相關的概念：

何為回饋?

來自的維琪百科解釋：回饋又稱回饋，是現代科學技術的基本概念之一。 一般來講，控制論中的回饋概念，指將系統的輸出返回到輸入端並以某種方式改變輸入，進而影響系統功能的過程，即將輸出量通過恰當的檢測裝置返回到輸入端並與輸入量進行比較的過程。

何為交互設計

交互設計，又稱互動設計，(英文Interaction Design, 縮寫 IxD 或者 IaD),是定義、設計人造系統的行為的設計領域。 人造物，即人工製成物品，例如，軟體、行動裝置、人造環境、服務、可佩帶裝置以及系統的組織結構。 交互設計在於定義人造物的行為方式(the "interaction",即人工製品在特定場景下的反應方式)相關的介面。 交互設計師首先進行使用者研究相關領域，以及潛在使用者，設計人造物的行為，並從有用性，可用性和情感因素(usefulness, usability and emotional)等方面來評估設計品質。

結合上述概念我們綜合來說，回饋和交互意味著通過合適的回饋以及和程式之間的交互從而讓使用者時刻知道現在發生了什麼，而不僅僅是當事情出錯時顯示一個警告。 我們暫時將回饋分成2種類型：一種正面回饋，另一種為負面回饋。 對網站使用者而言回饋屬於提示資訊類型的一種，從使用者註冊帳號輸入錯誤的提示，到退出成功的提示，都是屬於回饋式交互設計的範疇。 www.pmtoo.com

回饋式交互設計如此重要

讓我們來想像生活中的幾種情景，假設你在乘坐地鐵需要換乘時，此刻如果地鐵沒有換乘的指示標識，會讓人摸不著東南西北，非常容易讓人迷惑，不知道哪條通道才是正確的換乘通道。 地鐵的建設者各換成通道上增加醒目的提示文字，很直觀清楚就讓你知道哪條通道正確的換乘路線。

(london：地鐵換成指示牌)

以網購當中的交易流程為例，在使用者提交了訂單之後，如果系統的處理時間較長，導致後續頁面載入遲緩，而這當中沒有任何回饋提示，那麼使用者很有可能會認為自己的訂單並沒有提交成功。 這種情況下，可以在頁面載入的過程中向使用者提供一些正面回饋資訊，例如告訴他們「系統正在處理訂單，請稍候」一類，這樣可以防止使用者由於不明真相而點擊後退按鈕。

(某網站購物車)

以安裝軟體為例，通常來說軟體的檔較大，安裝檔載入的時間會稍微長一點，軟體介面沒有任何回饋提示，想像一下你置身于中的情景，是不是非常容易讓人感到煩躁不安，原因是由於安裝軟體過程是由使用者主導的， 使用者安裝軟體目的是為了完成他自身目標，而此時介面無任何提示，使用者對此突然失去了控制，導致目標中斷無法完成。 此時此刻戶關閉軟體重新安裝，如果較長時間還沒有回應，使用者會選擇離開。

我們通過什麼方法來避免或徹底解決這些問題呢?我們前面提到了兩種機制，分別是「正面回饋和負面回饋。 」我們是不是可以在安裝的過程的介面增加一個安裝進度條，數值和進度同時變化，這樣不會偏離使用者把控範圍，如安裝進度條，郵箱表單帳號輸入正確時，介面回饋給使用者的對勾提示狀態，稱之為正面回饋。

(photoshop安裝安裝進度提示條)

(序號輸入正確對勾提示狀態)

通過正面回饋機制，我們可以逐漸説明使用者打消這些顧慮，説明他們建立信心，讓他們感到一切都在順利的進行著，防止使用者在做了正確的事情之後由於擔心自己操作有誤而撤銷之前的行為。 這一點，對於那些對自己在計算裝置操作能力方面缺乏信心的使用者來說尤為重要。 這類使用者，其實未必真正缺乏操作技能，只是在很多時候，由於系統沒有作出足夠的正面回饋，致使他們對自己的判斷產生了疑慮。 我們要利用這兩種機制打消大小使用者方面的顧慮。

在舉幾個負面回饋機制的案例，我們在來想像一種情景。 接上述案例，軟體安裝完成，告知你的填寫序號不符合規範，而且之前你填寫過的序號並沒有保存下來，需要重新輸入。 使用者心裡此刻會有較大的落差，因為做了無用功，其實我們完全可以使用者在輸入序號的過程中，即時匹配，如果序號錯誤，我們要要通過錯誤提示，第一時間告訴使用者你填寫的序號不正確，及時説明使用者糾正錯誤。.

通過負面回饋機制，我們也可以準確無誤説明使用者減少錯誤的操作，確保在第一時間告知使用者的操作不正確，及時改正， 已達到使用者的輸入符合網站自身運營需要。 讓使用者感受到一切都在順利的進行著，這一點，對於互聯網專家型使用者，主流型和菜鳥級使用者都尤為重要。 專家型的使用者特徵習慣拿來一個網站，通常不會看你提供的文字介紹說明使用説明，想通過網站希望儘快達成的自己目標。 比如說下載資料。

回饋式交互設計的優秀案例

正面回饋機制

使用者與資料內容內容發生交互時，都需要正面回饋，比如說註冊、登陸、驗證、微博的轉發評論等等。 特別使用者在使用支付類的產品交易時，我們要卻確保使用者輸入的資訊是符合規範的，是正確的，所以我們要對使用者實施正確的引導。

(Google 註冊介面表單的提示資訊 )

連結的移入和移出：網站產品特性不同，整個頁面的長度會在一屏顯示，在不影響視覺的前提了，我們需要對某個模組弱化或者是強化。 比如說網站頁腳，使用者點擊相對比例比較低，我們將弱化顯示，當滑鼠移入到產品模組當中，模組顏色會加深。 在這方面twitter產品是一個不錯的範例，預設頁腳灰色字體，不會喧賓奪主，當使用者滑鼠移入到這個模組當中，系統判斷使用者可能需要通過頁腳瞭解網站的相關資訊，文字區域色值改變，由灰色變成黑色。 在視覺呈現的方式上，正面回饋可以讓我們的使用者體驗更上一層樓，如虎添翼。

按鈕的提示狀態：內容為空時不可點擊的按鈕狀態和有內容的按鈕的區別。 按鈕為灰色狀態不可發表內容

(google plus目前狀態不可發佈內容)

(當有內容之後，按鈕被點亮，內容可以正常發佈)

載入的過程：下拉自動翻頁的功能，會載入較多內容，如果沒有loading.. 等字樣，告訴使用者你所看的內容正在載入，榮請稍等片刻。 使用者會感到迷惑之前，還容易導致使用者誤以為自己的操作有誤，容易撤銷之前的操作。 除了文字提示以外，Google plus 的做法在Loading的圓球增加動態的效果，告知使用者你所等待的內容正在載入。

(Google plus載入過程中圓球注水的效果)

(連結：使用者點擊過的連結狀態)

負面回饋機制

在人生的道路上，每個人都難免犯錯誤，重要的是我們如何糾正自己的錯誤。 對於網站的消費者使用者而言，為了不讓使用者繼續錯誤下去，我們説明他們糾正錯誤也同樣重要。 在上文我們舉了一個序號案例來做作為負面回饋機制的案例，為了讓讓大家理解更透徹，在這裡在舉幾個案例，加深下印象。

文字超出提示文字：例如在Twitter中發表內容時，當文字超出140字時，TWITTER在第一時間用紅色負數的數位代表你已經超出的字數，按鈕為灰色，不可點擊，希望你及時做刪減。

(Twitter文字超出提示狀態)

(豆瓣：不符合規範表單欄位提示)

回饋式交互設計常用的幾種方法：

利用視覺來提供回饋式交互設計

我們可以改變介面的視覺呈現效果和視覺元素屬性來改變回饋的表型形式。 譬如在滑鼠移入圖片增加浮動層，改變風格樣式，增加圖片圈選的效果，或者頁面的配色和大小等方式來實施正面回饋。 前面提到連結被點擊之前和被點擊之後所呈現高對比的背景色。 Google plus載入過程中注水的過程，或者使用者註冊時填寫正確時所給出的狀態提示圖示。 再比如Twitter中頁腳模組，滑鼠劃入通過改變文字顏色等方式來突出顯示

在比如一個非常典型的例子，滑鼠指標的狀態變化。 操作者(使用者)將滑鼠移動到可輸入文字的文本區域，指標會發生變化，變成I的標識，意味著可輸字。 再比如滑鼠滑鼠指標的狀態變化，當使用者將滑鼠指向一個可交互的介面元素，如連結或者是按鈕，他們會希望按鈕變成手形，連結變為手形，並增加底線，來回饋並告知使用者連結和文本區別。 如果系統在這裡並沒有做出符合或者達到符合使用者預期的回饋，那麼使用者很有可能會為此感到迷惑，甚至不解。

利用動畫效果提供回饋

其實，動畫自身就屬於視覺表現的一種方式，比如說登陸WordPress管理後臺時，使用者名和密碼錯誤，登陸框表單會表現出抖動的效果。 提示使用者輸入使用者名或密碼錯誤。 根據動畫的視覺表現是，也可以將動畫效果運用在回饋上

比如說頁面內的錨點連結跳轉，在系統預設的情況下，錨點跳轉沒有任何動畫過度效果，頁面只是很突兀的移動到錨點所指定的位置，而現如今，我們可以在很多優秀注重使用者體驗的網站中看到具有平滑滾動效果連結的跳轉。 部分網站在頁面在目標到達位置後，將錨點所指定的位置進行高亮顯示。 這種細微的改變使得整個對話模式更加符合使用者的直接。 同時可以很清晰的講交互結果呈現給使用者。

全文總結：

例如文章中第三段落提到的「回饋和交互意味著通過合適的回饋以及和程式之間的交互從而讓使用者時刻知道現在發生了什麼，而不僅僅是當事情出錯時顯示一個警告。 我們暫時將回饋分成2種類型：一種正面回饋，另一種為負面回饋。 對網站使用者而言回饋屬於提示資訊類型的一種，從使用者註冊帳號輸入錯誤的提示，到退出成功的提示，都是屬於回饋式交互設計的範疇。 」通過正面回饋和負面回饋我們可以很清晰的讓使用者知道當前正在發什麼?説明使用者打消疑慮，使使用者儘快完成自己的目標，同時也讓我們的網站更加易用，更加人性化。

文章來源：產品經理門戶 HTTP://www.pmtoo.com/ucd/2012/0808/868.html