視覺極簡設計原則：Apple iOS 從擬物到扁平革命

序

行動使用者時代悄然來臨主流的應用程式(App) 已經從PC 逐漸傳輸到行動裝置上。與此同時，包含紙質印刷在內的傳統傳媒平台也在逐漸被行動平台取代。作為設計師，互動設計的內容和方式、針對的裝置和平台以及使用者群眾也對應的產生了變化。時過境遷，傳統的互動方法、流程以及標準和禁忌也需要對應做出改變，才能適應行動使用者設代不斷變化產品需求。在這個過程中，扁平化設計思想對互動設計、使用者介面設計以及使用者體驗設計的衝擊有目共睹。在2013 年WWDC 大會上，蘋果公司對iOS7 顛覆性的改造，使廣大的互動設計者再次清晰地體會到扁平化設計模式已經是大勢所趨。然而，對大多數行動應用程式的開發者和設計者來說，各大行動應用程式平台的App商店裡現有眾多的應用程式已經是一個很大的挑戰和壓力，更何況各大行動應用程式平台以及行動產品製造商持續推出層出不窮的新技術、新觀念和新創意，它們不斷地更新著所有行動使用者的使用方式和選購的趨向。如何才能設計出更加吸引人的行動應用程式產品，單憑開發技術人員已經很難做到。在本書中，我們從一個設計師的角度，與大家分享如何塑造與眾不同、獨樹一幟以及具有特性和創新的App產品。

序

行動使用者時代悄然來臨主流的應用程式(App) 已經從PC 逐漸傳輸到行動裝置上。與此同時，包含紙質印刷在內的傳統傳媒平台也在逐漸被行動平台取代。作為設計師，互動設計的內容和方式、針對的裝置和平台以及使用者群眾也對應的產生了變化。時過境遷，傳統的互動方法、流程以及標準和禁忌也需要對應做出改變，才能適應行動使用者設代不斷變化產品需求。在這個過程中，扁平化設計思想對互動設計、使用者介面設計以及使用者體驗設計的衝擊有目共睹。在2013 年WWDC 大會上，蘋果公司對iOS7 顛覆性的改造，使廣大...

Chapter 01 iOS 平台做使用者體驗設計
1.1 成為使用者體驗設計師
1.1.1 UI、ID、UE 和GUI
1.1.2 了解iOS 平台
1.1.3 了解成功的iOS 應用程式設計案例
1.2 使用者體驗設計的基本流程
1.2.1 設計的前期工作
1.2.2 創意和原型草圖
1.2.3 電腦原型的製作及可用性測試
1.2.4 高傳真原型及設計的完成階段
1.3 iOS 7 的全新使用者體驗
Chapter 02 iOS 平台的互動特點
2.1 了解iOS 平台的行動裝置
2.1.1 行動裝置的種類
2.1.2 iOS 行動裝置的規格和像素尺寸
2.1.3 iOS 行動裝置的使用方法
2.2 行動裝置的人體工程學特點
2.2.1 從拇指談起
2.2.2 單手操作還是雙手操作
2.2.3 用指尖來觸控
2.2.4 視覺的執行軌跡
2.2.5 最佳化視覺結構
2.2.6 圖片與文字的視覺關係
2.2.7 螢幕的旋轉
2.3 iOS 平台的視覺體驗
2.3.1 擬物化和扁平化
2.3.2 iOS 7 的視覺新體驗
Chapter 03 做好設計的前期工作
3.1 行動應用程式的市場定位
3.1.1 是行動產品，不是電腦軟體
3.1.2 外表華麗還是功能強大
3.1.3 別讓它「大而全」
3.1.4 它只是成千上萬個應用程式中的
3.2 確定產品目標
3.2.1 做有價值的應用程式
3.2.2 做與眾不同的應用程式
3.2.3 如何才能獨樹一幟
3.3 為使用者而設計
3.3.1 了解應用程式的使用者
3.3.2 使用者細分
3.3.3 使用者研究
3.3.4 使用者測試
Chapter 04 產品創意與原型草圖
4.1 獲得完美的創意
4.1.1 玩玩「腦力激盪」吧
4.1.2 是娛樂不是工作
4.1.3 有明確的目標
4.1.4 有合理的分工
4.1.5 安排好議程和環境
4.1.6 暢所欲言但要遵守規則
4.1.7 挑選出最有前途的想法
4.2 原型草圖
4.2.1 手繪的原型草圖
4.2.2 潦草但要認真
4.2.3 原型工具和原型設計軟體
4.3 檢驗、分享你的思考結果
4.3.1 有連貫，有情節，畫出應用程式的分鏡指令稿
4.3.2 利用原型草圖進行可用性測試
4.3.3 幾種其他類型的草圖
Chapter 05 使用Xcode 工具進行原型設計
5.1 用電腦完成原型設計
5.1.1 平面圖像原型的實現
5.1.2 可互動原型的實現
5.1.3 原型的可用性測試
5.2 原型設計利器——Xcode
5.2.1 Xcode 安裝和移除
5.2.2 Xcode 介面
5.3 建立專案
5.4 屬性檢查器
5.5 尺寸檢查器
5.6 在iOS 裝置上執行應用程式原型
5.6.1 建立開發者憑證
5.6.2 裝置註冊
5.6.3 建立App ID
5.6.4 建立設定概要檔案
5.6.5 在裝置上執行應用程式
Chapter 06 使用標準控制項
6.1 文字輸入/ 輸出
6.1.1 文字輸出控制項
6.1.2 文字輸入控制項
6.2 按鈕
6.2.1 按鈕類型
6.2.2 按鈕狀態
6.3 各種「欄」
6.3.1 狀態列
6.3.2 工具列
6.3.3 導覽列
6.3.4 標籤欄
6.3.5 搜索欄和搜索範圍選擇欄
6.4 滑桿控制項
6.5 選擇控制項
6.5.1 二選一
6.5.2 單選控制項
6.5.3 多選控制項
6.5.4 選取器
6.6 交談視窗
6.6.1 警告框
6.6.2 動作表
6.6.3 分享列表
6.7 活動指示器和進度指示器
6.7.1 活動指示器
6.7.2 進度指示器
6.8 列表和網格
6.8.1 表格視圖
6.8.2 集合視圖
Chapter 07 應用程式導覽
7.1 iOS 應用程式的導覽模式
7.2 延伸導覽
7.2.1 切割畫面控制項的導覽實現
7.2.2 分頁控制項的導覽實現
7.3 標籤導覽
7.3.1 iOS 標籤導覽
7.3.2 實例： 標籤導覽模式城市資訊
7.4 樹狀結構導覽
7.4.1 iOS 樹狀結構導覽
7.4.2 實例： 樹狀導覽模式城市資訊
7.4.3 一級視圖實現
7.4.4 二級視圖實現
7.4.5 三級視圖實現
7.5 模態視圖
7.5.1 iOS 中的模態視圖
7.5.2 模態視圖實例
7.6 組合導覽
Chapter 08 iOS 應用程式的個性化設計
8.1 個性化你的應用程式
8.1.1 從取代元素入手
8.1.2 增加裝飾
8.1.3 純個性化的設計
8.2 圖形元素與組成理念
8.2.1 圖形元素與視覺印象
8.2.2 頁面設定與組成理念
8.2.3 圖形與版面配置間的關係
8.2.4 在不同的平台和裝置上
8.3 善於把握色彩
8.3.1 了解色彩的規律
8.3.2 控制色調
8.3.3 色彩搭配
8.3.4 色彩的傾向性
8.4 文字的處理
8.4.1 選擇合適的字型
8.4.2 推敲文字的四個要素
8.4.3 把握字群的位置關係
8.5 介面的個性化風格
8.5.1 手繪體風格
8.5.2 卡通風格
8.5.3 簡潔風格
Chapter 09 圖示設計與啟動畫面
9.1 圖示設計的原則
9.1.1 「識別性」原則
9.1.2 圖示設計的「一致性」原則
9.1.3 圖示設計的「相容性」原則
9.2 iOS 應用程式圖示設計
9.2.1 建立完美的第一印象
9.2.2 iOS 平台應用程式圖示設計標準
9.2.3 幾個簡單的應用程式圖示的設計想法
9.3 狀態列圖示
9.3.1 是符號，不是圖案
9.3.2 iOS 平台狀態列圖示的標準和含義
9.3.3 幾個有效的簡化影像的方法
9.4 啟動畫面和引導說明
9.4.1 啟動畫面
9.4.2 引導說明
Chapter 10 iOS 應用程式設計專案實作—「2016 里約熱內盧奧運會」應用程式專案敏捷設計
10.1 專案概述及工作計畫
10.1.1 專案描述
10.1.2 工作計畫和流程
10.2 專案的準備階段
10.2.1 市場定位及產品分析
10.2.2 專案的使用者需求分析
10.3 從原型草圖到擬物化實現
10.3.1 創意與原型草圖
10.3.2 專案的平面圖像原型
10.3.3 影像原型的可用性測試及調整
10.4 追隨iOS 7 的扁平化設計風格
10.4.1 簡潔與反白色
10.4.2 應用程式圖示和狀態列圖示
10.4.3 啟動畫面設計
10.5 使用Xcode 工具進行原型設計
10.5.1 建立專案
10.5.2 首頁模組設計實現
10.5.3 比賽項目模組設計實現
10.5.4 賽程表模組設計實現
10.5.5 比賽倒數計時模組設計實現
10.5.6 關於模組設計實現
10.5.7 增加應用程式圖示
10.5.8 增加啟動畫面

Chapter 01 iOS 平台做使用者體驗設計
1.1 成為使用者體驗設計師
1.1.1 UI、ID、UE 和GUI
1.1.2 了解iOS 平台
1.1.3 了解成功的iOS 應用程式設計案例
1.2 使用者體驗設計的基本流程
1.2.1 設計的前期工作
1.2.2 創意和原型草圖
1.2.3 電腦原型的製作及可用性測試
1.2.4 高傳真原型及設計的完成階段
1.3 iOS 7 的全新使用者體驗
Chapter 02 iOS 平台的互動特點
2.1 了解iOS 平台的行動裝置
2.1.1 行動裝置的種類
2.1.2 iOS 行動裝置的規格和像素尺寸
2.1.3 iOS 行動裝置的使用方法
2.2 行動裝置的人體工程學特點...