作者：不洗碗工作室 - Ajiajiajia
作者聯(lián)系方式：549044363@qq.com
版權(quán)歸作者所有尚揣，轉(zhuǎn)載請(qǐng)注明出處
（兩個(gè)月前搜贤，新手入門的我可以說是一頭霧水虑灰，很多方面都從未涉足，但误墓，“種一棵樹最好的時(shí)間是十年前蛮粮，其次是現(xiàn)在”，慢慢摸索谜慌，在學(xué)長(zhǎng)學(xué)姐們的點(diǎn)撥和建議中慢慢成長(zhǎng)起來(lái)然想，平日里也留下了一些小總結(jié)，近日對(duì)學(xué)到的東西進(jìn)行了歸類整理欣范，一定程度上對(duì)新手可以提供入門幫助变泄。于是這篇小文章就誕生了。然而我的命名和尺寸等也還不規(guī)范恼琼，工具也不還不夠熟練妨蛹，現(xiàn)在仍處于猥瑣發(fā)育期，所以這篇文章不僅僅是供大家參考晴竞，更是寫給自己蛙卤，如果文中有什么不恰當(dāng)?shù)牡胤剑瑲g迎批評(píng)指教，希望與大家共勉颤难，一起進(jìn)步）
基礎(chǔ)工具
設(shè)備
- 一臺(tái)Mac可以助你一臂之力神年，或者裝黑蘋果
app（基于蘋果系統(tǒng)）
- sketch可以說是專門為UI設(shè)計(jì)師量身定做的PS簡(jiǎn)化版本，所需要的功能都有行嗤，界面友好瘤袖，而且對(duì)我而言，用起來(lái)會(huì)感覺比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)行了分類）
顏色素材與靈感
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)，打開你的sketch)
你設(shè)計(jì)出來(lái)的界面泡嘴，不僅僅是給你自己看的甫恩，還有開發(fā)工程師，不僅僅是給你當(dāng)下看的磺箕，還有未來(lái)接手此項(xiàng)目的下一屆UI抛虫，所以，你得有明確的分類規(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)笛洛，還需要專門建立一個(gè)Artboard來(lái)說明 尺寸規(guī)范
- 顏色規(guī)范（color所出現(xiàn)的不同場(chǎng)景）
- 字體大小規(guī)范
- 圖標(biāo)規(guī)范（icon選中及未被選中時(shí)的顏色）
- 按鈕規(guī)范（默認(rèn)和不可點(diǎn)擊的狀態(tài)、及其他）
命名
一般來(lái)說苛让，安卓或IOS開發(fā)工程師是在接收到UI的設(shè)計(jì)圖之后開始工作侥袜，然而很多時(shí)候，在處理來(lái)自UI的圖片命名上枫吧，總要或多或少的花費(fèi)一些時(shí)間九杂，因?yàn)榇蟛糠质恰爸形?數(shù)字”颁湖，所以安卓師在畫layout布局的時(shí)候就需要：打開英漢詞典查單詞->安卓規(guī)范命名id->修改圖片名字id,再把圖片拖入drawable中甥捺。
其實(shí)，UI可以為這個(gè)過程加一個(gè)“疾跑”镰禾，想象一下吴侦，如果工程師在拿到切圖的時(shí)候，就可以直接用這個(gè)名字來(lái)令為id,這可以一定程度上節(jié)省很多時(shí)間备韧，與此同時(shí)，UI的英文單詞量可以有顯著上升的叠艳，這個(gè)可以有易阳！哈哈哈哈
- Artboard（畫板）命名
- 模塊-功能
- 將所有的Artboard按照序列號(hào)排好闽烙，相同模塊內(nèi)容的需要放在一起
- 另外：最頂層加一個(gè)額外的Artboard，主要用來(lái)畫流程線捕发，和一些信息備注很魂，如：
- Layer（圖層）命名
- 將頁(yè)面大型分塊，大塊建文件包法挨，按照?qǐng)D層內(nèi)容進(jìn)行分包
- 類型--范圍--功能
- icon（圖標(biāo)）命名
- 模塊--類別--功能--狀態(tài)
- 文本顏色：text前綴
- 分割線顏色：div前綴
狀態(tài)：
- 默認(rèn)狀態(tài)的顏色幅聘，添加normal后綴
- 按下時(shí)的顏色，添加pressed后綴
- 選中時(shí)的顏色荐糜，添加selected后綴
- 不可用時(shí)的顏色，添加disable后綴
類別：
- 導(dǎo)航欄：nav
- 頁(yè)面標(biāo)題：title
- 按鈕：btn
- 標(biāo)簽：label
- 提示文字：hint
- 菜單欄：tab
- 背景圖片：bg
- 默認(rèn)圖片：def
基礎(chǔ)概念
Android開發(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è)則可以通過其他位置宋雏，比如導(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ì)畫筆：不小于6px
界面文字
- 字體
- 英文字體：Roboto
- 中文字體：source han sans 或者noto sans CJK
圖片命名規(guī)范
- 模塊--類別--功能--狀態(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ì)元素
- 快速參考線
