目前交互設(shè)計(jì)在互聯(lián)網(wǎng)產(chǎn)品中的應(yīng)用狀況
“交互設(shè)計(jì)可以提高產(chǎn)品可用性?！痹趪?guó)內(nèi)的互聯(lián)網(wǎng)行業(yè)中，建立在這個(gè)認(rèn)識(shí)基礎(chǔ)上，交互設(shè)計(jì)得到了普遍的接受?！爱a(chǎn)品設(shè)計(jì)開(kāi)始的時(shí)候應(yīng)該先交互啊~~”“你這個(gè)項(xiàng)目沒(méi)交互過(guò)啊~~”這類(lèi)的說(shuō)法越來(lái)越多當(dāng)然是好的信息，但是，交互設(shè)計(jì)工作到底應(yīng)該怎么做才能提高產(chǎn)品可用性？通常的互聯(lián)網(wǎng)產(chǎn)品研發(fā)中，交互設(shè)計(jì)工作是處于沒(méi)有方法的狀況。

理解交互設(shè)計(jì)
交互設(shè)計(jì)是一個(gè)設(shè)計(jì)工作。
交互設(shè)計(jì)是一門(mén)技術(shù)。
交互設(shè)計(jì)在目前階段的主要使命是提高產(chǎn)品可用性。
通過(guò)對(duì)界面和操作行為的設(shè)計(jì)提高產(chǎn)品可用性。

互聯(lián)網(wǎng)產(chǎn)品的特點(diǎn)
1.變化快。
2.質(zhì)量低。
3.功能操作與信息傳達(dá)并重。
4.高速創(chuàng)新從而帶來(lái)的無(wú)標(biāo)準(zhǔn)。

那么，互聯(lián)網(wǎng)產(chǎn)品的交互設(shè)計(jì)應(yīng)該怎么做？

互聯(lián)網(wǎng)產(chǎn)品的交互設(shè)計(jì)方法分享
經(jīng)過(guò)長(zhǎng)期的摸索、體會(huì)騰訊互聯(lián)網(wǎng)產(chǎn)品，我們總結(jié)出了幾個(gè)較為有效的設(shè)計(jì)方法：
方法一. 自然語(yǔ)言法。設(shè)計(jì)交互細(xì)節(jié)的方法。
方法二. 結(jié)構(gòu)圖法。設(shè)計(jì)產(chǎn)品信息構(gòu)架的方法。
方法三. 任務(wù)走查法。對(duì)現(xiàn)有產(chǎn)品進(jìn)行優(yōu)化的方法，全面普查產(chǎn)品，包括對(duì)交互細(xì)節(jié)和信息構(gòu)架。

這三個(gè)方法的思路，是基于對(duì)交互設(shè)計(jì)工作內(nèi)容如下的分類(lèi)：
1. 信息構(gòu)架
2. 交互細(xì)節(jié)

但，嚴(yán)格來(lái)說(shuō)，這樣的理解是不對(duì)的。交互設(shè)計(jì)工作原本就是“交互細(xì)節(jié)”工作。另外有信息構(gòu)架師來(lái)解決信息構(gòu)架的問(wèn)題。然而，上面提到了互聯(lián)網(wǎng)產(chǎn)品快的特點(diǎn)，更多的研發(fā)步驟顯然更容易將研發(fā)周期拖的更長(zhǎng)，把信息構(gòu)架工作和交互細(xì)節(jié)合并起來(lái)，減少一個(gè)環(huán)節(jié)，更適應(yīng)互聯(lián)網(wǎng)產(chǎn)品的研發(fā)特點(diǎn)。
“為什么不把信息構(gòu)架工作交給產(chǎn)品經(jīng)理來(lái)做呢？”如果說(shuō)交互設(shè)計(jì)工作的核心是表達(dá)（這個(gè)觀念，最后還會(huì)提到），那么，信息構(gòu)架和交互細(xì)節(jié)都是表達(dá)的重要手段。信息構(gòu)架不清楚的產(chǎn)品，怎么談得到表達(dá)的清楚、明確呢。所以，交互設(shè)計(jì)的工作包含了兩部分：信息構(gòu)架和交互細(xì)節(jié)。

那么，下面我們就開(kāi)始具體介紹這三個(gè)方法：

方法一. 自然語(yǔ)言法

使用自然的語(yǔ)言來(lái)表達(dá)頁(yè)面信息。
這是一個(gè)設(shè)計(jì)界面交互細(xì)節(jié)的方法。
界面表達(dá)的要求是：清晰，明確，簡(jiǎn)潔，得體。
想象著用面對(duì)面的交流來(lái)傳達(dá)信息，再將面對(duì)面的傳達(dá)變?yōu)闀?shū)面表達(dá)，再用界面語(yǔ)言翻譯書(shū)面表達(dá)。

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

頁(yè)面表達(dá)原則：
1. 更少的信息量更好。
2. 結(jié)構(gòu)化更易于理解。
3. 信息的表達(dá)應(yīng)該清楚、明確、直接。
4. 操作可識(shí)別。
5. 操作前，結(jié)果可預(yù)知。
6. 操作時(shí)，操作有反饋。
7. 操作后，操作可撤銷(xiāo)。
8. 讓用戶(hù)知道身處何地。
9. 避免內(nèi)容看上去象廣告。
10. 不提供多余的功能。
11. 相同的功能，在不同的頁(yè)面中應(yīng)保持一致性。
12. 措辭統(tǒng)一。

常用的頁(yè)面表達(dá)方式：
1. 從左到右，從上到下。
2. 大字更突出。
3. 圖形更吸引人。
4. 動(dòng)畫(huà)會(huì)被誤認(rèn)為是廣告。
5. 內(nèi)容邏輯：并列關(guān)系；從屬關(guān)系。
    
6.多項(xiàng)并列的信息用

7.不同的排序方式VS篩選內(nèi)容
 

具體操作
第一步. 概括待表達(dá)的信息
第二步. 將概括好的信息排序
第三步. 使用界面語(yǔ)言翻譯

實(shí)例：中信銀行卡

第一步. 概括信息：
描述應(yīng)該是概括的，盡可能簡(jiǎn)短。例如：
● 您選擇了回郵方式辦卡，概括解釋這個(gè)辦卡方式。
● 接下來(lái)您應(yīng)該 下載申請(qǐng)表
● 回郵辦卡的全過(guò)程是這樣的…
● 一系列注意事項(xiàng)。

第二步. 排序：
就是上面的順序，沒(méi)有變化。
有些時(shí)候排序會(huì)遇到困難，需要借助界面語(yǔ)言才能準(zhǔn)確反應(yīng)表達(dá)順序。這正是界面設(shè)計(jì)的價(jià)值，它可以勝任一些單純適用文字表達(dá)表達(dá)不好的情況。下面的黃鉆續(xù)費(fèi)案例中也許你就會(huì)遇到類(lèi)似的問(wèn)題。遇到這種問(wèn)題時(shí)，記錄下排序遇到的問(wèn)題即可。在翻譯過(guò)程中問(wèn)題可能就解決掉了。

第三步. 翻譯：

與之前界面對(duì)比：
● 開(kāi)頭幾句信息順序需要整理，使上下文關(guān)系更清晰。
● 對(duì)過(guò)程的描述可簡(jiǎn)化。
● “說(shuō)明”應(yīng)更結(jié)構(gòu)化。

這里所說(shuō)的“與對(duì)比界面之前”只是因?yàn)橹暗男枨笪臋n中有相對(duì)具象的頁(yè)面原型，而這并不意味著這里的工作是“優(yōu)化頁(yè)面原型”。需求的傳達(dá)總會(huì)有一定的形式，也許是簡(jiǎn)單的頁(yè)面原型，也許是一份需求文檔。甚至可以更簡(jiǎn)單。有時(shí)相對(duì)具象化的信息記錄或之前的頁(yè)面反而會(huì)是干擾設(shè)計(jì)者以明確的思路來(lái)設(shè)計(jì)，尤其需要小心。

我們有了一種成型的方法，但這并不意味著我們?cè)O(shè)計(jì)出的頁(yè)面就只有一個(gè)樣子了。實(shí)際上不同的設(shè)計(jì)者使用這個(gè)方法會(huì)設(shè)計(jì)出不同的頁(yè)面。下面這是另外一位設(shè)計(jì)師給出的思路，或許這是更好的方案：
1. 您選擇了回郵方式辦卡，概括解釋這個(gè)辦卡方式。
2. 第一步. 下載、填寫(xiě)申請(qǐng)表并回郵給中信
3. 第二步……………………..
4. 第四步……………………..
這樣的信息概括和排序頁(yè)面表現(xiàn)將是什么樣子？你可以自己試著畫(huà)畫(huà)~~

練習(xí)：QQ空間黃鉆催費(fèi)頁(yè)面

說(shuō)明：
黃鉆貴族是QQ空間中的VIP用戶(hù)，黃鉆貴族用戶(hù)可以免費(fèi)適用空間中的裝扮，另外還可以享受到日志信紙、超大容量相冊(cè)等諸多特權(quán)。
當(dāng)用戶(hù)的黃鉆貴族身份即將到期的時(shí)候，從QQ聊天主面板上的“我的錢(qián)包”提示：“錢(qián)包”閃動(dòng)，點(diǎn)擊后用一個(gè)490*300px的小窗口告知用戶(hù)續(xù)費(fèi)的詳情。
左側(cè)圖片在實(shí)際頁(yè)面中是一個(gè)flash動(dòng)畫(huà)，若干張圖片切換，顯示黃鉆用戶(hù)可以裝扮出的更好的空間效果。
右側(cè)的續(xù)費(fèi)方式希望在所有的續(xù)費(fèi)方式中選擇出兩、三種比較常用的方式，直接顯示出來(lái)（就是現(xiàn)在頁(yè)面上的“家庭、網(wǎng)吧”兩種方式），方便用戶(hù)。同時(shí)提供“支付中心”鏈接（http://paycenter.qq.com/cgi-bin/showopenservice.cgi?service_type=home），讓用戶(hù)可以在全部續(xù)費(fèi)方式中選擇。

請(qǐng)使用上面介紹的自然語(yǔ)言法重新設(shè)計(jì)這個(gè)界面，讓信息表達(dá)的更高效、清晰、明確。

參考方案
需要表達(dá)的信息：
● 某某某，您的黃鉆要過(guò)期了。
● 黃鉆貴族很棒滴~~
● 現(xiàn)在續(xù)費(fèi)黃鉆還有額外的優(yōu)惠。
● 續(xù)費(fèi)方式…

更好的信息：
● 某某某，您的黃鉆要過(guò)期了。
● 您要是不再是黃鉆了，就有XXXXX損失啦~~
● 現(xiàn)在續(xù)費(fèi)黃鉆還有額外的優(yōu)惠。
● 續(xù)費(fèi)方式…

總結(jié)“自然語(yǔ)言法”
自然語(yǔ)言法的基本思路是把界面表達(dá)轉(zhuǎn)化為自然的人與人交流。人與人的交流是我們每天都會(huì)發(fā)生的，相對(duì)更容易，這個(gè)技能也更容易提高。
這里涉及到的兩個(gè)例子都是比較偏向于信息表達(dá)的，對(duì)于操作較多的界面，這個(gè)方法仍舊適用。

方法二. 結(jié)構(gòu)圖法

這個(gè)方法的思路：拋開(kāi)頁(yè)面細(xì)節(jié)只考慮信息的組織形式。拋開(kāi)頁(yè)面細(xì)節(jié)，是的，就是上面討論的那些具體的頁(yè)面細(xì)節(jié)，只考慮信息的整體構(gòu)架，而頁(yè)面的細(xì)節(jié)留在確定了信息構(gòu)架之后，用自然語(yǔ)言法來(lái)解決。

信息構(gòu)架的原則：
1. 一個(gè)頁(yè)面一個(gè)主要內(nèi)容。
2. 個(gè)人信息&公共信息。
3. 網(wǎng)頁(yè)基本內(nèi)容有兩種：列表和文檔
4. 更少的信息更好
5. 一個(gè)用戶(hù)自己生成內(nèi)容的document頁(yè)，有兩個(gè)狀態(tài)：瀏覽狀態(tài)&編輯狀態(tài)。
6. 信息樹(shù)應(yīng)該盡量窄而淺，并且盡量保持平衡。
7. 與現(xiàn)實(shí)生活經(jīng)驗(yàn)相符
? ● 頁(yè)面在網(wǎng)站中需要有一個(gè)固定的位置。
? ● 同等級(jí)的內(nèi)容應(yīng)表現(xiàn)成并列的樣子。
     ……

信息構(gòu)架的常見(jiàn)模型：
1. 列表+詳情頁(yè)+列表聚合頁(yè)
2. Wizard模式。第一步->第二步->第三步…
3. 主頁(yè)+若干個(gè)“臨時(shí)”頁(yè)面。例如：google帳戶(hù)

具體操作
第一步. 明確描述全部?jī)?nèi)容。總結(jié)歸納產(chǎn)品所需要表達(dá)的所有信息。
第二步. 畫(huà)樹(shù)狀圖。
第三步. 用紙畫(huà)各頁(yè)草圖。草圖中需要包含的關(guān)鍵元素：頁(yè)面標(biāo)題、導(dǎo)航、重要的鏈接和按鈕。
第四步. 模擬演示網(wǎng)頁(yè)操作行為。

實(shí)例：黃鉆等級(jí)

第一步. 總結(jié)歸納內(nèi)容：
● 用戶(hù)個(gè)人的的黃鉆等級(jí)信息
● 等級(jí)介紹
● 黃鉆功能特權(quán)介紹
● 黃鉆貴族可免費(fèi)領(lǐng)取的道具
● 黃鉆活動(dòng)

第二步. 樹(shù)狀圖：
如果單純的按照上面概括的信息羅列，則可以規(guī)劃出一個(gè)黃鉆貴族的網(wǎng)站，樹(shù)狀圖如下：

然而，信息構(gòu)架的設(shè)計(jì)往往要建立在對(duì)現(xiàn)有產(chǎn)品深刻的理解基礎(chǔ)上。


Qzone的現(xiàn)狀：一個(gè)社區(qū)，成千上萬(wàn)個(gè)個(gè)人空間。如何在現(xiàn)有的基礎(chǔ)上設(shè)計(jì)新的黃鉆等級(jí)？
我們的方案是這樣的：

第三步. 草圖：

這里需要強(qiáng)調(diào)：紙?jiān)椭袘?yīng)包括頁(yè)面標(biāo)題、模塊的標(biāo)題、導(dǎo)航、重要的鏈接和按鈕，而不只是頁(yè)面最頂端的導(dǎo)航。有了重要的鏈接和按鈕才能清楚的演示出各個(gè)頁(yè)面之間跳轉(zhuǎn)的關(guān)系。

最后，第四步. 手握原型，演示頁(yè)面間的跳轉(zhuǎn)，確保整個(gè)流程的順暢。

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

參考方案
總結(jié)歸納內(nèi)容：
1. 日志
2. 心情
3. 私密記事本

樹(shù)狀圖：
方案一：
● 主頁(yè)
● “大日志”
    ■ 日志
    ■ 心情
    ■ 私密記事本
● 音樂(lè)盒
● 留言板
● 相冊(cè)
……

方案二：
● 主頁(yè)
● 日志
● 心情
● 私密記事本
● 音樂(lè)盒
● 留言板
● 相冊(cè)
…

根據(jù)上面兩種不同的樹(shù)狀圖方案，接下來(lái)的頁(yè)面草圖也會(huì)是不同的，你可是試著畫(huà)畫(huà)…

方法三. 任務(wù)走查法

這是一種優(yōu)化現(xiàn)有產(chǎn)品的方法。成本低，見(jiàn)效快。對(duì)產(chǎn)品整體上影響小。

以用戶(hù)任務(wù)為線索，以可用性準(zhǔn)則為依據(jù)。是的，這個(gè)說(shuō)話很好記，類(lèi)似“以事實(shí)為依據(jù)，以法律為準(zhǔn)繩?！?BR>“用戶(hù)任務(wù)”是指用戶(hù)實(shí)際使用這個(gè)產(chǎn)品時(shí)需要完成的任務(wù)。這個(gè)方法中，需要操作者依據(jù)主觀判斷制定用戶(hù)任務(wù)，而不是通過(guò)用戶(hù)研究。這雖然有可能造成更大的誤差，但同時(shí)節(jié)約了時(shí)間成本。實(shí)際工作中，參與這個(gè)產(chǎn)品設(shè)計(jì)的同學(xué)坐在一起討論一下，通常是可以比較準(zhǔn)確的描述出用戶(hù)任務(wù)的。
“可用性準(zhǔn)則”在這個(gè)方法中是指：頁(yè)面表達(dá)原則、信息構(gòu)架原則、視覺(jué)表現(xiàn)規(guī)范，這三部分。頁(yè)面表達(dá)原則和信息構(gòu)架原則就是前面提到的，視覺(jué)表現(xiàn)規(guī)范是專(zhuān)門(mén)針對(duì)視覺(jué)設(shè)計(jì)而制定的。這個(gè)方法要處理的問(wèn)題是現(xiàn)有產(chǎn)品，因此，不同于產(chǎn)品原型，更多了視覺(jué)表現(xiàn)這一環(huán)，在視覺(jué)設(shè)計(jì)過(guò)程中出現(xiàn)的問(wèn)題也應(yīng)該在走查中一起發(fā)現(xiàn)。

視覺(jué)表現(xiàn)規(guī)范
1. 滾動(dòng)條看上去應(yīng)該象滾動(dòng)條
2. 表單的對(duì)齊方式
3. 重要的內(nèi)容顯示在第一屏
4. 導(dǎo)航應(yīng)出現(xiàn)在第一屏上半部分
5. 盡量避免使用裝飾性的圖標(biāo)
6. 避免內(nèi)容看上去象廣告
7. 光標(biāo)樣式
8. Tab需要有三種狀態(tài)而不是兩種
9. 紅色表示警示，綠色表示ok，黃色表示提示
10. 灰色通常表示“暫不可用”（disabled）

具體操作
第一步. 分析并總結(jié)所有任務(wù)
第二步. 根據(jù)任務(wù)進(jìn)行評(píng)估

評(píng)估中需要注意：
1. 不影響任務(wù)的問(wèn)題不記錄
2. 被記錄的缺陷是有根據(jù)的（根據(jù)可用性準(zhǔn)則），而不是根據(jù)自己的感覺(jué)。

實(shí)例：QQ秀快速換裝

第一步. 任務(wù)列表：
● 換一套新形象
● 換表情
● 換心情
● 隨便逛逛
● 換一個(gè)自己以前的形象

第二步. 評(píng)估。以“換心情”任務(wù)為例：

問(wèn)題1 副標(biāo)題表意不明確
描述：

這句說(shuō)明仍舊沒(méi)能說(shuō)明“這里是什么功能”。如果能通過(guò)這句話說(shuō)明：“在這里添加文字內(nèi)容，顯露您的心情”，說(shuō)明的效果會(huì)更好。至于“讓好友都知道！”這幾個(gè)字幾乎是沒(méi)有用的，沒(méi)有傳達(dá)任何信息量。
依據(jù)：頁(yè)面表達(dá)原則：信息的表達(dá)應(yīng)該清楚、明確、直接。

問(wèn)題2 “請(qǐng)輸入心情秀”表意不明
描述：

“請(qǐng)輸入心情秀文字”其實(shí)是第二層要表達(dá)的信息，第一層應(yīng)該是：“這里還沒(méi)有輸入文字”。沒(méi)有第一句，直接是第二句，需要用戶(hù)花些時(shí)間來(lái)推斷，推斷出，這里顯示“請(qǐng)輸入心情秀文字”是因?yàn)樽约簺](méi)有寫(xiě)文字進(jìn)去。
依據(jù)：頁(yè)面表達(dá)原則：信息的表達(dá)應(yīng)該清楚、明確、直接。

問(wèn)題3 拖動(dòng)心情秀時(shí)，光標(biāo)使用不正確
描述：

光標(biāo)在框中的是link的手型，實(shí)際上應(yīng)該是十字箭頭?，F(xiàn)在會(huì)被誤解為有點(diǎn)擊操作。
依據(jù)：視覺(jué)表現(xiàn)規(guī)范：光標(biāo)

問(wèn)題4 “心情秀”概念不清
描述：

“心情秀預(yù)覽”暗示出，“心情秀”是指外框+文字內(nèi)容。
“換心情秀”功能只是換框，這意味著“心情秀”是指外框。
措辭上的含混使得同一個(gè)名詞出現(xiàn)兩種不同的定義，不易于理解?！凹热恍那樾闶侵竿饪?文字內(nèi)容，那么當(dāng)我點(diǎn)擊“下一個(gè)”后，其中的文字內(nèi)容是不是也會(huì)變化？”
依據(jù)：頁(yè)面表達(dá)原則：措辭統(tǒng)一

問(wèn)題5 換心情秀外框操作不便
描述：

“上一個(gè)”“下一個(gè)”的操作不方便。無(wú)預(yù)覽圖，無(wú)法確定當(dāng)前選項(xiàng)在全部“框”的列表中所處位置。
依據(jù)：頁(yè)面表達(dá)原則：操作結(jié)果不可預(yù)知

問(wèn)題6 “預(yù)覽”按鈕視覺(jué)效果不佳
描述：

預(yù)覽按鈕視覺(jué)樣式比較象disabled
依據(jù)：灰色通常表示“暫不可用”（disabled）

問(wèn)題7 “脫掉”按鈕不易找到
描述：

“脫掉”按鈕在框的有下角，很多時(shí)候看不到，并且文字超小。
依據(jù)：頁(yè)面表達(dá)原則：信息的表達(dá)應(yīng)該清楚、明確、直接。

練習(xí)1：QQ秀照相館

練習(xí)2：Qzone滔滔心情

總結(jié)任務(wù)走查法：
為什么要強(qiáng)調(diào)是“按任務(wù)”。因?yàn)?，?lèi)似“保存形象按鈕太難看啦~~”之類(lèi)的問(wèn)題是不應(yīng)該提出來(lái)的。因?yàn)橛脩?hù)在實(shí)際使用的時(shí)候，這個(gè)問(wèn)題是遠(yuǎn)遠(yuǎn)不如“誤以為預(yù)覽按鈕不能點(diǎn)擊”重要?！鞍慈蝿?wù)”是在確保評(píng)估更接近真實(shí)。

“按任務(wù)”很多時(shí)候與“按欄目”差不多的，但是按任務(wù)的優(yōu)點(diǎn)在于：
1. cover到了各個(gè)欄目之間跳轉(zhuǎn)可能出現(xiàn)的問(wèn)題。
2. 抓住了重點(diǎn)的問(wèn)題，而放過(guò)了無(wú)關(guān)緊要的問(wèn)題。比如：“申請(qǐng)紅鉆”按鈕。

總結(jié)任務(wù)的過(guò)程實(shí)際是簡(jiǎn)化了的“人物角色-情景描述-任務(wù)分解”方法。

最后最后的總結(jié)

從狹義的交互設(shè)計(jì)的定義來(lái)看，交互設(shè)計(jì)的主要任務(wù)是：表達(dá)。通過(guò)清晰、準(zhǔn)確、簡(jiǎn)潔的表達(dá)進(jìn)而實(shí)現(xiàn)人機(jī)交互。

互聯(lián)網(wǎng)產(chǎn)品的交互設(shè)計(jì)應(yīng)該怎么做的問(wèn)題，就演化成了：互聯(lián)網(wǎng)產(chǎn)品應(yīng)該如何去表達(dá)。
以上方法都緊緊圍繞著“什么樣的方法才能讓產(chǎn)品的表達(dá)更有效”這個(gè)核心展開(kāi)。

那么，
let’s talk
let’s talk
let’s talk
……

( 注：本文是UPA user friendy 2008中由我主持的一個(gè)同名工作坊的講稿。
另附PPT文檔：互聯(lián)網(wǎng)產(chǎn)品的交互設(shè)計(jì)方法.ppt )

原文：http://www.chouyu.com.cn/?p=115