主機網(wǎng)全新上線，買空間、服務(wù)器就上主機網(wǎng)，安全有保障！

目前交互設(shè)計在互聯(lián)網(wǎng)產(chǎn)品中的應(yīng)用狀況

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

理解交互設(shè)計

交互設(shè)計是一個設(shè)計工作。

交互設(shè)計是一門技術(shù)。

交互設(shè)計在目前階段的主要使命是提高產(chǎn)品可用性。

通過對界面和操作行為的設(shè)計提高產(chǎn)品可用性。

互聯(lián)網(wǎng)產(chǎn)品的特點

1.變化快。

2.質(zhì)量低。

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

4.高速創(chuàng)新從而帶來的無標(biāo)準(zhǔn)。

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

互聯(lián)網(wǎng)產(chǎn)品的交互設(shè)計方法分享

經(jīng)過長期的摸索、體會騰訊互聯(lián)網(wǎng)產(chǎn)品，我們總結(jié)出了幾個較為有效的設(shè)計方法：

方法一。 自然語言法。設(shè)計交互細(xì)節(jié)的方法。

方法二。 結(jié)構(gòu)圖法。設(shè)計產(chǎn)品信息構(gòu)架的方法。

方法三。 任務(wù)走查法。對現(xiàn)有產(chǎn)品進行優(yōu)化的方法，全面普查產(chǎn)品，包括對交互細(xì)節(jié)和信息構(gòu)架。

這三個方法的思路，是基于對交互設(shè)計工作內(nèi)容如下的分類：

1. 信息構(gòu)架

2. 交互細(xì)節(jié)

但，嚴(yán)格來說，這樣的理解是不對的。交互設(shè)計工作原本就是“交互細(xì)節(jié)”工作。另外有信息構(gòu)架師來解決信息構(gòu)架的問題。然而，上面提到了互聯(lián)網(wǎng)產(chǎn)品快的特點，更多的研發(fā)步驟顯然更容易將研發(fā)周期拖的更長，把信息構(gòu)架工作和交互細(xì)節(jié)合并起來，減少一個環(huán)節(jié)，更適應(yīng)互聯(lián)網(wǎng)產(chǎn)品的研發(fā)特點。

“為什么不把信息構(gòu)架工作交給產(chǎn)品經(jīng)理來做呢？”如果說交互設(shè)計工作的核心是表達（這個觀念，最后還會提到），那么，信息構(gòu)架和交互細(xì)節(jié)都是表達的重要手段。信息構(gòu)架不清楚的產(chǎn)品，怎么談得到表達的清楚、明確呢。所以，交互設(shè)計的工作包含了兩部分：信息構(gòu)架和交互細(xì)節(jié)。

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

方法一。 自然語言法

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

這是一個設(shè)計界面交互細(xì)節(jié)的方法。

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

想象著用面對面的交流來傳達信息，再將面對面的傳達變?yōu)闀姹磉_，再用界面語言翻譯書面表達。

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

頁面表達原則：

1. 更少的信息量更好。

2. 結(jié)構(gòu)化更易于理解。

3. 信息的表達應(yīng)該清楚、明確、直接。

4. 操作可識別。

5. 操作前，結(jié)果可預(yù)知。

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

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

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

9. 避免內(nèi)容看上去象廣告。

10. 不提供多余的功能。

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

12. 措辭統(tǒng)一。

常用的頁面表達方式：

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

2. 大字更突出。

3. 圖形更吸引人。

4. 動畫會被誤認(rèn)為是廣告。

5. 內(nèi)容邏輯：并列關(guān)系；從屬關(guān)系。

 

 

6.多項并列的信息用

 

 

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

 

 

具體操作

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

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

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

實例：中信銀行卡

 

 

第一步。 概括信息：

描述應(yīng)該是概括的，盡可能簡短。例如：

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

● 接下來您應(yīng)該 下載申請表

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

● 一系列注意事項。

第二步。 排序：

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

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

第三步。 翻譯：

 

 

與之前界面對比：

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

● 對過程的描述可簡化。

● “說明”應(yīng)更結(jié)構(gòu)化。

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

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

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

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

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

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

這樣的信息概括和排序頁面表現(xiàn)將是什么樣子？你可以自己試著畫畫~~

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

 

 

說明：

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

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

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

右側(cè)的續(xù)費方式希望在所有的續(xù)費方式中選擇出兩、三種比較常用的方式，直接顯示出來（就是現(xiàn)在頁面上的“家庭、網(wǎng)吧”兩種方式），方便用戶。同時提供“支付中心”鏈接（http://theartemis.cn/cgi-bin /showopenservice.cgi？service_type=home），讓用戶可以在全部續(xù)費方式中選擇。

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

參考方案

需要表達的信息：

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

● 黃鉆貴族很棒滴~~

● 現(xiàn)在續(xù)費黃鉆還有額外的優(yōu)惠。

● 續(xù)費方式…

更好的信息：

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

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

● 現(xiàn)在續(xù)費黃鉆還有額外的優(yōu)惠。

● 續(xù)費方式…

總結(jié)“自然語言法”

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

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

主機網(wǎng)全新上線，買空間、服務(wù)器就上主機網(wǎng)，安全有保障！

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

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

信息構(gòu)架的原則：

1. 一個頁面一個主要內(nèi)容。

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

3. 網(wǎng)頁基本內(nèi)容有兩種：列表和文檔

4. 更少的信息更好

5. 一個用戶自己生成內(nèi)容的document頁，有兩個狀態(tài)：瀏覽狀態(tài)&編輯狀態(tài)。

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

7. 與現(xiàn)實生活經(jīng)驗相符

 ● 頁面在網(wǎng)站中需要有一個固定的位置。

 ● 同等級的內(nèi)容應(yīng)表現(xiàn)成并列的樣子。

……

信息構(gòu)架的常見模型：

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

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

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

 

 

具體操作

第一步。 明確描述全部內(nèi)容?？偨Y(jié)歸納產(chǎn)品所需要表達的所有信息。

第二步。 畫樹狀圖。

第三步。 用紙畫各頁草圖。草圖中需要包含的關(guān)鍵元素：頁面標(biāo)題、導(dǎo)航、重要的鏈接和按鈕。

第四步。 模擬演示網(wǎng)頁操作行為。

實例：黃鉆等級

 

 

 

 

 

 

第一步。 總結(jié)歸納內(nèi)容：

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

● 等級介紹

● 黃鉆功能特權(quán)介紹

● 黃鉆貴族可免費領(lǐng)取的道具

● 黃鉆活動

第二步。 樹狀圖：

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

 

 

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

 

 

 

 

Qzone的現(xiàn)狀：一個社區(qū)，成千上萬個個人空間。如何在現(xiàn)有的基礎(chǔ)上設(shè)計新的黃鉆等級？

我們的方案是這樣的：

 

 

 

 

第三步。 草圖：

 

 

 

 

 

 

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

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

主機網(wǎng)全新上線，買空間、服務(wù)器就上主機網(wǎng)，安全有保障！

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

 

 

參考方案

總結(jié)歸納內(nèi)容：

1. 日志

2. 心情

3. 私密記事本

樹狀圖：

方案一：

● 主頁

● “大日志”

■ 日志

■ 心情

■ 私密記事本

● 音樂盒

● 留言板

● 相冊

……

方案二：

● 主頁

● 日志

● 心情

● 私密記事本

● 音樂盒

● 留言板

● 相冊

…

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

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

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

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

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

“可用性準(zhǔn)則”在這個方法中是指：頁面表達原則、信息構(gòu)架原則、視覺表現(xiàn)規(guī)范，這三部分。頁面表達原則和信息構(gòu)架原則就是前面提到的，視覺表現(xiàn)規(guī)范是專門針對視覺設(shè)計而制定的。這個方法要處理的問題是現(xiàn)有產(chǎn)品，因此，不同于產(chǎn)品原型，更多了視覺表現(xiàn)這一環(huán)，在視覺設(shè)計過程中出現(xiàn)的問題也應(yīng)該在走查中一起發(fā)現(xiàn)。

視覺表現(xiàn)規(guī)范

1. 滾動條看上去應(yīng)該象滾動條

2. 表單的對齊方式

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ù)進行評估

評估中需要注意：

1. 不影響任務(wù)的問題不記錄

2. 被記錄的缺陷是有根據(jù)的（根據(jù)可用性準(zhǔn)則），而不是根據(jù)自己的感覺。

實例：QQ秀快速換裝

 

 

第一步。 任務(wù)列表：

● 換一套新形象

● 換表情

● 換心情

● 隨便逛逛

● 換一個自己以前的形象

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

問題1 副標(biāo)題表意不明確

描述：

 

 

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

依據(jù)：頁面表達原則：信息的表達應(yīng)該清楚、明確、直接。

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

描述：

 

 

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

依據(jù)：頁面表達原則：信息的表達應(yīng)該清楚、明確、直接。

問題3 拖動心情秀時，光標(biāo)使用不正確

描述：

 

 

光標(biāo)在框中的是link的手型，實際上應(yīng)該是十字箭頭?，F(xiàn)在會被誤解為有點擊操作。

依據(jù)：視覺表現(xiàn)規(guī)范：光標(biāo)

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

描述：

 

 

“心情秀預(yù)覽”暗示出，“心情秀”是指外框+文字內(nèi)容。

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

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

依據(jù)：頁面表達原則：措辭統(tǒng)一

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

描述：

 

 

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

依據(jù)：頁面表達原則：操作結(jié)果不可預(yù)知

問題6 “預(yù)覽”按鈕視覺效果不佳

描述：

 

 

預(yù)覽按鈕視覺樣式比較象disabled

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

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

描述：

 

 

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

依據(jù)：頁面表達原則：信息的表達應(yīng)該清楚、明確、直接。

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

 

 

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

 

 

總結(jié)任務(wù)走查法：

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

“按任務(wù)”很多時候與“按欄目”差不多的，但是按任務(wù)的優(yōu)點在于：

1. cover到了各個欄目之間跳轉(zhuǎn)可能出現(xiàn)的問題。

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

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

最后最后的總結(jié)

從狹義的交互設(shè)計的定義來看，交互設(shè)計的主要任務(wù)是：表達。通過清晰、準(zhǔn)確、簡潔的表達進而實現(xiàn)人機交互。

互聯(lián)網(wǎng)產(chǎn)品的交互設(shè)計應(yīng)該怎么做的問題，就演化成了：互聯(lián)網(wǎng)產(chǎn)品應(yīng)該如何去表達。

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

那么，

let’s talk

let’s talk

let’s talk

……

附PPT文檔：互聯(lián)網(wǎng)產(chǎn)品的交互設(shè)計方法.ppt：http://theartemis.cn/uploads/2008/11/e4ba92e88194e7bd91e4baa4e4ba92e8aebee8aea1e696b9e6b395.ppt

• 產(chǎn)品