設計總結:移動交互設計中易被忽略的幾個要點

0 評論 6916 瀏覽 87 收藏 14 分鐘

作者匯總了移動端交互設計中可能被忽略的一些“點”,并對各個點展開了分析,希望能夠給你一些幫助。

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

目錄

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

背后的邏輯

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

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

加載

為什么要有加載狀態?

  • 客觀原因,受網絡環境影響終端與服務數據傳輸存在一定時間,需要“加載中”來彌補這個真空期;
  • 終端需要做到點擊機器即有反饋,讓用戶知道機器正在為他運作而非機器故障;
  • 可以有效緩解用戶等待過程中產生的焦慮感。

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

加載類型

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

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

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

表現形式

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

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

可以是GIF動畫

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

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

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

避免靜態指示器

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

頁面加載類型

單個頁面加載

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

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

特點:

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

缺點:

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

預加載(跨頁面加載)

特點:

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

缺點:

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

小結:

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

刷新

手動刷新

點擊刷新

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

滑動刷新

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

自動刷新

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

特點:一般應用在時效性較強的內容 或 需頻繁查看的內容頁內,如地圖的位置功能,社交應用、新聞類應用等。

緩存

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

緩存分類

臨時緩存

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

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

固定緩存

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

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

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

容量

  • 設定一個上限容量,當緩存到達某一個設定值時,按照時間順序自動刪除舊的緩存數據或者結合功能頁的使用頻次刪除頻次較低的緩存數據;
  • 如手機系統內的流量控制一樣,設計一個用戶可手動調整的緩存上限值。

時間

  • 設定一個時間或者根據用戶使用頻次數及周期設定時間來清理緩存數據;
  • 如PS等自動保存一樣,可以給用戶提供自動清除緩存的時間設置,如:30分鐘 、1小時、 1天等。

異常情況

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

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

文章局部內容有參考

 

本文由 @不通曉KeKe 原創發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!