這是給 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

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

Toolbar

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

Map view

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

Alert

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

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

Share screen

內建的分享列表,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 秒就會跳出刪掉嘀咕一句這三小。恭喜你,你成長了。

comments powered by Disqus