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

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

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