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

序言

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

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

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

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

以下是個人僅代表愚見：

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

WHY：目的及意義

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

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

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

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

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

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

舉幾個例子：

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

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

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

要想很好的操作自己的電腦，只有花費一定的時間去學(xué)習(xí)，還會因為不習(xí)慣操作方式抱怨不好用。

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

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

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

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

規(guī)范的意義：

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

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

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

WHO：誰來制定交互規(guī)范比較合適？

至少需要滿足以下條件：

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

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

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

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

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

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

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

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

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

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

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

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

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

1. 概述

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

2. 頂層框架

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

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

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

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

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

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

（1）新增

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

（2）修改?

當(dāng)進行單條或多條記錄的修改時：

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

（3）刪除?

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

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

（4）查詢

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

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

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

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

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

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

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

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

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

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

按鈕圖片 ：

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

內(nèi)容圖片：

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

（8）列表排序

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

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

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

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

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

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

（2）操作信息提示?

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

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

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

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

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

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

5. 交互組件

頁面布局：

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

導(dǎo)航：

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

基礎(chǔ)組件：

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

提示組件類：

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

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

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

表單組件類：

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

特殊組件：

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

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

HOW MUCH

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

知名產(chǎn)品的設(shè)計規(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?

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

5. Ant Design —— 螞蟻金服

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

Ant Motion —— 螞蟻金服

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

6. Ant Design Mobile —— 支付寶移動端組件庫

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

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

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