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

交互設(shè)計(jì)案例分析操作響應(yīng)幫助習(xí)慣其它操作原則——圍繞用戶目標(biāo)化繁為簡幫助用戶高效完成任務(wù)連貫順暢輕松有趣選擇替代輸入操作原則響應(yīng)原則幫助原則習(xí)慣原則【操作原則】減輕操作的負(fù)擔(dān)-1自動(dòng)補(bǔ)全郵箱地址后綴，簡化了用戶操作用轉(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)簽的場景：

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

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

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

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

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

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