作者：不洗碗工作室 - Ajiajia葭
作者聯絡方式：549044363@qq.com
版權歸作者所有，轉載請註明出處
（兩個月前，新手入門的我可以說是一頭霧水，很多方面都從未涉足，但，“種一棵樹最好的時間是十年前，其次是現在”，慢慢摸索，在學長學姐們的點撥和建議中慢慢成長起來，平日裡也留下了一些小總結，近日對學到的東西進行了歸類整理，一定程度上對新手可以提供入門幫助。於是這篇小文章就誕生了。然而我的命名和尺寸等也還不規範，工具也不還不夠熟練，現在仍處於猥瑣發育期，所以這篇文章不僅僅是供大家參考，更是寫給自己，如果文中有什麼不恰當的地方，歡迎批評指教，希望與大家共勉，一起進步）
基礎工具
裝置
- 一臺Mac可以助你一臂之力，或者裝黑蘋果
app（基於蘋果系統）
- sketch可以說是專門為UI設計師量身定做的PS簡化版本，所需要的功能都有，介面友好，而且對我而言，用起來會感覺比Photoshop更加便捷。（附：sketch中文使用者手冊 ）
- 切圖工具
- PxCook（後面會具體講到）
- Zeplin
網址
設計師導航網址（其實這個用好了，enough)
icon
圖片（有時候就是靈魂）
什麼都不會的時候，最好的方式就是借鑑
顏色素材與靈感
logo設計
- 25學堂（裡面的UI乾貨，挺不錯的）
- 手機上的兩個app也可以進行初設計（裝在口袋裡的logo設計）
- Logo Market和 Logo Shop
分層級關係(接下來，開啟你的sketch)
你設計出來的介面，不僅僅是給你自己看的，還有開發工程師，不僅僅是給你當下看的，還有未來接手此專案的下一屆UI，所以，你得有明確的分類規範，命名規範.....如果可以讓從未接觸過此專案的人，看到你的目錄能夠一目瞭然，那你就成功一半了。接下來，我們就一起來學習一下。
三句箴言
- 每一個 app 對應 一個 Sketch 檔案
- 每一個 app獨立介面的彙總 對應 一個page
- 每一個 app的小介面是一個 Artboard
注意：在每一個Page內，還需要專門建立一個Artboard來說明 尺寸規範
- 顏色規範（color所出現的不同場景）
- 字型大小規範
- 圖示規範（icon選中及未被選中時的顏色）
- 按鈕規範（預設和不可點選的狀態、及其他）
命名
一般來說，安卓或IOS開發工程師是在接收到UI的設計圖之後開始工作，然而很多時候，在處理來自UI的圖片命名上，總要或多或少的花費一些時間，因為大部分是“中文+數字”，所以安卓師在畫layout佈局的時候就需要：開啟英漢詞典查單詞->安卓規範命名id->修改圖片名字id,再把圖片拖入drawable中。 其實，UI可以為這個過程加一個“疾跑”，想象一下，如果工程師在拿到切圖的時候，就可以直接用這個名字來令為id,這可以一定程度上節省很多時間，與此同時，UI的英文單詞量可以有顯著上升的，這個可以有！哈哈哈哈
-
Artboard（畫板）命名
- 模組-功能
- 將所有的Artboard按照序列號排好，相同模組內容的需要放在一起
- 另外：最頂層加一個額外的Artboard，主要用來畫流程線，和一些資訊備註，如：
-
Layer（圖層）命名
- 將頁面大型分塊，大塊建檔案包，按照圖層內容進行分包
- 型別--範圍--功能
-
icon（圖示）命名
- 模組--類別--功能--狀態
- 文字顏色：text字首
- 分割線顏色：div字首
狀態：
- 預設狀態的顏色，新增normal字尾
- 按下時的顏色，新增pressed字尾
- 選中時的顏色，新增selected字尾
- 不可用時的顏色，新增disable字尾
類別：
- 導航欄：nav
- 頁面標題：title
- 按鈕：btn
- 標籤：label
- 提示文字：hint
- 選單欄：tab
- 背景圖片：bg
- 預設圖片：def
基礎概念
Android開發單位
- dp
用於標註“長度”的單位 - sp
用於標註“字型”的單位
設計稿尺寸
- 推薦1080x1920px（sketch使用者：540 x 960）
介面控制元件尺寸
-
底部（頂部）導航欄
- 作用：便於使用者切換頁面，提供快速導航的功能
- 適用條件：3～5個同等級的跳轉介面，如果少於三個可以考慮Tabs（標籤）來替代，如果大於三個則可以通過其他位置，比如導航抽屜來安放。
-
狀態列
- 作用：顯示電量、時間、訊號、網路等狀態
-
標籤欄
介面圖示尺寸(1080x1920px)
- 啟動圖示（home頁或app列表頁）：48 x 48 dp
- 操作欄圖示：整體大小為32x32dp圖形實際區域為 24x24dp
- 上下文圖示：整體大小為16x 16dp圖形實際區域為 12x12dp
- 系統通知圖示：整體大小為24x24dp ，圖形實際區域為 22x22dp
- 最細畫筆：不小於6px
介面文字
- 字型
- 英文字型：Roboto
- 中文字型：source han sans 或者noto sans CJK
圖片命名規範
- 模組--類別--功能--狀態.png
為你飛得更高，來一些助攻吧
切圖工具PxCook
使用詳情
具體操作：Pxcook
- 快速匯出：一鍵快速匯出到PxCook，無縫享受智慧標註
- 資料填充：快速批量填充名字、時間、日期、手機號、郵箱
- 快速複製：精準到畫素的快速批量複製設計元素
- 快速參考線
