一、功能入口概述

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

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

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

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

二、功能入口形式

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

1. 文字入口

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

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

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

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

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

這里有兩種方式：

A.將功能入口以文字的形式直接放出來，列表本身不承載任何入口；

B.將列表整體作為一個入口，其余功能以文字的形式作為另一個入口；

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

2. 圖標(biāo)入口

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

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

1. 一般對于用戶認(rèn)知度很高的按鈕，比如電話、喜歡、關(guān)閉等，可以直接用圖形表達(dá)，用戶也能夠充分理解其含義。

2. 對于用戶認(rèn)知度不高的按鈕，我們最好圖標(biāo)配合文字按鈕進(jìn)行說明。最直觀的方式是直接圖標(biāo)+文字，比較隱蔽的方式是 hover 圖標(biāo)再進(jìn)行文字含義的解釋。這兩種都可以進(jìn)行使用。

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

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

3. 卡片入口

卡片入口則區(qū)別于常規(guī)的入口形式，卡片入口可以讓我們對其內(nèi)容區(qū)域有更加靈活的發(fā)揮方式。卡片一共可以分為三種形式：純卡片、卡片+常駐入口、卡片+隱藏入口。

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

這種卡片形式不用刻意表達(dá)點(diǎn)擊樣式，因為一般卡片在用戶視角下都是可以點(diǎn)擊的。我們更多的關(guān)于則是卡片的表現(xiàn)形式。如果大家對表現(xiàn)形式感興趣，后續(xù)有時間可以整理一波，這里就不再贅述。

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

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

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

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

4. 自定義入口

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

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

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

1. 常駐類入口

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

2. 隱藏類入口

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

3. 場景類入口

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

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

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

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

作者：阿東的設(shè)計體驗館