在大多數移動應用中，刷新加載、提示反饋和彈框是最基礎也是最不可少的功能模塊。在設計這些基礎組件時，我們常常會以最簡單最基本的方式完成。但當我們回過頭重新審視這些組件時，是不是能給它們定義上更加聰明的邏輯，讓產品變得更人性化一點呢？今天就來和大家簡單聊聊在刷新加載、提示反饋和彈框等基礎組件上引申出的一些設計思考和設計建議。

刷新與加載

刷新和加載會告訴用戶當前頁面的狀態，是對獲取界面新內容的一種進度狀態的表達。在刷新和加載過程中可以通過有趣的動畫效果減少用戶的焦躁感。另外，也可以在這個過程中加入品牌元素強化品牌形象，讓產品變得更生動活潑。
- 制造下拉刷新的“假象”
在某些時效性很強的場景下（例如消息聊天），當頁面內容可以做到實時更新時，下拉刷新就不是必要操作了。但為了保留用戶的使用習慣，我們仍可以提供下拉操作，此時可以巧妙地將刷新改為透出品牌元素的方式，既能滿足用戶下拉行為又能有效利用場景宣導品牌形象。
- 讓加載過程有延續性
1. 界面的預加載。如果界面內容有固定的框架（如列表、瀑布流、信息卡片等），在加載時可以先出現內容框架，直到加載完成再呈現內容，這樣能讓整個過程更連貫和一致。
2. 用按鈕狀態表現加載進度。通過按鈕狀態的變化直接呈現加載進度，是對操作狀態的延續，避免了浮層帶來的干擾和阻斷感。
- 在加載H5頁面時減少用戶等待的焦躁感
從Native進入H5時，由于架構的變化頁面加載時間會變得更長（尤其在弱網環境下），浮層式的加載過程無法讓用戶感知到當前進度如何。因此建議采用進度條的方式表達進度，雖然它不會縮短加載時間，但卻能讓用戶時刻感覺到當前的進展，讓人感覺等待沒有那么漫長。
提示與反饋
輕量級提醒Toast一般適用于操作后的反饋結果，在手淘中如寶貝收藏成功/取消收藏、添加到購物車成功；以及各種信息的提交成功或失敗的反饋。信息浮層會漸顯漸隱，不需要用戶再進行下一步操作。
圖例：手淘 Toast 通用樣式
- 指定區域內的提示反饋
通常，在提交表單的場景中，當表單中的某個信息填寫有誤時，我們現在的作法是在點擊“保存”或“提交”時，彈出通用的浮層告知用戶錯誤/失敗原因，但提示信息是沒有針對性的，用戶看完提示后可能還要再思考我到底是哪兒寫錯了？在這種情況下，最好的方法首先是能夠對用戶輸入的內容進行實時判斷，當出錯時可以直接在指定區域內提示用戶。其次，做不到實時判斷時，在提交表單后如果有出錯情況，能在指定區域提醒用戶出錯原因。
圖例：對表單內容進行實時判斷，當填寫有誤時能在錯誤區域進行提示
圖例：提交表單時，對指定區域的錯誤提醒。也可以結合動效讓用戶更容易聚焦問題
- 對內容刪除要有合理的解釋
提示反饋并不僅限浮層的方式，界面元素的過渡動畫也是一種很好的信息反饋方式。它能告訴用戶信息是如何出現或消失的，也能讓產品體驗更流暢和連貫。
- 對用戶的下一步操作進行預判
我們在設計時常常說要更懂用戶，本質其實是希望產品更聰明，能盡可能猜測用戶的下一步操作，幫助用戶提高產品使用效率。如果我們能對用戶的行為進行預判，那就可以自然而然地在沒有干預用戶的情況下呈現相應步驟。
圖例：當我們復制過訂單號或截圖完再回到消息界面，需要和賣家進行下一步溝通時，可以直接呈現剛剛執行的操作，幫助用戶縮短操作路徑
彈框與操作列表
彈框(Alert)與操作列表(Action Sheet)是產品中比較常見的信息提示方式，通常用于當用戶在界面上需要做一些決定時，需要用彈出層展示選項讓用戶選擇下一步操作。因 Android 端標準不一和形式的多樣性，這里僅討論 iOS 端的設計場景和樣式。
- 彈框(Alert)的使用場景
彈框多為系統級別的通知信息，它會打斷用戶當前的瀏覽或操作，告知用戶影響到他們當前或后續操作的重要信息。在產品中需要嚴格控制彈框出現的頻次，這樣才能真正引起用戶的重視。
圖例：手淘中彈框的通用樣式
使用場景1 某些信息必須需要用戶關注時。例如提醒電池電量低、提示引導推送通知、獲取地理位置等。這類彈框內容多為系統級信息，它的出現通常會影響用戶后續是否能正常使用某些功能。
使用場景2 需要傳達界面中的關鍵信息時。這類彈框也是手淘里比較常用的，例如界面中的功能更新、功能引導等。但最好的方式還是讓用戶在合適的場景下自然而然發現你的功能，而不是用彈框強制告訴用戶。
- 操作列表(Action Sheet)的使用場景
當用戶主動發起了某個動作，后續需要對該動作進行確認或提供可選操作時，我們可以使用操作列表呈現內容。操作列表的出現與用戶上一步操作有強關聯。
圖例：手淘中操作列表的通用樣式
使用場景1 為完成某個任務提供的不同的方式。操作列表提供可以完成當下任務的一系列操作選項。將選項收起的方式能節省頁面空間，避免頁面鋪出太多操作選項。
使用場景2 當用戶需要完成一項有風險的操作時，可以用操作列表的方式進行二次確認。它讓用戶有足夠的時間考慮當前操作帶來的風險結果，并提供其他可選項。
- 如何區分彈框與操作列表的使用場景
在 iOS 官方規范里提到，彈框(Alert) 多為 APP 或系統發出的重要信息，而操作列表 (Action Sheet) 一般是對某個操作的后續提供可選操作。那么，區分彈框和操作列表的方式可以簡單的概括為：由用戶發起的操作使用操作列表Action Sheet的方式，由系統或應用發起（非用戶發起）的操作使用彈框Alert的方式。再看看下面的例子就比較容易理解了：
正確示例：左圖，當輸入了信息未發布點返回時，為用戶主動發起的行為，此時用操作列表提示用戶取消發布的二次確認。右圖，當用戶主動刪除某個淘友時，彈出操作列表進行二次確認
錯誤示例：刪除寶貝與離開界面都是用戶主動發起的行為，不應該用彈框的形式進行二次確認

以上，就是關于刷新加載、提示反饋和彈框在設計細節上的一些思考和建議，也希望能給大家一些啟發，通過對細節的推敲和打磨把產品變得更聰明更極致。

本文來自創新互聯品牌網站建設網站設計制作公司-創新互聯
標簽：移動網站建設,高端網站建設,企業網站建設,成都響應式網站

網站標題：組件細節再設計
文章位置：http://m.newbst.com/news12/161112.html

成都網站建設公司_創新互聯，為您提供云服務器、搜索引擎優化、品牌網站建設、小程序開發、外貿建站、微信小程序

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯