#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-402b0d2cd2e6Typography
字體相關
iOS系統有內建一套字體相關的預設值，想自訂字型的設計者，可以多加利用網路資源：
https://www.myfonts.com/licensing/app/Apple官方免費的SF字型資源：
https://developer.apple.com/fonts/學習更完整全面的code/Swift設計課程（付費線上資源）
後記
終於搞懂px, pt, ppi, dpi…(昏迷）
