互聯網產品的交互設計方法

　　目前交互設計在互聯網產品中的應用狀況

　　“交互設計可以提高產品可用性。”在國內的互聯網行業中，建立在這個認識基礎上，交互設計得到了普遍的接受。“產品設計開始的時候應該先交互啊~~”“你這個項目沒交互過啊~~”這類的說法越來越多當然是好的信息，但是，交互設計工作到底應該怎麼做才能提高產品可用性?通常的互聯網產品研發中，交互設計工作是處於沒有方法的狀況。

　　理解交互設計

　　交互設計是一個設計工作。

　　交互設計是一門技術。

　　交互設計在目前階段的主要使命是提高產品可用性。

　　通過對界面和操作行為的設計提高產品可用性。

　　互聯網產品的特點

　　1.變化快。

　　2.質量低。

　　3.功能操作與信息傳達並重。

　　4.高速創新從而帶來的無標准。

　　那麼，互聯網產品的交互設計應該怎麼做?

　　互聯網產品的交互設計方法分享

　　經過長期的摸索、體會騰訊互聯網產品，我們總結出了幾個較為有效的設計方法：

　　方法一. 自然語言法。設計交互細節的方法。

　　方法二. 結構圖法。設計產品信息構架的方法。

　　方法三. 任務走查法。對現有產品進行優化的方法，全面普查產品，包括對交互細節和信息構架。

　　這三個方法的思路，是基於對交互設計工作內容如下的分類：

　　1. 信息構架

　　2. 交互細節

　　但，嚴格來說，這樣的理解是不對的。交互設計工作原本就是“交互細節”工作。另外有信息構架師來解決信息構架的問題。然而，上面提到了互聯網產品快的特點，更多的研發步驟顯然更容易將研發周期拖的更長，把信息構架工作和交互細節合並起來，減少一個環節，更適應互聯網產品的研發特點。

　　“為什麼不把信息構架工作交給產品經理來做呢?”如果說交互設計工作的核心是表達(這個觀念，最後還會提到)，那麼，信息構架和交互細節都是表達的重要手段。信息構架不清楚的產品，怎麼談得到表達的清楚、明確呢。所以，交互設計的工作包含了兩部分：信息構架和交互細節。

　　那麼，下面我們就開始具體介紹這三個方法：

　　方法一. 自然語言法

　　使用自然的語言來表達頁面信息。

　　這是一個設計界面交互細節的方法。

　　界面表達的要求是：清晰，明確，簡潔，得體。

　　想象著用面對面的交流來傳達信息，再將面對面的傳達變為書面表達，再用界面語言翻譯書面表達。

　　除了思路，我們還需要必備的原則、常用的表達方式和具體操作步驟。

　　頁面表達原則：

　　1. 更少的信息量更好。

　　2. 結構化更易於理解。

　　3. 信息的表達應該清楚、明確、直接。

　　4. 操作可識別。

　　5. 操作前，結果可預知。

　　6. 操作時，操作有反饋。

　　7. 操作後，操作可撤銷。

　　8. 讓用戶知道身處何地。

　　9. 避免內容看上去象廣告。

　　10. 不提供多余的功能。

　　11. 相同的功能，在不同的頁面中應保持一致性。

　　12. 措辭統一。

　　常用的頁面表達方式：

　　1. 從左到右，從上到下。

　　2. 大字更突出。

　　3. 圖形更吸引人。

　　4. 動畫會被誤認為是廣告。

　　5. 內容邏輯：並列關系;從屬關系。

　　6.多項並列的信息用

　　7.不同的排序方式VS篩選內容

　　具體操作

　　第一步. 概括待表達的信息

　　第二步. 將概括好的信息排序

　　第三步. 使用界面語言翻譯

　　實例：中信銀行卡

　　第一步. 概括信息：

　　描述應該是概括的，盡可能簡短。例如：

　　● 您選擇了回郵方式辦卡，概括解釋這個辦卡方式。

　　● 接下來您應該 下載申請表

　　● 回郵辦卡的全過程是這樣的…

　　● 一系列注意事項。

　　第二步. 排序：

　　就是上面的順序，沒有變化。

　　有些時候排序會遇到困難，需要借助界面語言才能准確反應表達順序。這正是界面設計的價值，它可以勝任一些單純適用文字表達表達不好的情況。下面的黃鑽續費案例中也許你就會遇到類似的問題。遇到這種問題時，記錄下排序遇到的問題即可。在翻譯過程中問題可能就解決掉了。

　　第三步. 翻譯：

　　與之前界面對比：

　　● 開頭幾句信息順序需要整理，使上下文關系更清晰。

　　● 對過程的描述可簡化。

　　● “說明”應更結構化。

　　這裡所說的“與對比界面之前”只是因為之前的需求文檔中有相對具象的頁面原型，而這並不意味著這裡的工作是“優化頁面原型”。需求的傳達總會有一定的形式，也許是簡單的頁面原型，也許是一份需求文檔。甚至可以更簡單。有時相對具象化的信息記錄或之前的頁面反而會是干擾設計者以明確的思路來設計，尤其需要小心。

　　我們有了一種成型的方法，但這並不意味著我們設計出的頁面就只有一個樣子了。實際上不同的設計者使用這個方法會設計出不同的頁面。下面這是另外一位設計師給出的思路，或許這是更好的方案：

　　1. 您選擇了回郵方式辦卡，概括解釋這個辦卡方式。

　　2. 第一步. 下載、填寫申請表並回郵給中信

　　3. 第二步……………………..

　　4. 第四步……………………..

　　這樣的信息概括和排序頁面表現將是什麼樣子?你可以自己試著畫畫~~

　　練習：QQ空間黃鑽催費頁面

　　說明：

　　黃鑽貴族是QQ空間中的VIP用戶，黃鑽貴族用戶可以免費適用空間中的裝扮，另外還可以享受到日志信紙、超大容量相冊等諸多特權。

　　當用戶的黃鑽貴族身份即將到期的時候，從QQ聊天主面板上的“我的錢包”提示：“錢包”閃動，點擊後用一個490*300px的小窗口告知用戶續費的詳情。

　　左側圖片在實際頁面中是一個flash動畫，若干張圖片切換，顯示黃鑽用戶可以裝扮出的更好的空間效果。

　　右側的續費方式希望在所有的續費方式中選擇出兩、三種比較常用的方式，直接顯示出來(就是現在頁面上的“家庭、網吧”兩種方式)，方便用戶。同時提供“支付中心”鏈接(http://paycenter.qq.com/cgi-bin/showopenservice.cgi?service_type=home)，讓用戶可以在全部續費方式中選擇。

　　請使用上面介紹的自然語言法重新設計這個界面，讓信息表達的更高效、清晰、明確。

　　參考方案

　　需要表達的信息：

　　● 某某某，您的黃鑽要過期了。

　　● 黃鑽貴族很棒滴~~

　　● 現在續費黃鑽還有額外的