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

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

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

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

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

本意是利用等待時間讓用戶了解操作幫助和相關(guān)信息，并讓用戶等待過程不至于太枯燥，但實(shí)際效果好嗎？頗有強(qiáng)推的意思操作原則響應(yīng)原則幫助原則習(xí)慣原則【幫助原則】告訴我在哪里、該干什么利用導(dǎo)航欄顯示用戶當(dāng)前所處的位置布丁優(yōu)惠用黃色文字+灰色圖片，提示用戶該優(yōu)惠券需要打印后使用操作原則響應(yīng)原則幫助原則習(xí)慣原則【幫助原則】適度引導(dǎo)我的焦點(diǎn)通過動態(tài)效果將用戶視覺從登陸引導(dǎo)到這里用戶不會關(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è)計對話框時，要注意：1.2.標(biāo)題簡潔、明確，不能有疑問語氣標(biāo)題、內(nèi)容、按鈕文本要一致，盡量用“確認(rèn)”、“取消”字眼操作原則響應(yīng)原則幫助原則習(xí)慣原則【習(xí)慣原則】符合我的認(rèn)知-2為什么要先輸入用戶名，而不是輸入郵箱或手機(jī)號？猜猜這是干什么的？順序一致性動作一致性操作原則響應(yīng)原則幫助原則習(xí)慣原則【習(xí)慣原則】參考生活習(xí)慣

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

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