ios UI的自適應和布局

標籤：ios

        ios UI的自適應和布局

 

 

 使用者通常想在旋轉螢幕時，UI視圖中的內容沒有減少，UI中的視圖控制項可以根據當前的裝置方向來調整布局，如果沒有

 自適應和自動布局，當使用者旋轉螢幕時，有的控制項不見了，這會讓使用者感覺自己失去了對app的控制，從而給你的app

 影響非常不好。

 

 自適應 size class給你帶來福音。

 

 

 想象一下蘋果裝置中iPad iPhone 6 plus iPhone 6 iPhone5 iPhone5s iPhone4s, 如何使用size class

 來表示它們的不同的使用方式了；首先，裝置的使用無非就是橫屏和豎屏，橫屏和豎屏的重要區別是對於人來說的它的寬高比

 發生了改變，size class定義了兩種size class ，regular,compact,通過這兩個size class，我們就可以枚

 舉出不同裝置的使用size class的表示。

 

 

 iPad不管橫屏還是豎屏都是：regular width，regular height；

 iPhone 6 plus豎屏：regular height，compact width；

 iPhone 6 plus橫屏：regular width，compact height；

 iPhone 6, iPhone 5, and iPhone 4s豎屏：compact width and regular height

 iPhone 6, iPhone 5, and iPhone 4s橫屏：compact width and compact height

 

 

 在storyboard設計UI時你可以指定不同的情況來設計UI控制項的大小布局和顯示等，這樣當裝置處於不同的使用方式時就

 會根據你設計的方案對UI控制項進行重新布局。

 

 有好的使用者體驗要注意的事項：

 1.每一個頁面要聚焦到使用者關心的內容：這個優先考慮，使用者使用你的app就是它關心裏面的內容，如果隨意的改變聚焦，會讓使用者不知怎麼辦

 2.避免無理由的改變布局：可以通過改變UI控制項的大小

 3.如果你只想讓你的app運行在一個方向上的話，在開發時就指定它只能在一個方向上使用。

 4.使用者很方便的聚焦的關心的內容

 5.使用相對平衡的大小顏色顯示UI

 6.使用對齊，層次，階梯的關係布局UI，

 7.必須保證使用者理解主要內容在預設的大小

 8.有text內容的視圖要根據內容來改變大小，即是可變的。

 9.儘可能的避免不一致的外觀，具有相同功能和操作的UI應該有相同的樣式，比如撥號鍵的數字按鈕都是相同的樣式。

 10.UI控制項的布局不能太緊湊，否則使用者很容易錯誤的點擊和誤操作。

ios UI的自適應和布局