實戰經驗！如何做(zuò)好網頁後台的(de)表單和(hé)表格設計？
當接到一個(gè)全新的(de)網頁後台項目時(shí)，首先确定設計風格，然後考慮這(zhè)個(gè)後台尺寸是做(zuò)居中固定式，還(hái)是全屏響應式。全屏響應式的(de)網頁設計，除非有規定，否則你可(kě)以選擇任意主流尺寸作爲基尺寸來(lái)設計網頁。當然，不管選擇什(shén)麽尺寸，都得(de)基于做(zuò)好一個(gè)後台而開展工作。
如何定義一個(gè)後台是好的(de)？領導說好，用(yòng)戶說好，你自己也(yě)覺得(de)好，那應該就是好的(de)。大(dà)部分(fēn)情況下(xià)産品已經定制好了(le)每個(gè)功能模塊，UI上隻需要對(duì)著(zhe)原型加以美(měi)化(huà)，如果你是這(zhè)樣做(zuò)的(de)，那麽做(zuò)出的(de)東西一定會讓人(rén)覺得(de)有問題但是又不知道問題在哪裏，總是想讓你改。
跟産品經理(lǐ)好好溝通(tōng)，他(tā)們隻是把功能模塊設計出來(lái)而已，并沒有設計這(zhè)些模塊如何呈現，如何操作，如何結合，如何分(fēn)類等等。交互上在後台設計很重要，如果有專業的(de)交互設計師，這(zhè)些可(kě)以交給他(tā)們，畢竟，交互設計的(de)收入比UI要高(gāo)。然而在很多(duō)中小企業，産品原型直接給到設計是很常見的(de)。當缺少專業的(de)交互設計時(shí)，不要讓産品覺得(de)我們隻是按照(zhào)他(tā)們的(de)原型做(zuò)美(měi)化(huà)，那跟美(měi)工有什(shén)麽區(qū)别，不是看不起美(měi)工，美(měi)工的(de)全程是美(měi)術設計工程師，很高(gāo)大(dà)上的(de)職稱，但是大(dà)家還(hái)是不太願意這(zhè)樣被稱呼吧，可(kě)能覺得(de)頭銜套太大(dà)壓力會很大(dà)吧。事實上，UI本來(lái)就應該具備基本的(de)交互技能。
風格選定是很客觀的(de)，需要經過産品經理(lǐ)/領導确認，如果他(tā)們很相信你的(de)實力，你得(de)說出足夠充分(fēn)的(de)理(lǐ)由，爲什(shén)麽要選擇這(zhè)種風格，而并不隻是看起來(lái)更高(gāo)大(dà)上或隻是個(gè)人(rén)喜歡。
本人(rén)對(duì)後台網頁設計的(de)風格理(lǐ)解，大(dà)緻可(kě)以分(fēn)爲三類：純白背景風，輕淡背景風，深色背景風。在後台開始設計之前，你最好先選定其中一種風格，因爲後面的(de)所有元件的(de)設計，都得(de)基于這(zhè)個(gè)風格來(lái)設計。剛剛好，在早些時(shí)間就已經發布了(le)一個(gè)後台的(de)三種風格界面設計的(de)作品，大(dà)家可(kě)以看出每個(gè)模塊的(de)搭配和(hé)區(qū)分(fēn)：
純白背景風：線框/輕淡色（灰）背景（文字一般采用(yòng)黑(hēi)色）
輕淡背景風：純白色塊背景（文字一般采用(yòng)黑(hēi)色）
深色背景風：帶有透明(míng)度的(de)純色背景（文字一般采用(yòng)白色）
設計過程是很主觀的(de)，所有設計參數都取決于設計師，但是要嚴格按照(zhào)設計規範，并且讓所有設計看起來(lái)和(hé)用(yòng)起來(lái)都是合适的(de)。
全屏響應式+輕淡色背景風是目前很主流的(de)設計，也(yě)是很保守和(hé)安全的(de)設計。對(duì)于輕淡色的(de)HSB色值，可(kě)參考：H:0-360；S:0-5；B:90-97，當然沒有絕對(duì)大(dà)部分(fēn)情況用(yòng)的(de)淺灰是最多(duō)的(de)，如H0;S0;B93-95。
以下(xià)将依據這(zhè)個(gè)設計風格做(zuò)例子展示。
一個(gè)完整的(de)後台，由菜單/導航、數據/圖形展示、表格、表單、控件/組件以及彈窗(chuāng)等構成，我把這(zhè)些稱爲元件。這(zhè)裏主要分(fēn)享的(de)是構成後台中的(de)模塊和(hé)元件設計中的(de)細節。下(xià)面重點跟大(dà)家分(fēn)享表格和(hé)表單的(de)設計。
你應清楚的(de)是
爲了(le)避免在設計後台時(shí)一個(gè)人(rén)在YY，請保持左跟産品溝通(tōng)，右跟前端溝通(tōng)，這(zhè)點非常重要。或許很多(duō)朋友在接到項目的(de)時(shí)候不知道從何做(zuò)起，會在網上尋找一些相關素材，然後會看到很多(duō)很炫的(de)風格樣式，像是各種各樣的(de)數據/圖形展示，各種各樣的(de)統計曲線圖，還(hái)有各種各樣的(de)展示動效，真想拖到自己要設計的(de)後台。
如果合适當然可(kě)以，然而，很多(duō)情況下(xià)，統計分(fēn)析一類的(de)圖表設計，産品已經有很多(duō)現成套用(yòng)的(de)模闆，你可(kě)以做(zuò)的(de)很炫，但前端不一定會按照(zhào)UI效果圖來(lái)制作。從技術上來(lái)說，沒有前端實現不了(le)的(de)效果，你真的(de)不必懷疑前端的(de)實力。所以，保持設計跟前端的(de)良好溝通(tōng)，更能提高(gāo)工作的(de)質量和(hé)效率，并且，很多(duō)時(shí)候口頭/文字描述如何展示，是淡入淡出，還(hái)是彈出等等，前端是能理(lǐ)解的(de)。通(tōng)常地，做(zuò)動效隻是産品的(de)一種展示，而并不是産品的(de)本身，就當自己練手做(zuò)動畫(huà)吧。
簡潔又靈活的(de)表格
一個(gè)典型的(de)表格(table)包含标題（表頭單元格th），内容（标準單元格td），通(tōng)常都是一行行(tr)展示。設計時(shí)，應該将标題和(hé)内容區(qū)分(fēn)，比如标題文字加粗/顔色加深/字号加大(dà)，或标題背景加深。因選擇淡灰背景風，一般用(yòng)白色塊區(qū)分(fēn)的(de)原則，表格設計也(yě)盡量不使用(yòng)線框，然而一行行的(de)标準單元格如果都是白色的(de)就不便于預覽，因此可(kě)以隔一行給背景設置比主背景更淡的(de)背景。标題和(hé)内容一般有兩種對(duì)齊方式，居中對(duì)齊，居左對(duì)齊，整個(gè)站的(de)列表隻選擇一種對(duì)齊方式保持一緻性。爲了(le)更簡潔顯示，我們還(hái)可(kě)以把每一列的(de)間隔線去掉，但并不意味著(zhe)間隔不存在。每一列的(de)文字都不要貼邊，給前端标記間距（内間距padding）值，告訴前端鼠标點擊表頭單元格的(de)空白地方仍然可(kě)以拖動該列的(de)寬度，拖動寬度時(shí)保持每一列的(de)最小寬度并且标題仍然完全展示。
我們都遇到過這(zhè)樣頭痛的(de)問題，當列表字段太多(duō)，一屏無法完全展示，這(zhè)時(shí)應該怎麽做(zuò)？給表格設計一個(gè)左右滑動的(de)滾動條？如果内容真的(de)太多(duō)并且已經确定，這(zhè)也(yě)未嘗不是一種辦法，但是，重新設計過表格的(de)字段或許會更好，這(zhè)個(gè)時(shí)候應該跟産品好好溝通(tōng)了(le)。有以下(xià)方法：
減少不必要的(de)文字（如下(xià)圖中表頭的(de)“全選”去掉）。
縮略内容或者用(yòng)…省略後面内容，鼠标經過出現更多(duō)内容（如時(shí)間可(kě)以縮略後面的(de)時(shí)分(fēn)，鼠标經過出現具體時(shí)間）。
将不重要的(de)列表隐藏，表頭右邊設計一個(gè)>>按鈕，點擊跳到隐藏的(de)列表，點擊以後表頭左邊出現一個(gè)<<返回默認表格的(de)狀态。
因爲每個(gè)列表的(de)寬度是可(kě)以拖動的(de)，我們不能決定其固定的(de)寬度，但每一行的(de)高(gāo)度可(kě)以設置一個(gè)值，建議(yì)所有元件的(de)高(gāo)度、寬度、間距的(de)數值參數都設置爲偶數。
如果列表的(de)數據很多(duō)，一般都會設計page控件，但是也(yě)有一些列表會設計點擊加載更多(duō)，或者直接滑動滾動條加載更多(duō)。另外一種情況更常見，即設計固定高(gāo)度的(de)列表，一頁最多(duō)展示5/10/20…條數據，不管多(duō)少條，它的(de)高(gāo)度都是相對(duì)固定的(de)。然而有時(shí)候數據太少隻有一兩條，這(zhè)個(gè)時(shí)候仍然要固定默認最多(duō)展示條數的(de)高(gāo)度，如圖：
那麽問題來(lái)了(le)，在響應式設計當中，可(kě)沒有什(shén)麽參數是固定的(de)值，一般都是用(yòng)百分(fēn)比來(lái)設置。因爲默認顯示的(de)數據條數在任何寬度的(de)情況下(xià)仍然保持不變，因此當列表寬度縮小時(shí)，内容出現換行會增加高(gāo)度而拉高(gāo)整個(gè)列表的(de)高(gāo)度。值得(de)注意的(de)是，當其中一條數據的(de)内容有出現換行而又有其他(tā)數據沒有出現換行的(de)時(shí)候，每一行的(de)高(gāo)度都應該按出現換行的(de)且最高(gāo)的(de)高(gāo)度保持一緻，并且内容仍然保持垂直居中顯示。另外，當前端做(zuò)成這(zhè)種響應式的(de)列表時(shí)，一般不再讓鼠标拖動列的(de)寬度了(le)。
同一組數據的(de)不同寬度顯示
當寬度拖到第三種情況，按鈕也(yě)出現了(le)換行，那每一行的(de)高(gāo)度都應該按照(zhào)這(zhè)個(gè)高(gāo)度保持一緻，即使有一些數據隻有一個(gè)按鈕/地址并沒有出現換行，如圖：
當然，如果你不想讓内容出現換行，就可(kě)以用(yòng)上面說的(de)那三種方法來(lái)實現了(le)。
不要再說爲什(shén)麽别人(rén)做(zuò)的(de)表格那麽高(gāo)大(dà)上，明(míng)明(míng)自己做(zuò)的(de)效果圖還(hái)挺好看，爲什(shén)麽實現出來(lái)卻那麽醜，當你了(le)解這(zhè)裏面的(de)各種參數和(hé)邏輯，并且很好的(de)跟前端溝通(tōng)，參照(zhào)以上規則，不管再複雜(zá)的(de)列表都可(kě)以做(zuò)的(de)得(de)心應手并且得(de)以實現。
整齊并帶有交互功能的(de)表單
在後台設計中，表單出現的(de)頻(pín)率并不低于表格，甚至可(kě)以說幾乎所有類型的(de)網頁都會出現。比如登錄注冊、信息錄入、搜索、選擇器等等。常見的(de)表單有輸入框、普通(tōng)按鈕、開關按鈕、單選框、複選框、下(xià)拉菜單。
一個(gè)輸入框，通(tōng)常有标簽名稱label、提示信息placeholder（輸入信息後提示文字消失）、初始值value（需手動删除）。如果是必填表單，在适當位置（标簽的(de)前後，輸入框後）加上紅色*号（或其他(tā)符号）。
一些有字數規定的(de)輸入框，可(kě)以增加一個(gè)剩餘字段提示
事實上，在設計表單之前，我們就要先對(duì)表單的(de)标簽進行優化(huà)，标簽字段盡可(kě)能的(de)簡約。每個(gè)組的(de)表單，标簽都必須是對(duì)齊的(de)，輸入框/選擇框也(yě)應是對(duì)齊的(de)。當這(zhè)個(gè)組的(de)表單的(de)标簽字數較少并且較對(duì)應時(shí)，可(kě)以采用(yòng)左對(duì)齊的(de)方式，并且最長(cháng)标簽的(de)名稱離輸入框有margin值。
另一種情況，也(yě)是更經常遇到的(de)情況，當一組表單的(de)标簽很多(duō)時(shí)，某些标簽字段不能更好的(de)簡化(huà)，标簽的(de)字段都不對(duì)應，這(zhè)個(gè)時(shí)候可(kě)以采用(yòng)右對(duì)齊的(de)方式，這(zhè)種方式更靈活。
當一組表單的(de)标簽太多(duō)時(shí)，請跟産品溝通(tōng)并對(duì)其進行分(fēn)類。
有些表單是有邏輯/順序的(de)，比如地區(qū)的(de)選擇、出生年月(yuè)與生肖/星座的(de)對(duì)應等等。例如，在選擇省份之前，市區(qū)是不可(kě)操作的(de)，在UI上做(zuò)灰度顯示不可(kě)操作。除了(le)灰度代表不可(kě)操作，透明(míng)度也(yě)可(kě)以起到同樣作用(yòng)，這(zhè)種方式也(yě)可(kě)以運用(yòng)在按鈕上。
帶有識别功能的(de)輸入框：
當輸入有誤時(shí)，盡量避免彈出框提示，可(kě)以直接對(duì)輸入框設計不同的(de)狀态顯示默認狀态、選中狀态、錯誤狀态、成功狀态。
通(tōng)過以上方式設計的(de)一組信息錄入型的(de)表單設計，如圖：
表單的(de)設計可(kě)以單獨出一篇更詳細的(de)文章(zhāng)，還(hái)有篩選/選擇器一類的(de)表單，這(zhè)裏就不一一描述了(le)。
友好舒适的(de)彈窗(chuāng)
彈窗(chuāng)在後台的(de)出現頻(pín)率非常高(gāo)，其強度一般分(fēn)爲三種，弱彈窗(chuāng)、強彈窗(chuāng)、重彈窗(chuāng)。字面上已經很好理(lǐ)解，輕彈窗(chuāng)，一般鼠标經過的(de)時(shí)候即可(kě)出現而不用(yòng)點擊，比如提示說明(míng)，顯示更多(duō)信息，鼠标移過後立即消失，它不會影(yǐng)響下(xià)一層（當前頁面内容）頁面的(de)視覺效果和(hé)操作，因此這(zhè)個(gè)彈窗(chuāng)通(tōng)常會設計一個(gè)浮動帶有陰影(yǐng)效果的(de)框。
而強彈窗(chuāng)則是一個(gè)對(duì)話(huà)框，它暗示你必須對(duì)這(zhè)個(gè)對(duì)話(huà)框進行操作後才可(kě)以離開，如确認信息、錯誤提示信息。而重彈窗(chuāng)更像是一個(gè)新的(de)頁面，比如彈出的(de)列表，詳情，表單等。這(zhè)兩種彈窗(chuāng)通(tōng)常是點擊某一個(gè)按鈕/經過某一個(gè)操作觸發的(de)。這(zhè)兩種彈窗(chuāng)一般會對(duì)下(xià)一層頁面的(de)視覺做(zuò)蒙版處理(lǐ)，比如加上一定透明(míng)的(de)黑(hēi)色/白色，給下(xià)一層頁面的(de)内容做(zuò)模糊濾鏡等等。
當然，這(zhè)三種彈窗(chuāng)式可(kě)以結合的(de)，針對(duì)不同場(chǎng)景使用(yòng)不同的(de)彈窗(chuāng)設計這(zhè)點非常重要，這(zhè)直接關系到用(yòng)戶體驗效果。你是否可(kě)曾遇到過使用(yòng)一款産品時(shí)，動不動就彈窗(chuāng)，并且需要去點某一個(gè)按鈕才可(kě)以關閉。
任何一種場(chǎng)景在設計上都可(kě)以得(de)以解決，什(shén)麽情況下(xià)使用(yòng)什(shén)麽彈窗(chuāng)設計，或者有時(shí)候必須使用(yòng)強彈窗(chuāng)，但是又不想讓用(yòng)戶操作關閉，我們可(kě)以設計幾秒後自動關閉，或者點擊彈窗(chuāng)以外的(de)區(qū)域直接關閉。
彈窗(chuāng)還(hái)有兩種主要的(de)表現形式，一種是頂部有關閉按鈕，另外一種是直接點擊确認按鈕或者讀秒關閉。在保持規範性的(de)同時(shí)，盡量避免按鈕功能的(de)重複，比如一個(gè)提示信息必須讓用(yòng)戶點擊确認按鈕才可(kě)以關閉，那麽就使用(yòng)沒有頂部關閉按鈕的(de)設計。對(duì)于重彈窗(chuāng)，一般都會采用(yòng)頂部有關閉按鈕的(de)設計。
彈窗(chuāng)并不是後台的(de)專利，它在移動端更高(gāo)頻(pín)率的(de)出現，例如活動頁面的(de)彈窗(chuāng)，趣味性就顯得(de)更重要了(le)。
總結：
這(zhè)篇文章(zhāng)主要跟大(dà)家分(fēn)享的(de)是，當開始網頁後台項目設計的(de)時(shí)候，保持跟産品和(hé)前端的(de)良好溝通(tōng)。确定風格後開始設計，并分(fēn)享了(le)3個(gè)主要的(de)點：
制作靈活又簡潔的(de)表格
設計整齊并帶有交互功能的(de)表單
選擇友好舒适的(de)彈窗(chuāng)
後台還(hái)有其他(tā)元件設計，歡迎大(dà)家共同探討(tǎo)。
