1.選擇一個尺寸作為設計和開發;的基準
2.定義一組適配規則,自動適配其余兩種尺寸;
3.特殊的改編效果賦予了設計效果。先來看看我們采用的合作模式,然后慢慢解釋整個故事。
為數不多步,在視覺設計階段,設計師根據寬度(iPhone6)制作設計稿,除了圖片以外的所有設計元素都采用矢量路徑制作。設計定稿后,在設計稿上標注,并輸出標注的圖紙。同時放大1.5倍生成一個寬度的設計稿,在稿中剪切圖片。
第二步,另一個是寬度的設計圖。
第三步是完成iPhone6的界面開發()。在這個階段,我們不能使用固定寬度的開發接口,而是使用自動布局,以方便后續適應其他尺寸。
第四步:自適應調試階段,基于iPhone6的界面效果,分別上下調試()和()以下的界面效果。從而完成大、中、小屏幕適配。
為什么選擇iPhone6作為基準尺寸?
面對三種需要適配的屏幕時,很容易想到先做一個屏幕,再適配剩下的兩個屏幕。為數不多個決定是哪個屏幕應該作為設計和開發的基準尺寸我們選擇中型iPhone(/)作為基準有幾個原因:
1.從中間尺寸上下擬合時,界面調整的范圍小。在設計效果下的適應性和偏差不會太大。假設為基準做了一個非常優雅的設計,可能元素之間的比例就不是這樣了,比如圖片和文字之間的視覺比例可能會失衡。
2.有兩種顯示模式,標準模式分辨率為,放大模式分辨率為(即iPhone6的1.5倍)??梢钥闯?,在官方系統中,iPhone6與分辨率之間存在1.5倍的放大關系。在許多情況下,這兩種尺寸可以以1.5倍的直接等比例匹配。
3.這個奇妙的數值是蘋果官方不愿意公開宣傳的分辨率,而且不方便記憶和計算網格。雖然是廣泛使用的分辨率,但在大屏時代用小尺寸作為設計基準顯然已經過時,設計師也會停留在小屏的角度來設計。
【急】基于手機APP產品的UI設計打開報告