APP 設計規範文件

小玉ㄉ斜角巷
Jul 20, 2017 · 6 min read

第一次做文件就輕鬆崩潰_工作筆記 #1

之前接過的案子都很趕、也不太要求專業文件,我這個超懶惰的傢伙實在是爽太久了,該來的還是躲不掉啊!

不過我們的工作流程比較特殊,之前都先自行生產畫面趕進度,現在有點空閒的時間,才開始振作(?)建立需要的文件。於是我們參考了一些公司或前人的表格(我在網路上查找的資訊幾乎都是 Web 方面的設計規範範例,很少有完整或是片段的 APP 設計規範可以依循)、基本 guideline 。看著已產出 70% 的畫面去“拼”我們的設計規範。

因為自己在研究的時候老是毫無頭緒,也很難找到適合又簡單明瞭的文件可以參考,以下直接上圖,雖然不是最正統、正確、完整的文件(如有錯誤的地方拜託指正我 XD),但還是希望在第一次製作設計規範的朋友們能有例可循。凡事只要有個開頭,剩下的應該就很好完成了嘛!


* 以下規範以 iOS 為主,配一點 Android / 使用工具為 Sketch *

一、螢幕尺寸

使用 sketch 上的模板當做我們的設計尺寸:

因為使用 sketch,所以習慣用 px 作為單位

Android 的螢幕尺寸太多元,我都使用 xxhdpi 1080x1920 來作為我的標準尺寸(其實是應我們家 RD 要求),xhdpi 720x1280 是在特殊情況下的備用尺寸,目前還沒使用到。

關於兩個平台的製圖,我都會先以 iOS 為主,雖然現在 sketch 有外掛能做小變大直接調整為 Android 需要的尺寸,但也許是我悟性太低,覺得還是需要花時間調整,不如直接重新做一版來的仔細。如果能有一個一鍵完美比例放大縮小的外掛就太完美了(威~)


二、Status bar, Navigation bar, Tab bar

夥伴細心地標註 px ,一個人工 zeplin 的概念

Status bar 基本上萬年不變,尋找了一下我們的 70% 畫面,發現有好多 Navigation bar 的狀態,非常認命的一一列出來。Tab bar 的部分原本很遲疑高度是不是一定要固定 49px,我打開了幾個有明顯 Tab bar 的 APP,截圖後比較,發現其實是可以自訂的樣子(我們家 RD 表示:??黑人??)。


三、字體

字體的部分我想了超級無敵久,後來發現其實也是可以快速的解決掉它!我參考了設計大舌頭的文章−Sketch 初心者在設計 UI 前要做的五件事!。將我們的字體製作如下。

iOS

Android 則是參考−介面設計時使用的繁體中文字體 for Android,將 iOS 設定的文字系列 x3+1,例如:12pt x 3 + 1 = 37pt。

字體為:

  • 英 _ Noto Sans
  • 中 _ Noto CJK TC 思源黑體

四、顏色

這邊應該算是最簡單的部分,順便來分享一個很實用的 sketch 外掛:Prism。⌘⌃C ,就會生出你在文件顏色區所自訂的顏色名稱、HEX、rgba。

色系配置簡短範例圖

五、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 檔案和我們家工程師:

iOS
Android

不要問!以上尺寸全出就對了,多切總比漏切好 XD


六、按鈕

把標準按鈕長寬設定清楚,以免輸出時因為黑魔法跑版少個 1px,善良的 RD 們會照你的規範設定的。

夥伴排版達人

七、其他元件

彈出視窗

雖然協作道具 zeplin 可以做好標註這件事情,但因為不是使用原生系統,依據你可能不知道的 — 關於 iOS 切圖那點事,這些都是「可能會產生變動的元件」,要先行定義「內容發生變動時,畫面應該要如何去處理這樣的狀況」。

圖片來源:你可能不知道的 — 關於 iOS 切圖那點事

頭像

標示前後狀態

表單

以下主要都是標注文字、固定間距及字體大小的部分

卡片


以上都只是最粗略的規範文件,希望能夠幫助第一次製作設計規範的朋友們開啟第一步,詳細還可加入 icon 整體設計樣式…等。在專案初期 mockup 的時候,可以先確定有哪些樣式是固定不會變的,除了最基本的公司色系與 LOGO,其他元件就是開始製作規範的第二步。

我利用 sketch 製作設計規範的主要原因

在 sketch 上以 1:1 的大小製作我的元件,在出圖的時候能快速複製貼上,我只需要改文字內容或特殊狀況的顏色變動。

敏捷開發

雖然製作設計規範真的麻煩,但在製作的過程中,設計師對於每個細節的規範都會有深刻的印象,能加速之後出圖的速率、統一整體 UI 畫面,也不用再為了幾 px 思考很久。在和設計師夥伴、RD 們協作時有個標準依據,公司有一系列產品的時候,能依據主要的設計規範去修改,快速又方便。

如果還有什麼很重要但是我沒有想到的規範內容,還請麻煩各位高手指點指點啊~(跪)

對 Android 超不熟的我,打完這篇的時候 Android 元件都還沒生出來呢 XD 加緊趕工去!!!!!

)

    小玉ㄉ斜角巷

    Written by

    \(*-*)/

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade