Adaptivity and Layout
1. 建立自適應(yīng)(Build in Adaptivity)
trait collection:includes size class, display scale and user interface idiom.
iOS有兩種尺寸類(lèi)別(size class):正常態(tài)(regular)和壓縮態(tài)( compact)
為了描述一個(gè)顯示環(huán)境,你需要指定horizontal size class和vertical size class。你也可能猜到了,一個(gè)iOS終端可以為portrait orientation使用一套size class同時(shí)為landscape orientation使用另一套size class。當(dāng)顯示環(huán)境的size class改變時(shí),iOS可以自動(dòng)做出多種布局調(diào)整。例如,當(dāng)vertical size class從壓縮態(tài)變?yōu)檎B(tài),導(dǎo)航欄和工具欄都會(huì)自動(dòng)增高
iPad和iPad Pro在兩種擺放方向時(shí),兩個(gè)維度都是正常態(tài)

iPhone的顯示環(huán)境隨著終端和其擺放方向而變化
- iPhone 6 Plus(maybe iPhone 6s Plus)
豎屏放置:vertical regular and horizontal compact
橫屏放置:vertical compact and horizontal regular - iPhone 6(maybe iPhone 6s),iPhone 5/5s,iPhone 4s
豎屏放置:vertical regular and horizontal compact
橫屏放置:vertical compact and horizontal compact
2. 為每種環(huán)境提供美妙的體驗(yàn)(Provide Great Experience in Each Environment)
利用自適應(yīng),可以確保你的UI隨著顯示環(huán)境的變化做出合適的調(diào)整。依據(jù)以下原則在所有的終端和環(huán)境中為用戶帶來(lái)極致的體驗(yàn)。
在所有環(huán)境中都要將注意力維持在主要內(nèi)容上。環(huán)境改變時(shí)改動(dòng)焦點(diǎn)會(huì)使用戶迷失,并且讓用戶感覺(jué)到喪失對(duì)App的控制。
避免對(duì)布局進(jìn)行隨意的改動(dòng)。
如果你的App只能在一個(gè)方向使用,要誠(chéng)實(shí)地面對(duì)用戶。用戶當(dāng)然期待App可以在兩個(gè)方向使用,最好滿足人們的期望。但如果只能在一個(gè)方向使用,你應(yīng)該:
- 避免顯示一個(gè)告訴用戶去旋轉(zhuǎn)屏幕的UI元素;
- 當(dāng)設(shè)備旋轉(zhuǎn)180度時(shí),App的內(nèi)容也應(yīng)該旋轉(zhuǎn)180度。
當(dāng)你的App解釋用戶輸入造成的設(shè)備旋轉(zhuǎn)時(shí),用App內(nèi)特殊的方式去處理。比如一個(gè)游戲中需要用戶通過(guò)旋轉(zhuǎn)設(shè)備來(lái)移動(dòng)游戲物體時(shí),屏幕內(nèi)容不能旋轉(zhuǎn)。
3. 利用布局來(lái)傳遞思想(Use Layout to Communicate)
布局不僅是一個(gè)App屏幕上UI元素的樣子。通過(guò)布局,你向用戶展示什么最重要,他們的選擇是什么,以及事物之間如何關(guān)聯(lián)。
**將重要的內(nèi)容或功能放置在屏幕的上半部分——在左向右閱讀的文化中——靠近屏幕左邊的地方,可以讓注意力更容易集中在首要任務(wù)上。
**
使用視覺(jué)重量向用戶展示相對(duì)來(lái)說(shuō)更重要的屏幕元素。大尺寸部件相比小尺寸部件更吸引眼球,也更容易點(diǎn)擊。
利用對(duì)齊使內(nèi)容更易瀏覽,同時(shí)傳遞分組和層級(jí)。
確保用戶能在默認(rèn)大小的字體下理解主要內(nèi)容。例如,用戶不應(yīng)該通過(guò)橫向滑動(dòng)屏幕去讀重要的文字經(jīng)過(guò)縮放才能看到重要的圖片。
在你的UI中盡力避免沒(méi)有一致性的外觀。通常,具有相似功能的元件也應(yīng)該有類(lèi)似的外觀。人們經(jīng)常假定一定是某個(gè)原因?qū)е铝怂麄兛吹降牟灰恢滦裕麄儍A向于花時(shí)間找到它。
為可交互元件提供充足的空間,讓人們易于與內(nèi)容交互。給點(diǎn)擊類(lèi)型的控件大概44×44point大小的點(diǎn)擊區(qū)域。