基本介紹
內容簡介
iOS/Android開發者必須熟記於心的UI設計模式
全彩圖解99個App案例
有效提升用戶體驗
有些App一天能賣出成千上萬；
有些App無人問津；
有些App操作起來流暢舒適；
有些App讓人云里霧裡……
是什麼造成了如此大的不同？
怎樣才能讓用戶喜歡並持續使用你的App？
遵循什麼樣的原則才能設計出友好的界面？
日本最大食譜網站COOKPAD資深設計師來告訴你答案。
作者簡介
池田拓司
曾任職於Nifty公司和Hatena公司，2012年4月起擔任COOKPAD公司設計師。除了負責智慧型手機站點設計，他還致力於設計模式的抽象化與規範化，並通過Sass構建UI設計框架。著有《HTML5技術評論》一書（合著，Ric Telecom出版）。
陳筱煙
畢業於復旦大學計算機科學與技術系，主要研究方向為跨設備人機互動理論。從大學時期開始接觸Java、JavaScript程式開發，目前對Web套用及智慧型手機套用開發很感興趣，並參與Android開發文檔翻譯項目。譯作有《JavaScript編程全解》《兩周自製腳本語言》等。
圖書目錄
Chapter 0 引論 1
0.1 智慧型手機UI概要 2
Android手機與iPhone 2
設計規範 3
智慧型手機套用與智慧型手機站點 4
智慧型手機UI 概覽 5
0.2 用戶操作方式與使用環境 6
手勢操作 6
使用情景 7
Chapter 1 界面模式 9
1.1 啟動界面 10
1.2 頂層界面 12
1.3 一覽界面 14
1.4 詳細信息界面 16
1.5 輸入/操作界面 18
1.6 界面跳轉 20
界面跳轉圖的基本概念 20
界面跳轉圖的使用方法 20
案例1 新聞服務 22
案例2 搜尋服務 23
案例3 訊息發布服務 24
案例4 通訊錄服務 25
Chapter 2 基本UI組件 27
2.1 頁眉 28
模式1 導航欄（iOS套用） 29
模式2 操作欄（Android套用） 30
模式3 智慧型手機站點 30
2.2 頁腳 31
模式1 標籤欄（iOS套用） 32
模式2 工具列（iOS套用）/底邊欄（Android套用） 32
模式3 導航欄（Android套用） 33
2.3 模態視窗 34
模式1 操作模式 35
模式2 訊息模式 36
模式3 訊息發布模式 36
模式4 控制模式 37
模式5 導航模式 37
2.4 百葉窗式選單 38
模式1 疊加展開模式 38
模式2 疊加收起模式 39
2.5 操作面板 40
模式1 條狀模式 40
模式2 疊加模式 41
模式3 下拉式選單模式 41
模式4 滑塊模式 42
Chapter 3 導航控制項與控制控制項 43
3.1 標籤式導航控制項 44
模式1 標準模式 45
模式2 底部布局模式（標籤欄） 45
模式3 下劃線模式（頂邊欄） 46
模式4 滾動模式 46
模式5 垂直模式 47
3.2 分段控制項 48
模式1 標準模式 48
模式2 內聯文本模式 49
3.3 滑動導航控制項 50
模式1 標準模式 51
模式2 頁面指示器組模式 52
模式3 標籤式導航控制項組模式 52
3.4 下拉式選單 54
模式1 標準模式 54
模式2 控制模式 55
模式3 氣泡模式 55
3.5 深入式選單 56
模式1 標準模式 56
3.6 摺疊式選單 58
模式1 標準模式 59
模式2 氣泡模式 59
3.7 儀錶盤式導航控制項（跳板式選單） 60
模式1 標準模式 61
3.8 返回/Home 62
模式1 返回按鈕模式 63
模式2 徽標模式 63
模式3 Home圖示模式 63
3.9 向上/向下滾動按鈕 64
模式1 標準模式 64
模式2 向下滾動模式 65
模式3 疊加模式 65
模式4 索引模式 66
3.10 分頁按鈕 67
模式1 標準模式 67
3.11 無限分頁列表 68
模式1 標準模式 69
模式2 按鈕模式 69
3.12 刷新控制項 70
模式1 標準模式 71
3.13 側滑式選單 72
模式1 標準模式 73
Chapter 4 列表 75
4.1 垂直列表 76
模式1 標準模式 77
模式2 值模式 78
模式3 縮略圖模式 78
模式4 半尺寸模式 79
4.2 格線列表 80
模式1 標準模式 81
模式2 標籤疊加模式 81
模式3 塊狀標籤模式 82
4.3 輪播面板 83
模式1 標準模式 84
模式2 控制模式 84
模式3 商標展板模式 85
模式4 導航模式 85
4.4 時間軸 86
模式1 標準模式 87
模式2 訊息模式 88
4.5 日曆（日期列表） 89
模式1 月份模式 90
模式2 周模式 91
模式3 日模式 91
Chapter 5 表單 93
5.1 文本框 94
模式1 單行模式 95
模式2 搜尋框模式 96
模式3 多行模式 96
5.2 開關 97
模式1 複選框模式（複數選擇） 98
模式2 單選框模式（單項選擇） 98
模式3 開關按鈕模式 99
5.3 選擇器 100
模式1 標準模式 101
模式2 複數模式 101
5.4 滑塊 102
模式1 標準模式 102
模式2 時間軸模式 103
模式3 環狀模式 103
5.5 拖放控制項 104
模式1 標準模式（垂直列表模式） 104
模式2 狀態更改模式 105
Chapter 6 通知與訊息 107
6.1 模態訊息 108
模式1 標準模式（兩個按鈕） 108
模式2 確認模式（一個按鈕） 109
模式3 自動關閉模式（沒有按鈕） 110
6.2 無模態訊息 111
模式1 標準模式 112
模式2 狀態欄模式 113
模式3 可取消模式 113
6.3 塊訊息 114
模式1 標準模式 115
6.4 角標 116
模式1 標準模式 116
模式2 通知模式 117
6.5 氣泡訊息 118
模式1 標準模式 118
模式2 提示模式 119
Chapter 7 信息的可視化 121
7.1 無限循環指示器 122
模式1 標準模式 123
模式2 原創模式 123
模式3 條狀模式 124
7.2 進度條 125
模式1 標準模式 125
7.3 頁面指示器 126
模式1 標準模式 126
模式2 頁碼模式 127
模式3 步驟模式 127
7.4 圖表 128
模式1 柱狀圖模式 129
模式2 折線圖模式 129
模式3 餅圖模式 130
7.5 評分控制項 131
模式1 標準模式 132
模式2 表情模式 133
模式3 好評差評模式 133
模式4 等級模式 133
Chapter 8 圖示 135
8.1 房屋 136
模式1 標準模式 136
8.2 放大鏡 137
模式1 標準模式 137
模式2 縮放模式 137
8.3 齒輪 138
模式1 標準模式 138
8.4 星形 139
模式1 收藏夾模式 139
模式2 評分模式 139
8.5 模擬時鐘 140
模式1 歷史記錄模式 140
模式2 時間模式 140
8.6 大頭針 141
模式1 標準模式 141
8.7 人像 142
模式1 單人模式 142
模式2 雙人模式 142
模式3 三人模式 142
8.8 鉛筆 143
模式1 創建新條目模式 143
模式2 編輯模式 143
8.9 資源回收筒（垃圾箱） 144
模式1 移至資源回收筒模式 144
模式2 立即刪除模式 144
8.10 加號 145
模式1 標準模式 145
8.11 叉號 146
模式1 清除模式 146
模式2 終止模式 146
模式3 關閉模式 146
8.12 照相機 147
模式1 標準模式 147
8.13 三連圓點 148
模式1 水平排列模式 148
模式2 垂直排列模式 148
8.14 相連圓點 149
模式1 標準模式 149
8.15 分享 150
模式1 標準模式 150
8.16 三連短線 151
模式1 選單開啟模式 151
模式2 一覽顯示模式 151
模式3 列表排序模式 151
8.17 刷新 152
模式1 標準模式 152
Chapter 9 動畫 153
9.1 向左/向右滑動 154
模式1 同層移動模式 154
模式2 異層移動模式 155
9.2 疊加展開/收起 156
模式1 標準模式 156
9.3 淡入/淡出 157
模式1 標準模式 157
9.4 翻轉 158
模式1 標準模式 158
9.5 放大/縮小 159
模式1 標準模式 159
9.6 搖動/扭動 160
模式1 編輯狀態模式 160
模式2 出錯模式 160
Chapter 10 視覺風格 161
10.1 默認設計 162
模式1 iOS模式 162
模式2 Android模式 164
10.2 擬物化設計 165
模式1 紋理模式 166
模式2 物體模式 166
10.3 扁平化設計 167
模式1 標準模式 168
