這是一篇移ios動(dòng)端規(guī)范的學(xué)習(xí)筆記。本人在進(jìn)行移動(dòng)端ui界面設(shè)計(jì)學(xué)習(xí)時(shí)竞帽，整理下來的同時(shí)也希望能幫到學(xué)到這里時(shí)有困難的同學(xué)调违。要記得好好學(xué)習(xí)天天向上哦（若發(fā)現(xiàn)文中有錯(cuò)誤，請(qǐng)聯(lián)系更正）瑰煎。
目錄：
1.市面上主流機(jī)型分辨率铺然、顯示規(guī)格及適配原則
2.ui組件布局設(shè)計(jì)
3.關(guān)于尺寸
4.字體
5.切圖及命名規(guī)范
6.標(biāo)注
1.市面上主流機(jī)型分辨率、顯示規(guī)格?（其中具體分析換算可看這里一篇文章幫你理清pt丢间，px探熔， ppi，dpi烘挫，dp诀艰，sp）
適配原則
在設(shè)計(jì)中設(shè)計(jì)師需要設(shè)計(jì)一套基準(zhǔn)設(shè)計(jì)圖來達(dá)到適配多個(gè)分辨率的目的，我們可以在ps中選擇中間尺寸750 x1134px作為基準(zhǔn)饮六，向下適配640x1136px其垄，向上適配1242x2208px和750x1624px／1125x2436px。(在 Sketch 和 Adobe XD 中建立的畫布就是375x667pt)
為了讓大家了解適配的原則卤橄，本文將對(duì)此過程進(jìn)行推導(dǎo)绿满，首先設(shè)計(jì)一個(gè)常見的750x1334px的設(shè)計(jì)圖，從上至下分別是狀態(tài)欄窟扑、導(dǎo)航欄喇颁、首焦圖、主要入口嚎货、分割橘霎、列表。
（1）750×1334（@2x）向下適配640×1136（@2x）
由于750x1334px和640x1136px兩個(gè)尺寸的界面都是2倍的像素倍率殖属，因此它們的切片大小是相同的姐叁，即系統(tǒng)圖標(biāo)、文字和高度都無需適配，需要適配的是寬度外潜。
下面開始進(jìn)行適配原环，上面提到了由于750x1334px到640x1136px都是2倍的像素倍率，界面的圖標(biāo)处窥、文字大小等都是相同的嘱吗，所以我們不需要改變圖像大小，只需將畫布大小改成640x1136px即可碧库，然后再改變橫向元素的間距以達(dá)到適配的目的柜与。
首先打開750x1334px的設(shè)計(jì)稿，執(zhí)行Ctrl/ Command+Alt+C（改變畫布大小的快捷鍵）嵌灰，設(shè)置寬高為640和1136弄匕，點(diǎn)擊「確定」。
前后調(diào)整：
a 導(dǎo)航欄右邊的圖標(biāo)向左移動(dòng)保持和原來的右邊距一致沽瞭，標(biāo)題居中迁匠。
b 首焦圖高度除以1.17（750／640=1.17得到）后居中，寬度640px驹溃。
c 主要入口右邊的圖標(biāo)向左移動(dòng)保持和原來的右邊距一致城丧，各圖標(biāo)的間距等寬。
（2） 750×1334（@2x）向上適配1242×2208（@3x）
1242x2208px界面上所有的元素的尺寸都是750x1334px界面上元素的1.5倍豌鹤，所以我們在進(jìn)行適配的時(shí)候直接將界面的圖像大小變?yōu)樵瓉淼?.5倍亡哄，然后調(diào)整畫布大小為1242x2208px，最后調(diào)整界面圖標(biāo)和元素的橫向間距的大小完成適配布疙。
首先對(duì)750x1334px的畫布執(zhí)行 Ctrl/Command+Alt+I 命令（調(diào)整圖像大形霉摺），單位設(shè)置為百分比灵临，寬高設(shè)置為150%截型，點(diǎn)擊「確定」，調(diào)整之后的畫布大小為1125x2001px儒溉。
緊接著對(duì)1.5倍之后的Ctrl/1125x2001px界面執(zhí)行 Command+Alt+C（調(diào)整畫布大谢陆埂），鼠標(biāo)單擊「定位」左上角的格子顿涣，調(diào)整寬高為1242和2208px波闹，點(diǎn)擊「確定」。
上面左圖拓展畫布到右圖完成適配做了如下調(diào)整：
導(dǎo)航欄右邊的圖標(biāo)向右移動(dòng)保持和原來的右邊距一致涛碑，標(biāo)題居中舔痪。
首焦圖的高度乘以1.65（1242/750=1.65得到）后居中，寬度1242px锌唾。
主要入口右邊的圖標(biāo)向右移動(dòng)和原來的右邊距一致，各圖標(biāo)的間距等寬。
（3） 750×1334（@2x）向上適配iphoneX 1125x2436px（@3x）
Phone X 比較特別晌涕，單獨(dú)說一下滋捶，它的像素分辨率發(fā)生了變成了1125x2436px（@3x），在實(shí)際工作中為了方便向上和向下的適配余黎，我們?nèi)匀豢梢赃x擇熟悉的 iPhone 7（750x1334px）的尺寸作為模版進(jìn)行設(shè)計(jì)重窟，只是高度增加了290px；設(shè)計(jì)尺寸為：750x1624px（@2x）惧财。設(shè)計(jì)完成之后將設(shè)計(jì)稿的圖像大小拓展1.5倍即可得到1125x2436px（@3x）尺寸的設(shè)計(jì)稿巡扇。
在適配的時(shí)候需要注意，狀態(tài)欄由之前的40px增加到88px垮衷，標(biāo)簽底部預(yù)留68px用于放置主頁指示器厅翔，如下圖所示。
關(guān)于主頁指示器的適配涉及到兩種情況：底部出現(xiàn)標(biāo)簽欄搀突、工具欄等操作設(shè)計(jì)時(shí)刀闷，需要將底色下延68px并填充原有顏色，這樣的處理可以讓底部設(shè)計(jì)更佳簡潔舒適仰迁，沒有功能操作時(shí)甸昏，頁面底部不需要填充顏色，只需蓋住主頁指示器即可徐许。
對(duì)于大多數(shù)采用瀑布流的頁面來說施蜜，僅僅是屏幕高度上的變化，可以無視雌隅。但對(duì)于如：新手引導(dǎo)頁翻默、音樂播放器等需要單屏顯示的界面就需要重新布局。
2.ui組件布局設(shè)計(jì)
先說尺寸澄步，再詳細(xì)介紹各部分功能
狀態(tài)欄Status Bar
狀態(tài)欄簡單來說就是最上方顯示設(shè)備當(dāng)前狀態(tài)的相關(guān)信息冰蘑，比如時(shí)間，運(yùn)營商村缸，網(wǎng)絡(luò)狀態(tài)和電量祠肥。該部分為系統(tǒng)自帶的設(shè)備和系統(tǒng)的配置，分為深色和淺色兩種樣式梯皿，可根據(jù)實(shí)際情況選擇使用仇箱，不需要做設(shè)計(jì)修改。
狀態(tài)欄需注意：
全屏情況下东羹，可以暫時(shí)隱藏狀態(tài)欄剂桥，提高用戶體驗(yàn)感，但不宜隱藏太久属提，可以通過下滑等簡單的操作喚醒权逗。
導(dǎo)航欄navigation bars
導(dǎo)航欄位于頁面頂部美尸，狀態(tài)欄的下方。呈半透明狀斟薇，可填充為背景色师坎。在用戶全屏瀏覽時(shí)可進(jìn)行隱藏以便給用戶更好的體驗(yàn)。（一般在查看全屏照片堪滨，觀看視頻時(shí)胯陋，閱讀類軟件閱讀狀態(tài)時(shí)導(dǎo)航欄會(huì)自動(dòng)隱藏，然后可以通過簡單的操作如單擊屏幕喚醒導(dǎo)航欄）袱箱。
注意：當(dāng)不需要導(dǎo)航或需要多個(gè)控件來管理內(nèi)容時(shí)遏乔，請(qǐng)使用工具欄。
導(dǎo)航欄標(biāo)題：多數(shù)情況下標(biāo)題可以幫助用戶了解他們在看什么发笔。但標(biāo)題不是必須的盟萨，也可以空著。
大標(biāo)題和標(biāo)準(zhǔn)標(biāo)題
內(nèi)容需要特別強(qiáng)調(diào)時(shí)可以使用大標(biāo)題筐咧。大標(biāo)題方便用戶瀏覽和搜索鸯旁。
注意在iOS 13及更高版本中：
1.帶大標(biāo)題的導(dǎo)航欄不包含背景材質(zhì)和陰影。
2.可以隱藏導(dǎo)航欄的底部邊框（通過刪除導(dǎo)航欄的陰影）量蕊，其優(yōu)點(diǎn)在于標(biāo)題和內(nèi)容之間的聯(lián)系更緊密铺罢。
3.用戶滾動(dòng)內(nèi)容區(qū)域時(shí)，大標(biāo)題會(huì)轉(zhuǎn)換為標(biāo)準(zhǔn)標(biāo)題残炮，這時(shí)候邊框會(huì)重新出現(xiàn)韭赘，用來明確區(qū)分標(biāo)題和內(nèi)容邀层。
導(dǎo)航欄設(shè)計(jì)中需注意：
1.導(dǎo)航欄不要擠滿太多控件坡氯，通常僅包含以下元素：「標(biāo)題」、「返回按鈕」和「功能按鈕」五嫂，當(dāng)出現(xiàn)多個(gè)控件時(shí)苞冯，需將其折疊袖牙。
2.如果要使用多個(gè)文字按鈕，要預(yù)留足夠間隙以保證辨識(shí)性舅锄。
3.返回按鈕只提供返回上一頁的路徑鞭达。
Search Bars 搜索欄
分搜索框、搜索icon皇忿、隱藏式搜索框/icon
搜索框：最常見的入口形式即在頁面頂部以搜索框形式出現(xiàn)畴蹭。
這種形式對(duì)應(yīng)場景：凍結(jié)在頁面頂部，方便用戶快捷使用鳍烁，多用于內(nèi)容叨襟，電商類產(chǎn)品，搜索功能很重要幔荒。如淘寶糊闽，京東梳玫，小紅書，知乎墓怀，美團(tuán)都是這種方式汽纠。這種形式又分為以下幾種交互方式：
1.搜索框隨著上滑操作消失，反向滑動(dòng)到頂部時(shí)出現(xiàn)傀履，如微信，iOS 的備忘錄都是這種方式莉炉。
2.上滑時(shí)搜索框收起變?yōu)樗阉?icon钓账，反向滑動(dòng)時(shí)搜索框出現(xiàn)，如支付寶絮宁。
搜索icon：以搜索 icon 的形式出現(xiàn)在頁面右/左上角也是很常見的一種梆暮。
這種形式對(duì)應(yīng)的場景：搜索功能必不可少，但優(yōu)先級(jí)沒那么高绍昂，或頁面元素過多啦粹，以小icon 的形式出現(xiàn)節(jié)省空間。如支付寶-財(cái)富頁面和淘寶-微淘頁面窘游，搜索都是以 icon 的形式放在頁面右上角唠椭。
隱藏式搜索框/icon：搜索默認(rèn)隱藏，通過交互動(dòng)作觸發(fā)忍饰，如微信小程序頁面贪嫂，搜索是默認(rèn)隱藏的，下拉才會(huì)出現(xiàn)艾蓝，大家可以自己去體驗(yàn)一下力崇。
搜索欄設(shè)計(jì)需注意：
1.啟用清除按鈕。大多數(shù)搜索欄都包含一個(gè)清除按鈕赢织，可清除該字段的內(nèi)容亮靴。
適當(dāng)時(shí)啟用「取消」按鈕。大多數(shù)專用搜索欄都包含一個(gè)「取消」按鈕于置，該按鈕可立即終止搜索茧吊。
2.可以使用占位符或者搜索欄上方的單行簡短提示俱两，指導(dǎo)用戶可搜索的內(nèi)容饱狂。
Tab Bars 標(biāo)簽欄
位于屏幕底部或頂部兩種宪彩。與導(dǎo)航欄相同休讳，標(biāo)簽欄是半透明度的，可填充為背景色尿孔。橫屏或豎屏方向標(biāo)簽欄高度一致俊柔。在鍵盤輸入時(shí)被隱藏筹麸。其數(shù)量不做限制，但一般情況下手機(jī)3-5個(gè)的標(biāo)簽數(shù)量比較合適雏婶。
標(biāo)簽欄設(shè)計(jì)時(shí)需注意：
1.標(biāo)簽欄一般用在最外層的全局導(dǎo)航物赶，要一直可見。（模態(tài)視圖除外留晚，模態(tài)視圖不從屬于全局導(dǎo)航）
2.如果某標(biāo)簽沒法使用酵紫，不要?jiǎng)h除或者禁用標(biāo)簽，用戶會(huì)覺得不穩(wěn)定错维、難以預(yù)料奖地。要保持標(biāo)簽可點(diǎn)擊，并說明標(biāo)簽頁內(nèi)容不可用的原因赋焕。
3.不要把標(biāo)簽欄和工具欄混淆参歹。標(biāo)簽欄用來導(dǎo)航，工具欄是針對(duì)當(dāng)前視圖的操作隆判，兩者不會(huì)同時(shí)出現(xiàn)犬庇。
4.切換標(biāo)簽的時(shí)候，相關(guān)聯(lián)的視圖隨之轉(zhuǎn)換侨嘀，而不影響屏幕上其他位置的視圖臭挽，否則會(huì)破壞頁面的可預(yù)測性。
Toolbars 工具欄
通常在頁面底部出現(xiàn)飒炎。包含了對(duì)當(dāng)前頁面的相關(guān)操作埋哟。和導(dǎo)航欄、標(biāo)簽欄一樣郎汪，工具欄是半透明度的赤赊，可填充為背景色。橫屏或豎屏方向高度一致煞赢。在用戶不太可能需要他們的時(shí)候抛计，或者輸入鍵盤出現(xiàn)的情況下隱藏。（例如在Safari中照筑，用戶滑動(dòng)屏幕瀏覽網(wǎng)頁的時(shí)候工具欄是隱藏的吹截。）
工具欄設(shè)計(jì)中注意：
1.工具欄不要使用分段控件。工具欄對(duì)指定內(nèi)容操作凝危，分段控件用來切換視圖內(nèi)容波俄，兩者含義不同。如果需要切換頁面蛾默，可以使用標(biāo)簽欄進(jìn)行切換懦铺。
2.使用圖標(biāo)還是文字按鈕？3個(gè)以上建議圖標(biāo)支鸡，3個(gè)以下建議文字更加直觀明了冬念。
3.給文本按鈕留有充足空間趁窃。文本按鈕之間留有充足間距，更利于用戶理解與點(diǎn)擊急前。
3.關(guān)于尺寸
(1)設(shè)計(jì)稿尺寸
推薦750*1334px的尺寸來做設(shè)計(jì)稿醒陆，這是向上向下都最容易適配的尺寸，也可以用這個(gè)尺寸去適配Android版裆针。
若使用Sketch設(shè)計(jì)：使用375 * 667尺寸即可刨摩，開發(fā)在Xcode里也是使用這個(gè)尺寸。
導(dǎo)出的@2x圖適配IPhone 5/5S/5C/SE据块，6/6S/7/7S/8码邻；
導(dǎo)出的@3x圖適配Iphone 6/6S/7/7S/8 Plus，?IPhone X
若使用Photoshop設(shè)計(jì)：畫布就建成750 * 1334尺寸的即可另假。
導(dǎo)出原尺寸圖片加后綴@2x，適配IPhone 5/5S/5C/SE怕犁， 6/6S/7/7S/8边篮；
導(dǎo)出1.5倍圖片加后綴@3x，適配IPhone 6/6S/7/7S/8 Plus奏甫，?IPhone X
圖標(biāo)尺寸建議：APP應(yīng)用圖標(biāo)戈轿，建議使用1024*1024尺寸去做，逐級(jí)縮小去應(yīng)用到各種場景中阵子。
(2)邊距：
全局邊距:常用的全局邊距有32px思杯、30px、24px挠进、20px等等色乾，當(dāng)然除了這些還有更大或者更小的邊距，但上面說到的這些是最常用的领突，而且有一個(gè)特點(diǎn)就是數(shù)值全是偶數(shù)暖璧。個(gè)人認(rèn)為24px最為合理。
如iOS原生態(tài)頁面“通用”頁面是使用的是30px的邊距君旦。而微信支付寶分別使用的是20px和24px澎办。
卡片間距：通常間距最小不低于16px，過小的間距會(huì)造成用戶的緊張情緒金砍，信息也會(huì)更顯擁擠局蚀，當(dāng)然也不能太大，會(huì)使界面變得松散恕稠，間距的顏色設(shè)置可以與分割線一致琅绅，也可以更淺一些。常用的間距是20px谱俭、24px奉件、30px宵蛀、40px，具體卡片之間距離的設(shè)置需要根據(jù)界面的風(fēng)格以及卡片承載信息的多少來界定县貌。
以iOS系統(tǒng)界面（750*1334px）為例术陶，設(shè)置頁面不需要承載太多的信息，因此采用了較大的70px作為卡片間距煤痕，有利于減輕用戶的閱讀負(fù)擔(dān)梧宫；通知中心承載了大量的信息，過大的間距會(huì)讓瀏覽變得不連貫和界面視覺松散摆碉，因此采用了較小的16px作為卡片的間距塘匣。
而其他的應(yīng)用如微信卡片間距為40px，拼多多則為16px巷帝，聚劃算為20px
內(nèi)容間距：根據(jù)格式塔原則（簡單來說就是鄰近性原則）忌卤，內(nèi)容之間的距離決定著他們的關(guān)系，互相靠近的元素越容易被人們看做是有關(guān)聯(lián)的一組楞泼。而那些距離較遠(yuǎn)的則自動(dòng)劃分組外驰徊。
舉例：比如輕芒閱讀APP的主界面中，每一個(gè)應(yīng)用名稱都與它對(duì)應(yīng)的圖標(biāo)距離較近堕阔，保持親密的關(guān)系棍厂，也讓用戶的瀏覽變得更直觀。而如果當(dāng)應(yīng)用名稱與上下圖標(biāo)距離相同超陆，就分不出它是屬于上面還是下面牺弹，這會(huì)讓用戶產(chǎn)生錯(cuò)亂的感覺。同理时呀，日日煮app也遵循著此原則张漂。
（3）內(nèi)容布局
這里簡單介紹最常用的兩種布局形式：列表式布局和卡片式布局。
a. 列表式布局
以我們最常用的微信和 QQ 為例退唠，其「信息」頁面都是采用的列表式布局鹃锈，在采用這種布局形式的時(shí)候要注意列表舒適體驗(yàn)的最小高度是80px。而自如app和唯品會(huì)app信息列表分別為110px和106px瞧预。
b. 卡片式布局
其特點(diǎn)在于屎债，每張卡片的內(nèi)容和形式都可以相互獨(dú)立，互不干擾垢油，在使用卡片式布局的時(shí)候要注意卡片本身一般是白色的盆驹，而卡片之間的間距顏色一般是淺灰色，當(dāng)然不同產(chǎn)品風(fēng)格顏色可能不一樣滩愁，有些是淺灰色偏藍(lán)等躯喇。
雙欄卡片的布局形式，比較常見于以圖片信息為主導(dǎo)的 App。例如一些商城的商品陳列頁面廉丽。這種形式與卡片式類似倦微，但它能在一屏里顯示更多的內(nèi)容，至少4張卡片正压。同時(shí)欣福，由于分開左右兩欄的顯示，用戶可以更加方便地對(duì)比左右兩欄卡片的內(nèi)容焦履。
（4）界面圖片比例
對(duì)于圖片的尺寸和比例沒有嚴(yán)格的規(guī)范拓劝，設(shè)計(jì)師往往憑借經(jīng)驗(yàn)和感覺設(shè)置一個(gè)看起來不錯(cuò)的尺寸，但事實(shí)上我們是有章可循的嘉裤。運(yùn)用科學(xué)的手段設(shè)置圖片的尺寸郑临，可以獲得最優(yōu)的方案，常見的圖片尺寸有16:9屑宠、4:3厢洞、3:2、1:1和1:0.618（黃金比例）等典奉。
啟動(dòng)圖標(biāo)
在設(shè)計(jì)模板還沒有如今這么發(fā)達(dá)時(shí)犀变，設(shè)計(jì)師需要設(shè)計(jì)啟動(dòng)圖標(biāo)（1024x1024px）之后按照程序員的要求切出幾十個(gè)不同尺寸的圖標(biāo)。比如秋柄，在手機(jī)中@3x情況下桌面圖標(biāo)尺寸為180x180px，在@2x情況下為120x120px蠢正；在應(yīng)用商店圖標(biāo)需要使用的尺寸是1024x1024px骇笔；這個(gè)工作太煩人了，好在現(xiàn)在我們只需要專注在啟動(dòng)圖標(biāo)設(shè)計(jì)本身上了嚣崭。在蘋果給我們的這套資源中笨触，有 Template-AppIcons-iOS 這個(gè)文件。打開這個(gè)文件雹舀，用我們自己設(shè)計(jì)的啟動(dòng)圖標(biāo)替換掉智能對(duì)象里的內(nèi)容芦劣，你會(huì)發(fā)現(xiàn)所有尺寸的圖標(biāo)都變成了我們的圖標(biāo)。然后我們把背景隱藏说榆，切出這些圖標(biāo)即可虚吟。圖標(biāo)設(shè)計(jì)建議使用 AI 等矢量軟件，然后使用規(guī)范切出圖像資源签财。
4.字體
iOS 英文使用的是 San Francisco（SF 舊金山）字體串慰。中文使用的是蘋方黑體。（下載地址）中文蘋方的字族有不少可供選擇的粗細(xì)唱蒸，那么我們設(shè)計(jì)界面時(shí)需要根據(jù)信息的邏輯權(quán)重分配粗細(xì)：標(biāo)題應(yīng)該較粗邦鲫，說明字體應(yīng)該較細(xì)并且可以設(shè)計(jì)成灰色。其實(shí)字體的設(shè)計(jì)最重要的考量就是信息層級(jí)神汹。蘋果認(rèn)為 APP 的字體信息層級(jí)有：大標(biāo)題（Large Title）庆捺、標(biāo)題一（Title 1）古今、標(biāo)題二（Title 2）、標(biāo)題三（Title 3）滔以、頭條（Headline）捉腥、正文（Body）、標(biāo)注（Callout）醉者、副標(biāo)題（Subhead）但狭、注解（Footnote）、注釋一（Caption 1）撬即、注釋二（Caption 2）這幾種立磁。
注意：下圖中HIG對(duì)APP的字體建議（基于@2x）且全部是針對(duì)英文SF字體而言的
中文字體需要我們靈活運(yùn)用，以最終呈現(xiàn)效果為基準(zhǔn)調(diào)整剥槐。在設(shè)計(jì)具體界面時(shí)我們一定要以用戶的使用情景來考慮唱歧，把設(shè)計(jì)稿導(dǎo)入手機(jī)去思考行高與字體大小是否是可讀的。10pt（20px）是手機(jī)上顯示的最小字體粒竖，最大的應(yīng)該是目前的大標(biāo)題字體了颅崩，達(dá)到了34pt（68px）。
關(guān)于字體大小一般下面這個(gè)范圍是比較合適的：
頂部操作欄文字大小 ? ?34-38px
標(biāo)題文字大小 ? ? ? ? ? ? ?28-34px
正文文字大小 ? ? ? ? ? ? ?26-30px
輔助性文字大小 ? ? ? ? ? 20-24px
Tab bar文字大小 ? ? ? ? 20px
文字大小只是一個(gè)范圍蕊苗，這要根據(jù)設(shè)計(jì)的視覺效果來決定沿后，不要死記硬背，但是切記朽砰，字體大小要用偶數(shù)尖滚。
5.切圖及命名規(guī)范
切圖的方法有很多種：Sketch 和 Adobe XD 可以直接導(dǎo)出。Phtoshop 不具備這個(gè)功能瞧柔，但是我們可以使用 cutterman漆弄、藍(lán)湖等插件導(dǎo)出切圖。不管是自帶功能還是插件造锅，導(dǎo)出切圖都可以導(dǎo)出@2x和@3x圖撼唾，而設(shè)計(jì)稿只需要 iPhone6/7/8一套即可。
其具體方法是：
（1）Adobe XD 中哥蔚，將需要切出的元素在圖層面板（Ctrl + Y）點(diǎn)擊添加批量導(dǎo)出標(biāo)記記錄倒谷；然后點(diǎn)擊 菜單 - 導(dǎo)出- 所選畫板-用于iOS- 導(dǎo)出所有畫板即可。
（2）ps中肺素，在 Cutterman 官網(wǎng)下載 PS插件后恨锚，點(diǎn)擊窗口 -擴(kuò)展功能 - Cutterman 調(diào)出面板；然后選擇 iOS 并高亮選中@3X和@2X倍靡；在圖層面板里選中需要切圖的元素猴伶，點(diǎn)擊「導(dǎo)出選中圖層」即可。
（3）藍(lán)湖平臺(tái)，可以下載 Sketch他挎、Adobe XD 或 Photoshop 對(duì)應(yīng)的插件筝尾。然后在不同設(shè)計(jì)軟件插件中將設(shè)計(jì)稿上傳到藍(lán)湖（PS需要用插件標(biāo)記需要切出的元素），然后在藍(lán)湖網(wǎng)頁版點(diǎn)擊切圖按鈕办桨，選擇視網(wǎng)膜@2x和高清視網(wǎng)膜@3x筹淫，再點(diǎn)擊「下載該頁全部切圖」即可。
通常我們只需要對(duì) icon 進(jìn)行切圖即可呢撞，文字损姜、線條和一些標(biāo)準(zhǔn)的幾何形狀是不需要切圖的，例如搜索框只需要在標(biāo)注中描述它的尺寸殊霞、圓角大小摧阅、背景色值、不透明度即可绷蹲，開發(fā)人員就可以用代碼實(shí)現(xiàn)這種效果棒卷。
切圖命名規(guī)范
切圖最后需要命名成規(guī)范的格式，這樣方便程序員查找祝钢。切圖命名的格式建議全英文诅挑，如果大家英文不好需要想辦法提升一點(diǎn)簡單的詞匯量榛做。借由上述工具切圖后，需要整理切圖命名既峡，或在切圖之前對(duì)圖層命名亦可解滓。以下是切圖元素的中英文對(duì)照：
△ 切圖命名對(duì)照表
然后我們要按照「功能_類型_名稱_狀態(tài)@倍數(shù)」來命名每個(gè)切圖腿椎，不要使用數(shù)字或者符號(hào)作為開頭须板。
舉例：
a.l例如我們導(dǎo)航條上有一個(gè)搜索圖標(biāo)撕予，那么它的名稱就是：navi_icon_search_default@2x.png（導(dǎo)航_圖標(biāo)_搜索_正常@2x.png）使用下劃線進(jìn)行連接。
b.例如一個(gè)首頁處于正常狀態(tài)下的按鈕命名是 home_btn_nor@2x.png做裙。（首頁_按鈕_正常@2x.png）。
6.標(biāo)注
當(dāng)界面設(shè)計(jì)定稿之后肃晚，設(shè)計(jì)師需要對(duì)界面進(jìn)行標(biāo)注給開發(fā)工程師在還原界面時(shí)進(jìn)行參考锚贱。在一份設(shè)計(jì)稿中需要標(biāo)注的內(nèi)容是文字的字號(hào)大小、粗細(xì)关串、顏色拧廊、不透明度；界面的背景顏色晋修、不透明度吧碾；各個(gè)圖標(biāo)、列表墓卦、文字之間的間距倦春。
常用的標(biāo)注工具有藍(lán)湖、 Mark Man 、PX Cook像素大廚睁本、標(biāo)你妹啊尿庐。
a.藍(lán)湖平臺(tái)自動(dòng)標(biāo)注功能
將 Sketch 和 Adobe XD、Photoshop 的設(shè)計(jì)稿上傳至藍(lán)湖后呢堰，在藍(lán)湖平臺(tái)每個(gè)頁面左側(cè)有一個(gè)類似分享的圖標(biāo)抄瑟，點(diǎn)擊會(huì)獲取一個(gè)網(wǎng)址，這個(gè)網(wǎng)址就是系統(tǒng)生成的自動(dòng)標(biāo)注枉疼。它會(huì)自動(dòng)識(shí)別設(shè)計(jì)稿中字體大小和間距等皮假，甚至有代碼參考。
b.Markman 手動(dòng)標(biāo)注
Markman 同樣是國產(chǎn)標(biāo)注神器骂维。而且是我使用的第一個(gè)標(biāo)注工具惹资，選用底部工具可以進(jìn)行手動(dòng)標(biāo)注，標(biāo)注后導(dǎo)出 png標(biāo)注圖即可席舍。
c.使用Px像素大廚標(biāo)注
像素大廚同樣提供了自動(dòng)標(biāo)注布轿、手動(dòng)標(biāo)注兩種標(biāo)注方法。自動(dòng)標(biāo)注需要上傳設(shè)計(jì)稿来颤，手動(dòng)標(biāo)注需要設(shè)計(jì)師使用「尺子」來測量距離汰扭、「吸管」來吸取色號(hào)。在界面上部有單位選擇福铅，如果我們給 iOS 開發(fā)做標(biāo)注萝毛，那么單位最好選擇 PT，與開發(fā)環(huán)境一致滑黔。
d.「標(biāo)你妹啊」自動(dòng)標(biāo)注
國產(chǎn)標(biāo)注在線神器笆包。只需要登錄網(wǎng)站后，上傳設(shè)計(jì)稿可直接生成標(biāo)注網(wǎng)址略荡，發(fā)給程序員就可以啦庵佣。同樣提供代碼參考和自動(dòng)標(biāo)注間距尺寸等功能。
