互聯(lián)網(wǎng)交互設(shè)計(jì)方法

臭魚2008.10交互設(shè)計(jì)重要，但卻不知要怎么做。？交互設(shè)計(jì)是什么？交互設(shè)計(jì)是一個(gè)設(shè)計(jì)工作。交互設(shè)計(jì)是一門技術(shù)。交互設(shè)計(jì)在目前階段的主要使命是提高產(chǎn)品可用性。通過對界面和操作行為的設(shè)計(jì)提高產(chǎn)品可用性?；ヂ?lián)網(wǎng)產(chǎn)品的特點(diǎn)變化快。質(zhì)量低。功能操作與信息傳達(dá)并重。高速創(chuàng)新從而帶來的無標(biāo)準(zhǔn)。那么，

互聯(lián)網(wǎng)產(chǎn)品的交互設(shè)計(jì)應(yīng)該怎么做？互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計(jì)方法：方法一.自然語言法方法二.結(jié)構(gòu)圖法方法三.任務(wù)走查法交互設(shè)計(jì)工作分為兩部分：信息構(gòu)架交互細(xì)節(jié)其實(shí)不是這樣…交互設(shè)計(jì)工作分為兩部分：信息構(gòu)架交互細(xì)節(jié)互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計(jì)方法：方法一.自然語言法方法二.結(jié)構(gòu)圖法方法三.任務(wù)走查法自然語言法使用自然的語言來表達(dá)頁面信息。面對面的傳達(dá)信息->書面表達(dá)->界面語言頁面表達(dá)達(dá)原則1.更更少的信信息量更更好。2.結(jié)結(jié)構(gòu)化更更易于理理解。3.信信息的表表達(dá)應(yīng)該該清楚、、明確、、直接。。4.操操作可識(shí)識(shí)別。5.操操作前，，結(jié)果可可預(yù)知。。6.操操作時(shí)，，操作有有反饋。。7.操操作后，，操作可可撤銷。。8.讓讓用戶知知道身處處何地。。9.避避免內(nèi)容容看上去去象廣告告。10.不不提供供多余的的功能。。11.相相同的的功能，，在不同同的頁面面中應(yīng)保保持一致致性。12.措措辭統(tǒng)統(tǒng)一。自然語言言法常用的頁頁面表達(dá)達(dá)方式1.從從左到右右，從上上到下。。2.大大字更突突出。3.圖圖形更吸吸引人。。4.動(dòng)動(dòng)畫會(huì)被被誤認(rèn)為為是廣告告。5.內(nèi)內(nèi)容邏輯輯：并列列關(guān)系；；從屬關(guān)關(guān)系。6.多多項(xiàng)并列列的信息息：7.不不同的排排序方式式VS篩篩選內(nèi)容容自然語言言法具體操作作第一步.概括括待表達(dá)達(dá)的信息息第二步.將概概括好的的信息排排序第三步.使用用界面語語言翻譯譯自然語言言法實(shí)例：中中信銀行行卡活動(dòng)動(dòng)自然語言言法自然語言言法實(shí)例：中中信銀行行卡活動(dòng)動(dòng)第一步.概括括信息您選擇了了回郵方方式辦卡卡，概括括解釋這這個(gè)辦卡卡方式。。接下來您您應(yīng)該下下載申申請表回郵辦卡卡的全過過程是這這樣的...一系列注注意事項(xiàng)項(xiàng)。自然語言言法實(shí)例：中中信銀行行卡活動(dòng)動(dòng)第二步.排序序1.您您選擇了了回郵方方式辦卡卡，概括解釋釋這個(gè)辦辦卡方式式。2.接接下來您您應(yīng)該下下載申申請表3.回回郵辦卡卡的全過過程是這這樣的...4.一一系列注注意事項(xiàng)項(xiàng)。自然語言言法實(shí)例：中中信銀行行卡活動(dòng)動(dòng)第三步.翻譯譯為界面面語言自然語言言法自然語言言法實(shí)例：中中信銀行行卡活動(dòng)動(dòng)另外一種種表達(dá)：：1.您您選擇了了回郵方方式辦卡卡，概括括解釋這這個(gè)辦卡卡方式。。2.第第一步.下載載、填寫寫申請表表并回郵郵給中信信3.第第二步……………………………..4.第第四步……………………………..自然語言言法練習(xí)：QQ空間間黃鉆催催費(fèi)頁面面自然語言言法結(jié)構(gòu)圖法法拋開頁面面細(xì)節(jié)只只考慮信信息的組組織形式式。信息構(gòu)架架的原則則1.一一個(gè)頁面面一個(gè)主主要內(nèi)容容。2.個(gè)個(gè)人信息息與公公共信信息。3.網(wǎng)網(wǎng)頁基本本內(nèi)容有有兩種：：列表和和文文檔4.更更少的信信息更好好5.一一個(gè)用戶戶自己生生成內(nèi)容容的頁面面，有兩兩個(gè)狀態(tài)態(tài)：瀏覽覽狀態(tài)&編輯狀狀態(tài)。6.信信息樹應(yīng)應(yīng)該盡量量窄而淺淺，并且且盡量保保持平衡衡。7.與與現(xiàn)實(shí)生生活經(jīng)驗(yàn)驗(yàn)相符頁面在網(wǎng)網(wǎng)站中需需要有一一個(gè)固固定的的位置置。同等級的的內(nèi)容應(yīng)應(yīng)表現(xiàn)成成并列的的樣子。?！Y(jié)構(gòu)圖法法信息構(gòu)架架的常見見模型列表+詳詳情頁+列表聚聚合頁Wizard模模式。第第一步->第二二步->第三步步…主頁+若若干個(gè)““臨時(shí)””頁面。。例例如：：googleaccounts結(jié)構(gòu)圖法法具體操作作第一步.總結(jié)結(jié)歸納全全部待表表達(dá)的信信息。第二步.畫樹樹狀圖。。第三步.畫頁頁面草圖圖，演示示。(其中包包含：頁頁面標(biāo)題題、導(dǎo)航航、重要要的鏈接接和按鈕鈕。)結(jié)構(gòu)圖法法實(shí)例：黃黃鉆等級級結(jié)構(gòu)圖法法實(shí)例：黃黃鉆等級級結(jié)構(gòu)圖法法實(shí)例：黃黃鉆等級級結(jié)構(gòu)圖法法實(shí)例：黃黃鉆等級級第一步.概括括信息用戶個(gè)人人的的黃黃鉆等級級信息等級介紹紹3.黃黃鉆功能能特權(quán)介介紹4.黃黃鉆貴族族可免費(fèi)費(fèi)領(lǐng)取的的道具5.黃黃鉆活動(dòng)動(dòng)結(jié)構(gòu)圖法法實(shí)例：黃黃鉆等級級第二步.畫樹樹狀圖結(jié)構(gòu)圖法法實(shí)例：黃黃鉆等級級第二步.畫樹樹狀圖結(jié)構(gòu)圖法法實(shí)例：黃黃鉆等級級第二步.畫樹樹狀圖結(jié)構(gòu)圖法法實(shí)例：黃黃鉆等級級第三步.草圖圖，演示示結(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ī)范范滾動(dòng)條看上去去應(yīng)該象滾動(dòng)動(dò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ù)走查法實(shí)例：QQ秀秀快速換裝任務(wù)走查法實(shí)例：QQ秀秀快速換裝第一步.任任務(wù)分析換一套新形象象換表情換心情隨便逛逛換一個(gè)自己以以前的形象任務(wù)走查法實(shí)例：QQ秀秀快速換裝第二步.走走查問題1副標(biāo)題表意不明確描述這句說明仍舊沒能說明“這里是什么功能”。如果能通過這句話說明：“在這里添加文字內(nèi)容，顯露您的心情”，說明的效果會(huì)更好。至于“讓好友都知道！”這幾個(gè)字幾乎是沒有用的，沒有傳達(dá)任何信息量。依據(jù)頁面表達(dá)原則：信息的表達(dá)應(yīng)該清楚、明確、直接。修改建議任務(wù)走查法實(shí)例：QQ秀秀快速換裝第二步.走走查問題2“請輸入心情秀”表意不明確描述

“請輸入心情秀文字”其實(shí)是第二層要表達(dá)的信息，第一層應(yīng)該是：“這里還沒有輸入文字”。沒有第一句，直接是第二句，需要用戶花些時(shí)間來推斷，推斷出，這里顯示“請輸入心情秀文字”是因?yàn)樽约簺]有寫文字進(jìn)去。依據(jù)頁面表達(dá)原則：信息的表達(dá)應(yīng)該清楚、明確、直接。修改建議任務(wù)走查法第二步.走走查問題3拖動(dòng)預(yù)覽中的心情秀時(shí)的光標(biāo)使用錯(cuò)誤描述拖動(dòng)預(yù)覽圖中的心情秀時(shí)，光標(biāo)為應(yīng)該使用十字箭頭。依據(jù)視覺表現(xiàn)規(guī)范：光標(biāo)樣式修改建議任務(wù)走查法實(shí)例：QQ秀秀快速換裝第二步.走走查問題4“心情秀”概念不清描述“心情秀預(yù)覽”暗示出，“心情秀”是指外框+文字內(nèi)容。“換心情秀”功能只是換框，這意味著“心情秀”是指外框。措辭上的含混使得同一個(gè)概念出現(xiàn)兩種不同的定義，不易于理解。最直接的反應(yīng)是：“既然心情秀是指外框+文字內(nèi)容，那么當(dāng)我點(diǎn)擊下一個(gè)后，其中的文字內(nèi)容是不是也會(huì)變化？”依據(jù)頁面表達(dá)原則：措辭統(tǒng)一修改建議任務(wù)走查法實(shí)例：QQ秀秀快速換裝第二步.走走查問題5換心情秀外框操作不便描述“上一個(gè)”“下一個(gè)”的操作不方便。無預(yù)覽圖，無法確定當(dāng)前選項(xiàng)在全部“框”的列表中所處位置。依據(jù)頁面表達(dá)原則：操作結(jié)果不可預(yù)知修改建議任務(wù)走查法實(shí)例：QQ秀秀快速換裝第二步.走走查問題6“預(yù)覽”按鈕視覺效果不佳描述預(yù)覽按鈕視覺樣式比較象disabled依據(jù)灰色通常表示“暫不可用”（disabled）修改建議任務(wù)走查法實(shí)例：QQ秀秀快速換裝第二步.走走查問題7“脫掉”按鈕不易找到描述“脫掉”按鈕在框的有下角，很多時(shí)候看不到，并且文字超小。依據(jù)頁面表達(dá)原則：信息的表達(dá)應(yīng)該清楚、明確、直接。修改建議任務(wù)走查法練習(xí)：QQ秀秀照相館任務(wù)走查法任務(wù)走查