「控件科普文」加載占位圖+頁面指示器
「控件科普文」加載占位圖+頁面指示器-移動閱讀二維碼

鑒于國內交互設計名詞混亂不統一,很多設計師不知道如何用專業術語稱呼一個控件,因此我開了《這個控件叫什么》專題,梳理控件的名稱和使用事項,希望能為推動交互設計發展,做出一點微小的貢獻。

上期回顧:《「控件科普文」小紅點+索引導航+分段控件

Skeleton Screen/加載占位圖

Skeleton Screen(加載占位圖)是近年流行的加載控件,通常表現形式是在界面上待加載區域填充灰色的占位圖,與線框圖的效果非常相似。Skeleton Screen本質上是界面加載過程中的過渡效果。

△ Facebook的Skeleton Screen

Skeleton Screen的由來

Launch Screen(啟動屏幕)

當你啟動一個App時,需要從手機存儲器和網絡加載所需的控件和多數據,由于手機性能和網絡狀況的差異,加載需要等待無法避免。為了解決等待加載過程中出現白屏或者界面閃爍造成的割裂感,iOS規范中規定把界面控件框架的輪廓做成靜態圖片用于Launch Screen(在Google的Material design規范里被稱作Placeholder UI),把Launch Screen放在用戶點擊啟動App之后和App真正正常啟動完成之間做過渡,從而消滅白屏和界面閃爍,給用戶一種App啟動很快的錯覺。(然而國內的App不遵循iOS規范,在Launch Screen里放廣告,這又是另外一個商業話題了)

△ Launch Screen

非控件輪廓區域的內容變動很大,以上圖瀏覽器為例,Launch Screen僅僅顯示工具欄和地址欄,網頁內容區域留下了大量空白,顯然這不是最好的界面加載過渡方案。

Progress Indicator(進度指示器)

如果Launch Screen持續時間有點長,剛好用戶又盯著Launch Screen大量空白的內容區域,可能會認為App出BUG了——雖然App后臺正在辛勞的加載最新的數據。因此我們需要使用Progress Indicator來告知用戶目前正在加載。Progress Indicator分為Activity Indicator(活動指示器)和Progress Bar(進度條)兩種,前者就是我們非常熟悉的“菊花轉”。

△ Activity Indicator和Progress Bar

有了富含動效的Progress Indicator,用戶就知道我們的App并沒有出BUG,而是在辛勤的加載數據,再過不久就能正常的顯示內容了。

Progress Indicator設計出發點是好的,但是帶給用戶的體驗未必優秀。Progress Indicator的出現就意味著需要等待,當用戶注意力集中在Progress Indicator時,就好像學生盯著下課前五分鐘的鐘表,滴答滴答,時間似乎變得更慢了。我們當然不愿意讓用戶望著Progress Indicator產生焦躁的情緒。

Skeleton Screen應運而生

如果我們能在加載前把內容的大概輪廓預先展現出來,然后再逐步的加載真正的內容,這樣既用戶一種內容正在逐漸加載即將呈現的期待,降低了焦躁情緒,又使得界面加載的過程變得更順暢,感官上會覺得比其他加載方式更快。這就是Skeleton Screen!

△ Skeleton Screen與Activity Indicator對比

Skeleton Screen這個概念最早出自Google產品總監,《Web表單設計》作者,Luke Wroblewski于2013年9月17日發表的博文《Mobile Design Details: Avoid The Spinner》里。

目前國內有簡書、領英、新浪微博頭條文章頁采用這個加載方案。國外有Facebook iOS版、Medium、WordPress App、Slack等產品采用。相信以后會有更多的App和網頁會使用Skeleton Screen。

如何使用

  • 適用于布局排版固定的內容區域
    Skeleton Screen所展現的是內容的大概輪廓,如果內容布局和排版不是固定的,那么輪廓和內容布局的巨大差異,不僅不能給用戶順暢和期待感,反倒會造成落差。因此Skeleton Screen適用于布局排版固定的內容區域,例如列表、文章、個人信息。注意:如果內容區域有空頁面的情況,也不建議使用Skeleton Screen。
  • 建議配合其他加載技術一起使用
    用戶的網絡環境是復雜的,如果加載持續時間很久,單憑Skeleton Screen起不到流暢過渡的效果,建議配合懶加載(先文字后圖片)、逐條加載、預加載等技術,以達到更出色的體驗。

Page Indicator/Page Controls/頁面指示器

Page Indicator(頁面指示器,iOS規范稱為Page Controls)是附著在輪播圖、一組卡片或者頁面的底部,用來表示頁面總數量和指示當前停留的頁面。通常由一組等距的小圓點組成,小圓點的數量代表頁面總數,其中深色或實心的小圓點代表當前頁面。

△ Page Indicator

用戶可以通過左右滑動切換上一個/下一個頁面,或者點擊Page Indicator本身來切換,一般來說移動端點擊Page Indicator順序切換上一個/下一個頁面,而PC端可以精確點擊其中一個小圓點到達特定的頁面。

如何使用

不要顯示太多指示點

超過10個指示點很難在一屏內展示,超過20個頁面用戶瀏覽起來會非常耗時。如果超過20個頁面請考慮使用其他形式或控件展示。

注意滑動沖突

一般來說用戶在移動端習慣于使用左右滑動操作Page Indicator,因此要注意同頁面內會不會與其他支持左右滑動的控件(例如:頂部Tabs、地圖、輪播圖等)產生手勢沖突。舉個反面例子,iOS官方地圖可以在鎖屏顯示地圖導航,由于鎖屏本身有Page Indicator響應左右滑動切換到相機和搜索頁面,導致與導航界面內頂部的路線指示Page Indicator還有地圖放大縮小產生手勢沖突,無法操作。

△ iOS鎖屏地圖導航

樣式可以特殊化

如果Page Indicator指示的某個頁面較為特殊,可以為其定制特別的樣式,例如鎖屏頁用戶可以不解鎖直接向左滑動打開相機,因此為相機的指示點設計了特殊樣式突出這個功能。天氣App中一眼就明白第一個指示點是當前GPS定位地址。

△ 鎖屏頁和天氣App

不要把Page Indicator做到頁面內

Page Indicator的層級比頁面要高,因此切圖和研發工程師溝通實現方案時,一定要確認把Page Indicator單獨切圖處理。千萬不能把Page Indicator嵌入到頁面里,導致滑動頁面時,Page Indicator跟隨頁面一起運動。

△ 不能把Page Indicator嵌入到頁面里

相關資料

Page Indicator和進度條相結合

一號店的輪播圖把Page Indicator和進度條相結合,這樣用戶既可以知道當前所指示的頁面,也能對下一張頁面何時輪播有預期,便于用戶較為專注的瀏覽輪播圖的內容。

本節先更新3個小科普,想提前學習的可以關注作者的微信公眾號:

本文鏈接:http://www.casaleticia.com/loading-placeholder-figure.html
本文標簽: ,