互聯(lián)網(wǎng)交互設(shè)計方法V1.ppt

1、互聯(lián)網(wǎng)交互設(shè)計方法交互設(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è)計方法：方法一. 自然語言法方法二. 結(jié)構(gòu)圖法方法三. 任務(wù)走查法自然語言法使用自然的語言

2、來表達(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. 圖形更吸引人。4. 動畫會被誤認(rèn)為是廣告。5. 內(nèi)容邏輯：并列關(guān)系；從屬關(guān)系。6. 多項并列的信息：7. 不同的

3、排序方式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)。6.信息樹應(yīng)該盡量窄而淺，并且盡量保持平衡。7.與現(xiàn)實生活經(jīng)驗相符 頁面在網(wǎng)站中需要有 一個 固定 的位置。 同等級的內(nèi)容應(yīng)表現(xiàn)成并列的樣子。 結(jié)構(gòu)圖法信息構(gòu)架的常見模型列表+詳情頁+列表聚合頁Wi

5、zard模式。第一步-第二步-第三步 主頁+若干個“臨時”頁面。 例如：google accounts結(jié)構(gòu)圖法具體操作第一步. 總結(jié)歸納全部待表達(dá)的信息。第二步. 畫樹狀圖。第三步. 畫頁面草圖，演示。 (其中包含：頁面標(biāo)題、導(dǎo)航、重要的鏈接和按鈕。)結(jié)構(gòu)圖法實例：黃鉆等級結(jié)構(gòu)圖法實例：黃鉆等級結(jié)構(gòu)圖法實例：黃鉆等級結(jié)構(gòu)圖法實例：黃鉆等級第一步. 概括信息用戶個人的的黃鉆等級信息等級介紹3.黃鉆功能特權(quán)介紹4.黃鉆貴族可免費領(lǐng)取的道具5.黃鉆活動結(jié)構(gòu)圖法實例：黃鉆等級第二步. 畫樹狀圖結(jié)構(gòu)圖法實例：黃鉆等級第二步. 畫樹狀圖結(jié)構(gòu)圖法實例：黃鉆等級第二步. 畫樹狀圖結(jié)構(gòu)圖法實例：黃鉆等級第三步.

6、 草圖，演示結(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)規(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ù)

7、第二步. 根據(jù)任務(wù)進(jìn)行走查評估中需要注意：1. 不影響任務(wù)的問題不記錄2. 被記錄的缺陷是有根據(jù)的,而不是根據(jù)自己的感覺。任務(wù)走查法實例：QQ秀快速換裝任務(wù)走查法實例：QQ秀快速換裝第一步. 任務(wù)分析換一套新形象換表情換心情隨便逛逛換一個自己以前的形象任務(wù)走查法實例：QQ秀快速換裝第二步. 走查問題1副標(biāo)題表意不明確描述這句說明仍舊沒能說明“這里是什么功能”。如果能通過這句話說明：“在這里添加文字內(nèi)容，顯露您的心情”，說明的效果會更好。至于“讓好友都知道！”這幾個字幾乎是沒有用的，沒有傳達(dá)任何信息量。依據(jù)頁面表達(dá)原則：信息的表達(dá)應(yīng)該清楚、明確、直接。修改建議任務(wù)走查法實例：QQ秀快速換裝第二步

8、. 走查問題2“請輸入心情秀”表意不明確描述 “請輸入心情秀文字”其實是第二層要表達(dá)的信息，第一層應(yīng)該是：“這里還沒有輸入文字”。沒有第一句，直接是第二句，需要用戶花些時間來推斷，推斷出，這里顯示“請輸入心情秀文字”是因為自己沒有寫文字進(jìn)去。依據(jù)頁面表達(dá)原則：信息的表達(dá)應(yīng)該清楚、明確、直接。修改建議任務(wù)走查法實例：QQ秀快速換裝第二步. 走查問題3拖動預(yù)覽中的心情秀時的光標(biāo)使用錯誤描述 拖動預(yù)覽圖中的心情秀時，光標(biāo)為 應(yīng)該使用十字箭頭。依據(jù)視覺表現(xiàn)規(guī)范：光標(biāo)樣式修改建議任務(wù)走查法實例：QQ秀快速換裝第二步. 走查問題4“心情秀”概念不清描述“心情秀預(yù)覽”暗示出，“心情秀”是指外框+文字內(nèi)容?！?/p>

9、換心情秀”功能只是換框，這意味著“心情秀”是指外框。措辭上的含混使得同一個概念出現(xiàn)兩種不同的定義，不易于理解。最直接的反應(yīng)是：“既然心情秀是指外框+文字內(nèi)容，那么當(dāng)我點擊 下一個 后，其中的文字內(nèi)容是不是也會變化？”依據(jù)頁面表達(dá)原則：措辭統(tǒng)一修改建議任務(wù)走查法實例：QQ秀快速換裝第二步. 走查問題5換心情秀外框操作不便描述 “上一個”“下一個”的操作不方便。無預(yù)覽圖，無法確定當(dāng)前選項在全部“框”的列表中所處位置。依據(jù)頁面表達(dá)原則：操作結(jié)果不可預(yù)知修改建議任務(wù)走查法實例：QQ秀快速換裝第二步. 走查問題6“預(yù)覽”按鈕視覺效果不佳描述 預(yù)覽按鈕視覺樣式比較象disabled 依據(jù)灰色通常表示“暫不可用”（disabled）修改建議任務(wù)走查法實例：QQ秀快速換裝第二步. 走查問題7“脫掉”按鈕不易找到描述“脫掉”按鈕在框的有下角，很多時候看不到，并且文字超小。依據(jù)頁面表達(dá)原則：信息的表達(dá)應(yīng)該清楚、明確、直接。修改建議任務(wù)走查法練習(xí)：QQ秀 照相館任務(wù)走查法練習(xí)：QQ空間 心情任務(wù)走查法最后最后的總結(jié)交互設(shè)計的主要任務(wù)是：表達(dá)。通過清晰、準(zhǔn)確、簡潔的表達(dá)進(jìn)而實現(xiàn)人機交互。最后最后的總結(jié)“互聯(lián)網(wǎng)產(chǎn)品的交互設(shè)計應(yīng)該怎么做？”