第一次做文件就輕鬆崩潰_工作筆記 #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 加緊趕工去!!!!!