接下來(lái)這部分就主要梳理一下關(guān)于表單中常用的組件的解析，包括多個(gè)組件組合成高級(jí)組件應(yīng)該具體應(yīng)該怎么應(yīng)用，或者說(shuō)我們?cè)谛薷谋韱蔚臅r(shí)候應(yīng)該注意哪幾個(gè)基本原則，全篇干貨，結(jié)合案例全面深度解析表單、表格、圖表、儀表盤的設(shè)計(jì)應(yīng)用，以下內(nèi)容較多，大家可以根據(jù)上述目錄來(lái)選擇性閱讀。
1.1 表單的概念及作用
表單的概念: 登陸注冊(cè)就是平時(shí)最常見(jiàn)最簡(jiǎn)單的表單，表單包括數(shù)據(jù)的輸入和提交的一些操作。
表單的作用：01、數(shù)據(jù)過(guò)濾（過(guò)濾信息）：如果把ERP、CRM這些系統(tǒng)比作一個(gè)數(shù)據(jù)，用戶來(lái)這個(gè)系統(tǒng)進(jìn)行獲取數(shù)據(jù)，這些數(shù)據(jù)對(duì)用用戶的價(jià)值比較大，用戶并不是來(lái)獲取所有數(shù)據(jù)的，有一些數(shù)據(jù)對(duì)他有用，有一些數(shù)據(jù)目前來(lái)講是沒(méi)有價(jià)值的，或者用戶不想獲取到的，這時(shí)用戶其實(shí)需要對(duì)數(shù)據(jù)進(jìn)行處理，查找想要的數(shù)據(jù)，去掉沒(méi)用的，而表單起的就是這樣的作用，用戶通過(guò)表單進(jìn)行數(shù)據(jù)的過(guò)濾，數(shù)據(jù)的定位，找到想要的數(shù)據(jù)。
02、數(shù)據(jù)定位（通過(guò)過(guò)濾漏斗，精確的定位到信息）：比如我們要在系統(tǒng)里查詢搜索一個(gè)商品，搜索一個(gè)快遞等等，這個(gè)搜索的過(guò)程，就是通過(guò)表單對(duì)數(shù)據(jù)進(jìn)行過(guò)濾的過(guò)程，通過(guò)對(duì)數(shù)據(jù)的過(guò)濾，精確得定位數(shù)據(jù)，最后得到想要的數(shù)據(jù)，這也是數(shù)據(jù)減少的一個(gè)過(guò)程，一開(kāi)始很多條數(shù)據(jù)，通過(guò)表單搜索查詢找到想要的，比如可能就10多條數(shù)據(jù)是和自己有關(guān)的。這個(gè)過(guò)程也是數(shù)據(jù)減少的一個(gè)過(guò)程。
03、數(shù)據(jù)輸入（將新的信息輸入到系統(tǒng)中）：用戶還可以通過(guò)搜索使數(shù)據(jù)減少，同時(shí)還可以通過(guò)表格操作，數(shù)據(jù)的添加操作，表單數(shù)據(jù)輸入的操作，讓數(shù)據(jù)增多，這時(shí)表單起的作用就是數(shù)據(jù)輸入的作用，將新的數(shù)據(jù)輸入到系統(tǒng)中。
1.2 表單常用組件
1.2.1 輸入類組件
1.2.1.1 輸入類組件分類
單行文本：只輸入一行，不存在回車和換行，比如輸入手機(jī)號(hào)碼，30個(gè)字符以內(nèi)的文字，都是單行文本可以解決。
多行文本：多行比單行默認(rèn)高了點(diǎn)，它可以換行，輸入框變高了。通常用在發(fā)表心情狀態(tài)，個(gè)人簡(jiǎn)介等。
富文本：指豐富的文本，不只能輸入長(zhǎng)文本，還可以把文本加上樣式，可以定義文本的字符大小，定義樣式，定義下劃線加鏈接等等，通過(guò)副文本編輯器實(shí)現(xiàn)的，比如站酷編輯文章的輸出文本就是富文本。
Tag標(biāo)簽：是一個(gè)文本標(biāo)簽，比如發(fā)一個(gè)商品時(shí)候，告訴商品有哪些屬性，通常加入在搜索引擎中。
1.2.1.2 輸入類組件布局展示方式
01、文本標(biāo)簽的對(duì)齊方式：以輸入框輸出用戶名為例，列舉三種不同的文本標(biāo)簽對(duì)齊方式。可分為三種：01.文本標(biāo)簽右對(duì)齊，也稱之為冒號(hào)對(duì)齊；02.文本標(biāo)簽左對(duì)齊；03.文本標(biāo)簽上對(duì)齊。那么這三種對(duì)齊方式具體應(yīng)該在什么情況下去用呢？根據(jù)“眼動(dòng)儀實(shí)驗(yàn)數(shù)據(jù)”來(lái)看，也叫做古騰堡視覺(jué)動(dòng)線，人們看一個(gè)頁(yè)面的視覺(jué)動(dòng)線的順序，通常是從左到右，從上到下去瀏覽閱讀。
文本標(biāo)簽左對(duì)齊應(yīng)用：因此根據(jù)古騰堡視覺(jué)動(dòng)線原理，在用戶填寫信息的時(shí)，想讓用戶填寫的時(shí)候，填寫速度慢下來(lái)，我們?cè)O(shè)計(jì)的時(shí)候就用左對(duì)齊。
文本標(biāo)簽右對(duì)齊應(yīng)用：當(dāng)我們?cè)谠O(shè)計(jì)頁(yè)面對(duì)齊方式時(shí)，不知道該選擇哪種對(duì)齊方式的時(shí)候，就用右對(duì)齊，起碼不會(huì)出錯(cuò)。
文本標(biāo)簽頂對(duì)齊應(yīng)用：頂對(duì)齊方式橫軸不占用空間，用戶填寫完成速度較快，但缺點(diǎn)是上下布局展示滾屏?xí)rY軸的可擴(kuò)展空間很少，因此除了系統(tǒng)中登錄注冊(cè)會(huì)用到文本標(biāo)簽頂對(duì)齊之外，其他地方都用的很少。
占位符對(duì)齊：在手機(jī)端基本都使用占位符對(duì)齊，因?yàn)橛梦谋緲?biāo)簽對(duì)齊太占用手機(jī)Y軸的距離了，但缺點(diǎn)是輸入時(shí)出錯(cuò)率相對(duì)要高。
02、文本標(biāo)簽的樣式：文本標(biāo)簽的樣式分為兩種，左右布局時(shí)：用線或者框，左右布局在B端系統(tǒng)里常用框來(lái)展示，而線，在C端經(jīng)常用到，因?yàn)榫€很簡(jiǎn)潔，如果手機(jī)端設(shè)計(jì)有外框的話會(huì)顯的沒(méi)那么開(kāi)放，而在成熟的B端產(chǎn)品里基本不會(huì)用到線，注冊(cè)登錄的設(shè)計(jì)除外，因?yàn)樵贐端中一旦出現(xiàn)很多線的控件，會(huì)導(dǎo)致它的辨識(shí)度很低，也很難去檢索控制它，同時(shí)視覺(jué)動(dòng)線也顯很亂。上下布局時(shí)：它的文字標(biāo)簽一種在外部，另一種是在內(nèi)部。當(dāng)表單少的時(shí)候，可以用上下布局，但是一般用的也很少，在B端系統(tǒng)，輸入類組件大部分還是左右布局用戶框來(lái)展示。
1.2.1.3 多樣式輸入類組件案例解析
除了上述提到的輸入組件之外，還有很多種不同的展示樣式，但本質(zhì)上還是這四類輸入類組件，可以靈活使用，而不是一直使用單行文本來(lái)解決問(wèn)題，大多數(shù)情況終極目的就是為了，減少用戶使用出錯(cuò)率，進(jìn)而提升產(chǎn)品使用效率。以下案例請(qǐng)結(jié)合下圖閱讀。
案例1: 選擇合適的大?。?/strong>
圖1:比如一個(gè)手機(jī)號(hào)碼輸入框，再國(guó)際環(huán)境可以采用上面圖文的輸入方式，國(guó)內(nèi)環(huán)境產(chǎn)品就用下面得輸入框方式。這么設(shè)計(jì)的原因是因?yàn)椋潭ǖ膶挾认蛴脩舭凳舅栎斎雰?nèi)容的長(zhǎng)度來(lái)減輕判斷負(fù)擔(dān)。例如我們?cè)谳斎胧謾C(jī)驗(yàn)證碼的時(shí)候通常是六位驗(yàn)證碼，以前的設(shè)計(jì)是給我們一條線來(lái)進(jìn)行輸入，現(xiàn)在都是給我們六個(gè)空格去輸入，這時(shí)按格填空對(duì)用戶的判斷負(fù)擔(dān)一定是最小的，用戶容易去做準(zhǔn)確的判斷。同時(shí)寬度得限制也是一樣的，給用戶一個(gè)寬度的范圍，用戶做判斷會(huì)很輕松且準(zhǔn)確。
案例2: 格式與情景狀態(tài)：
圖2:比如銀行卡的格式，一串?dāng)?shù)字都是四位進(jìn)行間隔區(qū)分，間隔成四位應(yīng)用交互設(shè)計(jì)七大定律中的7土2法則，間隔成四個(gè)，容易讓人們記憶，在用戶輸入的時(shí)候，可以減少錯(cuò)誤，減少錯(cuò)的同時(shí)也就是在提升產(chǎn)品的使用效率。同時(shí)考慮多情景狀態(tài)，比如銀行卡號(hào)、手機(jī)號(hào)碼、包括身份證號(hào)的一些輸入設(shè)計(jì)，這些都是相對(duì)比較隱私，容易出現(xiàn)安全隱患的一些信息，這些信息在設(shè)計(jì)的時(shí)候要注意可能出現(xiàn)的問(wèn)題，因此需要做一個(gè)隱藏的處理，比如添加小眼睛icon來(lái)隱藏關(guān)鍵幾位數(shù)字，來(lái)減少一些安全隱患問(wèn)題。
案例3：自動(dòng)匹配與識(shí)別：
圖3:比如當(dāng)輸入公司地址時(shí)，這個(gè)地址信息可能是第一次輸入，也可能這個(gè)信息在我們的數(shù)據(jù)庫(kù)中已經(jīng)存在了，當(dāng)這個(gè)信息已經(jīng)存在的時(shí)候，在輸入的過(guò)程中，系統(tǒng)應(yīng)該在數(shù)據(jù)庫(kù)中檢索出已經(jīng)輸出的信息匹配給用戶，我們就可以在里面直接選擇來(lái)進(jìn)行輸入。這么做的原因就是，當(dāng)用戶在輸入特別長(zhǎng)的信息時(shí)候，用戶經(jīng)常會(huì)出錯(cuò)，從數(shù)據(jù)庫(kù)的方式去做匹配信息，錯(cuò)誤率會(huì)降低，輸入效率會(huì)提升。另外是識(shí)別，比如在我們?cè)诩目爝f的時(shí)候，通常會(huì)把姓名電話地址，一連串的信息發(fā)給快遞員，這時(shí)候快遞員會(huì)復(fù)制粘貼放入聯(lián)系人，聯(lián)系電話，聯(lián)系地址這三個(gè)字段，現(xiàn)在的設(shè)計(jì)方式就是做智能識(shí)別匹配，快遞員只要有粘貼的動(dòng)作，信息就會(huì)自動(dòng)做好分類把一連串?dāng)?shù)字分別粘貼入不同的字段里，這樣做也是為了提升效率。
案例4：實(shí)時(shí)預(yù)警與提示：
圖4:比如這個(gè)多行文本輸入框，一般都會(huì)有字?jǐn)?shù)限制，比如不超過(guò)150個(gè)字，如果不做這樣的限制，我們洋洋灑灑寫了一萬(wàn)字，但是發(fā)不出去只能復(fù)制多出的文字然后再粘貼，很可能會(huì)誤刪掉內(nèi)容影響操作體驗(yàn)，這種文本的上限預(yù)警的解決方式是給內(nèi)容做實(shí)時(shí)校驗(yàn)，比如上限是58個(gè)字，打到60字的時(shí)候，也允許你輸入但是文本中多出的字會(huì)標(biāo)紅進(jìn)行提示去刪除多出的內(nèi)容。
案例5：占位符不能替代文字標(biāo)簽：
圖5:比如輸入手機(jī)號(hào)碼，占位符也是輸入手機(jī)號(hào)碼，看似是重復(fù)了一遍，但仍然是有價(jià)值的，可以變成文本標(biāo)簽里提不到得信息，比如請(qǐng)輸入一位11位的國(guó)內(nèi)的手機(jī)號(hào)碼?？梢灾皇褂梦谋緲?biāo)簽的方式，也可以使用文本標(biāo)簽加占位符的方式，但不能只使用占位符的方式。因?yàn)橹挥姓嘉环?，可能?huì)讓用戶出錯(cuò)，影響使用效率。
案例6：使用內(nèi)聯(lián)校驗(yàn)：
圖6:當(dāng)輸入錯(cuò)誤信息的時(shí)候使用校驗(yàn)，左邊的提示錯(cuò)誤的方式是不對(duì)的，在校驗(yàn)信息的時(shí)候最好不要出現(xiàn)在列表的最下部或最頂部或提交的時(shí)候，因?yàn)樗菍?shí)時(shí)校驗(yàn)的，最好實(shí)時(shí)提示出現(xiàn)定位到當(dāng)前的邊框，當(dāng)前的字段中的下邊，來(lái)告訴我們是當(dāng)前字段出現(xiàn)了錯(cuò)誤，這樣精確定位錯(cuò)誤點(diǎn)，才能提升效率，同時(shí)也為設(shè)計(jì)節(jié)省了空間。
案例7：減少字段量：
圖7：左邊信息包含了姓名，生日，密碼但包含了8個(gè)字段量，我們可以把字段量減少，比如姓名組合成一個(gè)字段，生日組合成一個(gè)字段，密碼和重復(fù)密碼也可以組合成一個(gè)字段，重復(fù)密碼的作用其實(shí)就是怕輸入錯(cuò)誤來(lái)加強(qiáng)記憶，但是另一種方法是在輸入密碼的時(shí)候讓我們看到輸入密碼就可以做到不出錯(cuò)并且加強(qiáng)記憶，那么就可以用添加小眼睛來(lái)做替代，進(jìn)而也可以組合成一個(gè)字段。這個(gè)前提是不是銀行類那樣由業(yè)務(wù)決定強(qiáng)制去重復(fù)，其他系統(tǒng)完全不用進(jìn)行重復(fù)密碼輸入操作。所以減少字段量，可以消除視覺(jué)和認(rèn)知負(fù)擔(dān)，這樣看起來(lái)更簡(jiǎn)單。
1.2.2 選擇類組件
選擇類組件可以分為，多選、單選、時(shí)間日期、下拉選擇、Tabs標(biāo)簽和地理位置組件，常用的是下拉選擇，重點(diǎn)介紹一下下拉選擇組件。
下拉選擇組件有幾個(gè)注意點(diǎn)：
01.避免使用默認(rèn)值：比如國(guó)家和地區(qū)，往往默認(rèn)值都是安哥拉，字母A開(kāi)頭，如果用默認(rèn)值，再B端系統(tǒng)里很多用戶會(huì)忘記修改默認(rèn)值，就提交上去，所以我們需要去把這個(gè)默認(rèn)值變成空值提示信息：請(qǐng)選擇國(guó)家和地區(qū)，在沒(méi)有選擇之前，這條信息是空值，點(diǎn)之后再去選擇國(guó)家和地區(qū)。
02.采用輸出檢索：如果國(guó)家和地區(qū)很多，下拉信息條目很多時(shí)候，可以采用輸入類得檢索來(lái)設(shè)計(jì)，比如輸入中國(guó)，就會(huì)出現(xiàn)中國(guó)大陸，中國(guó)香港，中國(guó)臺(tái)灣之類的字段。
03.默認(rèn)值得表述要盡量準(zhǔn)確：用詞文案需要簡(jiǎn)潔，即使沒(méi)有文本標(biāo)簽也能夠清晰表達(dá)，比如就需要寫明請(qǐng)選擇國(guó)家和地區(qū)。
04.對(duì)新增加得字段要提供注釋：比如系統(tǒng)前后先增加的一些字段或者有爭(zhēng)議的字段要提供注釋，身份編碼和身份證號(hào)碼有歧義，就需要給一個(gè)注釋，交互上鼠標(biāo)移入幫助點(diǎn)icon就會(huì)顯示注釋，同時(shí)注意視覺(jué)上要弱化它，小圖標(biāo)盡量用面性圖標(biāo)會(huì)更能表達(dá)清晰。
1.2.3 導(dǎo)航類組件
選擇類組件可以分為，導(dǎo)航菜單、面包屑、分頁(yè)，其中分頁(yè)里的設(shè)計(jì)注意點(diǎn)容易忽略，接下來(lái)重點(diǎn)梳理介紹分頁(yè)組件。
分頁(yè)作用：減輕服務(wù)器的負(fù)載，有成千上萬(wàn)的負(fù)載，不分頁(yè)的話，會(huì)造成巨大的下載量，相應(yīng)的用戶等待時(shí)間更長(zhǎng)。同時(shí)內(nèi)網(wǎng)也同樣，如果有四五百人同時(shí)做一樣的事情，服務(wù)器負(fù)載能力很弱，一定要做成分頁(yè)，分頁(yè)每次loading10個(gè)20個(gè)，每次翻到5六頁(yè)的時(shí)頁(yè)的時(shí)候加載一下，其實(shí)形成了是預(yù)加載，不只加載十條數(shù)據(jù)，其實(shí)加載了五六頁(yè)的數(shù)據(jù)，只是呈現(xiàn)了一頁(yè)的數(shù)據(jù)，到了第五頁(yè)慢了的原因是，需要重新加載一次數(shù)據(jù)。稱之為惰性加載，懶加載。B端一般會(huì)減少加載的存在，預(yù)加載是看不到loading的，第一頁(yè)加載1到5頁(yè)，第二頁(yè)加載5-10頁(yè)等等，點(diǎn)快的話是可以看到的，所以用預(yù)加載的方式加快速度，減少服務(wù)器的負(fù)載。前端工程師可以用組件庫(kù)翻頁(yè)可以直接loading出來(lái)。
翻頁(yè)操作：一般很難看到數(shù)據(jù)庫(kù)數(shù)據(jù)的總量，一般不會(huì)看到三位數(shù)的頁(yè)碼，一般來(lái)講會(huì)讓數(shù)據(jù)翻到前20頁(yè)、10頁(yè)之內(nèi)，就讓用戶找到這個(gè)數(shù)據(jù)，不會(huì)讓用戶不斷的往后翻，對(duì)負(fù)載時(shí)比較大的。
1.2.4 提交類組件
選擇類組件主要介紹按鈕的設(shè)計(jì)注意事項(xiàng)。按鈕常見(jiàn)的狀態(tài)有三種，通常狀態(tài)、懸停/點(diǎn)擊、禁用。其中B端組件庫(kù)里按鈕常見(jiàn)的類型有：
次要按鈕：一般用白色或者淺色，頁(yè)面中次要按鈕多一點(diǎn)，比如一個(gè)頁(yè)面一個(gè)次要按鈕都沒(méi)有就是錯(cuò)的，比如查詢和重置一個(gè)是主要按鈕，一個(gè)是次要按鈕。
主要按鈕：一般用主色調(diào)的顏色，用在完成、推薦、提交的操作，顯示會(huì)比較明顯。
文字按鈕：沒(méi)有背景的按鈕，弱化的按鈕。
帶圖標(biāo)按鈕：帶有補(bǔ)充含義，比如搜索按鈕加個(gè)搜索圖標(biāo)。
圖標(biāo)按鈕：純圖標(biāo)按鈕，只有前進(jìn)后退用的多，其他用的少。用圖標(biāo)按鈕節(jié)省它的空間。比如上一頁(yè)、下一頁(yè)可以用圖標(biāo)很明白的代表它的含義。
虛線按鈕：上傳之類的，添加內(nèi)容之類的。
當(dāng)了解了按鈕的類型，那么如何確定按鈕的擺放順序呢？這取決于平時(shí)用戶對(duì)電腦操作的習(xí)慣，同時(shí)結(jié)合業(yè)務(wù)邏輯的關(guān)系，來(lái)排列展示按鈕順序。
1.3 表單綜合案例解析
1.3.1 表單綜合案例一：修改表單的三個(gè)原則
01、視覺(jué)簡(jiǎn)單點(diǎn)：
B端系統(tǒng)不用視覺(jué)做特別多的修飾，不像C端，在買商品時(shí)看不到商品看到的卻是滿屏的banner，在B端中表單不用設(shè)計(jì)的那么花里胡哨，Antdesign提供了很多組件示范，我們應(yīng)該了解Antdesign為什么這么設(shè)計(jì)，比如輸入框?yàn)槭裁床捎蒙舷虏季植徊捎米笥也季值妮斎肟蚰?？因?yàn)槿萜魃舷虏季质且曈X(jué)動(dòng)線最快的輸入布局方式；為什么使用框類不使用線性的呢？因?yàn)榭蝾愒贐端系統(tǒng)中是最快分辨它的輸入域輸入?yún)^(qū)的地方，只要知道這些視覺(jué)的原理，就知道怎么合理的使用組件了。
02、文字簡(jiǎn)單點(diǎn)：
文字描述的簡(jiǎn)單點(diǎn)，第一種方式是通過(guò)左側(cè)的文字標(biāo)簽來(lái)做；第二種方式是通過(guò)占位符標(biāo)簽來(lái)做，國(guó)外的一些文章強(qiáng)調(diào)，不要用占位符提示做任何事情，因?yàn)檎嘉环貏e影響視覺(jué)動(dòng)線，但國(guó)內(nèi)已經(jīng)習(xí)慣了占位符來(lái)表示。
03、字段簡(jiǎn)單點(diǎn)：
1. 減少字段的方式，首先要知道這些字段的目標(biāo)是什么（字段的方式去做減法）
例如下圖這個(gè)電商類產(chǎn)品，目的是讓用戶可以收到商品，那么刪減以上哪些字段不受影響也可以將商品準(zhǔn)確的送到用戶手里呢? 這個(gè)需要我們通過(guò)和產(chǎn)品經(jīng)一起商量，在滿足功能需要的同時(shí)，其實(shí)以上字段可以至少優(yōu)化50%字段。首先姓名：姓氏和名字可以合二為一，直接輸入一個(gè)字段就可以。郵箱：輸入郵箱可能是為了得到賬單，現(xiàn)在手機(jī)里就可以得到賬單，所以郵箱基本用不到。電話：電話很關(guān)鍵，不能刪掉。家庭地址：我們?cè)谧鲭娚虝r(shí)，我們通常會(huì)把郵件郵寄到家庭，大部分情況家庭為第一地址，第二地址公司地址也有這種情況，但沒(méi)必要從這里輸入，可以從一些內(nèi)容帶出來(lái)，所以公司地址不用當(dāng)前填寫，可以把它刪除掉。省份、城市、郵編：這三部分完全可以在輸入地址的時(shí)候從地址帶出來(lái)，沒(méi)必要再輸入一遍。特別是郵編，目前在我國(guó)發(fā)快遞時(shí)郵編已經(jīng)基本用不到了，我國(guó)大數(shù)據(jù)已經(jīng)做了到了不用郵編來(lái)分辨地址，數(shù)據(jù)量已經(jīng)足夠大了，只填手機(jī)號(hào)和地址就可以。優(yōu)惠券碼、信用卡號(hào)、安全碼：這三個(gè)不能刪掉。密碼、重復(fù)密碼：重復(fù)密碼是為了輸入密碼時(shí)加強(qiáng)記憶，可以采用小眼睛來(lái)替代重復(fù)密碼。所以我們可以看到在減少了50%的字段后并不影響用戶收到商品，那這個(gè)改動(dòng)就是成功的。這個(gè)就是我們?cè)O(shè)計(jì)師應(yīng)該做的事情，當(dāng)然在刪減之前，應(yīng)該和產(chǎn)品經(jīng)理商有理有據(jù)的去溝通是否按這種方式去這樣設(shè)計(jì)。
2. 把相關(guān)的字段進(jìn)行可視化分組（表單的方式去做分步）
刪減完字段后，最終得到七個(gè)有用的字段，將這些數(shù)據(jù)進(jìn)行分組優(yōu)化，也就是歸類整理，我們常用的排版方式是卡片化設(shè)計(jì)，卡片化設(shè)計(jì)是一個(gè)特別好的信息分類的設(shè)計(jì)方式，即時(shí)不用添加基本信息，優(yōu)惠信息，支付信息之類的名稱在卡片之上，通過(guò)卡片的方式，從上到下布局，用戶可以看的更加的準(zhǔn)確。
除了對(duì)它信息進(jìn)行分類，我們也可以對(duì)它的過(guò)程進(jìn)行分類。比如左邊這個(gè)頁(yè)面，雖然是從上到下，但感覺(jué)輸入的信息太多了，我們可以對(duì)這個(gè)過(guò)程分步優(yōu)化，分布后把它列成基本信息和支付信息兩個(gè)層級(jí)，基本信息包括姓名、電話、地址和優(yōu)惠碼，其中優(yōu)惠碼為選填，當(dāng)頁(yè)面里所有信息都需要必填的時(shí)候，有部分選填得信息標(biāo)注選填就可以，當(dāng)所有都需要選填的時(shí)候，有一個(gè)必填，那需要標(biāo)注必填就可以，具體標(biāo)注方法，這里使用的是占位符標(biāo)注方法，還有星號(hào)的標(biāo)注方法，用星號(hào)標(biāo)注是已經(jīng)用戶形成認(rèn)知習(xí)慣，但看視覺(jué)哪個(gè)好看就用哪個(gè)，比如在蘋果的設(shè)計(jì)中就很少用星號(hào)來(lái)設(shè)計(jì)，是為了擔(dān)心影響用戶的視覺(jué)，同時(shí)星號(hào)一般放在前面，并且不一定非得用到紅色。支付信息就包括必須要用到的信用卡號(hào)、安全碼和密碼。類似這樣將過(guò)程進(jìn)行分步優(yōu)化也能用戶對(duì)表單的填寫，加快用戶的錄入速度，更快的在體驗(yàn)上去得到提升。
3. 使用邏輯順序
還以這個(gè)案例來(lái)看，我們分成三個(gè)邏輯順序，個(gè)人信息相關(guān)、商品相關(guān)、支付相關(guān)。在B端中需求和場(chǎng)景是環(huán)環(huán)相扣的，我們需要場(chǎng)景化的解決方案。這個(gè)場(chǎng)景化的解決方案和這個(gè)表單的關(guān)聯(lián)，對(duì)應(yīng)的就是用戶完整的購(gòu)買流程，這個(gè)表單的三個(gè)場(chǎng)景，第一個(gè)場(chǎng)景是收貨信息，第二場(chǎng)景是優(yōu)惠的信息，買商品有什么優(yōu)惠，第三個(gè)場(chǎng)景是支付場(chǎng)景，這個(gè)流程完成支付就完成了購(gòu)買，所以樣的順序就是一個(gè)正確的邏輯順序，通過(guò)先確定流程再確定字段展示順序。
1.3.1 表單綜合案例二：表單設(shè)計(jì)具體流程
第一步：做信息分類。當(dāng)我們了解這個(gè)產(chǎn)品，熟悉這個(gè)業(yè)務(wù)的時(shí)候，可以根據(jù)信息的含義，把這些雜亂無(wú)章的字段分成幾個(gè)部分，可以和產(chǎn)品和開(kāi)發(fā)進(jìn)行討論也可以加深對(duì)業(yè)務(wù)的理解。由于B端信息的維度特別多，具體的信息分類方法可以借用五帽架信息分類法 。可以根據(jù)可根據(jù)類別進(jìn)行分類：即根據(jù)信息的相關(guān)性來(lái)進(jìn)行分類。也可以根據(jù)時(shí)間進(jìn)行分類，比如時(shí)間正序，距離時(shí)間最近的來(lái)進(jìn)行分類。同樣可根據(jù)地理位置的遠(yuǎn)近，字母的排序和認(rèn)知規(guī)律從大到小從胖到矮的連貫性來(lái)分類。一旦分類好后，用戶在填寫的時(shí)候也不會(huì)覺(jué)得奇怪，填寫的邏輯性和順序感也會(huì)體現(xiàn)出來(lái)。
第二步：做排序分類（按業(yè)務(wù)邏輯順序）。當(dāng)?shù)玫搅诵畔⒌姆诸?，比如一個(gè)汽車CRM系統(tǒng)，基本信息、車輛信息和故障信息，它具體要解決什么樣的問(wèn)題，這三部分誰(shuí)應(yīng)該放在第一位，誰(shuí)應(yīng)該放在第二位，第三位，可以根據(jù)prd需求文檔來(lái)了解做這個(gè)功能具體要解決什么樣的目標(biāo)，具體是什么過(guò)程在prd里應(yīng)該說(shuō)的非常詳細(xì)明確，這個(gè)過(guò)程就是它的業(yè)務(wù)邏輯，所以我們可以通過(guò)prd中的描述來(lái)得出業(yè)務(wù)邏輯。
第三步：明確字段類型。當(dāng)?shù)玫搅诵畔⒎诸悾玫搅诵畔⑦壿嬳樞蛑?，接下?lái)需要明確字段類型。比如100個(gè)或200個(gè)字符，單行文本輸入是可以支持的，超過(guò)255個(gè)字符，我們就需要多行文本輸入框來(lái)解決這個(gè)問(wèn)題。
第四步：明確產(chǎn)品的原型。可以自己搭原型，和產(chǎn)品進(jìn)行討論，也可以直接和產(chǎn)品要原型，最終目的是這個(gè)原型一定要確定下來(lái)。
第五步：確定界面設(shè)計(jì)框架。確定柵格化設(shè)計(jì)框架，選擇多大的設(shè)計(jì)尺寸，進(jìn)行頁(yè)面柵格化設(shè)計(jì)。
第六步：對(duì)應(yīng)組件設(shè)計(jì)。根據(jù)原型去對(duì)應(yīng)我們的組件，是用下拉框組件還是文本輸入框組件，去找對(duì)應(yīng)組件設(shè)計(jì)。這樣我們得到了字段、原型、框架和對(duì)應(yīng)的組件化，下一步就要做視覺(jué)的方案設(shè)計(jì)。
第七步：視覺(jué)設(shè)計(jì)方案。根據(jù)表單的內(nèi)容來(lái)決定視覺(jué)設(shè)計(jì)方案，如果它的內(nèi)容信息量比較多，比如它的數(shù)據(jù)量很多，字段很多時(shí)，用彈窗就不太合適，彈窗屬于字段量不是特別多，和后面主要彈出得頁(yè)面是有關(guān)系的，需要重開(kāi)一個(gè)新的單頁(yè)面，單頁(yè)面是大容量，分類單頁(yè)面屬于更多內(nèi)容容量。第二可以根據(jù)數(shù)據(jù)層級(jí)的操作關(guān)系來(lái)決定，如果從一個(gè)頁(yè)面中打開(kāi)了另外的一條數(shù)據(jù)進(jìn)行修改，比如從表格中打開(kāi)表格中的一個(gè)詳情來(lái)進(jìn)行修改，就需要彈窗來(lái)設(shè)計(jì)，這也取決于彈窗內(nèi)容的多少，如果彈窗內(nèi)容確實(shí)很多，彈窗就要大一點(diǎn)甚至使用全屏彈窗。
通過(guò)下圖可以看出，表格通常由標(biāo)題、工具欄（對(duì)整體批量的操作）、表格頭、表格行、分頁(yè)區(qū)、批量操作區(qū)、表格列、單行操作區(qū)（是對(duì)單行數(shù)據(jù)的操作）、數(shù)據(jù)呈現(xiàn)表格區(qū)、數(shù)據(jù)查詢表單區(qū)組成。
以下內(nèi)容是表格的規(guī)范和注意點(diǎn)，其實(shí)我們?cè)谠O(shè)計(jì)的時(shí)候，很少自己去畫一個(gè)表格，一般都是從組件庫(kù)里選一個(gè)表格，然后分離組件去進(jìn)行再次的自動(dòng)布局得到新的表格。
2.1 表格頭
表格頭要做到簡(jiǎn)練準(zhǔn)確，不受內(nèi)容影響。表格頭中的文字和正文字一樣也可以，加粗也可以，但一般都會(huì)做一個(gè)顏色來(lái)做區(qū)分。
2.2 操作區(qū)域統(tǒng)一劃分
圖2表格頭工具欄包括條件過(guò)濾，右上是表格內(nèi)容工具，如自定義列，全屏等。
2.3 表格間隔
表格間隔可以讓表格的內(nèi)容看起來(lái)更加的可視化，也叫內(nèi)容降噪，可以分成線與間隔色兩種方式，通常交互hover狀態(tài)下，間隔色變成更深得顏色也可以。
2.4 內(nèi)容降噪
操作區(qū)域色彩元素應(yīng)盡量簡(jiǎn)單，原則上不超過(guò)3個(gè)。
2.5 表格行高
表格需要一個(gè)頁(yè)面呈現(xiàn)出10條，其次需要單元格高度=文字行高+上間距+下間距，其中上下間距為8的相關(guān)數(shù)即可。
2.6 單元列空間
表格首先應(yīng)保持100%把所有字段顯示全，字段多的情況可以橫滾列寬可調(diào)節(jié)，但是需要保證間隔不變，類似于柵格的溝槽原理。如果內(nèi)容顯示不下可以做橫滾，如果內(nèi)容顯示的下，還想要保證整個(gè)表格有設(shè)計(jì)感呼吸感，需要保證n為左右的間距，可以是8或者8的倍數(shù)，每個(gè)列之間的間距要做成2n，這樣它們之間的間距就會(huì)有那種層疊得呼吸感就會(huì)比較好看，有規(guī)則性。
3.1 認(rèn)識(shí)圖表
在做數(shù)據(jù)圖表時(shí)我們?cè)O(shè)計(jì)師需要關(guān)注的是，我們的數(shù)據(jù)需要用什么圖表來(lái)做，而不是主要關(guān)注圖表長(zhǎng)什么樣，或者說(shuō)圖表有多好看，我們應(yīng)該關(guān)注的是這些B端的數(shù)據(jù)怎么用正確的圖表去表達(dá)。數(shù)據(jù)圖表也不是千篇一律數(shù)據(jù)大屏那種感覺(jué)，雖然數(shù)據(jù)大屏是信息圖表主要應(yīng)用的一個(gè)方面，但在B端系統(tǒng)的信息圖表中，主要是將一些表單的數(shù)據(jù)轉(zhuǎn)化成圖形的方式來(lái)進(jìn)行顯示，這點(diǎn)和數(shù)據(jù)大屏其實(shí)并沒(méi)有什么關(guān)系，所以B端系統(tǒng)中主要以數(shù)據(jù)為主，而信息圖表作為輔助，這是一個(gè)需要了解的前提。
但從視覺(jué)提升角度去考慮，數(shù)據(jù)圖表在B端中是最容易表達(dá)視覺(jué)的，我們之前兩篇提到的表單設(shè)計(jì)占了B端設(shè)計(jì)80%的工作量，就會(huì)發(fā)現(xiàn)這80%的工作量幾乎沒(méi)有表達(dá)出特別好有沖擊力的視覺(jué)，因?yàn)楸韱沃皇且恍?shù)據(jù)和文字的排版，并且還有規(guī)范的限制，在統(tǒng)攬整個(gè)B端作品中，容易突出視覺(jué)設(shè)計(jì)感的一定是數(shù)據(jù)表圖設(shè)計(jì)。還有一個(gè)大家比較關(guān)心的問(wèn)題，這些圖表前端工程師能不能實(shí)現(xiàn)，是可以的，前端在實(shí)現(xiàn)圖表都會(huì)用一些常規(guī)性的圖表的組件，這些組件通常都是已經(jīng)代碼化的組件，一些圖表公司做好了的可以復(fù)用的，有前端代碼也有后端數(shù)據(jù)調(diào)用的接口，它只要對(duì)應(yīng)這些接口寫一些代碼就可以實(shí)現(xiàn)了。作為設(shè)計(jì)師在設(shè)計(jì)圖表的時(shí)候，還有一些地方需要我們?nèi)ピO(shè)定，接下來(lái)就和大家一起梳理怎么正確的表達(dá)數(shù)據(jù)圖表，我們一起來(lái)進(jìn)入數(shù)據(jù)圖表的知識(shí)體系吧。
3.2 常見(jiàn)圖表類型
常用的數(shù)據(jù)圖表可以分成趨勢(shì)類、比較類、占比類、分布類四種類別 。
趨勢(shì)類圖表：代表了數(shù)據(jù)增長(zhǎng)的趨勢(shì)，它可以對(duì)比出數(shù)據(jù)增長(zhǎng)的一個(gè)趨勢(shì)。主要有面積圖、折線圖、堆積面積圖和漏斗圖。重點(diǎn)了解面積圖、折線圖、漏斗圖。
比較類：比較類圖表是B端系統(tǒng)中用的最多的圖表，有柱狀圖、條狀圖、玉玨圖、堆疊柱狀圖、堆疊面積圖、雷達(dá)圖等，常用的我們重點(diǎn)介紹，柱狀圖、條狀圖。
占比類：和比較類圖表有些重疊的地方，有餅形圖、環(huán)形圖、堆疊面積圖、儀表圖、矩形樹(shù)圖、堆疊柱狀圖、條狀圖、百分比堆疊柱狀圖，重點(diǎn)了解餅形圖和儀表圖。
分布類：有箱形圖、直方圖、熱力區(qū)圖、地圖、氣泡圖、散點(diǎn)圖、色塊兒圖、等高線圖，重點(diǎn)了解地圖和氣泡圖。
面積圖：可以理解成填充之后得折線圖，不同于折線圖是，因?yàn)樘畛淇梢愿玫胤从吵鲂畔⒌泌厔?shì)，用戶可以根據(jù)面積得多少，反映出數(shù)量得多少，還代表連貫得數(shù)量級(jí)，信息數(shù)量級(jí)是一直存在的，不會(huì)消失。
折線圖：折線用的最多，是條線代表趨勢(shì)得變化。折線和柱形再某些層面是一樣的，在一定的點(diǎn)表現(xiàn)它得趨勢(shì)變化，每個(gè)月，每天，每個(gè)小時(shí)。通常用在公司得年銷售額，價(jià)格得趨勢(shì)，用戶量得增長(zhǎng)，折現(xiàn)一般不超過(guò)5條。Y軸為數(shù)量，X軸為時(shí)間。
漏斗圖：屬于面積圖，適合排名，銷售業(yè)績(jī)，再CRM中用的最多，通過(guò)銷售線索最終達(dá)成成交量，它不斷通過(guò)漏斗得方式最終達(dá)成成交，每一個(gè)漏斗代表一個(gè)環(huán)節(jié)，有一個(gè)顧客進(jìn)入商店，進(jìn)入商店購(gòu)買商品，留下信息，訂購(gòu)，整個(gè)流程走的就是用戶旅程得過(guò)程。越往后越精準(zhǔn)。
柱狀圖：柱狀圖是面，代表面積，更直觀得是包含數(shù)據(jù)，這些數(shù)據(jù)能更能直觀體現(xiàn)它得擁有量是多少，一般用在銷售額，產(chǎn)品類別，分類數(shù)據(jù)得比較，如果可以看到最高和最低得差量。
條狀圖：類別在Y軸上，X軸地表數(shù)據(jù)，Y軸上能更多顯示數(shù)據(jù)，它可以顯示負(fù)數(shù)。
餅形圖：餅形圖表示人口，人女比例；預(yù)算得分配；在線流量得來(lái)源等等，反應(yīng)得是多與少之間的對(duì)比。他們是在同一維度下的比較，比如當(dāng)年得，已經(jīng)再設(shè)定好時(shí)間段得顯示情況。
地圖：分布點(diǎn)，流量，數(shù)據(jù)量，用地圖不要隨隨便便搜一張用到界面里，地圖要到國(guó)家地理官方網(wǎng)站用，否則有問(wèn)題，設(shè)計(jì)背鍋。
4.1 認(rèn)識(shí)儀表盤
用于B端首頁(yè)的系統(tǒng)狀態(tài)的展示，一般包含系統(tǒng)的關(guān)鍵數(shù)據(jù)信息和信息列表，一般會(huì)有各種數(shù)據(jù)圖表展示。為用戶提供全局概覽，讓用戶快速掌握工作進(jìn)展及進(jìn)入工作狀態(tài)，并且可以訪問(wèn)最重要的數(shù)據(jù)，功能和控件。
4.2 儀表盤界面分類
分析類：分析類儀表盤給了我們很多分析類的信息，這些信息包括銷售額、訂單量、包括銷售額的趨勢(shì)圖、排行榜等，目的是可以在B端系統(tǒng)中看到目前收集到的這些數(shù)據(jù)，讓我們來(lái)進(jìn)行分析。雖然計(jì)算機(jī)會(huì)給我們一定的結(jié)果，但更重要的是我們需要根據(jù)這些數(shù)據(jù)得出什么樣的結(jié)論。
監(jiān)控類：比如股票的變化趨勢(shì)很快，需要實(shí)時(shí)監(jiān)控到這些數(shù)據(jù)的變化。
控制類：比如阿里云系統(tǒng)中有很多的控制臺(tái)/儀表盤，里面有很多的入口，有常見(jiàn)的快速入口，和推薦信息的一些入口，這就是控制類，通過(guò)用儀表盤來(lái)得到控制。
綜合類：綜合類系統(tǒng)是我們B端系統(tǒng)中見(jiàn)到最多的，比如CRM和ERP基本上是綜合類的，因?yàn)樗@示數(shù)據(jù)的統(tǒng)計(jì)，也要顯示一些快捷的入口。
4.3 儀表盤的設(shè)計(jì)過(guò)程
首先儀表盤要有功能，讓用戶看到數(shù)據(jù)，讓看到數(shù)據(jù)我們需要做以下事情：
第一步：分析用戶的權(quán)限：儀表盤在B端很重要的一點(diǎn)是我們要分析用戶的權(quán)限，因?yàn)椴煌娜丝吹絻x表盤數(shù)據(jù)緯度的信息是不一樣的。權(quán)限比較高的比如有管理員/普通管理員/操作員，超級(jí)管理員等等，所以要根據(jù)不同的權(quán)限展開(kāi)不同的信息。
第二步：分析業(yè)務(wù)的場(chǎng)景：比如銷售人員看到內(nèi)容的都是和銷售有關(guān)的內(nèi)容，權(quán)限是第一次篩選，把什么樣的信息展示給他，然后經(jīng)過(guò)第二次篩選，第二次篩選包括是由產(chǎn)品經(jīng)理，BA這樣的角色幫我們來(lái)篩選這樣的信息，不是完全由設(shè)計(jì)師來(lái)決定，這兩步過(guò)程是不可忽略的。
第三步：確定儀表盤展示的內(nèi)容：到底展示什么內(nèi)容，剛開(kāi)始沒(méi)有那么清晰，可能就是思維導(dǎo)圖或者幾行字，根據(jù)這些來(lái)進(jìn)行視覺(jué)展示。
第四步：視覺(jué)設(shè)計(jì)：根據(jù)展示內(nèi)容進(jìn)行視覺(jué)設(shè)計(jì)。首先基本構(gòu)思和畫原型圖；其次確定字體，顏色，樣式和圖形設(shè)計(jì)。其中需要注意的是，視覺(jué)整體要有統(tǒng)一的標(biāo)準(zhǔn)規(guī)范去表達(dá)，同時(shí)空間留白要合理，靈活的運(yùn)用柵格化，界面要有呼吸感。最后信息傳達(dá)要準(zhǔn)確，比如圖形和色彩，每一種顏色都有特殊的含義，不要應(yīng)用錯(cuò)誤，比如紅色要特別小心的應(yīng)用。
