組件細(xì)節(jié)再設(shè)計(jì)

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

刷新與加載

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

以上，就是關(guān)于刷新加載、提示反饋和彈框在設(shè)計(jì)細(xì)節(jié)上的一些思考和建議，也希望能給大家一些啟發(fā)，通過對細(xì)節(jié)的推敲和打磨把產(chǎn)品變得更聰明更極致。

本文來自創(chuàng)新互聯(lián)品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)
標(biāo)簽：移動網(wǎng)站建設(shè),高端網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站

網(wǎng)站標(biāo)題：組件細(xì)節(jié)再設(shè)計(jì)
文章位置：http://www.muchs.cn/news12/161112.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、搜索引擎優(yōu)化、品牌網(wǎng)站建設(shè)、小程序開發(fā)、外貿(mào)建站、微信小程序

廣告

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