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

如題,會不會同一款軟體出現多套不同的適應方案?空間布局會不會因屏幕尺寸的不同而不同?等等的相關疑問。。。

=================================

希望還可以有一個人再開個問題是 iOS的APP在系統中如何適應iPhone 5s/6/6 Plus三種屏幕的尺寸?


從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 的設計和開發變的反而比以前更容易。


在 iPhone 6/plus 發布之後是否要為單手操作優化可能將會是一個挺大的麻煩。

首先來看個 Apple 為 iPhone 5 拍的一個廣告吧:

視頻封面iPhone 5 - TV Ad - Thumb - Commercial (720p)視頻

上面的視頻拍攝背景是西方人,亞洲人的手則沒有那麼大,女性更小。大部分應用在 iPhone 5/5s 發布之後針對拉長臉的 iPhone 所做的也只是「適配」而已,並未對增大的高度做任何事情。根據 UXmatters 2013 年的數據,有大約 49% 的人使用單手握持。右手單手握持有下面兩種方式:即設備右下角抵在手心和靠下一點點。

在 iPhone 5/5s 時代,我所了解到針對這多出來的高度做了一些事情的 App 是 Instagram,見下圖。

這是 Instagram 在 iPhone 4/4s(下) 和 iPhone 5/5s(上) 的不同截圖,寬度不變只拉長臉的 iPhone 對 Instagram 帶來的影響有兩點:

  • 因為照片是方形的,寬度不變長度增加會使得留白的面積變大

  • 長度增加頂部按鈕的點擊會變得困難

因此 Instagram 為此做了兩套布局,在 iPhone 4/4s 所有的自定義操作置於頂部,在 iPhone 5/5s 上操作按鈕置於底部,同時將按鈕間距和留白增大。

時間來到 2014 年,手持設備的方式發生了變化,單手握持手機的比例變小了,而且是變的非常小。這個原因可能是大屏幕的手機越來越多,諸多應用並未對單手做優化,同時一隻手在安全握持手機的同時拇指已經沒有太大的活動空間,因此人們自己尋找到了一些方式來使用自己的設備。

當然這不代表就可以不考慮單手握持的用戶了,還是得看自己的應用類型和使用場景。比如 A 是一個閱讀類應用,應用活躍時間都是早晚高峰時間;B 應用是一個移動社區應用,應用活躍時間是晚上 10 點左右,那聽起來 A 應用或許需要考慮一下單手握持的情況,而 B 應用就沒有那麼大的單手握持需求了。

下圖是 Scott Hurff 繪製的在上面 A 類握持方式下的操作示意圖。需要注意的是如果你的應用主要用戶是亞洲人,那個圖可能需要修改,比如紅色區域可能會更大,尤其在 iPhone 6 plus 上。如果你的主要用戶還是女性,那紅色區域還會變得更大,綠色區域變的更小並且會更靠右一些,因此點擊困難的問題不僅僅會出現在頂部的按鈕中,在某些情況下居左的按鈕在點擊時也可能會遇到問題。

下面的圖是在 B 類單手握持情況下的 iPhone 6 和 plus 的操作示意圖。

所以 iPhone 6 和 iPhone 6 plus 的上市可能會使得「要不要為單手握持做優化」成為一個問題。當然,可能的情況是大部分應用都不會為這個問題做任何事情,但是對於閱讀、資訊等功能單一、沉浸感良好並且無需大量輸入的應用還是可以為此做些事情的。

居中底部的類 Path 的扇形菜單和長按滑動菜單可能會是一些不錯的選擇。


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

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

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


ios的設計根本就不適合大屏,除非徹底改變UI,否則大屏iPhone不值得買,想想action bar放在底下佔用的單手操作黃金區域,想想返回鍵在左上角,醉了沒?

補充:我是從iPhone5換到LG G3的,個人感受上來說4英寸的果5居然沒有5.5英寸的G3單手操作便捷,為此我是醉了。

再補充:android和ios風格微信的單手操作區域圖片對比,都是我單手大拇指畫出來的。

再再補充:果粉的邏輯真讓人無語,我只是個普通的android和ios雙系統用戶,對各種狂熱粉絲敬而遠之…


一定要做一個功能「滑動返回上一級界面」,不然大拇指要去左上角點返回會累死累抽筋


對界面設計的影響:

1、更多的使用矢量圖形元素。

2、以前那些定死寬度的設計會被淘汰。今後的設計會被迫更多注重於內容、排版和布局(就如 iOS 7 所提倡的那樣),以便讓界面擁有更好的可伸縮性。

3、目測會湧現一些大牛(像 Loren Brichter 那樣的)設計出更適合大屏幕手機的交互方式。

4、由於 Auto Layout 普及,會有更多的應用支持橫屏,更多的應用同時支持 iPhone 和 iPad 。當然也不排除國內的應用會做那種「QQ」+「QQ HD」+「QQ for Pad」三個應用同時上架的設計。

對設計師的影響:

需要設計師和開發者都能理解蘋果 Auto Layout 的原理和規範,也需要設計師能「懂大屏幕設計」,絕非不是像微信 for iPad 那種糟糕的簡單的拉大(就像現在大部分 Android App 一樣)。很可能同樣一個功能在不同尺寸的屏幕上按鈕布局和交互是不一樣的,設計師需要做很好的權衡才可以。

還對什麼有影響:

當大家為大屏 iOS 設備設計應用的技能成熟掌握後,同樣的設計和交互會應用到 Android 平台上,因此也會大大提高 Android 應用的設計和交互質量:D

相關問題:

iPhone 6 / 6 Plus 出現後,如何改進工作流以實現一份設計稿支持多個尺寸?


技術本身影響不大,安卓那麼多機型和尺寸,大多數公司早已做好自適應等方案適應不同屏幕尺寸。蘋果尺寸只算少的。

真正的影響來自於操作的體驗本身,由於手機的加大,單手操作成為不可能,那有些操作方式、UI排布都要考慮。很簡單我note3的機器單手拿著是按不到右側兩排按鈕的。對於遊戲、交互設計帶來了新的思路。


自己去下一個Xcode6建個HelloWorld運行一下就知道了吧!

iPhone6解析度與適配

適配iPhone6和iPhone6 Plus

如何快速適配iPhone6及Plus-APP設計師必讀


來點實打實的:

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。

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

不要注意那些細節!


APP適配IOS8,iPhone6和Plus截圖簡要說明-UI中國

這是我在 UI 中國寫的關於適配iphone6 及plus的文章,內容改過很多次,比較詳細了,幾乎無錯誤。


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

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


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


推薦閱讀:

知乎上有哪些 iOS 開發者?

TAG:iOS | 設計 | 用戶界面設計 | 屏幕尺寸 | iPhone6 |