這是給 UI 看的教學。發現太多人不看Guideline…基礎問題問了又問，明明官方文件擺在那。就算英文看不懂，Google 打下去對岸有很多翻譯成簡中版的。最最少留意一下尺寸吧？（這次的 iOS7 官方文件省略很多沒寫到、建議回頭去看看 iOS6 的Guideline，兩份加起來比較紮實。）

進入 iOS Human Interface Guidelines: Introduction 這個網址會看到 3 個選項。

左邊：從 iOS6 過渡到 iOS7 的方式，如果手上有舊專案要轉移一定要看一下。
中間：iOS7 人機介面指南，要設計 iOS App 最好把這部份看熟。
右邊：使用者介面元素的目錄，主要給 RD 看的，不過 UI 吃飽沒事加減看一下，起碼知道各個元件名稱、使用環境和限制（像是改字型、改顏色之類）。

請直接點中間的「 iOS Human Interface Guidelines 」，這是本文要講的重點，如果你是新手上路更一定要把這指南看熟。

UI Design Basics

UI Design Basics 這個單元講了許多「概念」，像是 iOS 主要風格、版面配置方式等等，可以看做「導論」或是「序」。也就是各方面都提到一點點、要怎麼實作不告訴你這樣。我把我覺得最重要一定要看的部份撈出來講。請配合官方文件閱讀。

最基本一定要知道的 UI 元件名稱，幹 UI 連這個都不曉得可以洗洗睡了，之後的文件也不用看。專業術語和名詞部份請記英文，很多用詞講中文反而容易混淆。

導覽列，會放上一頁、編輯、新增、完成按鈕，還會放LOGO的地方。

Tab bar

一定在最下方的標籤列，最多只能放 5 個 icon，超過 5 個選項系統內建會把第 5 個icon變成「…」。

Segmented control

分段控制，通常拿來切換列表。

常見於列表或瀏覽器，可對 View 進行操作。

Map view

地圖視圖，尺寸設定自由。

Alert

警告視窗，只能放字不能放圖。

由下而上浮出的視窗，通常在使用者中途想插入額外操作或瀏覽更多訊息時使用。在iPhone上為滿版，ipad有固定尺寸。

內建的分享列表，iOS7 才長這樣。

官方特別指明的「不要這樣搞」

Tool bar、Tab bar 都一樣，請不要塞滿它。@1x時，最小手指觸控範圍是 44px，盡量不要比這個尺寸更小。
（官方文件單位為pt，注意 @1x、@2x、@3x 在製圖時情況和 Guideline 不同。）

台灣客戶最愛：「字體只有一種太單調、就不能活潑雀躍一點嗎？」
內建繁體中文字體只有 1 種，黑體繁。中黑還是細自己選吧。沒了。除非客戶逼你把所有字都改用圖去處理。不然可以兩手一攤對他說辦不到。

台灣客戶最愛：「畫面太空了塞滿它！」
無解，燒香拜佛自求多福吧。

BTW

UI Design Basics 這部份很多都和我之前寫過的這些文章 UI 雜談有點關聯，不過新手上路應該有看沒有懂，最簡單的方式就是 「每天守著 App Store 排行榜，除了遊戲類之外，把所有免費榜上 icon 看起來還不錯的 App 全部抓下來玩玩，一天至少10個。」 很多時候做設計靠的是經驗和反射動作，不分好壞海量接觸各種 App 會強迫提升 EXP，摸久了幾乎打開 App 的 30 秒內就知道這 App 哪裡有問題。請不要把遊戲類的免費榜從頭抓到尾，遊戲類 App 不在 Guideline 限制範圍內。

一個月之後你就會發現一個 App 抓下來打開，摸個 20 秒就會跳出刪掉嘀咕一句這三小。恭喜你，你成長了。

iOS Guideline 怎麼看？(1)

UI Design Basics