內容大綱

一、設計規範的重要性

二、認識介面設計規範

三、設計規範的構成

四、如何建立設計規範

五、彩蛋規範文件資源

✪ 設計規範的重要性 ✪

所謂無規矩不成方圓,規範和秩序存在我們生活中的方方面面,工業時代有企業制定出標準化的流水線使效率成倍提升,網際網路時代各大一線知名網際網路公司谷歌和蘋果也都有著自己的設計規範,大到平臺以及系統小到單個產品。做為網際網路設計師都知道好的規範可以提升效率、保持統一、提升精細度,那麼什麼樣的規範是好的設計規範呢?

產品不同階段規範的作用也有所區別,在產品初期規範的主要保障後續設計的高效和可擴充套件性,隨著產品的擴充套件以及人員的增加會在這個時候不僅要延續之前的高效和可擴充套件性,同時還要方便查閱,以及便於設計與設計設計與程式的之間交接減少重複勞動,還需要保持整個產品不同頁面的視覺語言統一性和控制元件元件及互動方式的一致性,大致可以總結為以下三點。

✪ 認識設計規範 ✪

“設計規範“並不陌生,網上也可以搜到很多設計規範,但是這些設計規範真的適合我所做的產品嗎?什麼樣的設計規範是好的設計規範呢?這裡先放一波比較知名的規範,熟知的有谷歌的Material Design、蘋果的Apple Developer、以及Ant Design、Element 等。。。。我習慣把這些規範分類為系統平臺級規範和產品業務設計規範

UI 設計規範總結

圖片(Material Design)

UI 設計規範總結

圖片(Apple Developer)

UI 設計規範總結

圖片(Ant Design)

tips:你是不是把那上面那些連結都開啟看了一遍了呢?想必機智的你已經看過上面的規範網站了,也對規範有了一定的瞭解。

✪ 設計規範的構成

回觀幾大一線網際網路公司的設計規範和視覺語言大致可分為設計原則和基本視覺元素和構成。

設計原則:表現產品傳遞出的特徵、氣質、風格,透過情緒版等方法論梳理出表現這種特徵、氣質、風格的視覺表現形式為了達到一致性所需要遵守的一種視覺表現形式。 一般設計原則包括介面佈局、對齊、對比、重複、親密、平衡。

基本視覺元素:基本視覺元素即組成介面所需要的元素,一般由線條、圖形、圖示、明暗、色彩、質感、空間等,也還有一些比較重要但經常被忽略的隱性元素例如對齊線、間距、留白等,各個元素表現方式不同所傳遞出的注目度也有所不同。

✪ 如何建立設計規範

拆解了設計規範的構成了解介面的構成的基本組成元素有哪些後可以更好的來幫助我們來構建設計規範。以原子設計原理五步走來構建規範,五步分別由原子——分子——元件——模組——模組。

UI 設計規範總結

1、定義基礎規範這裡可理解為定義原子主要包括文字字號字重、色彩色調、圖示層次形式等介面重最小構成單位,歸納介面中的資訊層級有秩序的提煉出來。

UI 設計規範總結

2、分子 由原子組合形成的簡單的介面元件例如按鈕(由文字加一個矩形),或文字框(由一個矩形和一個提示文字)

UI 設計規範總結

3、元件 介面中比較通用由原子和分子組成相對複雜的介面元素(例如導航欄、列表、卡片等)

4、模組 由原子、分子、元件進行組合排列形成的內容結構

5、頁面 將實際內容套件在特定的模版,頁面是模版的具體例項,最後是整體的頁面。

彩蛋來啦!!! 彩蛋來啦!!! 彩蛋來啦!!!

後臺回覆“規範”領取為你精心準備的各大平臺規範原始檔吧!!!

UI 設計規範總結

UI 設計規範總結