国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

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

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

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

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

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

目錄

1. 交互設(shè)計(jì)原則
2. 視覺(jué)設(shè)計(jì)原則

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

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

1. 核心原則

圖一

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

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

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

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

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

2.1.1 當(dāng)『易讀性』遠(yuǎn)比『易編輯性』重要時(shí)，可以使用『?jiǎn)螕艟庉嫛弧?/p>

單擊示例

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

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

示例二

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

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

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

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

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

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

能在這個(gè)頁(yè)面解決的問(wèn)題，就不要去其它頁(yè)面解決，因?yàn)槿魏雾?yè)面刷新和跳轉(zhuǎn)都會(huì)引起變化盲視（Change Blindness），導(dǎo)致用戶心流（Flow）被打斷。頻繁的頁(yè)面刷新和跳轉(zhuǎn)，就像在看戲時(shí)，演員說(shuō)完一行臺(tái)詞就安排一次謝幕一樣。

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

變化盲視（ChangeBlindness）：指視覺(jué)場(chǎng)景中的某些變化并未被觀察者注意到的心理現(xiàn)象。產(chǎn)生這種現(xiàn)象的原因包括場(chǎng)景中的障礙物，眼球運(yùn)動(dòng)、地點(diǎn)的變化，或者是缺乏注意力等。——摘自《維基百科》

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

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

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

3.1.1 推薦示例

推薦示例

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

3.1.2 推薦示例

推薦示例

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

3.1.3 不推薦示例

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

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

因?yàn)樵谖易鯧CL項(xiàng)目的過(guò)程中，面對(duì)的主要客群是偏線下場(chǎng)景的工作人員，其認(rèn)知水平與一般的企業(yè)人員稍有差異。所以，能盡量簡(jiǎn)化操作，能盡量在當(dāng)前頁(yè)完成的，就盡量在當(dāng)前頁(yè)完成。避免流程過(guò)長(zhǎng)影響使用效率。

在KCL項(xiàng)目中，我就多次運(yùn)用了上述不推薦的樣式。

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

示例

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

3.2 嵌入層

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

示例

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

標(biāo)簽示例

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

在后臺(tái)項(xiàng)目中，特別是KCL項(xiàng)目，因?yàn)樯婕暗臉I(yè)務(wù)場(chǎng)景比較多，所以會(huì)有涉及。

3.3 流程

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

流程示例

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

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

3.3.1 彈出框

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

流程-覆蓋層示例

正如第一條覆蓋層闡述所說(shuō)，覆蓋層有的情況下，也是合適的。關(guān)于流程處理，就比較適合覆蓋層，因?yàn)橛脩舨恍枰私馍弦粚蛹?jí)的前提條件，只需要關(guān)注當(dāng)前流程步驟即可。

4. 交互設(shè)計(jì)原則-簡(jiǎn)化交互

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

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

4.1 實(shí)時(shí)可見(jiàn)（即：所見(jiàn)即所得）

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

示例

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

4.2 懸停即現(xiàn)

如果某個(gè)操作不那么重要，或者使用『實(shí)時(shí)可見(jiàn)工具』過(guò)于啰嗦會(huì)影響用戶閱讀時(shí)，可以在懸停在該對(duì)象上時(shí)展示操作項(xiàng)。

示例

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

4.3 開(kāi)關(guān)顯示

開(kāi)關(guān)示例

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

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

4.4 融合顯現(xiàn)

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

4.4.1 推薦示例一

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

4.4.2 推薦示例二

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

4.4.3 不推薦示例

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

但是為什么在KCL項(xiàng)目中再次運(yùn)用了？

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

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

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

4.5.1 單元格熱區(qū)

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

4.5.2 列表整行熱區(qū)

當(dāng)懸浮在 ID 所在的文字鏈整行時(shí)，鼠標(biāo)『指針』隨即變?yōu)椤菏中汀唬瑔螕艏纯商D(zhuǎn)。

4.5.3 卡片熱區(qū)

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

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

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

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

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

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

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

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

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

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

引導(dǎo)操作邀請(qǐng)：一般以靜態(tài)說(shuō)明形式出現(xiàn)在頁(yè)面上，不過(guò)它們?cè)谝曈X(jué)上也可以表現(xiàn)出多種不同樣式。

常見(jiàn)類(lèi)型：『文本提示』、『場(chǎng)景提示』、『提示條引導(dǎo)』

5.1.1 文本提示

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

5.1.2 場(chǎng)景提示

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

5.1.3 提示條指引

所謂未完成邀請(qǐng)即通知指引提示，類(lèi)似移動(dòng)端的toast，只是不會(huì)自動(dòng)消失。

5.2 動(dòng)態(tài)指引

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

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

鼠標(biāo)『懸停』整個(gè)卡片時(shí)，可被點(diǎn)擊部分變?yōu)樗{(lán)色的『文字鏈』。

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

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

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

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

6. 交互設(shè)計(jì)原則-巧用過(guò)渡（頁(yè)面轉(zhuǎn)場(chǎng)動(dòng)效）

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

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

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

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

6.1 在視圖變化時(shí)保持上下文

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

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

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

但是其從需求優(yōu)先級(jí)而言，不高，最終讓步于其他的需求。現(xiàn)在想來(lái)，其實(shí)如果增加了這種轉(zhuǎn)場(chǎng)動(dòng)效，對(duì)于用戶而言也是一個(gè)小驚喜。

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

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

6.2 顯示變化過(guò)程

6.2.1 對(duì)象增加：在列表/表格中，新增了一個(gè)對(duì)象。

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

上圖說(shuō)的主從型列表即如下圖所示：

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

6.2.2 對(duì)象刪除：在列表/表格中，刪除了一個(gè)對(duì)象。

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

6.2.3 對(duì)象更改：在列表/表格中，更改了一個(gè)對(duì)象。

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

6.2.4 對(duì)象呼出（alert或者pop彈窗）：點(diǎn)擊頁(yè)面中元素，呼出一個(gè)新對(duì)象。

一些概念保持了antdesign的叫法，后面已經(jīng)按我們的理解增加了說(shuō)明。對(duì)象呼出這個(gè)，因?yàn)樯婕敖换ヌ嵝殉潭炔煌衟op彈窗、alertdialog、還有toast提示等，都是需要依據(jù)下一步指引內(nèi)容的重要程度來(lái)判斷用哪種交互樣式。

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

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

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

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

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

7.1 即時(shí)反饋-查詢場(chǎng)景

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

7.1.1 確定類(lèi)目

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

7.1.2 不確定類(lèi)目

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

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

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

7.2 即時(shí)反饋-輸入

7.2.1 實(shí)時(shí)預(yù)覽

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

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

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

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

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

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

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

a. 按鈕加載

b. 表格加載

c. 富列表加載

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

二、視覺(jué)設(shè)計(jì)原則

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

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

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

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

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

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

之所以用8為倍數(shù)，一方面是antdesign的建議，另一方面也是因?yàn)槲覀僀端前臺(tái)界面間距規(guī)范都是以8的倍數(shù)來(lái)的，保持項(xiàng)目規(guī)范的整體延續(xù)。

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

1.1.2 分割線

通過(guò)增加『分割線』來(lái)拉開(kāi)層次。當(dāng)前來(lái)說(shuō)，除了增加分割線區(qū)分邊界和層級(jí)。還可以通過(guò)留白，當(dāng)然留白這種不適合后臺(tái)項(xiàng)目。

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

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

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

1.2.1 組合排布

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

1.2.2 復(fù)選框間距

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

2. 視覺(jué)設(shè)計(jì)原則-對(duì)齊

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

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

2.1 文案類(lèi)對(duì)齊

如果頁(yè)面的字段或段落較短、較散時(shí)，需要確定一個(gè)統(tǒng)一的視覺(jué)起點(diǎn)。

2.2 表單類(lèi)對(duì)齊

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

2.3 數(shù)字類(lèi)對(duì)齊

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

內(nèi)容對(duì)齊是設(shè)計(jì)中非常重要的原則，統(tǒng)一對(duì)于原則達(dá)成共識(shí)是后續(xù)在團(tuán)隊(duì)協(xié)作中非常重要的。因?yàn)橛行┤撕苋菀装l(fā)生上述圖中不推薦示例的理解。

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

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

3. 視覺(jué)設(shè)計(jì)原則-對(duì)比

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

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

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

為了讓用戶能在操作上（類(lèi)似表單、彈出框等場(chǎng)景）快速做出判斷，來(lái)突出其中一項(xiàng)相對(duì)更重要或者更高頻的操作。

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

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

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

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

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

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

常見(jiàn)類(lèi)型有『靜態(tài)對(duì)比』、『動(dòng)態(tài)對(duì)比』。

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

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

重復(fù)元素

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

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

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

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

參考鏈接：

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

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

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

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

Layui的設(shè)計(jì)組件——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

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

作者：PGDWORKS；公眾號(hào)：PGDWORKS

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

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