基本思路:
1醉冤、選擇一種尺寸作為設計和開發(fā)基準秩霍;
2、定義一套適配規(guī)則蚁阳,自動適配剩下兩種尺寸铃绒;
3、特殊適配效果給出設計效果螺捐。
一颠悬、界面設計階段:
1、設計稿:設計師使用iPhone6(750x1334)的尺寸做設計稿定血;
2赔癌、矢量圖層:除了圖片以外的設計元素全部做成矢量;
3澜沟、標注稿:直接在iPhone6的設計稿上做標注灾票;
4、切圖:方法a茫虽,先在iPhone6的設計稿上切圖刊苍,生成@2x(二倍圖)既们,再將設計稿等比放大1.5倍,切圖生成@3x(三倍圖)正什;方法b啥纸,安裝插件cutterman,命名好圖層婴氮,一鍵切圖F⒉稹(強烈推薦)
二、界面輸出階段
交付輸出文檔給開發(fā)工程師莹妒,文檔包括:1.設計稿;2.標注稿绰上;3.切圖(包括@3x和@2x)
ps:文檔整理最好按照頁面或者模塊分成幾部分旨怠,不要全部放在同一個文件夾(當一個文件夾里面成千上萬的切圖,估計程序員會瘋掉)蜈块。
三鉴腻、適配調試階段
界面開發(fā)出來后,針對實際效果向上向下調試iPhone6 plus和iPhone5s的界面效果
幾個注意事項:
1百揭,圖片圖層要處理成智能對象爽哎,保證放大1.5倍不失真
2,做標注的時候器一,要考慮界面的代碼實現邏輯