APP切圖那點事兒–詳細介紹android和ios平臺
APP切圖那點事兒–詳細介紹android和ios平臺-移動閱讀二維碼

APP切圖那點事兒–詳細介紹android和ios平臺apphead20131213

從2011年開始接觸APP,到現在為止也做了幾個了,發現了一個共同點就是和每一個技術搭檔切圖的時候,會遇到不同的問題,因為技術的水平高低有限,所以他們要求你給切圖的時候也會不一樣,針對切圖后來我總結了一套規律分享給大家,希望互相學習~

相關閱讀:
設計師需要掌握的圖片原理與優化技巧
Android設計中的.9.png
切圖小貼士


一.android版

在做android版本設計的時候,尺寸有很多種,這時我們要以一種尺寸為基準,那這個基準尺寸是480px*800px,設計圖完成之后就開始切圖了,我拿我之前設計的一張圖為例子講解下:

APP切圖那點事兒–詳細介紹android和ios平臺appdesign2013121301?

當看到上邊這張設計圖的時候,我們首先分析下應該給技術切哪些圖(為了避免以后少改動,建議切圖之前最好和技術先溝通下,怎么切);

1、底部欄目的icon和背景:

APP切圖那點事兒–詳細介紹android和ios平臺appdesign2013121302?

這個一般有2種切法:(有默認和選中之后的效果)

APP切圖那點事兒–詳細介紹android和ios平臺appdesign2013121303?

2、頂部欄目的背景切圖:APP切圖那點事兒–詳細介紹android和ios平臺appdesign2013121304

由于頂部導航欄的是漸變樣式,所以切圖只需要切一小條,技術來平鋪拉伸就可以~(PS:如果是花紋背景,就必須切整條了,因為花紋切一小條就會被拉伸了~)

3、標注文字大小和行間距:(以這張圖為例子,我標注好了,請看下圖)

APP切圖那點事兒–詳細介紹android和ios平臺appdesign2013121305

需要注意的:
A:android主要有3種屏,即:
QVGA和WQVGA屏density=120;
HVGA屏density=160;
WVGA屏density=240;
B:apk的資源包中,
當屏幕density=240時使用hdpi標簽的資源
當屏幕density=160時使用mdpi標簽的資源
當屏幕density=120時使用ldpi標簽的資源;
C:我們標注的是PX,但是技術的算法是DP,所以需要PX和DP進行轉化,PX和DP的轉化主要跟密度有關系,當密度density=160即(屏幕尺寸:320*480)時,1PX=1DP;當密度density=240即(屏幕尺寸:480*800)時,1PX=0.75DP;當屏幕的尺寸大于480*800的時候,密度都按照240計算即可;當密度density=120即(屏幕尺寸:240*320)時,這個現在幾乎沒有人用了,所以我也不知道轉化公式,如果您知道,可以留言告訴我啊~?

注意:因為我們做的是基于480*800尺寸的,大家都知道android的尺寸太多了,要想適配現在流行的尺寸,比如:640*960;720*1280等,唯一的解決辦法就是圖標可以根據不同尺寸各做一套,也就是圖標需要做480、640和720共3套圖標,不過如果你們的產品的要求不嚴格,做一套就可以,只不過是在大于480尺寸的屏幕上有些圖標被拉大變虛而已~

二.ios版

在做ios版本設計的時候,尺寸有3種,分別是:320*480、640*960、640*1136;這時我們要以一種尺寸為基準,那這個基準尺寸是640px*960px,設計圖完成之后就開始切圖了,我拿我之前設計的一張圖為例子講解下:

APP切圖那點事兒–詳細介紹android和ios平臺appdesign2013121306?

當看到上邊這張設計圖的時候,我們首先分析下應該給技術切哪些圖(為了避免以后少改動,建議切圖之前最好和技術先溝通下,怎么切);

1、底部欄目的icon和背景:

APP切圖那點事兒–詳細介紹android和ios平臺appdesign2013121307?

這個一般有2種切法:(有默認和選中之后的效果)

APP切圖那點事兒–詳細介紹android和ios平臺appdesign2013121308?

2、頂部欄目的背景切圖:

?APP切圖那點事兒–詳細介紹android和ios平臺appdesign2013121309

由于頂部導航欄的是多顏色的,所以只能切一整條給技術,商圈的圖標要單獨切出來

APP切圖那點事兒–詳細介紹android和ios平臺appdesign2013121310?

3、二級標題欄目的切圖:

APP切圖那點事兒–詳細介紹android和ios平臺appdesign2013121311??

APP切圖那點事兒–詳細介紹android和ios平臺appdesign2013121312?

4、主體欄目的切圖:

APP切圖那點事兒–詳細介紹android和ios平臺appdesign2013121313?

5、標注文字大小和行間距:(以這張圖為例子,我標注好了,請看下圖)

APP切圖那點事兒–詳細介紹android和ios平臺appdesign2013121314

需要注意的:
A:我們標注的尺寸是像素px,技術那邊的實際運用到技術中的是像素的一半,即像素的一半=技術的尺寸;例如:“分類”2個字,我標準的是36px,技術那邊的尺寸就是18px;
B:所有文字,行間距的標注的尺寸都是偶數;因為技術那邊都是根據我們的尺寸除以2;
C:顏色的標注有的技術要求16進制,有的技術要求RGB,由于頁面的限制所以我只標注了16進制的,按16進制和RGB都標注的是最好的~?

注意:因為我們做的基于640*960尺寸的,ios共有3套尺寸,因為640*960和640*1136的寬度是不變的,所以圖標沒有變化重新切,只是行間距需要調整下;320*480尺寸的是640*960的一半,所以技術完全可以根據你標注的640的尺寸做就可以~

三.android和ios的轉化關系

1.因為ios的尺寸是640*960,android當密度等于120即(320*480)時,1PX=1DP,所以android和ios的標注像素之間的換算關:即ios像素尺寸*1/2=android dp尺寸;

2.如果你們的產品同時做android和ios,你只想標注一套尺寸的時候,就可以標注ios版的標注去計算即可。

本文鏈接:http://www.1rtl.com/app-cut-pic-that-things.html
本文標簽: , ,