一、UI設計基礎
- 區塊的通用名稱
- 按鈕的大小，不得小於 44X44 px
- Tab Bar 的按鈕數量，不得超過 5個，否則第5個會變成...
- 儘量使用已經定義的手勢，除非是遊戲，不要自己開發新手勢，已經定義的手勢有：
- Tap(單點觸碰)：
- To press or select a control or item.
- Drag(拖曳)：
- To scroll or pan—that is, move side to side.
To drag an element. - Flick(快速滑動)：
- To scroll or pan quickly.
- Swipe(平移)：
- With one finger, to return to the previous screen, to reveal the hidden view in a split view controller, or the Delete button in a table-view row.
- With four fingers, to switch between apps on iPad.(iPad支援4指手勢)
- Double tap(雙指觸碰)：
- To zoom in and center a block of content or an image.
- To zoom out (if already zoomed in).
- Pinch(捏)：
- Pinch open to zoom in; pinch close to zoom out.
- Touch and hold ()：
- In editable or selectable text, to display a magnified view for cursor positioning.
- Shake(搖)：
- To initiate an undo or redo action.
- 由於手機上空間有限，品牌的呈現應該優雅低調，不宜過度誇張
- 關於色調：
- 建立一套協調的色調
- 注意顏色對比，確保各個單元間能被清楚的看到
- 確保在不同的光照之下，畫面依舊能被清楚看到
- 理想的情況是在你的應用程序中的色彩對比度為4.5：1或更高
- 考慮色盲的使用者
- 選擇一個關鍵的顏色，表示『互動性』和『狀態』，並且避免在其他情況、頁面使用，必須維持其獨一性
- 不同的國家、文化，對於顏色的認知大不相同，在開發之前確認選擇的整體配色，能夠讓APP的設計理念，能被清楚的傳達
- 大體而言，不要讓顏色成為干擾用戶的因素。
- 文字內容應該可被清楚的閱讀
- 如果文字無法辨識，版做的多美也沒用
- 在不同的區塊，例如：body、Footnote, or Headline，給予不同的文字樣式，讓使用者一眼就可以分辨，是屬於不同區塊。
- 文字大小，應該視裝置的不同，自動改變
- 標題、內文、註解...的字級大小，應該要有大小配置，不能都一樣大
- 可接受的最小字級為12pt，預設的默認大小是17pt
- 在一般情況下，使用APP只使用一種字體。混合了幾種不同的字體，反而讓應用程序顯得零散和馬虎。
- 文字敘述：
- 文字敘述也是使用體驗的一部分。(記得說人話！)
- 專業術語是一劍兩刃，能拉近與獨特族群的距離，但會把非該族群的使用者推得更遠
- 用語需要簡短、直接，方便使用者快速理解。(不要文青上身)
- 給控制元件下個短標籤或使用容易理解的圖標。
- 使用標準的UI元素，設計者與使用者皆受益：
- 好處：節約開發時間、方便修改
- 使用者容易上手、理解
- 按照每一個UI元素的準則，You can find UI element guidelines in Bars , Content Views , Controls , and Temporary Views .
- 不要使用系統定義的按鈕和圖標去做別的功能，UI element guidelines有清楚標註每一個圖標的意義。
- 應用程序圖標(呈現在手機桌布上的圖片)
- 最好的應用程序圖標是獨一無二的，整潔，有魅力，令人難忘。
- 圖像
- 支持Retina顯示屏。請確保您提供高分辨率的資產在你的應用程序的所有藝術品和圖形。特別是，供給@為iPhone 6加3倍的資產和@所有其他高分辨率的iOS設備2倍的資產。
- 顯示照片和圖形在其原始寬高比，並沒有擴展到超過100％。你不想在你的應用程序中的圖形或圖形看歪斜或過大。讓用戶選擇是否要放大或縮小圖像。
- 不要使用複製蘋果的產品在設計中的圖像。這些符號受版權保護，產品設計可以經常改變。
- 不要使用蘋果應用程序圖標，圖像，或截圖在您的設計。蘋果的設計受版權保護，除非它們是由系統提供的不能出現在你的UI。
二、設計策略(Design Strategies)
- 從概念到產品
- 列出所有的功能你認為用戶可能喜歡
- 確定誰是你的用戶
- 經由上述2項，過濾出實際要製作的功能
- 不要做出讓使用者在操作過程中，會停下來的設計，例如：
- 使用者不需要的新功能
- 使用者不了解的圖示
- 使用者不了解的用語、標題
三、UI元素
- 狀態欄(The Status Bar)
- 是透明的
- 當存在時，總是出現在屏幕的上邊緣
- 不要創建(create)一個自定義狀態欄
- 為了可讀性，最好給予背景色(系統默認值或是純色)
- 最好不要永久隱藏，因可能會造成使用者的不便
- 導航欄(Navigation Bar)
- 是半透明
- 位置：通常出現在一個應用程序的屏幕的頂部，僅低於狀態欄
- 在常規水平的環境中，導航欄還可以顯示一個觀點，即不會在屏幕上延伸，如拆分視圖控制器的一個窗格中。
- 出現鍵盤的時候可以隱藏，用戶作出手勢，或當含有視圖控制器過渡到垂直緊湊的環境。
- 可著色。（使用tintColor到著色欄按鈕的項目;使用barTintColor來著色的欄背景。）
- 當用戶進入到一個導航層次結構一個新的水平，兩件事情應該發生：
- 導航欄標題應更改為新的層次的標題，如果適當的話。
- 返回按鈕應該出現在酒吧的左端; 它可以被標記上一級的標題，if it adds value.
- 後退按鈕還是外觀和行為像一個後退按鈕
- 分段控制(segmented control)：如果您使用的是分段控制的導航條，一定要選擇準確的後退按鈕
- 按鈕之間具有足夠的空間
- 盡可能，確保定制的導航欄的外觀為和整個應用程序保持一致。
- 工具欄(Toolbar)
- 是半透明
- 總是出現在iPhone上的屏幕或視圖的底部邊緣
- 也可出現在屏幕或視圖上的iPad的頂部邊緣。
- 出現鍵盤的時候可以隱藏，用戶作出手勢，或當含有視圖控制器過渡到垂直緊湊的環境。
- 導覽列跟工具列的按鈕
- 標籤欄(Tab Bar)
- 一個標籤欄給人以應用不同的子任務，視圖或模式之間切換的能力。
- 是半透明
- 總是出現在屏幕的底部邊緣
- 不超過五個（如果超過，第五個會變成More，如上圖1）
- 保持相同的高度在所有方向
- 可一個標籤進行通信的應用程序特定的信息上顯示徽章（徽章是包含白色文本和一個數字或感嘆號的紅色橢圓
- 標籤欄圖標
控制-一些ISO內建元素
- 活動指示燈(Activity Indicator)
- 聯繫方式添加按鈕(Contact Add Button）
- 日期選取器(Date Picker)
- 詳細披露按鈕(Detail Disclosure Button)、信息按鈕(Info Button)
- 標籤(Label)
- 網絡活動指示燈(Network Activity Indicator)
- 頁面控制(Page Control)
- 選擇器(Picker)
- 拾取器:(A picker:)
- 查看進展(Progress View)
- 刷新控制(Refresh Control)
- 圓角矩形按鈕(Rounded Rectangle Button)
- 分段控制(Segmented Control)
- 滑塊(Slider)
- 步進(Stepper)
- 開關(Switch)
- 系統按鈕(A system button:)
- 文本字段(Text Field)
四、圖標，形象設計(Icon and Image Design)
- 圖標和圖像尺寸
- 一開始設計的時候，不需要將調色板限制為網頁安全色
- 表41-1的自定義圖標和圖像尺寸（像素）
財富
|
iPhone 6加（@ 3X）
|
iPhone 6和iPhone 5（@ 2X）
|
iPhone 4S（@ 2X）
|
iPad和iPad的迷你（@ 2X）
|
iPad 2和iPad的迷你（@ 1X）
|
應用程序圖標（所需的所有應用程序）
|
180×180
|
120×120
|
120×120
|
152 x 152
|
76×76
|
對於App Store的應用程序圖標（所需的所有應用程序）
|
1024×1024
|
1024×1024
|
1024×1024
|
1024×1024
|
1024×1024
|
啟動文件或圖像（所需的所有應用程序）
|
使用一個啟動文件（見圖片發射）
|
對於iPhone 6，使用一個啟動文件（見圖片啟動）
|
640×960
|
1536×2048（縱向）
|
768×1024（縱向）
|
對於iPhone 5，640×1136
|
2048×1536（橫向）
|
1024×768（橫向）
| |||
Spotlight搜索結果圖標（推薦）
|
120×120
|
80×80
|
80×80
|
80×80
|
40×40
|
設置圖標（推薦）
|
87×87
|
58×58
|
58×58
|
58×58
|
29 X 29
|
工具欄和導航欄圖標（可選）
|
約66 X 66
|
約44 x 44
|
約44 x 44
|
約44 x 44
|
約22×22
|
標籤欄圖標（可選）
|
約75×75（最大：144×96）
|
約50×50（最大：96×64）
|
約50×50（最大：96×64）
|
約50×50（最大：96×64）
|
約25×25（最大：48×32）
|
對於App Store的默認報亭蓋圖標（所需的應用程序報刊亭）
|
最長邊至少1024像素
|
最長邊至少1024像素
|
最長邊至少1024像素
|
最長邊至少1024像素
|
上的最長邊至少512個像素
|
網頁剪輯圖標（建議Web應用程序和網站）
|
180×180
|
120×120
|
120×120
|
152 x 152
|
76×76
|
- 應用程序圖標
- 簡潔、容易識別
- 確認做出來的圖標，在各種背景上都清晰可見
- 避免透明度
- 不要用iOS界面元素，此舉會造成用戶混淆
- 做成正方形就好，圓角是上版時設定裁切
- 圖片發布
- 欄按鈕圖標
- 報亭圖標
- 的Web Clip圖標
- 創建可調整大小的圖片
