「這個(gè)控件叫什么」系列之加載占位圖+頁面指示器

@龍爪槐守望者 ：鑒于國內(nèi)交互設(shè)計(jì)名詞混亂不統(tǒng)一，很多設(shè)計(jì)師不知道如何用專業(yè)術(shù)語稱呼一個(gè)控件，因此我開了《這個(gè)控件叫什么》專題，梳理控件的名稱和使用事項(xiàng)，希望能為推動(dòng)交互設(shè)計(jì)發(fā)展，做出一點(diǎn)微小的貢獻(xiàn)。

上期回顧：《「這個(gè)控件叫什么」系列之小紅點(diǎn)+索引導(dǎo)航+分段控件》

Skeleton Screen/加載占位圖

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

△ Facebook的Skeleton Screen

Skeleton Screen的由來

Launch Screen（啟動(dòng)屏幕）

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

△ Launch Screen

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

Progress Indicator（進(jìn)度指示器）

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

△ Activity Indicator和Progress Bar

有了富含動(dòng)效的Progress Indicator，用戶就知道我們的App并沒有出BUG，而是在辛勤的加載數(shù)據(jù)，再過不久就能正常的顯示內(nèi)容了。

Progress Indicator設(shè)計(jì)出發(fā)點(diǎn)是好的，但是帶給用戶的體驗(yàn)未必優(yōu)秀。Progress Indicator的出現(xiàn)就意味著需要等待，當(dāng)用戶注意力集中在Progress Indicator時(shí)，就好像學(xué)生盯著下課前五分鐘的鐘表，滴答滴答，時(shí)間似乎變得更慢了。我們當(dāng)然不愿意讓用戶望著Progress Indicator產(chǎn)生焦躁的情緒。

Skeleton Screen應(yīng)運(yùn)而生

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

△ Skeleton Screen與Activity Indicator對比

Skeleton Screen這個(gè)概念最早出自Google產(chǎn)品總監(jiān)，《Web表單設(shè)計(jì)》作者，Luke Wroblewski于2013年9月17日發(fā)表的博文《Mobile Design Details: Avoid The Spinner》里。

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

如何使用

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

Page Indicator/Page Controls/頁面指示器

Page Indicator（頁面指示器，iOS規(guī)范稱為Page Controls）是附著在輪播圖、一組卡片或者頁面的底部，用來表示頁面總數(shù)量和指示當(dāng)前停留的頁面。通常由一組等距的小圓點(diǎn)組成，小圓點(diǎn)的數(shù)量代表頁面總數(shù)，其中深色或?qū)嵭牡男A點(diǎn)代表當(dāng)前頁面。

△ Page Indicator

用戶可以通過左右滑動(dòng)切換上一個(gè)/下一個(gè)頁面，或者點(diǎn)擊Page Indicator本身來切換，一般來說移動(dòng)端點(diǎn)擊Page Indicator順序切換上一個(gè)/下一個(gè)頁面，而PC端可以精確點(diǎn)擊其中一個(gè)小圓點(diǎn)到達(dá)特定的頁面。

如何使用

不要顯示太多指示點(diǎn)

超過10個(gè)指示點(diǎn)很難在一屏內(nèi)展示，超過20個(gè)頁面用戶瀏覽起來會非常耗時(shí)。如果超過20個(gè)頁面請考慮使用其他形式或控件展示。

注意滑動(dòng)沖突

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

△ iOS鎖屏地圖導(dǎo)航

樣式可以特殊化

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

△ 鎖屏頁和天氣App

不要把Page Indicator做到頁面內(nèi)

Page Indicator的層級比頁面要高，因此切圖和研發(fā)工程師溝通實(shí)現(xiàn)方案時(shí)，一定要確認(rèn)把Page Indicator單獨(dú)切圖處理。千萬不能把Page Indicator嵌入到頁面里，導(dǎo)致滑動(dòng)頁面時(shí)，Page Indicator跟隨頁面一起運(yùn)動(dòng)。

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

相關(guān)資料

Page Indicator和進(jìn)度條相結(jié)合

一號店的輪播圖把Page Indicator和進(jìn)度條相結(jié)合，這樣用戶既可以知道當(dāng)前所指示的頁面，也能對下一張頁面何時(shí)輪播有預(yù)期，便于用戶較為專注的瀏覽輪播圖的內(nèi)容。

本節(jié)先更新2個(gè)小科普，后面優(yōu)設(shè)會持續(xù)更新，想提前學(xué)習(xí)的可以關(guān)注作者的微信公眾號：

「新人科普好文系列」

1. 交互原型丨《術(shù)語小科普！聊聊線框稿、視覺稿與原型的區(qū)別》
2. 移動(dòng)端尺寸丨《通俗易懂！超全面的移動(dòng)端尺寸基礎(chǔ)知識科普指南》
3. 字體規(guī)范丨《界面設(shè)計(jì)必備！全方位科普常用的字體規(guī)范（附神器）》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量190萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com