盡管現在各家都將產(chǎn)品設計的重頭放在移動(dòng)端，但對于運營(yíng)后臺管理系統，仍然會(huì )將Web端作為自己的兵家必正之地。對于有著(zhù)精細化管理，最小顆粒的維護自己平臺商品、服務(wù)、企業(yè)信息的互聯(lián)網(wǎng)產(chǎn)品來(lái)說(shuō)。Web端的大屏、易于錄入讀取數據等優(yōu)勢仍然是移動(dòng)端不可取代的。那么在Web端產(chǎn)品設計中，是不是存在一些容易被我們忽視的技巧呢?
后臺系統的設計原則和前臺系統的設計原則幾乎一致，雖然頁(yè)面的動(dòng)效、配色方面可能不必像前臺那般精益求精。
產(chǎn)品的前端由于直接展示給用戶(hù)，因此往往對于圖片質(zhì)量、頁(yè)面配色等都經(jīng)過(guò)UI的仔細打磨，后臺產(chǎn)品則由于圖片少、文字多;內容展示少、表格多而在界面上慘不忍睹。作為后臺產(chǎn)品經(jīng)理，雖說(shuō)我們不用對每一處細節的仔細雕琢，但至少要審美在線(xiàn)。
關(guān)于后臺系統應該遵循的設計規范，如果各位有興趣，我們下一篇我們再講，本篇主要介紹在設計后臺系統時(shí)諸位肯定會(huì )用到的組件及其使用技巧。
一、基礎部分
基礎組件包含：頁(yè)面布局、顏色字體、圖標按鈕
布局
布局是前端工程師的分內職責，產(chǎn)品經(jīng)理不必太多插手，但是對于布局有2個(gè)基本概念我覺(jué)得大家有必要了解。
柵格式布局：通俗來(lái)講就是在一個(gè)頁(yè)面上用橫向(水平線(xiàn))、縱線(xiàn)(垂直線(xiàn)/參考線(xiàn))將整個(gè)頁(yè)面劃分成有規律的格子。前端工程師以這些格子或它的邊線(xiàn)作為基準線(xiàn)有規律的布局。
響應式布局：就是指一個(gè)網(wǎng)站能夠兼容多個(gè)終端。通俗來(lái)講就是Web的內容根據預設響應式尺寸不同，可以在IPad、手機等不同尺寸的設備上幾乎不影響體驗的看。一套優(yōu)秀的響應式布局前端框架可以減少不少其他終端的代碼，還可以為不同終端的用戶(hù)提供更好更舒適的界面和用戶(hù)體驗。
顏色字體
為了給用戶(hù)一個(gè)前后一致的產(chǎn)品使用體驗，Web后臺的顏色字體設計和前臺產(chǎn)品最好保持一致，也都需要UI確定顏色、字體相關(guān)的標準。
顏色的使用技巧 ：要定確定產(chǎn)品的主色、輔助色、中性色。
字體的使用技巧：需要確定產(chǎn)品的中文字體、英文/數字字體的樣式。有追求的產(chǎn)品經(jīng)理在前端框架已定的情況下甚至還可以和UI一起商議字體的使用規范。主標題字體樣式大小、標題字體樣式大小 、正文字體樣式大小等。
圖標按鈕
圖標、按鈕的使用技巧：和顏色字體一樣，也需要事先確定好各個(gè)狀態(tài)下的按鈕狀態(tài)、顏色、尺寸
在同個(gè)頁(yè)面中，其默認按鈕、主要按鈕甚至包括文字按鈕的不同展現方式
當一個(gè)按鈕處于禁用狀態(tài)以及可用狀態(tài)下的樣式
頁(yè)面有：「發(fā)送成功」、「發(fā)送失敗」等不同反饋信息時(shí)其對應按鈕也需要在顏色、文案、樣式、尺寸上有所不同。
二、表單填寫(xiě)部分
表單控件主要包含：?jiǎn)芜x多選、輸入框、選擇器、開(kāi)關(guān)、日期控件、表單校驗
表單填寫(xiě)可以算是整個(gè)后臺系統重中之重，后臺管理系統本來(lái)就是對前臺信息的管理、展示。說(shuō)白了就是四個(gè)字：增、刪、改、查，如何更加優(yōu)雅的錄入信息，讓整個(gè)表單填寫(xiě)過(guò)程流暢、可控的進(jìn)行是一個(gè)優(yōu)秀的后臺產(chǎn)品經(jīng)理必須掌握的技能。
單選多選
單選/多選按鈕的使用技巧：均不宜選項過(guò)多
當一個(gè)問(wèn)題的選項超過(guò)5個(gè)時(shí)，最好的選擇是使用選擇器
另外單選/復選按鈕還需要考慮其禁用、可用狀態(tài)下不同的按鈕展現樣式
輸入框
輸入框的使用技巧：當用戶(hù)輸入內容過(guò)多時(shí)，最好讓研發(fā)使用可自適應高度的文本域，這樣的使用體驗簡(jiǎn)直嗖嗖嗖的提升。
針對一些有固定前置、后置內容的選項：可以采用復合型文本框，一方面可以減少用戶(hù)輸入，提升用戶(hù)體驗;另一方面哪些具有固定前置、后置內容的選項(比如網(wǎng)址)往往容易輸錯，可以一定程度上降低用戶(hù)的誤操作的概率。
選擇器
選擇器的使用技巧：當選項過(guò)多時(shí)，相比于復選框，選擇器也是個(gè)好選擇。
另外使用選擇器的時(shí)候還有個(gè)不能忽視的好處就是級聯(lián)選擇。即選擇第一項時(shí)級聯(lián)觸發(fā)第二項。讓用戶(hù)看到自己的選擇即改變，非常的簡(jiǎn)潔容易上手操作。
表單校驗
表單校驗的技巧：對表單內核心內容進(jìn)行校驗是表格信息錄入一個(gè)重要一環(huán)。一般用的比較多的是行內校驗，即填寫(xiě)完一行轉入下一行時(shí)即對上一行內容進(jìn)行校驗。
三、表格數據展示部分
當表格數據內容過(guò)多時(shí)，就會(huì )變得非常難看，如何讓信息展示的又全又好看，可以參考以下技巧：
表格數據展示技巧：其實(shí)大部分的數據展示都可以像管理Excel表格一樣管理起來(lái)，但需要一定的開(kāi)發(fā)工作量，這里可能需要產(chǎn)品經(jīng)理平衡一下。畢竟魚(yú)與熊掌……。另外除了固定表頭外，排序：利用一定的排序規律讓數據變得有章可循，就不會(huì )顯得非常的凌亂;隱藏：將不必要的信息收起來(lái)也是不錯的選擇。
四、消息提示部分
頁(yè)面信息成功提交后，需要返回相關(guān)內容給用戶(hù)，否則會(huì )讓用戶(hù)一頭霧水不知道自己是否提交成功。
頁(yè)面消息提示：
消息提示技巧：根據提醒類(lèi)型不同，設計不同顏色的反饋提示，讓用戶(hù)一目了然。 另外為了減少用戶(hù)操作，可以設置消息提示的反饋內容在幾秒后自動(dòng)消失。
進(jìn)度條：
進(jìn)度條使用技巧：進(jìn)度條可以帶狀態(tài)，也可以帶有描述性文字幫助用戶(hù)理解目前自己處于完成表單的第幾步。
Web后臺設計中常用的控件還有許多比如標簽模塊、各種各樣的消息彈窗模塊、導航欄模塊等因為篇幅有限這次就不展開(kāi)介紹。
一個(gè)優(yōu)秀的后臺產(chǎn)品經(jīng)理雖然我們比不上前臺產(chǎn)品經(jīng)理對于每一個(gè)細節精益求精的打磨，但是還是應該在嚴于律己、優(yōu)化每一處我們力所能及的細節上付出努力。這樣在回首自己設計出的產(chǎn)品才會(huì )有種天生驕傲的成就感吧。
本文作者：晞仔(lolitaxi61)微信公眾號：晞仔的生活實(shí)驗室
