總結:需要交付給開發(fā)的文件有
1,原圖(png格式澜搅，三種分辨率7501334,12422208,640960，以7501334為基準）
2,切圖(2x,3x)
3,標注圖(三種分辨率底下標注圖,以750*1334為基準)
4,流程圖
為什么要以iphone6為基準妄痪？
是買不起iphone6plus嗎?
----------------背景知識參考分割線---------------------
iphone4s-6s iphone6/6s plus
狀態(tài)欄 40px 60px
導航欄 88px 132px
標簽欄 98px 146px
iphone4s iphone5/5c/5s iphone6/6s iphone6/6s plus
分辨率 640960 6401136 7501334 12422208(1080*1920 downsampling)
物理尺寸 3.5 4.0 4.7 5.5
326ppi 326ppi 326ppi 401ppi
----------------背景知識參考分割線---------------------
要以iphone6/6s為基準的主要原因------------
與iphone5/5s比率一樣
750/1334 = 640/1136 = 0.56...
覆蓋4個機型命斧，中間尺寸棋恼，縮放自如
想一想:為什么基準不應該是iphone6plus？
試試iphone6plus的圖放到iphone4s的效果
想一想:為什么基準不應該是iphone4?
試試iphone4的圖放到iphone6plus的效果
要以iphone6/6s為基準的次要原因-------------
黃太吉用戶11月份機型統(tǒng)計占比列表
機型 新增用戶(占比)
iPhone 6 32.78%
iPhone 6 Plus 25.44%
iPhone 6s 11.78%
iPhone 5s Global 9.04%
iPhone 6s Plus 7.63%
iPhone 5 CDMA 4.99%
iPhone 4S 1.22%
iPhone 5s GSM 1.22%
iPhone 5c GSM 1.04%
iPhone 5c Global 0.85%
iPod touch 6G 0.42%
iPad mini 2G Wi-Fi 0.42%
iPod touch 5 0.38%
iPad Air 2 (WiFi) 0.38%
iPad 4 Wi-Fi 0.33%
iPad mini 1G 0.33%
iPad mini 3 (WiFi) 0.28%
iPad Air (WiFi) 0.24%
iPad2 Wi-Fi (R2) 0.19%
iPhone 5 GSM 0.14%
iPad Air 2 (LTE) 0.14%
iPad mini 4 (WiFi) 0.09%
iPad mini 3 (LTE) 0.05%
分辨率
1242*2208 33.07%
750 x 1334 45.56%
640 x 1136 17.52%
640 x 960 1.22%
其他iPad分辨率 2.3%
我們原以為的高端iphone6 plus并非最多凹联，最高45.56%,分辨率是750 x 1334,請記住最高占比分辨率是750 x 1334
要以iphone6/6s為基準的次要原因三-------------
UI所用單位px
開發(fā)所用單位point
如果從px得到point
12422208 的尺寸/3 414736
7501334 的尺寸/2 375667
假設一套app 50個界面，每個界面至少40個尺寸數(shù) 2000個數(shù)需要開發(fā)計算 請做2000個除以2和除以3的速度哪個快哪個慢
所以請務必采用750 x 1334分辨率做圖哆档，另外以偶數(shù)做標注蔽挠，避免小數(shù)避免鋸齒和邊線模糊。
- 2,切圖
iphone 4s,iphone5,iphone5c,iphone5s,iphone6,iphone6s這六款機型使用的都是2x圖,
iphone6s/6 plus的是3x圖,
比如UI給4060,起點(20,20)的按鈕尺寸,開發(fā)是以2030去定大小瓜浸，(10,10)的坐標定位,iOS系統(tǒng)根據(jù)文件名的2x后綴自動渲染為2倍的比率,所以UI需要命名為button@2x.png這種格式
對應6plus的請以60*90大小切圖澳淑，命名為button@3x.png這種格式
-------------文件命名萬能公式--------------
模塊類別功能狀態(tài).@2x.png
模塊類別功能狀態(tài).@3x.png
舉個例子
order_button_buy_normal@2x.png
order_button_buy_selected@2x.png
訂單按鈕購買默認
訂單按鈕購買按下
盡量用英文比原，參考英文命名
-
3，標注圖要什么
要什么
(1)尺寸位置
(2)字體與大小
(3)顏色
(4)有多個同樣大小的元素時杠巡，請標準是否動態(tài)計算量窘，計算的依據(jù)
為什么標注要讓UI給，碼農自己不可以量扒庥怠蚌铜？
-----可以量，量不準嫩海，邊做邊量也浪費工時
UI也量不準啊
------碼農能比UI量的更準嗎
字體厘线，尺寸布局屬于設計的范疇，碼農的關注點在于實現(xiàn)出革。
-
4造壮，流程圖為什么要
導流圖一部分可以再次梳理設計流轉思路，驗證路徑的完整性
海龍多次骂束，包括上次曉鵬也提到我們的設計中都是一條路走到底沒有考慮返回路徑耳璧，沒有考慮第二路徑，以及與別的模塊的交互展箱，這一塊從形式上是流程圖的缺失所造成的旨枯。
畫流程圖的過程是梳理也是發(fā)現(xiàn)設計缺陷的過程。
比如eico早期設計了 幫助老婆訂餐這種界面元素 想象相當美好混驰，靠一兩個界面元素就想實現(xiàn)界面交互攀隔，然而別的路徑并沒有考慮到老婆的關系怎么在程序中綁定，6個很好看的狀態(tài)圖最終也只用上了2個
比如在訂單界面開通會員支付完之后界面的跳轉和首頁點擊會員功能開通支付后跳轉不一樣栖榨，這個也是在開發(fā)過程中才發(fā)現(xiàn)有不同昆汹，臨時再做更改，人為制造時間的黑洞婴栽。
總之满粗，流程圖能幫助驗證需求，也驗證UI元素增減是否合適愚争，也讓開發(fā)focus到功能的實現(xiàn)當中映皆，提高效率。
UI中的幾點建議
1轰枝，請避免為界面而界面
比如這個首頁捅彻，大部分的界面被一個地圖所占據(jù) 地圖上面漂個地址，我是要訂餐啊鞍陨，
我訂餐瞅著地圖干啥呢步淹，我又不是要自己跑出去買外賣
地圖上也沒有吃的，只有小摩托，小摩托跟我有啥關系呢贤旷，我要的是吃的啊
2广料，請考慮較為統(tǒng)一的界面轉場效果
黃太吉界面轉場 多處出現(xiàn)彈框 彈框關閉點 有在右上角 也有在底部
有從中間彈也有從底部彈 還有普通的轉場，讓用戶的回退和下一步的操作產生困擾
可以回顧一下 現(xiàn)在app的彈框出現(xiàn)的普遍比早期少幼驶，微信的退出也從屏幕中間彈框轉為底部全屏寬的提示界面艾杏，小屏幕里彈出小屏幕的感受并不美好
彈框的初衷是用來做提示的
我們還有從彈框里蹦出另外一個全屏幕這種交互
3，如果有改圖盅藻，請考慮UI整體風格統(tǒng)一
比如首頁的幾個引導圖购桑，(圖太大不貼了)
比如下面跟會員相關的三個圖 我覺得風格是不統(tǒng)一的
所以要改來改去也是有事出有因，但是我們是能把三次以上的UI改動減為1-2次的氏淑，
我認為UI不能靠一兩個控件的圖片出彩 就像程序不能靠一兩個寫的比較好的函數(shù)方法出彩一樣勃蜘，都是要顧及到整體架構的
所以我覺得每次的UI控件元素的改動可以貼整張圖看看效果
再放到整個系統(tǒng)的UI圖里看看統(tǒng)不統(tǒng)一 ，以UI 專業(yè)的眼光必然可以發(fā)現(xiàn)問題
4假残，UI中可以多考慮手勢和動效
既然要酷炫 為什么手勢基本沒有用到 一點動效都沒有的怎么配得上 閃電連擊和英雄砍殺這幾個字
好掃興缭贡。
參考資料
一張圖幫你看懂 iPhone 6 Plus 屏幕分辨率
UI設計中我們?yōu)槭裁匆獎有?/a>
iPhone 6/6 Plus 出現(xiàn)后，如何改進工作流以實現(xiàn)一份設計稿支持多個尺寸辉懒？
The iOS Design Guidelines
