創業公司設計師怎樣從0到1設計一款APP——UI規範整理

上篇文章更新到了在設計APP的過程中Hi-fi輸出的一些要求，今天來說說APP的UI規範怎麼整理。

要求

如果我們按照市面上最好的規範去整理的話是極好的一件事情。Apple公司的iOS規範和Google的Material Design的設計規範就是很好的參考案例。如果有時間，也是極力推崇大家去學學的。但創業公司不一樣，公司沒有那麼多資源給設計師去做那麼龐大的工作量。

工作中，實用、省事是第一準則，怎樣讓開發、PM、設計都能自覺遵守這樣的規範，讓用戶覺得產品有規有矩，值得信賴，就很棒了。

UI規範的主要內容

1.前言

前言部分主要交代UI規範的版本號，標準頁面的大小，基於哪個平台進行設計。版本號一般由PM（即產品經理）進行規定。設計稿的標準頁面一般用iPhone 6S的大小，即750*1344px作為標準，因為這個屏幕大小所佔市場份額最大。平台的話，大部分是Mac OS系統（不排除有少部分基於Windows，不同公司情況不一樣）。

2.顏色規範

顏色從類型上可以分為主色，輔色，文字色三大類。

而每種顏色除了需要要標註RGB的色號之外，最好標註出它的使用場景，以及在該場景下的用途。以下是樓主找的一些案例：

主色的種類控制在一至兩種比較合適，輔色也不能過多，三到五種就足夠。文字色一般分為三個層級進行設置，越高層級的顏色越深，還需要注意的是留一個反白色，方便用於深色背景下的文字信息顯示。

3.文字規範

文字的統一有很多種方式，在此介紹一種按照用途的方法分類的形式。同樣，文字需要介紹出文字的字體（如果有英文的也需要羅列一下英文字體），以及使用場景。

按照用途來分，文字可以分為導航欄、列表、輸入框、按鈕、閱讀類文字。導航欄又可以細分為頂部、底部、功能區導航欄。閱讀性的文字，主要分為標題，說明文字，註釋三大類，如果在偏向雜誌類的APP中可能標題又可以進行細分成幾級。如下案例。

4.控制項

控制項用Sketch的Symbol進行整理。不知道怎麼用Sketch和Symbol的童鞋可以進行先自學一下，如果需要軟體的介紹也可以給樓主留言，這部分的整理需要有一定的基礎的人才能看得懂。分類用腦圖的方式呈獻給大家，來得更直觀。

5.圖標

圖標的統一，主要是尺寸、風格，這一點在上篇文章有提到。風格上，選擇填充或者選擇線性。比較流行的是線性圖標，一般採用3px的粗細。大小常用的有12x12px、24x24px、48x48px、64x64px、96x96px（或者100x100px）。製作參考，大夥根據需要進行調整。

6.其它

在有的規範裡面還將主頁面以頁面布局的一種分類進行呈現，但在開發對照sketch文件寫代碼的過程中已經很仔細地在看頁面，所以羅列在規範中，樓主覺得沒有太大的實際用途，於是也就沒有考慮。但它有它的好處，就是讓團隊外部人員在查看公司的視覺規範時更加完整，內容更齊全，形象更高端。文件定位不一樣，內容也可以不那麼相同。

總結，一切從實際出發，滿足某個階段的需求。每個公司的發展階段不一樣，需求也不一樣，如果你和樓主一樣是打工仔，那咱們就擦亮眼睛，機靈點，認清形勢再做事！

Sophia的tips：有時候不是我們做不到，而是沒有被逼到那個份上~