APP從開發(fā)到切圖Android篇_第1頁
APP從開發(fā)到切圖Android篇_第2頁
APP從開發(fā)到切圖Android篇_第3頁
APP從開發(fā)到切圖Android篇_第4頁
APP從開發(fā)到切圖Android篇_第5頁
已閱讀5頁,還剩8頁未讀, 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進行舉報或認領(lǐng)

文檔簡介

一款APP,從設計稿到切圖(Android篇)依舊聲明:這里寫的依舊只是某一種工作方法,而不是一種規(guī)范,你可以參考,但不要照搬,在具體工作中,一定要靈活運用。匯總貼,整理了之前三篇零散的關(guān)于Android的文章……這里我把Android的開發(fā)文檔,字體,以及不同設計尺寸的文檔圖片上傳了,喜歡的下載;切圖的工具在IOS的帖子里,喜歡可以去那下載,這里就不上傳了。如果看了IOS篇,對標注切圖的問題會有更全面的理解,建議去看一下……Part1

基礎(chǔ)概念①你需要知道的一些鋪墊:手機分辨率:分辨率就是手機屏幕的像素點數(shù),類似480*800、720*1280、1080*1920這個意思……手機屏幕尺寸:手機對角線的物理尺寸,單位是英寸;比如小米4的尺寸就是5英寸,IPhone6的尺寸就是4.7英寸……手機屏幕密度:dpi或PPI,每英寸的像素點數(shù),數(shù)值越高顯示的越逼真細膩。下面是屏幕密度的計算方法~可以嘗試算算自己手機的屏幕密度~②Android自身設定的屏幕密度安卓尺寸眾多,按每個屏幕去適配肯定不現(xiàn)實;所以為了解決這個問題,安卓手機屏幕有自己初始的固定密度,安卓會根據(jù)這些屏幕不同的密度自己進行適配。這一點內(nèi)容掌握到能滿足自己設計工作需要就可以了……以下是Android的密度劃分以及代表的分辨率,這里你可以發(fā)現(xiàn)已經(jīng)和設計稿尺寸和切圖輸出開始掛鉤了……你需要了解IPhone各個版本的手機屏幕密度:IPhone4/4s/5/5s/5c/6≈320dpi

你會發(fā)現(xiàn)單從屏幕密度來說,IPhone可以算是超高密度了。下面來說說這幾個密度:LDPI

120dpi

低密度

不考慮這個了,消失了……MDPI

160dpi

中密度

這個目前少見……HDPI

240dpi

高密度

常見xHDPI

320dpi

超高密度

常見xxHDPI

480dpi

超超高密度

常見xxxHDPI

640dpi

超超高密度

Android4.3推出了對此密度的支持,也就是平板電視的4K分辨率你的切圖會根據(jù)這幾個密度來決定輸出多少套~Part2

標注切圖你需要知道的Android的一些開發(fā)使用的單位:dp:android開發(fā)使用的單位,其實相當于一種比例換算單位,它可以保證控件在不同密度的屏幕上按照這個比例單位換算顯示相同的效果。sp:android開發(fā)使用的文字單位,和dp差不多,也是為了保證文字在不同密度的屏幕上顯示相同的效果。①標注設計稿時,使用px還是dp和sp?答:和安卓工程師溝通,推薦使用dp和sp進行標注。但目前很多設計師對dp和sp這個單位并不理解,所以有些設計師提供設計稿的時候依舊使用px進行標注,這一點去和你的搭檔工程師進行溝通,如果不影響他開發(fā)以及他能換算清楚的前提下,你可以考慮使用Px,但是我并不推薦。這里要記住一點(你只需要記住能幫助你工作就可以):當屏幕密度為MDPI(160PPI)時,1dp=1px

當屏幕密度為MDPI(160PPI)時,1sp=1px像素字號=屏幕密度/160*sp字號

可以根據(jù)這個去算算設計稿中的像素字號標注為sp是多少,比如xHDPI下,36px的字標注為sp就是18sp,以此類推。按照不同的屏幕密度換算,也就是下圖所示的意思:②使用哪種尺寸做設計稿?答:通過上圖你會發(fā)現(xiàn),xHDPI下,倍數(shù)關(guān)系為2,而且xHDPI就目前的市場來看,還算屬于主流機型;這樣無論是標注,還是主流機型都能兼顧的到,所以推薦使用720*1280尺寸做設計稿,這樣即使你標注的是px,工程師也可以換算的比較方便?,F(xiàn)在有一種情況比較普遍,公司做了IOS版本的設計稿,現(xiàn)在要給安卓用,應該怎么辦?IPhone的屏幕密度已經(jīng)達到xHDPI了,通常用750*1334的IP6尺寸做設計稿;理論上,IP6的切圖其實可以給xHDPI使用;和我們的安卓工程師溝通,要求是把IP6的設計稿更改尺寸到720尺寸下,對各個控件進行微調(diào),重新提供標注。也就是說,我需要提供兩套標注,一套給IOS的標注,一套給Android的標注。(這是我目前搭檔的要求,實際情況根據(jù)自身環(huán)境決定)③:你需要提供幾套切圖資源?答:理論狀態(tài)下,如果你想兼顧到目前還存在的各個機型,應該為不同的密度提供不同尺寸大小的切圖。但這無疑提升了巨大的工作量,而且還可能浪費很大的資源空間,實際上,很多機型已經(jīng)不占有主流市場了,而且很多奇葩的分辨率也沒必要去考慮適配,所以,具體輸出幾套需要看公司的產(chǎn)品需求而定。通常我是這么干的:選取最大尺寸提供一套切片資源,交給工程師處理,適配到各個屏幕密度。這里要注意,這個“最大尺寸”,指的并不是目前市面上Android手機出現(xiàn)過的最大尺寸,而是指目前流行的主流機型中的最大尺寸,這樣可節(jié)省很大的資源控件。關(guān)于最大尺寸選取多少,你需要和你們的安卓工程師溝通,每個安卓工程師對這個問題的結(jié)論并不同。其實現(xiàn)在AssistorPS這個PS外掛對輸出不同屏幕密度的切片處理的非常方便,其實也沒有想象中那么巨大的工作量。安卓最小可操作尺寸48dp:這和IOS的最小點擊區(qū)域性質(zhì)是一樣的,都是考慮到手指點擊的靈敏性的問題,設計可點擊控件的時候要考慮到這一點,關(guān)于這個設計文檔里已經(jīng)明確解釋了,更多的內(nèi)容可以去下載設計文檔查看。安卓設計使用的字體:方正蘭亭黑簡體

沒發(fā)現(xiàn)和手機字體效果完全一樣的字體,如果做設計稿的話,蘭亭黑比較接近,可以考慮使用。西文字體:Roboto

Android西文默認字體。這里感謝@bigyang提供的字體:在Android5.0之后,使用的是思源黑體,字體文件有2個名稱,“sourcehansans”和“notosansCJK”。思源黑體是Adobe和Google領(lǐng)導開發(fā)的開源字體,支持繁簡日韓,有7種字體粗細可以自己去下載,我這里就不上傳了,畢竟LZ行事作風比較粗狂,設計稿也不是十分在乎和手機效果一模一樣~Part3

工作的一些方法這部分不僅僅局限在Android平臺,說的是一種工作方式Q1:IOS的切片怎么提供給工程師?答:在前面,我們知道了怎么切片,但是一款APP,少說也有幾十個界面,難道你要把所有界面的切片資源放到一起給工程師嗎?關(guān)于這一點,我和IOS工程師進行了溝通,其實我現(xiàn)在是把所有的圖放到一個文件夾給他的,因為我們的產(chǎn)品需要的切片并不多,而且我們搭檔很久了,我的命名習慣和分類習慣他都已經(jīng)熟悉了,很容易就找到;理論上,最好的方式是每一個頁面的切片資源單獨放在一個文件夾里面,文件夾命好名,這樣工程師可以直接套頁面使用了,如下圖:大致是這個意思,最后的文件夾我就不一一翻譯了,你懂就行;因為我以前也寫過一點程序,所以不習慣用中文命名文件夾和文件了。然后你的@2x,@3x的切片資源放到對應的文件夾內(nèi)就可以了。這個是我個人的工作習慣,不過你可以考慮要不要這么做;如果你和工程師關(guān)系不錯,并且是一對好基友,那其實沒必要搞這么多文件夾。但是如果你做的產(chǎn)品切片資源很多,而且公司有需要比較正規(guī)的工作流程,建議你可以考慮這種方式。不過可能會增加你的工作量,自己取舍吧。Q2:Android的切片怎么提供給工程師?答:IOS的切片有@2x,@3x之分,那么Android的切片根據(jù)dpi的不同,其實和IOS的類似,只不過是按照dpi來進行資源文件夾的命名,如下圖:根據(jù)不同的分辨率進行切片歸類,但是你看到了,如果切片特別多,提供三套甚至更多套豈不是要累死了?目前我使用的辦法就是只提供最大分辨率的切片,交給安卓工程師自己去縮放適配其他分辨率吧,所以和你的搭檔溝通一下。其實現(xiàn)在絕大多數(shù)公司限于人力物力的限制,沒有這么嚴格的工作方式,基本上就是一個文件夾,命名好了就提供給工程師了。這里還是提醒各位,沒有固定的工作方式和方法,任何方式都是為了提升工作效率而進行的。Part4

題外話很多朋友糾結(jié),自己設計水平進步慢,甚至呆在現(xiàn)在的公司沒進步反而因為每天的業(yè)務需求還退步了!剛?cè)胄械娜耍欢ㄒ覀€好師傅帶著你,這樣你會少走很多彎路,設計水平和職業(yè)素養(yǎng)會突飛猛進。那沒有師傅帶怎么辦?如果是剛參加工作,建議第一年先熟悉工作流程和了解行業(yè)信息動態(tài),積累了個人作品,之后跳槽吧……關(guān)于設計水平的提高問題,其實真正考驗設計水平的,還是平面設計,這一點我之前不相信,因為我沒接觸過平面設計,大學專業(yè)就是游戲美術(shù),根本涉及不到平面;但是接觸工作之后,發(fā)現(xiàn)平面設計水平高的人,如果把思維轉(zhuǎn)換一下,在網(wǎng)頁和UI設計上都不會差,所以我個人推薦有空研究研究平面設計,對設計水平

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論