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

互聯(lián)網(wǎng)交互設(shè)計方法項目情況概述第一章行業(yè)市場分析第二章營銷策略整合第三章財務(wù)風險管控第四章目錄Contents

交互設(shè)計是什么？交互設(shè)計是一個設(shè)計工作。交互設(shè)計是一門技術(shù)。交互設(shè)計在目前階段的主要使命是提高產(chǎn)品可用性。通過對界面和操作行為的設(shè)計提高產(chǎn)品可用性。

互聯(lián)網(wǎng)產(chǎn)品的特點變化快。質(zhì)量低。功能操作與信息傳達并重。高速創(chuàng)新從而帶來的無標準。

那么，互聯(lián)網(wǎng)產(chǎn)品的交互設(shè)計應(yīng)該怎么做？互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計方法：方法一.自然語言法方法二.結(jié)構(gòu)圖法方法三.任務(wù)走查法

交互設(shè)計工作分為兩部分：信息構(gòu)架交互細節(jié)

其實不是這樣…交互設(shè)計工作分為兩部分：信息構(gòu)架交互細節(jié)互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計方法：方法一.自然語言法方法二.結(jié)構(gòu)圖法方法三.任務(wù)走查法

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

面對面的傳達信息->書面表達->界面語言頁面表達原則1.更少的信息量更好。

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

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

4.操作可識別。

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

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

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

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

9.避免內(nèi)容看上去象廣告。10.不提供多余的功能。11.相同的功能，在不同的頁面中應(yīng)保持一致性。12.措辭統(tǒng)一。

常用的頁面表達方式1.從左到右，從上到下。2.大字更突出。3.圖形更吸引人。4.動畫會被誤認為是廣告。5.內(nèi)容邏輯：并列關(guān)系；從屬關(guān)系。6.多項并列的信息：7.不同的排序方式VS篩選內(nèi)容

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

實例：中信銀行卡活動

實例：中信銀行卡活動第一步.概括信息您選擇了回郵方式辦卡，概括解釋這個辦卡方式。接下來您應(yīng)該下載申請表回郵辦卡的全過程是這樣的...一系列注意事項。

實例：中信銀行卡活動第二步.排序1.您選擇了回郵方式辦卡，概括解釋這個辦卡方式。2.接下來您應(yīng)該下載申請表3.回郵辦卡的全過程是這樣的...4.一系列注意事項。

實例：中信銀行卡活動第三步.翻譯為界面語言

實例：中信銀行卡活動另外一種表達：1.您選擇了回郵方式辦卡，概括解釋這個辦卡方式。2.第一步.下載、填寫申請表并回郵給中信3.第二步……..4.第四步……..

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

結(jié)構(gòu)圖法拋開頁面細節(jié)只考慮信息的組織形式。

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

……

信息構(gòu)架的常見模型列表+詳情頁+列表聚合頁Wizard模式。第一步->第二步->第三步…主頁+若干個“臨時”頁面。例如：googleaccounts

具體操作第一步.總結(jié)歸納全部待表達的信息。第二步.畫樹狀圖。第三步.畫頁面草圖，演示。

(其中包含：頁面標題、導航、重要的鏈接和按鈕。)

實例：黃鉆等級

實例：黃鉆等級

實例：黃鉆等級

實例：黃鉆等級第一步.概括信息用戶個人的的黃鉆等級信息等級介紹3. 黃鉆功能特權(quán)介紹4. 黃鉆貴族可免費領(lǐng)取的道具5. 黃鉆活動

實例：黃鉆等級第二步.畫樹狀圖

實例：黃鉆等級第二步.畫樹狀圖

實例：黃鉆等級第二步.畫樹狀圖

實例：黃鉆等級第三步.草圖，演示

練習：QQ空間日志

練習：QQ空間日志新的需求：添加私密記事本添加QQ心情原有的日志需保留

任務(wù)走查法優(yōu)化現(xiàn)有產(chǎn)品的方法。成本低，見效快。對產(chǎn)品整體上影響小。

以用戶任務(wù)為線索，以可用性準則為依據(jù)?？捎眯詼蕜t頁面表達原則+信息構(gòu)架原則+視覺表現(xiàn)規(guī)范

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

具體操作第一步.分析并總結(jié)所有任務(wù)第二步.根據(jù)任務(wù)進行走查評估中需要注意：1.不影響任務(wù)的問題不記錄2.被記錄的缺陷是有根據(jù)的,而不是根據(jù)自己的感覺。

實例：QQ秀快速換裝

實例：QQ秀快速換裝

第一步.任務(wù)分析換一套新形象換表情換心情隨便逛逛換一個自己以前的形象實例：QQ秀快速換裝

第二步.走查問題1副標題表意不明確描述這句說明仍舊沒能說明“這里是什么功能”。如果能通過這句話說明：“在這里添加文字內(nèi)容，顯露您的心情”，說明的效果會更好。至于“讓好友都知道！”這幾個字幾乎是沒有用的，沒有傳達任何信息量。依據(jù)頁面表達原則：信息的表達應(yīng)該清楚、明確、直接。修改建議實例：QQ秀快速換裝

第二步.走查問題2“請輸入心情秀”表意不明確描述

“請輸入心情秀文字”其實是第二層要表達的信息，第一層應(yīng)該是：“這里還沒有輸入文字”。沒有第一句，直接是第二句，需要用戶花些時間來推斷，推斷出，這里顯示“請輸入心情秀文字”是因為自己沒有寫文字進去。依據(jù)頁面表達原則：信息的表達應(yīng)該清楚、明確、直接。修改建議實例：QQ秀快速換裝

第二步.走查問題3拖動預覽中的心情秀時的光標使用錯誤描述

拖動預覽圖中的心情秀時，光標為應(yīng)該使用十字箭頭。依據(jù)視覺表現(xiàn)規(guī)范：光標樣式修改建議任務(wù)走查法實例：QQ秀快速換裝

第二步.走查問題4“心情秀”概念不清描述“心情秀預覽”暗示出，“心情秀”是指外框+文字內(nèi)容?！皳Q心情秀”功能只是換框，這意味著“心情秀”是指外框。措辭上的含混使得同一個概念出現(xiàn)兩種不同的定義，不易于理解。最直接的反應(yīng)是：“既然心情秀是指外框+文字內(nèi)容，那么當我點擊下一個后，其中的文字內(nèi)容是不是也會變化？”依據(jù)頁面表達原則：措辭統(tǒng)一修改建議實例：QQ秀快速換裝

第二步.走查問題5換心情秀外框操作不便描述“上一個”“下一個”的操作不方便。無預覽圖，無法確定當前選項在全部“框”的列表中所處位置。依據(jù)頁面表達原則：操作結(jié)果不可預知修改建議實例：QQ秀快速換裝

第二步.走查問題6“預覽”按鈕視覺效果不佳描述

預覽按鈕視覺樣式比較象disabled依據(jù)灰色通常表示“暫不可用”（disabled）修改建議實例：QQ秀快速換裝

第二步.走查問題7“脫掉”按鈕不易找到描述“脫掉”按鈕在框的有下角，很多時候看不到，并且文字超小。依據(jù)頁面表達原則：信息的表達應(yīng)該清楚、明確、直接。修改建議練習：QQ秀照相館

練習：QQ空間心情