作者匯總了移動(dòng)端交互設(shè)計(jì)中可能被忽略的一些“點(diǎn)”，并對(duì)各個(gè)點(diǎn)展開了分析，希望能夠給你一些幫助。

用戶體驗(yàn)是什么，我將其比喻成一張網(wǎng)，那設(shè)計(jì)就是網(wǎng)上的一個(gè)面，交互設(shè)計(jì)就是一個(gè)點(diǎn)，網(wǎng)大了可能出現(xiàn)很多容易忽略的“洞”，洞多了反過來就會(huì)讓網(wǎng)變得破破爛爛——即體驗(yàn)變差，以下就是我對(duì)移動(dòng)端交互設(shè)計(jì)中可能被忽略的一些“點(diǎn)”，進(jìn)行的整理和分析，分享給大家。

目錄

• 背后的邏輯
• 加載
• 緩存
• 異常情況

背后的邏輯

交互設(shè)計(jì)工作者不僅僅要了解人與機(jī)器的交互過程，還需要了解機(jī)器內(nèi)部是如何運(yùn)作的，在移動(dòng)端中我們所使用的應(yīng)用APP通常是有網(wǎng)絡(luò)要求的，例如：微信、網(wǎng)易云音樂、新浪微博、網(wǎng)易新聞等。

如：用戶在網(wǎng)易云音樂中搜索歌曲XXX，終端會(huì)將用戶輸入的XXX歌曲上傳給服務(wù)端，服務(wù)端會(huì)在云端搜尋歌曲將結(jié)果反饋終端，終端將結(jié)果呈現(xiàn)給用戶。而終端和服務(wù)端的交互過程，用戶往往是感知不到的，終端與服務(wù)的交互過程在不同的網(wǎng)絡(luò)環(huán)境中花掉的時(shí)間也會(huì)有所不同，為了彌補(bǔ)這一真空期，就有了“加載中”這個(gè)狀態(tài)。

加載

為什么要有加載狀態(tài)？

• 客觀原因，受網(wǎng)絡(luò)環(huán)境影響終端與服務(wù)數(shù)據(jù)傳輸存在一定時(shí)間，需要“加載中”來彌補(bǔ)這個(gè)真空期；
• 終端需要做到點(diǎn)擊機(jī)器即有反饋，讓用戶知道機(jī)器正在為他運(yùn)作而非機(jī)器故障；
• 可以有效緩解用戶等待過程中產(chǎn)生的焦慮感。

總的來說好的加載中狀態(tài)可以有效降低等待中的所帶的負(fù)面情緒，成功加載出結(jié)果，增強(qiáng)體驗(yàn)。

加載類型

主要可以分為：a確定性進(jìn)度指示器?b不確定進(jìn)度指示器。

確定性進(jìn)度指示器可以準(zhǔn)確告知用戶當(dāng)前進(jìn)度（如百分比），用戶可以直觀看出還有多久能夠完成加載。

如果指示器只有加載過程沒有告訴用戶這個(gè)過程需要多久的話，那它就是不確定性進(jìn)度指示器。

表現(xiàn)形式

可以用LOGO /形象 來作為加載動(dòng)畫

加強(qiáng)品牌露出度，增加用戶對(duì)于品牌的印象，目前很多主流APP常用這種形式，注意需要添加針對(duì)性的文本描述，如“正在加載””正在更新“等。

可以是GIF動(dòng)畫

可以分散用戶在等待上的注意力，讓加載過程變得有趣令人愉悅，誘使他們多點(diǎn)耐心等待加載完成。

可以是將指示器跟控件結(jié)合起來的綜合加載器

如：提交按鈕，點(diǎn)擊后進(jìn)入加載狀態(tài)，加載完成顯示提交成功按鈕，再比如：andriod手機(jī)上的清除緩存軟件主頁(yè)的小火箭，將一個(gè)圓形的加載器和一個(gè)懸浮按鈕結(jié)合。這種方式保證了能夠讓用戶看得到加載后的動(dòng)作確實(shí)完成了。它依靠圓形的路徑閉合來代表加載過程。而且還帶給用戶一定的趣味性。

避免靜態(tài)指示器

靜態(tài)指示器指那種沒有任何動(dòng)態(tài)圖片只有一句“加載中…”、“請(qǐng)稍候…”這樣的信息指示器，它們只能反映系統(tǒng)已經(jīng)接收并開始運(yùn)作，沒有任何有價(jià)值的反饋信息且沒有視覺上的變化，若加載過長(zhǎng)用戶會(huì)以為機(jī)器是不是故障？卡機(jī)了？從而退出加載，因此加載指示器一定要帶有一定的動(dòng)態(tài)元素。

頁(yè)面加載類型

單個(gè)頁(yè)面加載

特點(diǎn)：一次性加載全部?jī)?nèi)容，一般用在頁(yè)面內(nèi)容較少、信息文件較小且加載所耗時(shí)間較短的信息頁(yè)面，這種加載方式直接一次性加載完所有數(shù)據(jù)后再顯示。

異步加載（單頁(yè)面多模塊加載）

特點(diǎn)：

• 模塊與模塊間沒有絕對(duì)關(guān)聯(lián)性，各自加載模塊內(nèi)容；
• 進(jìn)入后會(huì)顯示頁(yè)面框架，未加載出來的內(nèi)容以留白或占位符顯示；
• 適用于頁(yè)面內(nèi)容較多、文件格式較多且文件較大的頁(yè)面，如購(gòu)物類、新聞?lì)?、視頻類等應(yīng)用內(nèi)；
• 可降低用戶加載過程中的焦慮感，同時(shí)可以減少不必要的流量消耗，同等內(nèi)容的情況下若采用單頁(yè)面一次加載，可能導(dǎo)致用戶等待時(shí)間過長(zhǎng)而退出加載，影響體驗(yàn)。但采用異步加載這種方式可以逐步展示頁(yè)面內(nèi)容，一定程度上降低了用戶等待的焦慮感，在逐步加載過程中若用戶已看到自己想要的內(nèi)容也可停止，不必消耗流量來加載剩余不關(guān)注的信息。

缺點(diǎn)：

異步加載一定程度受數(shù)據(jù)接口影響，數(shù)據(jù)接口越多則加載模塊就會(huì)越多，可能出現(xiàn)多個(gè)模塊加載失敗的狀態(tài)，導(dǎo)致一頁(yè)面出現(xiàn)多個(gè)重新加載按鈕，針對(duì)這一特殊情況，可以在加載規(guī)則上設(shè)定優(yōu)先級(jí)較高的模塊自動(dòng)重新加載，減少手動(dòng)點(diǎn)擊，提高頁(yè)面加載成功率，同時(shí)顯得機(jī)器更加智能，從而提升體驗(yàn)。

預(yù)加載（跨頁(yè)面加載）

特點(diǎn)：

預(yù)測(cè)用戶的下一步行為，提前加載下一個(gè)頁(yè)面內(nèi)容，用戶進(jìn)入下一頁(yè)面不需要加載等待，頁(yè)面與頁(yè)面間可做到無縫連接，可以帶來無縫的產(chǎn)品體驗(yàn)。如微信、QQ、瀏覽網(wǎng)絡(luò)圖片、提前加載新消息和下幾張圖，用戶操作后可直接查看內(nèi)容。

缺點(diǎn)：

可能導(dǎo)致不需要查看的內(nèi)容被提前加載，消耗不必要的流量。

小結(jié)：

• 預(yù)加載最好設(shè)定在有WI-fi的情況下，避免不必要的流量消耗；
• 預(yù)加載方式最適用于線性流程之間的頁(yè)面，即在A頁(yè)面只能進(jìn)入B頁(yè)面這樣的界面間；標(biāo)記小紅點(diǎn)的功能頁(yè)，標(biāo)記小紅點(diǎn)的功能多數(shù)用戶都會(huì)點(diǎn)擊，可使用預(yù)加載；
• 提前加載下一頁(yè)面內(nèi)優(yōu)先級(jí)較高的信息，剩余信息進(jìn)入后加載，如新聞應(yīng)用進(jìn)入后先預(yù)先加載首屏的內(nèi)容，進(jìn)入后再加載剩余內(nèi)容（聽起來是不是有點(diǎn)像前面說的異步加載，不同點(diǎn)在于預(yù)加載會(huì)進(jìn)入前會(huì)加載一部分內(nèi)容，異步加載是進(jìn)入后開始加載）
• 隨著5G甚至6G -7G的推出往后流量不再是一個(gè)問題時(shí)，預(yù)加載將是一個(gè)很大的趨勢(shì)

刷新

手動(dòng)刷新

點(diǎn)擊刷新

即點(diǎn)擊頁(yè)面中的刷新按鈕加載新內(nèi)容，在移動(dòng)端上這種刷新方式將會(huì)逐漸邊緣化，點(diǎn)擊刷新在用戶行為上來說具有一定的局限性（受按鈕位置、按鈕大小、屏幕大小以及用戶手掌大小的影響）且移動(dòng)端（特別是可穿戴設(shè)備）屏幕寸土寸金，點(diǎn)擊按鈕占用一定位置顯得尤為雞肋。

滑動(dòng)刷新

即滑動(dòng)加載新的內(nèi)容，目前是一種主流的手動(dòng)刷新方式，較點(diǎn)擊刷新更適合大屏手機(jī)的使用，同時(shí)操作上更加自然。且在移動(dòng)端那么小的界面上不必為了刷新按鈕騰出空間而絞盡腦汁。

自動(dòng)刷新

即在系統(tǒng)內(nèi)設(shè)定一定刷新規(guī)則，之后系統(tǒng)按照設(shè)定的規(guī)則自動(dòng)在后臺(tái)持續(xù)性獲取數(shù)據(jù)，用新的數(shù)據(jù)覆蓋舊數(shù)據(jù)，規(guī)則可以是時(shí)間、如30秒刷一次、1分鐘刷一次等。

特點(diǎn)：一般應(yīng)用在時(shí)效性較強(qiáng)的內(nèi)容 或 需頻繁查看的內(nèi)容頁(yè)內(nèi)，如地圖的位置功能，社交應(yīng)用、新聞?lì)悜?yīng)用等。

緩存

即用戶首次進(jìn)入XX界面數(shù)據(jù)服務(wù)器數(shù)據(jù)，請(qǐng)求成功后將數(shù)據(jù)下載且保存在本地設(shè)備內(nèi)，下次使用不需要加載

緩存分類

臨時(shí)緩存

即緩存數(shù)據(jù)受規(guī)則限制會(huì)自動(dòng)清除，常用于同一個(gè)功能頁(yè)內(nèi)，在同一個(gè)功能頁(yè)內(nèi)將加載過的數(shù)據(jù)保存在本地，減少不必要的重復(fù)加載，當(dāng)用戶退出該功能模塊，則自動(dòng)清除緩存內(nèi)容。

特點(diǎn)：用戶使用時(shí)可以達(dá)到無縫切換瀏覽，避免了一定的流量消耗，多適用于不常被查看的功能頁(yè)。

固定緩存

固定可刪除性緩存：即該緩存不會(huì)自動(dòng)清除需用戶手動(dòng)清除，這種緩存適用于經(jīng)常被用戶反復(fù)查看的信息頁(yè)，避免用戶下次查看導(dǎo)致的不必要的等待和流量消耗，該緩存方式一定要給用戶提供清楚緩存的功能，若不提供清除可能導(dǎo)致應(yīng)用文件逐漸變大，極端情況可能導(dǎo)致手機(jī)內(nèi)存過滿無法獲取新數(shù)據(jù)，造成用戶刪除應(yīng)用。

永久不可刪除性緩存：即該緩存不會(huì)自動(dòng)刪除且不可手動(dòng)刪除，適用于一些固定數(shù)據(jù)較多的應(yīng)用內(nèi)——即可能是頁(yè)面模塊框架較大的應(yīng)用；有時(shí)為了讓下載文件變小，減小用戶下載負(fù)擔(dān)誘導(dǎo)用戶下載應(yīng)用，也不想讓用戶每次進(jìn)來都加載框架，那么就可以采用這種緩存方式，注意該緩存方式一定要提供自動(dòng)清楚緩存機(jī)制，不然會(huì)產(chǎn)生上述所說的情況。

可以從這幾個(gè)方面考慮自動(dòng)刪除

容量

• 設(shè)定一個(gè)上限容量，當(dāng)緩存到達(dá)某一個(gè)設(shè)定值時(shí)，按照時(shí)間順序自動(dòng)刪除舊的緩存數(shù)據(jù)或者結(jié)合功能頁(yè)的使用頻次刪除頻次較低的緩存數(shù)據(jù)；
• 如手機(jī)系統(tǒng)內(nèi)的流量控制一樣，設(shè)計(jì)一個(gè)用戶可手動(dòng)調(diào)整的緩存上限值。

時(shí)間

• 設(shè)定一個(gè)時(shí)間或者根據(jù)用戶使用頻次數(shù)及周期設(shè)定時(shí)間來清理緩存數(shù)據(jù)；
• 如PS等自動(dòng)保存一樣，可以給用戶提供自動(dòng)清除緩存的時(shí)間設(shè)置，如：30分鐘 、1小時(shí)、 1天等。

異常情況

即用戶操作未得到應(yīng)有結(jié)果，可能出現(xiàn)無結(jié)果狀態(tài)，我們將這種稱為異常情況，異常情況經(jīng)常被新人所忽略。

注：異常情況一定要以文本的方式準(zhǔn)確描述出具體異常問題，是網(wǎng)絡(luò)異常？未找到結(jié)果？并且為用戶提供可解決問題的信息，若是網(wǎng)絡(luò)異常應(yīng)提供重試刷新按鈕 或 自動(dòng)重新加載。

文章局部?jī)?nèi)容有參考

本文由 @不通曉KeKe 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。