一般規範來說，指的是有兩種。一種只是針對有含有介面設計內容的規範文件；另一種指的就是涵蓋程式碼和介面規範的內容。

前者我們稱為uikit，後者稱為設計庫。

如果你只是一個設計師，並不會任何程式碼方面的知識。你獨立設計uikit的內容。即，只有介面。完整的uikit

就如同下圖的樣子。

典型的高階專業UI規範文件模板下載[XD,Sketch]

典型的專業UI規範文件模板，如果您正在為寫規範而頭疼，這套模板不僅僅會告訴你如何寫規範，還會讓你的規範顯得非常高大上。

如果你一開始不會自己寫，完全可以對著成熟的設計規範模仿。唯一需要注意的是，你需要的元件應該不用這麼豐富，適當刪減內容效果更佳。

如果你對此感興趣：

一般提供

UIKit提供的介面元素可分為以下三種類型：

如果您是前端開發人員，或想要學習Web前端開發技術的小夥伴，您必須瞭解三個最流行的前端框架。

裡面也封裝著完整的UIKIT模組

angular官網：https://angularjs.org/

React 官網：https://facebook.github.io/react/

Vue官網：https://cn.vuejs.org/

規範更多考慮的是，如何快速協作，避免重複勞作的無用功。

不管你是處在公司，還是個人奮鬥，更多該考慮都是儘快找到屬於自己的節奏，一種完整的工作流，會令你的效率成倍提升，這也是建立設計規範的原因所在。

5分鐘快速瞭解UI設計規範

每位UI設計師，想必都有一套屬於自己的設計規範，今天我就來教大家在5分鐘快速建立一套自己的設計規範。

我今天講蘋果版本的（尺寸：750*1334），因為現在很多的設計師就做一套UI圖，安卓版本的基本就已經省略掉了，原因很簡單，是的沒錯，就是節約時間哈。

下面第一張圖是底部欄的設計規範，第二張圖是加圖示展示，底部欄高度為49px，在我以往的設計工作經驗中，常見的分為3種情況，3個圖示、4個圖示的、5個圖示的，不管是那種我們應該按照規範來，這樣前段在開發時就會比較方便，按照幾等分（n/375），底部的圖示我習慣用28*28px（尺寸：375*667，最後導兩倍的圖給前段開發），底部文字都用10px。

底部欄

接下來我們看第三張頂部欄的設計規範圖，頂部欄的高度一般為64px，標題文字我喜歡使用18px,不過還是要看自己的設計風格。

頂部欄

字號的大小使用也是非常的重要，之前我的一個客戶，希望我能夠把字型設計大些，他的原因是字號越大會體現一個企業的大氣感，其實這樣往往適得其反。

你們一般在進行設計時，會使用幾號字型呢？正文我最喜歡用的是14號、16號，我已經把我經常用的字號整理出來了，大家可以看下面的圖哦。

字號

字色

在設計時，我們有必要兩側留間距，常見的有14px、16px、24px，上下間距常用10px,在開始做UI圖的時候，最好確定好一個值，在後面設計其他頁面的時候，都可以用同一個值，保證自己設計的風格，不會讓人誤以為隨便留的。

兩側間距

模組上下間距

在畫圖示的時候，務必將圖示限制在正方形中並建立為元件，這樣既方便以後修改也方便開發。

輔助線

UI設計中我們看見的輔助線一般分為兩種：投影型、畫線，我個人認為投影型是非常實用的，看起來不會那麼死板，而且有一個好處，可以確定文案的位置，保證了設計的規範性，細節可以讓整體看起來更完美。

圖片常用的比例為1:1、2:1、4:3；影片常為16:9，這裡我講的是我平常經常會用著的尺寸，還有其他的情況就個人而定哦！

總結：我們在平常的設計中只要能夠把握這些設計的規範，對你所做的產品足夠了解，就能高效的設計好的作品啦，唯有堅持，方能不負所愛，加油！

樓主你好!

值得一提的是，不同的產品有不同的特點，所以有時需要和團隊商量好規範再動工，其實都是大同小異。

1.版面佈局

2.色彩搭配

3.字型字號

4.字間距行間距段間距

5.每個頁面突出一個重點

6.整個產品體系的統一性

7.易互動性，三步法原則

8.迭代一致性

9.提示頁面最低思維原理

給你一套全的進行參考吧！

支付寶的全套UI標準：http://antui.alipay.com/10.0.18/index.html

其它的，看看這個吧！