蘋果如何實現乙份設計稿支援多個尺寸

2022-08-01 12:42:12 字數 1825 閱讀 2458

本文**至 

隨著蘋果發布兩種新尺寸的大屏iphone 6,ios平台尺寸適配問題終於還是來了,移動設計全面進入「雜屏」時代。

1、選擇一種尺寸作為設計和開發基準;

2、定義一套適配規則,自動適配剩下兩種尺寸;

3、特殊適配效果給出設計效果。

第一步,視覺設計階段,設計師按寬度750px(iphone 6)做設計稿,除外所有設計元素用向量路徑來做。設計定稿後在750px的設計稿上做標註,輸出標註圖。同時等比放大1.5倍生成寬度1125px的設計稿,在1125px的稿子裡切圖。

第二步,輸出兩個交付物給開發工程師:乙個是程式用到的@3x切圖資源,另乙個是寬度750px的設計標註圖。

第三步,開發工程師拿到750px標註圖和@3x切圖資源,完成iphone 6(375pt)的介面開發。此階段不能用固定寬度的方式開發介面,得用自動布局(auto layout),方便後續適配到其它尺寸。

第四步,適配除錯階段,基於iphone 6的介面效果,分別向上向下除錯iphone 6 plus(414pt)和iphone 5s及以下(320pt)的介面效果。由此完成大中小三屏適配。

為什麼選擇iphone 6作為基準尺寸?

當面對大中小三種螢幕需要適配的時候,很容易想到先做好一種螢幕,再去適配剩下兩種螢幕。第乙個決定是到底以哪種螢幕作為設計和開發的基準尺寸。我們選擇中間尺寸的iphone 6(750px/375pt)作為基準,基於幾個原因:

1、從中間尺寸向上和向下適配的時候介面調整的幅度最小。375pt下的設計效果適配到414pt和320pt偏差不會太大。假設以414pt為基準做出很優雅的設計,到320pt可能元素之間比例就不是那麼回事了,比如和文字之間視覺比例可能失調。

2、iphone 6 plus有兩種顯示模式,標準模式解析度為1242x2208,放大模式解析度為1125x2001(即iphone 6的1.5倍)。可見官方系統裡iphone 6和iphone 6 plus解析度之間就存在1.5倍的倍率關係。很多情況下這兩種尺寸可以用1.5倍直接等比適配。

3、1242x2208這個奇葩的數值是蘋果官方都不願意公開宣傳的乙個解析度,不便於記憶和計算柵格。640x1136雖然是廣泛應用的乙個解析度,但是大屏時代依然以小尺寸為設計基準顯然不合時宜,設計師會停留在小屏的視角做設計。

所以,iphone6的750x1334是最適合基準尺寸。

只交付一套設計稿,預設用什麼規則來適配?

源自:中華廣告網

四個方面揭示傳統門戶的衰落2014.10.24

文化「走出去」如何講好中國故事2014.10.24

發布qq登入

遊客中華廣告網正在使用暢言

新聞資訊

【近年來我國文化領域立法成就綜述】【***印發體育產業意見 ...

黃頁搜尋

more+

新**推薦

more+

如何編寫乙份介面文件

編寫乙份基本的介面檔案要注意以下幾點 1.一定要有版本號,因為基本上對應的介面都是剛開發或者待開發的 已經正常使用的介面也不需要你來寫文件 不可能一次提供最終版,方便後續更改,同時避免因為修改多次導致雙方使用不一樣的文件而出錯。2.封皮要有,帶公司logo的那種,目錄要有,時間要有 建立時間,修改時...

如何制定乙份編碼規範

以前整理出來並在團隊中推行的乙份php編碼規範,紙質的還在,電子版的居然找不到了,只好重新再整理乙份。整理的過程中,忽然想到,這樣的規範每個團隊都不同,放在這裡的意義不大,所以轉而整理規範制定的思路。在php的內部世界,一時駱駝峰 一時小寫下劃線,整個命名本身就是乙個很混亂的狀態。後來,php的官方...

職場 如何選擇乙份工作(一)

現代人的成長經歷大體都是這樣的,奮進的少年求學階段,迷茫的中年職場階段,按部就班的老年階段,這是我們這個社會大部分人的一生,看到這樣的一生,筆者很是無奈,不得不 痛定思痛,痛何如哉 思考總結自己的職場之路。當我們選擇了從事什麼行業之後,接下來還有很多選擇等待我們,比如相同的行業去哪家公司,相同的崗位...