1. 程式人生 > >前端的UI設計與交互之反饋示篇

前端的UI設計與交互之反饋示篇

指向 優先 進一步 承載 not 交互操作 對象 自動 con

  

為了幫助用戶了解應用當前要做什麽,也給用戶的下一步行為做參考,以及了解操作後所產生的結果 ,當用戶和系統需要交互時,使用不同的模式來反饋信息或結果。當設計者使用反饋或者自定義一些反饋時,請註意:
為用戶在各個階段提供必要、積極、即時的反饋;
避免過度反饋,以免給用戶帶來不必要的打擾,能夠及時看到效果的、簡單的操作,可以省略反饋提示。
一、提示信息
1、警告
警告提示(Alert)
是一種非阻礙式的信息展示,它不打斷用戶的當前操作,一般停留至頁面某個位置(優先頂部),非浮層的靜態展現形式,始終展現,不會自動消失,用戶可以點擊關閉。
註:關閉按鈕可根據業務需要增加或隱藏。
2、通知
a)通知提醒(Notification)
系統主動推送的重要的全局性通知信息,在系統右上角顯示。
b)徽標數(Badge)
用於聚合型的消息提示,一般出現在通知圖標或頭像的右上角,通過醒目的視覺形式吸引用戶眼球。
註:相對重要和用戶關聯度更高的信息提示,使用數字精準提示;權重不高和不是用戶特別關心的消息提示,使用紅點做提示。
c)幫助
氣泡卡片(Popover)
註:和 Tooltip 的區別是,Popover 可以承載更復雜的內容,比如鏈接或按鈕等。
文字提示(Tooltip)
用於精確地描述被指向的對象,例如圖標、圖形、鏈接等,鼠標移入則顯示提示,移出消失,不承載復雜文本和操作。
二、過程反饋
操作過程中盡可能將狀態的反饋給用戶,即時的響應會給用戶增加信賴感。
1、加載狀態進度反饋
在操作需要一段時間(一般為超過2秒)完成時系統應即時給予提醒,明確告知加載的狀態或加載進度條,保持與用戶的溝通。
註:若加載時間較長,應提供取消操作。
2、錄入反饋
操作過程中可通過不同的校驗規則和形式,讓用戶及時發現並糾正錯誤。
註:反饋文字緊跟著要說明的區塊(反饋內容一般是錯誤說明),不自動消失(當用戶進行相應的交互操作後才消失)。
3、氣泡確認框(Popconfirm)
目標元素的操作需要用戶進一步的確認時,在目標元素附近彈出浮層提示,詢問用戶。
和全屏居中模態對話框相比,交互形式更輕量。
三、結果反饋
操作過程中盡可能將狀態的反饋給用戶,即時的響應會給用戶增加信賴感。
1、頂部全局提示反饋(Message)
通過一個操作引發的反饋浮層位於頂部居中顯示並自動消失,是一種不打斷用戶操作的輕量級提示方式。
2、對話框反饋
通過一個操作引發的反饋浮層位於頁面中心,反饋內容可通過確認或取消按鈕進行關閉,用戶在反饋層出現時不可進行任何的操作,用於重要的反饋。
註:除失敗時避免顯示不必要的提醒彈窗。彈窗是很強的反饋機制,只有在傳遞非常重要,且可操作的信息時才需要使用它。

前端的UI設計與交互之反饋示篇