小伙伴們畫好視覺稿后，是不是頁面的交互/視覺規(guī)約經(jīng)常丟三落四，常常在設(shè)計宣講時被開發(fā)測試提問？自己表面鎮(zhèn)定，內(nèi)心慌的一筆：這個...我沒想到，那個...我沒想到...

要想在宣講時能夠從容應(yīng)對各種問題，就需要在設(shè)計稿完成后，把設(shè)計規(guī)約提前想好，那么設(shè)計規(guī)約要從哪些方面寫起呢？往往B端產(chǎn)品的頁面更加復(fù)雜，要補充的交互規(guī)約更多，小Zi就從實際工作中總結(jié)一些，供大家參考～

先來看個列子：

頁面

交互規(guī)約如下

 

一個頁面，交互和標注規(guī)則很長很長，很多同學(xué)反饋說不知道交互規(guī)約從何寫起，看了上面的列子，大概從以下幾個方面來書寫規(guī)約：

大方面我習(xí)慣于分成【整體】和【具體內(nèi)容】來寫。

整體

一、頁面自適應(yīng)規(guī)則

首先從整體來考慮，首先要考慮頁面是如何布局的，是自適應(yīng)？還是定寬？常用的網(wǎng)頁布局有：靜態(tài)布局、百分比布局、響應(yīng)式布局；頁面的整體布局方式，也決定了頁面具體內(nèi)容規(guī)約的撰寫；

參考文章《3種常用網(wǎng)頁布局與設(shè)計注意點》：https://www.zcool.com.cn/article/ZMTIwMjYxNg==.html

二、滾動條/滾動區(qū)域

1.頁面整體滾動區(qū)域

滾動區(qū)域是從哪里開始？是頁面級滾動嗎？

2.滾動條的樣式

需要給出滾動條的視覺和交互

舉例：

三、初始狀態(tài)/空狀態(tài)

頁面“加載”是做設(shè)計時常常忽視掉的，因為大家肯定是重點考慮有內(nèi)容的情況，并且頁面數(shù)據(jù)是否需要加載、加載時長等等需要根據(jù)前后端接口返回情況確定。

1.補充初始狀態(tài)的頁面；初始頁面是骨架圖還是保持不變，是否添加頁面引導(dǎo)？等都是需要考慮的；

2.補充頁面數(shù)據(jù)為空的樣式；

舉例：

四、加載樣式

頁面級加載的樣式是什么樣的？也需要補充到設(shè)計稿中；

舉例：

五、其他特殊情況的處理

比如“無權(quán)限查看”“記錄已被刪除”“已被拉黑”等等情況；

舉例：

具體內(nèi)容

當(dāng)補充完頁面整體上的規(guī)則之后，就可以著手補充頁面具體內(nèi)容的規(guī)約了。具體內(nèi)容的規(guī)則其實和整體規(guī)則從大方向是差不多的，也是那幾個方面，只是更細節(jié)：

一、考慮是否自適應(yīng)，自適應(yīng)的規(guī)則

如果頁面整體是定寬的，那么內(nèi)容也是定寬的，就不需要考慮內(nèi)容隨著頁面拉伸或縮小帶來的變化；如果頁面整體是自適應(yīng)的，那么具體模塊可以根據(jù)功能需要來設(shè)置哪些區(qū)域自適應(yīng)，自適應(yīng)的規(guī)則是什么；

舉例：

二、考慮內(nèi)容過多時的樣式

B端產(chǎn)品設(shè)計場景更復(fù)雜，內(nèi)容更加不可控，再加上電腦屏幕大小適配，頁面寬度可自由拉伸，種種因素都要我們更加仔細的考慮頁面的各種極限值情況，如何寫全面設(shè)計規(guī)約是難點。相信在設(shè)計評審會上開發(fā)和測試最常問到的一個問題也是：這里內(nèi)容過多怎么展示？雖然我們在設(shè)計的時候是按照80%的場景去考慮，但是剩下20%的極限場景也需要我們給出設(shè)計規(guī)則。

內(nèi)容過多，具體劃分還可以分成以下幾類：文字過多、選項過多、彈窗內(nèi)容過多、按鈕/標簽過多、表格內(nèi)容過多、功能過多等等情況，每種情況下有哪些解決方式呢，可以參考文章《B端交互設(shè)計之內(nèi)容太多怎么辦》：https://www.zcool.com.cn/article/ZMTE5NDAzNg==.html

舉例：

三、考慮極限情況下的提示/反饋

用戶反饋，頁面中肯定不少，我們畫頁面時也會畫出大部分提示，但是缺少提示/反饋依然是設(shè)計師常忽略的內(nèi)容，主要是提示的場景非常非常的多，而且有很多細分情況：

1.數(shù)據(jù)處理慢的提示

問題舉例:操作的數(shù)據(jù)過多時，后臺數(shù)據(jù)處理慢是否有提示？

2.操作后的提示

成功、失敗、進行中等，還有部分成功，部分失敗的情況

問題舉例:啟用失敗時如何提示？

3.無權(quán)限、禁用等的提示

問題舉例:項目列表-階段沒有權(quán)限時，需要添加tips提示；

4.缺少二次確認提示

問題舉例:新建頁面點擊取消是否需要二次確認提示?

四、考慮校驗的時機和樣式

1.校驗的時機：是失焦后還是提交按鈕時，還是實時的

問題舉例:表單的必填校驗，是失焦實時校驗，還是在提交時校驗？

 “實時校驗”是在用戶瀏覽表單時實時檢查用戶輸入的有效性，而不是在用戶提交表單時一次性檢查全部輸入：

驗證消息顯示在靠近輸入的區(qū)域，并一起顯示；

2.校驗的樣式：是在下方出提示，還是全局提示，還是什么的；

舉例：

五、考慮是否缺少滾動條的樣式

不僅要考慮頁面整體的滾動區(qū)域，有些模塊也是單獨需要滾動的；

滾動區(qū)域是哪里？包不包括表頭？標題？有沒有內(nèi)容需要鎖定？滾動條的樣式？這些問題都要給出規(guī)則。

問題舉例:信息內(nèi)容過多時，容器內(nèi)展示不下怎么辦？--答：展示不下時容器內(nèi)出現(xiàn)滾動條，滾動區(qū)域是整個內(nèi)容區(qū)；

六、數(shù)字方面的問題

1.數(shù)字輸入超長的顯示

問題舉例：極限數(shù)字如何顯示，比如篩選結(jié)果超過三位數(shù)：999+

2.數(shù)值是0時，是否有特殊的規(guī)則

問題舉例：數(shù)值為0時，是否顯示此模塊？

3.是否有輸入限制，比如，限制正整數(shù)、小數(shù)，小數(shù)精確到幾位等等；

七、點擊熱區(qū)的范圍

我們一般默認熱區(qū)就是觸發(fā)控件的區(qū)域，但是有時可能視覺上圖標需要小一點的，但是熱區(qū)需要更大一點，就要特殊標注出來。總之，方便用戶操作為上。

舉例

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)