今天我們聊一聊哪些容易被忽視的 Web 設計組件技巧。

盡管現在各家都將產品設計的重頭放在移動端，但對于運營后臺管理系統，仍然會將 Web 端作為自己的兵家必正之地。對于有著精細化管理，最小顆粒的維護自己平臺商品、服務、企業信息的互聯網產品來說。Web 端的大屏、易于錄入讀取數據等優勢仍然是移動端不可取代的。那么在 Web 端產品設計中，是不是存在一些容易被我們忽視的技巧呢？

后臺系統的設計原則和前臺系統的設計原則幾乎一致，雖然頁面的動效、配色方面可能不必像前臺那般精益求精。

產品的前端由于直接展示給用戶，因此往往對于圖片質量、頁面配色等都經過 UI 的仔細打磨，后臺產品則由于圖片少、文字多；內容展示少、表格多而在界面上慘不忍睹。作為后臺產品經理，雖說我們不用對每一處細節的仔細雕琢，但至少要審美在線。

關于后臺系統應該遵循的設計規范，如果各位有興趣，我們下一篇我們再講，本篇主要介紹在設計后臺系統時諸位肯定會用到的組件及其使用技巧。

一、基礎部分

基礎組件包含：頁面布局、顏色字體、圖標按鈕

布局

布局是前端工程師的分內職責，產品經理不必太多插手，但是對于布局有 2 個基本概念我覺得大家有必要了解。

1. 柵格式布局：通俗來講就是在一個頁面上用橫向（水平線）、縱線（垂直線/參考線）將整個頁面劃分成有規律的格子。前端工程師以這些格子或它的邊線作為基準線有規律的布局。
2. 響應式布局：就是指一個網站能夠兼容多個終端。通俗來講就是 Web 的內容根據預設響應式尺寸不同，可以在 IPad、手機等不同尺寸的設備上幾乎不影響體驗的看。一套優秀的響應式布局前端框架可以減少不少其他終端的代碼，還可以為不同終端的用戶提供更好更舒適的界面和用戶體驗。

顏色字體

為了給用戶一個前后一致的產品使用體驗，Web 后臺的顏色字體設計和前臺產品最好保持一致，也都需要 UI 確定顏色、字體相關的標準。

顏色的使用技巧 ：要定確定產品的主色、輔助色、中性色。

字體的使用技巧：需要確定產品的中文字體、英文/數字字體的樣式。有追求的產品經理在前端框架已定的情況下甚至還可以和 UI 一起商議字體的使用規范。主標題字體樣式大小、標題字體樣式大小 、正文字體樣式大小等。

圖標按鈕

圖標、按鈕的使用技巧：和顏色字體一樣，也需要事先確定好各個狀態下的按鈕狀態、顏色、尺寸

1. 在同個頁面中，其默認按鈕、主要按鈕甚至包括文字按鈕的不同展現方式
2. 當一個按鈕處于禁用狀態以及可用狀態下的樣式
3. 頁面有：「發送成功」、「發送失敗」等不同反饋信息時其對應按鈕也需要在顏色、文案、樣式、尺寸上有所不同。

二表單填寫部分

表單控件主要包含：單選多選、輸入框、選擇器、開關、日期控件、表單校驗

表單填寫可以算是整個后臺系統重中之重，后臺管理系統本來就是對前臺信息的管理、展示。說白了就是四個字：增、刪、改、查，如何更加優雅的錄入信息，讓整個表單填寫過程流暢、可控的進行是一個優秀的后臺產品經理必須掌握的技能。

單選多選

單選/多選按鈕的使用技巧：均不宜選項過多

1. 當一個問題的選項超過 5 個時，最好的選擇是使用選擇器
2. 另外單選/復選按鈕還需要考慮其禁用、可用狀態下不同的按鈕展現樣式

輸入框

輸入框的使用技巧：當用戶輸入內容過多時，最好讓研發使用可自適應高度的文本域，這樣的使用體驗簡直嗖嗖嗖的提升。

針對一些有固定前置、后置內容的選項：可以采用復合型文本框，一方面可以減少用戶輸入，提升用戶體驗；另一方面哪些具有固定前置、后置內容的選項（比如網址）往往容易輸錯，可以一定程度上降低用戶的誤操作的概率。

選擇器

選擇器的使用技巧：當選項過多時，相比于復選框，選擇器也是個好選擇。

另外使用選擇器的時候還有個不能忽視的好處就是級聯選擇。即選擇第一項時級聯觸發第二項。讓用戶看到自己的選擇即改變，非常的簡潔容易上手操作。

表單校驗

表單校驗的技巧：對表單內核心內容進行校驗是表格信息錄入一個重要一環。一般用的比較多的是行內校驗，即填寫完一行轉入下一行時即對上一行內容進行校驗。

三、表格數據展示部分

當表格數據內容過多時，就會變得非常難看，如何讓信息展示的又全又好看，可以參考以下技巧：

表格數據展示技巧：其實大部分的數據展示都可以像管理 Excel 表格一樣管理起來，但需要一定的開發工作量，這里可能需要產品經理平衡一下。畢竟魚與熊掌……。另外除了固定表頭外，排序：利用一定的排序規律讓數據變得有章可循，就不會顯得非常的凌亂；隱藏：將不必要的信息收起來也是不錯的選擇。

四、消息提示部分

頁面信息成功提交后，需要返回相關內容給用戶，否則會讓用戶一頭霧水不知道自己是否提交成功。

頁面消息提示：

消息提示技巧：根據提醒類型不同，設計不同顏色的反饋提示，讓用戶一目了然。 另外為了減少用戶操作，可以設置消息提示的反饋內容在幾秒后自動消失。

進度條：

進度條使用技巧：進度條可以帶狀態，也可以帶有描述性文字幫助用戶理解目前自己處于完成表單的第幾步。

Web 后臺設計中常用的控件還有許多比如標簽模塊、各種各樣的消息彈窗模塊、導航欄模塊等因為篇幅有限這次就不展開介紹。

一個優秀的后臺產品經理雖然我們比不上前臺產品經理對于每一個細節精益求精的打磨，但是還是應該在嚴于律己、優化每一處我們力所能及的細節上付出努力。這樣在回首自己設計出的產品才會有種天生驕傲的成就感吧。

本文作者：晞仔（lolitaxi61）微信公眾號：晞仔的生活實驗室

歡迎關注我，一個熱愛搖滾的貓奴，每周跟您分享我對產品的一點微不足道的見解