CH1. UI Design Basics(03)-Adaptivity and Layout

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)

iPad顯示環(huán)境.png

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ū)域。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容