UI 設計師看 Auto Layout

我買了 Simon Ng 寫的 iOS 9 App程式設計實力超進化實戰攻略 (Beginning iOS 9 Programming with Swift) ,學習怎麼用 Xcode 和 Swift 做 App。

這本書非常推薦設計師和完全不懂程式的初學者購買,前幾章都在講 Xcode 的 GUI 操作和實例,跟著範例自己做個會動的頁面出來很有成就感,能學到很多。

UI 設計師要懂 Auto Layout


我跟著書裡第 5 章範例做的 Auto Layout 練習,有置中的標題、置中的按鈕,和底部偏右方對齊的文字。

左,iPhone 4s ,標題和 Hello World 按鈕 置中,但畫面長度不夠下方文字沒有顯示。
中,iPhone 5s ,標題和 Hello World 按鈕 置中,下方文字置右,一切正常。
右,iPhone 6s ,標題偏左、按鈕偏左、文字位置也跑掉了。

UI 設計師都知道要給工程師的標示文件上需要寫明尺寸、間距等等,iOS 可以給座標。但在不同手機尺寸下,給座標就會出現上圖那樣的情況。

先來解決不同尺寸下元件位置會跑掉的問題,就要使用 Auto Layout 啦。(暫時跳過 Portrait 和 Landscape 的畫面變化,以及 Universal App。)

對齊與定位

其實看到這 2 個工具大概就猜得出工程師會怎麼設定 Auto Layout 了吧。(雖然工程師都寫 Code 直接處理,但拿 GUI 出來講總是比較容易被看懂。)

  • Align:對齊。建立一個對齊的約束條件,ex 元件置中對齊。
  • Pin:定位。建立間距約束條件,ex 元件上、右、下、左的間距。

所以設計師出標示文件給工程師的時候,需要寫明對齊方式和定位。比如 A 和 B 之間距離多少?置中還是置左?某元件如果要固定在左下角是不是要標明距離左和下的數值…等等

實例

因為尺寸不同所以版面跑位的情況,可以透過設定 Auto Layout 解決。設好後 Storyboard 會出現幾條輔助線。

標題


不管螢幕尺寸變化,標題都希望要置中,且距離頂端的位置要固定。

按鈕


按鈕設為「水平對齊」、「垂直對齊」。這樣不管在哪種螢幕尺寸下它都在正中間。

文字


文字設定距離右邊和距離底部的尺寸,不管螢幕尺寸變化,這行文字都會固定在右下角。

ma…這就產生一個新的問題,比如 avocode 和 zeplin 這類不用設計師出標示文件的好用外掛,如何讓工程師知道在不同螢幕尺寸下,各元件的位置呢?設計師哪有這麼勤勞針對各種螢幕尺寸出一堆原始檔。

看是要拼一定點另外寫份標示文件,或是乾脆放手讓工程師處理掉了吧。

延伸思考

Auto Layout 不只能處理各種螢幕尺寸下元件位置的版面問題,Portrait 和 Landscape (手機轉橫或轉直)間的切換也可以用它來處理,甚至 Universal App(iPhone 和 iPad 同一支 app 程式),iPhone 和 iPad 之間的 Responsive 也可以透過 Auto Layout 搞定。

嗯,這就來討論下 1. 為什麼 Landscape 要用 Auto Layout,2. 為什麼 Universal App 要用 Auto Layout。

為什麼 Landscape 要用 Auto Layout

從使用者的操作,簡單分成 2 種可能性。

1.手機轉橫是為了看更大的畫面,比如 Safari。
2.手機轉橫會觸發不同的功能。(可參考舊文:Portrait 和 Landscape,談螢幕方向

如果是為了看更大的畫面,功能元件幾乎相同,用 Auto Layout 我覺得很方便省事。

如果會觸發不同功能甚至換個介面,那用 Auto Layout 想幹嘛?當然是刻個新的 UI 啊!

為什麼 Universal App 要用 Auto Layout。

同上方的理由,iPad 的介面和 iPhone 的介面會完全一樣嗎?iPad 螢幕比 iPhone 大那麼多,操作情境、功能複雜度不會一樣。

而且,在開啟 App 時就判定 App 被裝在哪種裝置上,讀取 iPad 或 iPhone 的程式碼,都比用 Auto Layout 乾脆實在啊。

.
.
.

Auto Layout 入門教學 一文說明介紹 Xcode Auto Layout 設定方式、詳細操作等,可以去看這個網頁喔!

Akane Lee

Akane Lee

如果設計師能和工程師順利合作,那麼老公也就能準時下班了吧!因此努力分享 UI 和 UX 方面的知識、技術、各種踩過的坑與心得。

Comments

wave
comments powered by Disqus

Press ESC to close