iPhone 6 和 6 Plus 新增的屏幕尺寸會如何影響 iOS 應用的界面設計? | 知乎問答精選

 

A-A+

iPhone 6 和 6 Plus 新增的屏幕尺寸會如何影響 iOS 應用的界面設計?

2017年02月25日 知乎問答精選 暫無評論 閱讀 39 ℃ 次

【劉典的回答(32票)】:

從iPhone 6 開始 iOS 的 UI 設計方式更像 web 而不是 app,不同尺寸的 iPhone 上 UI 的結構是一樣的,各 UIView 的位置尺寸會有所不同。比如同樣的一段文本,iPhone 5S 上要顯示5行, iPhone 6 Plus 上可能只要三行,顯示它們的 UITextView 的尺寸就會不同。蘋果從 iOS 6 開始提供了 Auto Layout ,(Auto Layout Guide: Introduction),他的作用類似 web 中的 CSS,可以用排版語言對 UIView 進行佈局,我們只要表達出 UIView 應該靠左、靠右、居中、邊距多少等信息,Auto Layout 根據設備尺寸自動計算各 UIView 的 frame。以前 UI 設計喜歡用絕對定位,因為 iPhone 6 之前所有 iPhone 的寬度都是 320 points(注意,不是 pixels),從 iPhone 6 開始將有不同的尺寸(所以叫 Resizeable iPhone),如果用絕對定位就需要針對每種設備做調整,設計師會罵娘的。

還有就是 app 的 Launch Image,因為設備尺寸增多,再結合橫屏豎屏,導致的結果是一個 app 要有 n 多個 Launch Image,iOS 8 開始提供了 Launch Screen 的概念,現在可以用一個 xib 文件來作為 Launch Screen,然後用 Interface Builder 對 Launch Screen 進行設計,因為可以使用 Auto Layout,所以我們只需要一個 xib 文件都可以應對所有尺寸的 iPhone。

以前一直覺得 iOS 的 UI 開發不如 Android,通過手工計算 frame 位置來佈局簡直是石器時代的做法,現在 iPhone 雖然尺寸變多了,不過因為有了成熟的 Auto Layout, UI 的設計和開發變的反而比以前更容易。

【李江華的回答(1票)】:

1、iphone6一屏可以承載更多的內容,而不是像Android弱智似的強制放大縮小,有點像WEB上的寬度自適應,不過要複雜得多,因為iphone不允許屏幕兩邊留白。跟WEB一樣,開發人員可以控制是全局寬度自適應還是局部寬度自適應,如果是局部,需要控制是頁面哪個區域是自適應,哪個區域是固定寬度,哪個區域只調整元素之間的間距而元素大小不變,哪個區域只調整元素大小而間距不變。這些從官網內置APP的效果圖上很容易看得出來。

2、從設計上來來說iphone的做法是對的,但也可以看到對於設計、開發人員增加的工作量會不小,可以說比android的的屏幕適配要更難,事實上要難的多,並且產品更加不好把控,之前的優勢正在失去,但是用戶就是要大屏手機啊,為之奈何?有些人可能認為增加一行代碼就適配了,恐怕是圖樣圖森破了。

3、加班估計要更多了,戰鬥吧,騷年!話說HTML5也許是條好出路?等4G網絡來打救我們吧

【知乎用戶的回答(1票)】:

來點實打實的:

iPhone5S/5C :640*1136

iPhone6: 750*1334

iPhone6 Plus: 1242*2208(並不真是1920*1080,因為ppi不一樣~)

這樣的話plus大概是6的150%(其實是165%),而6又跟5s/5c的ppi一樣,比例也一樣,就當是一回事吧~

最省事省力的方法就是做一套Plus的1242*2208輸出為@3x,使之縮小為2/3就是@2x了可以給6使用,至於5s/5c則完全套用給6的@2x,雖然會有點拉伸。

早上跟人討論最大的問題是大圖縮小同樣會失真,主要體現在邊線會發虛或尖銳毛躁。這點建議棄用以前那種只有1px的虛邊,改成比較飽滿的4px。

另外那些奇數像素的問題就別瞎糾結了,除了同行還真不會有人去計較那一像素。

不要注意那些細節!

【MaasFate的回答(0票)】:

by Weibo圖拉鼎

【淺草域的回答(0票)】:

蘋果發佈的兩款iPhone 6新品,設計師如何在界面上進行適配?

【ALittleIndie的回答(1票)】:

分辨率的問題無需考慮,因為都是16:9的,蘋果官方也說過自適應大屏iphone6。

雖說是自適應屏幕,但是屏幕大了設計方案必然是要變化的。各個控件相應的也會變大,內容方面自然也會顯示的更多。我覺得大部分程序會按照1080p的分辨率來設計,因為現在主流手機分辨率都是這樣的。說了這麼多,最後苦的都是程序員,代碼也變得更多了。

標籤:-用戶界面設計 -iOS -設計 -屏幕尺寸 -iPhone6


相關資源:





給我留言