❶ android鐨.9鍥懼埗浣
鍏堟潵璁よ瘑涓涓嬬晫闈錛屽苟鍙浠ョ湅鍒頒笉綆℃槸妯綰靛悜鎷夊崌閮戒嬌寰楀浘鐗囧け鐪
涓嬮潰鍥涗釜灝忛夐」鍒嗗埆鏄
浠庝笂鍥炬垜浠鍙浠ョ湅鍒幫紝涓嶅瑰浘鐗囪繘琛屼換浣曚慨鏀癸紝鍥劇墖鍦ㄦ煇涓鏂瑰悜鎷変幾鏃墮兘鏄鏁翠綋緙╂斁鐨. 緙╂斁鍚屾椂,鍥劇墖鍦嗚掍篃浼氳窡鐫緙╂斁,瀵艱嚧鏈緇堝睍紺烘晥鏋滃緢宸.
鍦ㄧ紪杈戝尯鍙浠ョ湅鍒拌佺紪杈戠殑鍥劇墖鍥涘懆澶氫簡涓鍍忕礌鐨勫唴瀹癸紝榪欏氨鏄鎴戜滑鍙浠ユ搷浣滅殑鍖哄煙浜嗐
緇樺埗灝忛粦鐐 錛氬彧闇瑕佸湪鍥涜竟闇瑕佺殑浣嶇疆宸﹂敭鍗曞嚮緇樺埗灝忛粦鐐癸紝鎴栬呮嫋鍔ㄧ粯鍒跺皬榛戠嚎錛堝叾瀹炴槸榪炵畫鐨勫氫釜灝忛粦鐐癸級
鍒犻櫎灝忛粦鐐 錛氭寜shift閿錛屽苟宸﹂敭鍗曞嚮鎴栨嫋鍔ㄨ繘琛屽垹闄ゆ搷浣滐紝涔熷彲浠ユ寜浣忛紶鏍囧彸閿榪涜屾摝闄ゃ
灝忛粦鐐瑰湪png鍥炬渶澶栧眰鏈変竴鍍忕礌瀹界殑杈癸紝闄や簡鍥涗釜欏惰掞紝灝忛粦鐐瑰彲浠ョ粯鍒跺湪png鏈澶栬竟鐨勪換涓鐐瑰勶紝
姣忎釜灝忛粦鐐瑰崰鎹涓鍍忕礌
灝忛粦鐐圭粯鍒朵箣鍚庛傚叾瑙勫畾涓涓鍖哄煙錛屽嵆灝忛粦鐐瑰勶紝鍨傜洿浜庢墍鍦ㄨ竟錛屼笖涓鍍忕礌瀹界殑鍖哄煙
欏墮儴錛氬湪姘村鉤鎷変幾鐨勬椂鍊欙紝淇濇寔鍏朵粬浣嶇疆涓嶅姩錛屽彧鍦ㄨ繖涓鐐逛唬琛ㄥ尯鍩熷仛鏃犻檺鐨勫歡浼
宸﹁竟錛氬湪絝栫洿鎷変幾鐨勬椂鍊欙紝淇濇寔鍏朵粬浣嶇疆涓嶅姩錛屽彧鍦ㄨ繖涓鐐逛唬琛ㄥ尯鍩熷仛鏃犻檺鐨勫歡浼
搴曢儴錛氬湪姘村鉤鎷変幾鐨勬椂鍊欙紝鎸囧畾鍥劇墖閲岀殑鍐呭規樉紺虹殑鍖哄煙
鍙寵竟錛氬湪絝栫洿鎷変幾鐨勬椂鍊欙紝鎸囧畾鍥劇墖閲岀殑鍐呭規樉紺虹殑鍖哄煙
浠庝笂鍥懼彲浠ョ湅鍑烘媺浼稿悗鎴戜滑甯屾湜鐨勭澶村尯鍩熸病鏈夊け鐪燂紝騫朵笖鑰屼笖綆澶磋窛紱誨彸杈硅窛涓庝笂杈硅窛鐨勮窛紱繪病鏈夊彉鍥犳わ紝淇濊瘉浜嗘兂瑕侀儴鍒嗕笉澶辯湡
棣栧厛娌℃湁鏈璐ㄤ笂鐨勫尯鍒錛屼笅闈㈤氳繃涓涓渚嬪瓙鏉ョ悊瑙
鍋囧傛湁涓涓5px 5px澶у皬鐨勫浘鐗囷紝妯鍚戜笂闇瑕佹媺浼歌嚦20px
閭d箞灝辨槸瑕佹í鍚戞媺鍗嘓=15px
鍋囧傛í鍚戜笂鐢諱簡涓涓灝忛粦鐐--鍒欐瘡涓灝忛粦鐐規墍浠h〃鍖哄煙鎷変幾h=15px h=H/1
鍋囧傛í鍚戜笂鐢諱簡涓変釜灝忛粦鐐--鍒欐瘡涓灝忛粦鐐規墍浠h〃鍖哄煙鎷変幾h=5px h=H/3
鍥犳 姣忔潯杈逛笂鐨勬瘡涓灝忛粦鐐規墍浠h〃鍖哄煙鎷変幾鐨勫藉害鏄涓鏍風殑 *
鎵浠ヨ佸悎鐞嗙殑甯冪疆鎴戜滑鐨勫皬鍠濈偣浠ヨ嚦png鍥捐兘澶熻揪鍒版垜浠鎯寵佺殑鏂瑰悜浼哥緝
鐐瑰嚮宸︿笂file- save錛屼繚瀛樻枃浠訛紝鑷鍔ㄧ敓鎴愪竴寮犲悗緙鍚嶄負鈥*.9.png鈥濇牸寮忕殑鍥劇墖錛屽浘鐗囦笂涓嬪乏鍙沖悇澧炲姞浜1px鐨勯粦綰褲
9patch鍥劇墖鏄痑ndriod app寮鍙戦噷涓縐嶇壒孌婄殑鍥劇墖褰㈠紡錛屾枃浠剁殑鎵╁睍鍚嶄負錛.9.png
鈥滅偣涔濃濅篃鏄鐢變簬Android騫沖彴澶氱嶅垎杈ㄧ巼闇閫傞厤鐨勯渶奼備笅錛屽彂灞曞嚭鏉ョ殑涓縐嶇嫭鐗圭殑鎶鏈銆傚畠鍙浠ュ皢鍥劇墖妯鍚戝拰綰靛悜闅忔剰榪涜屾媺浼革紝鑰屼繚鐣欏儚緔犵簿緇嗗害銆佹笎鍙樿川鎰熷拰鍦嗚掔殑鍘熷ぇ灝忥紝瀹炵幇澶氬垎杈ㄧ巼涓嬬殑瀹岀編鏄劇ず鏁堟灉錛屽悓鏃跺噺灝戜笉蹇呰佺殑鍥劇墖璧勬簮錛屽彲璋撳垏鍥懼埄鍣ㄣ
.9.PNG紜瀹炴槸鏍囧噯鐨凱NG鏍煎紡錛屽彧鏄鍦ㄦ渶澶栭潰涓鍦堥濆栧炲姞1px鐨勮竟妗嗭紝榪欎釜1px鐨勮竟妗嗗氨鏄鐢ㄦ潵瀹氫箟鍥劇墖涓鍙鎵╁睍鐨勫拰闈欐佷笉鍙樼殑鍖哄煙銆傜壒鍒璇存槑錛宭eft鍜宼op杈規嗕腑浜ゅ弶閮ㄥ垎鏄鍙鎷変幾閮ㄥ垎錛屾湭閫変腑閮ㄥ垎鏄闈欐佸尯鍩熼儴鍒嗐俽ight鍜宐ottom杈規嗕腑浜ゅ弶閮ㄥ垎鍒欐槸鍐呭歸儴鍒
鏃犺烘槸left鍜宼op錛岃繕鏄痳ight鍜宐ottom閮芥槸鎶婂浘鐗囧垎鎴9鍧 (杈硅掑洓鍧楁槸涓嶈兘緙╂斁鐨勶紝鍏朵粬鐨勫洓鍧楀垯鏄鍏佽哥緝鏀劇殑)錛屾墍浠ュ彨鍋9.PNG銆
.9.png鍥劇墖錛宎ndroid緋葷粺紼嬪簭鏈夊瑰叾浼樺寲鐨勭畻娉曘
鍙傝
http://www.jianshu.com/p/3fd048644e3f
http://bbs.itheima.com/thread-251222-1-1.html
http://www.yimui.com/archives/117
❷ 濡備綍鎶婂浘鐗囧帇緙╁埌400k浠ュ唴鎵嬫満-鎵嬫満鐓х墖鎬庝箞鍘嬬緝鍒300K浠ヤ笅錛
鎵嬫満鎬庝箞鎶婄収鐗囩緝灝忓埌40k鎵嬫満鎶婄収鐗囩緝灝忓埌40k鐨勬柟娉曞備笅:
VIVOZ5
FuntouchOS9.1
Litphoto1.3.4.033.
1銆佹墦寮宸ュ叿,鐐瑰嚮鍘嬬緝鐓х墖鐨勯夐」銆
2銆侀変腑鐓х墖,鐐瑰嚮鍙充笂瑙掔殑瀵瑰彿銆
3銆佺偣鍑誨ぇ灝忕殑閫夐」銆
4銆侀暱鎸変笅鍥劇殑鎸夐挳鍚戝乏鎷栧姩銆
5銆佸綋鍘嬬緝澶у皬鏄劇ず涓40k浠ヤ笅鏃舵澗寮鎵嬫寚,鐐瑰嚮寮濮嬪帇緙┿
6銆佺収鐗囨垚鍔熷湴緙╁皬鍒40k浠ヤ笅銆
鎵嬫満鎬庝箞鍘嬬緝鐓х墖澶у皬kb鎵嬫満鍘嬬緝鐓х墖澶у皬kb鐨勬柟娉:
鍑嗗囨潗鏂:vivoNEXA銆丄ndroid10銆丄PP鐗堟湰:v7.1.0.5
1銆佸湪鎵嬫満妗岄潰涓婃壘鍒
鏂囦歡綆$悊
騫剁偣鍑昏繘鍏ャ
2銆佹壘鍒版枃浠剁$悊鍥劇墖綾繪枃浠,鐐瑰嚮榪涘叆鈥滃浘鐗団濄
3銆佹墦寮鎵闇瑕佺殑鍘嬬緝鍥劇墖鐨
鏂囦歡澶
,闀挎寜絀虹櫧浣嶇疆銆
4銆侀渶瑕佸帇緙╃殑鍏ㄩ,鐐瑰嚮鍙充笅瑙掆滀笁鐐光濇洿澶氶夐」銆
5銆侀夋嫨騫剁偣鍑燴滃帇緙┾,瀹屾垚鐓х墖鍘嬬緝鍗沖彲瀹屾垚銆
鎵嬫満鐓х墖鎬庝箞鍘嬬緝鍒300K浠ヤ笅錛鍙浠ョ敤windows鑷甯︾殑鈥滅敾鍥鋸濊皟浣庣収鐗囩殑鍒嗚鯨鐜囧拰璐ㄩ噺,杈懼埌緙╁皬鐓х墖鏂囦歡浣撶Н鐨勭洰鐨,鍏蜂綋鏂規硶濡備笅:
1銆佸備笅鍥,榧犳爣鍙抽敭鍗曞嚮鍥劇墖,鍦ㄥ脊鍑虹殑鍙抽敭鑿滃崟涓鍗曞嚮鈥滅紪杈戔,榪欏氨鏄鐢ㄢ滅敾鍥鋸濇墦寮緙栬緫鍥劇墖:
2銆侀栧厛灝濊瘯杞鎹㈡牸寮忚揪鍒扮洰鐨,jpeg鏍煎紡鏄涓縐嶅帇緙╃巼楂樼敾闈㈣川閲忔崯澶卞皯鐨勫浘鐗囨牸寮,濡傛灉鍘熷浘鐗囦笉鏄痡peg鏍煎紡,鍙浠ュ厛灝濊瘯杞涓簀peg鏍煎紡銆傛柟娉曞備笅鍥,榧犳爣鐐瑰嚮鈥滅敾鍥鋸濊蔣浠跺乏涓婅掔殑钃濊壊鎸夐挳,鍦ㄥ睍寮鐨勪笅鎷夎彍鍗曚腑鐐瑰嚮鈥滃彟瀛樹負鈥濃啋鈥淛PEG鈥,瀹屾瘯,鏌ョ湅鈥滃彟瀛樹負鈥濈敓鎴愮殑鏂板浘鐗,浣撶Н鏄鍚︽弧瓚抽渶奼,濡傛灉涓嶆弧瓚,緇х畫涓嬮潰絎3姝:
3銆佸備笅鍥,鐢誨浘杞浠剁晫闈,鐐瑰嚮鈥滈噸鏂拌皟鏁村ぇ灝忊:
4銆佸備笅鍥,寮瑰嚭璋冩暣澶у皬鐨勭獥鍙,鐐歸夆滃儚緔犫,涓瀹氳佸嬀閫夆滀繚鎸佺旱妯姣斺,鍚﹀垯鍥懼儚鍙鑳借鎷夐暱鎴栬呭帇鎵,杈撳叆杈冨皬鐨勫儚緔,鏍規嵁褰撳墠鍥劇墖瀹為檯浣撶Н,璋冧綆榪欎釜鐣岄潰涓鍍忕礌鍊肩殑10%~50%,璋冭瘯瀹岀偣鍑燴滅『瀹氣濆叧闂榪欎釜紿楀彛,鍐嶆寜鍓嶉潰絎2姝モ滃彟瀛樹負鈥濆浘鐗,鏌ョ湅鏂板浘鐗囩殑浣撶Н,涓嶅熷皬灝遍噸澶嶇4姝ョ戶緇闄嶄綆鍍忕礌鍊,鐩村埌婊¤凍瑕佹眰涓烘:
鍘嬬緝鏄涓縐嶉氳繃鐗瑰畾鐨勭畻娉曟潵鍑忓皬璁$畻鏈烘枃浠跺ぇ灝忕殑鏈哄埗銆傝繖縐嶆満鍒舵槸涓縐嶅緢鏂逛究鐨勫彂鏄,灝ゅ叾鏄瀵圭綉緇滅敤鎴,鍥犱負瀹冨彲浠ュ噺灝忔枃浠剁殑瀛楄妭鎬繪暟,浣挎枃浠惰兘澶熼氳繃杈冩參鐨勪簰鑱旂綉榪炴帴瀹炵幇鏇村揩浼犺緭,姝ゅ栬繕鍙浠ュ噺灝戞枃浠剁殑紓佺洏鍗犵敤絀洪棿銆
❸ 設計師如何為Android應用標注尺寸
設計 Android 應用的最佳實踐:
1. 畫布大小定位 720 x 1280,72 dpi
2. 只使用偶數單位的尺寸,比如 96 px 的列表項高度,16 px 的邊距,64 px 的圖標邊長
3. 只使用 24 pt,28 pt,36 pt 和 44 pt 的字體
4. 設計完成以後,所有尺寸的 px 值除以 2 作為 dp 數值交給工程師
5. 所有字體的 pt 值除以 2 作為 sp 數值交給工程師
6. 所有切圖變成三份,分別是原始大小、縮小 1.5 倍,縮小 2 倍,分別作為 xhdpi,hdpi,mdpi 的資源交給工程師
如果你還有好奇心,可以繼續往下看這個結論是怎麼來的。
相信你已經看過這篇文檔中關於 Android 中各種尺寸單位的介紹,沒看過的最好看一下
http://developer.android.com/guide/topics/resources/more-resources.html#Dimension
在 Android 應用設計中涉及到的單位都是密度無關像素(Density-independent Pixels),這個說法太拗口了,通俗點講,Android 應用設計中只用物理尺寸,類似厘米,英寸這種單位,不用像素。之所以這樣,是由於像素在手機領域說不清楚問題,比方說規定列表項高度是 48 px,在 HTC C510e 上看起來就不錯,但在三星 Galaxy SIII 上看起來就會非常矮,導致很難看,這是因為這兩個機器的屏幕的 dpi 相差很大,前一個大約 160 dpi,後一個大約 320 dpi。這就是手機屏幕不同帶來的問題,如果不考慮平板,不同主要是密度不同,而不是尺寸不同,也不是解析度不同,給設計帶來困擾的根本是屏幕密度不同。不幸的是,很少人對這個有概念,通常介紹手機,會說屏幕尺寸,3.5
寸還是 4 寸,會說解析度,480 x 800 還是 720 x 1280,但通常不會介紹屏幕密度是多少。其實通過尺寸和解析度可以算出密度來,dpi 的 定義是 dot per inch,即每英寸的像素點,把解析度和尺寸除一除就能得到。一個不確切的分法是,720 x 1280 的手機很可能接近 320 dpi (Android 里的 xhdpi),480 x 800 的手機很可能接近 240 dpi (Android 里的 hdpi)。
Android 選擇的單位是 dp 和 sp,dp 的定義是「在 160 dpi 的屏幕上,1 dp 大約等於 1 px」。這個說法也很拗口,簡單點說,1 dp ≈ 1 / 160 inch,他就是物理界的一長度單位。用這個單位設計就統一了,比方說規定列表項高度是 48 dp,在所有手機上看起來都差不多是 48 / 160 inch 那麼高,雖然在不同手機上它對應了不一樣多的像素點,但這個轉換是 Android 手機完成的,每個 Android 手機都得知道在我這 1 dp 對應多少像素。sp 也是同樣解釋,18
sp 的字在所有手機上看起來應該都差不多大(自己改了字體大小設置的除外)。看到這里,可能有人會想,那豈不是不同手機顯示的內容不同。確實是這樣,同樣一個列表,在 A 手機上只能顯示五行,但在 B 個手機上就能顯示六行;還是這個列表,在 A 手機上文字左邊的留白就顯得沒有 B 手機多。
鋪陳完了,逐條解釋開始的最佳實踐。
設計師在設計的時候是用不了 dp 的,他不可能拖一個 48 x 48 dp 的框,不可能設置一個 8 dp 的邊距,Photoshop 里全是 px。於是我們就只有挑一個特定密度的屏幕,在這個特定密度的屏幕上,dp 和 px 的關系是確定,把設計做了,再把 px 轉換成 dp 給工程師。另外有一點是,長度可以乘除一下就解決,圖片是不能除的,圖片必須手動縮放。
我們挑哪一個密度好呢?答案是挑密度最大的,因為圖片縮小比放大好,放大會失真,選 320 dpi 作為目標屏幕,為其他屏幕提供圖片時,只需要縮小。而 320 dpi 屏幕的解析度最常見的是 720 x 1280,以這個尺寸作為畫布尺寸,是最帶感的,這樣的設計稿就和應用在最多數的 320 dpi 的機器上運行起來的樣子一樣。當然你可以選其他畫布大小,但再大也不見得方便,這個大小也夠施展了。72 dpi 是 Photoshop 的默認設置,不要改就好,這個數字和後面的換算有關系。
字體的問題,Android 4.0 以後的設計規范中建議只使用四種字型大小,分別是 12 sp,14 sp,18 sp 和 22 sp,這也是 Android framework 用到的全部字型大小。我們需要找到在這個畫布上,這些字型大小和 pt 的對應關系,以及,px 和 dp 的對應關系。有兩種演算法:
演算法一
根據 dp 的定義「在 160 dpi 的屏幕上,1 dp 大約等於 1 px」,那麼在 320 dpi 的屏幕上,1 dp 約等於 2 px,我們就是為 320 dpi 做的設計,所有 px 值除以 2 就是 dp 值。字體略復雜一點,1 pt = 1 / 72 inch,即在 72 dpi 的畫布上,1 pt = 1 px,我們的畫布就是 72 dpi,又有 1 sp 約等於 2 px(同 dp 的定義),所以 1 sp = 2 pt,所有 pt 值除以 2 就是 sp 值。
演算法二
可以想像是把一個 320 dpi 的手機屏幕放大到了 Photoshop 里,放大倍數是 320 / 72,即手機上的 1 dp,在畫布上就是 320 / 72 dp,而 1 dp = 1 / 160 inch,所以在畫布上就是 2 / 72 inch,而畫布是 72 dpi,所以在畫布上就是 2 px,即手機上的 1 dp 對應畫布上的 2 px。字體的計算一樣,只是多一個在 72 dpi 上,1 pt = 1 px 的轉換。
至此,都算清楚了,在這個畫布上,px 到 dp,pt 到 sp 都是除以 2 的關系。
最後,給 320 dpi 做的圖片,到 240 dpi,160 dpi 上就要分別縮小 1.5 倍和縮小 2 倍。120 dpi 的機器已經很罕見,可以不考慮了