#2 iOS Design Guidelines初探
iOS介面設計指南,瞭解App設計的基礎常識
搞懂pixel, point, ppi, dpi, 解析度等術語概念,以及與iOS畫面設計的關係
- 在上一篇文章裡,我們淺談了iOS設計概念及App元件類型,接下來我們來談談iOS介面設計原則!
iOS Design Guidelines各章節:
以下就挑一些我覺得比較有趣的部分來說明。
製作App前,先瞭解不同iPhone及iPad的型號差別
Resolutions and Display Specifications 不同型號iPhone或iPad的解析度與畫面呈現特性
狀況1:App畫面怪怪的(被切掉了/多出一大塊空白/元件位置跑掉了)!?
很多使用者在使用不同型號的iPhone或iPad時,偶而會遇到某些App的畫面長得怪怪的,要嘛被切掉一部分/多一出大塊空白,或是元件跟原本設計的位置不一樣,這因為不同型號的iPhone及iPad 螢幕尺寸不盡相同,在配置元件時,如果設定的適用機型不對,就會造成輸出後的畫面很詭異。
除了不同型號的iPhone/ iPad的螢幕尺寸必須注意外,在iPhone X後續無home鍵機種,還要留意版面邊界(layout margin)的安全距離(safe zone),才能設計出美觀的畫面。
狀況2:像素(pixel) v.s 點(point)傻傻分不清楚?!
我們常常會聽到某某代的iPhone/iPad螢幕解析度(resolution)提升了,畫面變得更清晰銳利,究竟解析度到底是什麼呢?
在此之前,先釐清像素(pixel, px)與點(point, pt)的差別:
pixel(px): 像素是數位顯示的的基本圖像/成像單位。白話文一點,就是想像你看到的每個圖都是用px組成的,就像喬治·秀拉(Georges Seurat)的點畫(點描派)一樣,點畫上的每個點都是px,(注意!此處的「點」不是指pt)。但如果再把螢幕上點畫的圖像一直放大,可以看到在數位顯示,圖像其實是由一格一格的px組成。
pixels-per-inch(ppi): 單位英吋裡可容納px的量,為一種密度的概念,也稱像素密度(pixel density)。在固定的長度內,可塞愈多的px,表示px密度愈高,ppi的數值也愈大。解析度(resolution): 當ppi愈大時,圖像邊緣看起來就會更平滑細緻,圖像也跟著好像變得更清晰,也就是解析度變高了。
point: Apple在2010年推出了retina顯示器,在同樣螢幕尺寸iPhone/iPad中,原本1px的固定大小,在retina上可再被分割成更小塊的單位。因為這項技術,px及ppi的概念無法同時在一般顯示器及retina上適用,因此Apple放了個大絕招,乾脆自己重新定義自家產品的螢幕成像單位,也就是point的誕生,解決了不同顯示器,px大小不一樣的問題。下圖左的1pt=1px,右圖retina則是1pt=2x2px。(厲害了我的Apple!)
由於iPhone/iPad螢幕的度量衡單位改成了pt,那麼也會影響到元件大小的描述。
在同樣尺寸但不同顯示器上,使用的元件大小「外觀」上看起來是相同的(因為pt相同),但實際的px是不同的(如下圖),因此在單位pt中,px愈大的顯示器,在設計時使用的元件尺寸也要愈大。
在螢幕解析度技術愈來愈厲害的今日,設計app時,如果不能放上合適大小圖像/元件,等於白白浪費了這些技術的優秀能力,目前Apple有3種螢幕解析度,設計者可以依據適用機種規格,將適當尺寸(1x, 2x, 3x)的圖檔輸入至xcode asset。
額外提一下DPI的概念:
Dots-per-inch(DPI): 單位英吋裡可容納pt的量,也是密度的概念。[在此請特別注意,Apple的DPI跟android的DIP/DP(density-independent pixels),是不一樣的量測單位,雖然概念有點類似,在此就不討論android]
App icons
iOS icons二三事
Icons的使用在各種智慧型裝置、app絕對佔有舉足輕重的地位,好的icon及正確的設定帶你上天堂。
另外icon圖片只能使用png檔,其他格式是不會被xcode接受的;而icon的圓角,iOS會自動依預設的黃金比例切好,毋須自己動手。
如果不會自己設計icon,Apple也有提供免費SF symbols下載:
https://developer.apple.com/design/resources/
自己設計的icon,則可以透過App Icon Generator產生不同的icon尺寸,參考彼得潘的教學:
https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84-swift-ios-app-%E9%96%8B%E7%99%BC%E5%95%8F%E9%A1%8C%E8%A7%A3%E7%AD%94%E9%9B%86/%E5%BE%9E-app-icon-generator-%E7%94%A2%E7%94%9F-ios-app-icon-402b0d2cd2e6
Typography
字體相關
iOS系統有內建一套字體相關的預設值,想自訂字型的設計者,可以多加利用網路資源:
https://www.myfonts.com/licensing/app/
Apple官方免費的SF字型資源:
https://developer.apple.com/fonts/
學習更完整全面的code/Swift設計課程(付費線上資源)
後記
終於搞懂px, pt, ppi, dpi…(昏迷)