標(biāo)簽(Tab)、下拉菜單、手風(fēng)琴風(fēng)格的折疊控件...漸進(jìn)呈現(xiàn)(progressive disclosure)的交互方式可以有效的幫助我們降低青島網(wǎng)站制作界面的視覺復(fù)雜度，同時(shí)盡可能多的向用戶展示內(nèi)容。

之前連續(xù)更新了兩章iOS Wow體驗(yàn)，分別是關(guān)于應(yīng)用上下文環(huán)境以及iOS技術(shù)特性這兩方面的話題。今天換換腦子吧，放下移動(dòng)應(yīng)用這攤子事，回到Web端，遛一篇圖文并茂篇幅簡(jiǎn)短的小譯文，關(guān)于隱藏內(nèi)容及相應(yīng)的提示元素使用方式blah blah的。

不過凡事有利亦有弊，在視覺上不可見的東西確實(shí)很有可能被用戶所忽略掉。因此，把界面元素隱藏起來還不算完，我們必須通過一些恰當(dāng)?shù)姆绞较蛴脩暨M(jìn)行提示，讓他們意識(shí)到隱藏元素的存在。

最佳實(shí)踐

我們對(duì)五類觸發(fā)指示進(jìn)行了大致的了解。光是這樣還欠點(diǎn)兒火候，更重要的是，我們必須知道在實(shí)際工作中以怎樣的方式、怎樣的程度來使用這些觸發(fā)指示，因?yàn)檫@類元素或多或少會(huì)為界面整體帶來一定的視覺噪音，搞不好會(huì)使整個(gè)界面變得相當(dāng)凌亂，不僅不能有效的起到提示作用，反而會(huì)影響用戶對(duì)于其他內(nèi)容和功能的瀏覽使用。我建議大家在實(shí)踐中首先對(duì)以下四個(gè)方面的問題進(jìn)行考慮：

確定隱藏內(nèi)容的重要程度，判斷它們對(duì)于轉(zhuǎn)化率的提升能夠起到多大的作用，它們是否只是對(duì)于某種特定類型的用戶才有意義。
確定這些內(nèi)容被瀏覽的頻率，通過統(tǒng)計(jì)工具查看能夠?yàn)g覽到這些內(nèi)容的用戶所占的百分比。
判斷用戶對(duì)于隱藏內(nèi)容的預(yù)期，通過用研來了解用戶在特定的界面當(dāng)中最希望獲取哪些方面的信息。
匯總前三個(gè)方面的分析結(jié)果，判斷是否有必要使用“隱藏內(nèi)容+觸發(fā)指示”的模式。如果確實(shí)需要，那么指示元素采用怎樣的視覺表現(xiàn)形式更加得當(dāng)；會(huì)吸引更多注意力的輪播動(dòng)畫？還是視覺效果相對(duì)較弱的漸變褪色？
如果你確定隱藏內(nèi)容確實(shí)非常重要(1)，但當(dāng)前的瀏覽量很低(2)，而且用戶的預(yù)期當(dāng)中并沒有包含這些內(nèi)容(3)，那么你就應(yīng)該考慮對(duì)觸發(fā)指示元素進(jìn)行調(diào)整了，看看能否讓它們吸引到用戶更多的注意力；抑或是這些內(nèi)容根本就不應(yīng)該隱藏起來。

用戶的預(yù)期

這里所說的預(yù)期，是指用戶對(duì)自己能否在站點(diǎn)中找到隱藏元素所做出的假設(shè)和預(yù)判。如果用戶認(rèn)為某些內(nèi)容一定是藏在什么地方的，他們就會(huì)主動(dòng)的進(jìn)行尋找；反之，他們也有可能受到一些因素的影響，過早的認(rèn)定那些內(nèi)容根本不存在。

在購(gòu)物網(wǎng)站中，多數(shù)用戶認(rèn)為自己能夠并且應(yīng)該獲取到商品詳情、退換政策、運(yùn)費(fèi)等方面的信息。在這種預(yù)期的作用下，即使那些內(nèi)容并沒有直截了當(dāng)?shù)某尸F(xiàn)出來，他們也會(huì)主動(dòng)尋找。

另一方面，諸如用戶點(diǎn)評(píng)、額外的商品圖片集、視頻演示等附加內(nèi)容并非是所有購(gòu)物網(wǎng)站的標(biāo)配，如果它們?cè)谀J(rèn)狀態(tài)下是不可見的，那么對(duì)于那些不熟悉該站點(diǎn)的用戶來說，通常不會(huì)花費(fèi)太多時(shí)間進(jìn)行尋找，因?yàn)樵谒麄兊念A(yù)期中，這些內(nèi)容可能就是不存在的。

用戶的預(yù)期取決于他們長(zhǎng)久以來的認(rèn)知和行為習(xí)慣。作為設(shè)計(jì)師，如果不能確保用戶會(huì)從主觀上積極主動(dòng)的尋找隱藏元素，我們就要借助可視化的觸發(fā)指示，引導(dǎo)他們獲取更多的內(nèi)容。

觸發(fā)指示

任何一種對(duì)隱藏內(nèi)容的存在起到提示作用的界面元素都可以被稱為觸發(fā)指示。它們大致分為五類：

1.方向與空間
具有指向性的界面元素通常可以用于對(duì)隱藏內(nèi)容的指示。方向指示(directional indicator)的視覺表現(xiàn)形式能夠很準(zhǔn)確的描繪出虛擬空間當(dāng)中位置及移動(dòng)的概念，符合用戶直覺。

此外，方向指示本身通常會(huì)以圖標(biāo)的形式存在，這也使得后面的文字標(biāo)題在用戶看來具有更強(qiáng)的可點(diǎn)擊性，進(jìn)一步增強(qiáng)了隱藏內(nèi)容被發(fā)現(xiàn)的可能性。

在Fox的主導(dǎo)航當(dāng)中，前兩個(gè)菜單項(xiàng)會(huì)各自觸發(fā)一個(gè)“大數(shù)據(jù)量菜單”的展開(mega menu，趕上這種已然約定俗成的詞兒我是真心不想翻成中文——譯者C7210注)，其中作為觸發(fā)指示的正是標(biāo)題文字后面的下三角圖標(biāo)。這類元素從視覺上來看是很微小的，但它們對(duì)于用戶能否正確領(lǐng)會(huì)頁面的交互方式卻是至關(guān)重要的。

空間指示(spatial indicators)與方向指示具有比較密切的相關(guān)性。在這種模式中，通常會(huì)有一個(gè)“高亮”的界面元素向用戶提示當(dāng)前所處的位置或是已做過的選擇，而其他那些處于普通狀態(tài)的同級(jí)別導(dǎo)航元素則暗示著當(dāng)前區(qū)域當(dāng)中有更多內(nèi)容可以被發(fā)現(xiàn)。

分頁控件是一個(gè)比較典型的例子，這種模式可以很直白的讓用戶知道自己看過多少內(nèi)容、現(xiàn)在正處于怎樣的位置、接下來還有多少東西可看。另外，導(dǎo)航菜單中的“當(dāng)前”狀態(tài)標(biāo)識(shí)，以及瀏覽器的滾動(dòng)條等等，從本質(zhì)上講都屬于空間指示。

2.隱喻
隱喻是一種非常有效的引導(dǎo)方式。例如，將用戶界面設(shè)計(jì)成為書籍或雜志的樣式，在交互方式上也模擬真實(shí)的物理效果。通過這種高度隱喻化的表現(xiàn)形式來承載在線內(nèi)容，可以讓用戶會(huì)很自然的去瀏覽那些在當(dāng)前可視區(qū)域“后面”的東西，就像在現(xiàn)實(shí)中看書那樣。

隱喻的方式確實(shí)非常符合用戶的直覺及預(yù)期；作為設(shè)計(jì)師，我們必須確保擬真界面的外觀和交互方式能夠準(zhǔn)確的體現(xiàn)出真實(shí)物體的視覺及物理特性。不過，由于技術(shù)等客觀條件所限，真實(shí)物體的行為規(guī)律未必能夠被準(zhǔn)確的還原到網(wǎng)頁當(dāng)中，我們需要在選擇設(shè)計(jì)方案的時(shí)候?qū)@方面的問題加以考慮。

3.圖標(biāo)
圖標(biāo)可以使觸發(fā)指示元素在整個(gè)頁面當(dāng)中以相對(duì)凸顯的方式呈現(xiàn)出來，例如Macy在“Reviews”標(biāo)簽中所使用的星級(jí)圖標(biāo)。

圖標(biāo)一類的視覺元素可以使平淡枯燥的文字內(nèi)容具有更強(qiáng)的可辨識(shí)性，進(jìn)而引導(dǎo)用戶發(fā)現(xiàn)附近的隱藏元素。不過這類做法也具有一定的風(fēng)險(xiǎn)，有時(shí)它們吸引到的注意力太多了，以至于使用戶忽略掉了其他的重要信息。

4.漸變褪色
我們還可以通過改變內(nèi)容自身外觀的方式來指示更多的隱藏內(nèi)容，而不必使用圖標(biāo)一類的可視化界面元素作為觸發(fā)指示。其中最典型的方法就是為內(nèi)容文字設(shè)置漸變褪色效果，Amazon的商品描述頁面當(dāng)中就使用了這種方式。

逐漸褪色的文字可以很有效的吸引用戶的注意力，并促使他們探索更多內(nèi)容。配合可視化的觸發(fā)指示元素，例如“ Show More”文字鏈接及相關(guān)的圖標(biāo)，這種引導(dǎo)效果就會(huì)進(jìn)一步的增強(qiáng)。

5.短暫呈現(xiàn)
所謂短暫呈現(xiàn)，是指我們可以策略性的讓內(nèi)容在一個(gè)時(shí)間段內(nèi)保持可見。例如，在購(gòu)物網(wǎng)站的商品詳情頁面中，當(dāng)頁面完成加載后，完整的商品描述內(nèi)容可以在短時(shí)間內(nèi)保持呈現(xiàn)狀態(tài)，然后通過動(dòng)畫方式收起，并在內(nèi)容最終消失的位置提供一個(gè)可視的觸發(fā)指示元素，這樣用戶就很清楚有哪些內(nèi)容被隱藏了起來，當(dāng)他們需要獲取相關(guān)信息的時(shí)候，可以到哪里去找到這些內(nèi)容。當(dāng)然，這種模式的實(shí)現(xiàn)當(dāng)中有一個(gè)重要的前提，那就是用戶必須注意到了內(nèi)容消失的過程及相應(yīng)的動(dòng)畫效果。

關(guān)于短暫呈現(xiàn)，另外一個(gè)典型的例子就是輪播。在這種模式中，多項(xiàng)內(nèi)容會(huì)依次呈現(xiàn)一段時(shí)間；這樣不僅能夠讓用戶了解到更多內(nèi)容的存在，更重要的是，它們會(huì)“主動(dòng)”的顯現(xiàn)出來，用戶無需執(zhí)行任何交互操作就可以獲取到完整的信息。