萬盛學電腦網

 萬盛學電腦網 >> 圖文處理 >> 平面設計理論 >> 如何提升移動應用的“心理響應速度”

如何提升移動應用的“心理響應速度”

   在移動體驗的設計當中,界面的響應速度是我們需要重點關注的。移動用戶所處的典型情境通常會使他們的注意力更難集中,耐心更有限。如果交互的觸發或內容的加載需要讓用戶等上太長的時間,那麼很少有人會不動聲色從容不迫的聽之任之。

  怎樣使你的移動應用變的更“快”?這個問題顯然會涉及到很多方面的因素,例如界面圖形資源及開發技術方案的合理性等等,而我們今天要探討的,是一些從“心理”角度出發的細節設計技巧在幾個典型場景中的使用方式。

  圖片上傳

  當你在Instagram裡發布照片時,圖片文件實際上是在你剛剛完成拍攝或是從本地選擇好之後就已經開始悄悄上傳了。整個上傳機制充分利用了Instagram自身的照片發布流程——用戶在拍好或選擇好照片之後,還需要經歷一段包含著若干步驟的編輯操作,例如縮放、剪裁、添加濾鏡效果、添加文字等等,而圖片文件的上傳工作就在這段時間裡悄然完成。用戶不需要再焦躁的面對進度條或是上傳狀態提示信息一類的東西了。

  一旦用戶完成編輯並點擊“分享”,界面會切換回到feed當中,如下圖所示。此時feed內容上方會短暫的出現一個“正在完成”(Finishing up)的提示,然後用戶剛剛發布的照片會立刻出現在feed當中。整個“上傳”環節給人的感覺非常簡短而自然。

如何提升移動應用的“心理響應速度” 三聯

  回顧這一流程,你會發現正是那些讓人覺得很有參與感的圖片編輯環節分散了用戶的注意力,文件的自動上傳工作巧妙的利用了這個時間段。良好的設計使用戶產生了一種“幻覺”,讓他們感到圖片的上傳似乎沒有花費任何時間(用戶可能根本就不會產生任何感覺,因為流程太自然了),而實際上,用來上傳圖片的時間長度從技術角度講並沒有真正被縮短。

  如此一個低調到用戶可能完全不會察覺的設計方式,給產品體驗帶來的提升作用卻是相當巨大的。過去,市面上的多數照片分享應用都使用著相同的“傳統”方式,即在用戶完成編輯並確認分享之後再開始上傳流程;而Instagram的方式使其在“輕松”和“快捷”等方面的體驗極大超越了同類產品。用戶未必了解原理,也不在意原理,他們只是在潛移默化當中選擇那些讓自己覺得“好用”的產品,放棄那些“不好用”的。

  消息發送

  這也是移動體驗設計當中的一個典型“加速點”。

  我們來對比一下Whatsapp與iMessage的實現方式,看看他們是怎樣告知用戶“消息已成功發送”及“對方已收到消息”的。

  Whatsapp用到兩個綠色對勾圖標,其中一個代表發送成功,另一個代表對方已經收到。

02-whatsapp-speed-performance-mobile-ui-interface-ux-design.png

  Whatsapp的聰明之處在於,他們會在用戶確認發送消息之後立刻顯示第一個對勾。即使消息數據此時可能還沒有被完整的上傳到服務器上,他們也會假設一切都會很快的順利完成;從體驗的角度講,此時最重要的事情不是等待上傳完成,而是立刻將“正面反饋”給到用戶。這樣做一方面可以展示出產品對於用戶的操作具有很高的響應性,一方面則可以讓用戶產生一種感覺——“Whatsapp發消息的速度真的很快啊”。

  iMessage則使用了一種相當不同的方式來創建正反饋循環。

03-imessage-speed-performance-mobile-ui-interface-ux-design.png

  用戶輸入消息並點擊“發送”,消息氣泡會立刻進入內容區,這不壞;但同時,代表實際數據發送過程的進度條則會在導航欄底部出現;根據網絡鏈接情況,進度條有時會花費一點時間才能走完。如果發送的是圖片,那麼進度條的推進速度會很慢。

  為什麼說這是一種相對較差的體驗?因為用戶將無可避免的去觀察進度條的推進速度;在千變萬化的移動情境中,網速變慢是常有的事,相應的,進度條的推進速度會有不同程度的降低,這就會使用戶時不時的產生對速度的負面感知;長此以往,他們就會在潛意識中認為這款消息應用本身就是慢的、“不好”的。即使Whatsapp和iMessage發送消息所實際花費的時間完全相同,在用戶的角度看來,Whatsapp依然是那個“更快的”。

  所以,對於此類產品來說,消息狀態的反饋方式會在很大程度上決定其在“速度”方面給用戶帶來的體驗。

  內容加載

  對於正在界面當中進行加載的內容,我們有著很多約定俗成的設計方式。通常,我們會使用菊花轉或是進度條來告訴用戶界面中有內容正在被加載,請等待。在各種典型的移動情境中,如果這種狀態持續的時間稍長,便很容易讓用戶感到焦躁和挫敗;這種感覺就像是逼他們無所事事的看著沙漏裡的沙子一點點漏下來。

  近來,有些應用開始嘗試新的思路,試圖讓用戶從心理上感到加載速度的提升,從而減少他們的焦慮感。這些應用(例如Facebook Paper)會在內容完成加載之前首先在界面中展示一個“框架”,內容加載完成之後,會很平滑和自然的在這個框架的布局當中呈現出來。整個流程帶來的體驗具有很高的平滑度。

04-paper-speed-performance-mobile-ui-interface-ux-design.png

  Pinterest在他家的應用和網站上也使用了類似的做法,不過他們走的更遠些。他們會分析每篇內容中的圖片,將其中的主要色彩識別出來,並存儲在服務器上。當應用要加載這些圖片時,首先會在預加載的框架當中將每張圖片的主要色彩顯示出來;當圖片完成加載後,便會很自然的呈現在以其主色彩為背景色的卡片當中。

05-pinterest-speed-performance-mobile-ui-interface-ux-design.png

  小結

  作為應用設計師,我們自然會盡一切可能去塑造更快、更流暢的移動體驗。對手機應用是這樣,對於將來在各方面限制更加突出的可穿戴設備應用來說則更是如此。有些時候,要提升產品的響應效率,提高整體體驗的平滑度,除了技術方面的因素外,在功能流程和界面細節當中通過設計技巧使用戶產生“快”的感知,這也是一種事半功倍的方法。

copyright © 萬盛學電腦網 all rights reserved