伊伊人成亚洲综合人网_免费精品国产一区二区三区_国产产在线精品亚洲AAVV_MM131美女图片尤物写真丝袜

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

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


純干貨 匯集(ji)了之(zhi)前的(de)五篇(pian)帖(tie)子(zi)的(de)精髓

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

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

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


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

我(wo)本身是一名GUI設(she)計師(shi),所以我(wo)只站在GUI設(she)計師(shi)的(de)角(jiao)度(du)去把APP從項目啟動到切片輸(shu)出的(de)過程(cheng)(cheng)寫一寫,相當于工(gong)作(zuo)流程(cheng)(cheng)的(de)介(jie)紹吧;公司不(bu)同,流程(cheng)(cheng)不(bu)盡相同,但(dan)是終究還是能有些幫助。

這里我們(men)只(zhi)說IOS系(xi)統下的設計,至(zhi)于Android,因為尺(chi)寸太多,涉(she)及的東(dong)西比較(jiao)亂,我整理好以(yi)后再說吧。

頁面篇幅比較長,不推(tui)薦一(yi)次性看完,那樣你潛(qian)意識(shi)里(li)就(jiu)會對它(ta)厭煩了(le),所以可以有時間讀一(yi)讀,看一(yi)看。

Part 1    項目立項

完(wan)善的公(gong)司會把(ba)(ba)項目(mu)相(xiang)關人(ren)員聚集(ji)起來,產(chan)品(pin)(pin)(pin)經理會把(ba)(ba)產(chan)品(pin)(pin)(pin)詳細(xi)的用(yong)原型展示出來,包括產(chan)品(pin)(pin)(pin)定位,市場需(xu)求,主打賣點,產(chan)品(pin)(pin)(pin)性質以及各模塊具體(ti)功能,邏(luo)輯跳轉演示一下;之(zhi)后會評(ping)估項目(mu)用(yong)時,各部門(men)協調,項目(mu)啟動。

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

在項(xiang)目設計之初,就該進行項(xiang)目歸檔(dang)整(zheng)理,我的習慣是“項(xiang)目名稱+版本序(xu)列”;

沒有(you)(you)最(zui)正確的工(gong)作(zuo)方法,只有(you)(you)最(zui)適合自己的工(gong)作(zuo)習慣(guan)。

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

工欲善其(qi)事必先(xian)利其(qi)器(qi),基本(ben)(ben)上我做界面設計用(yong)的最多(duo)的就是PS和(he)AI了,版本(ben)(ben)無(wu)所謂,用(yong)著舒服就行(xing),推(tui)薦版本(ben)(ben)高一點的,低版本(ben)(ben)好(hao)多(duo)方便(bian)功能(neng)都沒有。

標注工具:

PxCook,目前我還沒用上(shang)Mac,所(suo)以也不知道傳說(shuo)中的Sketch到底多神奇(qi)。PxCook在Windows上(shang)標注還比較(jiao)順手,雖然它還附(fu)帶切圖功能(neng),但是比較(jiao)雞肋,不推(tui)薦用它切圖。

切圖工具:

Cutterman       一款PS的(de)插件(jian),切圖非(fei)常(chang)方便(bian),但(dan)不支持(chi)綠色免安裝(zhuang)版(ban)本PS,而且對PS版(ban)本要(yao)求(qiu)比較高,針對CS 6的(de)已經不維護更(geng)新了。推(tui)薦安裝(zhuang)官方完整版(ban)PS cc,然后(hou)自行破解。官網上有安裝(zhuang)使用教(jiao)程,自己研究下吧,因為我也是最近才開始接觸這款插件(jian)。

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

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


Part 2    Photoshop

現在(zai)常(chang)用的幾(ji)種設(she)計尺寸

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

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

3.  750*1334    6   目(mu)前我做設計稿的設計尺寸,IPhone6的尺寸,向下可以適配4,5,向上可以適配6 plus;我記得IP6推(tui)出后,我問總監應該用什么尺寸設計,他說用IP6的吧,好(hao)適配,切出來就(jiu)是@2x了,改一改上下都能照顧到(dao)。

推薦做設(she)計稿(gao)的時候使用IPhone6的尺寸(cun)進(jin)行設(she)計。

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

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

上下的(de)參考線(xian)很容(rong)易設置(zhi),因為是根據IPhone自(zi)身系統設置(zhi)的(de),左(zuo)右(you)的(de)參考線(xian)我(wo)(wo)習慣(guan)設置(zhi)為24px,也就是顯示內容(rong)距離(li)邊框的(de)距離(li)。這(zhe)不是絕對的(de),我(wo)(wo)和總監研究(jiu)過,究(jiu)竟是設置(zhi)為左(zuo)右(you)30px還是24px比較(jiao)好,通過對國(guo)內國(guo)外各(ge)種APP的(de)對比,覺(jue)得24px更適合一些,不寬不窄,這(zhe)個完全是設計師個人的(de)設計習慣(guan),所以不要當成什么(me)規范,確切(qie)的(de)說(shuo),整(zheng)個屏幕你(ni)都可以隨便(bian)做,但是我(wo)(wo)們(men)這(zhe)里說(shuo)的(de)是正常(chang)頁面。


Part 3    頁面標注

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

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

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

這里的(de)標注(zhu)軟件(jian)使用的(de)是PxCook,先標一(yi)個(ge)空白(bai)文(wen)檔,看看都需要什么(me)吧(ba)

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

基(ji)本上(shang)我并不使用PXCook里面的顏色標注(zhu)工(gong)具,而是使用文字(zi)標注(zhu)工(gong)具,因(yin)為(wei)要標識兩種色值(zhi),PxCook只能(neng)顯(xian)示一種色值(zhi)。

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


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

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

你需要標注的內容(rong)有:

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

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

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

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

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

因為頁(ye)(ye)面的種(zhong)類(lei)成千(qian)上(shang)萬,我(wo)想每種(zhong)頁(ye)(ye)面都(dou)講一下,但是不現實(shi),希望(wang)可(ke)以舉一反三。

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

一般(ban)頁面你需要標注(zhu)這些地(di)方:

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

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

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

3.菜單圖標:

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

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

在設計(ji)的(de)時候就要考慮可點(dian)擊區(qu)域的(de)范(fan)圍,比如(ru)X寶(bao)購物車(che)頁面左側的(de)小(xiao)(xiao)圈,可點(dian)擊區(qu)域要比實際(ji)小(xiao)(xiao)圈尺(chi)寸大(da)很(hen)多(duo)。

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

4.模塊間隔:這(zhe)個位(wei)置其實不(bu)是太重要,我習(xi)慣標注上這(zhe)里,麻煩能少(shao)則(ze)少(shao)。

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

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

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


Tab Bar:

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

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

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

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

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

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

每種(zhong)元素的位(wei)置(zhi)如何確定:

通常(chang)標注(zhu)的(de)都是元(yuan)素(su)距離屏(ping)幕最(zui)左(zuo)側(ce)的(de)距離,比如上圖的(de)圖標元(yuan)素(su)距離左(zuo)側(ce)24px,文字(zi)元(yuan)素(su)距離左(zuo)側(ce)100px。

標注(zhu)這個東西沒有固(gu)定的方(fang)法(fa),工程師(shi)的開(kai)發習(xi)慣不(bu)同(tong),標注(zhu)方(fang)法(fa)也不(bu)同(tong)。

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

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

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


Part 4   切片資源的輸出

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


全局性的切圖常見問題

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

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

所以標注的(de)時候(hou)務必使用偶(ou)數,為了保證最(zui)佳的(de)設(she)計效果(guo),避免出(chu)現(xian)0.5像素的(de)虛(xu)邊。

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

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

ico_car@2x.png              IPhone4,5,6優先加載(zai)此(ci)尺(chi)(chi)寸(cun)圖(tu)片(不(bu)是必須(xu)使用這個尺(chi)(chi)寸(cun),是優先加載(zai)調用這個尺(chi)(chi)寸(cun))

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

可以(yi)簡(jian)單的理解為倍(bei)(bei)(bei)數關系(其(qi)實是(shi)(shi)為了滿(man)足不(bu)同分(fen)辨(bian)率,我(wo)覺得不(bu)用過于深(shen)究),如果你使用IPhone 6尺寸(cun)做設計稿,那么切片輸出就(jiu)是(shi)(shi)@2x,縮小2倍(bei)(bei)(bei)就(jiu)是(shi)(shi)@1x,擴大1.5倍(bei)(bei)(bei)就(jiu)是(shi)(shi)@3x了。

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

我(wo)的(de)工(gong)程師搭檔要(yao)求(qiu)我(wo)給兩套(tao)尺(chi)(chi)寸(cun)就可以,也就是(shi)(shi)@1x @2x的(de)兩種(zhong)尺(chi)(chi)寸(cun),因為我(wo)們沒有6 plus的(de)測試機(ji),所(suo)以看不(bu)到效果,據他(ta)說(shuo)應該不(bu)會(hui)太失真,但是(shi)(shi)為了(le)保證效果,我(wo)還(huan)是(shi)(shi)給三套(tao)尺(chi)(chi)寸(cun)。

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

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

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


類(lei)似(si)這種重(zhong)復的按鈕(niu)之類(lei)的,只要(yao)提(ti)供一張共用的資源就可以了;上(shang)面的文字是技術寫(xie)上(shang)去的。

理(li)論上(shang)按照(zhao)最(zui)佳(jia)視覺(jue)效(xiao)果(guo),你應該提供多尺寸(cun)的(de)圖片;但(dan)通(tong)常(chang)我只提供最(zui)大尺寸(cun)的(de)一張圖片即可(ke),這一點要和你的(de)搭檔溝通(tong)好,卻問他需要什么方式。


④切片的輸出格式

文件→存儲為Web所用格式

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

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

歡(huan)迎頁(ye)面,ICON一定要使用PNG格式,在(zai)不影(ying)響視覺效(xiao)果的前提下,可以(yi)考慮使用PNG 8;

矢量圖格式:PDF,SVG

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

為了(le)保險起見(jian),我通(tong)常(chang)不(bu)使(shi)用這(zhe)(zhe)兩種(zhong)格式,推(tui)薦還(huan)是使(shi)用位(wei)圖(tu),如(ru)果以(yi)后技術(shu)提升,100%支(zhi)持SVG和PDF這(zhe)(zhe)種(zhong)矢量格式圖(tu),那個時候也許不(bu)用提供這(zhe)(zhe)么(me)多(duo)套尺(chi)寸(cun)了(le)~

⑤圖標的點擊區域

最小點擊區域問題:

IOS人(ren)機(ji)(ji)指(zhi)導手冊里推(tui)薦的(de)(de)最小可點(dian)(dian)擊元素(su)(su)的(de)(de)尺(chi)(chi)寸是(shi)44*44 point(點(dian)(dian)),在設備上(shang)1 point等于(yu)1像(xiang)素(su)(su),所(suo)以轉換(huan)成像(xiang)素(su)(su)就是(shi)44*44像(xiang)素(su)(su),換(huan)算成物(wu)理尺(chi)(chi)寸大概是(shi)7mm左(zuo)右(you)吧(人(ren)機(ji)(ji)工效(xiao)學(xue)研究中得出(chu)的(de)(de)結論:用(yong)食指(zhi)操作,觸擊范(fan)圍在7mm左(zuo)右(you)合適;用(yong)拇指(zhi)操作,范(fan)圍在9mm左(zuo)右(you)合適)。據說(shuo)這個(ge)尺(chi)(chi)寸下,不(bu)容(rong)易出(chu)現(xian)誤(wu)操作,誤(wu)點(dian)(dian)擊;小于(yu)這個(ge)尺(chi)(chi)寸,點(dian)(dian)擊就會變的(de)(de)有(you)些不(bu)太準確,一向注重用(yong)戶體驗的(de)(de)蘋(pin)果公司定(ding)義這個(ge)最小點(dian)(dian)擊尺(chi)(chi)寸也不(bu)是(shi)沒根據的(de)(de)……

所(suo)以(yi)現在(zai)做(zuo)設計,為了圖(tu)標(biao)精致,你可以(yi)把(ba)圖(tu)標(biao)做(zuo)的(de)(de)小一(yi)些,但是(shi)(shi)切(qie)圖(tu)輸出的(de)(de)時(shi)(shi)候(hou)(hou),要(yao)(yao)考(kao)慮用戶(hu)點擊難易度(du)的(de)(de)問題,所(suo)以(yi),切(qie)圖(tu)的(de)(de)時(shi)(shi)候(hou)(hou),涉及到(dao)需(xu)要(yao)(yao)點擊的(de)(de)小圖(tu)標(biao)的(de)(de)時(shi)(shi)候(hou)(hou),普(pu)通屏(ping)幕還是(shi)(shi)切(qie)44px大小,高清屏(ping)就需(xu)要(yao)(yao)切(qie)88px,不(bu)夠(gou)的(de)(de)地方(fang)用透明區域補全,否(fou)則用戶(hu)點擊的(de)(de)時(shi)(shi)候(hou)(hou)會比較困難,會很不(bu)靈敏。

⑥圖片圖標的不同狀態

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

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

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

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


切片的命名規則

命名并(bing)不(bu)是(shi)統一(yi)的(de)規(gui)范(fan),不(bu)同的(de)公(gong)司(si)不(bu)同的(de)工程師有著自己不(bu)同的(de)命名規(gui)范(fan)和(he)命名習慣,但是(shi)大致(zhi)還(huan)是(shi)有跡可(ke)循(xun)的(de),一(yi)般是(shi):

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

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

舉個例子(zi):一個首頁的(de)(de)處于正常(chang)狀態的(de)(de)確(que)定按(an)鈕 

btn_sure_nor.png

btn_sure_nor@2x.png

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

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


Tab bar(底部欄)

說說Tab bar這(zhe)里,因為比(bi)較特(te)殊(shu)。

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

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

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

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

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

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


Part 5   工作常用數據

你需要使用的字體:

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

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

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

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


關于字體大小的問題

頂部操作(zuo)欄文(wen)字大小      34-38px

標題文字大小                28-34px

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

輔助性(xing)文(wen)字大(da)小(xiao)             20-24px

Tab bar文字(zi)大小           20px

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


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

320*480         IPhone3GS   (我沒(mei)見(jian)過3GS實體機,只在網上(shang)見(jian)過圖片,但(dan)你需(xu)要(yao)知道這(zhe)個(ge)尺寸)

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

640*1136       IPhone 5/5s/5c  (5時代的設(she)計(ji)(ji)尺寸(cun),雖(sui)然現在出來6/6 plus,但(dan)還(huan)有人再用(yong)這個尺寸(cun)設(she)計(ji)(ji))


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