如何建立適合自己產(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組件庫,所以有很多是參照他的