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

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

先來(lái)看個(gè)列子：

頁(yè)面

交互規(guī)約如下

 

一個(gè)頁(yè)面，交互和標(biāo)注規(guī)則很長(zhǎng)很長(zhǎng)，很多同學(xué)反饋說(shuō)不知道交互規(guī)約從何寫(xiě)起，看了上面的列子，大概從以下幾個(gè)方面來(lái)書(shū)寫(xiě)規(guī)約：

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

整體

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

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

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

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

1.頁(yè)面整體滾動(dòng)區(qū)域

滾動(dòng)區(qū)域是從哪里開(kāi)始？是頁(yè)面級(jí)滾動(dòng)嗎？

2.滾動(dòng)條的樣式

需要給出滾動(dòng)條的視覺(jué)和交互

舉例：

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

頁(yè)面“加載”是做設(shè)計(jì)時(shí)常常忽視掉的，因?yàn)榇蠹铱隙ㄊ侵攸c(diǎn)考慮有內(nèi)容的情況，并且頁(yè)面數(shù)據(jù)是否需要加載、加載時(shí)長(zhǎng)等等需要根據(jù)前后端接口返回情況確定。

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

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

舉例：

四、加載樣式

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

舉例：

五、其他特殊情況的處理

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

舉例：

具體內(nèi)容

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

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

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

舉例：

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

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

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

舉例：

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

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

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

問(wèn)題舉例:操作的數(shù)據(jù)過(guò)多時(shí)，后臺(tái)數(shù)據(jù)處理慢是否有提示？

2.操作后的提示

成功、失敗、進(jìn)行中等，還有部分成功，部分失敗的情況

問(wèn)題舉例:啟用失敗時(shí)如何提示？

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

問(wèn)題舉例:項(xiàng)目列表-階段沒(méi)有權(quán)限時(shí)，需要添加tips提示；

4.缺少二次確認(rèn)提示

問(wèn)題舉例:新建頁(yè)面點(diǎn)擊取消是否需要二次確認(rèn)提示?

四、考慮校驗(yàn)的時(shí)機(jī)和樣式

1.校驗(yàn)的時(shí)機(jī)：是失焦后還是提交按鈕時(shí)，還是實(shí)時(shí)的

問(wèn)題舉例:表單的必填校驗(yàn)，是失焦實(shí)時(shí)校驗(yàn)，還是在提交時(shí)校驗(yàn)？

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

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

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

舉例：

五、考慮是否缺少滾動(dòng)條的樣式

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

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

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

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

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

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

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

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

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

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

我們一般默認(rèn)熱區(qū)就是觸發(fā)控件的區(qū)域，但是有時(shí)可能視覺(jué)上圖標(biāo)需要小一點(diǎn)的，但是熱區(qū)需要更大一點(diǎn)，就要特殊標(biāo)注出來(lái)。總之，方便用戶操作為上。

舉例

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

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

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