起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識如何建立適合自己產(chǎn)品的交互設(shè)計規(guī)范？
本文是作者總結(jié)了自己工作中的一次產(chǎn)品迭代，看看如何建立適合自己產(chǎn)品的交互設(shè)計規(guī)范。
我們公司目前在做的是一款服務(wù)于外貿(mào)企業(yè)的工具性網(wǎng)站，而前一段時間（大概是5月底到6月底）完成了產(chǎn)品的一次大型的迭代工作，這段時間閑了下來，于是便抽了點時間編寫了一套服務(wù)于這款產(chǎn)品的交互規(guī)范。
在這個過程中能總結(jié)出一些心得，在此分享給大家。（PS：本文最后會附上整理的Axure交互規(guī)范文件，可供大家參考）
建立規(guī)范的要素：
- 明確自己產(chǎn)品定位和目標 ；
- 規(guī)劃交互規(guī)范的內(nèi)容范圍；
- 化繁為簡，簡潔易懂。
一、明白自己產(chǎn)品定位和目標
我們的產(chǎn)品是定位于服務(wù)于外貿(mào)企業(yè)用戶的工具，主要目標是幫助客戶建立自己的外貿(mào)網(wǎng)站/尋找外貿(mào)客戶/客戶管理/外貿(mào)營銷，簡單來說就是建站-獲客-管客-營銷-轉(zhuǎn)化。
所以我們的產(chǎn)品中需要最多的就是控件就是輸入/搜索控件和各類表單圖表，而且在控件的設(shè)計上不能設(shè)計操作性太復(fù)雜的控件（千萬不要為了追求新奇炫酷而去設(shè)計比較少見的控件，否則不僅加大前端同學(xué)工作量，用戶也不一定用的明白），不然就違背了快速操作反應(yīng)的原則，在這里建議大家可以參考阿里的Ant design交互規(guī)范。
二、交互規(guī)范的內(nèi)容范圍
交互規(guī)范內(nèi)容包括什么？
不同的產(chǎn)品的交互規(guī)范范圍內(nèi)容不同，一般來說網(wǎng)頁端產(chǎn)品的相對移動端產(chǎn)品內(nèi)容更多，這是因為網(wǎng)頁端產(chǎn)品的頁面布局多樣，交互控件和方式更為復(fù)雜；To C網(wǎng)頁產(chǎn)品比To B網(wǎng)頁產(chǎn)品內(nèi)容更多，因為To B產(chǎn)品目標明確，更注重使用效率，不會采用過于復(fù)雜和新穎的頁面布局和交互方式。
而針對我們的產(chǎn)品，交互規(guī)范內(nèi)容總結(jié)主要包括以下幾個部分：
1. 設(shè)計規(guī)范說明
設(shè)計規(guī)范說明主要描述該設(shè)計規(guī)范的基本信息：
2. 設(shè)計更新記錄
因為交互規(guī)范是需要根據(jù)項目不斷完善更新的，所以會有很多迭代的記錄，及時記錄更新可以方便其他設(shè)計師、前端工程師知道我們更新了什么內(nèi)容，及時同步給整個團隊。
3. 設(shè)計規(guī)范主體
主要包括字體規(guī)范、色彩規(guī)范（這兩個建議和UI設(shè)計師共同制定）、頁面布局、工具、控件庫、圖表，在這里我的做法是先匯總出當(dāng)前產(chǎn)品版本所具有的所有規(guī)范內(nèi)容，再參照Ant design、Material Design、element等設(shè)計平臺。
部分已有的規(guī)范內(nèi)容進行升級再整理，同時根據(jù)使用場景和優(yōu)使用頻率，將控件分類和調(diào)整排序，這樣基本上交互規(guī)范的框架就可以建立起來。
最終我為我們產(chǎn)品確定的交互規(guī)范內(nèi)容展示如下：
三、化繁為簡，簡潔易懂
如果大家通過上述方法來進行設(shè)計規(guī)范整理，勢必會得到一份體量更加龐大的交互設(shè)計規(guī)范文件，這個時候，設(shè)計師更多的需要根據(jù)自己的經(jīng)驗來進行刪減（會合理刪減的設(shè)計師才是優(yōu)秀的設(shè)計師）。
哪些可以刪減？哪些不能刪減？
1. 可以刪減
舉例來說：下面兩個時間范圍篩選器，能達成的篩選目的和作用是一致的，但由于長度不一樣，上面的篩選器能適配的頁面場景更多，所以可以直接把下方的時間篩選器刪減。
2. 不可以刪減
舉例來說：下面兩個選擇器，兩個表面上目的看起來都是進行選擇項選擇，但右邊的選擇器帶有搜索框，適合選擇項數(shù)據(jù)龐大時的進行搜索選擇，左邊的適合選擇項數(shù)據(jù)量不大時進行直接選擇，所使用的場景并不相同，所以不能進行刪減。
好的交互規(guī)范不需要太多的文字說明，團隊成員直接看圖即可明白這個組件的交互方式（點擊前、點擊后、空數(shù)據(jù)、有數(shù)據(jù)、極限情況下等的交互樣式），當(dāng)然有些不好通過圖稿表達的信息也必須需要文字說明輔助，但相比文字而言，大家更喜歡看的肯定是圖片。
最后附上我自己整理的交互規(guī)范axure文件，以供大家參參考
鏈接：https://pan.baidu.com/s/19WuKY4nnE_HQqDT5ASlcKw? 密碼：y5wj
本文由 @李小先生 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自 Pixabay，基于 CC0 協(xié)議
文件下載后無法打開，可以給一個新鏈接嗎？
您好，文件下載后無法打開，可以給一個新鏈接嗎？
用Ant design做確實快速，樓主整理的還是很細心
很棒，期待下篇
狠全面~牛逼！??膜拜大佬~
敲厲害??
你好，你的第一個主色號和功能色最后一個，是同一個色號嗎？
怎么交互規(guī)范里面還有視覺的嗎，最好是區(qū)分一下，不然容易誤導(dǎo)企業(yè)，交互設(shè)計師=交互+UI，然后一個人干倆人的活，萬一產(chǎn)品能力不行，交互要干三個人的活…想想都覺得害怕
弄好了，謝謝
感謝分享，但你的這個文件，打開是空的，怎么回事，軟件版本問題嗎？ ??
方便的話可以加我微：ourige，交流一下～
是在龍席工作的同事嘛？我之前是這個項目的UI，你里面展示的東西是我之前設(shè)計的，方便加個好友嘛
我加你了
您好，我是“交互設(shè)計學(xué)堂”公眾號的小編，我想轉(zhuǎn)載您的這篇文章，請問可以給我們授權(quán)嗎？謝謝~
可以，但是請標好署名
厲害！ 學(xué)無止境，共勉之
可以請教你比較基礎(chǔ)的問題嗎
什么問題？
寫的太粗，不具備可操作性！
為了裝逼而寫就沒有任何意義，還浪費別人時間
哈哈，謝謝指點！以后會寫更加細致點！
挺好的，不過我覺得最難的還是能夠推動這件事落實下去，那需要很多人跟你配合????
是的，想法難就難在推動！
您好，為什么下載的打不開呀
你電腦里有沒有下載Axure啊
有下載呢，我下載后有名字，后綴是.rar的格式
解壓后是.rplib格式的，用瀏覽器打開是空的
當(dāng)然不是用瀏覽器打開，是要用axure軟件打開
請問一下，您有區(qū)分UI組件庫規(guī)范和交互規(guī)范么？因為我們團隊整理規(guī)范可能更多的是一些控件／組件的規(guī)范，而交互規(guī)范更專注于使用流程。不知道您是怎么看待UI和交互的規(guī)范呢
交互規(guī)范更多考慮的是產(chǎn)品的功能和使用場景，UI規(guī)范跟隨于交互規(guī)范讓產(chǎn)品保持高度一致性，有的公司會把這兩種文件一起輸出，有的則分開，但最終的目的是一種的就是提升設(shè)計師的工作效率和保持產(chǎn)品的一致性
提升效率很認同。只是覺得交互規(guī)范更多是關(guān)注流程（也就是場景），新場景出現(xiàn)就會有新的交互規(guī)則，不像UI規(guī)范那樣組件和控件基本是固定的。您覺得呢？
交互規(guī)范也是不斷更新修改的，UI規(guī)范也是，比如淘寶的視覺規(guī)范隨著產(chǎn)品形態(tài)的變化和流行風(fēng)格而變化的，就像去年淘寶開始使用漸變色，所以沒有什么是一成不變的！
我們公司也有一套針對當(dāng)前平臺產(chǎn)品的交互規(guī)范，而UI視覺規(guī)范是根據(jù)交互規(guī)范加入一些視覺元素指定的，從范圍來說，交互規(guī)范要更廣泛一些，應(yīng)用的場景包含但不限于當(dāng)前產(chǎn)品，有很多組件是有擴展性的。
其實web端，管理工具、后臺、ERP、OA等交互規(guī)范，和視覺規(guī)范差別不大。大公司要求演示所以做點擊事件，做跳轉(zhuǎn)，所以有組件肯定是更方便的。但是在移動端考慮的內(nèi)容就比較復(fù)雜了，要考慮平臺規(guī)范、手勢、然后最好要包含流程、交互文檔的標準等，情況復(fù)雜的多。具體在交互規(guī)范上來講，目前還沒有標準，我個人理解組件也只是其中一部分，最近正在研究整理這一塊，話比較多，忘見諒。最后喜歡我的文章可以關(guān)注我
嗯嗯～希望整理好之后可以分享一下哦
很棒，必須認真打賞
謝謝支持??
每個新產(chǎn)品，都會在Axure里添加一個插件頁面，就放這些東西。用的時候直接拿
謝謝作者的分享，學(xué)習(xí)了。
謝謝筆者，目前公司正在研究組件庫，及時雨。請問筆者這邊還有更多的組件網(wǎng)站參考嗎？還有筆者的1.0版本可以分享嗎？期待哦
1.0版本axure文件鏈接我已經(jīng)附在文章最下面了哦，其實組件參考網(wǎng)站大同小異，找到一個適合現(xiàn)在產(chǎn)品形態(tài)的就好，參考過多效果反而不好
有點像element ui風(fēng)格
是的，我們公司前段使用的就是element組件庫，所以有很多是參照他的