如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

本文轉(zhuǎn)自今日頭條的人人都是產(chǎn)品經(jīng)理，致敬。

最近身邊的一些小伙伴，總會(huì)遇見B端設(shè)計(jì)工作，對(duì)于這種偏后臺(tái)設(shè)計(jì)的B端設(shè)計(jì)，總會(huì)有大量的表單設(shè)計(jì)需要做，結(jié)合以前自己也有過(guò)不少表單設(shè)計(jì)的工作，在這里給大家分享一下自己對(duì)于PC端表單設(shè)計(jì)的研究，聊一聊表單在PC端中的運(yùn)用。

表單的作用

商業(yè)離不開數(shù)據(jù)，而數(shù)據(jù)總會(huì)依賴不同的表現(xiàn)形式，不管是word文檔，還是數(shù)據(jù)可視化，都是瀏覽者通過(guò)表現(xiàn)形式來(lái)對(duì)數(shù)據(jù)進(jìn)行閱讀和分析，因此表單的設(shè)計(jì)就是一種表現(xiàn)形式，我們將捋一捋如何通過(guò)表單更好的讓用戶閱讀順暢、操作方便、總而言之就是更好用啦。

表單信息的分割方式

無(wú)線分割：顧名思義，列表的信息之間正常情況下沒(méi)有分割線等方法來(lái)分隔，僅僅是用間距來(lái)分隔開內(nèi)容。好處是元素更少，畫面更簡(jiǎn)潔，但是視覺(jué)可能就沒(méi)那么清晰了，使用的出場(chǎng)率一般。

有線分割：同樣字面意思，就是通過(guò)簡(jiǎn)單的分割線來(lái)分割列表中的信息，讓視線左右移動(dòng)的時(shí)候更加穩(wěn)定、輕松，在表單設(shè)計(jì)中使用的出場(chǎng)率非常高。

斑馬線：通過(guò)深淺交替的色塊，以及色塊產(chǎn)生的對(duì)比來(lái)分隔列表中的信息，深淺深淺的循環(huán)就好像斑馬線，使用時(shí)是通過(guò)色塊產(chǎn)生對(duì)比，所以也可以使用帶有適量飽和度的色塊來(lái)區(qū)分，占頁(yè)面面積比例較大，適當(dāng)用色可以使得畫面更加活潑、豐滿，斑馬線也是出場(chǎng)率極高的一種展現(xiàn)形式。

斑馬線+分割線：很容易理解，就是斑馬線風(fēng)格+分割線的結(jié)合，用色塊區(qū)分的同時(shí)又加了分割線，信息之間的區(qū)分對(duì)比更加強(qiáng)烈，但是畫面層級(jí)就多了一些，沒(méi)有其他的看起來(lái)簡(jiǎn)潔，使用出場(chǎng)率也一般。

卡片式：跟卡片式風(fēng)格其他設(shè)計(jì)一樣，分別用懸浮的色塊來(lái)區(qū)分，間隔的地方是背景色，分隔的力度比較強(qiáng)，內(nèi)容區(qū)分的很清晰，弊端是更加占畫面的位置，尤其在信息很多列的時(shí)候，會(huì)增加大量的高度，用戶需要更多時(shí)間進(jìn)行下翻的操作。使用出場(chǎng)率相對(duì)其他形式來(lái)說(shuō)稍低。

可控制頁(yè)面顯示數(shù)量

場(chǎng)景：用戶需要閱讀大量的表單數(shù)據(jù)，且需要頻繁的翻頁(yè)、跳轉(zhuǎn)。

如圖，左下角可以設(shè)置界面中每頁(yè)顯示信息數(shù)量的多少，用戶可以根據(jù)自己的需要自由設(shè)置，當(dāng)瀏覽的數(shù)據(jù)較多的時(shí)候，不再需要頻繁點(diǎn)擊下一頁(yè)來(lái)瀏覽信息，只需把每頁(yè)顯示的數(shù)量調(diào)高，如此便減少了大量的操作次數(shù)。

像這樣允許用戶可以自由編輯來(lái)改進(jìn)體驗(yàn)的方式還有很多，比如可以設(shè)置顯示密度，就是以一樣的方式自由調(diào)整信息與分割線的間距。除了行間距，有的可以自由設(shè)置每一列的列間距，用戶可以根據(jù)自己的習(xí)慣來(lái)設(shè)置。

列表+可視化

場(chǎng)景：用戶需要瀏覽大量的數(shù)據(jù)，并需要對(duì)數(shù)據(jù)反復(fù)進(jìn)行計(jì)算、分析。

在使用大量的文字列表展示數(shù)據(jù)的同時(shí)，使用數(shù)據(jù)可視化加以配合，用戶可以更好的預(yù)覽到數(shù)據(jù)的大致情況，又可以在列表表單中閱讀到詳細(xì)的數(shù)據(jù)。

根據(jù)條件排序

場(chǎng)景：用戶想根據(jù)某種條件的大小排序，來(lái)先后閱讀數(shù)據(jù)。

通過(guò)點(diǎn)擊第一排小標(biāo)題行，可以選擇不同的方式調(diào)整信息的排序方式，就和電商商品排序一樣，可以選擇金額高到低或者低到高排序，也可以選擇別的方式進(jìn)行排序，從而更快找到自己所需要的內(nèi)容。

篩選過(guò)濾

場(chǎng)景：從一大堆混雜的數(shù)據(jù)當(dāng)中，尋找符合條件的自己所需要的數(shù)據(jù)。

添加篩選功能，過(guò)濾掉自己不想瀏覽的內(nèi)容，通過(guò)條件篩選，更快的更的找到自己想要的內(nèi)容、縮小查找范圍、減少達(dá)到目的所花的時(shí)間。一般通過(guò)下拉按鈕的形式選擇不同的條件來(lái)進(jìn)行篩選過(guò)濾。

關(guān)鍵字搜索

場(chǎng)景：已知列表中某信息的名稱關(guān)鍵字，想從大量混雜的列表中快速找到。

跟篩選過(guò)濾一樣，添加關(guān)鍵字搜索功能，用戶提供部分關(guān)鍵字，可通過(guò)關(guān)鍵字查詢，最快最的找到想要的那一條內(nèi)容。一般該目標(biāo)內(nèi)容是用戶已知的，有時(shí)候是針對(duì)性的。

懸停展現(xiàn)操作

場(chǎng)景：精簡(jiǎn)設(shè)計(jì)風(fēng)格的界面，不想界面中內(nèi)容過(guò)于繁多。

如圖，鼠標(biāo)懸停在哪一行，哪一行才會(huì)顯示該列表后面的操作按鈕，好處是減少了視覺(jué)干擾，能更快的找到捕捉到操作位置，弊端是用戶不進(jìn)行交互的時(shí)候無(wú)法發(fā)現(xiàn)操作按鈕如何出現(xiàn)。

可展開列表

場(chǎng)景：想快速獲取列表中某信息的其他附屬內(nèi)容。

如圖，點(diǎn)擊某一行后，展現(xiàn)該行的一些附屬信息?？梢圆挥锰D(zhuǎn)頁(yè)面而進(jìn)一步了解該行信息的詳情。

可編輯列表

場(chǎng)景：在瀏覽列表的同時(shí)，需要頻繁的對(duì)列表中的信息進(jìn)行編輯。

用戶可以直接對(duì)列表信息進(jìn)行修改、編輯，省去了跳轉(zhuǎn)再編輯的麻煩步驟，更節(jié)約時(shí)間，用戶操作起來(lái)更加方便。

快速預(yù)覽

場(chǎng)景：需要充分了解列表中不同信息的詳細(xì)說(shuō)明，頻繁跳轉(zhuǎn)又過(guò)于麻煩。

和可展開列表的作用類似，但是可展開列表顯示的內(nèi)容有限，快速預(yù)覽的功能可以用側(cè)彈框的方式、彈出對(duì)話窗口的方式、以及其他方式對(duì)選中的內(nèi)容直接展示詳細(xì)信息。用戶不需要跳轉(zhuǎn)至詳情頁(yè)就可以了解到大量信息，省去繁瑣的交互流程。不再需要頻繁的跳轉(zhuǎn)到詳情-返回-跳轉(zhuǎn)到另一個(gè)詳情-返回-跳轉(zhuǎn)-返回。使用快速預(yù)覽的功能就可以很好的解決這一問(wèn)題。

（PS：彈出對(duì)話窗口的方式，可以同時(shí)彈出好幾項(xiàng)列表的詳情信息進(jìn)行對(duì)比，但是側(cè)彈框因?yàn)楦叨葍?yōu)勢(shì)，可以展現(xiàn)更多內(nèi)容）

自定義列

場(chǎng)景：列表中每條內(nèi)容顯示信息參數(shù)過(guò)多，且很多不想瀏覽。

自定義列表功能是用戶可以自由設(shè)置每行信息參數(shù)的內(nèi)容，比如我不想列表中顯示金額這一項(xiàng)，就可以刪除，想要的時(shí)候可以添加回來(lái)，這樣用戶可以保留自己想要的那幾項(xiàng)內(nèi)容，可以更快更方便的閱讀到自己關(guān)心的那幾項(xiàng)參數(shù)，節(jié)省了用戶的有效時(shí)間。

固定頭部

場(chǎng)景：列表橫向或者縱向過(guò)多，下翻或橫拉的時(shí)候標(biāo)題頭被隱藏，不知道自己當(dāng)前瀏覽到的參數(shù)屬于哪一項(xiàng)。

交互過(guò)程中，可以把第一排重要的東西固定，列表內(nèi)容翻動(dòng)的同時(shí)，第一排仍然在原位不移動(dòng)而且覆蓋列表中的其他信息，很多自帶的框架都是這樣的形式，使用的出場(chǎng)率也是非常高，這樣用戶可以隨時(shí)查看到自己看到的內(nèi)容是屬于哪一項(xiàng)屬性，或者是屬于哪一條信息，可以是橫向固定，也可以固定豎直的第一排標(biāo)題，也可以固定最后一塊操作點(diǎn)擊區(qū)域，具體如何固定、是否固定，根據(jù)整體的需求來(lái)選擇。

間距的規(guī)則

通常表單都是大量的文字，大多數(shù)的文字高度都在該行高度的三分之一左右。過(guò)于緊密用戶瀏覽不順暢，過(guò)于分開顯得畫面過(guò)于松散，不同的分割方式，間距也會(huì)有所不同。

總結(jié)

其實(shí)上面的每一條都是一個(gè)小總結(jié)，每一條在大部分的列表中都可以用到，主要還是根據(jù)實(shí)際需求來(lái)運(yùn)用這幾點(diǎn)，比如分割的方式根據(jù)主體風(fēng)格來(lái)搭配，不要為了設(shè)計(jì)而設(shè)計(jì)盲目運(yùn)用，畢竟設(shè)計(jì)都是以內(nèi)容為主，尤其是表單設(shè)計(jì)，本身就是更好的表達(dá)內(nèi)容。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)