IOS與Android的UI設配方案

方案一

IOS與Android共用一套設計效果圖 1242*2208

IOS與Android常用的尺寸中,最大尺寸為6p的尺寸,即1242*2208px

IOS常用尺寸:1242*2208? ? 750*1334? ? 640*1136? ? 640*960,其中750*1334? ? 640*1136? ? 640*960 同為@2x? ? 1242*2208為@3x,所以750*1334? ? 640*1136? ? 640*960只做一套640*1136就好。

Android常用尺寸:1080*1920 ? ?720*1080 ? ?480*800,他們之間相鄰是可以整除1.5的,也就是1080除以1.5等于720,720除以1.5等于480,即這三個尺寸可以等比縮放大小,只做一套1080*1920就可以。

那么問題來了。

IOS要做兩套尺寸,1242*2208與640*1136

Android要做一套尺寸,1080*1920

這樣不就是三套設計圖了嗎?設計師們會被氣死的?

其實,6p的尺寸1242*2208整除1.15就剛好就等于1080*1920,也就是說,1242*2208與1080*1920是可以等比縮放的。

現(xiàn)在就剩下IOS的640*1136。

那么就有人問,那IOS的1242*2208可以直接等比縮放成640*1136。答案是不可以的,因為他們之間不能整除的,但是我們把1242*2208的設計圖直接在Photoshop里面直接等不縮放到寬度為640的尺寸,我們會發(fā)現(xiàn)原本的2208變成了1138,也就是說比1136多了2個像素,2個像素的誤差對于沒有有強迫證的也就無所謂了,2個像素的誤差我們會將1138硬改成1136,現(xiàn)在你會發(fā)現(xiàn),里面的圖標,1136跟1138大小其實是一樣。

為什么提到圖標呢?因為我們交付的物只需要一套效果圖與五套切圖就好了。即

一套效果圖 ? 1242*2208

五套切圖 ?1242*2208 ? 640*1136 ? 1080*1920 ? 720*1080 ? 480*800

最后注意縮放的圖標要細調(diào)一下,由于轉(zhuǎn)換有誤差,共用一套效果圖是有一定風險的,例如UI細節(jié)上的風險。開發(fā)前,設計師與開發(fā)人員要先共同確認此適配方案,要全程溝通,及時改正UI方面的問題。


方案二

IOS與Android共用一套設計效果圖 750*1334

上面提到過,750*1334? ? 640*1136? ? 640*960 同為@2x,所以750跟640用同一套圖標,同一套字體,至于其他尺寸大小,只要跟著尺寸延伸就沒問題啦。尺寸750*1334應用1242*2208,則需要把@2x導出成@3x,也就是把字體放大1.5倍,其余的直接放到1242就可以啦。

至于Android版本,我個人的做法是把750*1334直接換算成1080*1920,因為只有1PX像素只差,直接忽略。換算出1080*1920,Android的其他尺寸就按他們之間的規(guī)律處理就可以啦。

因為我們交付的物只需要一套效果圖與五套切圖就好了。即

一套效果圖 ? 750*1334

五套切圖 ?1242*2208 ? 640*1136 ? 1080*1920 ? 720*1080 ? 480*800


圖片來自網(wǎng)絡

方案三

IOS與Android各做兩套設計效果圖?

原理跟方案一、二差不多,但為了追求細節(jié)上的完美,可以多做一套設計圖,即兩套設計圖:1242*2208和640*1136.

1242*2208適配6P、Android三種尺寸。

1242*2208整除1.5等于1080*1920:

1080*1920整除1.5等于720*1280:

720*1280整除1.5等于480*800:

640*1136適配6 5 5S等尺寸。

?方案四

如果追求完美,那就需要三套圖。即:

1242*2208 ? ? ? 640*1136 ? ? ? 1080*1920?

還可以加上一套640*960,總之分開做越多套,出來的效果圖就會越精細,反之,你懂得,不過這也取決設計師本人和公司領導的決策,會不會給那么多時間。不說廢話了,希望能幫到各位!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • 使用sketch最重要的一點是設計好控件的規(guī)范。 為做好設計規(guī)范需要對色彩進行編號,比如:color_a”_1,c...
    youyeath閱讀 26,663評論 2 237
  • iOSapp圖標的圓角半徑是多少? (注:現(xiàn)在IOS圖標是不需要再畫圓角了,直接方形就OK) 括弧里面是對應的半徑...
    小小z同學閱讀 20,431評論 1 60
  • 聲明:這里寫的不是一種規(guī)范,只是一種工作方法,大家在具體工作中,一定要靈活運用。另外,技術(shù)的更新是非??斓?,我寫的...
    白屏閱讀 9,590評論 20 100
  • 好久沒有寫廢話了。 至此琥珀小姐姐即將加入精英組開始進階的審神者生涯,在這之后的劇情也就基本上屬于個人腦洞了,與游...
    九重桜閱讀 212評論 0 0
  • 為什么一個女人過了30歲沒有結(jié)婚會被視為另類,假如一個女人一輩子沒有結(jié)婚,是不是就是洪水猛獸了呢。想不明白,到了...
    楊家有女閱讀 326評論 0 0

友情鏈接更多精彩內(nèi)容