国产四级片,69国产成人精品午夜福中文,日韩72页,天天操天天干天天爽,韩国女主播美女跳舞视频,美女视频在线观看理论,杨幂13分视频在线观看

UI實戰(zhàn)教程!從零開始做APP 系列之切圖標(biāo)注篇

作者:cyRotel
分類: 教程
2017-06-23
21516

UI 設(shè)計師從零開始做一個App 要經(jīng)歷哪些流程?這個系列的文章會為新手一一講解。本篇會為你講解切圖標(biāo)注的要點和技巧,實用高效,新手來收。

UI 設(shè)計師從零開始做一個App 要經(jīng)歷哪些流程?這個系列的文章會為新手一一講解。本篇會為你講解切圖標(biāo)注的要點和技巧,實用高效,新手來收。

一. 切圖工具和標(biāo)注工具

1. 切圖工具:

Cutterman:一款PS的插件,切圖非常方便,但不支持綠色免安裝版本PS,而且對PS版本要求比較高,針對CS 6的已經(jīng)不維護(hù)更新了。推薦安裝官方完整版PS CC及以上版本,目前cutterman最新版為3.2.0版本。

切圖工具.jpg

Assistor PS 也是一款PS的切圖標(biāo)注插件,也被譽(yù)為神器;我使用了一下,感覺還可以,但是切圖和標(biāo)注上體驗還是不高,但是Assistor PS的其他輔助功能還是很不錯的,比如參考線輔助,圓角大小,磁鐵功能。

圓角大小.jpg

2. 標(biāo)注工具:

PxCook(像素大廚),是一款切圖標(biāo)注設(shè)計工具軟件。自2.0.0版本開始,支持PSD文件的文字,顏色,距離自動智能識別。

優(yōu)點在于將標(biāo)注、切圖這兩項設(shè)計完稿后集成在一個軟件內(nèi)完成,支持Windows和Mac雙平臺。標(biāo)注功能包括:支持長度,顏色,區(qū)域,文字注釋;從2.0.0版本開始,整體效率有了很大的提高,值得推薦的是自動智能識別標(biāo)注。

標(biāo)注工具.jpg

Parker,和cutterman是同一家的,Parker能夠自動計算尺寸、距離、文字大小、陰影、描邊圓角、行高等信息,并按照你的需要進(jìn)行標(biāo)注, 它極大節(jié)省你標(biāo)注的時間,大幅度提升設(shè)計效率。(U妹現(xiàn)在一直用Parker進(jìn)行標(biāo)注)

但是,Parker并不是免費的,而是一款付費軟件,需要60RMB。

Parker.jpg

Mark Man,也是一款高效的設(shè)計稿標(biāo)注工具,支持 Win / Mac, 可免費使用基礎(chǔ)功能,免費版的在體驗上也是差強(qiáng)人意,畢竟是免費的,如果需要高級功能也是需要付費的60RMB。

Mark Man.jpg

以上工具各有優(yōu)點和缺點,在選擇上主要還是看個人的習(xí)慣,哪個用著順手就選擇哪個。

二. 頁面標(biāo)注

標(biāo)注是非常重要的,開發(fā)哥哥能不能完美的的還原設(shè)計稿,很大一部分取決于我們的標(biāo)注;如果不清楚你該怎么標(biāo),一定要和開發(fā)哥哥溝通!

溝通是非常有效解決問題的途徑!

在這里我大致的說一下我的標(biāo)注習(xí)慣,不需要將每一張效果圖都進(jìn)行標(biāo)注,你標(biāo)注的頁面能保證開發(fā)能把每個頁面都能順利進(jìn)行就可以了。

我拿我標(biāo)注過的頁面做個示例:

示例.jpg

我們從上面的標(biāo)注圖可以看出,需要標(biāo)注的內(nèi)容有:

文字:字體大小、字體顏色

布局控件屬性:控件寬高、背景色、透明度、描邊、圓角大小

列表:列表高度、列表顏色、列表內(nèi)內(nèi)容上下間距

間距:控件之間的距離、左右邊距

段落文字:字體大小、字體顏色、行距

全部屬性:如導(dǎo)航欄文字大小、顏色,左右邊距,默認(rèn)間距等,你可以提前跟開發(fā)哥哥說好,不用標(biāo)注

所有的頁面標(biāo)注總結(jié)起來就是:標(biāo)文字,標(biāo)間距,標(biāo)大小,標(biāo)區(qū)域

注:標(biāo)注顏色格式是使用16進(jìn)制(如:#FF0000),還是RGB(255,0,0)?你需要和開發(fā)哥哥商量一下,根據(jù)他的開發(fā)習(xí)慣,一般采用16進(jìn)制色值就好了。

三. 界面切圖

我還是拿圖舉例來說明:

界面切圖.jpg

icon_alipay.png→iPhone 1-3代的手機(jī)(已經(jīng)不考慮了)

icon_alipay@2x.png→iPhone4/4S/5/5S/6/6S/7對應(yīng)尺寸,這就是我們通常所說的2倍圖

icon_alipay@3x.png→iPhone6P/6SP/7P使用的尺寸,這就是3倍圖

可以簡單的理解為倍數(shù)關(guān)系,如果你使用750x1334px(iPhone 6/6S/7)尺寸做設(shè)計稿,那么切片輸出就是@2x,縮小2倍就是@1x,擴(kuò)大1.5倍就是@3x了。

總結(jié)

1. 到底哪些資源需要切圖,哪些不需要切圖?

只要是無法用代碼來實現(xiàn)和表達(dá)出來的,就需要切圖

如果實在不清楚要不要切圖,多和開發(fā)溝通,他會告訴你哪些是需要你切圖的

2. 切圖需要切幾套?(這里我只以iOS作為標(biāo)準(zhǔn),安卓下期再說)

理論上,我們需要切3套圖,是為了更好的適配

在實際工作中,iOS只需要切2套圖就可以,分別為:@2x和@3x

注意:切圖是需要注意幾點

切圖輸出格式必須為png24位、png8位、jpg格3種格式

同一模塊內(nèi),切圖大小應(yīng)保持一致

切圖輸出大小必須保持為偶數(shù)

為了減小包的大小,所有切圖盡量壓縮后再給開發(fā)



2
3
分享到:

0

喜歡他,就推薦他上首頁吧^_^

推薦閱讀

×

賽事服務(wù)聯(lián)系方式

0371-86068866

4008887269

cndesign@163.com

好的,我知道了

官方微信

聯(lián)系我們

  • QQ:33143335 QQ:1904200230
  • 電話:18569912460
  • 投稿:cndesign@163.com
  • 地址:鄭州市國家大學(xué)科技園東區(qū)9號樓2層

版權(quán)信息

  移動 Android 版 豫 ICP 備16038122號-2 豫公網(wǎng)安備 41019702002261號