起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識再花式的導(dǎo)航欄設(shè)計，也難逃“交互設(shè)計四策略”
如何運用導(dǎo)航欄給產(chǎn)品賦能？本文作者從交互式設(shè)計四策略中找出了答案。
在平臺規(guī)范里的導(dǎo)航欄是死板又相對靜態(tài)的，但在四個策略的輔助下，結(jié)合用戶的操作手勢，也可以將它變得十分靈活，幫助頁面實現(xiàn)更好的用戶體驗。
上一期我從GUI視覺層面分析了導(dǎo)航欄的基礎(chǔ)規(guī)范（回顧：?如何讓導(dǎo)航欄成為加分項？），那這一期講到導(dǎo)航欄的進階應(yīng)用，便一定脫離不了交互了。
?在這之前我得先提及一本書——《簡約至上：交互式設(shè)計四策略》。
這本書基本算得上是交互設(shè)計的入門必讀書籍了，非常適合身處項目環(huán)節(jié)中上游的人員閱讀與學(xué)習(xí)（PM、UI和一部分總喜歡雨露均沾每個項目環(huán)節(jié)的Boss們）。
作者Giles Colborne在書中提出了四個令交互設(shè)計成果最大化的簡易策略：合理刪除、分層組織、適時隱藏和巧妙轉(zhuǎn)移。這四個策略幾乎成為我設(shè)計與優(yōu)化每一個頁面時的自我指導(dǎo)方針。
我參閱了大量的應(yīng)用，想總結(jié)出它們是如何運用導(dǎo)航欄來給產(chǎn)品賦能的。竟然很巧地發(fā)現(xiàn)（我可真是個小機靈鬼），再花式的導(dǎo)航欄設(shè)計也難逃“四策略”手法。
首先，導(dǎo)航欄作為一個獨立控件，它本身就已經(jīng)是“分層組織”策略的一種表現(xiàn)形式。接下來我們來看看，優(yōu)秀的產(chǎn)品設(shè)計是如何運用另外三種策略來耍好導(dǎo)航欄的。
01 合理刪除
導(dǎo)航欄不能輕易刪除，但凡事沒有絕對，什么時候我們可以合理地刪除導(dǎo)航欄呢？
Nike Run Club（下文簡稱NRC）是耐克官方出品的一款跑步記錄APP。既然做產(chǎn)品要站在用戶角度出發(fā)，那我們就來復(fù)原一下主要功能的用戶使用場景。
當(dāng)你的老板要求你一天出150個界面設(shè)計的時候，你怕了，你準(zhǔn)備跑路，同時又不想浪費一天中任何一次記錄運動的機會。于是你打開NRC，你的目的很明確：認(rèn)真地跑路，并記錄運動。
點擊“開始”按鈕，當(dāng)你一旦開始跑步，手機基本就不再使用了。直到跑步結(jié)束。
在用戶記錄跑步這樣一個單一事件中，NRC知道你會專注運動，很少存在關(guān)注其他功能、瀏覽其他頁面的可能性。于是NRC可以很干脆地刪掉導(dǎo)航欄。而返回按鈕用了界面中的“結(jié)束”按鈕代替。
滴滴出行在呼叫快車時也做了刪除導(dǎo)航欄的處理。用戶一旦發(fā)單，開始呼叫司機時，呼叫頁面內(nèi)的所有操作都只聚集在界面下方的一個視覺區(qū)域內(nèi)。
上面兩個刪除導(dǎo)航欄的示例有什么共通點呢？總結(jié)一下：
第一是用戶在當(dāng)前頁面的事件狀態(tài)明確，不需要導(dǎo)航標(biāo)題提醒用戶當(dāng)前在什么位置，用戶也極少可能在當(dāng)前頁面發(fā)生其他事件操作。于是完全可以去除導(dǎo)航標(biāo)題與內(nèi)容控件；
第二，雖然刪除了返回按鈕，但都采用了很典型的“費茨定律”，就算用戶誤操作，也能便捷地撤銷正在發(fā)生的事件。反而這比循規(guī)蹈矩地運用導(dǎo)航欄來承載返回按鈕合理了許多。（篇幅原因，費茨定律在以后的文章中再詳解，有興趣可以先自行查閱資料。費茨定律其中一條定律法則是：當(dāng)目標(biāo)大小一定時，起點離目標(biāo)中心的距離越近，所花費的時間越短；距離越遠(yuǎn)，所花時間越長。）
既然導(dǎo)航欄內(nèi)所有的規(guī)范元素都有可取代方案，為什么不刪除它呢？正如Giles Colborne在書中告訴我們的：大膽地刪除。（但也不要極端到盲目刪除…）
02 適時隱藏
隱藏和刪除看起來十分相似，但其實不然。我們?nèi)绾螀^(qū)分這兩個技巧呢？
隱藏最常見的情況是，當(dāng)導(dǎo)航欄的出現(xiàn)會成為打擾用戶沉浸體驗的障礙時，我們會選擇隱藏，例如看視頻、瀏覽圖片等顯示全屏媒體的場景，有導(dǎo)航欄反而會分散用戶的注意力。
不知道你有沒有發(fā)現(xiàn)到一個細(xì)節(jié)：在大多數(shù)情況下，需要沉浸體驗的頁面不但會隱藏導(dǎo)航欄，同時也會隱藏狀態(tài)欄，導(dǎo)航欄中載有當(dāng)前頁面的標(biāo)題、導(dǎo)航按鈕和內(nèi)容控件；狀態(tài)欄中會載有時間、Wi-Fi等系統(tǒng)設(shè)備信息。
iOS在人機交互指南中提醒我們，顯示全屏媒體時，請考慮暫時隱藏狀態(tài)欄，但請避免永久隱藏。如果沒有狀態(tài)欄，當(dāng)用戶需要查看時間或其他設(shè)備信息時必須離開應(yīng)用。設(shè)計師應(yīng)該讓用戶可以使用簡單的手勢重新顯示隱藏的狀態(tài)欄。
另一種情況是當(dāng)前頁面非常注重一屏內(nèi)容展現(xiàn)時，我們會隱藏導(dǎo)航欄。
京東在用戶搜索了商品之后，頭部有三個信息欄，非常冗長。分別是：
- 導(dǎo)航欄：放置搜索框和頁面內(nèi)容控件；
- 全局篩選欄：針對全局的篩選組件，主要用于商品排序篩選；
- 垂直內(nèi)容篩選欄：當(dāng)前所搜索的商品品類的垂直篩選標(biāo)簽。
用戶在搜索了商品之后，向上滑動頁面，京東會隱藏導(dǎo)航欄和全局篩選欄。
一是因為用戶搜索關(guān)鍵詞后，滑動頁面大概率表示已經(jīng)開始在挑選商品，這時候可以大膽地猜測用戶行為，認(rèn)為搜索與排序的重要級下降了，搜索結(jié)果垂直內(nèi)容篩選的重要級上升了，便可以只保留下重要的操作。
二是可以讓內(nèi)容區(qū)域高度增加，隱藏頂部兩個欄目區(qū)域可以大致增加一個商品位的提前露出，增大了商品觸達(dá)用戶的可能性。這不就是UI設(shè)計為商業(yè)目標(biāo)賦能的一個案例嗎！
03 巧妙轉(zhuǎn)移
基于導(dǎo)航欄層級始終高于頁面內(nèi)容的特性，隨著用戶劃出第一屏，許多APP做了重要內(nèi)容或重要控件轉(zhuǎn)移到導(dǎo)航欄的設(shè)計。
豆瓣在影評討論區(qū)，用戶上滑頁面時，會將當(dāng)前影片的信息轉(zhuǎn)移到導(dǎo)航欄。其實這種轉(zhuǎn)移很常見，許多內(nèi)容社區(qū)APP都有這樣的交互設(shè)計（比如你正在瀏覽的公眾號文章，你再回到頂部試試看），方便用戶時刻知道自己當(dāng)前所瀏覽的內(nèi)容是關(guān)于哪一個主題的。這一類轉(zhuǎn)移是單純站在用戶體驗角度的考量。
但如果你仔細(xì)觀察，有一類轉(zhuǎn)移卻是綜合了用戶體驗與產(chǎn)品目標(biāo)的共同抉擇。如果你再稍微了解一點該產(chǎn)品背后的故事，甚至可以讓你洞悉到，為了鞏固產(chǎn)品的調(diào)性和目標(biāo)，PM和UI們在頁面設(shè)計時做了多少細(xì)枝末節(jié)的引導(dǎo)。
知乎在用戶瀏覽當(dāng)前問題時向上滑動頁面，也會像豆瓣一樣，將當(dāng)前問題標(biāo)題轉(zhuǎn)移到導(dǎo)航欄上，但與此同時會將“寫回答”的操作也轉(zhuǎn)移到導(dǎo)航欄。標(biāo)題轉(zhuǎn)移是出于用戶體驗，和大多數(shù)內(nèi)容社區(qū)的做法大同小異；
而“寫回答”的按鈕轉(zhuǎn)移，正符合知乎想要打造一個內(nèi)容交流社區(qū)的產(chǎn)品調(diào)性，他們希望刺激用戶進行問答互動，多多輸出UGC內(nèi)容，希望用“寫回答”的按鈕轉(zhuǎn)移進一步激發(fā)用戶創(chuàng)作內(nèi)容的可能性。
京東在店鋪首頁上滑頁面時，會將“關(guān)注”按鈕轉(zhuǎn)移到導(dǎo)航欄，方便用戶在瀏覽的過程中可以隨時收藏店鋪，增加了用戶對品牌店鋪的關(guān)注度和復(fù)購的可能性。
京東靠自營模式發(fā)家，近幾年來開始慢慢重視B2C市場，在這個小小的關(guān)注按鈕上，是不是可以算略顯端倪呢？
雖然我不能非?？隙?，可能提高用戶收藏操作只是為了輔助京東更好地進行營銷權(quán)重劃分，不過“關(guān)注”按鈕的轉(zhuǎn)移，確實能為B2C業(yè)務(wù)的滲透提供一份助力。
所以我這里說到的“轉(zhuǎn)移”的目的其實和Giles Colborne在書中講到的并不十分一致，Giles Colborne是希望設(shè)計師將當(dāng)前頁面低頻、冗雜的操作轉(zhuǎn)移到另一個頁面中去，而我提到的“轉(zhuǎn)移”反而是：產(chǎn)品越注重什么功能，越可以利用導(dǎo)航欄層級的先天優(yōu)勢來實現(xiàn)轉(zhuǎn)移。
04 總結(jié)
合理刪除、分層組織、適時隱藏和巧妙轉(zhuǎn)移已經(jīng)是我做設(shè)計和分析界面常用的一個手法，它并不一定是萬能的，但是它多多少少可以輔助我們做出更合理的設(shè)計。
這篇文章想要告訴大家的是，在平臺規(guī)范里的導(dǎo)航欄是死板又相對靜態(tài)的，但在四個策略的輔助下，結(jié)合用戶的操作手勢，也可以將它變得十分靈活，幫助頁面實現(xiàn)更好的用戶體驗。
不要被規(guī)范限制的太死，轉(zhuǎn)換設(shè)計師的角色變成用戶，你可以研究出更多好玩的操作。隨便打開一個應(yīng)用，去研究研究，你可能會樂在其中的。
作者：UCD耍家；公眾號：UCD耍家
本文由 @UCD耍家 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自unsplash，基于CC0協(xié)議
分層組織呢？
文章第7段哦
沒注意到，就一句話 ??
不是說好1天100張海報嗎，怎么變成150個界面設(shè)計了
老板隨機應(yīng)變[doge]
如果老板說好只要開發(fā)一天寫150行代碼，我覺得他們會高興的跳起來的