先設(shè)計、后規(guī)范，還是先規(guī)范、后設(shè)計？這真的是一個問題。

體驗原則是項目進(jìn)入交互設(shè)計之前確定，還是邊設(shè)計邊制定，亦或是設(shè)計完成之后根據(jù)設(shè)計稿來定？

這讓我想到一個哲學(xué)問題——先有雞還是先有蛋？

通過最近接觸和完成不同B端項目的經(jīng)歷來說，似乎都有嘗試。目前來說，可能接下來講的更有通性一些。

推薦是先將方向性和布局性的原則確定，不管是交互原則，還是視覺原則。這樣，不管是邊設(shè)計邊總結(jié)，還是設(shè)計完成之后，再整理完整的規(guī)范，都是可以極大提升團(tuán)隊協(xié)作效率的。

目錄

1. 交互設(shè)計原則
2. 視覺設(shè)計原則

正如之前一篇技能樹所倡導(dǎo)的，體驗設(shè)計包含了交互設(shè)計和視覺設(shè)計（即UI設(shè)計）。所以，繼續(xù)往下看之前，恐怕需要先達(dá)成一個共識，不然，可能會有理解上的差異。當(dāng)然，其實創(chuàng)意設(shè)計中，也是需要遵循下方總結(jié)的四項視覺設(shè)計原則的。

一、交互設(shè)計原則

1. 核心原則

圖一

上述四個原則，可以讓我們評判方案有一個參考方向，而并不是無用的說辭哦。這點我想很多設(shè)計師會不以為然，但是仔細(xì)去考慮深思一下，也許有不一樣的發(fā)現(xiàn)。

2. 交互設(shè)計原則-直接了當(dāng)

正如 Alan Cooper 所言：『需要在哪里輸出，就要允許在哪里輸入』，這就是直接操作的原理。

不要為了編輯內(nèi)容而打開另一個頁面，應(yīng)該直接在上下文中實現(xiàn)編輯。

2.1 頁內(nèi)編輯-單字段行內(nèi)編輯

2.1.1 當(dāng)『易讀性』遠(yuǎn)比『易編輯性』重要時，可以使用『單擊編輯』。

單擊示例

• 狀態(tài)一：普通的瀏覽模式，不區(qū)分可編輯行和不可編輯行；
• 狀態(tài)二：鼠標(biāo)懸停時，『指針』變?yōu)椤菏中汀?，編輯區(qū)域底色變黃，出現(xiàn)『Tooltips』提示單擊編輯；
• 狀態(tài)三：鼠標(biāo)點擊后，出現(xiàn)『輸入框』、『確定』、『取消』表單元素，同時光標(biāo)定位在『輸入框』中。

2.1.2 當(dāng)『易讀性』為主，同時又要突出操作行的『易編輯性』時，可使用『文字鏈/圖標(biāo)編輯』。

示例二

• 狀態(tài)一：在可編輯行附近出現(xiàn)文字鏈/圖標(biāo)；
• 狀態(tài)二：鼠標(biāo)點擊『編輯』后，出現(xiàn)『輸入框』、『確定』、『取消』表單元素，同時光標(biāo)定位在『輸入框』中。

2.2 頁內(nèi)編輯-多字段行內(nèi)編輯

在『多字段行內(nèi)編輯』的情況下，顯示的內(nèi)容和編輯時所需的字段會存在比較大的差異，所以更需要『巧用過渡』原則中的『解釋剛剛發(fā)生了什么』來消除這種視覺影響。

多字段行內(nèi)編輯

編輯模式在不破壞整體性的前提下，可擴(kuò)大空間，以便放下『輸入框』等表單元素；其中，在 Table 中進(jìn)行編輯模式切換時，需要保證每列的不跳動。

3. 交互設(shè)計原則-足不出戶

能在這個頁面解決的問題，就不要去其它頁面解決，因為任何頁面刷新和跳轉(zhuǎn)都會引起變化盲視（Change Blindness），導(dǎo)致用戶心流（Flow）被打斷。頻繁的頁面刷新和跳轉(zhuǎn)，就像在看戲時，演員說完一行臺詞就安排一次謝幕一樣。

簡單來說，就是“當(dāng)前操作當(dāng)前做”，不轉(zhuǎn)移連續(xù)交互動作。

變化盲視（ChangeBlindness）：指視覺場景中的某些變化并未被觀察者注意到的心理現(xiàn)象。產(chǎn)生這種現(xiàn)象的原因包括場景中的障礙物，眼球運動、地點的變化，或者是缺乏注意力等?！浴毒S基百科》

心流（Flow）：也有別名以化境(Zone)表示，亦有人翻譯為神馳狀態(tài)，定義是一種將個人精神力完全投注在某種活動上的感覺；心流產(chǎn)生時同時會有高度的興奮及充實感?！浴毒S基百科》這種“渾然忘我”的愉悅體驗，被美國積極心理學(xué)奠基人之一的米哈里·契克森米哈賴稱之為【心流】。

3.1 覆蓋層（即覆蓋頁面元素之上，新的承載頁）

二次確認(rèn)：避免濫用Modal（模態(tài)層、覆蓋層）進(jìn)行二次確認(rèn)，應(yīng)該勇敢讓用戶去嘗試，給用戶機(jī)會『撤消』即可。

3.1.1 推薦示例

推薦示例

用戶點擊『刪除』后，直接操作；出現(xiàn)Message告知用戶操作成功，并提供用戶『撤消』的按鈕；用戶進(jìn)行下一個操作或者 1 分鐘內(nèi)不進(jìn)行任何操作，Message消失，用戶無法再『撤消』。

3.1.2 推薦示例

推薦示例

特例：在執(zhí)行某些無法『撤消』的操作時，可以點擊『刪除』后，出現(xiàn)Popconfirm進(jìn)行二次確認(rèn)，在當(dāng)前頁面完成任務(wù)。

3.1.3 不推薦示例

濫用 Modal 進(jìn)行二次確認(rèn)，就像『狼來了』一樣，既打斷用戶心流（無法將上下文帶到彈出框中），也無法避免失誤的發(fā)生。

話說，并非不推薦就是不可用的。這個最終是否適用項目，需要結(jié)合業(yè)務(wù)、結(jié)合用戶的使用習(xí)慣來。

因為在我做KCL項目的過程中，面對的主要客群是偏線下場景的工作人員，其認(rèn)知水平與一般的企業(yè)人員稍有差異。所以，能盡量簡化操作，能盡量在當(dāng)前頁完成的，就盡量在當(dāng)前頁完成。避免流程過長影響使用效率。

在KCL項目中，我就多次運用了上述不推薦的樣式。

3.1.4 輸入覆蓋層（氣泡提示層）：在覆蓋層上，讓用戶直接進(jìn)行少量字段的輸入。

示例

鼠標(biāo)『點擊』圖標(biāo)觸發(fā)；鼠標(biāo)『點擊』懸浮層以外的其他區(qū)塊后，直接保存輸入結(jié)果并退出。

3.2 嵌入層

3.2.1 列表嵌入層：在列表中，顯示某條列表項的詳情信息，保持上下文不中斷。

示例

3.2.2 標(biāo)簽頁：將多個平級的信息進(jìn)行整理和分類，一次只顯示一組信息。

標(biāo)簽示例

所謂標(biāo)簽頁，即是設(shè)置滑動標(biāo)簽，將內(nèi)容置入標(biāo)簽的內(nèi)頁中，比較常見的多見于分類篩選。

在后臺項目中，特別是KCL項目，因為涉及的業(yè)務(wù)場景比較多，所以會有涉及。

3.3 流程

長期以來，Web 實現(xiàn)流程的方式就是把每個步驟放在一個單獨的頁面上。雖然這種做法是分解問題最簡單的方式，但并不是最佳解決方案。對于某些『流程處理』而言，讓用戶始終待在同一個頁面上則更有必要。

流程示例

所謂流程處理，例如：填寫個人信息、認(rèn)證身份等，當(dāng)需要填寫信息過多的時候，拆分步驟是一種解決手段。但是這種拆分是否合適，需要依據(jù)實際項目作出判斷，antdesign的建議是統(tǒng)一在一個頁面上，但是并非適用全部情況。

在KCL項目中，我依據(jù)項目的統(tǒng)一性，在多個頁面將相關(guān)流程性的信息聚焦在一個頁面之內(nèi)。

3.3.1 彈出框

雖然彈出框的出現(xiàn)會打斷用戶的心流，但是有時候在彈出框中使用『步驟條』來管理復(fù)雜流程也是可行的。

流程-覆蓋層示例

正如第一條覆蓋層闡述所說，覆蓋層有的情況下，也是合適的。關(guān)于流程處理，就比較適合覆蓋層，因為用戶不需要了解上一層級的前提條件，只需要關(guān)注當(dāng)前流程步驟即可。

4. 交互設(shè)計原則-簡化交互

根據(jù)費茨法則（交互設(shè)計七大定律之一）所描述的，如果用戶鼠標(biāo)移動距離越少、對象相對目標(biāo)越大，那么用戶越容易操作。通過運用上下文工具（即：放在內(nèi)容中的操作工具），使內(nèi)容和操作融合，從而簡化交互。

費茨法則：到達(dá)目標(biāo)的時間是到達(dá)目標(biāo)的距離與目標(biāo)大小的函數(shù)，即：距離越長，所用時間越長；目標(biāo)越大，所用時間越短。

4.1 實時可見（即：所見即所得）

如果某個操作非常重要，就應(yīng)該把它放在界面中，并實時可見。

示例

• 狀態(tài)一：在文案中出現(xiàn)一個相對明顯的點擊區(qū)域；
• 狀態(tài)二：鼠標(biāo)懸停時，鼠標(biāo)『指針』變?yōu)椤菏中汀?，底色發(fā)生變化，邀請用戶點擊。
• 狀態(tài)三：鼠標(biāo)點擊后，和未點擊前有明顯的區(qū)分。

4.2 懸停即現(xiàn)

如果某個操作不那么重要，或者使用『實時可見工具』過于啰嗦會影響用戶閱讀時，可以在懸停在該對象上時展示操作項。

示例

鼠標(biāo)懸停時，出現(xiàn)操作項。

4.3 開關(guān)顯示

開關(guān)示例

用戶點擊『修改』后，Table 中『文本』變成『輸入框』，開啟編輯功能。其和文字類鏈接修改本質(zhì)是相同的，區(qū)別在于編輯狀態(tài)停留本頁還是進(jìn)入下一級頁面。

在KCL項目中我們采用的是后一種即文本鏈接下一級頁面，主要原因在于圖標(biāo)的示意對于操作用戶而言有些困難。

4.4 融合顯現(xiàn)

如果操作不重要或者可以通過其他途徑完成時，可以將工具放置在用戶的操作流程中，減少界面元素，降低認(rèn)知負(fù)擔(dān)，給用戶小驚喜。

4.4.1 推薦示例一

鼠標(biāo)懸停時，出現(xiàn) Tooltips 進(jìn)行提示，用戶點擊內(nèi)容直接復(fù)制。此種交互方式，有些類似移動端中的長按復(fù)制，其本質(zhì)都是減少用戶在操作過程中的成本，減少用戶操作路徑。

4.4.2 推薦示例二

鼠標(biāo)滑選/雙擊時，系統(tǒng)自動復(fù)制該部分內(nèi)容。通過大膽猜測用戶的行為，并幫助完成，給用戶小驚喜。

4.4.3 不推薦示例

在可復(fù)制內(nèi)容的附近出現(xiàn)『圖標(biāo)』，點擊后復(fù)制。其實，這個不推薦示例是從用戶操作成本來說的。因為你點擊復(fù)制圖標(biāo)之后，需要再次確認(rèn)反饋是否復(fù)制成功，toast的提示是需要的。這種情況下，打斷了用戶的操作流程。

但是為什么在KCL項目中再次運用了？

問題還是出在用戶身上，我們通過后臺數(shù)據(jù)分析、用戶訪談等定性和定量研究方法，得出結(jié)論是對于一些新穎的交互操作，他們覺得比較難以記住。不如直接明明白白的顯示出更符合他們的操作預(yù)期。所以，最終還是選擇了這種不推薦的樣式（antdesign闡述的不推薦）。

4.5 可視區(qū)域 ≠ 可點擊區(qū)域

在使用 Table 時，文字鏈的點擊范圍受到文字長短影響，可以設(shè)置整個單元格為熱區(qū)，以便用戶觸發(fā)。

4.5.1 單元格熱區(qū)

當(dāng)懸浮在 ID 所在的文字鏈單元格時，鼠標(biāo)『指針』隨即變?yōu)椤菏中汀?，單擊即可跳轉(zhuǎn)。

4.5.2 列表整行熱區(qū)

當(dāng)懸浮在 ID 所在的文字鏈整行時，鼠標(biāo)『指針』隨即變?yōu)椤菏中汀?，單擊即可跳轉(zhuǎn)。

4.5.3 卡片熱區(qū)

當(dāng)需要增強(qiáng)按鈕的響應(yīng)性時，可以通過增加用戶點擊熱區(qū)的范圍，而不是增大按鈕形狀，從而增強(qiáng)響應(yīng)性，又不缺失美感。

鼠標(biāo)移入按鈕附近，即可激活 Hover 狀態(tài)。此種類型的熱區(qū)設(shè)置，多見于C端或者前端顯示交互，后端系統(tǒng)項目，較為少見。

之前有個大神分享過其為外國客戶設(shè)計的一款醫(yī)療管理后臺，其交互形式以卡片式風(fēng)格為主，在后臺操作過程中，即常用了這種交互形式。

5. 交互設(shè)計原則-提供邀請（引導(dǎo)）

很多富交互模式（eg：『拖放』、『行內(nèi)編輯』、『上下文工具』）都有一個共同問題，就是缺少易發(fā)現(xiàn)性。所以『提供邀請』是成功完成人機(jī)交互的關(guān)鍵所在。邀請就是引導(dǎo)用戶進(jìn)入下一個交互層次的提醒和暗示，通常包括意符（eg：實時的提示信息）和可供性，以表明在下一個界面可以做什么。

當(dāng)可供性中可感知的部分（Perceived Affordance）表現(xiàn)為意符時，人機(jī)交互的過程往往更加自然、順暢。

意符（Signifiers）：一種額外的提示，告訴用戶可以采取什么行為，以及應(yīng)該怎么操作；必須是可感知（eg：視覺、聽覺、觸覺等）?！浴对O(shè)計心理學(xué)1》

可供性（Affordance）：也被翻譯成『示能』，由JamesJ.Gibson提出，定義為物品的特性與決定物品用途的主體能力之間的關(guān)系；其中部分可感知（此部分定義為PerceivedAffordance），部分不可感知?！浴对O(shè)計心理學(xué)1》

5.1 靜態(tài)引導(dǎo)（靜態(tài)邀請-antdesign表述）

指通過可視化技術(shù)在頁面上提供引導(dǎo)交互的邀請。

引導(dǎo)操作邀請：一般以靜態(tài)說明形式出現(xiàn)在頁面上，不過它們在視覺上也可以表現(xiàn)出多種不同樣式。

常見類型：『文本提示』、『場景提示』、『提示條引導(dǎo)』

5.1.1 文本提示

文本引導(dǎo)用戶下一步交互操作，如上圖所示，文本傳達(dá)表意，圖標(biāo)傳達(dá)操作指引。

5.1.2 場景提示

場景提示即空狀態(tài)提示引導(dǎo)，如上圖所展示。文案告知用戶狀態(tài)，同時以下一步操作引導(dǎo)用戶操作。

5.1.3 提示條指引

所謂未完成邀請即通知指引提示，類似移動端的toast，只是不會自動消失。

5.2 動態(tài)指引

指以響應(yīng)用戶在特定位置執(zhí)行特定操作的方式，提供特定的邀請。

5.2.1 懸停指引一：在鼠標(biāo)懸停期間提供指引(即依據(jù)用戶操作給與下一步操作提示指引）。

鼠標(biāo)『懸?！徽麄€卡片時，可被點擊部分變?yōu)樗{(lán)色的『文字鏈』。

5.2.2 懸停指引二：在鼠標(biāo)懸停時顯示就近操作指引(即依據(jù)用戶動作提示下一步操作指引）。

鼠標(biāo)『懸?！徽麄€卡片時，可被點擊部分顯示，按分類可看做上一個指引的延伸。提示指引，其實在我們看來就是提示指引或提示交互方式。

我們在KCL項目中，文字指引、空狀態(tài)提示指引以及未完成提示指引都有所體現(xiàn)，這種提示的方式可以給與用戶及時的反饋，避免用戶產(chǎn)生迷茫情緒。

懸停指引與我們項目并不相符，該提示無法第一時間就顯示，對于我們的客戶而言，有一定的學(xué)習(xí)成本。

6. 交互設(shè)計原則-巧用過渡（頁面轉(zhuǎn)場動效）

人腦灰質(zhì)（Gray Matter）會對動態(tài)的事物（eg：移動、形變、色變等）保持敏感。

在界面中，適當(dāng)加入一些過渡效果（即轉(zhuǎn)場動效-微動效，能讓界面保持生動，同時也能增強(qiáng)用戶和界面的溝通。

Adding:新加入的信息元素應(yīng)被告知如何使用，從頁面轉(zhuǎn)變的信息元素需被重新識別。

Receding:與當(dāng)前頁無關(guān)的信息元素應(yīng)采用適當(dāng)方式移除。Normal:指那些從轉(zhuǎn)場開始到結(jié)束都沒有發(fā)生變化的信息元素。

6.1 在視圖變化時保持上下文

6.1.1 滑入與滑出：可以有效構(gòu)建虛擬空間。

視圖變化時保持上下文，簡單來說，就是轉(zhuǎn)場時，不至于中間出現(xiàn)空白狀態(tài)或僅出現(xiàn)一個孤零零的加載態(tài)，讓整個頁面比較空的情況。

這種轉(zhuǎn)場方式，很多C端前臺產(chǎn)品運營比較普遍，主要是為了減少用戶的等待焦慮。這個，在KCL項目時，我們也有考慮是否增加這方面的動效。

但是其從需求優(yōu)先級而言，不高，最終讓步于其他的需求?，F(xiàn)在想來，其實如果增加了這種轉(zhuǎn)場動效，對于用戶而言也是一個小驚喜。

6.1.2 傳送帶（即序列變化）：可讓用戶產(chǎn)生視覺錯覺，擴(kuò)大虛擬頁面空間。

6.1.3 折疊窗口（手風(fēng)琴交互樣式）：在視圖切換時，有助于保持上下文，同時也能拓展虛擬空間。

6.2 顯示變化過程

6.2.1 對象增加：在列表/表格中，新增了一個對象。

新增一條對象時，該行『高亮』告知用戶這是新增項；幾秒后『高亮』消失，以免過度干擾用戶。這條包括下面幾條都是針對表格操作的，B端項目，做好表格的展示就起碼做好了視覺表現(xiàn)的1/3了。

上圖說的主從型列表即如下圖所示：

來源于網(wǎng)絡(luò)

6.2.2 對象刪除：在列表/表格中，刪除了一個對象。

所謂對象刪除交互和對象增加交互本質(zhì)上是類似的，故不增加圖示說明了。對象刪除就是運用了滑出+漸隱的方式比較流暢，體驗更好。但是一定要結(jié)合團(tuán)隊需求的優(yōu)先級來看，不要為了體驗忽略能用和易用。

6.2.3 對象更改：在列表/表格中，更改了一個對象。

• 狀態(tài)一：用戶更改了『詳情』中的值；
• 狀態(tài)二：用戶點擊『保存』后，詳情所在的網(wǎng)格出現(xiàn)『黃底』，表明該對象發(fā)生了更改；
• 狀態(tài)三：底色持續(xù)幾秒后，恢復(fù)正常。仍然是主從型表格的編輯操作，介紹的還是關(guān)于轉(zhuǎn)場交互微動效，用以增加用戶體驗流暢的。

6.2.4 對象呼出（alert或者pop彈窗）：點擊頁面中元素，呼出一個新對象。

一些概念保持了antdesign的叫法，后面已經(jīng)按我們的理解增加了說明。對象呼出這個，因為涉及交互提醒程度不同，有pop彈窗、alertdialog、還有toast提示等，都是需要依據(jù)下一步指引內(nèi)容的重要程度來判斷用哪種交互樣式。

7. 交互設(shè)計原則-即時反饋

『提供邀請』的強(qiáng)大體現(xiàn)在交互之前給出反饋，解決易發(fā)現(xiàn)性問題（事前）；『巧用過渡』的有用體現(xiàn)在它能夠在交互期間為用戶提供視覺反饋（事中）；『即時反應(yīng)』的重要性體現(xiàn)在交互之后立即給出反饋（事后）。

就像『牛頓第三定律』所描述作用力和反作用一樣，用戶進(jìn)行了操作或者內(nèi)部數(shù)據(jù)發(fā)生了變化，系統(tǒng)就應(yīng)該立即有一個對應(yīng)的反饋，同時輸入量級越大、重要性越高，那么反饋量級越大、重要性越高。

雖然反饋太多（準(zhǔn)確的說，錯誤的反饋太多）是一個問題，但是反饋太少甚至沒有反饋的系統(tǒng)，則讓人感覺遲鈍和笨拙，用戶體驗更差。

牛頓第三定律：當(dāng)兩個物體互相作用時，彼此施加于對方的力，其大小相等、方向相反?！浴毒S基百科》

7.1 即時反饋-查詢場景

自動完成：用戶輸入時，下拉列表會隨著輸入的關(guān)鍵詞顯示匹配項。 根據(jù)查詢結(jié)果分類的多少，可以分為『確定類目』、『不確定類目』兩種類型。

7.1.1 確定類目

用戶所查詢的關(guān)鍵詞，只會在『話題』、『產(chǎn)品』、『商鋪』這三種類目中出現(xiàn)。

7.1.2 不確定類目

用戶所查詢的關(guān)鍵詞，其所屬的類目數(shù)量不確定，可能 4 個，可能 5 個，可能更多。不管是確定類目還是不確定類目，其都是搜索后反饋結(jié)果。

這兩種顯示交互操作，并無優(yōu)劣之分，區(qū)別在于搜索時對于IK分詞或者匹配算法的差異。當(dāng)然，兩種類目也可以同時展示，主要看團(tuán)隊后臺是否可以支持？畢竟當(dāng)項目的體量比較大的時候，多一種展示方式，體量可不是簡單的一加一。

優(yōu)先級：確定類目大于不確定類目，具體可以參看之前一篇關(guān)于搜索和篩選的文章。

7.2 即時反饋-輸入

7.2.1 實時預(yù)覽

在用戶提交輸入之前，讓他先行了解系統(tǒng)將如何處理他的輸入。

注：解決錯誤最好的辦法，就是不讓錯誤發(fā)生，而『實時預(yù)覽』就是有效避免錯誤的好設(shè)計。

根據(jù)用戶的輸入，提供關(guān)于密碼強(qiáng)度和有效性的實時反饋。

7.2.2 漸進(jìn)式展現(xiàn)

在必要的時候提供必要的提示，而不是一股腦兒顯示所有提示，導(dǎo)致界面混亂，增加認(rèn)知負(fù)擔(dān)。

進(jìn)度指示：當(dāng)一個操作需要一定時間完成時，就需要即時告知進(jìn)度，保持與用戶的溝通。

常見的進(jìn)度指示：『按鈕加載』、『表格加載』、『富列表加載』、『頁面加載』，可根據(jù)操作的量級和重要性，展示不同類型的進(jìn)度指示。

a. 按鈕加載

b. 表格加載

c. 富列表加載

d. 頁面進(jìn)度加載

二、視覺設(shè)計原則

1. 視覺設(shè)計原則- 親密性

如果信息之間關(guān)聯(lián)性越高，它們之間的距離就應(yīng)該越接近，也越像一個視覺單元；反之，則它們的距離就應(yīng)該越遠(yuǎn)，也越像多個視覺單元。

親密性的根本目的是實現(xiàn)組織性，讓用戶對頁面結(jié)構(gòu)和信息層次一目了然。

1.1 縱向間距關(guān)系

1.1.1 通過『小號間距』、『中號間距』、『大號間距』這三種規(guī)格來劃分信息層次。

在系統(tǒng)設(shè)計中，這三種規(guī)格分別為：8px（小號間距）、16px（中號間距）、24px（大號間距）。

之所以用8為倍數(shù)，一方面是antdesign的建議，另一方面也是因為我們C端前臺界面間距規(guī)范都是以8的倍數(shù)來的，保持項目規(guī)范的整體延續(xù)。

注：在系統(tǒng)設(shè)計中，間距y=8+8*n。其中，n>=0，y是縱向間距，8是『基礎(chǔ)間距』。

1.1.2 分割線

通過增加『分割線』來拉開層次。當(dāng)前來說，除了增加分割線區(qū)分邊界和層級。還可以通過留白，當(dāng)然留白這種不適合后臺項目。

還可以通過斑馬線分割邊界。我們通過調(diào)研分析，發(fā)現(xiàn)分割線區(qū)分對于用戶而言體驗不佳，主要體現(xiàn)在表格內(nèi)容超過10條之后，很容易看錯行。

1.2 橫向間距關(guān)系

為了適用不同尺寸的屏幕，在橫向采用柵格布局來排布組件，從而保證布局的靈活性。

1.2.1 組合排布

在一個組件內(nèi)部，元素的橫向間距也應(yīng)該有所不同。

1.2.2 復(fù)選框間距

縱向關(guān)系和橫向關(guān)系間距，我們都是設(shè)置以8的倍數(shù)為遞進(jìn)的。這樣既保持了規(guī)范一致，也可以提升團(tuán)隊內(nèi)的開發(fā)進(jìn)程和效率。

2. 視覺設(shè)計原則-對齊

正如『格式塔學(xué)派』中的連續(xù)律（Law of Continuity）所描述的，在知覺過程中人們往往傾向于使知覺對象的直線繼續(xù)成為直線，使曲線繼續(xù)成為曲線。任何元素都不能在頁面上隨意安放。每個元素都應(yīng)當(dāng)與頁面上的另一個元素有某種視覺聯(lián)系。這樣能建立一種清晰、精巧而且清爽的外觀。

雖然可能會通過分開放置某些元素 來指示它們的關(guān)系（使用親密性原則），但對齊原則會告訴用戶，即使這些項并不靠近，但它們屬于同一組。在界面設(shè)計中，將元素進(jìn)行對齊，既符合用戶的認(rèn)知特性，也能引導(dǎo)視覺流向，讓用戶更流暢地接收信息。

2.1 文案類對齊

如果頁面的字段或段落較短、較散時，需要確定一個統(tǒng)一的視覺起點。

2.2 表單類對齊

冒號對齊（右對齊）能讓內(nèi)容鎖定在一定范圍內(nèi)，讓用戶眼球順著冒號的視覺流，就能找到所有填寫項，從而提高填寫效率。

2.3 數(shù)字類對齊

為了快速對比數(shù)值大小，建議所有數(shù)值取相同有效位數(shù)，并且右對齊。

內(nèi)容對齊是設(shè)計中非常重要的原則，統(tǒng)一對于原則達(dá)成共識是后續(xù)在團(tuán)隊協(xié)作中非常重要的。因為有些人很容易發(fā)生上述圖中不推薦示例的理解。

當(dāng)然，表單類對齊中，我們一開始是堅持以冒號對齊為標(biāo)準(zhǔn)的，但是后續(xù)隨著各種業(yè)務(wù)場景字段的統(tǒng)一展示，發(fā)現(xiàn)按冒號對齊，整個界面顯得特別凌亂（我們不是antdesign中推薦的1440寬，而是1920寬）。

所以，后續(xù)我們嘗試是以文字左對齊來的做兩排顯示。如果按1440寬，也許留白不那么空，還是會堅持以冒號對齊的。后續(xù)真實使用如何，恐怕需要數(shù)據(jù)說話。

3. 視覺設(shè)計原則-對比

對比是增加視覺效果最有效方法之一，同時也能在不同元素之間建立一種有組織的層次結(jié)構(gòu)，讓用戶快速識別關(guān)鍵信息。對比是為頁面增加視覺效果的最有效的途徑之一；同時對比還能在不同元素之間建立一種有組織的層次結(jié)構(gòu)，讓用戶快速識別關(guān)鍵信息。

要記住一個重要規(guī)則:要想實現(xiàn)有效的對比，對比就必須強(qiáng)烈，千萬不要畏畏縮縮。

3.1 主次關(guān)系對比

為了讓用戶能在操作上（類似表單、彈出框等場景）快速做出判斷，來突出其中一項相對更重要或者更高頻的操作。

3.2 不區(qū)分主次關(guān)系

在一些需要用戶慎重決策的場景中，系統(tǒng)應(yīng)該保持中立，不能替用戶或者誘導(dǎo)用戶做出判斷?！和ㄟ^』和『駁回』都使用次按鈕，系統(tǒng)保持中立。

3.3 總分關(guān)系對比

通過調(diào)整排版、字體、大小等方式來突出層次感，區(qū)分總分關(guān)系，使得頁面更具張力和節(jié)奏感。

3.4 狀態(tài)關(guān)系對比

通過改變顏色、增加輔助形狀等方法來實現(xiàn)狀態(tài)關(guān)系的對比，以便用戶更好的區(qū)分信息。

常見類型有『靜態(tài)對比』、『動態(tài)對比』。

4. 視覺設(shè)計原則-重復(fù)

相同的元素在整個界面中不斷重復(fù)，不僅可以有效降低用戶的學(xué)習(xí)成本，也可以幫助用戶識別出這些元素之間的關(guān)聯(lián)性。

重復(fù)元素

重復(fù)元素可以是一條粗線、一種線框，某種相同的顏色、設(shè)計要素、設(shè)計風(fēng)格，某種格式、空間關(guān)系等。

總的來說，交互設(shè)計原則和視覺設(shè)計原則，一開始就制定細(xì)節(jié)的規(guī)范，這樣做是不推薦的。一限制了設(shè)計的發(fā)揮空間；二不利于設(shè)計的執(zhí)行，有些類似偏離了項目實際，空想決策。

所以，正如開頭所言，比較推薦的是，一開始也是需要制定一定的規(guī)范，只是這個規(guī)范是一個大概的方向或參照依據(jù)。后續(xù)可以根據(jù)項目以及團(tuán)隊具體人力來決定是邊設(shè)計邊總結(jié)，還是設(shè)計完成再梳理。

整篇文章涉及的原則，大部分來源于antdesign的資料以及element的規(guī)范，同時也摻雜了我們的實際項目經(jīng)驗理解，權(quán)當(dāng)記錄和梳理一下最近一次B端項目歷程中的思考。

參考鏈接：

AntDesign的設(shè)計組件，實現(xiàn)框架React、Angular——https://ant.design/docs/spec/layout-cn

Element的設(shè)計組件，實現(xiàn)框架Vue 2.0、 Angular——http://element-cn.eleme.io/#/zh-CN/component/checkbox

iView的設(shè)計組件，實現(xiàn)框架Vue——https://www.iviewui.com/docs/guide/theme

飛冰的設(shè)計組件，實現(xiàn)框架React——https://alibaba.github.io/ice/

Layui的設(shè)計組件——https://www.layui.com/demo/grid.html

G2可視化圖形組件——https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html

Echarts可視化圖形組件——https://echarts.baidu.com/

d3.js可視化圖形組件——https://github.com/d3/d3/wiki/Gallery

在線柵格化計算工具——http://grid.guide/#/1000/24/34/8/0

作者：PGDWORKS；公眾號：PGDWORKS

本文由 @PGDWORKS 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議