跟用戶躲貓貓！如何巧妙恰當地隱藏界面的設計

編者按：產品經理說：給它加上這個，這個，還有這個。設計師無奈攤手：就巴掌那么大的地方，怎么可能把這么多功能一股腦塞進去？這就考驗到設計師的界面隱藏功夫了，特別是信息過載的今天，這個完全是必備技，今天騰訊的?Viconia 同學分享了他的隱藏技能總結，從入門到必殺都有，來學習吧！

一句話總結：你剛好不經意地出現，而這正是隱藏的意義。

設計師必殺技能摳圖神器推薦！《PS摳圖神器：KnockOut 2.0漢化版下載及教程》

在這個信息爆炸的社會里，信息過載已成為常態，為了提升用戶使用效率，處理界面的信息層次是每個設計師都要面對的重要一課。這篇短文想聚焦的話題是界面中的“隱藏”。在界面設計中，隱藏不是為了和用戶躲貓貓，而是為了讓用戶更好地聚焦在重要內容上，降低界面信噪比，提升信息傳達效率。

筆者以前經常玩的D&D，非常喜歡其中的盜賊（Rogue）角色，潛行在黑暗中，伺機致命一擊。一個好的隱藏設計，是否也能和盜賊的背刺一樣給力呢？我們先來看看隱藏的技能發動條件。

其實這項技能的領域很寬，在固定和特定的情況下都能施展拳腳。首先看看在固定情況下的運用吧。固定包括兩種：不常變設置和引向外部目標。

一、不常變的設置：

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

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

amazon那從a到z 豐富的類目導航，被隱藏在左側logo下方。全站它都在老地方靜候展示的時機：

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

二、指向外部目標

這種隱藏多考慮到外部分享平臺數量多、常有變動增減，全部展示，界面設計更復雜；不常變的設置是絕對固定，指向外部目標是相對固定。

新浪微博的和豆瓣電臺的點點點中，都隱藏了各種外部分享渠道：

豆瓣電臺的分享：

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

在特定的閱讀場景下，適時地提示了chrome插件的隱藏選詞翻譯：

Apple官網注冊ID，逐字段填寫時，輸入框會適時彈出tips來提示用戶，符合要求的Apple ID包含這三項內容：

根據輸入過程中的具體情況提示問題點、待完成或特殊要求，都是針對性的提示，根據目標現狀出手，是成功rogue必備的素質。適時地提示隱藏的信息，大幅提升表單填寫效率：

針對進階技能rogue還有一套精準背刺技巧：做好完全隱藏適時提示，其實也容易：給輕量化的線索或提示，尋求進階技請看過來：

一、細微處——優雅\恰好的提示

既然隱藏，如果提示過強、大或顯，就違背了隱藏的初衷，顯得技拙，輕一點才不打擾到用戶的任務進程，所以提示要細微，要適當。

眾所周知的PS工具欄右下的小三角，就優雅地邀請用戶在使用中根據需要探索更多功能：

二、漸進的提示

配合任務操作進程，為用戶逐步揭開隱藏的面紗，才是有效的提示。

在Pinterest右上角message彈框輸入前，很輕量的視覺提示：To后請輸入字符；隨著輸入動作，出現下一步選擇用什么渠道發送的提示：

之前apple.com 注冊即時校驗提示，也是漸進提示的有效應用。

三、掃視/泛讀的提示

不經意間用戶快速掃描時，用小小的力就能撬動關注。rogue不是拼盡全力的肉盾，巧力是最適合的。

相比數字氣泡，小紅點足夠引起用戶掃視時的聚焦，如Giles Colborne提出“把標簽放哪里比把標簽做多大重要得多”：

四、聚焦/專注任務時的提示

這是潛行rogue即將觸到背刺目標的最給力動作：專注目標，適時出現。通常都是聚焦任務時，給出針對性強的操作提示。

來LinkedIn中Inbox的前提是：查閱新信息或處理之前條目。

總攬整個信息列表時，除新舊信息區別外都均衡羅列；一旦聚焦具體條目時，鼠標動作恰好地Hover出相應的操作提示：

看到Path的加號提示時，自然明了是新增信息；點觸后沿襲之前的邏輯：提示可選擇條目分類或關閉：

常按圖片時，猜測是對圖片內容有興趣，接著了相關的提示。上下滾動瀏覽時，右側會提示出發布順序的時間信息：

Evernote?的標簽過濾大概從未告訴過你，它能推薦除當前信息標簽外，還所屬其他的標簽列表給你；根據設置了多個標簽的關聯性，提示并速推關聯性強的條目，高效地找出之前收集的資料：

最后，是再熟悉不過的iPhone，在未找到而“抓狂亂滑”時，搜索框悄然而至，并遞出的鍵盤提示輸入想找的信息；輸入時，又適時提示：可以快速換個詞，或從推薦項目中選取；還有根據觸屏的特質，輕點其他區域取消這次召喚：

結語

隱藏的各項技能說差不多了，設計工作中，做到成功的隱藏，打出rogue的致命一擊，是設計平衡觀下的最佳解法。有效的隱藏是為了適時的出現。潛心進階技能，做最給力的設計解決方案，相信一擊中的，在不久就會得到。

設計師必備技能全講解！

基礎技！配色是設計師的必修第一課！
《設計師配色寶典！教你從零開始學配色（一）》

進階技！字體是設計師的必修第二課！
《再也不糾結字體選擇了！超全面的英文字體小結》

終極技！一切都為了過稿！
《過稿有訣竅！5個超實用技巧讓設計作品變得高大上》

原文地址：isux.tencent
作者：Viconia
uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量78萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：