一款APP,從設計稿到切圖(IOS)

文章分類:設計前沿 發布時間2014-11-24 原文鏈接:UI中國 閱讀(313)


純干(gan)貨 匯集了之(zhi)前的(de)五篇帖子的(de)精髓

9月(yue)17日(ri)凌晨,IOS9正式推送,它使用(yong)的字體(ti)最終還是(shi)變了,我下面寫(xie)的內(nei)容你(ni)們也(ye)要酌情更(geng)(geng)新(xin),因為我寫(xie)的實在趕不上它更(geng)(geng)新(xin)的速度了(淚奔中...)

iOS9使用的西文字體由Helvetica Neue變更為 San Francisco

iOS9中文字體由此前的黑體-簡變更為蘋方黑體


依舊聲明:這里寫的不是一種規范,只是一種工作方法,大家在具體工作中,一定要靈活運用。另外,技術的更新是非常快的,我寫的這些可能某些東西已經和你們的工程師搭檔所用的方法不一樣了,所以,還是要靈活運用~

我本身是(shi)一名GUI設計(ji)師,所(suo)以我只站(zhan)在GUI設計(ji)師的(de)角度去(qu)把APP從項目啟動(dong)到切片輸出的(de)過程(cheng)寫一寫,相當于工作流(liu)程(cheng)的(de)介(jie)紹(shao)吧;公司不同,流(liu)程(cheng)不盡相同,但是(shi)終究(jiu)還是(shi)能有些幫助。

這里我(wo)們只說IOS系統(tong)下的(de)設計(ji),至于Android,因為尺寸太多,涉(she)及的(de)東西(xi)比較亂(luan),我(wo)整理好以后再(zai)說吧(ba)。

頁面(mian)篇幅比較長(chang),不推(tui)薦一(yi)次性看完,那樣你潛意識里就會對它厭煩了,所以可(ke)以有(you)時間(jian)讀一(yi)讀,看一(yi)看。

Part 1    項目立項

完善的公司(si)會把項目(mu)相(xiang)關(guan)人(ren)員聚(ju)集起來,產(chan)品經理會把產(chan)品詳細的用原型展示出(chu)來,包括產(chan)品定位,市場需求,主(zhu)打賣點,產(chan)品性質(zhi)以及各(ge)模塊具體功能,邏(luo)輯跳轉演(yan)示一(yi)下;之(zhi)后會評估項目(mu)用時,各(ge)部(bu)門協調,項目(mu)啟動(dong)。

話(hua)不多說,接到原(yuan)型(xing),那我們應該做(zuo)什么(me)準備工作呢?

在項目(mu)設計之初(chu),就該進行(xing)項目(mu)歸檔整理,我(wo)的習慣是“項目(mu)名(ming)稱+版(ban)本序列”;

沒(mei)有(you)最(zui)正確的工作方(fang)法,只(zhi)有(you)最(zui)適合(he)自己的工作習慣。

我個人(ren)習慣把不同(tong)(tong)類型的(de)(de)文(wen)件劃(hua)分到(dao)不同(tong)(tong)類型的(de)(de)文(wen)件夾(jia)里(li),有的(de)(de)設計師習慣全都放在(zai)一(yi)個文(wen)件夾(jia)里(li),如果文(wen)件少還(huan)說的(de)(de)過(guo)去,如果頁面(mian)過(guo)多,就知道這(zhe)樣的(de)(de)利(li)弊了。

工欲善(shan)其(qi)事必(bi)先利其(qi)器,基本(ben)上我做界面設計用(yong)的(de)最(zui)多(duo)的(de)就是PS和AI了(le),版(ban)本(ben)無所謂(wei),用(yong)著舒(shu)服就行,推(tui)薦版(ban)本(ben)高一點(dian)的(de),低版(ban)本(ben)好多(duo)方(fang)便(bian)功能都沒有。

標注工具:

PxCook,目前(qian)我還(huan)沒用上(shang)Mac,所以也不(bu)知道傳說中(zhong)的Sketch到(dao)底多神奇。PxCook在Windows上(shang)標注還(huan)比較順手(shou),雖然它還(huan)附帶切(qie)圖功能,但是比較雞(ji)肋(lei),不(bu)推薦用它切(qie)圖。

切圖工具:

Cutterman       一款PS的(de)插(cha)件,切圖(tu)非常方(fang)便,但不支持綠(lv)色免安(an)裝(zhuang)版本(ben)PS,而且對PS版本(ben)要求比較(jiao)高,針(zhen)對CS 6的(de)已經不維護更新了。推薦安(an)裝(zhuang)官(guan)方(fang)完整版PS cc,然(ran)后(hou)自行破解。官(guan)網上(shang)有(you)安(an)裝(zhuang)使用教程,自己研(yan)究(jiu)下(xia)吧,因(yin)為我也是(shi)最近才開始接觸這款插(cha)件。

Assistor PS  也(ye)是一款PS的(de)切圖標注插件,也(ye)被譽為神器;我使用了下(xia),感(gan)覺(jue)相(xiang)當(dang)不錯,就是標注還沒太適應,推薦一下(xia)這個。

標注工具以及這(zhe)兩款插(cha)件我都會上傳,至于(yu)安裝方法去(qu)“百(bai)度(du)一下”吧,易學易用。


Part 2    Photoshop

現在常用的幾種設計尺寸

1.  640*960      4時代的尺(chi)寸(cun),剛接觸(chu)APP設(she)(she)計(ji)用的是這個尺(chi)寸(cun),擬物盛行的時代(現(xian)在用這個尺(chi)寸(cun)設(she)(she)計(ji)的應(ying)該比較少了吧);

2.  640*1136    5/5S/5C,IPhone更新,咱們(men)設計也得跟(gen)著與時(shi)俱進(應該(gai)還有人(ren)用這個(ge)設計尺寸),進入扁平(ping)的(de)時(shi)代了;

3.  750*1334    6   目前我(wo)做設計(ji)稿的(de)設計(ji)尺寸(cun),IPhone6的(de)尺寸(cun),向下(xia)可(ke)以適(shi)配(pei)(pei)4,5,向上可(ke)以適(shi)配(pei)(pei)6 plus;我(wo)記(ji)得IP6推出(chu)后,我(wo)問(wen)總監應該用什么尺寸(cun)設計(ji),他(ta)說用IP6的(de)吧,好適(shi)配(pei)(pei),切出(chu)來就是@2x了,改一(yi)改上下(xia)都能照顧(gu)到。

推薦做設計(ji)稿的時候使用IPhone6的尺寸進行設計(ji)。

IP 6的尺寸(cun)(cun)相(xiang)比于IP 5來說,很多系(xi)統控件尺寸(cun)(cun)并未變化,只是高度(du)也就是內容顯(xian)示區域發生了變化。下面是IPhone 6的空白文(wen)檔,我建立(li)了參考線。

文檔建立之初就設置好參考線是個(ge)很好(hao)的(de)工(gong)作習(xi)慣(guan)(guan),我希望更多的(de)設計師可以養成更好(hao)的(de)工(gong)作習(xi)慣(guan)(guan)。

上(shang)下的參考線很容易設(she)置(zhi),因(yin)為是(shi)(shi)根據IPhone自身(shen)系(xi)統設(she)置(zhi)的,左右的參考線我習慣設(she)置(zhi)為24px,也就是(shi)(shi)顯示內容距(ju)離邊(bian)框的距(ju)離。這(zhe)不(bu)(bu)(bu)是(shi)(shi)絕對(dui)(dui)的,我和總監研究過,究竟是(shi)(shi)設(she)置(zhi)為左右30px還是(shi)(shi)24px比(bi)較好,通過對(dui)(dui)國內國外各種APP的對(dui)(dui)比(bi),覺得24px更適合一(yi)些,不(bu)(bu)(bu)寬(kuan)不(bu)(bu)(bu)窄(zhai),這(zhe)個(ge)(ge)完全是(shi)(shi)設(she)計師個(ge)(ge)人的設(she)計習慣,所以(yi)不(bu)(bu)(bu)要當成什么規范,確切的說,整(zheng)個(ge)(ge)屏幕你都可以(yi)隨(sui)便做,但(dan)是(shi)(shi)我們這(zhe)里說的是(shi)(shi)正(zheng)常頁面。


Part 3    頁面標注

標注是重中之重,工程師能不能完整的還原設計稿,很大一部分取決于標注;如果不清楚你該怎么標,一定要和工程師溝通!

每個工程(cheng)師(shi)實(shi)現效果(guo)的(de)(de)方法(fa)不(bu)同,我在這里(li)所(suo)說的(de)(de),是我的(de)(de)標注習慣,但(dan)應該(gai)適用于大部分的(de)(de)設計師(shi)和工程(cheng)師(shi)。

不需要每一張效果圖都進行標注,你標(biao)注的頁面(mian)能保證工程師開發每(mei)個頁面(mian)的時(shi)候都能順利(li)進行(xing)即可;

這里的標注軟件使用的是PxCook,先標一個(ge)空白文(wen)檔(dang),看看都需要什(shen)么吧

這里(li)要(yao)說一句,PxCook雖(sui)然可以自動(dong)讀(du)取顏(yan)色,但是還不能對PSD文檔里(li)設置(zhi)的透(tou)明(ming)度(du)讀(du)取,所以如(ru)果你用了透(tou)明(ming)色,推薦你用文字標(biao)注(zhu)直接寫出來原(yuan)色值(zhi)以及透(tou)明(ming)度(du)。

 基本上我并不使用PXCook里面的(de)顏色(se)標注工具,而是(shi)使用文字標注工具,因為要(yao)標識兩種(zhong)色(se)值(zhi)(zhi),PxCook只能(neng)顯示一(yi)種(zhong)色(se)值(zhi)(zhi)。

一(yi)般(ban)我(wo)的(de)(de)習慣(guan)是(shi)PS和標(biao)注(zhu)軟件(jian)同時(shi)打開(kai),因為(wei)有時(shi)候(hou)標(biao)注(zhu)軟件(jian)并不能完全的(de)(de)把PSD文件(jian)里(li)的(de)(de)東西標(biao)注(zhu)出來,所以標(biao)注(zhu)也(ye)要靈活運用,如果無法標(biao)注(zhu),就到(dao)PS里(li)查(cha)看一(yi)下(xia),然后再使用文字標(biao)注(zhu)說(shuo)明一(yi)下(xia)。


標注顏色是使用16進制,還是RGB:

都用得到,要看實現什么東西,建議標注顏色時,兩種色值表達都標上(16進制&RGB)。

你(ni)需(xu)要(yao)標(biao)注的內容(rong)有:

1.文字需要提供:字體大小(px),字體顏色;

2.頂部標題欄的背景色值,透明度;

3.標題欄下方以及Tab bar上方其實有一條分割線,需要提供色值;

4.內容顯示區域的背景色(如果是全部頁面白色,那就和工程師說一句就行);

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

因為頁面的種(zhong)類成(cheng)千上萬(wan),我想每種(zhong)頁面都講一(yi)下,但是不(bu)現實,希望可以舉一(yi)反三。

下面的(de)是一(yi)個(ge)比較普通的(de)首頁頁面,但是基本上一(yi)款APP中應該標的(de)元素都有了~

一般頁(ye)面你需要標注這些(xie)地方:

所有元素統一距離屏幕最左24px(全局性的數據可以直接和工程師溝通,也可以標注,推薦標注出來)

1.標題欄:背(bei)景色(se),標題欄文(wen)字大小,文(wen)字顏色(se)(不再贅述);

2.Banner:所有撐滿橫屏的大圖,不需要橫向尺寸,把高度標(biao)出了就可(ke)以(yi)了;

3.菜單圖標:

圖標的大小和圖標的可點擊區域不一定一致

也就是說,圖標可以做的很小,但是為了保證點擊的準確性和流暢性,工程師可以把可點擊區域設置的很大,這樣標注和切圖的時候就要注意,標注的是可點擊區域的大小,切圖切的也是可點擊區域的大小,也(ye)就是用透明(ming)區域去補上,否(fou)則圖片(pian)會模糊。

 在設計的時候就(jiu)要(yao)考慮可(ke)點(dian)擊(ji)區域的范圍(wei),比(bi)如X寶購物車頁面(mian)左側的小(xiao)圈,可(ke)點(dian)擊(ji)區域要(yao)比(bi)實際小(xiao)圈尺寸大(da)很多。

這種類型的圖標需要標注圖標點擊區域大小,圖標距離屏幕最左最右以及上下的距離。至于圖標的間距,因為有些時候可能     設計師不能完全做到1px不差,所以我基本不標,交給工程師讓他們去處理,其實等距排列的圖標不需要標間距,因為工程師還要動態適應不同的屏幕,標了間距也是白標(還是要和你的搭檔溝通怎么去標注);

4.模塊間隔:這個(ge)位置其(qi)實不是太重(zhong)要,我習慣(guan)標注(zhu)上這里,麻煩能(neng)少(shao)則少(shao)。

5.圖片+文字:這個(ge)應(ying)該比較常見,只(zhi)標注一個(ge)單(dan)位(圖+文)就可以(yi)了。

圖片需要標注寬高,因為工程師要設置圖片區域,從后臺調取,可以這么說,軟件里除了橫屏撐滿的圖,基本上所有的圖片都要標注寬高。

圖片距離上下左右的距離,文字大小顏色,這里的文字其實算兩個控件,標題文字以及說明文字,需要單獨標出。


Tab Bar:

這個位置其實比較特(te)殊,你可以單獨標(biao)注圖標(biao)大小(xiao)+文字(zi)大小(xiao);還可以圖標(biao)文字(zi)算(suan)作一個控件,整(zheng)個切出來;

我們工程師的習慣是用整個的,也就是圖標+文字算作一個ICON,所以我基本不怎么標注單獨的圖標(這里可以和你的搭檔去溝通一下,看他是什么開發習慣)。

關于列(lie)表頁類型的標(biao)注(zhu)問題(ti)

普通的列表有兩種方法(去問你的搭檔,他喜歡用什么方法):

1.標出行高,行內元素居中;

2.標出行內元素,元素上下間距,確定行高;

每種元素的位置如(ru)何確定:

通常標注的(de)都(dou)是(shi)元素距離(li)屏幕最左(zuo)側(ce)的(de)距離(li),比(bi)如上圖的(de)圖標元素距離(li)左(zuo)側(ce)24px,文字元素距離(li)左(zuo)側(ce)100px。

標(biao)(biao)注這個東西沒(mei)有固定(ding)的方(fang)法(fa),工程(cheng)師的開發習慣不(bu)同(tong),標(biao)(biao)注方(fang)法(fa)也不(bu)同(tong)。

該(gai)怎(zen)么標注雖(sui)然可以在網上找到方(fang)法,但那不一定(ding)適(shi)合你,一定(ding)和自己的搭檔勤溝通,方(fang)法是死(si)的,人是活(huo)的……

所有的頁面標注總結起來就是:標文字,標圖片,標間距,標區域;

(上述圖(tu)標出現(xian)了45px的單數,因為軟件自(zi)動吸附上去(qu)了顯(xian)示了圖(tu)標本(ben)身的尺(chi)寸,切(qie)圖(tu)的時候記得輸出個偶(ou)數尺(chi)寸的切(qie)片)


Part 4   切片資源的輸出

切之前務必(bi)要和(he)你的工(gong)程師搭(da)檔溝通一下,該如何去切才能配合他的開發。


全局性的切圖常見問題

①  你的所有設計尺寸,包括圖形效果,應該盡量使用偶數

技術開發使用的尺寸是設計稿像素尺寸的一半,也就(jiu)是說(shuo),如果你(ni)用(yong)24px的字體,技術那邊就(jiu)是設置為12px;

所以標(biao)注的(de)時候務必(bi)使用偶數(shu),為了保證(zheng)最(zui)佳的(de)設計效果,避免出現0.5像素的(de)虛邊。

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

ico_car.png                     IPhone2G,3G,3GS使用(好像(xiang)沒(mei)人用這(zhe)手機了吧)

ico_car@2x.png              IPhone4,5,6優先加載此尺寸圖片(不是(shi)必(bi)須使用這個尺寸,是(shi)優先加載調用這個尺寸)

ico_car@3x.png              IPhone6 plus使用的尺(chi)寸(cun)

可以(yi)簡單的理解為倍數關系(其實是(shi)為了(le)滿足不同分辨率(lv),我覺(jue)得(de)不用過于(yu)深究),如(ru)果你使用IPhone 6尺(chi)寸做設計(ji)稿,那么切片輸出就(jiu)是(shi)@2x,縮小2倍就(jiu)是(shi)@1x,擴大1.5倍就(jiu)是(shi)@3x了(le)。

理論上,為了達到最好的視覺效果,你應該輸出三套尺寸,推薦輸出三種尺寸的切片資源。

我的工程師搭(da)檔要(yao)求我給兩套尺寸就(jiu)可(ke)以,也(ye)就(jiu)是@1x @2x的兩種尺寸,因為(wei)我們沒有6 plus的測試機,所(suo)以看不到(dao)效果(guo),據(ju)他說應該不會太失(shi)真(zhen),但是為(wei)了保證效果(guo),我還是給三套尺寸。

另外現在幾乎看不到3GS了,所以需(xu)不需(xu)要提(ti)供一(yi)倍圖,還是要和工程師討(tao)論一(yi)下~

@1x  @2x  @3x是(shi)開發工具Xcode軟(ruan)件(jian)需要的UI資源,命好名稱(cheng)后,IOS設備會自動的選取合適尺寸(cun)。

③共用資源的圖片,輸出一張就可以


 類似這種重復的按鈕之類的,只要提供一張共(gong)用的資源就可(ke)以了;上面(mian)的文字是技(ji)術寫上去的。

理論(lun)上按照最(zui)佳視覺效(xiao)果,你應該提(ti)供多尺寸的圖片(pian);但通常我(wo)只提(ti)供最(zui)大(da)尺寸的一張(zhang)圖片(pian)即可(ke),這一點(dian)要和你的搭檔溝通好,卻問他需要什么(me)方式。


④切片的輸出格式

文件→存儲為Web所用格式

位圖格式:PNG 24,PNG 8,JPG

在JPG和PNG兩種格式(shi)圖片大小(xiao)相差不(bu)是(shi)很(hen)大的情(qing)況下(xia),推薦使(shi)用PNG;如果圖片大小(xiao)相差很(hen)大,使(shi)用JPG。

歡迎頁面(mian),ICON一定要(yao)使(shi)用PNG格式,在不影響視覺效(xiao)果的前提下,可以考慮(lv)使(shi)用PNG 8;

矢量圖格式:PDF,SVG

IOS原生支持的兩種矢量(liang)圖(tu)片(pian)格(ge)式,但是支持的一般,并不能保證100%把(ba)所有圖(tu)片(pian)效果渲染出來;

為(wei)了保(bao)險起見,我(wo)通常不使用這兩(liang)種格(ge)(ge)式,推(tui)薦還是(shi)使用位(wei)圖,如果以后技術提(ti)升,100%支持SVG和PDF這種矢(shi)量格(ge)(ge)式圖,那(nei)個(ge)時(shi)候也許不用提(ti)供(gong)這么(me)多套尺寸(cun)了~

⑤圖標的點擊區域

最小點擊區域問題:

IOS人機指(zhi)導手冊(ce)里推薦的(de)最小(xiao)可點(dian)擊元素的(de)尺(chi)(chi)寸是44*44 point(點(dian)),在(zai)設(she)備上1 point等于1像素,所(suo)以轉(zhuan)換成像素就(jiu)是44*44像素,換算(suan)成物理(li)尺(chi)(chi)寸大(da)概是7mm左(zuo)右吧(人機工(gong)效學研究中得出(chu)(chu)的(de)結(jie)論:用(yong)食指(zhi)操作,觸擊范(fan)(fan)圍(wei)在(zai)7mm左(zuo)右合(he)適;用(yong)拇指(zhi)操作,范(fan)(fan)圍(wei)在(zai)9mm左(zuo)右合(he)適)。據(ju)說(shuo)這(zhe)個尺(chi)(chi)寸下,不(bu)(bu)容易出(chu)(chu)現誤操作,誤點(dian)擊;小(xiao)于這(zhe)個尺(chi)(chi)寸,點(dian)擊就(jiu)會變(bian)的(de)有些不(bu)(bu)太準確,一向注重用(yong)戶體驗的(de)蘋果公司定義這(zhe)個最小(xiao)點(dian)擊尺(chi)(chi)寸也不(bu)(bu)是沒根據(ju)的(de)……

所以(yi)現(xian)在做設計(ji),為了圖(tu)(tu)標(biao)(biao)精致,你可以(yi)把(ba)圖(tu)(tu)標(biao)(biao)做的小(xiao)一(yi)些,但是(shi)切(qie)圖(tu)(tu)輸出(chu)的時(shi)候(hou),要考慮用(yong)戶點擊難易度的問題,所以(yi),切(qie)圖(tu)(tu)的時(shi)候(hou),涉及(ji)到(dao)需要點擊的小(xiao)圖(tu)(tu)標(biao)(biao)的時(shi)候(hou),普通屏幕還(huan)是(shi)切(qie)44px大(da)小(xiao),高清屏就需要切(qie)88px,不夠的地(di)方用(yong)透明(ming)區域補(bu)全,否(fou)則用(yong)戶點擊的時(shi)候(hou)會比較(jiao)困難,會很不靈敏。

⑥圖片圖標的不同狀態

每種圖標或者圖片如果有不同狀態每一種不同的狀態都需要進行切片輸出。

比如按鈕有正常(normal),按下(xia)(pressed),選中(zhong)(selected),禁(jin)用(disabled)等多(duo)種(zhong)狀態(tai),

最常(chang)出現(xian)的就是normal→pressed→normal;某些特定按鈕(niu)控件會出現(xian)選(xuan)中狀態(tai),具(ju)體情況具(ju)體分析吧。這(zhe)里顯示的是你要(yao)知道按鈕(niu)可(ke)能有幾(ji)種狀態(tai)……

Ps:這(zhe)段文(wen)字是后(hou)加的(de)(de)(de)(de)哈~好(hao)多人(ren)問(wen)我移動端的(de)(de)(de)(de)按(an)鈕一般是沒(mei)有選(xuan)中狀(zhuang)態(tai)的(de)(de)(de)(de),其實程(cheng)序里是有判斷這(zhe)個(ge)狀(zhuang)態(tai)的(de)(de)(de)(de),只是你(ni)接觸的(de)(de)(de)(de)產品中并未出(chu)現這(zhe)種(zhong)狀(zhuang)態(tai),那你(ni)就(jiu)不(bu)需要(yao)輸出(chu)選(xuan)中狀(zhuang)態(tai)的(de)(de)(de)(de)切片,但(dan)是你(ni)需要(yao)知道某(mou)(mou)些(xie)特定按(an)鈕控件存在這(zhe)個(ge)狀(zhuang)態(tai),比(bi)如某(mou)(mou)些(xie)游戲按(an)鈕(因為我以(yi)前(qian)做手機游戲的(de)(de)(de)(de)時候偶爾會出(chu)現這(zhe)種(zhong)狀(zhuang)態(tai))~在此感謝提(ti)出(chu)疑問(wen)的(de)(de)(de)(de)朋友(you)!


切片的命名規則

命名(ming)并不(bu)(bu)(bu)是(shi)統一的規(gui)范,不(bu)(bu)(bu)同(tong)的公司不(bu)(bu)(bu)同(tong)的工(gong)程師有(you)著自己不(bu)(bu)(bu)同(tong)的命名(ming)規(gui)范和命名(ming)習慣,但是(shi)大致還(huan)是(shi)有(you)跡(ji)可循的,一般是(shi):

切片種類+功能+圖片描述(可有可無)+狀態.png

名稱應使用英文命名(中文不識別,推薦小寫字母),不要以數字或者符號當作開頭,使用下劃線進行連接。

舉個例子:一(yi)個首頁(ye)的處于正常狀態的確定按鈕

btn_sure_nor.png

btn_sure_nor@2x.png

切(qie)片種(zhong)類是按鈕(btn);功能是確(que)定(sure);狀態是normal(正常)

我通常是以這種命(ming)(ming)名方式進行命(ming)(ming)名,如果你的(de)公(gong)司有設計文檔(dang),去看看之前(qian)留下的(de)命(ming)(ming)名規范(fan),如果沒有,那就去問工程(cheng)師吧。


Tab bar(底部欄)

說(shuo)說(shuo)Tab bar這里,因(yin)為(wei)比較(jiao)特殊。

 如果單純的只(zhi)有圖(tu)標(biao),自然是只(zhi)切(qie)圖(tu)標(biao)就好了;

早上和工程師溝通,這里該怎么切,工程師給的(de)建議是

圖標+文字的模式,圖標最好單獨切,文字后面程序加上去。

另外記住,同一模塊的圖標切片大小保持一致,上(shang)圖(tu)(tu)的(de)四個圖(tu)(tu)標本身(shen)尺寸(cun)并不相同(tong),但(dan)是切圖(tu)(tu)的(de)時候(hou)你需(xu)要切出相同(tong)尺寸(cun)的(de)陰影大小,便于工程師(shi)開發使用。

該怎么切圖,還是要和你的工程師搭檔去溝通一下;

以(yi)下(xia)是(shi)常用命名,這是(shi)我的命名習(xi)慣,并不是(shi)規范,所以(yi)要靈活,如果實在不知道英文,就用拼音代替也行。


Part 5   工作常用數據

你需要使用的字體:

如果是(shi)用(yong)Mac設計的(de)(de)小伙(huo)伴(ban),直接就(jiu)用(yong)蘋果黑體字(zi)就(jiu)好了;不(bu)過用(yong)Windows的(de)(de)就(jiu)沒(mei)那么幸(xing)運了,PC上還沒(mei)和IPhone默認字(zi)體效果完全一(yi)樣的(de)(de)字(zi)體,通常都是(shi)拿其他字(zi)體代替。

蘋果麗黑    Hiragino Sans GB W3(普通)/W6(粗體)      比較(jiao)接近IPhone字(zi)體(ti)的一款字(zi)體(ti),這是(shi)我之前一直使用的設計字(zi)體(ti)。

黑體-簡      STHeitiSC-Light         Mac里面(mian)拷(kao)出來的蘋果黑體,比較貼(tie)近IPhone手機字體,目前在用。

我會把這兩款字體上傳(chuan),有需要可以下載。


關于字體大小的問題

頂部操作欄文字大小      34-38px

標題文字大小                28-34px

正(zheng)文文字大小                26-30px

輔(fu)助性文字(zi)大小             20-24px

Tab bar文(wen)字大小           20px

文字(zi)大小只是一個范圍,這要根(gen)據(ju)設計的(de)視(shi)覺(jue)效果來決定,不要死記硬背,但(dan)是切記,字(zi)體大小要用偶數。


你需要知道的IPhone設計尺寸(這里是一個整屏的尺寸包括了狀態欄)

320*480         IPhone3GS   (我(wo)沒見(jian)過3GS實體(ti)機(ji),只在網上見(jian)過圖片,但你需(xu)要知道這個尺寸)

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

640*1136       IPhone 5/5s/5c  (5時代的設計(ji)尺(chi)(chi)寸,雖然(ran)現在出(chu)來6/6 plus,但還有人再用這個尺(chi)(chi)寸設計(ji))


原文來自:UI中國
下一篇(pian):無 上一篇:一款APP,從設計稿到切圖(Android篇)