不同系統(tǒng)面向不同用戶，其設(shè)計(jì)也會(huì)有所不同。本篇文章以B端系統(tǒng)為例，分析其中的界面設(shè)計(jì)。希望能對(duì)產(chǎn)品設(shè)計(jì)的你提供一些參考。

B端系統(tǒng)主要是面向企業(yè)用戶，追求高效、便捷，是在拉通業(yè)務(wù)流程的基礎(chǔ)上進(jìn)行提效，縮短業(yè)務(wù)的處理周期。

在這樣背景下的B端系統(tǒng)，界面設(shè)計(jì)上，更偏重于簡(jiǎn)單高效，今天就簡(jiǎn)單談談我對(duì)B端系統(tǒng)界面的一些通用設(shè)計(jì)。

一、按鈕

放置位置一般沒有特殊要求，可放左邊也可放右邊，但是一定要遵循一個(gè)原則就是全部界面盡量做到統(tǒng)一。即要么統(tǒng)一放在左邊，要么統(tǒng)一放在右邊，盡量不要出現(xiàn)部分界面按鈕放左邊，部分界面按鈕放右邊的情況。

目前個(gè)人涉及到的系統(tǒng)按鈕大概率都放在左邊。依次按照操作頻繁排列，即從左至右，使用頻率由高到低。

二、搜索條件

搜索條件：搜索條件以三個(gè)搜索條件為一個(gè)分界線，界面的一行的空間剛好可放三個(gè)搜索條件加上查詢按鈕，如果大于三個(gè)則需要再放入下一行，所以是以三個(gè)搜索條件為一個(gè)分界線。

小于等于三個(gè)的情況是屬于搜索條件少的，一行就可以放完，這種情況就沒有什么可討論的。

這里只討論一下大于三個(gè)的情況：

單查詢框+組合搜索彈框：即只放一個(gè)查詢框，查詢框可以將列表所有字段作為查詢條件，但是一次只能選擇一個(gè)字段作為查詢條件。

如果存在多個(gè)條件的組合搜索場(chǎng)景，則用組合搜索功能，組合搜索支持單字段和多字段的搜索，多字段的搜索是并且的關(guān)系，即同時(shí)滿足設(shè)置的多個(gè)條件。

組合搜索的設(shè)置功能包含條件的新增刪除還有保存，保存功能是可將設(shè)置的多條件進(jìn)行保存，以便下一次使用。

界面設(shè)計(jì)如下：

全字段放開+默認(rèn)收縮：即將全部的查詢條件展示在界面，但是在初始狀態(tài)下，默認(rèn)只展示首行的查詢條件，首行的查詢條件一般是三個(gè)，三個(gè)都是使用頻率較高的字段，其他行默認(rèn)收起。

如果有需求就點(diǎn)開展示全部查詢條件。

界面設(shè)計(jì)如下：

三、查詢

1. 默認(rèn)查詢

基于當(dāng)前界面數(shù)據(jù)量，進(jìn)入當(dāng)前界面時(shí)，如果數(shù)據(jù)量較小，可以直接進(jìn)行全量查詢。

如果數(shù)據(jù)量較大，且查詢時(shí)間較長(zhǎng)，有兩種方式：

• 第一種就是進(jìn)入界面默認(rèn)不做查詢，由用戶自行設(shè)置查詢條件進(jìn)行查詢，這種方式適用于數(shù)據(jù)量大且不同用戶有不同的查詢需求的場(chǎng)景。
• 第二種方式默認(rèn)設(shè)置查詢條件，一般默認(rèn)查詢條件為時(shí)間周期+單據(jù)狀態(tài)，例如近期三個(gè)月+用戶需要處理的單據(jù)狀態(tài)，這種方式既能提高查詢效率，又能直接查詢出用戶需要篩選的數(shù)據(jù)。

2. 查詢優(yōu)化

數(shù)據(jù)基數(shù)比較大的情況下，盡量使用使用精確查詢，少使用模糊查詢。

如果確實(shí)有場(chǎng)景需要進(jìn)行模糊查詢，則需要與一般的查詢進(jìn)行分開，盡量非模糊查詢條件一個(gè)查詢接口，模糊查詢是一個(gè)查詢接口，或者后臺(tái)執(zhí)行查詢時(shí)做區(qū)分，這樣盡量做到模糊查詢不影響到非模糊查詢條件的查詢效率。

另外關(guān)于查詢分頁(yè)，做查詢的時(shí)候默認(rèn)查詢第一頁(yè)，其他的頁(yè)的數(shù)據(jù)在用戶請(qǐng)示相應(yīng)頁(yè)數(shù)的時(shí)候再做查詢，這樣可以也可以提高首次查詢的效率。

3. 查詢其他說明

查詢條件除了排版與設(shè)計(jì)之外，還需要注明具體的查詢方式。例如精確查詢還是模糊查詢，或者是否需要支持批量查詢，針對(duì)參照選擇的查詢條件，是否也需要支持多選查詢。

另外為了提高用戶體驗(yàn)，還可以做一些錦上添花的功能，例如查詢框內(nèi)容可一鍵復(fù)制，一鍵刪除等。

四、列表

列表頁(yè)除了顯示字段外，需要提供一些提高用戶體驗(yàn)的功能。

• 設(shè)置顯示字段：設(shè)置哪些字段默認(rèn)展示，哪些字段不作展示。
• 顯示列的寬度設(shè)置：列寬大小設(shè)置可通過鼠標(biāo)拉動(dòng)進(jìn)行設(shè)置。
• 列字段排序：列字段提供排序功能，單擊列自動(dòng)進(jìn)行降序和升序排列。

五、導(dǎo)入導(dǎo)出

導(dǎo)入導(dǎo)出功能單獨(dú)提出來說明，主要是針對(duì)大批量數(shù)據(jù)的場(chǎng)景，如果是數(shù)據(jù)量較少，則一般的導(dǎo)入導(dǎo)出功能就可。這里的設(shè)計(jì)主要是針對(duì)大數(shù)據(jù)量。

1. 導(dǎo)入

大數(shù)據(jù)量采用異步導(dǎo)入的方式，即用戶操作導(dǎo)入后，將導(dǎo)入的文件存入臨時(shí)表；然后后端將臨時(shí)表的數(shù)據(jù)進(jìn)行校驗(yàn)與導(dǎo)入，校驗(yàn)內(nèi)容包含數(shù)據(jù)是否正常填寫、格式是否正確、是否符合業(yè)務(wù)規(guī)則；當(dāng)校驗(yàn)完成后再執(zhí)行寫入，完成真正的導(dǎo)入。

整個(gè)導(dǎo)入過程狀態(tài)包含導(dǎo)入中、導(dǎo)入完成、校驗(yàn)中、校驗(yàn)完成、寫入中、完成、終止。

2. 導(dǎo)出

導(dǎo)出分為模板的導(dǎo)出與數(shù)據(jù)的導(dǎo)出。模板的導(dǎo)出只是一個(gè)文件模塊，不存在數(shù)據(jù)大小的問題，直接導(dǎo)出即可。數(shù)據(jù)的導(dǎo)出，包含導(dǎo)出數(shù)據(jù)范圍和導(dǎo)出方式兩個(gè)方面。

導(dǎo)出數(shù)據(jù)范圍：

1. 導(dǎo)出查詢條件的結(jié)果集。
2. 導(dǎo)出選擇的數(shù)據(jù)范圍。

導(dǎo)出的方式：小批量數(shù)據(jù)是直接導(dǎo)出就可，大批量的數(shù)據(jù)導(dǎo)出建議做異步導(dǎo)出。即確定導(dǎo)出后，將導(dǎo)出的條件傳到后端，由后端異步執(zhí)行導(dǎo)出，然后提供單獨(dú)的數(shù)據(jù)下載頁(yè)面下載結(jié)果集，結(jié)果集的界面需要做數(shù)據(jù)權(quán)限，用戶只能查看和下載自己導(dǎo)出的文件。