|
【劉煒的回答(125票)】: 陳偉答案中對 Photoshop 的看法有些誤導。 Photoshop 支持用矢量（而且應(yīng)該只用矢量）元素設(shè)計界面,，只是無法輸出矢量資源（可以通過腳本用 AI 輸出 SVG,，但相對不那么方便）。 最新的 Photoshop 是有跟 Sketch 一樣的輸出切圖功能的（Generator）,，用 2x 的 PSD 輸出 3x 的切圖也可以,。而且 Photoshop 配合 Slicy 輸出切圖比 Sketch 3 快捷很多。 Sketch 相當棒,，但目前（v3.1）還是有不少小問題,，加上對中文支持不夠好，在界面設(shè)計中還不能完全取代 Photoshop,。 關(guān)于題目的問題,，首先一份設(shè)計稿就不能適用于 iOS 各手機屏幕尺寸。以下是 Bjango 把目前各 iOS 手機屏幕還原為 1x 的對比圖,，可見在設(shè)計稿中四種屏幕尺寸寬高都不一樣,，不是簡單地把 iPhone 5 界面縮放一下就變成 iPhone 6 的設(shè)計稿了。  如何支持多個尺寸屏幕，這個要分情況討論,。 對于常規(guī)界面我們可以偷個懶,，只做 iPhone 5 屏幕尺寸的設(shè)計稿，請開發(fā)在其它屏幕上自適應(yīng),，最終檢查實機效果沒問題就行,。 蘋果官網(wǎng)上屏幕對比頁面里用到的都是常規(guī)界面：  對于一些定制的界面我們應(yīng)該根據(jù)不同屏幕重新適配,，比如下面是個簡單的 profile 頁面示例，自動適配到大屏幕的效果挺糟糕的,。  此時設(shè)計師應(yīng)該手動為大屏幕重新調(diào)整設(shè)計,，像下圖一樣,。  在上圖中可看出 iPhone 6 Plus 界面中部分切圖尺寸比 3x 更大,，要單獨切圖,，所以不是說簡單地給 iPhone 6 Plus 統(tǒng)一切 3x 圖就 OK 的了。這時矢量切圖在開發(fā)中優(yōu)勢很明顯,，只要把大屏幕中切圖的尺寸告訴開發(fā)即可,，無需針對非 3x 元素額外輸出切圖。 * 手機屏幕畢竟還是像素位圖,，像細線圖標即使是矢量的在縮放后仍可能會出現(xiàn)虛化模糊的現(xiàn)象（類似 HTML 里的 icon font）,，理論上并非所有情況都適合用矢量切圖。但是,，iPhone 6 Plus 屏幕本身又是 downscale 的,，導致原本 pixel perfect 的切圖也會在縮放后發(fā)虛，完全沒有 pixel perfect 而言,，究竟是不是 iPhone 6 Plus 屏幕已經(jīng)優(yōu)化的看不出像素點了,，要等看到實機才能確定。 切圖方面用 Sketch 的話可以盡量試試 PDF 矢量切圖（但要在實機上確認效果）,。Photoshop 就只能輸出位圖了,，上面提到定制界面里的一些切圖得單獨輸出，其他常規(guī)的用 2x 的 PSD 輸出 1-3x 切圖即可,。 另外,，與 Photoshop 和 Sketch 相比，AI 不適合做界面設(shè)計,。勇于嘗試 Sketch 是好的,，但若 Sketch 各種毛病忍不了的話建議還是用 Photoshop 好些。 【陳偉的回答(69票)】: 1. 換工具,，最好用 Sketch,，其次推薦 AI。放棄 Photoshop 吧,，對矢量支持的太無力 2. 只用輸出一倍的矢量圖（PDF）就可以了 我們再也不需要計算了，喪心病狂的蘋果已經(jīng)開始支持矢量圖了,，我們只需要給工程師輸出一倍的矢量圖就可以了,，目前僅發(fā)現(xiàn)支持 PDF 格式。 剛才已經(jīng)和我們的工程師調(diào)試成功了,，在 iPhone 6 plus 模擬器上的對比效果：矢量圖支持的非常完美,。  【5key的回答(27票)】: 沒時間翻譯,，僅提供PaintCode的一篇文章供大家參考吧：    Line rendering To demonstrate different rendering of pixels on various devices, we compare how 1-point wide line is rendered on
The downscaling ratio is 1920 / 2208 = 1080 / 1242 = 20 / 23. That means every 23 pixels from the original render have to be mapped to 20 physical pixels. In other words the image is scaled down to approximately 87% of its original size. via: PaintCode 【劉典的回答(16票)】: 蘋果官方提供了足夠好的工具：Auto Layout （Auto Layout Guide: Introduction）,，可以理解成 iOS 上的 CSS，如果設(shè)計師用 Auto Layout 提供的排版語言描述出 UI 布局,，那不同尺寸的 iPhone 只要同一份設(shè)計稿就可以了,。設(shè)計師除了要學習 Auto Layout 外最好也學習一下 Interface Builder。 我公司的 app 需要支持 Resizable iPhone,，昨天熬夜研究了這個問題,，今天一上知乎看多 n 多類似的問題，我研究的結(jié)果寫在這個問題下： iPhone 6 和 6 Plus 新增的屏幕尺寸會如何影響 iOS 應(yīng)用的界面設(shè)計,？ 【付陽的回答(3票)】: Sketch輕松做到,，6和5的切圖可以用一套，ppi都是326,，6+的話導出3x圖就ok 【蔣奇的回答(4票)】: 你們以前不管安卓的嗎,，今天才問這問題 【李惜的回答(1票)】: Xcode 6 的默認模板已經(jīng)支持矢量圖了……還在用 Photoshop 做 iOS 設(shè)計的同學可以好好學習一下 Sketch 了； 我認為 iPhone 6 Plus 的適配難度,，已經(jīng)完全可以再去做一個 iPad 版本了,，所以以后像是微信 iPad 這樣的東西估計就越來越少了（我就這么想一想……） Android 部門你們夠了，從來不都是 iOS 的資源文件改一下大小然后就用了嘛…… 習慣不好的設(shè)計師,，只求多福哈…… iPhone 6 Plus 永遠都會出現(xiàn)虛邊,，完全可以作為一個檢驗強迫癥的工具了。 ------------------------ 以上都是廢話 ------------------------ 我想我以后的流程肯定是制作 2208 × 1242 的版本,，標注什么的全部使用 pt,，能相對布局的就絕對相對布局，需要視情況繪 1136 x 640 和 1334 x 750 的版本 【淺草域的回答(0票)】: 蘋果發(fā)布的兩款iPhone 6新品,，設(shè)計師如何在界面上進行適配,？ 【安藝全的回答(0票)】: 關(guān)注這個問題，還好已經(jīng)用Sketch了~ 【UI路遙的回答(0票)】: 安卓的適配導致體驗不佳都沒解決的很好 現(xiàn)在又來個IOS適配 坑爹～ 只能說試圖用單純的適量軟件來解決適配問題 想法就有些簡單了 好在蘋果機器上PPI與屏幕長寬比是一致的 適配起來難度比安卓小些 最起碼很多控件能不損失體驗的情況下 可以直接沿用 具體方法與規(guī)范還在研究中 【王帆的回答(0票)】: LCM(1080,750,640)=432000 【知乎用戶的回答(3票)】: 1.由于iphone5/S和iphone6的PPi相同,，為了方便計算,，我們暫且默認iphone5和6使用同一套圖片資源，選擇iphone6的分辨率進行計算,，6和6P的屏幕寬度比為750:1080約等于0.69,，高度1334:1920約等于0.69，差不多等于2/3,，這個時候就懂了,，如果iphone6使用@2x的圖，那么P就是使用@3x的圖，也就是說iphone5的圖片資源的1.5倍. 2.通過上面的計算我們了解到,，如果要適配6P的圖片資源,，就要把所有的iP5/5S/6的圖片伸展成1.5X.但是對于許多習慣用PS等位圖來設(shè)計的人員來說，><.就苦逼了... 3.解決方法：①簡單粗暴的擴大圖片尺寸,，也就是說直接把現(xiàn)在有的圖片資源調(diào)整為1.5X,，如果全 部用路徑畫圖，會簡單許多,，直接調(diào)整大小即可 ②iphone的5/5S/6/6P的屏幕比例為9：16,，所以比例這個問題現(xiàn)在不是很大，但因 Plus增加橫版顯示,，所以建議對于一些用戶量較高的軟件進行重繪,。 ③因為現(xiàn)在沒有真機來進行測試，所以以上猜想都局限于現(xiàn)有理論,。諸位設(shè)計師可跟 身邊的開發(fā)人員探討下有沒有更好的解決方案... ④改了,，以后全部用SK和AI來畫圖吧... ⑤安卓設(shè)計不要笑，即使再苦逼我們還是你們輕松許多啊...哈哈哈哈哈哈哈.... 【tastypear的回答(20票)】: 問問隔壁的Android開發(fā)部門 原文地址:知乎 |
|
|
