1、互聯(lián)網(wǎng)交互設(shè)計方法,臭魚 2008.10,交互設(shè)計重要，但卻不知要怎么做。,？,交互設(shè)計是什么？,交互設(shè)計是一個設(shè)計工作。 交互設(shè)計是一門技術(shù)。 交互設(shè)計在目前階段的主要使命是提高產(chǎn)品可用性。 通過對界面和操作行為的設(shè)計提高產(chǎn)品可用性。,互聯(lián)網(wǎng)產(chǎn)品的特點,變化快。 質(zhì)量低。 功能操作與信息傳達(dá)并重。 高速創(chuàng)新從而帶來的無標(biāo)準(zhǔn)。,那么，互聯(lián)網(wǎng)產(chǎn)品的交互設(shè)計應(yīng)該怎么做？,互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計方法：,方法一. 自然語言法 方法二. 結(jié)構(gòu)圖法 方法三. 任務(wù)走查法,交互設(shè)計工作分為兩部分： 信息構(gòu)架 交互細(xì)節(jié),其實不是這樣,交互設(shè)計工作分為兩部分： 信息構(gòu)架 交互細(xì)節(jié),互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計方法：,方法一.

2、 自然語言法 方法二. 結(jié)構(gòu)圖法 方法三. 任務(wù)走查法,自然語言法,使用自然的語言來表達(dá)頁面信息。,面對面的傳達(dá)信息-書面表達(dá)-界面語言,頁面表達(dá)原則,1. 更少的信息量更好。 2. 結(jié)構(gòu)化更易于理解。 3. 信息的表達(dá)應(yīng)該清楚、明確、直接。 4. 操作可識別。 5. 操作前，結(jié)果可預(yù)知。 6. 操作時，操作有反饋。 7. 操作后，操作可撤銷。 8. 讓用戶知道身處何地。 9. 避免內(nèi)容看上去象廣告。 10. 不提供多余的功能。 11. 相同的功能，在不同的頁面中應(yīng)保持一致性。 12. 措辭統(tǒng)一。,自然語言法,常用的頁面表達(dá)方式,1. 從左到右，從上到下。 2. 大字更突出。 3. 圖形更吸引

3、人。 4. 動畫會被誤認(rèn)為是廣告。 5. 內(nèi)容邏輯：并列關(guān)系；從屬關(guān)系。 6. 多項并列的信息： 7. 不同的排序方式VS篩選內(nèi)容,自然語言法,具體操作,第一步. 概括待表達(dá)的信息 第二步. 將概括好的信息排序 第三步. 使用界面語言翻譯,自然語言法,實例：中信銀行卡活動,自然語言法,自然語言法,實例：中信銀行卡活動,第一步. 概括信息 您選擇了回郵方式辦卡，概括解釋這個辦卡方式。 接下來您應(yīng)該 下載申請表 回郵辦卡的全過程是這樣的. 一系列注意事項。,自然語言法,實例：中信銀行卡活動,第二步. 排序 1. 您選擇了回郵方式辦卡， 概括解釋這個辦卡方式。 2. 接下來您應(yīng)該 下載申請表 3.

4、回郵辦卡的全過程是這樣的. 4. 一系列注意事項。,自然語言法,實例：中信銀行卡活動,第三步. 翻譯為界面語言,自然語言法,自然語言法,實例：中信銀行卡活動,另外一種表達(dá)： 1. 您選擇了回郵方式辦卡，概括解釋這個辦卡方式。 2. 第一步. 下載、填寫申請表并回郵給中信 3. 第二步. 4. 第四步.,自然語言法,練習(xí)：QQ空間黃鉆催費頁面,自然語言法,結(jié)構(gòu)圖法,拋開頁面細(xì)節(jié)只考慮信息的組織形式。,信息構(gòu)架的原則,1.一個頁面一個主要內(nèi)容。 2.個人信息 與 公共信息。 3.網(wǎng)頁基本內(nèi)容有兩種：列表 和 文檔 4.更少的信息更好 5.一個用戶自己生成內(nèi)容的頁面，有兩個狀態(tài)：瀏覽狀態(tài)&編輯狀態(tài)。

5、 6.信息樹應(yīng)該盡量窄而淺，并且盡量保持平衡。 7.與現(xiàn)實生活經(jīng)驗相符 頁面在網(wǎng)站中需要有 一個 固定 的位置。 同等級的內(nèi)容應(yīng)表現(xiàn)成并列的樣子。 ,結(jié)構(gòu)圖法,信息構(gòu)架的常見模型,列表+詳情頁+列表聚合頁 Wizard模式。第一步-第二步-第三步 主頁+若干個“臨時”頁面。 例如：google accounts,結(jié)構(gòu)圖法,具體操作,第一步. 總結(jié)歸納全部待表達(dá)的信息。 第二步. 畫樹狀圖。 第三步. 畫頁面草圖，演示。 (其中包含：頁面標(biāo)題、導(dǎo)航、重要的鏈接和按鈕。),結(jié)構(gòu)圖法,實例：黃鉆等級,結(jié)構(gòu)圖法,實例：黃鉆等級,結(jié)構(gòu)圖法,實例：黃鉆等級,結(jié)構(gòu)圖法,實例：黃鉆等級,第一步. 概括信息 用

6、戶個人的的黃鉆等級信息 等級介紹 3.黃鉆功能特權(quán)介紹 4.黃鉆貴族可免費領(lǐng)取的道具 5.黃鉆活動,結(jié)構(gòu)圖法,實例：黃鉆等級,第二步. 畫樹狀圖,結(jié)構(gòu)圖法,實例：黃鉆等級,第二步. 畫樹狀圖,結(jié)構(gòu)圖法,實例：黃鉆等級,第二步. 畫樹狀圖,結(jié)構(gòu)圖法,實例：黃鉆等級,第三步. 草圖，演示,結(jié)構(gòu)圖法,練習(xí)：QQ空間日志,結(jié)構(gòu)圖法,練習(xí)：QQ空間日志,新的需求： 添加私密記事本 添加QQ心情 原有的日志需保留,結(jié)構(gòu)圖法,任務(wù)走查法,優(yōu)化現(xiàn)有產(chǎn)品的方法。成本低，見效快。對產(chǎn)品整體上影響小。,以用戶任務(wù)為線索，以可用性準(zhǔn)則為依據(jù)。,可用性準(zhǔn)則,頁面表達(dá)原則+信息構(gòu)架原則+視覺表現(xiàn)規(guī)范,任務(wù)走查法,視覺表現(xiàn)

7、規(guī)范,滾動條看上去應(yīng)該象滾動條 表單的對齊方式 重要的內(nèi)容顯示在第一屏 導(dǎo)航應(yīng)出現(xiàn)在第一屏上半部分 盡量避免使用裝飾性的圖標(biāo) 避免內(nèi)容看上去象廣告 光標(biāo)樣式 Tab需要有三種狀態(tài)而不是兩種 紅色表示警示，綠色表示ok，黃色表示提示 灰色通常表示“暫不可用”（disabled）,任務(wù)走查法,具體操作,第一步. 分析并總結(jié)所有任務(wù) 第二步. 根據(jù)任務(wù)進(jìn)行走查 評估中需要注意： 1. 不影響任務(wù)的問題不記錄 2. 被記錄的缺陷是有根據(jù)的,而不是根據(jù)自己的感覺。,任務(wù)走查法,實例：QQ秀快速換裝,任務(wù)走查法,實例：QQ秀快速換裝,第一步. 任務(wù)分析 換一套新形象 換表情 換心情 隨便逛逛 換一個自己以前的形象,任務(wù)走查法,實例：QQ秀快速換裝,第二步. 走查,任務(wù)走查法,實例：QQ秀快速換裝,第二步. 走查,任務(wù)走查法,實例：QQ秀快速換裝,第二步. 走查,任務(wù)走查法,實例：QQ秀快速換裝,第二步. 走查,任務(wù)走查法,實例：QQ秀快速換裝,第二步. 走查,任務(wù)走查法,實例：QQ秀快速換裝,第二步. 走查,任務(wù)走查法,實例：QQ秀快速換裝,第二步. 走查,任務(wù)走查法,練習(xí)：QQ秀 照相館,任務(wù)走查法,練習(xí)：QQ空間 心情,任務(wù)走查法,最后最后的總結(jié),交互設(shè)計的主要任務(wù)是： 表達(dá)。 通過清晰、準(zhǔn)確、簡潔的表達(dá)進(jìn)而實