聊聊B端常見的功能入口設(shè)計

1 評論 16018 瀏覽 98 收藏 13 分鐘

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

一、功能入口概述

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

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

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

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

二、功能入口形式

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

2.1 文字入口

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

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

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

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

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

這里有兩種方式:

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

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

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

2.2 圖標(biāo)入口

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

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

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

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

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

2.3 卡片入口

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

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

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

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

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

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

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

2.4 自定義入口

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

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

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

3.1 常駐類入口

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

3.2 隱藏類入口

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

3.3 場景類入口

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

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

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

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

專欄作家

蒙東,微信公眾號:阿東的設(shè)計體驗館,人人都是產(chǎn)品經(jīng)理專欄作家。擅長交互、動效等界面設(shè)計,在設(shè)計的路上的探索者,歡迎學(xué)習(xí)交流

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自Unsplash,基于 CC0 協(xié)議

該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 期待卡片的表現(xiàn)形式的分享!??

    來自福建 回復(fù)