2020-4-23 前端達人
最近身邊的一些小伙伴，總會遇見B端設計工作，對于這種偏后臺設計的B端設計，總會有大量的表單設計需要做，結合以前自己也有過不少表單設計的工作，在這里給大家分享一下自己對于PC端表單設計的研究，聊一聊表單在PC端中的運用。
商業離不開數據，而數據總會依賴不同的表現形式，不管是word文檔，還是數據可視化，都是瀏覽者通過表現形式來對數據進行閱讀和分析，因此表單的設計就是一種表現形式，我們將捋一捋如何通過表單更好的讓用戶閱讀順暢、操作方便、總而言之就是更好用啦。
無線分割：顧名思義，列表的信息之間正常情況下沒有分割線等方法來分隔，僅僅是用間距來分隔開內容。好處是元素更少，畫面更簡潔，但是視覺可能就沒那么清晰了，使用的出場率一般。
有線分割：同樣字面意思，就是通過簡單的分割線來分割列表中的信息，讓視線左右移動的時候更加穩定、輕松，在表單設計中使用的出場率非常高。
斑馬線：通過深淺交替的色塊，以及色塊產生的對比來分隔列表中的信息，深淺深淺的循環就好像斑馬線，使用時是通過色塊產生對比，所以也可以使用帶有適量飽和度的色塊來區分，占頁面面積比例較大，適當用色可以使得畫面更加活潑、豐滿，斑馬線也是出場率極高的一種展現形式。
斑馬線+分割線：很容易理解，就是斑馬線風格+分割線的結合，用色塊區分的同時又加了分割線，信息之間的區分對比更加強烈，但是畫面層級就多了一些，沒有其他的看起來簡潔，使用出場率也一般。
卡片式：跟卡片式風格其他設計一樣，分別用懸浮的色塊來區分，間隔的地方是背景色，分隔的力度比較強，內容區分的很清晰，弊端是更加占畫面的位置，尤其在信息很多列的時候，會增加大量的高度，用戶需要更多時間進行下翻的操作。使用出場率相對其他形式來說稍低。
場景：用戶需要閱讀大量的表單數據，且需要頻繁的翻頁、跳轉。
如圖，左下角可以設置界面中每頁顯示信息數量的多少，用戶可以根據自己的需要自由設置，當瀏覽的數據較多的時候，不再需要頻繁點擊下一頁來瀏覽信息，只需把每頁顯示的數量調高，如此便減少了大量的操作次數。
像這樣允許用戶可以自由編輯來改進體驗的方式還有很多，比如可以設置顯示密度，就是以一樣的方式自由調整信息與分割線的間距。除了行間距，有的可以自由設置每一列的列間距，用戶可以根據自己的習慣來設置。
場景：用戶需要瀏覽大量的數據，并需要對數據反復進行計算、分析。
在使用大量的文字列表展示數據的同時，使用數據可視化加以配合，用戶可以更好的預覽到數據的大致情況，又可以在列表表單中閱讀到詳細的數據。
場景：用戶想根據某種條件的大小排序，來先后閱讀數據。
通過點擊第一排小標題行，可以選擇不同的方式調整信息的排序方式，就和電商商品排序一樣，可以選擇金額高到低或者低到高排序，也可以選擇別的方式進行排序，從而更快找到自己所需要的內容。
場景：從一大堆混雜的數據當中，尋找符合條件的自己所需要的數據。
添加篩選功能，過濾掉自己不想瀏覽的內容，通過條件篩選，更快的更的找到自己想要的內容、縮小查找范圍、減少達到目的所花的時間。一般通過下拉按鈕的形式選擇不同的條件來進行篩選過濾。
場景：已知列表中某信息的名稱關鍵字，想從大量混雜的列表中快速找到。
跟篩選過濾一樣，添加關鍵字搜索功能，用戶提供部分關鍵字，可通過關鍵字查詢，最快最的找到想要的那一條內容。一般該目標內容是用戶已知的，有時候是針對性的。
場景：精簡設計風格的界面，不想界面中內容過于繁多。
如圖，鼠標懸停在哪一行，哪一行才會顯示該列表后面的操作按鈕，好處是減少了視覺干擾，能更快的找到捕捉到操作位置，弊端是用戶不進行交互的時候無法發現操作按鈕如何出現。
場景：想快速獲取列表中某信息的其他附屬內容。
如圖，點擊某一行后，展現該行的一些附屬信息。可以不用跳轉頁面而進一步了解該行信息的詳情。
場景：在瀏覽列表的同時，需要頻繁的對列表中的信息進行編輯。
用戶可以直接對列表信息進行修改、編輯，省去了跳轉再編輯的麻煩步驟，更節約時間，用戶操作起來更加方便。
場景：需要充分了解列表中不同信息的詳細說明，頻繁跳轉又過于麻煩。
和可展開列表的作用類似，但是可展開列表顯示的內容有限，快速預覽的功能可以用側彈框的方式、彈出對話窗口的方式、以及其他方式對選中的內容直接展示詳細信息。用戶不需要跳轉至詳情頁就可以了解到大量信息，省去繁瑣的交互流程。不再需要頻繁的跳轉到詳情-返回-跳轉到另一個詳情-返回-跳轉-返回。使用快速預覽的功能就可以很好的解決這一問題。
（PS：彈出對話窗口的方式，可以同時彈出好幾項列表的詳情信息進行對比，但是側彈框因為高度優勢，可以展現更多內容）
場景：列表中每條內容顯示信息參數過多，且很多不想瀏覽。
自定義列表功能是用戶可以自由設置每行信息參數的內容，比如我不想列表中顯示金額這一項，就可以刪除，想要的時候可以添加回來，這樣用戶可以保留自己想要的那幾項內容，可以更快更方便的閱讀到自己關心的那幾項參數，節省了用戶的有效時間。
場景：列表橫向或者縱向過多，下翻或橫拉的時候標題頭被隱藏，不知道自己當前瀏覽到的參數屬于哪一項。
交互過程中，可以把第一排重要的東西固定，列表內容翻動的同時，第一排仍然在原位不移動而且覆蓋列表中的其他信息，很多自帶的框架都是這樣的形式，使用的出場率也是非常高，這樣用戶可以隨時查看到自己看到的內容是屬于哪一項屬性，或者是屬于哪一條信息，可以是橫向固定，也可以固定豎直的第一排標題，也可以固定最后一塊操作點擊區域，具體如何固定、是否固定，根據整體的需求來選擇。
通常表單都是大量的文字，大多數的文字高度都在該行高度的三分之一左右。過于緊密用戶瀏覽不順暢，過于分開顯得畫面過于松散，不同的分割方式，間距也會有所不同。
其實上面的每一條都是一個小總結，每一條在大部分的列表中都可以用到，主要還是根據實際需求來運用這幾點，比如分割的方式根據主體風格來搭配，不要為了設計而設計盲目運用，畢竟設計都是以內容為主，尤其是表單設計，本身就是更好的表達內容。
本文發布于人人都是產品經理。