国产亚洲精_丰满老熟好大的大bbb_男男激情做爰视频免费观看_欧美一区二区三区精品国产

在B端系統(tǒng)中，設計師免不了要和各種控件打交道，但是出于B端產(chǎn)品本身業(yè)務的復雜情況，加上不同端口設備對交互的影響，我們在使用控件的時候更加需要仔細的甄別、并合理的選用，（個人認為）使用B端控件的準則，并不是越炫酷越新穎越好，有時候，能合適的解決問題才更重要。

本文將以常用的控件類型為例，分別從常見形態(tài)、適用場景、各自優(yōu)劣等方面去對控件進行分析和拆解，幫助你更好的作出選用決策。

一.導航

作為產(chǎn)品結構把控的第一梯隊，導航承載著對產(chǎn)品功能分發(fā)和層級交互的重要作用，幫助用戶定位到自己需要的功能。設計導航的時候，我們需要從業(yè)務出發(fā)去梳理功能架構。同時需要理清楚幾個問題

1. 功能的數(shù)量

一般來說導航的功能數(shù)量會控制在7±2個，太多會造成用戶的記憶負擔，降低查找功能的效率。太少了說明功能的分發(fā)效率還不夠高（或者是產(chǎn)品真的很簡潔）。但由于目前B端產(chǎn)品的功能體系都比較復雜，加上不斷迭代增加的新功能，整體來說超過9個的導航都很常見，一般來說都是10個左右，如果不通過設計手段加以優(yōu)化，很容易造成較差的體驗。

設計小技巧
在功能數(shù)量多的情況下，為了提升功能查找的效率，就會對導航的排布做一些必要的調(diào)整

1. 增加分類，通過相似性原則把同類的功能靠近，使其層級清晰
2. 縮短功能描述字符，減少理解成本。減輕記憶負擔。

2. 導航的位置

常見的導航位置多見于頂部或者左側位置，首先在選用兩者之前我們得先知道兩者的區(qū)別

• 功能的可拓展性：側邊導航的承載性顯然更好，后續(xù)產(chǎn)品迭代也更方便增加入口。而相比之下頂部導航的可外露功能較少，可拓展性較弱。

• 操作效率：B端用戶使用產(chǎn)品的時候往往目的性是很強的，且基本上都有固定的操作流程，側邊導航的縱向排布更為緊湊，閱讀路徑更短，識別速度更快，更利于用戶高頻切換，頂部導航雖然也有二級菜單，但相比之下操作效率是比較低的。

• 適用場景：大多數(shù)B端產(chǎn)品都會選擇側邊導航，但是在一些平臺體系化的官網(wǎng)都會選擇頂部導航，將產(chǎn)品矩陣放置在下拉菜單中，而頁面本身則突出信息展示和介紹。

設計小技巧

側邊導航和頂部導航并不是非此即彼，還可以結合起來搭配使用，在一些大平臺的產(chǎn)品矩陣中，頂部導航和側邊導航會相輔相成，并加入搜索功能，輔助用戶更快速的找到所需產(chǎn)品。

3. 層級的劃分

目前比較常見的產(chǎn)品導航中多為一級或一二級。早期的產(chǎn)品中還能見到很多hover出現(xiàn)的二級三級菜單，現(xiàn)在已經(jīng)很少見到了，因為這種hover出現(xiàn)的不確定性和帶給用戶的試錯率太高，容易造成誤操作，引起用戶的挫敗心理。而且層級太深的話也不利于用戶對于該功能的感知，所以逐漸的被淘汰。

設計小技巧

設計導航需要注意盡量減少層級的嵌套，多采用直觀、平鋪式的設計，必要時增加分類輔助理解。

二. Tab

如果說導航是產(chǎn)品進行功能分發(fā)的重要途徑，那么功能內(nèi)的內(nèi)容劃分就是靠Tab來進行把關了。Tab切換常用用于信息劃分，比如說在規(guī)定區(qū)域內(nèi)信息無法全部展示時，會通過tab的形式前置凸顯該頁面的內(nèi)容，或者是信息比較混雜，也會用到tab進行劃分類別，核心都是為了幫助用戶快速定位所需信息。

1. Tab的形式

下圖是我整理的B端較為常見的四種Tab樣式，不知道大家有沒有想過，同樣是分類信息，這四種tab使用起來究竟有什么區(qū)別。

層級上

其實這4種tab都可以單獨拿來使用互不影響，但是在層級復雜涉及到導航嵌套導航的時候，我們就需要去區(qū)分他們之間的展示關系，一般來說1號導航的層級是最高的（管的最寬），在產(chǎn)品的頂部導航和頁面中承擔比較大范圍內(nèi)容的切換。他也常和2號進行搭配使用，2號層級要低一些。一般會用在更為細化的分類。

3號準確來說其實屬于分段篩選器（樣式會有區(qū)別），但是我們經(jīng)常也會把它當作一個小的tab去使用，常用在圖表模塊中對內(nèi)容進行不同維度的切換。相比于1/2號來說，他們更節(jié)省縱向空間，且更加針對具體模塊，操控范圍較窄一些

4號其實在移動端更為常見，單獨使用或是和1號搭配起來用于細分品類的切換，或者是大批量的篩選條件中使用

數(shù)量上

不同的場景下去選用Tab的時候，我們也需要兼顧考慮數(shù)量和具體功能，比如說124導航能承載的功能一般比較多（2-6個），但是3如果放置4個以上的話就會略顯擁擠（一般2-4個）。

功能上

相比起3號來說，4號在一些特殊場景下它會有更好的一個拓展性，比如說在日期切換的時候，4號還可以通過下拉的方式賦予這個tab更豐富的值。比較常用的就是在日期篩選的時候通過自定義下拉出具體的日期?；蛘呦聢D所示選擇具體的季度。

除了切換信息之外，2號tab還帶有標簽關閉的特殊功能，其實最開始也是從瀏覽器的標簽頁樣式演變過來，所以保留了關閉的交互，當產(chǎn)品內(nèi)置需要打開多個頁面進行協(xié)同對比的時候，標簽tab就是個不錯的選擇。它支持不打斷當前操作流程的情況下用戶去新開一個頁面，同時方便返回當前頁。

設計小技巧

除了以上說到的層級、功能、數(shù)量之外，我們是否選用一個tab樣式還需要考慮到具體頁面的設計，比如說顏色和整體UI風格

舉一個小例子，在之前設計一個頁面的具體模塊的Tab切換時，其實1、3、4都可以使用，但仔細斟酌一下，3號的底色和邊界框加在模塊的底色上，會讓整體的嵌套感過深（我這里只粗略示例，實際數(shù)據(jù)中觀感會更明顯），而四號的分裂感又比較強，相比之下，1號的樣式更為簡潔開放，對于較寬的頁面也會有更好的包容性。