1.設(shè)計(jì)原則
設(shè)計(jì)原則主要是說明公用原則、概念為主，幫助設(shè)計(jì)師與前端工程師更了解規(guī)范的基礎(chǔ)設(shè)計(jì)規(guī)則，比如間距、對齊等狀態(tài)，在什么時(shí)候使用什么方式完成頁面設(shè)計(jì)或者交互方式，都需要規(guī)范的使用者去深刻了解才行，也算是設(shè)計(jì)規(guī)范的入門概念。
2.原則介紹
2.1 間距
(1)說明：間距是以物件關(guān)聯(lián)性為依據(jù)，關(guān)聯(lián)性高，則應(yīng)該越相近，進(jìn)而形成為一個(gè)群組，更直覺傳遞給用戶了解，對于頁面的結(jié)構(gòu)、層次都應(yīng)該由大至小合理安排，表現(xiàn)主次或功能性不同的概念。
(2)基礎(chǔ)縱向 / 橫向間距：所有間距都以 5px 為一小單位，超越 [大間距] 則以 5 的倍數(shù)乘之，示例如圖 (一)，常用間距尺寸分為以下四種：
[大間距]：為 2 單位，20px，適用于區(qū)塊分區(qū)、大型功能模塊分區(qū)、彈窗上下左右邊距；
[中等間距]：為 3 單位，15px，適用于條列、中型模塊 (如卡片)；
[小間距]：為 2 單位，8px (小型按鈕左右間距) & 10px，適用于組件一般邊距(輸入框與輸入框)、表格左右邊距；
[迷你間距]：為 1 單位，5px，適用于組合組件間距、標(biāo)題與下底線、圖標(biāo)與文字按鈕間距；
(3)模塊間距定義：大模塊、中模塊、小模塊與組件四種，以下為多種模塊釋義與組合示例。
2.2 組件對齊
(1)說明：對齊與親密性原則(間距) 可以使用戶將不同元素形成一個(gè)團(tuán)體，主要分為左對齊、右對齊、置中對齊，元素依據(jù)基線(隱形線)對齊，根據(jù)業(yè)務(wù)場景與組件屬性，選定對齊方式；如表格上方左邊的按鈕是向左對齊，上方右邊的過濾操作是靠右對齊。
2.3 權(quán)重對比
(1)說明：對比是用戶識(shí)別權(quán)重的一個(gè)重要指標(biāo)，在企業(yè)級產(chǎn)品當(dāng)中，基于規(guī)范很難使用大小凸顯權(quán)重；對比規(guī)范依據(jù)操作順序與操作流程會(huì)有不同，以下列出使用場景。
(2)主次關(guān)系對比：
2.4 重復(fù)元素
(1)說明：相同元素于頁面中不斷重復(fù)，相同的操作可有效降低用戶學(xué)習(xí)成本，同時(shí)也能形成彼此間關(guān)聯(lián)性。
(2)重復(fù)元素：重復(fù)元素可定義為某群組聚合，在頁面上重復(fù)出現(xiàn)并按照等距排列，如卡片式列表、儀表盤區(qū)塊。
2.4 直接編輯
(1)說明：如 Alan Cooper 所述：需要在哪里輸出，就要允許在哪里輸入，系統(tǒng)會(huì)提供線索暗示用戶實(shí)現(xiàn)編輯操作，秉持著此原則，用戶只需要”單擊編輯”即可進(jìn)入編輯狀態(tài)。
(2)頁面內(nèi)容編輯：當(dāng)“易讀性”遠(yuǎn)比”易編輯性”重要時(shí)，可以使用單擊編輯。
(3)拖放編輯：利用拖放功能時(shí)，需要給用戶強(qiáng)烈提示該區(qū)塊可以拖放，以增加藍(lán)色陰影制造浮起狀態(tài) (藍(lán)色為系統(tǒng)中默認(rèn)可編輯顏色)，鼠標(biāo) hover 時(shí)延遲 0.2 秒浮起，拖動(dòng)后必須提示用戶可拖入?yún)^(qū)域(增加藍(lán)色內(nèi)陰影表示該區(qū)可被編輯)。
狀態(tài) 1 : 鼠標(biāo) hover 時(shí)，可被拖放區(qū)域會(huì)產(chǎn)生提示該區(qū)域可被拖曳；
狀態(tài) 2 : 開始拖放動(dòng)作時(shí)，原區(qū)域會(huì)以虛線顯示空值，可被關(guān)聯(lián)區(qū)域則顯示內(nèi)陰影顯示該區(qū)可被拖放；如鼠標(biāo)松開，該區(qū)塊會(huì)被吸回原區(qū)域；
狀態(tài) 3 : 該區(qū)塊顯示可被關(guān)聯(lián)區(qū)域，當(dāng)用戶按住鼠標(biāo)時(shí)，立即產(chǎn)生該提示
狀態(tài) 4 : 當(dāng)拖入可被關(guān)聯(lián)區(qū)域時(shí)，會(huì)精確至所接觸的區(qū)塊，即將被作用區(qū)塊會(huì)有藍(lán)色虛線顯示該區(qū)正與鼠標(biāo)拖拽的區(qū)塊產(chǎn)生接觸。
2.5 覆蓋彈窗
(1)說明：覆蓋層能夠解決不彈至其他頁面的問題，不打斷用戶心流 (Flow)，幫助用戶能夠在當(dāng)前頁面完成編輯，減少用戶回憶負(fù)擔(dān)；如果造成用戶反覆跳轉(zhuǎn)，會(huì)導(dǎo)致用戶無法記住過多資訊也無法感知編輯成果，也違背即時(shí)反饋之原則。
(2)彈窗覆蓋層尺寸：本公司產(chǎn)品，覆蓋層包含四種尺寸，480 px, 720px, 960px 與全屏幕，適用時(shí)機(jī)按照示例使用。
小型：480 px, 適用無任何操作的消息提示，簡易表單填寫，內(nèi)容不超過單個(gè)中型區(qū)塊；
中型：720 px, 適用兩個(gè)以上之中型模塊，內(nèi)容有多種復(fù)雜操作；
大型：960 px, 適用兩個(gè)以上之中型模塊，內(nèi)容有多種復(fù)雜操作，且內(nèi)容需要較大空間，則可考慮使用此尺寸；
(3)一般覆蓋彈窗：消息提示：只適用 480px, 用于消息提示、確認(rèn)消息、提交內(nèi)容。
(4)小型覆蓋層：只適用 480px, 適用于消息提示、確認(rèn)消息、提交內(nèi)容。
(5)中型、大型覆蓋層：適用 720px, 960px, 用于表格列操作、大量表單填寫或多個(gè)中型區(qū)塊組成之內(nèi)容。
(6)全屏幕覆蓋層：寬度占滿屏幕, 覆蓋底部資訊，遮蓋面積不包含導(dǎo)航欄，使用場景為需跳脫當(dāng)前頁面資訊，如 Newten model edit 搜尋功能；或是需要大量編輯大區(qū)塊的場景。
(7)全屏幕覆蓋層：不適用于彈窗并超過三步，用戶不適宜于彈窗過長時(shí)間的操作，操作條如超過四步，適合切換頁面操作任務(wù)。
(8)全屏幕覆蓋層：適用于設(shè)定類型內(nèi)容，如全系統(tǒng)設(shè)置管理，允許有多 tab 設(shè)定。
2.6 過渡效果
(1)說明：過渡效果能夠適用各種情境，以動(dòng)態(tài)變化的方式加強(qiáng)界面與用戶之間的溝通，如改變位置、顏色改、大小、形狀等。
(2)折疊窗口：在用戶需要于表格列查看詳細(xì)內(nèi)容時(shí)，需于列表提供下拉按鈕，點(diǎn)擊下拉按鈕，可展開收合折疊窗口。折疊窗口內(nèi)容適合瀏覽資訊之用，不可置入過多操作，避免用戶找尋不到功能，只建議置入進(jìn)階功能與過濾功能。
(3)對象呼出：點(diǎn)擊頁面中某一操作，呼出一個(gè)新對象，如彈窗 (可參照覆蓋彈窗介紹)；刪除某項(xiàng)重要信息同樣也需要彈出消息確認(rèn)彈窗；操作成功與失敗也需要呼出通知窗告知用戶結(jié)果。
(4)確認(rèn)彈窗：提示用戶為重要操作，需二次確認(rèn)該操作( 使用最小尺寸480px彈窗 )。
(5)通知提示：操作成功、失敗等顯示全局的提醒消息，無須用戶操作取消，該控件于 3 秒后自動(dòng)消失。
(6)Loading 過渡：如遇到過渡畫面與動(dòng)作需要加載時(shí)間，需要使用公司 logo 當(dāng)作動(dòng)畫圖標(biāo)，并上下左右置中，尺寸為 230 x 210 之 gif 動(dòng)畫；底層全覆蓋 75% 的白色底 (如下圖所示) 。
2.7 實(shí)時(shí)反應(yīng)
(1)說明：當(dāng)用戶操作結(jié)束時(shí)，系統(tǒng)需給出對應(yīng)反饋，當(dāng)重要性越高，反饋級量級越高、重要性越高；如果反饋。
(2)查詢功能：自動(dòng)完成：當(dāng)用戶搜尋某字或日期時(shí)，會(huì)隨著輸入的關(guān)鍵字或數(shù)字自動(dòng)匹配，輸入的單字越多，匹配越精確。
(3)反饋模式：當(dāng)用戶操作某項(xiàng)動(dòng)作時(shí)，系統(tǒng)會(huì)立即顯示反饋給用戶，表示系統(tǒng)已接收到用戶的操作或輸入。
(4)反饋模式(按鈕)：當(dāng)用戶遞交某項(xiàng)任務(wù)時(shí)，由于上傳任務(wù)或加載數(shù)據(jù)需要反應(yīng)時(shí)間，且時(shí)間不需要加載進(jìn)度條 (可視為簡化版本)，當(dāng)下觸發(fā)的按鈕會(huì)顯示載入圖標(biāo)。
(5)反饋模式(過渡加載)：當(dāng)用戶遞交某項(xiàng)任務(wù)或跳轉(zhuǎn)頁面，由于跳轉(zhuǎn)目的頁面需要加載大量數(shù)據(jù)或連接遠(yuǎn)端數(shù)據(jù)時(shí)，需要用戶等待，即于頁面正中呈現(xiàn)加載圖標(biāo)告知用戶需要等待。
(6)反饋模式(進(jìn)度加載)：當(dāng)用戶遞交某項(xiàng)任務(wù)時(shí)，由于上傳任務(wù)或加載數(shù)據(jù)需要反應(yīng)時(shí)間，且時(shí)間不需要加載進(jìn)度條 (可視為簡化版本)，當(dāng)下觸發(fā)的按鈕會(huì)顯示載入圖標(biāo)。
2.7 有效提示
(1)說明：當(dāng)用戶進(jìn)行重要操作與錯(cuò)誤操作時(shí)，必須提示用戶當(dāng)前發(fā)生操作后會(huì)產(chǎn)生的結(jié)果，避免用戶誤操作的發(fā)生，即時(shí)的提示與成果反饋能夠幫助用戶更加順利的進(jìn)行任務(wù)與操作。
(2)主動(dòng)提示：當(dāng)用戶進(jìn)入初始頁面進(jìn)行任務(wù)、開始某項(xiàng)任務(wù)、進(jìn)行下一步任務(wù)時(shí)，會(huì)需要系統(tǒng)主動(dòng)提示與邀請，提供用戶進(jìn)行下一步的指示 (包含位置、功能、手段等)，目的讓整個(gè)交互流程更加順暢的進(jìn)行下去。
提醒提示：建議提示用戶做出動(dòng)作修改或操作，用戶可略過邀請并關(guān)閉。
(3)初始提示：用戶進(jìn)入初始頁面時(shí)，會(huì)邀請并建議用戶進(jìn)行下一步操作之提示(圖1)；如進(jìn)入初始頁面，需要強(qiáng)烈提醒用戶操作，可進(jìn)入時(shí)自動(dòng)提示并要求用戶知曉后并關(guān)閉(圖2)
(4)被動(dòng)提示：用戶可經(jīng)由某些操作激活出提示，目的為節(jié)省空間，降低過多信息干擾。
(5)懸停提示：用戶鼠標(biāo)懸浮于按鈕時(shí)，系統(tǒng)能夠顯示該按鈕用途(有文字情形)或名稱(純圖標(biāo)按鈕)。
(6)點(diǎn)擊提示：用戶鼠標(biāo)懸浮于按鈕時(shí)，系統(tǒng)能夠顯示該的復(fù)合操作或確認(rèn)操作；輸入后關(guān)閉彈窗，重新登入、換模塊操作、按下取消時(shí)，則清除，否則再次顯示需要保持輸入資料，避免誤操作造成用戶困擾。
(7)防錯(cuò)提示：分為即時(shí)提示(圖1)，提交后提示(圖2)，二次確認(rèn)提示(圖3)。
(8)拖拽提示：以虛線外框提示用戶此區(qū)塊可拖拽，圖一為拖拽移動(dòng)，操作后原位置資料消除，圖二操作后原位置資料持續(xù)存在。
3.結(jié)語
透過設(shè)計(jì)原則的介紹可以了解，在靈活運(yùn)用設(shè)計(jì)規(guī)范之前，設(shè)計(jì)師必須先熟記這些基礎(chǔ)規(guī)則才能保有最基本的一致性，尤其在團(tuán)隊(duì)協(xié)作上更能體現(xiàn)在設(shè)計(jì)稿上；所以在真實(shí)運(yùn)用在產(chǎn)品設(shè)計(jì)上時(shí)，須嚴(yán)格要求設(shè)計(jì)師與前端工程師了解并熟記這些規(guī)則，否則會(huì)有大量的時(shí)間會(huì)花在修正上，不能發(fā)揮設(shè)計(jì)規(guī)范應(yīng)該有的效用。
