第一次做文件就輕鬆崩潰＿工作筆記 #1
之前接過的案子都很趕、也不太要求專業文件，我這個超懶惰的傢伙實在是爽太久了，該來的還是躲不掉啊！
不過我們的工作流程比較特殊，之前都先自行生產畫面趕進度，現在有點空閒的時間，才開始振作(?)建立需要的文件。於是我們參考了一些公司或前人的表格（我在網路上查找的資訊幾乎都是 Web 方面的設計規範範例，很少有完整或是片段的 APP 設計規範可以依循）、基本 guideline 。看著已產出 70% 的畫面去“拼”我們的設計規範。
因為自己在研究的時候老是毫無頭緒，也很難找到適合又簡單明瞭的文件可以參考，以下直接上圖，雖然不是最正統、正確、完整的文件（如有錯誤的地方拜託指正我 XD），但還是希望在第一次製作設計規範的朋友們能有例可循。凡事只要有個開頭，剩下的應該就很好完成了嘛！
* 以下規範以 iOS 為主，配一點 Android / 使用工具為 Sketch *
一、螢幕尺寸
使用 sketch 上的模板當做我們的設計尺寸：
Android 的螢幕尺寸太多元，我都使用 xxhdpi 1080x1920 來作為我的標準尺寸（其實是應我們家 RD 要求），xhdpi 720x1280 是在特殊情況下的備用尺寸，目前還沒使用到。
關於兩個平台的製圖，我都會先以 iOS 為主，雖然現在 sketch 有外掛能做小變大直接調整為 Android 需要的尺寸，但也許是我悟性太低，覺得還是需要花時間調整，不如直接重新做一版來的仔細。如果能有一個一鍵完美比例放大縮小的外掛就太完美了（威～）
二、Status bar, Navigation bar, Tab bar
Status bar 基本上萬年不變，尋找了一下我們的 70% 畫面，發現有好多 Navigation bar 的狀態，非常認命的一一列出來。Tab bar 的部分原本很遲疑高度是不是一定要固定 49px，我打開了幾個有明顯 Tab bar 的 APP，截圖後比較，發現其實是可以自訂的樣子（我們家 RD 表示：??黑人??）。
三、字體
字體的部分我想了超級無敵久，後來發現其實也是可以快速的解決掉它！我參考了設計大舌頭的文章−Sketch 初心者在設計 UI 前要做的五件事！。將我們的字體製作如下。
Android 則是參考−介面設計時使用的繁體中文字體 for Android，將 iOS 設定的文字系列 x3+1，例如：12pt x 3 + 1 = 37pt。
字體為：
- 英 _ Noto Sans
- 中 _ Noto CJK TC 思源黑體
五、icon
參考設計大舌頭(大舌頭太實用)−你可能不知道的 — 關於 iOS 切圖那點事。將 icon 尺寸設定為：
- 一般 icon / Navigation bar icon： 30x30 px
- Tab bat：48x48 px
然後將 icon Symbol 起來，要在畫面上 icon 時，用 Symbol icon 在畫板上的相對位置縮小放大做調整，要出圖時直接把 Symbol 裡的 icon ⌘A > 輸出png > done！
圖標 icon
參考來源為 Sketch 內建的 Template iOS App Icon、Android Icon Design 檔案和我們家工程師：
不要問！以上尺寸全出就對了，多切總比漏切好 XD
六、按鈕
把標準按鈕長寬設定清楚，以免輸出時因為黑魔法跑版少個 1px，善良的 RD 們會照你的規範設定的。
七、其他元件
彈出視窗
雖然協作道具 zeplin 可以做好標註這件事情，但因為不是使用原生系統，依據你可能不知道的 — 關於 iOS 切圖那點事，這些都是「可能會產生變動的元件」，要先行定義「內容發生變動時，畫面應該要如何去處理這樣的狀況」。
頭像
表單
以下主要都是標注文字、固定間距及字體大小的部分
卡片
以上都只是最粗略的規範文件，希望能夠幫助第一次製作設計規範的朋友們開啟第一步，詳細還可加入 icon 整體設計樣式…等。在專案初期 mockup 的時候，可以先確定有哪些樣式是固定不會變的，除了最基本的公司色系與 LOGO，其他元件就是開始製作規範的第二步。
我利用 sketch 製作設計規範的主要原因
在 sketch 上以 1:1 的大小製作我的元件，在出圖的時候能快速複製貼上，我只需要改文字內容或特殊狀況的顏色變動。
敏捷開發
雖然製作設計規範真的麻煩，但在製作的過程中，設計師對於每個細節的規範都會有深刻的印象，能加速之後出圖的速率、統一整體 UI 畫面，也不用再為了幾 px 思考很久。在和設計師夥伴、RD 們協作時有個標準依據，公司有一系列產品的時候，能依據主要的設計規範去修改，快速又方便。
如果還有什麼很重要但是我沒有想到的規範內容，還請麻煩各位高手指點指點啊～（跪）
對 Android 超不熟的我，打完這篇的時候 Android 元件都還沒生出來呢 XD 加緊趕工去！！！！！
