設計中會用到 UI 設計規範嗎？

12-14

我以前在某大公司工作時，有位牛人提供了一份軟體界面設計規範，震的我目瞪口呆。可惜那個時候小，覺得那東西沒用，所以沒有保存。

最近想改進公司的界面設計，首要就是制定公司的界面設計規範，在網上竟然沒搜到，問了周圍圈子的人，都說沒這個東西。

在智城和豬八戒掛出英雄帖，接單的都說可以可以給我們設計一個界面，但是，說到規範，都表露出茫然。

我的問題是，是因為國內UI設計還沒有規範到提供規範，還是我找到的人都還不夠專業？

ps,
我說的設計規範就是這個問題的東東：
http://www.zhihu.com/question/19760498

呵呵噠，設計過程中絕對會用到規範，特別是在一個UI teamwork的時候。之前去面試很多公司的ui，我上來就可以打包票說，你們這個ui是好幾個設計師做的吧。對方尷尬的說，是不是挺亂的。我就在心裡呵呵噠。

我之前一直是在創業公司做獨立設計師，說好聽點是獨立設計師，難聽點，就是唯一的設計師。創業型公司，UI UE你要全包。但是我還是很有追求的在每個版本改版之後，更新設計規範。我的設計規範沒有大公司那麼高大上，只包含了字體選用，配色運用，ui kit這些東西。我當時做這個設計規範，純粹只有兩個原因：
一，我要設計的界面太多了，而且產品迭代很快，來不及一個個界面標註重複性的東西，於是我就出一個字體運用規範，讓開發看一個文檔就好了。有個設計文檔，可以減少很多設計與開發之間的溝通，雖然我原來是左手ios 開發，右手android開發的UI小公舉，但即使是這樣，我也不想把時間浪費在重複的標註，沒有意義的「小公舉，你這個字體是多大，什麼顏色」這樣的問題上。後來給開發團隊引進了zeplin，安卓小夥伴持續用著，ios開發，一直看著我的sketch源文件，在我教會開發sketch後，我連字體規範都少寫了很多。

二，我把這些東西一個版本的整理迭代好了，哪天來一場說走就走的旅行，沒有交接成本，即使公司找不到設計師，開發哥哥直接用這個規範，就可以分分鐘上崗黨設計師了。直接甩這個規範的sketch源文件就可以了。

事實是，在一年之後，我很感謝一年來的我如此的機智，因為我確實來了一場老娘不幹了的裸辭，公司在很長時間也沒招到合適的設計師。再在就業的時候，很多公司對你的整理的設計規範興趣遠大於你作品興趣。我分析啊，主要他們可能他們心裡覺得，一個設計師撐起的一個公司，居然還有設計規範。呵呵噠，你們肯定也想看我做的渣規範系不系。

附我做的規範一部分。

純粹是為了節省空間，拍的這麼密集。嗯。因為程序員的屏幕大多都很小。。不像我們大設計師，23寸，27寸高清無碼大屏幕。心疼還要接渣顯示器的程序員三秒。。。

我一般就寫規定的用色，然後圖標的區域規範，包括切圖區域，點擊區域，具體的規範是放在ai的圖標規範里，有更詳細的視覺區域，切圖區域，點擊區域規定等。還有諸如圓角，像素大小規定等。我總是在幻想，公司哪天招個設計師跟我一起畫畫圖標。

是的，這些規定從我上崗到快離職，只有我一個設計師看到了。其他看到的都是程序員，但是我依舊非常肯定它存在的必要性，讓我不用每次更新，都要翻舊的設計稿，卧槽，我上次用的這個是什麼顏色？有人說，可以用色板記錄啊，但是我的色板會把中間配色過程中使用的也保存下來，sketch的色板不像ps，可以標註備胎1號色，2號色。還有，設計師做視覺規範，可以幫助自己做個人沉澱，這個對自己的好處絕對大於對公司層面的好處。

——————————————感謝大家贊同的分割線，來更新一發——————————－

很多人評論私信問一些規則的詳細事宜。我參考了很多大廠的一些設計規範，比如百度，淘寶，jd。還有一些類似airbnb之類的，綜合來定製適合自己團隊，自己app的規範。統一來說，規範出了包含色值，文字，之外當然還有icon規範，來新司制定新的設計規範就是把icon 的圓角建議規範都定製好了。下面簡要的說明一下各規範建議規定的地方：

色彩體系：
高亮色，文字色，分割線色，背景色，輔助色，normal ,pressed,disabled的狀態都是附加了比如10%的＃000，10％#ffff之類的。

文字體系：
文字大小，line-height，所以字體大小與line-height的比例關係建議保持一致，如果存在小數點，可以四捨五入。比如：28px字體大小的line-height是40px。那26px的字體，line-height可以取36px，比例是1.4。
中文字體字形，英文字體字形，所用到的手繪字體等。

icon體系：
線性粗細，建議圓角大小，比如：

還有普適性icon的視覺區域大小，切圖區域大小。比如我常用的視覺區域大小是44px，切圖區域大小是60px。icon的整體風格建議。這點可以參考md的。規定了各種。。。可以適當參考就行了。https://www.google.com/design/spec/style/icons.html#icons-system-icons

button體系：
按鈕的常態高度，圓角大小。不同按鈕狀態的alpha值統一等。按鈕的線型，按鈕內字體大小等。按鈕的長度延伸適配等。可以採用sketch插件 Dynamic buttons，可以自適應按鈕大小。

其他UIKIT體系：
1.nav bar統一，特別是有類別切換的。
2.文本框
3.單一列表，組合列表
4.bar 體系，高度，透明度，投影等。
5.popover體系，彈出框的寬度，背景灰度值，文本規範，按鈕規範等。
6.配圖規範，風格選圖建議（為了保持app的格調一致性）
7.情感化提示規範。
8.插畫規範。
還有好多，不一一例舉了。

還有另外好多問zeplin的事情的朋友，官網是zeplin.io.可以直接將sketch的畫板導入到zeplin，就可以直接查看相應的色值，間距，大小了。可以根據不同的平台切換顯示重要的是他會幫助我們整理相應的一些規範。

當然我這裡是重合了好幾個文件，所以有兩個高亮色。見諒。

還有最近新發現一個幫助建立品牌視覺設計規範的一個網站Create Free Brand Design Style Guides with Frontify Style Guide，仔細研究研究，還是挺好的。他默認的排版就挺美的了。

想到了再繼續補充吧。感謝大家。么么噠～

——————————————寫完一份新文檔的分割線—————————————————

最近針對app的android端新寫了一份設計文檔，做了一個設計組建化，文檔的閱讀對象從單一的設計師變成了設計師，研發，產品經理。文檔的涵蓋內容就不止停留在設計層面，更多從實現角度出發，如何保證設計在設備上的還原度。直接貼部分文檔吧。

這也是第一次針對android也一個設計規範文檔，需要提醒一下設計師，在不同的平台，適配的習慣不同，比如android平台很多採用的是auto layout的布局方式，所以很多時候，規定的是固定的間距，而不是整體高度，寬度。iOS則很多時候是固定一個高度，寬度，不同設備適配的時候，標示比例。

我知道樓主想說的其實是界面的視覺規範，但在這裡我想延伸一下，把 UI 的含義泛化為 User Interface（其實也是它原本的含義）。

Use Interface 規範其實包含兩部分，一部分是交互規範，一部分是視覺規範。

其中交互規範比較特殊，因為又分為平台規範和應用自身的規範。然而，在目前階段，業內更加強調的是平台規範，比如說 xxx 組件的設計得按 xxx 平台來做啊。然而，我並不太 care 這點。因為在我看來，平台規範歸根結底是為了確保產品的易用性，也就是說遵循平台規範不是為了遵循平台規範，而是為了用戶能夠在沒有任何學習成本的情況下懂得如何使用產品（相關回答：Android 設計指南要求 Tab 不可以放在底部，為什麼國內大多不遵守？ - 鄭堅義的回答）。

然而，如果所有的產品都嚴格地遵循各個平台的交互設計規範，那做出來的東西會顯得非常的枯燥和單調。

傳統的設計其實非常強調創新和個性，但 UI 設計對這一塊的關注卻不夠，甚至有點遏制的感覺在裡面。而我的觀點是只有適當地打破規範，才能創造出讓人耳目一新、或者說有格調的產品。所以，在加入現在的公司之前，我有跟 CEO 溝通，希望產品各個頁面的布局和交互方式能夠依然由原來的 UI 設計師主導（她非常優秀，之前的產品格調就是有她打造的，我希望能夠傳承和優化），而我只是起到一個把關的作用，也就是一些明顯錯誤的設計我才會否決掉。

但千萬記得，應用自身的交互規範必須得遵循。否則會亂套，不僅起不到有格調的作用，還會給人一團遭、不專業的感覺。

至於視覺規範這一塊，我認為是非常有必要的。就傳統的設計而言，是有 VI 規範一說的，也就是說，各個設計的元素必須嚴格遵循規範，這樣才能給消費者傳達統一的品牌形象，從而潛移默化地進行品牌滲透。

對於互聯網產品的視覺設計而言，也是如此。只是在團隊還非常精簡的階段，可能不需要產出專門的規範文檔，因為 UI 設計師就一個，只需要跟他傳達視覺元素必須符合規範的原則即可。然而，當團隊逐漸擴大，要吸納新成員的時候，相關的 UI 設計規範文檔必須就位。否則，要確保視覺的一致性（實際上是品牌的一致性），所付出的溝通成本將會非常大。

這其實跟產品文檔的道理是一樣的，在企業初期，產品設計師只需要簡單的文檔或者通過口頭溝通，就能和 UI 設計師、工程師達成一致，實現想要的功能。然而團隊不斷壯大之後，要使新人了解產品的現狀，必須需要一個文檔，否則你得不斷地重複介紹相關的功能，這是非常累人和低效的。

至於樓主所說的在智城和豬八戒接單的場景非常好理解，因為這種外部就是一鎚子買賣。你做出了設計方案，如果沒有相關的設計規範文檔，客戶往後自己維護的時候可能就會非常混亂，大大降低了產品的視覺體驗，給人一種不專業的感覺。

設計中當然會用到 UI 設計規範拉。只是不同規範的使用場景不同，各家公司的執行方法也不同而已。

1. 操作系統級別的產品，會給開發者提供交互/界面設計規範，旨在幫助生態圈孕育更多優秀的應用。比如：

大家談及最多的 iOS Human Interface Guidelines
姊妹篇 OS X Human Interface Guidelines 就被關注的比較少了
Material Deisgn http://www.google.com/design/spec/material-design/introduction.html
Design apps for the Windows desktop 幾年前還有 Windows 客戶端設計項目的時候，也經常翻閱 Windows 應用設計規範，裡面提到很多可用性原則和文案撰寫建議，受益頗多。鏈接里已經是針對新系統的內容了，相信信息量也很紮實。

2. 平台級的產品，為了讓第三方合作小夥伴或媒體正確使用自家的品牌標識，一般會提供品牌使用規範。這部分實際和 UI 設計規範關係不大。例如：

Facebook Brand Book https://www.facebookbrand.com/
Foursquare 舊品牌的 Brand Book: http://playfoursquare.s3.amazonaws.com/press/foursquare-brandbook.pdf

3. 大多數產品沒有#1，#2那樣的對外需求，不需要公開官方設計規範。設計規範更多作為內部溝通工具、交付產物，並且不斷升級迭代。交互設計層面，一般有設計原則和設計細節定義於交互設計文檔中，較少成為「規範」。而視覺設計由於牽扯「精確到像素」的設計-開發協作，所以定義清晰的視覺設計規範文檔是比較常見的。我收集了一些：

Salesforce 的設計規範：Product Style Guide, Visual guidelines for Salesforce1
來源：Dribbble - UI style guide by Filip Santa
雖然標題是 Brand Development，但是文檔本身也涉及了諸多界面要素，可以看做是界面設計文檔。Meduim Brand Development
New Work: Codecademy 算是一個 Case Study，從品牌設計到界面設計的整套設計方案。裡面可以看見界面規範的截圖。外包的設計服務，當然需要產出細緻的規範文檔給委託方啦。

4. 有時候 Web 產品的「樣式規範」並不由設計師產出，而是由前端工程師整理生成的，為的是對同一設計元素，可復用同一代碼模塊，提高一致性和可維護性。比如：

最耳熟能詳的開源前端框架：Bootstrap
Mapbox styleguide
郵件服務商 MailChimp 的 Pattern Library
Yelp的 Styleguide | Yelp

回到題主的問題——

最近想改進公司的界面設計，首要就是制定公司的界面設計規範...

這個嘛，是有點捨本逐末了。這裡只談設計規範文檔，不展開說了……

我現在在做產品就有UI規範，做一個詳細的UI規範有很多的好處

1、對於同一家公司的多個產品線來說，有一個統一UI規範，可以對多個產品在圖標、主題色彩等方面進行規範，使得產品統一；
2、多個UI設計師共同合作時，有一個既定的規則大家可以遵守，省得大家各做各的，做出來的東西不像一個產品；
3、有時UI規範也可以對研發和測試童鞋們的工作予以指導。

設計需要規範么？需要、也不需要。關鍵要看在什麼情況。
做設計規範的用途是什麼？1、需要協同配合。2、減少溝通。3、規範設計和開發行為。
我相信應該有不少設計師見過設計規範，最有名的就是iOS和Android的設計規範。
《Material design 設計語言》UI文章專題-UI中國可以在這裡看到所有完整翻譯。
Google為啥要出這種東西呢？這就是上面說的三個主要原因。
"別老來問我，自己看。"
「按照這個來做，否則不給你審核通過！」
在品牌設計中這東西叫「VI」。

設計需要規範么？需要、也不需要。關鍵要看在什麼情況。
1、設計規範要根據公司切實可行的方式進行設計整理，切勿流於形式。

通過三個用途，我們不難分析出，小公司本身溝通少、協同配合快，這種規範其實很容易流於形式，僅供設計師自我滿足使用。
5人及以上協同配合的設計團隊，開始需要由主視覺設計規範。主要目的是為了其他成員快速協同設計完成所有分支頁面。
視覺規範對應開發規範，讓開發者快速理解和達到設計意圖。

2、規範主要整理共性設計。

整理主視覺中的共性設計，例如導航欄高度、搜索框高度、文字大小、核心配色等等。
特殊的個性頁面無需整理設計規範。除非運營需要。也盡量以主規範為主。設計規範里無需體現個性部分。

設計規範包含哪些部分？根據你設計的網頁或是APP等產品的共性設計部分來定。
通常會考慮在以下幾個方面做規範：
（這位作者整理的不錯：EduSoho UI 設計規範（Web版）-UI中國）

配色
字體
排版
布局
按鈕
表單
提示框、標記、標籤
彈窗、提示框
圖片尺寸（banner、模塊圖片、頭像圖片）

關於規範的搜索-UI中國

UI 規範不是行業標準.
而是私有標準來的.

就是說你在建立界面的過程中，跟隨界面建立的規則而建立一套 UI 規範以保證以後別的設計師、頁面人員都能夠創建相似的介面。

這個就是 UI 規範的定義了。

你找資料找的不夠仔細。
設計規範_花瓣圖片
設計規範 - 圖片大全,素材搜索,設計素材下載
還有更多

說道UI設計規範不得不說的例子就是谷歌對Android 3.0 系統的規範梳理。自微軟、蘋果之後， google也終於推出了自己的UI設計規範，主要是統一Android 3.0設計思想，從視覺設計、UI模式，框架特點、前端開發等方面。
以下舉例說明：

看Android 3.0的系統初始UI

考慮下蜂巢比ipad設計好在哪裡

多任務、板塊之間的靈活切換、工具添加……通過縮略圖，而變得更加直觀。

Action Bar、多欄布局、應用程序導航，這些系統功能在薑餅(Android 2.3前版本)和蜂巢(Android 3.0)之間的設計異同及取捨

UI及交互細節的細節處理：去除文本框、文字間距與框體尺寸(dip)

再看Popup的設計

關於Back和Up的交互流程設計　

插一句：Back 按鈕在Android 2.3前版本里它是一直是個硬邦邦的實體按鍵，由於這個腦殘的設計，讓許多用戶想「返回」卻在屏幕操作中找不到門路，最可怕的是每個「back按鈕」在不同硬體設備中的位置不一樣!這你敢信嗎。

在Android 3.0中，Back採用觸摸按鍵和屏幕融為一體，嗚呼，爽呆。

以上只是舉例說明，更多關於UI設計規範的詳細分享可以關注我的另一個回答：UI設計有哪些規範？ - 李晨的回答

設計規範主要分為2種，一個是交互設計規範，還有一個是視覺設計規範。
交互設計規範比如IOS人交互準則，Android設計規範等。web的設計就更多了，因為更加開放變化也非常的多。不同的網站都有不同類型的交互規範。
還有就是視覺規範，一般由最初的視覺設計師定下的規範對色彩，控制項樣式，布局排版字體等制定的一系列規範，用來指導之後的工作保持一致性和風格統一

你猜測不錯，你找到的人確實不專業。出設計規範這種工作最好不要找個人，因為做設計規範很費時間，要系統了解你的產品才可以做，一般個人都是接散活的。設計規範要做好的話也需要很高的專業水平，能做的個人價錢會很貴，而且這些人時間寶貴，不一定願意做。

可以找專業的設計公司，出系統的設計規範是作為設計服務的其中一項的。

推薦的設計公司，國內比較出名的 eico design，rigo design，還有家新成立的創始人水平還不錯 inves design。

至於設計規範的重要性上面已經說的很多了，就不啰嗦了。

安卓設計規範補充：

學習：

官方文檔：https://www.google.com/design/spec/what-is-material/environment.html
中文翻譯：Material Design中文版_Material Design中文教程_Material Design開發中文手冊[PDF]下載

顏色生成工具：

10 Best Material Design Color Palette Generators
Material Design Color Palette GeneratorMaterial Design Color Palette Generator
Material Design Colors

圖標資源：

Google發布750個Material Design圖標，完全免費使用Google發布750個Material Design圖標，完全免費使用
Google Material Design的圖標字體版本(Material icon font)Google Material Design的圖標字體版本(Material icon font)
Material icons guideMaterial icons guide
Release Material Design Icons · google/material-design-icons · GitHub

UI設計師必看：來自蘋果的iOS應用設計規範大集合

2年前，蘋果對iOS生態內的UI設計語言進行了極大簡化，加強了類似粗體、卡片化等特點中的應用，讓設計師更輕鬆地把注意力放在動效與功能點的設計上。確實，就想馬克吐溫曾說過的一樣：「歷史不會重演，但歷史總是驚人地相似。」在iOS7中Helvetica neue ultra light極細字體被廣泛應用之後，加粗字體在iOS10中又一次成為了備受關注的焦點。為何蘋果將iOS10稱為「史上最大更新」，設計師們對此又該如何理解？

我曾被多次問到設計一款在蘋果應用商店中名列前茅的App究竟有什麼捷徑。其實，iOS App UI設計規範就能全方位地影響你的設計，利用它們來提高軟體易用性和吸引力就能成為你的一大絕招。

1.文本可讀性

在視網膜屏幕上，最理想的文本尺寸應為16pt。與此同時，在不放大的前提下，11pt是保證正常距離可讀性的最小文本尺寸。一般情況下我們將小號文本設為12pt，正文設為17pt，標題設為20 pt。

2.布局排版

每個頁面都應當完美適應iOS設備的屏幕。任何標題都應該作為其所在頁面的宏觀概括語言。文本應盡量做到短小精悍、容易理解。

3.用色

蘋果堅持使用鮮艷的調色板以確保設計師能使用顏色來突出文字的可讀性。是否選擇了正確的顏色或色調很大程度上決定了你的設計的成敗。

4.圖片

@1x圖片在iPhone上會顯得模糊，所以我們最好選用@2x或@3x的高解析度圖片。不符合預期比例的圖像將導致失真。

5.控制件

根據iOS應用UI設計規範，按鈕應按照44pt的標準進行設計以確保用戶能用手指對按鈕進行精準操作。設計師應具備正確選用UI元素的能力，熟練並自然地使用pickers、segmented controls、sliders、switches、steppers。

6.間距與對齊

合理對齊UI元素來提高可讀性。在普遍設計規則下，最小邊距一般為8pt。文本重疊會造成用戶很強的壓迫感，應盡量避免。

7.黃金比例網格

蘋果在一些原生圖標上使用了黃金比例網格，作為設計師的我們同樣可以試圖使用這種規範來設計圖標尺寸以及圖標上的元素。但一定要記住，黃金比例網格不應該成為設計的限制，如果你的圖標在不參照網格的情況下表現得更加驚艷，毫不猶豫地使用它吧

8.動效

不要為了使用動效而使用動效，多餘的動效很容易分散用戶的注意力，特別是在沒有沉浸式體驗的應用中。同時，我們需要確保每個動效設計都有其存在的意義。例如，如果用戶通過從左到右的滑動來進入一個頁面，設計師理應在邏輯上確保從右到左的滑動可以返回上一個頁面。

歡迎補充。

瀉藥~

會。

但是估計很多都只是拿來做參考。

規範由設計升華而來。從視覺的角度來說，實際上就是一個素材庫。產品有什麼樣的視覺呈現和元素定義，都有可遵循的標準，保證日後的迭代可以延續產品所傳遞的思想和價值，最大限度保證了產品的一致性。

同時，規則從無到有的制定並非一日完成的。也並非先制定了設計規範在著手進行界面改動，兩者應該同時進行。在經過一次版本升級後，才有一個確定的設計規範，否則很可能被所謂的規範束縛住手腳，到頭來還是東拼西湊毫無可遵循的標準可言。

規範是規定下線，不是限制你上線的東西。

規範基礎的東西更加有助於一致性，一些基礎的東西是需要維護的。

吐個槽。為一個大型客戶設計了一套用戶體驗規範（交互+視覺+用戶體驗相關指導），大概有100多頁PPT，其實我們已經讓規範足夠簡單易懂做了很大的努力簡化了。發給客戶一個星期後得到一句話：太長了...

感覺就是為客戶將所以內容都考慮到的，任何情況都能在規範里找到相應解釋，客戶居然還嫌棄...

網上看了很多的樣稿個人覺得實用性不大，好的規範也是一個好產品，可以給產品團隊開發過程中溝通帶來便利降低開發成本，還有同公司的產品也有自己的品牌風格

從新學習。

個人認為：

UI規範對於一款產品多位設計師的情況是有用的。
UI規範對於一款產品一位設計師來說就看情況了，假如這個設計師能夠把自己做的東西熟稔於心，顏色間距大小等都能保持統一，那這個規範對於製作當前意義並不是很大，但是對於製作完之後假如要交付給下一個設計師的話是有用的了。
有了Sketch Measure後，UI規範對於程序員來說意義也並不是很大，因為可以直接看html文檔，比起一張規範大圖搜尋規範其實直接看文檔更方便。（不過也不一定，因人而異。）
對於一家公司多款產品的情況，共用一個UI規範似乎就不合理了。因為每款產品都有其調性風格，只能盡量從配色上讓人看得出是同一家公司，但無法完全做到幾個產品都按規範來做細節。這樣會局限不同產品的設計師。

豬八戒這樣干外包的網站基本都是想賺點外快的，肯定不會給自己找額外的麻煩實際設計師大多潛移默化多多少少都會注意下界面統一化但是你要讓他們白紙黑字的制定出來我想說真的挺費勁的甚至比給你做的外包都費勁所以他們不是不知道規範這種東西只是不想弄而已除非單算錢