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