騰訊ISUX：隱藏為了適時(shí)出現(xiàn)

圖趣前言：“隱藏，簡(jiǎn)單點(diǎn)就是對(duì)網(wǎng)頁(yè)過(guò)量信息的一個(gè)hidden，當(dāng)用戶(hù)觸發(fā)行動(dòng)時(shí)，顯示更多的信息，這樣一是方便用戶(hù)的視覺(jué)重點(diǎn)在重要內(nèi)容上，提高信息傳達(dá)效率，另一方面，假想一下所有隱藏的東西都顯示出來(lái)呢，界面和用戶(hù)感受會(huì)有多么糟糕。”
在這個(gè)信息爆炸的社會(huì)里，信息過(guò)載已成為常態(tài)，為了提升用戶(hù)使用效率，處理界面的信息層次是每個(gè)設(shè)計(jì)師都要面對(duì)的重要一課。這篇短文想聚焦的話(huà)題是界面中的“隱藏”。在界面設(shè)計(jì)中，隱藏不是為了和用戶(hù)躲貓貓，而是為了讓用戶(hù)更好地聚焦在重要內(nèi)容上，降低界面信噪比，提升信息傳達(dá)效率。

筆者以前經(jīng)常玩的D&D，非常喜歡其中的盜賊（Rogue）角色，潛行在黑暗中，伺機(jī)致命一擊。一個(gè)好的隱藏設(shè)計(jì)，是否也能和盜賊的背刺一樣給力呢？我們先來(lái)看看隱藏的技能發(fā)動(dòng)條件。

其實(shí)這項(xiàng)技能的領(lǐng)域很寬，在固定和特定的情況下都能施展拳腳。首先看看在固定情況下的運(yùn)用吧。固定包括兩種：不常變?cè)O(shè)置和引向外部目標(biāo)。

1.不常變的設(shè)置:

固定不變的位置或功能，在相對(duì)不重要、操作頻率不高或一次性設(shè)置時(shí)，合理組織信息后就能隱藏了。

如ebay或apple的賬戶(hù)信息、個(gè)人任務(wù)等都可以歸屬在固定模塊“My eBay”下：

amazon那從a到z 豐富的類(lèi)目導(dǎo)航，被隱藏在左側(cè)logo下方。全站它都在老地方靜候展示的時(shí)機(jī)：

整站的固定位置始終能找到它，隱藏既保持認(rèn)知一致，也節(jié)約了空間：

2. 指向外部目標(biāo)

這種隱藏多考慮到外部分享平臺(tái)數(shù)量多、常有變動(dòng)增減，全部展示，界面設(shè)計(jì)更復(fù)雜；不常變的設(shè)置是絕對(duì)固定，指向外部目標(biāo)是相對(duì)固定。

新浪微博的和豆瓣電臺(tái)的點(diǎn)點(diǎn)點(diǎn)中，都隱藏了各種外部分享渠道：

豆瓣電臺(tái)的分享：

目前為止，前面提的隱藏都是隱藏次要信息。難道rogue的本事就這點(diǎn)？別急，接著要說(shuō)的特定情況下，“隱藏” 將一改綠葉角色，展示進(jìn)階技能。像一個(gè)高級(jí)rogue，只在該出場(chǎng)時(shí)亮相，漂亮的出手背刺甚至打出爆擊，將隱藏技發(fā)揮致極。

與內(nèi)容無(wú)關(guān)，在特定的閱讀場(chǎng)景下，適時(shí)地提示了chrome插件的隱藏選詞翻譯：

Apple官網(wǎng)注冊(cè)ID，逐字段填寫(xiě)時(shí)，輸入框會(huì)適時(shí)彈出tips來(lái)提示用戶(hù)，符合要求的Apple ID包含這三項(xiàng)內(nèi)容：

并根據(jù)輸入過(guò)程中的具體情況提示問(wèn)題點(diǎn)、待完成或特殊要求，都是針對(duì)性的提示，根據(jù)目標(biāo)現(xiàn)狀出手，是成功rogue必備的素質(zhì)。適時(shí)地提示隱藏的信息，大幅提升表單填寫(xiě)效率：

針對(duì)進(jìn)階技能rogue還有一套精準(zhǔn)背刺技巧：做好完全隱藏適時(shí)提示，其實(shí)也容易：給輕量化的線(xiàn)索或提示，尋求進(jìn)階技請(qǐng)看過(guò)來(lái)：

1. 細(xì)微處，優(yōu)雅\恰好的提示

既然隱藏，如果提示過(guò)強(qiáng)、大或顯，就違背了隱藏的初衷，顯得技拙，輕一點(diǎn)才不打擾到用戶(hù)的任務(wù)進(jìn)程，所以提示要細(xì)微，要適當(dāng)。

眾所周知的PS工具欄右下的小三角，就優(yōu)雅地邀請(qǐng)用戶(hù)在使用中根據(jù)需要探索更多功能：

2. 漸進(jìn)的提示

配合任務(wù)操作進(jìn)程，為用戶(hù)逐步揭開(kāi)隱藏的面紗，才是有效的提示。

在Pinterest右上角message彈框輸入前，很輕量的視覺(jué)提示：To后請(qǐng)輸入字符；隨著輸入動(dòng)作，出現(xiàn)下一步選擇用什么渠道發(fā)送的提示：

之前apple.com 注冊(cè)即時(shí)校驗(yàn)提示，也是漸進(jìn)提示的有效應(yīng)用。

3. 掃視/泛讀的提示

不經(jīng)意間用戶(hù)快速掃描時(shí)，用小小的力就能撬動(dòng)關(guān)注。rogue不是拼盡全力的肉盾，巧力是最適合的。

相比數(shù)字氣泡，小紅點(diǎn)足夠引起用戶(hù)掃視時(shí)的聚焦，如Giles Colborne提出“把標(biāo)簽放哪里比把標(biāo)簽做多大重要得多”：

4. 聚焦/專(zhuān)注任務(wù)時(shí)的提示

這是潛行rogue即將觸到背刺目標(biāo)的最給力動(dòng)作：專(zhuān)注目標(biāo)，適時(shí)出現(xiàn)。通常都是聚焦任務(wù)時(shí)，給出針對(duì)性強(qiáng)的操作提示。

來(lái)LinkedIn中inbox的前提是：查閱新信息或處理之前條目。

總攬整個(gè)信息列表時(shí)，除新舊信息區(qū)別外都均衡羅列；一旦聚焦具體條目時(shí)，鼠標(biāo)動(dòng)作恰好地hover出相應(yīng)的操作提示：

看到Path的加號(hào)提示時(shí)，自然明了是新增信息；點(diǎn)觸后沿襲之前的邏輯：提示可選擇條目分類(lèi)或關(guān)閉：

常按圖片時(shí)，猜測(cè)是對(duì)圖片內(nèi)容有興趣，接著了相關(guān)的提示。上下滾動(dòng)瀏覽時(shí)，右側(cè)會(huì)提示出發(fā)布順序的時(shí)間信息：

evernote的標(biāo)簽過(guò)濾大概從未告訴過(guò)你，它能推薦除當(dāng)前信息標(biāo)簽外，還所屬其他的標(biāo)簽列表給你；根據(jù)設(shè)置了多個(gè)標(biāo)簽的關(guān)聯(lián)性，提示并速推關(guān)聯(lián)性強(qiáng)的條目，高效地找出之前收集的資料：

最后，是再熟悉不過(guò)的iPhone幾乎應(yīng)用到所有IOS版本的搜索，完全隱藏，沒(méi)有線(xiàn)索。在未找到而“抓狂亂滑”時(shí)，搜索框悄然而至，并遞出的鍵盤(pán)提示輸入想找的信息；輸入時(shí)，又適時(shí)提示：可以快速換個(gè)詞，或從推薦項(xiàng)目中選?。贿€有根據(jù)觸屏的特質(zhì)，輕點(diǎn)其他區(qū)域取消這次召喚：

結(jié)語(yǔ)，隱藏的各項(xiàng)技能說(shuō)差不多了，設(shè)計(jì)工作中，做到成功的隱藏，打出rogue的致命一擊，是設(shè)計(jì)平衡觀(guān)下的最佳解法。有效的隱藏是為了適時(shí)的出現(xiàn)。潛心進(jìn)階技能，做最給力的設(shè)計(jì)解決方案，相信一擊中的，在不久就會(huì)得到；）

圖文參考：

《簡(jiǎn)約至上》

http://uxmag.com/articles/the-psychologists-view-of-ux-design

http://www.pinterest.com/

www.apple.com

www.amazon.com

www.linkedin.com

www.ebay.com

evernote

新浪微博

豆瓣電臺(tái)

微信

path