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

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

　　理解交互設計

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

　　交互設計是一門技術。

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

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

　　互聯網產品的特點

　　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)，讓用戶可以在全部續費方式中選擇。

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

　　參考方案

　　需要表達的信息：

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

　　● 黃鉆貴族很棒滴~~

　　● 現在續費黃鉆還有額外的優惠。

　　● 續費方式…

　　更好的信息：

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

　　● 您要是不再是黃鉆了，就有XXXXX損失啦~~

　　● 現在續費黃鉆還有額外的優惠。

　　● 續費方式…

　　總結“自然語言法”

　　自然語言法的基本思路是把界面表達轉化為自然的人與人交流。人與人的交流是我們每天都會發生的，相對更容易，這個技能也更容易提高。

　　這里涉及到的兩個例子都是比較偏向于信息表達的，對于操作較多的界面，這個方法仍舊適用。

　　方法二. 結構圖法

　　這個方法的思路：拋開頁面細節只考慮信息的組織形式。拋開頁面細節，是的，就是上面討論的那些具體的頁面細節，只考慮信息的整體構架，而頁面的細節留在確定了信息構架之后，用自然語言法來解決。

　　信息構架的原則：

　　1. 一個頁面一個主要內容。

　　2. 個人信息&公共信息。

　　3. 網頁基本內容有兩種：列表和文檔

　　4. 更少的信息更好

　　5. 一個用戶自己生成內容的document頁，有兩個狀態：瀏覽狀態&編輯狀態。

　　6. 信息樹應該盡量窄而淺，并且盡量保持平衡。

　　7. 與現實生活經驗相符

　　 ● 頁面在網站中需要有一個固定的位置。

　　 ● 同等級的內容應表現成并列的樣子。

　　……

　　信息構架的常見模型：

　　1. 列表+詳情頁+列表聚合頁

　　2. Wizard模式。第一步->第二步->第三步…

　　3. 主頁+若干個“臨時”頁面。例如：google帳戶

　　具體操作

　　第一步. 明確描述全部內容。總結歸納產品所需要表達的所有信息。

　　第二步. 畫樹狀圖。

　　第三步. 用紙畫各頁草圖。草圖中需要包含的關鍵元素：頁面標題、導航、重要的鏈接和按鈕。

　　第四步. 模擬演示網頁操作行為。

　　實例：黃鉆等級

　　第一步. 總結歸納內容：

　　● 用戶個人的的黃鉆等級信息

　　● 等級介紹

　　● 黃鉆功能特權介紹

　　● 黃鉆貴族可免費領取的

　　道具

　　● 黃鉆活動

　　第二步. 樹狀圖：

　　如果單純的按照上面概括的信息羅列，則可以規劃出一個黃鉆貴族的網站，樹狀圖如下：

　　然而，信息構架的設計往往要建立在對現有產品深刻的理解基礎上。

　　Qzone的現狀：一個社區，成千上萬個個人空間。如何在現有的基礎上設計新的黃鉆等級?

　　我們的方案是這樣的：

　　第三步. 草圖：

　　這里需要強調：紙原型中應包括頁面標題、模塊的標題、導航、重要的鏈接和按鈕，而不只是頁面最頂端的導航。有了重要的鏈接和按鈕才能清楚的演示出各個頁面之間跳轉的關系。

　　最后，第四步. 手握原型，演示頁面間的跳轉，確保整個流程的順暢。

　　練習：QQ空間日志、心情、私密記事本

　　參考方案

　　總結歸納內容：

　　1. 日志

　　2. 心情

　　3. 私密記事本

　　樹狀圖：

　　方案一：

　　● 主頁

　　● “大日志”

　　■ 日志

　　■ 心情

　　■ 私密記事本

　　● 音樂盒

　　● 留言板

　　● 相冊

　　……

　　方案二：

　　● 主頁

　　● 日志

　　● 心情

　　● 私密記事本

　　● 音樂盒

　　● 留言板

　　● 相冊

　　…

　　根據上面兩種不同的樹狀圖方案，接下來的頁面草圖也會是不同的，你可是試著畫畫…

　　方法三. 任務走查法

　　這是一種優化現有產品的方法。成本低，見效快。對產品整體上影響小。

　　以用戶任務為線索，以可用性準則為依據。是的，這個說話很好記，類似“以事實為依據，以法律為準繩。”

　　“用戶任務”是指用戶實際使用這個產品時需要完成的任務。這個方法中，需要操作者依據主觀判斷制定用戶任務，而不是通過用戶研究。這雖然有可能 造成更大的誤差，但同時節約了時間成本。實際工作中，參與這個產品設計的同學坐在一起討論一下，通常是可以比較準確的描述出用戶任務的。

　　“可用性準則”在這個方法中是指：頁面表達原則、信息構架原則、視覺表現規范，這三部分。頁面表達原則和信息構架原則就是前面提到的，視覺表現 規范是專門針對視覺設計而制定的。這個方法要處理的問題是現有產品，因此，不同于產品原型，更多了視覺表現這一環，在視覺設計過程中出現的問題也應該在走 查中一起發現。

　　視覺表現規范

　　1. 滾動條看上去應該象滾動條

　　2. 表單的對齊方式

　　3. 重要的內容顯示在第一屏

　　4. 導航應出現在第一屏上半部分

　　5. 盡量避免使用裝飾性的圖標

　　6. 避免內容看上去象廣告

　　7. 光標樣式

　　8. Tab需要有三種狀態而不是兩種

　　9. 紅色表示警示，綠色表示ok，黃色表示提示

　　10. 灰色通常表示“暫不可用”(disabled)

　　具體操作

　　第一步. 分析并總結所有任務

　　第二步. 根據任務進行評估

　　評估中需要注意：

　　1. 不影響任務的問題不記錄

　　2. 被記錄的缺陷是有根據的(根據可用性準則)，而不是根據自己的感覺。

　　實例：QQ秀快速換裝

　　第一步. 任務列表：

　　● 換一套新形象

　　● 換表情

　　● 換心情

　　● 隨便逛逛

　　● 換一個自己以前的形象

　　第二步. 評估。以“換心情”任務為例：

　　問題1 副標題表意不明確

　　描述：

　　這句說明仍舊沒能說明“這里是什么功能”。如果能通過這句話說明：“在這里添加文字內容，顯露您的心情”，說明的效果會更好。至于“讓好友都知道!”這幾個字幾乎是沒有用的，沒有傳達任何信息量。

　　依據：頁面表達原則：信息的表達應該清楚、明確、直接。

　　問題2 “請輸入心情秀”表意不明

　　描述：

　　“請輸入心情秀文字”其實是第二層要表達的信息，第一層應該是：“這里還沒有輸入文字”。沒有第一句，直接是第二句，需要用戶花些時間來推斷，推斷出，這里顯示“請輸入心情秀文字”是因為自己沒有寫文字進去。

　　依據：頁面表達原則：信息的表達應該清楚、明確、直接。

　　問題3 拖動心情秀時，光標使用不正確

　　描述：

　　光標在框中的是link的手型，實際上應該是十字箭頭。現在會被誤解為有點擊操作。

　　依據：視覺表現規范：光標

　　問題4 “心情秀”概念不清

　　描述：

　　“心情秀預覽”暗示出，“心情秀”是指外框+文字內容。

　　“換心情秀”功能只是換框，這意味著“心情秀”是指外框。

　　措辭上的含混使得同一個名詞出現兩種不同的定義，不易于理解。“既然心情秀是指外框+文字內容，那么當我點擊“下一個”后，其中的文字內容是不是也會變化?”

　　依據：頁面表達原則：措辭統一

　　問題5 換心情秀外框操作不便

　　描述：

　　“上一個”“下一個”的操作不方便。無預覽圖，無法確定當前選項在全部“框”的列表中所處位置。

　　依據：頁面表達原則：操作結果不可預知

　　問題6 “預覽”按鈕視覺效果不佳

　　描述：

　　預覽按鈕視覺樣式比較象disabled

　　依據：灰色通常表示“暫不可用”(disabled)

　　問題7 “脫掉”按鈕不易找到

　　描述：

　　“脫掉”按鈕在框的有下角，很多時候看不到，并且文字超小。

　　依據：頁面表達原則：信息的表達應該清楚、明確、直接。

　　練習1：QQ秀照相館

　　練習2：Qzone滔滔心情

　　總結任務走查法：

　　為什么要強調是“按任務”。因為，類似“保存形象按鈕太難看啦~~”之類的問題是不應該提出來的。因為用戶在實際使用的時候，這個問題是遠遠不如“誤以為預覽按鈕不能點擊”重要。“按任務”是在確保評估更接近真實。

　　“按任務”很多時候與“按欄目”差不多的，但是按任務的優點在于：

　　1. cover到了各個欄目之間跳轉可能出現的問題。

　　2. 抓住了重點的問題，而放過了無關緊要的問題。比如：“申請紅鉆”按鈕。

　　總結任務的過程實際是簡化了的“人物角色-情景描述-任務分解”方法。

　　最后最后的總結

　　從狹義的交互設計的定義來看，交互設計的主要任務是：表達。通過清晰、準確、簡潔的表達進而實現人機交互。

　　互聯網產品的交互設計應該怎么做的問題，就演化成了：互聯網產品應該如何去表達。

　　以上方法都緊緊圍繞著“什么樣的方法才能讓產品的表達更有效”這個核心展開。