這些年一直在從事產(chǎn)品相關(guān)的工作，從自身經(jīng)歷以及與同行之間的交流發(fā)現(xiàn)，“交互體驗(yàn)”“交互規(guī)范”“用戶體驗(yàn)”時(shí)常被掛在嘴邊，但是目前依然有很大一部分公司對(duì)交互規(guī)范不重視。本文結(jié)合自己親身體驗(yàn)了公司產(chǎn)品，總結(jié)了一份后臺(tái)產(chǎn)品交互規(guī)范。

序言

從畢業(yè)至今一直從事互聯(lián)網(wǎng)產(chǎn)品工作，這些年自己做過(guò)很多的產(chǎn)品（2C的有二手電商、醫(yī)療美容，2B的有環(huán)保監(jiān)測(cè)、智慧房產(chǎn)、智慧物業(yè)等）。自己做產(chǎn)品的時(shí)候因?yàn)槭菑牧汩_始打造的產(chǎn)品，同時(shí)也是產(chǎn)品的負(fù)責(zé)人，在產(chǎn)品規(guī)范方面也形成了文檔（雖然寫的不是那么詳細(xì)，不過(guò)也夠用），因此不管后期有多少人加入進(jìn)來(lái)或者增加多少條產(chǎn)品線產(chǎn)品的交互以及UI風(fēng)格基本是保持一致的。

今年換了一個(gè)平臺(tái)，這次就不是自己從零開始打造的產(chǎn)品了，經(jīng)過(guò)使用發(fā)現(xiàn)整個(gè)產(chǎn)品中出現(xiàn)了四五種交互模式，不僅給我的學(xué)習(xí)增加了很大的成本，后來(lái)接觸到客戶之后也被各種吐槽，從那時(shí)候開始才真正的意識(shí)到交互規(guī)范的對(duì)于一個(gè)產(chǎn)品的重要性。

大致介紹一些我們的這個(gè)集成系統(tǒng)，我們系統(tǒng)的用戶是房產(chǎn)局以及房產(chǎn)局監(jiān)管的開發(fā)企業(yè)、租賃機(jī)構(gòu)、物業(yè)服務(wù)企業(yè)等；系統(tǒng)很復(fù)雜，設(shè)計(jì)很多的業(yè)務(wù)線，一條業(yè)務(wù)線對(duì)應(yīng)著一個(gè)系統(tǒng)。系統(tǒng)涉及的業(yè)務(wù)線多需要多位產(chǎn)品人員參與，因?yàn)闆](méi)有指導(dǎo)性的交互規(guī)范同時(shí)每個(gè)人習(xí)慣的交互模式不一導(dǎo)致現(xiàn)在整個(gè)集成系統(tǒng)有很多種交互模式。

WHAT：什么是交互規(guī)范？

以下是個(gè)人僅代表愚見：

每一款產(chǎn)品都應(yīng)該有自己的一套交互規(guī)范。交互規(guī)范是通過(guò)定義產(chǎn)品頂層框架、基礎(chǔ)交互說(shuō)明（操作成功、刪除提示燈）、通用組件以及特殊組件設(shè)計(jì)范圍限定來(lái)指導(dǎo)產(chǎn)品在交互方面保持統(tǒng)一。未來(lái)不管產(chǎn)品有多少條產(chǎn)品線，有多少人員參與，都需要按照這一套交互規(guī)范來(lái)設(shè)計(jì)開發(fā)，以期待達(dá)到產(chǎn)品交互統(tǒng)一。

WHY：目的及意義

這些年一直在從事產(chǎn)品相關(guān)的工作，從自身經(jīng)歷以及與同行之間的交流發(fā)現(xiàn)，“交互體驗(yàn)”“交互規(guī)范”“用戶體驗(yàn)”時(shí)常被掛在嘴邊，但是目前依然有很大一部分公司對(duì)交互規(guī)范不重視。

結(jié)合自己親身體驗(yàn)了公司產(chǎn)品總計(jì)了以下幾條沒(méi)有交互規(guī)范帶來(lái)的影響：

1. 被吐槽不專業(yè)

我們公司是做G端智慧房產(chǎn)業(yè)務(wù)，公司業(yè)務(wù)發(fā)展非?？煸谌珖?guó)很多城市都有業(yè)務(wù)往來(lái)，因此會(huì)接觸到很多客戶經(jīng)常會(huì)被吐槽產(chǎn)品不專業(yè)要求改。初期的時(shí)候我們理解的不專業(yè)以為是指我們產(chǎn)品在業(yè)務(wù)方面不專業(yè)，經(jīng)過(guò)多次溝通之后才發(fā)現(xiàn)并不是指業(yè)務(wù)專業(yè)方面而是產(chǎn)品的界面不一致。同樣類型的列表操作欄一些在左邊一些在右邊，有些事按鈕，有些是文本按鈕等，當(dāng)時(shí)是恨不得找個(gè)地縫轉(zhuǎn)進(jìn)土里。

2. 學(xué)習(xí)成本增加

使用過(guò)蘋果系統(tǒng)和win系統(tǒng)的人在這方面應(yīng)該深有體會(huì)，這兩個(gè)系統(tǒng)各自有自己的一套交互規(guī)范。

舉幾個(gè)例子：

win系統(tǒng)對(duì)打開窗口“關(guān)閉”“最大化”“最小化”是在窗口的右上角，蘋果系統(tǒng)的是在左上角。

win系統(tǒng)對(duì)窗口內(nèi)容的翻頁(yè)，在默認(rèn)情況下他們也是相反的（現(xiàn)在可以自定義配置成自己習(xí)慣的方式）。

以上的這兩種常見的操作方式，相信給使用過(guò)兩種系統(tǒng)的人帶來(lái)過(guò)深刻的影響，特別是剛從一種系統(tǒng)切換到另一種系統(tǒng)是非常容易誤操作，例如：關(guān)掉窗口等。

要想很好的操作自己的電腦，只有花費(fèi)一定的時(shí)間去學(xué)習(xí)，還會(huì)因?yàn)椴涣?xí)慣操作方式抱怨不好用。

3. 導(dǎo)致用戶體驗(yàn)差

用戶體驗(yàn)（User Experience，簡(jiǎn)稱UE/UX）是用戶在使用產(chǎn)品過(guò)程中建立起來(lái)的一種純主觀感受。

在習(xí)慣的位置上找不到按鈕會(huì)讓用戶失望；因?yàn)槭褂昧?xí)慣而誤操作會(huì)讓用戶變得不自信；找不到返回的路徑會(huì)讓用戶“迷路”；當(dāng)這些情緒積累到一定程度之后，用戶就會(huì)認(rèn)為你的產(chǎn)品體驗(yàn)很差，從而不再使用你的產(chǎn)品。

4. 交互規(guī)范的意義

規(guī)范的意義：

• 提高效率；
• 保障質(zhì)量；
• 統(tǒng)一體驗(yàn)。

規(guī)范可以幫助個(gè)人、團(tuán)隊(duì)甚至整個(gè)企業(yè)提高效率，保證產(chǎn)品質(zhì)量產(chǎn)出質(zhì)量，保障用戶體驗(yàn)統(tǒng)一。

一名高級(jí)產(chǎn)品設(shè)計(jì)師設(shè)計(jì)一套詳細(xì)完整的登錄流程可能需要花費(fèi)十幾個(gè)小時(shí)，一位產(chǎn)品設(shè)計(jì)新人在沒(méi)有知道性的文檔幫助下可能需要花費(fèi)幾天的時(shí)間來(lái)完成，同時(shí)也很難考慮周全登錄流程中涉及的防刷機(jī)制、自動(dòng)補(bǔ)全以及各種賬號(hào)的異常校驗(yàn)等細(xì)節(jié)。如果有交互規(guī)范的幫助，設(shè)計(jì)新人可以在較短的時(shí)間內(nèi)產(chǎn)出一套高質(zhì)量的登錄流程。

WHO：誰(shuí)來(lái)制定交互規(guī)范比較合適？

至少需要滿足以下條件：

1. 交互規(guī)范當(dāng)然是交互設(shè)計(jì)師是最適合的角色，其次是懂交互的產(chǎn)品經(jīng)理。他們了解產(chǎn)品的用戶、產(chǎn)品用戶畫像；
2. 最好是從零開始全程參與產(chǎn)品研發(fā)的交互設(shè)計(jì)師或者產(chǎn)品經(jīng)理，他們理解產(chǎn)品的定位、產(chǎn)品解決的痛點(diǎn)、產(chǎn)品愿景。沒(méi)有全程參與，至少也應(yīng)該是最懂自家產(chǎn)品的那些人；
3. 有交互設(shè)計(jì)經(jīng)驗(yàn)的人，產(chǎn)品交互規(guī)范不是隨隨便便的一篇文檔，那是一篇能夠指導(dǎo)和定義未來(lái)產(chǎn)品交互模式的文檔，最好是有制定過(guò)交互規(guī)范的經(jīng)驗(yàn)的人。

總結(jié)：其實(shí)就是既要非常知道自家產(chǎn)品，又是要有交互設(shè)計(jì)經(jīng)驗(yàn)的那些人才具備制定交互規(guī)范的能力。

WHEN：什么時(shí)候制定交互規(guī)范？

什么時(shí)候適合制定交互規(guī)范呢？不能太早，產(chǎn)品功能都還沒(méi)定義好就有原型了，那肯定是不行的；也不能太晚，都迭代了好幾個(gè)版本了都還沒(méi)有開始有規(guī)范，也肯定也是不行的。

什么時(shí)候比較合適呢？我按照同時(shí)參與的人數(shù)來(lái)分了兩種情況：

一是1~2位產(chǎn)品人員同時(shí)參與

如果是一位產(chǎn)品人員或者交互設(shè)計(jì)師參與原型，個(gè)人建議先進(jìn)行原型再提煉交互規(guī)范。不過(guò)也一邊原型設(shè)計(jì)一邊提煉交互規(guī)范的，我個(gè)人不太適合這樣的工作方式，這樣會(huì)讓我分心，個(gè)人也不建議這樣。

二是三位以上的產(chǎn)品設(shè)計(jì)人員參與

如果是多條產(chǎn)品線同位產(chǎn)品人員同時(shí)參與，產(chǎn)品負(fù)責(zé)人就需要在完成功能定義之后原型設(shè)計(jì)之前開會(huì)討論一下重要的基礎(chǔ)的交互規(guī)范，并形成最初的交互規(guī)范。這樣做的好處是讓每一位參與人員在進(jìn)行產(chǎn)品設(shè)計(jì)時(shí)候又一個(gè)大的方向，大家都在這個(gè)大的前提下去發(fā)揮。

但是產(chǎn)品負(fù)責(zé)人也需要定期開會(huì)評(píng)審每一條產(chǎn)品線的原型，一是確定大家是否有跳出最初的交互規(guī)范，二是將風(fēng)格不統(tǒng)一的原型設(shè)計(jì)討論出最優(yōu)的設(shè)計(jì)，三是從原型中提煉出更優(yōu)的設(shè)計(jì)加入到交互規(guī)范文檔中去。

注：產(chǎn)品負(fù)責(zé)人開會(huì)評(píng)審原型不僅僅只是評(píng)審原型的交互模式是否一致，交互模式僅僅只是其中一方面。至于原型評(píng)審會(huì)評(píng)審那些方面這里不展開討論，以后有機(jī)會(huì)再講。

總結(jié)：什么時(shí)候制定交互規(guī)范？按照同時(shí)參與的人員劃分為兩種情況：一人參與時(shí)先原型設(shè)計(jì)再提煉交互規(guī)范；多人同時(shí)參與式，先定義初步交互規(guī)范，再一邊設(shè)計(jì)一邊優(yōu)化交互規(guī)范。

HOW：如何制定交互規(guī)范？

1. 概述

1. 設(shè)計(jì)說(shuō)明：交互設(shè)計(jì)是很自由的事情，因此規(guī)范不會(huì)對(duì)細(xì)微之處作明確規(guī)定。該文檔為通用性質(zhì)，通用交互規(guī)范目的是保證整站的交互體驗(yàn)的一致性。并且保證一些體驗(yàn)較好的交互方式能在各個(gè)模塊中得以使用，從而保證產(chǎn)品設(shè)計(jì)的一致性，提升整體產(chǎn)品質(zhì)量。
2. 頁(yè)面通用規(guī)范 ：針對(duì)頁(yè)面交互信息的標(biāo)準(zhǔn)，包括：增刪改查規(guī)范、頁(yè)面標(biāo)題、鏈接新窗口打開規(guī)范、圖片信息。
3. 信息交互規(guī)范 ：交互流程中包含的信息交互方式，包括：預(yù)先提示信息、操作提示信息、結(jié)果信息提 示。
4. 通用組件規(guī)范 ：對(duì)于一些可在多頁(yè)面中使用的通用組件進(jìn)行規(guī)范，包括：按鈕、導(dǎo)航、輸入框、搜索、浮層、列表。
5. 讀者對(duì)象：產(chǎn)品經(jīng)理，產(chǎn)品開發(fā)人員，交互設(shè)計(jì)師，產(chǎn)品UI設(shè)計(jì)人員

2. 頂層框架

借鑒網(wǎng)易UEDC設(shè)計(jì)組的設(shè)計(jì)規(guī)范：

圖片來(lái)源《網(wǎng)易蜂巢交互文檔》

網(wǎng)易UEDC設(shè)計(jì)組對(duì)web頁(yè)面的框架層級(jí)做了如下的梳理：即底層、內(nèi)容層、導(dǎo)航層、全屏操作層、插件層和模態(tài)彈窗層（熟悉前端的同學(xué)應(yīng)該知道，前端同學(xué)在寫頁(yè)面時(shí)會(huì)把頁(yè)面劃分的三層：結(jié)構(gòu)層、表示層、行為層，我們制定設(shè)計(jì)的主要是圍繞這三個(gè)方向展開，即頁(yè)面框架、頁(yè)面樣式和交互動(dòng)作設(shè)計(jì)）。

搭好基礎(chǔ)框架后，所有的控件組件都會(huì)在這個(gè)框架內(nèi)搭建，好比房子的框架。這樣做的好處除了方便設(shè)計(jì)師自己去清晰的理解系統(tǒng)，在與前端開發(fā)交流的時(shí)候也十分高效。比如在做模態(tài)彈窗時(shí)，如果沒(méi)和開發(fā)交流好，開發(fā)同學(xué)將彈窗寫在了全屏操作的位置，那么就有可能出現(xiàn)問(wèn)題。

3. 頁(yè)面信息規(guī)范

以曾經(jīng)的做過(guò)的交互規(guī)范示例：

（1）新增

• 提交失敗后必須保存用戶已經(jīng)輸入的內(nèi)容，以便再次提交。
• 提交時(shí)需對(duì)主要標(biāo)識(shí)字段進(jìn)行重復(fù)值、空值 （空格）判斷。
• 新增內(nèi)容提交失敗后，須保留用戶修改的內(nèi)容，以便再次修改提交。
• 新增內(nèi)容提交成功返回到主頁(yè)面時(shí)，主頁(yè)需刷新。

（2）修改?

當(dāng)進(jìn)行單條或多條記錄的修改時(shí)：

• 如界面存在復(fù)選按鈕，勾選多條記錄進(jìn)行修改時(shí)，每次只能對(duì)一條記錄進(jìn)行修改，默認(rèn)修改內(nèi)容:為第一條的提示信息；
• 修改后加載的內(nèi)容應(yīng)為實(shí)際內(nèi)容，而不再為默認(rèn)值；
• 修改完成后須回到原記錄所在位置，且刷新顯示修改后的值；
• 修改內(nèi)容提交失敗后，須保留用戶修改的內(nèi)容，以便再次修改提交；
• 在查詢條件下修改后返回，如不滿足查詢條件則不顯示；
• 需對(duì)主標(biāo)識(shí)字段進(jìn)行重復(fù)值、空值（空格）判斷。

（3）刪除?

當(dāng)刪除一條或多條記錄，要求：

• 必須有確認(rèn)刪除的提示信息；
• 刪除成功后刷新，不顯示刪除的記錄；
• 刪除成功后，返回到原記錄所在頁(yè)面，如果原記錄所在頁(yè)不存在時(shí)，則返回上一頁(yè);
• 當(dāng)被刪除的記錄與其他記錄存在關(guān)聯(lián)時(shí)，請(qǐng)示需求界面給予不允許刪除、更明細(xì)提示等信息。

（4）查詢

當(dāng)按照條件查詢時(shí)，要求：

• 每次查詢后保留當(dāng)前查詢條件；
• 通過(guò)查詢條件篩選出的結(jié)果，通過(guò)結(jié)果進(jìn)入到詳情頁(yè)，再返回時(shí)需保留篩選條件以及篩選結(jié)果。注：這一點(diǎn)很容易漏掉；
• 當(dāng)查詢條件較多時(shí)，必須設(shè)置“重置”按鈕提供使用；
• 當(dāng)未查詢到任何記錄時(shí)，需給予未查找到相關(guān)記錄的提示信息，后臺(tái)頁(yè)面在未查詢到結(jié)果時(shí)較少使用推薦查詢結(jié)果；
• 除了用戶明確要求不需要外，需提供模糊查詢及組合查詢功能。

（5）頁(yè)面標(biāo)題規(guī)范?

用于規(guī)范整個(gè)產(chǎn)品中所有不同層級(jí)不同功能的頁(yè)面應(yīng)該使用的標(biāo)題。

標(biāo)題需要加粗，不同層級(jí)的標(biāo)題均需要加粗，UI設(shè)計(jì)師需定義清楚不同標(biāo)題的字體大小并形成規(guī)范。

（6）鏈接新窗口規(guī)范

用于規(guī)范頁(yè)面鏈接是采用新窗口打開還是本窗口打開。

• 本窗口打開 查詢結(jié)果、上下翻頁(yè)、內(nèi)容保存、詳情頁(yè)面等操作在本窗口打開；
• 新窗口打開 圖片預(yù)覽頁(yè)面、視頻預(yù)覽采用新窗口打開；
• 關(guān)閉預(yù)覽即可同時(shí)關(guān)閉該窗口。

（7）頁(yè)面圖片信息規(guī)范?

用于規(guī)范頁(yè)面圖片信息顯示是否帶有alt、title值、BLANK鏈接。
目前后臺(tái)圖片分為：按鈕圖片、內(nèi)容型圖片。

按鈕圖片 ：

• Alt：交互使用的按鈕圖片（不帶文字）：如編輯、添加、警告等，圖片ALT必須為交互操作的名稱；
• Title：按鈕圖片不增加Title值。

內(nèi)容圖片：

• Alt：服務(wù)器中保存該圖片，在圖片無(wú)法顯示的時(shí)候可顯示代替圖片（默認(rèn)圖片）；各詳情頁(yè)面中該圖片預(yù)覽框中顯示替代圖片；各列表的圖片預(yù)覽框中不顯示替代圖片。
• Title：鼠標(biāo)過(guò)去顯示的文字后臺(tái)各詳情頁(yè)面指針指向該圖片時(shí)顯示文字；后臺(tái)各列表頁(yè)面指針指向該圖片時(shí)顯示文字。
• BLANK鏈接：后臺(tái)各詳情頁(yè)面點(diǎn)擊該圖片無(wú)效，不激活BLAN鏈接；后臺(tái)各列表頁(yè)面點(diǎn)擊列表中的圖片則在新窗口打開商品詳情頁(yè)面。

（8）列表排序

列表現(xiàn)實(shí)順序，后臺(tái)管理產(chǎn)品不同于2C產(chǎn)品的列表需要個(gè)性化推薦，后臺(tái)產(chǎn)品的排序多數(shù)按照某個(gè)時(shí)間的順序或者倒序進(jìn)行排列。當(dāng)然也不排除需要有其他排序條件，例如有特殊說(shuō)明的數(shù)據(jù)需要置頂?shù)取?/p>

4. 信息交互規(guī)范

（1）預(yù)先信息提示?

所有交互都應(yīng)該提供較多的預(yù)先信息提示讓用戶知道該怎么做，做的后果什么，可填寫什么。

大體分為內(nèi)容提交類、謹(jǐn)慎類操作、差異化規(guī)則。

• 內(nèi)容提交類：每個(gè)輸入項(xiàng)、條件選選項(xiàng)（包括時(shí)間選擇）均需要給出提示信息。該提示信息可放置在輸入框內(nèi)或者控件尾部（如密碼要多少多少位。搜索框提示用戶輸入什么內(nèi)容等。）
• 謹(jǐn)慎類操作：針對(duì)不可修改、重要操作選擇等操作屬于謹(jǐn)慎類操作，均需給出提示信息。如審核是否通過(guò)操作、退款申請(qǐng)操作、價(jià)格輸入等。
• 差異化規(guī)則：如果某一項(xiàng)操作與用戶操作習(xí)慣相悖需要給出提示信息，比如渠道想添加某個(gè)商品但是該商品的供應(yīng)商資料不完善沒(méi)通過(guò)審核，需要提給出提出和幫助鏈接。

（2）操作信息提示?

發(fā)生任何操作時(shí)都需要進(jìn)行信息提示，不管成功與失敗，比如：操作提交，數(shù)據(jù)輸入。分為三大類：確認(rèn)提示、錯(cuò)誤提示、讀取提示、及時(shí)提示、提交后提示。

• 確認(rèn)提示 ：修改設(shè)置、刪除數(shù)據(jù)等操作時(shí)需要彈出提示框，用戶需要選擇后方可執(zhí)行，比如：品控審核某商品點(diǎn)擊通過(guò)按鈕之后，彈出提示框品控人員需選擇是或否，方可完成操作。
• 讀取提示 ：涉及到大量信息讀取緩慢的時(shí)候應(yīng)該進(jìn)行提示，比如：進(jìn)入后臺(tái)查看商品列表時(shí)，由于網(wǎng)絡(luò)、數(shù)據(jù)量大等原導(dǎo)致載入緩慢，應(yīng)該顯示讀取提示信息，以避免用戶過(guò)度重復(fù)點(diǎn)擊操作。
• 錯(cuò)誤提示：當(dāng)用戶的操作不符合規(guī)則、輸入數(shù)據(jù)不符合規(guī)則需要給出操作提示，比如：輸入數(shù)值不符系統(tǒng)規(guī)定，則進(jìn)行提示。錯(cuò)誤提示分為：即時(shí)提示、提交后提示。
• 即時(shí)提示：需手動(dòng)輸入（或選擇的項(xiàng)目）可以進(jìn)行即時(shí)提示，當(dāng)輸入焦點(diǎn)移除之后不管輸入框內(nèi)是否有內(nèi)容即可進(jìn)行判斷如果有誤即顯示提示，比如：在添加商品過(guò)程中輸入商品價(jià)格，價(jià)格如果超過(guò)系統(tǒng)設(shè)定當(dāng)輸入焦點(diǎn)移除之后則進(jìn)行判斷并進(jìn)行錯(cuò)誤提示。注：上線時(shí)間不做判斷當(dāng)選擇完下線時(shí)間之后即可判斷如有錯(cuò)即可進(jìn)行提示，服務(wù)開始結(jié)束時(shí)間也可如此。 可及時(shí)判斷的項(xiàng)目包括：輸入框、日期選擇。
• 提交后提示：對(duì)于未作任何輸入操作和選擇的項(xiàng)目不做及時(shí)判斷，只能當(dāng)提交表單之后才做判斷并進(jìn)行錯(cuò)誤提示。比如：商品是否可退未必選，但是沒(méi)有系統(tǒng)默認(rèn)選項(xiàng)，操作人員未做選擇點(diǎn)擊了提交定稿按鈕，這時(shí)才會(huì)顯示是否可退的錯(cuò)誤提示信息。對(duì)于提交后判斷的項(xiàng)目包括：圖片是否上傳、單選/多選、下來(lái)菜單選擇。

（3）結(jié)果信息提示?

當(dāng)成功完成某一操作之后需要顯示反饋的結(jié)果信息提示，比如：查詢商品，未查詢到與條件匹配的商品則需要顯示信息提示。

提示分為：保存結(jié)果提示、查詢結(jié)果提示、添加結(jié)果提示。

• 保存結(jié)果提示，?當(dāng)進(jìn)行商品添加/修改此類涉及到數(shù)據(jù)保存的操作，不管是否成功均需給出提示。
• 查詢結(jié)果提示?，任何信息列表、查詢結(jié)果，當(dāng)對(duì)應(yīng)信息結(jié)果的時(shí)候需要給出有無(wú)結(jié)果狀態(tài)提示，不得使用空白信息。
• 添加結(jié)果提示， 當(dāng)涉及到填寫評(píng)審未通過(guò)原因這類的內(nèi)容添加操作。保存之后可直接顯示結(jié)果頁(yè)面。

5. 交互組件

頁(yè)面布局：

• 后臺(tái)管理產(chǎn)品多數(shù)采用全屏布局并設(shè)計(jì)不同尺寸的適配頁(yè)面；
• 多數(shù)采用T型布局，頂部模塊導(dǎo)航+側(cè)邊欄模塊菜單導(dǎo)航+內(nèi)容頁(yè)簽；
• 支持全局分類搜素。

導(dǎo)航：

• 頂部導(dǎo)航：頂部導(dǎo)航一般是按照業(yè)務(wù)模塊劃分，例如：OA子系統(tǒng)、交易系統(tǒng)、監(jiān)測(cè)預(yù)警、統(tǒng)計(jì)報(bào)表等；
• 側(cè)邊菜單欄：業(yè)務(wù)模塊下的子菜單。一般為兩級(jí)菜單，超過(guò)兩級(jí)菜單當(dāng)考慮在內(nèi)容頁(yè)增加子導(dǎo)航（例如：阿里云管理模塊）。注：這些都不是絕對(duì)，可根據(jù)具體情況進(jìn)行設(shè)計(jì)；
• 內(nèi)容頁(yè)簽欄：需設(shè)計(jì)關(guān)閉全部頁(yè)簽、關(guān)閉其他全部頁(yè)簽（注：這是多頁(yè)簽布局最容易遺漏的點(diǎn)）；
• 面包屑導(dǎo)航：后臺(tái)產(chǎn)品層級(jí)沒(méi)那么深，同時(shí)采用多頁(yè)簽設(shè)計(jì)之后面包屑導(dǎo)航的方式用的就不是很多。面包屑導(dǎo)航多數(shù)時(shí)應(yīng)用再層級(jí)較深的產(chǎn)品頁(yè)面，C端WEB產(chǎn)品用的較多；
• tab標(biāo)簽：當(dāng)詳情頁(yè)內(nèi)容過(guò)多且多類信息時(shí)需要用TAB導(dǎo)航；
• 步驟導(dǎo)航：例如企業(yè)注冊(cè)時(shí)因?yàn)槠髽I(yè)需要填報(bào)的信息過(guò)多，需要分類分步驟填報(bào)。

基礎(chǔ)組件：

• 搜索：關(guān)鍵字模糊匹配搜索；
• 加載：容易漏掉局部加載的情況；
• 按鈕分為三大類：一類是各頁(yè)面中的功能操作按鈕，比如確定、取消按鈕；一類是數(shù)據(jù)表格下方的翻頁(yè)按鈕；一類是文字按鈕：后臺(tái)產(chǎn)品中文字按鈕多應(yīng)用與列表操作欄；內(nèi)容詳情頁(yè)中的鏈接；文字按鈕多為藍(lán)色鏈接色；
• 功能操作按鈕 ：UI設(shè)計(jì)時(shí)容易漏掉不可點(diǎn)擊狀態(tài)、選中狀態(tài)、鼠標(biāo)懸停狀態(tài)、默認(rèn)狀態(tài)；功能按鈕分為主按鈕和次按鈕，需以顏色加以區(qū)分；
• ?文本：同一頁(yè)面內(nèi)單行文本輸入框長(zhǎng)寬尺寸必須統(tǒng)一，比如商品添加頁(yè)面中的商品原價(jià)、商品現(xiàn)價(jià)兩個(gè)輸入框的尺寸就必須要統(tǒng)一；多行文本輸入框長(zhǎng)寬尺寸可根據(jù)允許最大輸入字符數(shù)來(lái)做決定。比如商品添加中的商品長(zhǎng)標(biāo)題輸入框；所有頁(yè)面內(nèi)單行與多行文本輸入框均有邊框?;所有頁(yè)面內(nèi)輸入框中所輸入的字符屬性必須統(tǒng)一（字體，顏色，字號(hào)）?;所有頁(yè)面內(nèi)輸入框的常見狀態(tài):默認(rèn)狀態(tài)，獲取焦點(diǎn)，禁用狀態(tài)，輸入正確，輸入錯(cuò)誤;

提示組件類：

• web頁(yè)面提供的功能中，很多情況需要系統(tǒng)發(fā)送一些必要的提示信息到頁(yè)面顯示給用戶;
• 浮層展現(xiàn)在頁(yè)面的中間位置聚焦用戶的視覺，需要對(duì)浮層外的區(qū)域進(jìn)行暗顯處理。
• 這類浮層有三種結(jié)構(gòu)：短暫提示（淡入淡出）、有后續(xù)操作（無(wú)原因說(shuō)明）、有后續(xù)操作（有原因說(shuō)明）
• 這些信息的分類有： 警告信息 、禁止信息、 操作執(zhí)行成功信息、 操作執(zhí)行失敗信息、 錯(cuò)誤信息 、幫助信息、 提示信息

數(shù)據(jù)展示類：

表格、圖表、手風(fēng)琴、列表、餅狀圖、環(huán)形圖、扇形圖、折線圖、柱狀圖、K線圖

表單組件類：

單選框、復(fù)選框、滑動(dòng)開關(guān)、輸入校驗(yàn)規(guī)則、文件上傳、圖片上傳、圖片查看、日期選擇器、級(jí)聯(lián)選擇器等

特殊組件：

根據(jù)當(dāng)前產(chǎn)品業(yè)務(wù)的需要而設(shè)計(jì)出的一些特殊類型的組件

以上交互組件均來(lái)自于曾經(jīng)的案例：https://r0aglk.axshare.com

HOW MUCH

制定一套完整的交互規(guī)范是需要持續(xù)不斷的優(yōu)化，在這個(gè)過(guò)程中肯定是需要花費(fèi)一定的人力以及時(shí)間，不過(guò)相比于整個(gè)產(chǎn)品的設(shè)計(jì)研發(fā)，這些人力以及時(shí)間的投入是有必要的。

知名產(chǎn)品的設(shè)計(jì)規(guī)范

國(guó)外

1. Human Interface Guildeline for iOS —— Apple（蘋果）

官網(wǎng)：Design – Apple Developer

2. Material Design —— Google（谷歌）

官網(wǎng)：Introduction – Material Design

中文翻譯：Material Design – Material Design 中文版

Material Components

官網(wǎng)：https://material.io/components

3. Fluent Design System —— Microsoft（微軟）

官網(wǎng)：Fluent Design System

Microsoft Design （包括Fluent Design 和 Inclusive Design等）

官網(wǎng)：Microsoft Design

4. Facebook Design —— Facebook（臉書）

官網(wǎng)：Facebook Design — What’s on our mind?

國(guó)內(nèi)產(chǎn)品

5. Ant Design —— 螞蟻金服

官網(wǎng)：A UI Design Language

Ant Motion —— 螞蟻金服

官網(wǎng)：Ant Motion – 一個(gè) React 的動(dòng)效設(shè)計(jì)解決方案

6. Ant Design Mobile —— 支付寶移動(dòng)端組件庫(kù)

官網(wǎng)：A Mobile Design Specification

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

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