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