一款APP，從設計(jì)稿到(dào)切圖（IOS）

純幹貨 彙集了之前的(de)五篇帖子的(de)精髓

9月(yuè)17日淩晨，IOS9正式推送，它使用(yòng)的(de)字體最終還是變了，我下面寫的(de)内容你(nǐ)們也(yě)要酌情更新，因爲我寫的(de)實在趕不上(shàng)它更新的(de)速度了(淚奔中...)

iOS9使用(yòng)的(de)西(xī)文(wén)字體由Helvetica Neue變更爲 San Francisco, 

iOS9中文(wén)字體由此前的(de)黑(hēi)體-簡變更爲蘋方黑(hēi)體

依舊聲明(míng)：這裏寫的(de)不是一種規範，隻是一種工(gōng)作方法，大(dà)家在具體工(gōng)作中，一定要靈活運用(yòng)。另外，技術(shù)的(de)更新是非常快的(de)，我寫的(de)這些可(kě)能(néng)某些東西(xī)已經和(hé)你(nǐ)們的(de)工(gōng)程師(shī)搭檔所用(yòng)的(de)方法不一樣了，所以，還是要靈活運用(yòng)~

我本身是一名GUI設計(jì)師(shī)，所以我隻站在GUI設計(jì)師(shī)的(de)角度去把APP從項目啓動到(dào)切片輸出的(de)過程寫一寫，相(xiàng)當于工(gōng)作流程的(de)介紹吧(ba)；公司不同，流程不盡相(xiàng)同，但(dàn)是終究還是能(néng)有(yǒu)些幫助。

這裏我們隻說IOS系統下的(de)設計(jì)，至于Android，因爲尺寸太多，涉及的(de)東西(xī)比較亂，我整理(lǐ)好以後再說吧(ba)。

頁面篇幅比較長，不推薦一次性看完，那樣你(nǐ)潛意識裏就會(huì)對它厭煩了，所以可(kě)以有(yǒu)時間讀(dú)一讀(dú)，看一看。

Part 1    項目立項

完善的(de)公司會(huì)把項目相(xiàng)關人(rén)員聚集起來，産品經理(lǐ)會(huì)把産品詳細的(de)用(yòng)原型展示出來，包括産品定位，市場(chǎng)需求，主打賣點，産品性質以及各模塊具體功能(néng)，邏輯跳轉演示一下；之後會(huì)評估項目用(yòng)時，各部門協調，項目啓動。

話(huà)不多說，接到(dào)原型，那我們應該做什(shén)麽準備工(gōng)作呢？

在項目設計(jì)之初，就該進行(xíng)項目歸檔整理(lǐ)，我的(de)習(xí)慣是“項目名稱+版本序列”；

沒有(yǒu)最正确的(de)工(gōng)作方法，隻有(yǒu)最适合自己的(de)工(gōng)作習(xí)慣。

我個(gè)人(rén)習(xí)慣把不同類型的(de)文(wén)件(jiàn)劃分(fēn)到(dào)不同類型的(de)文(wén)件(jiàn)夾裏，有(yǒu)的(de)設計(jì)師(shī)習(xí)慣全都(dōu)放(fàng)在一個(gè)文(wén)件(jiàn)夾裏，如(rú)果文(wén)件(jiàn)少(shǎo)還說的(de)過去，如(rú)果頁面過多，就知道這樣的(de)利弊了。

工(gōng)欲善其事必先利其器(qì)，基本上(shàng)我做界面設計(jì)用(yòng)的(de)最多的(de)就是PS和(hé)AI了，版本無所謂，用(yòng)著(zhe)舒服就行(xíng)，推薦版本高(gāo)一點的(de)，低版本好多方便功能(néng)都(dōu)沒有(yǒu)。

标注工(gōng)具：

PxCook，目前我還沒用(yòng)上(shàng)Mac，所以也(yě)不知道傳說中的(de)Sketch到(dào)底多神奇。PxCook在Windows上(shàng)标注還比較順手，雖然它還附帶切圖功能(néng)，但(dàn)是比較雞肋，不推薦用(yòng)它切圖。

切圖工(gōng)具：

Cutterman   官網地(dì)址 http://www.cutterman.cn/    一款PS的(de)插件(jiàn)，切圖非常方便，但(dàn)不支持綠(lǜ)色免安裝版本PS，而且對PS版本要求比較高(gāo)，針對CS 6的(de)已經不維護更新了。推薦安裝官方完整版PS cc，然後自行(xíng)破解。官網上(shàng)有(yǒu)安裝使用(yòng)教程，自己研究下吧(ba)，因爲我也(yě)是最近才開(kāi)始接觸這款插件(jiàn)。

Assistor PS  也(yě)是一款PS的(de)切圖标注插件(jiàn)，也(yě)被譽爲神器(qì)；我使用(yòng)了下，感覺相(xiàng)當不錯，就是标注還沒太适應，推薦一下這個(gè)。

标注工(gōng)具以及這兩款插件(jiàn)我都(dōu)會(huì)上(shàng)傳，至于安裝方法去“百度一下”吧(ba)，易學易用(yòng)。

Part 2    Photoshop

現在常用(yòng)的(de)幾種設計(jì)尺寸

1.  640*960      4時代的(de)尺寸，剛接觸APP設計(jì)用(yòng)的(de)是這個(gè)尺寸，拟物(wù)盛行(xíng)的(de)時代(現在用(yòng)這個(gè)尺寸設計(jì)的(de)應該比較少(shǎo)了吧(ba))；

2.  640*1136    5/5S/5C，IPhone更新，咱們設計(jì)也(yě)得跟著(zhe)與時俱進(應該還有(yǒu)人(rén)用(yòng)這個(gè)設計(jì)尺寸)，進入扁平的(de)時代了；

3.  750*1334    6   目前我做設計(jì)稿的(de)設計(jì)尺寸，IPhone6的(de)尺寸，向下可(kě)以适配4，5，向上(shàng)可(kě)以适配6 plus；我記得IP6推出後，我問總監應該用(yòng)什(shén)麽尺寸設計(jì)，他(tā)說用(yòng)IP6的(de)吧(ba)，好适配，切出來就是@2x了，改一改上(shàng)下都(dōu)能(néng)照(zhào)顧到(dào)。

推薦做設計(jì)稿的(de)時候使用(yòng)IPhone6的(de)尺寸進行(xíng)設計(jì)。

IP 6的(de)尺寸相(xiàng)比于IP 5來說，很多系統控件(jiàn)尺寸并未變化，隻是高(gāo)度也(yě)就是内容顯示區域發生了變化。下面是IPhone 6的(de)空白文(wén)檔，我建立了參考線。

文(wén)檔建立之初就設置好參考線是個(gè)很好的(de)工(gōng)作習(xí)慣，我希望更多的(de)設計(jì)師(shī)可(kě)以養成更好的(de)工(gōng)作習(xí)慣。

上(shàng)下的(de)參考線很容易設置，因爲是根據IPhone自身系統設置的(de)，左右的(de)參考線我習(xí)慣設置爲24px，也(yě)就是顯示内容距離(lí)邊框的(de)距離(lí)。這不是絕對的(de)，我和(hé)總監研究過，究竟是設置爲左右30px還是24px比較好，通過對國内國外各種APP的(de)對比，覺得24px更适合一些，不寬不窄，這個(gè)完全是設計(jì)師(shī)個(gè)人(rén)的(de)設計(jì)習(xí)慣，所以不要當成什(shén)麽規範，确切的(de)說，整個(gè)屏幕你(nǐ)都(dōu)可(kě)以随便做，但(dàn)是我們這裏說的(de)是正常頁面。

Part 3    頁面标注

标注是重中之重，工(gōng)程師(shī)能(néng)不能(néng)完整的(de)還原設計(jì)稿，很大(dà)一部分(fēn)取決于标注；如(rú)果不清楚你(nǐ)該怎麽标，一定要和(hé)工(gōng)程師(shī)溝通！

每個(gè)工(gōng)程師(shī)實現效果的(de)方法不同，我在這裏所說的(de)，是我的(de)标注習(xí)慣，但(dàn)應該适用(yòng)于大(dà)部分(fēn)的(de)設計(jì)師(shī)和(hé)工(gōng)程師(shī)。

不需要每一張效果圖都(dōu)進行(xíng)标注，你(nǐ)标注的(de)頁面能(néng)保證工(gōng)程師(shī)開(kāi)發每個(gè)頁面的(de)時候都(dōu)能(néng)順利進行(xíng)即可(kě)；

這裏的(de)标注軟件(jiàn)使用(yòng)的(de)是PxCook，先标一個(gè)空白文(wén)檔，看看都(dōu)需要什(shén)麽吧(ba)

這裏要說一句，PxCook雖然可(kě)以自動讀(dú)取顔色，但(dàn)是還不能(néng)對PSD文(wén)檔裏設置的(de)透明(míng)度讀(dú)取，所以如(rú)果你(nǐ)用(yòng)了透明(míng)色，推薦你(nǐ)用(yòng)文(wén)字标注直接寫出來原色值以及透明(míng)度。

基本上(shàng)我并不使用(yòng)PXCook裏面的(de)顔色标注工(gōng)具，而是使用(yòng)文(wén)字标注工(gōng)具，因爲要标識兩種色值，PxCook隻能(néng)顯示一種色值。

一般我的(de)習(xí)慣是PS和(hé)标注軟件(jiàn)同時打開(kāi)，因爲有(yǒu)時候标注軟件(jiàn)并不能(néng)完全的(de)把PSD文(wén)件(jiàn)裏的(de)東西(xī)标注出來，所以标注也(yě)要靈活運用(yòng)，如(rú)果無法标注，就到(dào)PS裏查看一下，然後再使用(yòng)文(wén)字标注說明(míng)一下。

标注顔色是使用(yòng)16進制(zhì)，還是RGB：

都(dōu)用(yòng)得到(dào)，要看實現什(shén)麽東西(xī)，建議标注顔色時，兩種色值表達都(dōu)标上(shàng)(16進制(zhì)&RGB)。

你(nǐ)需要标注的(de)内容有(yǒu)：

1.文(wén)字需要提供：字體大(dà)小(xiǎo)(px),字體顔色；

2.頂部标題欄的(de)背景色值，透明(míng)度；

3.标題欄下方以及Tab bar上(shàng)方其實有(yǒu)一條分(fēn)割線，需要提供色值；

4.内容顯示區域的(de)背景色(如(rú)果是全部頁面白色，那就和(hé)工(gōng)程師(shī)說一句就行(xíng))；

5.底部Tab bar的(de)背景色值。

因爲頁面的(de)種類成千上(shàng)萬，我想每種頁面都(dōu)講一下，但(dàn)是不現實，希望可(kě)以舉一反三。

下面的(de)是一個(gè)比較普通的(de)首頁頁面，但(dàn)是基本上(shàng)一款APP中應該标的(de)元素都(dōu)有(yǒu)了~

一般頁面你(nǐ)需要标注這些地(dì)方：

所有(yǒu)元素統一距離(lí)屏幕最左24px(全局性的(de)數據可(kě)以直接和(hé)工(gōng)程師(shī)溝通，也(yě)可(kě)以标注，推薦标注出來)

1.标題欄：背景色，标題欄文(wén)字大(dà)小(xiǎo)，文(wén)字顔色(不再贅述)；

2.Banner：所有(yǒu)撐滿橫屏的(de)大(dà)圖，不需要橫向尺寸，把高(gāo)度标出了就可(kě)以了;

3.菜單圖标：

圖标的(de)大(dà)小(xiǎo)和(hé)圖标的(de)可(kě)點擊區域不一定一緻

也(yě)就是說，圖标可(kě)以做的(de)很小(xiǎo)，但(dàn)是爲了保證點擊的(de)準确性和(hé)流暢性，工(gōng)程師(shī)可(kě)以把可(kě)點擊區域設置的(de)很大(dà)，這樣标注和(hé)切圖的(de)時候就要注意，标注的(de)是可(kě)點擊區域的(de)大(dà)小(xiǎo)，切圖切的(de)也(yě)是可(kě)點擊區域的(de)大(dà)小(xiǎo)，也(yě)就是用(yòng)透明(míng)區域去補上(shàng)，否則圖片會(huì)模糊。

在設計(jì)的(de)時候就要考慮可(kě)點擊區域的(de)範圍，比如(rú)X寶購(gòu)物(wù)車(chē)頁面左側的(de)小(xiǎo)圈，可(kě)點擊區域要比實際小(xiǎo)圈尺寸大(dà)很多。

這種類型的(de)圖标需要标注圖标點擊區域大(dà)小(xiǎo)，圖标距離(lí)屏幕最左最右以及上(shàng)下的(de)距離(lí)。至于圖标的(de)間距，因爲有(yǒu)些時候可(kě)能(néng)     設計(jì)師(shī)不能(néng)完全做到(dào)1px不差，所以我基本不标，交給工(gōng)程師(shī)讓他(tā)們去處理(lǐ)，其實等距排列的(de)圖标不需要标間距，因爲工(gōng)程師(shī)還要動态适應不同的(de)屏幕，标了間距也(yě)是白标(還是要和(hé)你(nǐ)的(de)搭檔溝通怎麽去标注）；

4.模塊間隔：這個(gè)位置其實不是太重要，我習(xí)慣标注上(shàng)這裏，麻煩能(néng)少(shǎo)則少(shǎo)。

5.圖片+文(wén)字：這個(gè)應該比較常見，隻标注一個(gè)單位(圖+文(wén))就可(kě)以了。

圖片需要标注寬高(gāo)，因爲工(gōng)程師(shī)要設置圖片區域，從後台調取，可(kě)以這麽說，軟件(jiàn)裏除了橫屏撐滿的(de)圖，基本上(shàng)所有(yǒu)的(de)圖片都(dōu)要标注寬高(gāo)。

圖片距離(lí)上(shàng)下左右的(de)距離(lí)，文(wén)字大(dà)小(xiǎo)顔色，這裏的(de)文(wén)字其實算兩個(gè)控件(jiàn)，标題文(wén)字以及說明(míng)文(wén)字，需要單獨标出。

Tab Bar：

這個(gè)位置其實比較特殊，你(nǐ)可(kě)以單獨标注圖标大(dà)小(xiǎo)+文(wén)字大(dà)小(xiǎo)；還可(kě)以圖标文(wén)字算作一個(gè)控件(jiàn)，整個(gè)切出來；

我們工(gōng)程師(shī)的(de)習(xí)慣是用(yòng)整個(gè)的(de)，也(yě)就是圖标+文(wén)字算作一個(gè)ICON，所以我基本不怎麽标注單獨的(de)圖标(這裏可(kě)以和(hé)你(nǐ)的(de)搭檔去溝通一下，看他(tā)是什(shén)麽開(kāi)發習(xí)慣)。

關于列表頁類型的(de)标注問題

普通的(de)列表有(yǒu)兩種方法(去問你(nǐ)的(de)搭檔，他(tā)喜歡用(yòng)什(shén)麽方法)：

1.标出行(xíng)高(gāo)，行(xíng)内元素居中；

2.标出行(xíng)内元素，元素上(shàng)下間距，确定行(xíng)高(gāo)；

每種元素的(de)位置如(rú)何确定：

通常标注的(de)都(dōu)是元素距離(lí)屏幕最左側的(de)距離(lí)，比如(rú)上(shàng)圖的(de)圖标元素距離(lí)左側24px，文(wén)字元素距離(lí)左側100px。

标注這個(gè)東西(xī)沒有(yǒu)固定的(de)方法，工(gōng)程師(shī)的(de)開(kāi)發習(xí)慣不同，标注方法也(yě)不同。

該怎麽标注雖然可(kě)以在網上(shàng)找到(dào)方法，但(dàn)那不一定适合你(nǐ)，一定和(hé)自己的(de)搭檔勤溝通，方法是死的(de)，人(rén)是活的(de)……

所有(yǒu)的(de)頁面标注總結起來就是：标文(wén)字，标圖片，标間距，标區域；

(上(shàng)述圖标出現了45px的(de)單數，因爲軟件(jiàn)自動吸附上(shàng)去了顯示了圖标本身的(de)尺寸，切圖的(de)時候記得輸出個(gè)偶數尺寸的(de)切片)

Part 4   切片資源的(de)輸出

切之前務必要和(hé)你(nǐ)的(de)工(gōng)程師(shī)搭檔溝通一下，該如(rú)何去切才能(néng)配合他(tā)的(de)開(kāi)發。

全局性的(de)切圖常見問題

①  你(nǐ)的(de)所有(yǒu)設計(jì)尺寸，包括圖形效果，應該盡量使用(yòng)偶數。

技術(shù)開(kāi)發使用(yòng)的(de)尺寸是設計(jì)稿像素尺寸的(de)一半，也(yě)就是說，如(rú)果你(nǐ)用(yòng)24px的(de)字體，技術(shù)那邊就是設置爲12px；

所以标注的(de)時候務必使用(yòng)偶數，爲了保證最佳的(de)設計(jì)效果，避免出現0.5像素的(de)虛邊。

②  切圖尺寸應該提供幾套？

ico_car.png                     IPhone2G，3G，3GS使用(yòng)(好像沒人(rén)用(yòng)這手機了吧(ba))

ico_car@2x.png              IPhone4，5，6優先加載此尺寸圖片(不是必須使用(yòng)這個(gè)尺寸，是優先加載調用(yòng)這個(gè)尺寸)

ico_car@3x.png              IPhone6 plus使用(yòng)的(de)尺寸

可(kě)以簡單的(de)理(lǐ)解爲倍數關系(其實是爲了滿足不同分(fēn)辨率，我覺得不用(yòng)過于深究)，如(rú)果你(nǐ)使用(yòng)IPhone 6尺寸做設計(jì)稿，那麽切片輸出就是@2x，縮小(xiǎo)2倍就是@1x，擴大(dà)1.5倍就是@3x了。

理(lǐ)論上(shàng)，爲了達到(dào)最好的(de)視覺效果，你(nǐ)應該輸出三套尺寸，推薦輸出三種尺寸的(de)切片資源。

我的(de)工(gōng)程師(shī)搭檔要求我給兩套尺寸就可(kě)以，也(yě)就是@1x @2x的(de)兩種尺寸，因爲我們沒有(yǒu)6 plus的(de)測試機，所以看不到(dào)效果，據他(tā)說應該不會(huì)太失真，但(dàn)是爲了保證效果，我還是給三套尺寸。

另外現在幾乎看不到(dào)3GS了，所以需不需要提供一倍圖，還是要和(hé)工(gōng)程師(shī)討(tǎo)論一下~

@1x  @2x  @3x是開(kāi)發工(gōng)具Xcode軟件(jiàn)需要的(de)UI資源，命好名稱後，IOS設備會(huì)自動的(de)選取合适尺寸。

③共用(yòng)資源的(de)圖片，輸出一張就可(kě)以

類似這種重複的(de)按鈕之類的(de)，隻要提供一張共用(yòng)的(de)資源就可(kě)以了；上(shàng)面的(de)文(wén)字是技術(shù)寫上(shàng)去的(de)。

理(lǐ)論上(shàng)按照(zhào)最佳視覺效果，你(nǐ)應該提供多尺寸的(de)圖片；但(dàn)通常我隻提供最大(dà)尺寸的(de)一張圖片即可(kě)，這一點要和(hé)你(nǐ)的(de)搭檔溝通好，卻問他(tā)需要什(shén)麽方式。

④切片的(de)輸出格式

文(wén)件(jiàn)→存儲爲Web所用(yòng)格式

位圖格式：PNG 24，PNG 8，JPG

在JPG和(hé)PNG兩種格式圖片大(dà)小(xiǎo)相(xiàng)差不是很大(dà)的(de)情況下，推薦使用(yòng)PNG；如(rú)果圖片大(dà)小(xiǎo)相(xiàng)差很大(dà)，使用(yòng)JPG。

歡迎頁面，ICON一定要使用(yòng)PNG格式，在不影響視覺效果的(de)前提下，可(kě)以考慮使用(yòng)PNG 8；

矢量圖格式：PDF，SVG

IOS原生支持的(de)兩種矢量圖片格式，但(dàn)是支持的(de)一般，并不能(néng)保證100%把所有(yǒu)圖片效果渲染出來；

爲了保險起見，我通常不使用(yòng)這兩種格式，推薦還是使用(yòng)位圖，如(rú)果以後技術(shù)提升，100%支持SVG和(hé)PDF這種矢量格式圖，那個(gè)時候也(yě)許不用(yòng)提供這麽多套尺寸了~

⑤圖标的(de)點擊區域

最小(xiǎo)點擊區域問題：

IOS人(rén)機指導手冊裏推薦的(de)最小(xiǎo)可(kě)點擊元素的(de)尺寸是44*44 point(點)，在設備上(shàng)1 point等于1像素，所以轉換成像素就是44*44像素，換算成物(wù)理(lǐ)尺寸大(dà)概是7mm左右吧(ba)（人(rén)機工(gōng)效學研究中得出的(de)結論：用(yòng)食指操作，觸擊範圍在7mm左右合适；用(yòng)拇指操作，範圍在9mm左右合适)。據說這個(gè)尺寸下，不容易出現誤操作，誤點擊；小(xiǎo)于這個(gè)尺寸，點擊就會(huì)變的(de)有(yǒu)些不太準确，一向注重用(yòng)戶體驗的(de)蘋果公司定義這個(gè)最小(xiǎo)點擊尺寸也(yě)不是沒根據的(de)……

所以現在做設計(jì)，爲了圖标精緻，你(nǐ)可(kě)以把圖标做的(de)小(xiǎo)一些，但(dàn)是切圖輸出的(de)時候，要考慮用(yòng)戶點擊難易度的(de)問題，所以，切圖的(de)時候，涉及到(dào)需要點擊的(de)小(xiǎo)圖标的(de)時候，普通屏幕還是切44px大(dà)小(xiǎo)，高(gāo)清屏就需要切88px，不夠的(de)地(dì)方用(yòng)透明(míng)區域補全，否則用(yòng)戶點擊的(de)時候會(huì)比較困難，會(huì)很不靈敏。

⑥圖片圖标的(de)不同狀态

每種圖标或者圖片如(rú)果有(yǒu)不同狀态，每一種不同的(de)狀态都(dōu)需要進行(xíng)切片輸出。

比如(rú)按鈕有(yǒu)正常(normal)，按下(pressed)，選中(selected)，禁用(yòng)(disabled)等多種狀态，

最常出現的(de)就是normal→pressed→normal；某些特定按鈕控件(jiàn)會(huì)出現選中狀态，具體情況具體分(fēn)析吧(ba)。這裏顯示的(de)是你(nǐ)要知道按鈕可(kě)能(néng)有(yǒu)幾種狀态……

Ps：這段文(wén)字是後加的(de)哈~好多人(rén)問我移動端的(de)按鈕一般是沒有(yǒu)選中狀态的(de)，其實程序裏是有(yǒu)判斷這個(gè)狀态的(de)，隻是你(nǐ)接觸的(de)産品中并未出現這種狀态，那你(nǐ)就不需要輸出選中狀态的(de)切片，但(dàn)是你(nǐ)需要知道某些特定按鈕控件(jiàn)存在這個(gè)狀态，比如(rú)某些遊戲按鈕(因爲我以前做手機遊戲的(de)時候偶爾會(huì)出現這種狀态)~在此感謝提出疑問的(de)朋友(yǒu)！

切片的(de)命名規則

命名并不是統一的(de)規範，不同的(de)公司不同的(de)工(gōng)程師(shī)有(yǒu)著(zhe)自己不同的(de)命名規範和(hé)命名習(xí)慣，但(dàn)是大(dà)緻還是有(yǒu)迹可(kě)循的(de)，一般是：

切片種類+功能(néng)+圖片描述（可(kě)有(yǒu)可(kě)無）+狀态.png

名稱應使用(yòng)英文(wén)命名(中文(wén)不識别，推薦小(xiǎo)寫字母)，不要以數字或者符号當作開(kāi)頭，使用(yòng)下劃線進行(xíng)連接。

舉個(gè)例子：一個(gè)首頁的(de)處于正常狀态的(de)确定按鈕

btn_sure_nor.png

btn_sure_nor@2x.png

切片種類是按鈕（btn）；功能(néng)是确定(sure)；狀态是normal(正常)

我通常是以這種命名方式進行(xíng)命名，如(rú)果你(nǐ)的(de)公司有(yǒu)設計(jì)文(wén)檔，去看看之前留下的(de)命名規範，如(rú)果沒有(yǒu)，那就去問工(gōng)程師(shī)吧(ba)。

Tab bar(底部欄)

說說Tab bar這裏，因爲比較特殊。

如(rú)果單純的(de)隻有(yǒu)圖标，自然是隻切圖标就好了；

早上(shàng)和(hé)工(gōng)程師(shī)溝通，這裏該怎麽切，工(gōng)程師(shī)給的(de)建議是

圖标+文(wén)字的(de)模式，圖标最好單獨切，文(wén)字後面程序加上(shàng)去。

另外記住，同一模塊的(de)圖标切片大(dà)小(xiǎo)保持一緻，上(shàng)圖的(de)四個(gè)圖标本身尺寸并不相(xiàng)同，但(dàn)是切圖的(de)時候你(nǐ)需要切出相(xiàng)同尺寸的(de)陰影大(dà)小(xiǎo)，便于工(gōng)程師(shī)開(kāi)發使用(yòng)。

該怎麽切圖，還是要和(hé)你(nǐ)的(de)工(gōng)程師(shī)搭檔去溝通一下；

以下是常用(yòng)命名，這是我的(de)命名習(xí)慣，并不是規範，所以要靈活，如(rú)果實在不知道英文(wén)，就用(yòng)拼音(yīn)代替也(yě)行(xíng)。

Part 5   工(gōng)作常用(yòng)數據

你(nǐ)需要使用(yòng)的(de)字體：

如(rú)果是用(yòng)Mac設計(jì)的(de)小(xiǎo)夥伴，直接就用(yòng)蘋果黑(hēi)體字就好了；不過用(yòng)Windows的(de)就沒那麽幸運了，PC上(shàng)還沒和(hé)IPhone默認字體效果完全一樣的(de)字體，通常都(dōu)是拿其他(tā)字體代替。

蘋果麗(lì)黑(hēi)    Hiragino Sans GB W3(普通)/W6(粗體)      比較接近IPhone字體的(de)一款字體，這是我之前一直使用(yòng)的(de)設計(jì)字體。

黑(hēi)體-簡      STHeitiSC-Light         Mac裏面拷出來的(de)蘋果黑(hēi)體，比較貼近IPhone手機字體，目前在用(yòng)。

我會(huì)把這兩款字體上(shàng)傳，有(yǒu)需要可(kě)以下載。

關于字體大(dà)小(xiǎo)的(de)問題

頂部操作欄文(wén)字大(dà)小(xiǎo)      34-38px

标題文(wén)字大(dà)小(xiǎo)                28-34px

正文(wén)文(wén)字大(dà)小(xiǎo)                26-30px

輔助性文(wén)字大(dà)小(xiǎo)             20-24px

Tab bar文(wén)字大(dà)小(xiǎo)           20px

文(wén)字大(dà)小(xiǎo)隻是一個(gè)範圍，這要根據設計(jì)的(de)視覺效果來決定，不要死記硬背，但(dàn)是切記，字體大(dà)小(xiǎo)要用(yòng)偶數。

你(nǐ)需要知道的(de)IPhone設計(jì)尺寸(這裏是一個(gè)整屏的(de)尺寸包括了狀态欄)

320*480         IPhone3GS   (我沒見過3GS實體機，隻在網上(shàng)見過圖片，但(dàn)你(nǐ)需要知道這個(gè)尺寸)

640*960         IPhone 4/4s  (4時代的(de)設計(jì)尺寸)

640*1136       IPhone 5/5s/5c  （5時代的(de)設計(jì)尺寸，雖然現在出來6/6 plus，但(dàn)還有(yǒu)人(rén)再用(yòng)這個(gè)尺寸設計(jì)）