交互設(shè)計(jì)細(xì)節(jié)案例分析

交互設(shè)計(jì)案例分析操作響應(yīng)幫助習(xí)慣其它操作原則——圍繞用戶目標(biāo)化繁為簡(jiǎn)幫助用戶高效完成任務(wù)連貫順暢輕松有趣選擇替代輸入操作原則響應(yīng)原則幫助原則習(xí)慣原則【操作原則】減輕操作的負(fù)擔(dān)-1自動(dòng)補(bǔ)全郵箱地址后綴，簡(jiǎn)化了用戶操作用轉(zhuǎn)輪方式進(jìn)行選擇，替代輸入的不便擴(kuò)展按鍵面積操作原則響應(yīng)原則幫助原則習(xí)慣原則【操作原則】減輕操作的負(fù)擔(dān)-2滑屏?xí)r顯示滑動(dòng)塊，方便用戶上下拉動(dòng)進(jìn)行快速定位擴(kuò)大字符的顯示和接觸區(qū)域，所選字符不會(huì)被手指擋住操作原則響應(yīng)原則幫助原則習(xí)慣原則【操作原則】保持任務(wù)的連貫-1Chrome考慮到用戶連續(xù)關(guān)閉標(biāo)簽的場(chǎng)景：

IE8則沒(méi)有考慮此種應(yīng)用場(chǎng)景：要關(guān)閉某個(gè)標(biāo)簽，必須先激活；其次，關(guān)閉后，將馬上重新計(jì)算各標(biāo)簽的寬度關(guān)閉某個(gè)標(biāo)簽，其后剩余標(biāo)簽并沒(méi)有及時(shí)地調(diào)整尺寸，而是整體向前移動(dòng)，用戶鼠標(biāo)會(huì)自然落在下一個(gè)標(biāo)簽的關(guān)閉按鈕上操作原則響應(yīng)原則幫助原則習(xí)慣原則【操作原則】保持任務(wù)的連貫-2考慮到輸入時(shí)鍵盤(pán)會(huì)遮擋下半部，自動(dòng)將按鈕位置上提操作原則響應(yīng)原則幫助原則習(xí)慣原則【操作原則】保持任務(wù)的連貫-3操作按鈕置于導(dǎo)航欄，較之前一處理孰優(yōu)孰劣？?jī)煞N輸入框顯示方式，哪種更自然？操作原則響應(yīng)原則幫助原則習(xí)慣原則【操作原則】保持任務(wù)的連貫-4閱讀模式開(kāi)啟后，到頁(yè)尾處會(huì)自動(dòng)加載下頁(yè)內(nèi)容，確保用戶閱讀的流暢性自動(dòng)加載不宜過(guò)多，控制在若干屏內(nèi)操作原則響應(yīng)原則幫助原則習(xí)慣原則【操作原則】輕松愜意的體驗(yàn)搖一搖加好友，感覺(jué)新奇刺激滑動(dòng)手勢(shì)實(shí)現(xiàn)熱詞切換，結(jié)合動(dòng)態(tài)效果，感覺(jué)很有趣響應(yīng)原則——所見(jiàn)即所得預(yù)見(jiàn)讓用戶操作前有一定的

可預(yù)見(jiàn)性感性讓用戶感受到正在交流的是“感性的朋友有效讓用戶感受到“他的操作是有反應(yīng)的、有效果的操作原則響應(yīng)原則幫助原則習(xí)慣原則【響應(yīng)原則】這不是我的錯(cuò)-1問(wèn)題篇

提示用戶改正錯(cuò)誤時(shí)，應(yīng)該禮貌。他們?cè)谟媚銘?yīng)用的時(shí)候，需要被認(rèn)為是聰明的。如果出錯(cuò)了，不要將錯(cuò)誤的判斷和解決丟給用戶提示信息過(guò)于簡(jiǎn)單，沒(méi)有原由說(shuō)明，讓用戶無(wú)所適從有錯(cuò)誤原由，但含混籠統(tǒng)，用戶仍不能明確問(wèn)題所在操作原則響應(yīng)原則幫助原則習(xí)慣原則【響應(yīng)原則】這不是我的錯(cuò)-2基礎(chǔ)篇明確給出錯(cuò)誤原因，有效地指導(dǎo)用戶后續(xù)操作錯(cuò)誤信息要盡量準(zhǔn)確、通俗易懂，告知用戶為什么操作被中斷，以及出現(xiàn)了什么錯(cuò)誤，并提供解決方案以使用戶能夠進(jìn)行修復(fù)操作原則響應(yīng)原則幫助原則習(xí)慣原則【響應(yīng)原則】這不是我的錯(cuò)-3進(jìn)階篇差異化提示，讓你產(chǎn)生思維停頓；擬人化語(yǔ)氣，讓你欲罷不能退出界面加入頻道推薦，好似說(shuō)“你不再來(lái)點(diǎn)兒別的”操作原則響應(yīng)原則幫助原則習(xí)慣原則【響應(yīng)原則】這不是我的錯(cuò)-4高級(jí)篇針對(duì)用戶誤操作產(chǎn)生的困惑，及時(shí)給予了相關(guān)說(shuō)明和解決方案；并巧妙地淡化了用戶的誤操作，增加了趣味性贊！你發(fā)現(xiàn)了會(huì)話窗口拖動(dòng)的秘密。按住頭像還可以拖回去哦，快試試吧操作原則響應(yīng)原則幫助原則習(xí)慣原則【響應(yīng)原則】別讓我等待-1原理篇超過(guò)10秒，需要將任務(wù)進(jìn)行拆解1秒是用戶保持不間斷思維流的限定時(shí)間，超過(guò)情況下用戶會(huì)想在等待期間去處理其他事務(wù)，所以需要顯示將要完成的時(shí)間或進(jìn)度0.1秒內(nèi)顯示反饋用戶是可以接受的，超過(guò)情況下沒(méi)有特別的信息反饋時(shí)，用戶是會(huì)產(chǎn)生疑惑的加載過(guò)程沒(méi)有任何時(shí)間進(jìn)度顯示操作原則響應(yīng)原則幫助原則習(xí)慣原則【響應(yīng)原則】別讓我等待-2基礎(chǔ)篇進(jìn)度條加文字方式明確告知當(dāng)前狀態(tài)明確告知進(jìn)度、剩余時(shí)間、當(dāng)前速率操作原則響應(yīng)原則幫助原則習(xí)慣原則【響應(yīng)原則】別讓我等待-3進(jìn)階篇用笑話來(lái)減緩用戶等待的煩躁情緒等待過(guò)程中心形會(huì)不斷跳動(dòng)，非常有趣，有助于緩解用戶緊張的情緒幫助原則——適量的幫助多、繁適量少、簡(jiǎn)過(guò)多或過(guò)繁，會(huì)讓用戶感到煩躁、不能清晰的找到準(zhǔn)確的幫助；過(guò)少或過(guò)簡(jiǎn)，則可能無(wú)法覆蓋用戶的問(wèn)題、讓用戶無(wú)從下手要考慮應(yīng)用場(chǎng)景和用戶行為來(lái)給出操作原則響應(yīng)原則幫助原則習(xí)慣原則【幫助原則】只在我需要的時(shí)候-1對(duì)于刷新時(shí)間較近的，可以直接提示時(shí)間間隔，如“上次刷新：提示上次刷新時(shí)間，避免重復(fù)刷新、節(jié)省流量和時(shí)間15分鐘前”，想想，為什么呢？①更多細(xì)節(jié)，根據(jù)手指下拉的行程給出不同的提示②操作原則響應(yīng)原則幫助原則習(xí)慣原則【幫助原則】只在我需要的時(shí)候-2等待過(guò)程中給出更多幫助及提示信息

本意是利用等待時(shí)間讓用戶了解操作幫助和相關(guān)信息，并讓用戶等待過(guò)程不至于太枯燥，但實(shí)際效果好嗎？頗有強(qiáng)推的意思操作原則響應(yīng)原則幫助原則習(xí)慣原則【幫助原則】告訴我在哪里、該干什么利用導(dǎo)航欄顯示用戶當(dāng)前所處的位置布丁優(yōu)惠用黃色文字+灰色圖片，提示用戶該優(yōu)惠券需要打印后使用操作原則響應(yīng)原則幫助原則習(xí)慣原則【幫助原則】適度引導(dǎo)我的焦點(diǎn)通過(guò)動(dòng)態(tài)效果將用戶視覺(jué)從登陸引導(dǎo)到這里用戶不會(huì)關(guān)注頁(yè)面上的所有內(nèi)容大塊的紅色背景突出了拍照上傳功能習(xí)慣原則——符合用戶習(xí)慣地上本沒(méi)有路，走的人多了，也便成了路——魯迅假如你做的是創(chuàng)新性產(chǎn)品，就需要在這點(diǎn)上多下些功夫；假如是借鑒型產(chǎn)品，最好是沿用常見(jiàn)的方式；重要的是，你的設(shè)定是有絕對(duì)理由支撐的，切忌不要挑戰(zhàn)用戶習(xí)慣操作原則響應(yīng)原則幫助原則習(xí)慣原則【習(xí)慣原則】符合我的認(rèn)知-1文字一致性圖標(biāo)一致性設(shè)計(jì)對(duì)話框時(shí)，要注意：1.2.標(biāo)題簡(jiǎn)潔、明確，不能有疑問(wèn)語(yǔ)氣標(biāo)題、內(nèi)容、按鈕文本要一致，盡量用“確認(rèn)”、“取消”字眼操作原則響應(yīng)原則幫助原則習(xí)慣原則【習(xí)慣原則】符合我的認(rèn)知-2為什么要先輸入用戶名，而不是輸入郵箱或手機(jī)號(hào)？猜猜這是干什么的？順序一致性動(dòng)作一致性操作原則響應(yīng)原則幫助原則習(xí)慣原則【習(xí)慣原則】參考生活習(xí)慣

手機(jī)象棋游戲采用了和現(xiàn)實(shí)中象棋的棋子輪廓和棋盤(pán)格子，源自生活實(shí)物元素的提取和臨摹，提升了易學(xué)性操作原則響應(yīng)原則幫助原則習(xí)慣原則【習(xí)慣原則】不要產(chǎn)生歧義如何獲取用戶賬號(hào)及密碼你以為是重置密碼或修改賬號(hào)，但實(shí)際上是……操作原則響應(yīng)原則幫助原則習(xí)慣原則【習(xí)慣原則】隱藏不必要的-1滑動(dòng)瀏覽分類時(shí)自動(dòng)隱藏搜索，回到頂部后再取消隱藏操作原則響應(yīng)原則幫助原則習(xí)慣原則【習(xí)慣原則】隱藏不必要的-2打開(kāi)某個(gè)分類并在其下的人員列表滑動(dòng)時(shí)，會(huì)自動(dòng)將分類移到屏幕頂端

如果一打開(kāi)某個(gè)分類，就自動(dòng)將其移到屏幕頂端，豈不更好？其它關(guān)于交互設(shè)計(jì)簡(jiǎn)約人文【簡(jiǎn)約風(fēng)格】Metro–返樸歸真1【簡(jiǎn)約風(fēng)格】Metro–返樸歸真2【人文關(guān)懷】真實(shí)鮮活的氣息-1啟動(dòng)界面，背景采用更加生活化的圖片，投射出生活的氣息和人文的情懷【人文關(guān)懷】真實(shí)鮮活的氣息-2趣味十足的啟動(dòng)畫(huà)面–來(lái)自Zaker首界面展示玩家對(duì)應(yīng)用的評(píng)價(jià)，讓你直觀了解、引發(fā)使用欲望謝謝聆聽(tīng)！下期預(yù)告：視覺(jué)認(rèn)知與交互設(shè)計(jì)下期預(yù)告：視覺(jué)認(rèn)知與交互設(shè)計(jì)做個(gè)小測(cè)試…觀察右側(cè)的應(yīng)用圖標(biāo)，快速記憶如下細(xì)節(jié)：1、是否有日歷？標(biāo)識(shí)的日期是幾號(hào)？、是否有記事本？其上的文字是什么？2下期預(yù)告：視覺(jué)認(rèn)知與