UI設計移動交互中易被忽略重要的幾個要點,你有過嗎?

用戶體驗是什么,我將其比喻成一張網,那設計就是網上的一個面,交互設計就只是一個點,網大了就可能出現被人忽略“洞”,洞多了反過來就會導致網破破爛爛——即導致體驗變差,以下就是我對移動端交互設計中可能被忽略的一些“點”,進行的整理和分析,分享給大家。

目錄

背后的邏輯

加載

緩存

異常情況

背后的邏輯

交互設計工作者不僅僅要了解人與機器的交互過程,還需要了解機器內部是如何運作的,在移動端中我們所使用的應用APP通常是要求有網絡才可以使用的,例如:微信、網易云音樂、新浪微博、網易新聞等。

如:用戶在網易云音樂中搜索歌曲XXX,終端會將用戶輸入的XXX歌曲上傳給服務端,服務端會根據歌曲名稱在信息庫內尋找,結果反饋終端,最終由終端設備呈現給用戶操作結果。而終端和服務端的交互過程,用戶往往是感知不到的,終端與服務的交互過程在不同的網絡環境中花掉的時間也會有所不同,為了彌補這一真空期,就有了“加載中”這個狀態。

加載

為什么要有加載狀態?

客觀原因,受網絡環境影響終端與服務數據傳輸存在一定時間,需要“加載中”來彌補這個真空期

終端需要做到點擊機器即有反饋,讓用戶知道機器正在為他運作而非機器故障

可以有效緩解用戶等待過程中產生的焦慮感

總的來說好的加載中狀態可以有效降低等待中的所帶的負面情緒成功加載出結果,增強體驗

加載類型

主要可以分為:a確定性進度指示器?b不確定進度指示器

確定進度指示器,可以準確告知用戶當前進度(如百分比值),用戶可以直觀看出還有多久能夠完成

如果指示器只有加載過程沒有告訴用戶這個過程需要多久的話,那它就是不確定進度指示器

表現形式

可以用LOGO /形象 來作為加載動畫

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

可以是GIF動畫

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

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

如:提交按鈕,點擊后進入加載狀態,加載完成顯示提交成功按鈕,再比如:andriod手機上的清除緩存軟件主頁的小火箭,將一個圓形的加載器和一個懸浮按鈕結合。這種方式保證了能夠讓用戶看得到加載后的動作確實完成了。它依靠圓形的路徑閉合來代表加載過程。而且還帶給用戶一定的趣味性

避免靜態指示器

靜態指示器指那種沒有任何動態圖片只有一句“加載中…”、“請稍候…”這樣的信息的指示器,它們只能反映系統已經接收并開始運作,沒有任何有價值的反饋信息且沒有視覺上的變化,若加載過長用戶會以為機器是不是故障?卡機了?從而退出加載,因此加載指示器一定要帶有一定的動態元素。

頁面加載類型

單個頁面加載

特點:一次性加載全部內容,一般用在頁面內容較少、信息文件較小的情況下且加載縮耗時間較短,所以直接一次性加載完所有數據后再顯示

異步加載(單頁面多模塊加載)

特點:

模塊與模塊間沒有絕對關聯性,各自加載模塊內容

進入后會顯示頁面框架,未加載出來的內容以留白或占位符顯示

適用于頁面內容較多、文件格式較多且文件較大的頁面,諸如購物類、新聞資訊類、視頻類等應用內

可降低用戶加載過程中的焦慮感,同時可以減少不必要的流量消耗,同等內容的情況下若采用單頁面一次加載,可能導致用戶等待時間過長而退出頁面,影響體驗,但采用異步加載這種方式可以逐步展示頁面內容,一定程度上能夠降低用戶等待的焦慮感,在逐步加載過程中若用戶已看到自己想要的內容也可停止操作,不必消耗流量來加載剩余不關注的信息。

缺點:

異步加載一定程度受數據接口影響,數據接口越多則加載模塊就會越多,可能出現多個模塊加載失敗的狀態,導致一頁面出現多個重新加載按鈕,針對這一特殊情況,可以在加載規則上設定優先級較高的模塊自動重新加載,減少手動點擊,提高頁面加載成功率,同時顯得機器更加智能,提升體驗

預加載(跨頁面加載)

特點:

預測用戶的下一步行為,提前加載下一個頁面內容,用戶進入下一頁面不需要加載等待,頁面與頁面可以做到無縫連接,可以無縫的產品體驗,如微信、QQ、瀏覽網絡圖片、提前加載新消息和控件消息,用戶點擊后可直接查看內容。

缺點:

可能導致不需要查看的內容被提前加載,消耗不必要的流量。

小結:

預加載最好設定在有WI-fi的情況下,避免不必要的流量消耗

預加載方式最適用于線性流程之間的頁面,即在A頁面只能進入B頁面這樣的界面間

提前加載下一頁面內優先級較高的信息,剩余信息進入后加載,如新聞應用進入后先預先加載首屏的內容,進入后再加載剩余內容,(聽起來是不是有點像前面說的異步加載,不同在于預加載會提前加載一部分,異步加載是進入后加載)

隨著5G甚至6G -7G的推出往后流量不再是一個問題時,預加載將是一個很大的趨勢

刷新

手動刷新

點擊刷新

即點擊頁面中的刷新按鈕加載新內容,在移動端上這種刷新方式將會逐漸邊緣化,點擊刷新在用戶行為上來說具有一定的局限性(受按鈕位置、按鈕大小、手機尺寸以及用戶手掌大小的影響)且移動端屏幕寸土寸金,點擊按鈕占用一定位置顯得尤為雞肋。

滑動刷新

即上下滑動加載新的內容,目前是一種主流的手動刷新方式,較點擊刷新更適合大屏手機的使用,同時操作上更加自然。且在手機那么小的界面上不需要為了刷新按鈕騰出空間特絞盡腦汁。

自動刷新

即在系統內設定一定刷新規則,之后系統按照設定的規則自動在后臺持續性獲取數據,用新的數據覆蓋舊數據,規則可以是時間、如30秒刷一次等

特點:多應用在時效性較強的內容 或 需頻繁查看的內容上,如地圖的位置功能,QQ消息、微信消息、新聞類應用等、

緩存

即用戶首次進入XX界面數據服務器數據,請求成功后將數據下載且保存在本地設備內

緩存分類

臨時緩存

即緩存數據受規則限制會自動清除,常用于同一個功能頁內,在同一個功能頁內將加載過的數據保存在本地,減少不必要的重復加載,當用戶退出該功能模塊,則自動清除之前緩存的內容

特點:用戶使用時可以達到無縫切換瀏覽,且避免了一定的流量消耗,適用于不常被查看的功能

固定緩存

固定且可刪除性緩存:即該緩存不會自動清除需用戶手動清除,這種緩存適用于經常被用戶反復查看的信息頁,方便下次查看,避免不必要的等待和流量消耗,該緩存方式一定要給用戶提供清楚緩存的功能,若不提供清除可能應用文件大小逐漸增大,極端情況可能之后不能獲取新的服務數據,最終導致用戶刪除應用。

永久性不可刪除的緩存:即該緩存不會自動刪除且不可手動刪除,適用于那種固定數據,即可能是頁面模塊框架,有時為了讓下載文件變小,減小用戶下載負擔,誘導用戶下載應用,也不想讓用戶每次進來都加載框架,那么就可以采用這種緩存方式,注意該緩存方式一定要提供自動清楚緩存機制,不然會產生上述所說的情況。

可以從這幾個方面考慮自動刪除

容量

設定一個上限容量,當緩存到達某一個值時,按照時間順序自動刪除舊的緩存或者結合功能頁的使用頻次刪除頻次較低的緩存數據

如手機系統內的流量控制一樣,設計一個用戶可手動調整的緩存上限值

時間

設定一個時間或者根據用戶使用頻次數及周期設定時間來清理緩存。

如PS等自動保存一樣,可以給用戶提供自動清除緩存的時間設置,30分鐘 1小時 1天等小

即用戶操作未得到應有結果,可能出現無結果狀態,我們將這種稱為異常情況,異常情況經常被新人所忽略。

注:異常情況一定要以文本的方式準確描述出具體異常問題,是網絡異常?未找到結果?為用戶提供精準信息,幫助用戶去解決,若是網絡異常應提供重試刷新按鈕 或 自動重新加載。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,819評論 25 708
  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,180評論 4 61
  • 內容抽屜菜單ListViewWebViewSwitchButton按鈕點贊按鈕進度條TabLayout圖標下拉刷新...
    皇小弟閱讀 46,871評論 22 665
  • 一條路 熟悉了情愿繞道 即使那樣晚 即使不見行人 即使沒有車輛 走過 夜是美好的 一段情 過往了依然如初 縱使那么...
    頻彩閱讀 124評論 0 0
  • 現在不要說那時候的我們酷的一塌糊涂,因為現在我們還是酷的一塌糊涂。 以后我們經歷過很多事情就會...
    阿袁的甜品屋閱讀 205評論 3 1