目前交互設(shè)計(jì)在互聯(lián)網(wǎng)產(chǎn)品中的應(yīng)用狀況“交互設(shè)計(jì)可以提高產(chǎn)品可用性?！痹趪鴥?nèi)的互聯(lián)網(wǎng)行業(yè)中，建立在這個(gè)認(rèn)識基礎(chǔ)上，交互設(shè)計(jì)得到了普遍的接受?！爱a(chǎn)品設(shè)計(jì)開始的時(shí)候應(yīng)該先交互啊~~”“你這個(gè)項(xiàng)目沒交互過啊~~”這類的說法越來越多當(dāng)然是好的信息，但是，交互設(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)1.變化快。2.質(zhì)量低。3.功能操作與信息傳達(dá)并重。4.高速創(chuàng)新從而帶來的無標(biāo)準(zhǔn)。那么，互聯(lián)網(wǎng)產(chǎn)品的交互設(shè)計(jì)應(yīng)該怎么做？互聯(lián)網(wǎng)產(chǎn)品的交互設(shè)計(jì)方法分享方法一.自然語言法。設(shè)計(jì)交互細(xì)節(jié)的方法。方法二.結(jié)構(gòu)圖法。設(shè)計(jì)產(chǎn)品信息構(gòu)架的方法。方法三.細(xì)節(jié)和信息構(gòu)架。這三個(gè)方法的思路，是基于對交互設(shè)計(jì)工作內(nèi)容如下的分類：1.信息構(gòu)架2.交互細(xì)節(jié)但，嚴(yán)格來說，這樣的理解是不對的。交互設(shè)計(jì)工作原本就是“交互細(xì)節(jié)”工作。節(jié)合并起來，減少一個(gè)環(huán)節(jié)，更適應(yīng)互聯(lián)網(wǎng)產(chǎn)品的研發(fā)特點(diǎn)?！盀槭裁床话研畔?gòu)架工作交給產(chǎn)品經(jīng)理來做呢？”如果說交互設(shè)計(jì)工作的核心設(shè)計(jì)的工作包含了兩部分：信息構(gòu)架和交互細(xì)節(jié)。那么，下面我們就開始具體介紹這三個(gè)方法：方法一.自然語言法使用自然的語言來表達(dá)頁面信息。這是一個(gè)設(shè)計(jì)界面交互細(xì)節(jié)的方法。界面表達(dá)的要求是：清晰，明確，簡潔，得體。語言翻譯書面表達(dá)。除了思路，我們還需要必備的原則、常用的表達(dá)方式和具體操作步驟。頁面表達(dá)原則：1.更少的信息量更好。2.結(jié)構(gòu)化更易于理解。3.信息的表達(dá)應(yīng)該清楚、明確、直接。4.操作可識別。5.操作前，結(jié)果可預(yù)知。6.操作時(shí)，操作有反饋。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.多項(xiàng)并列的信息用7.不同的排序方式VS篩選內(nèi)容具體操作第一步.概括待表達(dá)的信息第二步.將概括好的信息排序第三步.使用界面語言翻譯實(shí)例：中信銀行卡第一步.概括信息：描述應(yīng)該是概括的，盡可能簡短。例如：●您選擇了回郵方式辦卡，概括解釋這個(gè)辦卡方式?！窠酉聛砟鷳?yīng)該下載申請表●回郵辦卡的全過程是這樣的…●一系列注意事項(xiàng)。第二步.排序：就是上面的順序，沒有變化。題即可。在翻譯過程中問題可能就解決掉了。第三步.翻譯：與之前界面對比：●開頭幾句信息順序需要整理，使上下文關(guān)系更清晰?！駥^程的描述可簡化?！瘛罢f明”應(yīng)更結(jié)構(gòu)化。而這并不意味著這里的工作是“優(yōu)化頁面原型”。需求的傳達(dá)總會有一定的形式，小心。師給出的思路，或許這是更好的方案：1.您選擇了回郵方式辦卡，概括解釋這個(gè)辦卡方式。2.第一步.下載、填寫申請表并回郵給中信3.第二步……..4.第四步……..這樣的信息概括和排序頁面表現(xiàn)將是什么樣子？你可以自己試著畫畫~~練習(xí)：QQ空間黃鉆催費(fèi)頁面說明：黃鉆貴族是QQ空間中的VIP用戶，黃鉆貴族用戶可以免費(fèi)適用空間中的裝扮，另外還可以享受到日志信紙、超大容量相冊等諸多特權(quán)。當(dāng)用戶的黃鉆貴族身份即將到期的時(shí)候，從QQ聊天主面板上的“我的錢包”提示：“錢包”閃動，點(diǎn)擊后用一個(gè)490*300px的小窗口告知用戶續(xù)費(fèi)的詳情。左側(cè)圖片在實(shí)際頁面中是一個(gè)flash動畫，若干張圖片切換，顯示黃鉆用戶可以裝扮出的更好的空間效果。付中心”鏈接（/cgi-bin/showopenservice.cgi?service_type=home），讓用戶可以在全部續(xù)費(fèi)方式中選擇。請使用上面介紹的自然語言法重新設(shè)計(jì)這個(gè)界面，讓信息表達(dá)的更高效、清晰、明確。參考方案需要表達(dá)的信息：●某某某，您的黃鉆要過期了?！顸S鉆貴族很棒滴~~●現(xiàn)在續(xù)費(fèi)黃鉆還有額外的優(yōu)惠?！窭m(xù)費(fèi)方式…更好的信息：●某某某，您的黃鉆要過期了。●您要是不再是黃鉆了，就有XXXXX損失啦~~●現(xiàn)在續(xù)費(fèi)黃鉆還有額外的優(yōu)惠?！窭m(xù)費(fèi)方式…總結(jié)“自然語言法”我們每天都會發(fā)生的，相對更容易，這個(gè)技能也更容易提高。方法仍舊適用。方法二.結(jié)構(gòu)圖法這個(gè)方法的思路：拋開頁面細(xì)節(jié)只考慮信息的組織形式。拋開頁面細(xì)節(jié)，是的，在確定了信息構(gòu)架之后，用自然語言法來解決。信息構(gòu)架的原則：1.一個(gè)頁面一個(gè)主要內(nèi)容。2.個(gè)人信息&公共信息。3.網(wǎng)頁基本內(nèi)容有兩種：列表和文檔4.更少的信息更好5.一個(gè)用戶自己生成內(nèi)容的document頁，有兩個(gè)狀態(tài)：瀏覽狀態(tài)&編輯狀態(tài)。6.信息樹應(yīng)該盡量窄而淺，并且盡量保持平衡。7.與現(xiàn)實(shí)生活經(jīng)驗(yàn)相符●頁面在網(wǎng)站中需要有一個(gè)固定的位置?！裢燃壍膬?nèi)容應(yīng)表現(xiàn)成并列的樣子。……信息構(gòu)架的常見模型：1.列表+詳情頁+列表聚合頁2.Wizard模式。第一步->第二步->第三步…3.主頁+若干個(gè)“臨時(shí)”頁面。例如：google帳戶具體操作第一步.明確描述全部內(nèi)容?？偨Y(jié)歸納產(chǎn)品所需要表達(dá)的所有信息。第二步.畫樹狀圖。第三步.的鏈接和按鈕。第四步.模擬演示網(wǎng)頁操作行為。實(shí)例：黃鉆等級第一步.總結(jié)歸納內(nèi)容：●用戶個(gè)人的的黃鉆等級信息●等級介紹●黃鉆功能特權(quán)介紹●黃鉆貴族可免費(fèi)領(lǐng)取的道具●黃鉆活動第二步.樹狀圖：圖如下：然而，信息構(gòu)架的設(shè)計(jì)往往要建立在對現(xiàn)有產(chǎn)品深刻的理解基礎(chǔ)上。Qzone黃鉆等級？我們的方案是這樣的：第三步.草圖：頁面之間跳轉(zhuǎn)的關(guān)系。最后，第四步.手握原型，演示頁面間的跳轉(zhuǎn)，確保整個(gè)流程的順暢。練習(xí)：QQ空間日志、心情、私密記事本參考方案總結(jié)歸納內(nèi)容：1.日志2.心情3.私密記事本樹狀圖：方案一：●主頁●“大日志”■日志■心情■私密記事本●音樂盒●留言板●相冊……方案二：●主頁●日志●心情●私密記事本●音樂盒●留言板●相冊…畫畫…方法三.任務(wù)走查法這是一種優(yōu)化現(xiàn)有產(chǎn)品的方法。成本低，見效快。對產(chǎn)品整體上影響小。以用戶任務(wù)為線索，以可用性準(zhǔn)則為依據(jù)。是的，這個(gè)說話很好記，類似“以事實(shí)為依據(jù)，以法律為準(zhǔn)繩?！薄坝脩羧蝿?wù)”是指用戶實(shí)際使用這個(gè)產(chǎn)品時(shí)需要完成的任務(wù)。這個(gè)方法中，需要操起討論一下，通常是可以比較準(zhǔn)確的描述出用戶任務(wù)的?！翱捎眯詼?zhǔn)則”在這個(gè)方法中是指：頁面表達(dá)原則、信息構(gòu)架原則、視覺表現(xiàn)規(guī)范，起發(fā)現(xiàn)。視覺表現(xiàn)規(guī)范1.滾動條看上去應(yīng)該象滾動條2.表單的對齊方式3.重要的內(nèi)容顯示在第一屏4.導(dǎo)航應(yīng)出現(xiàn)在第一屏上半部分5.盡量避免使用裝飾性的圖標(biāo)6.避免內(nèi)容看上去象廣告7.光標(biāo)樣式8.Tab需要有三種狀態(tài)而不是兩種9.紅色表示警示，綠色表示ok，黃色表示提示10.灰色通常表示“暫不可用”（disabled）具體操作第一步.分析并總結(jié)所有任務(wù)第二步.根據(jù)任務(wù)進(jìn)行評估評估中需要注意：1.不影響任務(wù)的問題不記錄2.被記錄的缺陷是有根據(jù)的（根據(jù)可用性準(zhǔn)則），而不是根據(jù)自己的感覺。實(shí)例：QQ秀快速換裝第一步.任務(wù)列表：●換一套新形象●換表情●換心情●隨便逛逛●換一個(gè)自己以前的形象第二步.評估。以“換心情”任務(wù)為例：問題1副標(biāo)題表意不明確描述：幾乎是沒有用的，沒有傳達(dá)任何信息量。依據(jù)：頁面表達(dá)原則：信息的表達(dá)應(yīng)該清楚、明確、直接。問題2“請輸入心情秀”表意不明描述：入文字”。沒有第一句，直接是第二句，需要用戶花些時(shí)間來推斷，推斷出，這里顯示“請輸入心情秀文字”是因?yàn)樽约簺]有寫文字進(jìn)去。依據(jù)：頁面表達(dá)原則：信息的表達(dá)應(yīng)該清楚、明確、直接。問題3拖動心情秀時(shí)，光標(biāo)使用不正確描述：光標(biāo)在框中的是link作。依據(jù)：視覺表現(xiàn)規(guī)范：光標(biāo)問題4“心情秀”概念不清描述：“心情秀預(yù)覽”暗示出，“心情秀”是指外框+文字內(nèi)容?！皳Q心情秀”功能只是換框，這意味著“心情秀”是指外框。措辭上的含混使得同一個(gè)名詞出現(xiàn)兩種不同的定義，不易于理解。“既然心情秀是指外框+文字內(nèi)容，那么當(dāng)我點(diǎn)擊“下一個(gè)”后，其中的文字內(nèi)容是不是也會變化？”依據(jù)：頁面表達(dá)原則：措辭統(tǒng)一問題5換心情秀外框操作不便描述：中所處位置。依據(jù)：頁面表達(dá)原則：操作結(jié)果不可預(yù)知問題6“預(yù)覽”按鈕視覺效果不佳描述：預(yù)覽按鈕視覺樣式比較象disabled依據(jù)：灰色通常表示“暫不可用”（disabled）問題7“脫掉”按鈕不易找到描述：“脫掉”按鈕在框的有下角，很多時(shí)候看不到，并且文字超小。依據(jù)：頁面表達(dá)原則：信息的表達(dá)應(yīng)該清楚、明確、直接。練習(xí)1：QQ秀照相館練習(xí)2：Qzone滔滔心情總結(jié)任務(wù)走查法：為什么要強(qiáng)調(diào)是“按任務(wù)”。因?yàn)椋愃啤氨４嫘蜗蟀粹o太難看啦~~”之類的問題是不應(yīng)該提出來的。因?yàn)橛脩粼趯?shí)際使用的時(shí)候，這個(gè)問題是遠(yuǎn)遠(yuǎn)不如“誤以為預(yù)覽按鈕不能點(diǎn)擊”重要。“按任務(wù)”是在確保評估更接近真實(shí)。“按任務(wù)”很多時(shí)候與“按欄目”差不多的，但是按任務(wù)的優(yōu)點(diǎn)在于：1.cover到了各個(gè)欄目之間跳轉(zhuǎn)可能出現(xiàn)的問題。2.抓住了重點(diǎn)的問題，而放過了無關(guān)緊要的問題。比如：“申請紅鉆”按鈕。