作者：不洗碗工作室 - Ajiajiajia
作者聯(lián)系方式：549044363@qq.com
版權(quán)歸作者所有，轉(zhuǎn)載請(qǐng)注明出處
（兩個(gè)月前，新手入門(mén)的我可以說(shuō)是一頭霧水，很多方面都從未涉足，但，“種一棵樹(shù)最好的時(shí)間是十年前，其次是現(xiàn)在”，慢慢摸索，在學(xué)長(zhǎng)學(xué)姐們的點(diǎn)撥和建議中慢慢成長(zhǎng)起來(lái)，平日里也留下了一些小總結(jié)，近日對(duì)學(xué)到的東西進(jìn)行了歸類(lèi)整理，一定程度上對(duì)新手可以提供入門(mén)幫助。于是這篇小文章就誕生了。然而我的命名和尺寸等也還不規(guī)范，工具也不還不夠熟練，現(xiàn)在仍處于猥瑣發(fā)育期，所以這篇文章不僅僅是供大家參考，更是寫(xiě)給自己，如果文中有什么不恰當(dāng)?shù)牡胤?，歡迎批評(píng)指教，希望與大家共勉，一起進(jìn)步）
基礎(chǔ)工具
設(shè)備
- 一臺(tái)Mac可以助你一臂之力，或者裝黑蘋(píng)果
app（基于蘋(píng)果系統(tǒng)）
- sketch可以說(shuō)是專門(mén)為UI設(shè)計(jì)師量身定做的PS簡(jiǎn)化版本，所需要的功能都有，界面友好，而且對(duì)我而言，用起來(lái)會(huì)感覺(jué)比Photoshop更加便捷。（附：sketch中文用戶手冊(cè) ）
- 切圖工具
- PxCook（后面會(huì)具體講到）
- Zeplin
網(wǎng)址
設(shè)計(jì)師導(dǎo)航網(wǎng)址（其實(shí)這個(gè)用好了，enough)
icon
圖片（有時(shí)候就是靈魂）
什么都不會(huì)的時(shí)候，最好的方式就是借鑒
- UI中國(guó)
- 學(xué)UI網(wǎng)（這個(gè)網(wǎng)站對(duì)所有界面進(jìn)行了分類(lèi)）
顏色素材與靈感
logo設(shè)計(jì)
- 25學(xué)堂（里面的UI干貨，挺不錯(cuò)的）
- 手機(jī)上的兩個(gè)app也可以進(jìn)行初設(shè)計(jì)（裝在口袋里的logo設(shè)計(jì)）
- Logo Market和 Logo Shop
分層級(jí)關(guān)系(接下來(lái)，打開(kāi)你的sketch)
你設(shè)計(jì)出來(lái)的界面，不僅僅是給你自己看的，還有開(kāi)發(fā)工程師，不僅僅是給你當(dāng)下看的，還有未來(lái)接手此項(xiàng)目的下一屆UI，所以，你得有明確的分類(lèi)規(guī)范，命名規(guī)范.....如果可以讓從未接觸過(guò)此項(xiàng)目的人，看到你的目錄能夠一目了然，那你就成功一半了。接下來(lái)，我們就一起來(lái)學(xué)習(xí)一下。
三句箴言
- 每一個(gè) app 對(duì)應(yīng) 一個(gè) Sketch 文件
- 每一個(gè) app獨(dú)立界面的匯總 對(duì)應(yīng) 一個(gè)page
- 每一個(gè) app的小界面是一個(gè) Artboard
注意：在每一個(gè)Page內(nèi)，還需要專門(mén)建立一個(gè)Artboard來(lái)說(shuō)明 尺寸規(guī)范
- 顏色規(guī)范（color所出現(xiàn)的不同場(chǎng)景）
- 字體大小規(guī)范
- 圖標(biāo)規(guī)范（icon選中及未被選中時(shí)的顏色）
- 按鈕規(guī)范（默認(rèn)和不可點(diǎn)擊的狀態(tài)、及其他）
命名
一般來(lái)說(shuō)，安卓或IOS開(kāi)發(fā)工程師是在接收到UI的設(shè)計(jì)圖之后開(kāi)始工作，然而很多時(shí)候，在處理來(lái)自UI的圖片命名上，總要或多或少的花費(fèi)一些時(shí)間，因?yàn)榇蟛糠质恰爸形?數(shù)字”，所以安卓師在畫(huà)layout布局的時(shí)候就需要：打開(kāi)英漢詞典查單詞->安卓規(guī)范命名id->修改圖片名字id,再把圖片拖入drawable中。
其實(shí)，UI可以為這個(gè)過(guò)程加一個(gè)“疾跑”，想象一下，如果工程師在拿到切圖的時(shí)候，就可以直接用這個(gè)名字來(lái)令為id,這可以一定程度上節(jié)省很多時(shí)間，與此同時(shí)，UI的英文單詞量可以有顯著上升的，這個(gè)可以有！哈哈哈哈
- Artboard（畫(huà)板）命名
- 模塊-功能
- 將所有的Artboard按照序列號(hào)排好，相同模塊內(nèi)容的需要放在一起
- 另外：最頂層加一個(gè)額外的Artboard，主要用來(lái)畫(huà)流程線，和一些信息備注，如：
- Layer（圖層）命名
- 將頁(yè)面大型分塊，大塊建文件包，按照?qǐng)D層內(nèi)容進(jìn)行分包
- 類(lèi)型--范圍--功能
- icon（圖標(biāo)）命名
- 模塊--類(lèi)別--功能--狀態(tài)
- 文本顏色：text前綴
- 分割線顏色：div前綴
狀態(tài)：
- 默認(rèn)狀態(tài)的顏色，添加normal后綴
- 按下時(shí)的顏色，添加pressed后綴
- 選中時(shí)的顏色，添加selected后綴
- 不可用時(shí)的顏色，添加disable后綴
類(lèi)別：
- 導(dǎo)航欄：nav
- 頁(yè)面標(biāo)題：title
- 按鈕：btn
- 標(biāo)簽：label
- 提示文字：hint
- 菜單欄：tab
- 背景圖片：bg
- 默認(rèn)圖片：def
基礎(chǔ)概念
Android開(kāi)發(fā)單位
- dp
用于標(biāo)注“長(zhǎng)度”的單位 - sp
用于標(biāo)注“字體”的單位
設(shè)計(jì)稿尺寸
- 推薦1080x1920px（sketch用戶：540 x 960）
界面控件尺寸
-
底部（頂部）導(dǎo)航欄
- 作用：便于用戶切換頁(yè)面，提供快速導(dǎo)航的功能
- 適用條件：3～5個(gè)同等級(jí)的跳轉(zhuǎn)界面，如果少于三個(gè)可以考慮Tabs（標(biāo)簽）來(lái)替代，如果大于三個(gè)則可以通過(guò)其他位置，比如導(dǎo)航抽屜來(lái)安放。
-
狀態(tài)欄
- 作用：顯示電量、時(shí)間、信號(hào)、網(wǎng)絡(luò)等狀態(tài)
- 標(biāo)簽欄
界面圖標(biāo)尺寸(1080x1920px)
- 啟動(dòng)圖標(biāo)（home頁(yè)或app列表頁(yè)）：48 x 48 dp
- 操作欄圖標(biāo)：整體大小為32x32dp圖形實(shí)際區(qū)域?yàn)?24x24dp
- 上下文圖標(biāo)：整體大小為16x 16dp圖形實(shí)際區(qū)域?yàn)?12x12dp
- 系統(tǒng)通知圖標(biāo)：整體大小為24x24dp ，圖形實(shí)際區(qū)域?yàn)?22x22dp
- 最細(xì)畫(huà)筆：不小于6px
界面文字
- 字體
- 英文字體：Roboto
- 中文字體：source han sans 或者noto sans CJK
圖片命名規(guī)范
- 模塊--類(lèi)別--功能--狀態(tài).png
為你飛得更高，來(lái)一些助攻吧
切圖工具PxCook
使用詳情
具體操作：Pxcook
- 快速導(dǎo)出：一鍵快速導(dǎo)出到PxCook，無(wú)縫享受智能標(biāo)注
- 數(shù)據(jù)填充：快速批量填充名字、時(shí)間、日期、手機(jī)號(hào)、郵箱
- 快速?gòu)?fù)制：精準(zhǔn)到像素的快速批量復(fù)制設(shè)計(jì)元素
- 快速參考線
