UI 設計師必備的一項基礎能力：規范能力。

為了避免重復造輪子，反復掉入同樣的陷阱，閱讀并熟知主流平臺的設計規范，是非常有幫助的。

本文內容主要介紹了iOS 、Android、Ant Design的相關規范，為的是不重復累贅描述同一個知識點，涉及到移動端和PC端，主要為了幫助基礎同學學習，適當地刪減了一些有難度的規范。

設計師在設計時并不一定要嚴格遵守，但對這些規范應有所了解，并融會貫通。

一、設計規范的價值 

1.確保界面的統一性(界面) 

通過設計規范的約束，保證產品的色彩使用、圖標圖形、空間、文字、頁面布局等內容保證嚴格的一致性。 

2.技術及品牌的延續 

規范能延續產品風格及特性，保證產品視覺及交互層面的統一，包括技術帶來的變革，增強用戶的認知性，不同程度得提升用戶體驗。

3.協同工作提高效率(設計) 

多人合作完成一個項目時，需要視覺規范。遵循設計規范，保證視覺統一、提高工作效率。

4.指導搭建框架及布局(開發) 

輔助技術層搭建框架及布局的規則更清晰明確，如按鈕、顏色、字體大小等，提高開發效率，確保應用軟件最終實現效果與視覺設計相符合。

二、視覺規范 

視覺設計規范是指對設計的具體技術要求，是設計工作的規則。包含了目標、功能、技術指標，以及限制條件等。

（1）視覺規范的作用 

① 視覺設計規范，是量化的設計指標，具有指導性、約束性。

視覺設計規范要確定?般可用性原則和審美常識下的避免犯錯的方法，以及一旦出現錯誤后的補救方案。規范的第一個目的是減少設計過程中出錯的次數，針對新手設計師、第三方團隊，可以很好地做到經驗傳遞，迅速了解上手。減少標注時間，提高前端開發質量。

② 視覺設計規范，是確定關鍵因素，要有有效性、復用性。

獲得該設計規范針對范圍內的關鍵點，包括設計方向和設計元素，以通過項目設計的過程，達到團隊成員的更加密切的配合效果。促進多人協作，解決視覺不統?現象。

(2）視覺常見類別 

① 品牌規范：塑造形象以及應用的規范。主要包含了標識的標準制圖，配色字體等。以及常用的搭配方式。

?個企業或者?個產品，都有相應的品牌視覺識別系統（VIS）。品牌視覺識別系統是視覺設計最好的參考基礎，既然是?種指導體系或者說是參考，那么也相應地會有品牌的規范。

② 平臺設計語言規范：平臺理念、遵循規范的好處、某種應用的生態。比如 Google 和 Apple 制定的規范。針對第三方的規范，主要旨在讓這些第三方的設計更兼容平臺應用。通常制定了大的方向和規則。并且會提供很多基礎的設計元素和插件。

③ 產品業務規范：側重在產品設計和實現層，內容清晰并且實用，標注詳盡，方便設計師們使用。更注重個性化的部分。

三、平臺設計語言規范-Material Design 

https://material.io/

Material Design 規范在于統一 Google 多種平臺下的一致性，代表 Google 全新的體驗。 包含豐富的色彩、空間的層次、流暢的動效、多樣的組件。

谷歌的想法是讓谷歌平臺上的開發者掌握這個新框架，從而讓所有應用就有統一的外觀，就像是蘋果向開發者提出的設計原則一樣。

1.Material Design 的作用 

從設計角度：建立共同的設計語言，將產品風格、品牌及交互形式統一起來。

從使用角度：提高產品認知度，提升品牌延續性及產品體驗的一致性。

2.Material Design 的特征 

（1）環境 

Material Design 是基于三維空間的設計語言。 包含光線、材質、陰影。在 Material 環境中，虛擬燈光照射整個場景。

（2）屬性

Material 有自身固定不變的外在特征和內在行為邏輯 ，理解這些固有的屬性有助于實際的設計項目。

? 立體性 

? 空間位置的唯一性 

? 不可穿透 

? 形狀可變化 

? 沿水平方向做變化 

? 不可彎曲 

? 能與其他材質對象合并 

? 分裂，再合并 

? 可沿任何軸上移動

（3）高度和投影

Material 借鑒了現實物理世界中的物質特性，并將其運用在虛擬三維空間中的 Material 元素上， 有利于幫助用戶理解信息層級，同時可以統一各應用之間的體驗。

投影提供了元素深度和運動方向的重要視覺線索；在運動中，投影提供了元素移動方向及高度變化。

四、平臺設計語言規范-iOS 平臺設計規范 

https://developer.apple.com/desig

iOS 設計規范逝之蘋果開發者官網上面的 iOS 人機交互指南（iOS Human Interface Guideline）。制作這個規范的目的是為了讓所有安裝到 iOS 系統的 App 都遵從某些特定的視覺特性、交互特性，以達到風格一致的使用體驗。另一層面，也是便于讓設計人員和開發人員能夠更好地理解 iOS 系統，更合理的運用系統提供的功能和接口，更高效地制作出 App。

1.iOS 平臺設計規范的三大基本設計主題 

（1）清晰 （Clarity）

在整個 iOS 系統中，每一種尺寸下的文本信息都應該是易讀的，圖標應該是精確易懂的，每一個裝飾應該是精巧適當的，而且更加需要注重功能驅動設計的原則。利用留白、色彩、字體、圖像和界面元素巧妙的突出重要內容并傳達其不同的交互性。

（2）遵從（Deference）

在簡潔美觀的界面中清晰流暢的動畫效果可以幫助用戶更容易理解內容并與之進行交互，而不會對用戶的操作產生干擾。內容全屏顯示時，半透明或者模糊處理的方式可以提示用戶更多的內容。減少使用邊框，漸變及陰影可以使界面輕 量化，突出顯示內容（內容優先）。

（3）深度（Depth）

不同的視覺層次和逼真生動的動畫效果 可以表達界面更深層次的內容，賦予了界面活力，使用戶對界面內容更容易理解。易于發現并易于觸摸的元素可以提升用戶體驗的愉悅感，用戶在操作功能時不至于迷失。當用戶在瀏覽內容時，流暢的轉場效果提供了一種縱深感。

2.iOS 平臺的設計原則 

為了最大限度地提高影響力和覆蓋面，在應用設計規范時應牢記以下原則：

（1）審美完整（Aesthetic Integrity）

審美完整性體現了 App 的外觀和行為與其功能的整合程度。例如，一個幫助用戶執行嚴肅任務的 App 可以通過微妙、不顯眼的圖形、標準控件和可預測的行為來保持他們的專注。

另一方面，沉浸式的 App，比如游戲 App等，就可以提供吸引人的外觀，傳遞樂趣和刺激感，同時鼓勵發現。

（2）一致性（Consistency）

系統提供的界面元素、眾所周知的圖標、標準的文本樣式和統一的術語來實現熟悉的標準和范例可以使得一個 App 的設計符合一致性。

（3）易用性（Direct Manipulation）

易用性指的是用戶可以理解屏幕的內容，用手勢、觸動屏幕等動作直接操作，并且，用戶通過直接操縱，可以看到他們的行動的直接的、可見的結果。

（4）反饋（Feedback）

反饋指對用戶的行動進行了確認，并且通過顯示行動結果以使用戶了解情況。iOS 系統的 App 要為用戶的每一項操作提供可感知的反饋。如：輕觸時會突出顯示交互元素；進度指示器會傳達長時間運行的項目的狀態；動畫和音效有助于闡明操作的結果。

（5）隱喻（Metaphors）

當一個 App 中的虛擬元素以及動作都是用戶對熟悉事物的隱喻的時候（包括現實世界和數字世界），用戶會學習的更快。比如，用戶移動視圖來查看更多內容；拖拽內容；切換開關、移動滑塊并且直接滾動來選取值；甚至可以像翻書或雜志一樣輕快的翻頁。

（6）用戶操控（User Control）

在整個 iOS 中，用戶是掌控者，而不是 App，App可以建議一個行動方案或者警示危險后果，但 App 不能替用戶做決策。

好的 App 可以在用戶授權和避免不必要的結果之間找到正確的平衡。

App 可以通過交互元素，確認、取消的提醒以使得用戶覺得自己在控制。

五、平臺設計語言規范-Ant Design平臺設計規范 

https://ant.design/index-cn

Ant Design服務于企業級產品的設計體系，常用于PC端設計規范，基于「自然」、「確定性」、「意義感」、「生長性」四大設計價值觀，通過模塊化解決方案，降低冗余的生產成本，讓設計者專注于更好的用戶體驗。

1.Ant Design平臺的設計原則 

（1）親密性

如果信息之間關聯性越高，它們之間的距離就應該越接近，也越像一個視覺單元；反之，則它們的距離就應該越遠，也越像多個視覺單元。親密性的根本目的是實現組織性，讓用戶對頁面結構和信息層次一目了然。

（2）對齊

正如「格式塔學派」中的連續律（Law of Continuity）所描述的，在知覺過程中人們往往傾向于使知覺對象的直線繼續成為直線，使曲線繼續成為曲線。在界面設計中，將元素進行對齊，既符合用戶的認知特性，也能引導視覺流向，讓用戶更流暢地接收信息。

（3）對比

對比是增加視覺效果最有效方法之一，同時也能在不同元素之間建立一種有組織的層次結構，讓用戶快速識別關鍵信息。

（4）重復

相同的元素在整個界面中不斷重復，不僅可以有效降低用戶的學習成本，也可以幫助用戶識別出這些元素之間的關聯性。重復元素可以是一條粗線、一種線框，某種相同的顏色、設計要素、設計風格，某種格式、空間關系等。

（5）直接了當

正如 Alan Cooper 所言：「需要在哪里輸出，就要允許在哪里輸入」。這就是直接操作的原理。

eg：不要為了編輯內容而打開另一個頁面，應該直接在上下文中實現編輯。

（6）足不出戶

能在這個頁面解決的問題，就不要去其它頁面解決，因為任何頁面刷新和跳轉都會引起變化盲視（Change Blindness），導致用戶心流（Flow）被打斷。頻繁的頁面刷新和跳轉，就像在看戲時，演員說完一行臺詞就安排一次謝幕一樣。

（7）簡化交互

根據費茨法則（Fitts's Law）所描述的，如果用戶鼠標移動距離越少、對象相對目標越大，那么用戶越容易操作。通過運用上下文工具（即：放在內容中的操作工具），使內容和操作融合，從而簡化交互。

（8）提供邀請

很多富交互模式（eg：「拖放」、「行內編輯」、「上下文工具」）都有一個共同問題，就是缺少易發現性。所以「提供邀請」是成功完成人機交互的關鍵所在。

邀請就是引導用戶進入下一個交互層次的提醒和暗示，通常包括意符（eg：實時的提示信息）和可供性，以表明在下一個界面可以做什么。當可供性中可感知的部分（Perceived Affordance）表現為意符時，人機交互的過程往往更加自然、順暢。

（9）巧用過渡

人腦灰質（Gray Matter）會對動態的事物（eg：移動、形變、色變等）保持敏感。在界面中，適當的加入一些過渡效果，能讓界面保持生動，同時也能增強用戶和界面的溝通。

• Adding: 新加入的信息元素應被告知如何使用，從頁面轉變的信息元素需被重新識別。
• Receding: 與當前頁無關的信息元素應采用適當方式移除。
• Normal: 指那些從轉場開始到結束都沒有發生變化的信息元素。

（10）即時反映

「提供邀請」的強大體現在 交互之前 給出反饋，解決易發現性問題；「巧用過渡」的有用體現在它能夠在 交互期間 為用戶提供視覺反饋；「即時反應」的重要性體現在 交互之后 立即給出反饋。

就像「牛頓第三定律」所描述作用力和反作用一樣，用戶進行了操作或者內部數據發生了變化，系統就應該立即有一個對應的反饋，同時輸入量級越大、重要性越高，那么反饋量級越大、重要性越高。

雖然反饋太多（準確的說，錯誤的反饋太多）是一個問題，但是反饋太少甚至沒有反饋的系統，則讓人感覺遲鈍和笨拙，用戶體驗更差。

寫在最后 

當然，這并不代表了解這些就能做出優秀的設計方案了，英文水平比較好的同學建議直接讀原文，直接從 Material Design 和 iOS 的官網進行規范學習，效果更佳。當然如果英文水平有限，網上也有很多譯版方便大家閱讀。

而關于Ant Design的設計規范，可以去官網查閱更多的詳細內容，但PC端的設計規范平臺還有很多，字節、騰訊等設計官網都有。

記得對于規范不需要死記硬背，練多了自然能夠記住。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司