在B端頁面的設(shè)計(jì)過程中，我們會(huì)面臨很多入口的設(shè)計(jì)，比如需要從當(dāng)前頁面下鉆或者跳轉(zhuǎn)至其他功能的時(shí)候，這類入口統(tǒng)稱為功能入口。本文作者對(duì)功能入口的設(shè)計(jì)展開了分析，希望對(duì)你有幫助。

一、功能入口概述

不論是在設(shè)計(jì)中還是生活中，入口對(duì)于我們來說都很重要。比如當(dāng)你需要進(jìn)入到一個(gè)空間時(shí)，你需要知道門的位置并清楚如何打開它。比如下圖中左側(cè)的門就非常明顯，而右側(cè)的門則需要仔細(xì)辨認(rèn)了。

還有的入口即使你知道它存在，但也根本弄不懂它的含義，如下圖你能分辨出男女廁所嗎：

由此可見，在入口設(shè)計(jì)中保持其清晰與直觀是非常重要的。在B端頁面的設(shè)計(jì)過程中，我們同樣會(huì)面臨很多入口的設(shè)計(jì)，比如需要從當(dāng)前頁面下鉆或者跳轉(zhuǎn)至其他功能的時(shí)候，而這類入口我統(tǒng)稱為功能入口。

那么我們?cè)诿鎸?duì)這類問題時(shí)，到底有多少種形式且如何選擇呢，本人根據(jù)實(shí)踐以及資料整理出了這篇文章，對(duì)B端中常見的功能入口都進(jìn)行了對(duì)應(yīng)的總結(jié)和歸納，希望對(duì)大家有所幫助。

二、功能入口形式

在這里我根據(jù)樣式和場(chǎng)景將我們常見的各類入口分為以下幾類：文字入口、圖標(biāo)入口、卡片入口、自定義入口。那么這些入口的使用場(chǎng)景都有哪些區(qū)別呢，我們接著往下看。

2.1 文字入口

文字入口應(yīng)該是最常用的，也是我們最常見到的。其大量分布于我們的頁面之中，對(duì)于文字按鈕，通常會(huì)用以下幾種方式：

• 文字變藍(lán)。這是為了和普通的文本形成區(qū)分，從表達(dá)上直接告知用戶當(dāng)前可點(diǎn)擊；
• 文字+圖標(biāo)，比如箭頭或者圖標(biāo)。這種形式在很多界面中也會(huì)被用到；
• 文字+底色或者描邊，這其實(shí)就是我們常用的填充按鈕或者描邊按鈕。

那么純文字是否可以作為入口呢，答案是肯定的。純文字的形式一般存在于固定的組件入口，比如彈窗的取消，以及網(wǎng)站常見的底部導(dǎo)航：

在這里我們注意到目前有很多B端產(chǎn)品會(huì)有這樣的細(xì)節(jié)，對(duì)于在當(dāng)前頁面下鉆的入口，可以用純文字表示，對(duì)于需要下鉆或者跳轉(zhuǎn)頁面的入口，會(huì)在后面加一個(gè)符號(hào)的提示按鈕，達(dá)到提前告知用戶頁面跳轉(zhuǎn)的目的，表意更明確。

這里還請(qǐng)大家思考一個(gè)問題，如果你的當(dāng)前列表承載了多個(gè)入口，那么此時(shí)你應(yīng)該如何放置這些功能讓用戶更好理解呢。

這里有兩種方式：

• 將功能入口以文字的形式直接放出來，列表本身不承載任何入口；
• 將列表整體作為一個(gè)入口，其余功能以文字的形式作為另一個(gè)入口；

那么這兩種功能到底該如何取舍呢。

個(gè)人認(rèn)為，這取決于當(dāng)前功能的主次級(jí)關(guān)系，如果當(dāng)前功能都為平級(jí)，那么直接都放出來即可。如果某個(gè)功能為主要操作，那么列表本身點(diǎn)擊則為進(jìn)入該功能，其余功能都為輔助。

2.2 圖標(biāo)入口

圖標(biāo)入口的使用頻率也很高，比如我們常見的編輯、刪除或者設(shè)置等，都用了圖標(biāo)按鈕來進(jìn)行傳達(dá)。

但圖標(biāo)按鈕在使用時(shí)需要注意2點(diǎn)：

• 一般對(duì)于用戶認(rèn)知度很高的按鈕，比如電話、喜歡、關(guān)閉等，可以直接用圖形表達(dá)，用戶也能夠充分理解其含義。
• 對(duì)于用戶認(rèn)知度不高的按鈕，我們最好圖標(biāo)配合文字按鈕進(jìn)行說明。最直觀的方式是直接圖標(biāo)+文字，比較隱蔽的方式是hover圖標(biāo)再進(jìn)行文字含義的解釋。這兩種都可以進(jìn)行使用。

舉個(gè)實(shí)際的例子，你可以通過上下兩個(gè)圖片的圖標(biāo)按鈕，看你在默認(rèn)情況下能夠識(shí)別幾個(gè)圖標(biāo)的含義：

是不是coding的圖標(biāo)如果不進(jìn)行hover查看說明基本都不認(rèn)識(shí)，而微博的圖標(biāo)則基本都能夠辨識(shí)。

2.3 卡片入口

卡片入口則區(qū)別于常規(guī)的入口形式，卡片入口可以讓我們對(duì)其內(nèi)容區(qū)域有更加靈活的發(fā)揮方式?？ㄆ还部梢苑譃槿N形式：純卡片、卡片+常駐入口、卡片+隱藏入口。

「純卡片入口」這種形式我們很常見，就是在卡片里面可以簡(jiǎn)單介紹下該功能的信息，我們可以通過hover卡片樣式上進(jìn)行對(duì)應(yīng)變化，用戶直接通過點(diǎn)擊卡片就可以進(jìn)入到對(duì)應(yīng)入口。

這種卡片形式不用刻意表達(dá)點(diǎn)擊樣式，因?yàn)橐话憧ㄆ谟脩粢暯窍露际强梢渣c(diǎn)擊的。我們更多的關(guān)于則是卡片的表現(xiàn)形式。如果大家對(duì)表現(xiàn)形式感興趣，后續(xù)有時(shí)間可以整理一波，這里就不再贅述。

「卡片+常駐入口」這種形式適合其余入口也比較重要的時(shí)候，可以將多入口進(jìn)行外露。這樣便于用戶能夠一眼發(fā)現(xiàn)，缺點(diǎn)是可能整體視覺呈現(xiàn)上不夠美觀。

而卡片本身是否提供入口呢，這其實(shí)跟之前文字的思考一樣，如果我們本身對(duì)某個(gè)功能的點(diǎn)擊權(quán)重較大，你就可以賦予點(diǎn)擊整體卡片的功能，否則你可以去掉點(diǎn)擊卡片本身的功能。

「卡片+隱藏入口」這種設(shè)計(jì)形式在B端中也用得非常多。其既可以達(dá)到多入口的功能，也避免整體影響頁面的美觀性。缺點(diǎn)就是在用戶的第一眼呈現(xiàn)上會(huì)隱蔽一些，需要用戶主動(dòng)發(fā)現(xiàn)。

我們可以根據(jù)當(dāng)前產(chǎn)品的業(yè)務(wù)場(chǎng)景需求，來選擇不同的卡片入口形式。

2.4 自定義入口

自定義入口更多是設(shè)計(jì)師自定義的某類入口，他不限于樣式，比如可以是某類異性形狀。但此類入口一定要讓用戶明確其是可以進(jìn)行點(diǎn)擊的。比如你可以通過卡片形式或者加指向性的圖標(biāo)來讓用戶知道。

三、入口的出現(xiàn)場(chǎng)景

我們?cè)谶M(jìn)行入口設(shè)計(jì)的過程中，基本會(huì)有三種出現(xiàn)場(chǎng)景：常駐類、隱藏類以及場(chǎng)景類。

3.1 常駐類入口

常駐類入口通常是比較重要的，需要用戶高頻操作的。根據(jù)業(yè)務(wù)的需求場(chǎng)景我們可以選擇最重要的功能作為常駐入口外露，比如文雀文檔的新建文檔、知識(shí)庫(kù)和模板中心則作為高頻入口放了出來。

3.2 隱藏類入口

對(duì)于很多操作，他的重要程度并不高，且操作較多的情況下，我們會(huì)考慮將其功能入口在默認(rèn)情況下隱藏，用戶需要hover才能看到功能入口，或者隱藏在…里面：

3.3 場(chǎng)景類入口

這種入口的用法則更為高級(jí)，一般當(dāng)用戶需要該功能入口的時(shí)候，它就可以主動(dòng)出現(xiàn)。比如飛書文檔當(dāng)你使用ctrl+z撤回操作規(guī)定次數(shù)后，其會(huì)在頂部出現(xiàn)歷史記錄的入口，并提示你可以直接進(jìn)入歷史文檔查看。

這種還體現(xiàn)在當(dāng)你在長(zhǎng)文檔區(qū)域滑動(dòng)操作指定距離后，其右下角就會(huì)出現(xiàn)返回頂部的按鈕，來讓用戶更快地回到頂部。

但這種入口場(chǎng)景的建立的前提，一定要在熟知用戶操作的前提下進(jìn)行，才能給用戶更好的體驗(yàn)，否則只會(huì)帶來尷尬的體驗(yàn)。這不由得讓我想起了之前微博上線的時(shí)間預(yù)約功能，其用在新聞大事件的時(shí)間預(yù)約時(shí)就會(huì)非常尷尬，比如「你預(yù)約明上午10點(diǎn)半襲擊FBI辦公室」。

好了，本次的入口分享就到這里了，希望對(duì)大家有幫助。也是今年的最后一篇了，希望大家新年快樂，明年過得更好～