相關商品
商品簡介
目次
商品簡介
這是一本講解Sketch圖標與UI界面設計的實例教程。全書根據日常生活中移動App界面的常見功能，分類講解UI圖標與界面設計的技巧與方法。
全書共6章，以案例的形式分別講解了圖標設計、引導頁設計、主頁設計、圖表頁設計、個人中心頁設計及登錄頁設計。針對圖標的設計，分為線性圖標、扁平圖標和擬物圖標的繪製；針對界面的設計，分為插畫類型的引導頁、不同功能的主頁、色感強烈的圖表頁、不同形式的個人中心頁及不同風格的登錄頁的製作。本書實戰案例均配有拓展練習，同時提供了案例設計源文件及一套獨立視頻課程，目的是幫助UI設計學習者瞭解和掌握UI設計的規範、配色思路及具體的設計方法，同時使有一定UI設計經驗的人得到提升。
本書適合UI設計初學者、有一定設計經驗的UI設計師和交互設計師閱讀。
全書共6章，以案例的形式分別講解了圖標設計、引導頁設計、主頁設計、圖表頁設計、個人中心頁設計及登錄頁設計。針對圖標的設計，分為線性圖標、扁平圖標和擬物圖標的繪製；針對界面的設計，分為插畫類型的引導頁、不同功能的主頁、色感強烈的圖表頁、不同形式的個人中心頁及不同風格的登錄頁的製作。本書實戰案例均配有拓展練習，同時提供了案例設計源文件及一套獨立視頻課程，目的是幫助UI設計學習者瞭解和掌握UI設計的規範、配色思路及具體的設計方法，同時使有一定UI設計經驗的人得到提升。
本書適合UI設計初學者、有一定設計經驗的UI設計師和交互設計師閱讀。
目次
第1 章 圖標設計 017
1.1 實戰：繪製一套日記App 的線性圖標 018
1.1.1 繪製“私信”圖標 018
1.1.2 繪製“定位”圖標 020
1.1.3 繪製“相機”圖標 020
1.1.4 繪製“分享”圖標 022
1.1.5 繪製“對話”圖標 023
1.1.6 繪製“心”圖標 024
1.1.7 繪製“個人”圖標 026
1.1.8 繪製“支付”圖標 026
1.1.9 繪製“鬧鐘”圖標 027
1.1.10 繪製“Wi-Fi”圖標 028
1.1.11 繪製“點贊”圖標 029
1.1.12 繪製“圖片”圖標 031
1.1.13 繪製“購物車”圖標 032
1.1.14 繪製“刪除”圖標 033
1.1.15 繪製“設置”圖標 035
1.1.16 繪製“手機”圖標 036
1.1.17 繪製“放大鏡”圖標 037
1.1.18 繪製“天氣”圖標 038
1.1.19 繪製“鎖”圖標 039
1.1.20 繪製“包”圖標 040
拓展練習：繪製一套線性圖標 041
1.2 實戰：繪製一套社交App 的扁平圖標 042
1.2.1 繪製“相機”圖標 042
1.2.2 繪製“旋轉”圖標 045
1.2.3 繪製“圓形”圖標 047
1.2.4 繪製“聊天”圖標 048
1.2.5 繪製“閃電”圖標 049
1.2.6 繪製“多色氣泡”圖標 050
拓展練習：繪製一個扁平化圖標 052
1.3 實戰：繪製一套工具類型的擬物圖標 053
1.3.1 繪製“鐘錶盤”圖標 054
1.3.2 繪製“按鈕”圖標 058
1.3.3 繪製“漸變色開關”圖標 062
1.3.4 繪製“相機”圖標 067
拓展練習：繪製一個擬物圖標 078
第2 章 引導頁設計 079
2.1 實戰：“ 心溝通”引導頁的製作 080
2.1.1 繪製背景 080
2.1.2 繪製圖形裝飾背景 080
2.1.3 繪製心形圖案 081
2.1.4 添加文字 082
2.1.5 繪製翻頁元素 082
2.1.6 製作立體效果 083
拓展練習：繪製一個以實物圖為背景的引導頁 083
2.2 實戰：“ 愛護鯨魚”引導頁的製作 084
2.2.1 繪製背景 084
2.2.2 繪製鯨魚 087
2.2.3 繪製橋頭 089
2.2.4 繪製小女孩 091
2.2.5 添加倒影 092
2.2.6 添加文字和斜線 093
2.2.7 製作立體效果 093
拓展練習：繪製一個“鯨魚”主題的引導頁 093
2.3 實戰：“ 海上日出”引導頁的製作 094
2.3.1 繪製波浪 094
2.3.2 繪製太陽 098
2.3.3 繪製浪花 099
2.3.4 添加文字 100
2.3.5 製作立體效果 100
拓展練習：繪製一個與案例同類型的引導頁 100
2.4 實戰： “萌胖減重”引導頁的製作 101
2.4.1 繪製海浪 101
2.4.2 繪製救生圈 103
2.4.3 繪製卡通人物 104
2.4.4 添加小黃鴨 106
2.4.5 添加文本 107
2.4.6 製作立體效果 108
拓展練習：繪製一個“中秋賞月”主題的引導頁 108
第3章 主頁設計 109
3.1 實戰：相機主頁的製作 110
3.1.1 繪製背景 110
3.1.2 繪製操作欄圖標 111
3.1.3 製作立體效果 112
拓展練習：繪製一個黑色效果的相機主頁 112
3.2 實戰：酷炫音樂播放器主頁的製作 113
3.2.1 繪製背景 113
3.2.2 編輯圖片 113
3.2.3 繪製狀態欄和操作欄的圖標 114
3.2.4 繪製播放器 115
3.2.5 製作立體效果 117
拓展練習：繪製一個紫色炫酷類型的播放器主頁 117
3.3 實戰：音樂播放器主頁的製作 118
3.3.1 繪製背景 118
3.3.2 編輯圖片 118
3.3.3 繪製頂部操作欄 119
3.3.4 繪製播放器 120
3.3.5 製作立體效果 121
拓展練習：繪製一個極簡風格的播放器主頁 121
3.4 實戰：微故事主頁的製作 122
3.4.1 繪製背景 122
3.4.2 繪製標題 122
3.4.3 繪製卡片 123
3.4.4 製作立體效果 124
拓展練習：繪製一個卡片類型的電影App主頁 124
3.5 實戰：推薦文章主頁的製作 125
3.5.1 繪製背景 125
3.5.2 繪製頁邊 125
3.5.3 繪製狀態欄 126
3.5.4 繪製底部操作欄 126
3.5.5 添加正文 126
3.5.6 製作立體效果 128
拓展練習：繪製一個圖文混排的好文章分享App主頁 128
3.6 實戰：直播App主頁的製作 129
3.6.1 繪製背景 129
3.6.2 繪製操作欄圖標 129
3.6.3 製作立體效果 132
拓展練習：繪製一個漸變效果的視頻剪輯App主頁 132
第4章 圖表頁設計 133
4.1 實戰：簡約水波圖表頁的製作 134
4.1.1 繪製背景 134
4.1.2 繪製頂部水紋 134
4.1.3 繪製定界框並放入圖標 136
4.1.4 繪製圓圈部分圖標 136
4.1.5 添加文本 138
4.1.6 繪製底部列表 139
4.1.7 完善細節 140
4.1.8 製作立體效果 141
拓展練習：繪製一個漸變發光效果的數據圖表頁 141
4.2 實戰：漸變互動指數圖表頁的製作 142
4.2.1 繪製背景 142
4.2.2 繪製定界框 143
4.2.3 添加文本 143
4.2.4 繪製指數圖部分 144
4.2.5 製作立體效果 145
拓展練習：繪製一個藍紫色的圖表頁 145
4.3 實戰：漸變活力評分圖表頁的製作 146
4.3.1 繪製背景 146
4.3.2 繪製操作欄 148
4.3.3 繪製圓環部分 148
4.3.4 繪製卡片部分 149
4.3.5 製作立體效果 153
拓展練習：繪製一個極簡風格的圖表頁 153
4.4 實戰：漸變業績圖表頁的製作 154
4.4.1 繪製背景 154
4.4.2 繪製狀態欄 154
4.4.3 繪製卡片部分 155
4.4.4 繪製列表 156
4.4.5 製作立體效果 158
拓展練習：繪製一個卡片樣式的圖表頁 158
第5章 個人中心頁設計 159
5.1 實戰：居中形式的個人中心頁製作 160
5.1.1 繪製背景 160
5.1.2 繪製定界框 160
5.1.3 繪製用戶信息 161
5.1.4 添加圖標 162
5.1.5 添加數據信息 162
5.1.6 添加底部圖片 163
5.1.7 製作立體效果 164
拓展練習：繪製一個居中形式的個人中心頁 164
5.2 實戰：側邊形式的個人中心頁製作 165
5.2.1 繪製背景 165
5.2.2 繪製定界框 165
5.2.3 添加用戶頭像 166
5.2.4 添加文本 166
5.2.5 製作立體效果 167
拓展練習：繪製一個側邊欄樣式的個人中心頁 167
5.3 實戰：斜邊形式的個人中心頁製作 168
5.3.1 繪製背景 168
5.3.2 繪製定界框 169
5.3.3 繪製圖標 170
5.3.4 添加用戶信息 170
5.3.5 繪製列表 171
5.3.6 添加按鈕 172
5.3.7 製作立體效果 173
拓展練習：繪製一個左對齊形式的個人中心頁 173
5.4 實戰：中心展示類的個人中心頁製作 174
5.4.1 製作用戶信息 174
5.4.2 製作列表信息 175
5.4.3 繪製“提示”按鈕 175
5.4.4繪製“關閉”按鈕 176
5.4.5 製作立體效果 176
拓展練習：繪製一個中心展示形式的個人中心頁 176
第6章 登錄頁設計 177
6.1 實戰：時尚不規則卡片登錄頁的製作 178
6.1.1 繪製背景 178
6.1.2 繪製卡片 179
6.1.3 繪製定界框 179
6.1.4 添加登錄信息 180
6.1.5 添加細節 180
6.1.6 製作立體效果 181
拓展練習：繪製一個極簡登錄頁 181
6.2 實戰：極簡風格登錄頁的製作 182
6.2.1 繪製背景 182
6.2.2 添加導航欄信息 182
6.2.3 繪製頭像 183
6.2.4 繪製“相機”圖標 183
6.2.5 繪製列表 184
6.2.6 繪製按鈕 184
6.2.7 製作立體效果 185
拓展練習：繪製一個極簡風格的卡片登錄頁 185
6.3 實戰：透氣建築風格登錄頁的製作 186
6.3.1 繪製背景 186
6.3.2 繪製定界框 188
6.3.3 添加裝飾色塊 188
6.3.4 添加登錄信息 188
6.3.5 添加按鈕 188
6.3.6 製作立體效果 189
拓展練習：繪製一個建築風格的登錄頁 189
6.4 實戰：漸變小彈框登錄頁的製作 190
6.4.1 繪製背景 190
6.4.2 繪製卡片 190
6.4.3 添加文本 191
6.4.4 製作立體效果 192
拓展練習：繪製一個卡片類型的登錄頁 192
1.1 實戰：繪製一套日記App 的線性圖標 018
1.1.1 繪製“私信”圖標 018
1.1.2 繪製“定位”圖標 020
1.1.3 繪製“相機”圖標 020
1.1.4 繪製“分享”圖標 022
1.1.5 繪製“對話”圖標 023
1.1.6 繪製“心”圖標 024
1.1.7 繪製“個人”圖標 026
1.1.8 繪製“支付”圖標 026
1.1.9 繪製“鬧鐘”圖標 027
1.1.10 繪製“Wi-Fi”圖標 028
1.1.11 繪製“點贊”圖標 029
1.1.12 繪製“圖片”圖標 031
1.1.13 繪製“購物車”圖標 032
1.1.14 繪製“刪除”圖標 033
1.1.15 繪製“設置”圖標 035
1.1.16 繪製“手機”圖標 036
1.1.17 繪製“放大鏡”圖標 037
1.1.18 繪製“天氣”圖標 038
1.1.19 繪製“鎖”圖標 039
1.1.20 繪製“包”圖標 040
拓展練習：繪製一套線性圖標 041
1.2 實戰：繪製一套社交App 的扁平圖標 042
1.2.1 繪製“相機”圖標 042
1.2.2 繪製“旋轉”圖標 045
1.2.3 繪製“圓形”圖標 047
1.2.4 繪製“聊天”圖標 048
1.2.5 繪製“閃電”圖標 049
1.2.6 繪製“多色氣泡”圖標 050
拓展練習：繪製一個扁平化圖標 052
1.3 實戰：繪製一套工具類型的擬物圖標 053
1.3.1 繪製“鐘錶盤”圖標 054
1.3.2 繪製“按鈕”圖標 058
1.3.3 繪製“漸變色開關”圖標 062
1.3.4 繪製“相機”圖標 067
拓展練習：繪製一個擬物圖標 078
第2 章 引導頁設計 079
2.1 實戰：“ 心溝通”引導頁的製作 080
2.1.1 繪製背景 080
2.1.2 繪製圖形裝飾背景 080
2.1.3 繪製心形圖案 081
2.1.4 添加文字 082
2.1.5 繪製翻頁元素 082
2.1.6 製作立體效果 083
拓展練習：繪製一個以實物圖為背景的引導頁 083
2.2 實戰：“ 愛護鯨魚”引導頁的製作 084
2.2.1 繪製背景 084
2.2.2 繪製鯨魚 087
2.2.3 繪製橋頭 089
2.2.4 繪製小女孩 091
2.2.5 添加倒影 092
2.2.6 添加文字和斜線 093
2.2.7 製作立體效果 093
拓展練習：繪製一個“鯨魚”主題的引導頁 093
2.3 實戰：“ 海上日出”引導頁的製作 094
2.3.1 繪製波浪 094
2.3.2 繪製太陽 098
2.3.3 繪製浪花 099
2.3.4 添加文字 100
2.3.5 製作立體效果 100
拓展練習：繪製一個與案例同類型的引導頁 100
2.4 實戰： “萌胖減重”引導頁的製作 101
2.4.1 繪製海浪 101
2.4.2 繪製救生圈 103
2.4.3 繪製卡通人物 104
2.4.4 添加小黃鴨 106
2.4.5 添加文本 107
2.4.6 製作立體效果 108
拓展練習：繪製一個“中秋賞月”主題的引導頁 108
第3章 主頁設計 109
3.1 實戰：相機主頁的製作 110
3.1.1 繪製背景 110
3.1.2 繪製操作欄圖標 111
3.1.3 製作立體效果 112
拓展練習：繪製一個黑色效果的相機主頁 112
3.2 實戰：酷炫音樂播放器主頁的製作 113
3.2.1 繪製背景 113
3.2.2 編輯圖片 113
3.2.3 繪製狀態欄和操作欄的圖標 114
3.2.4 繪製播放器 115
3.2.5 製作立體效果 117
拓展練習：繪製一個紫色炫酷類型的播放器主頁 117
3.3 實戰：音樂播放器主頁的製作 118
3.3.1 繪製背景 118
3.3.2 編輯圖片 118
3.3.3 繪製頂部操作欄 119
3.3.4 繪製播放器 120
3.3.5 製作立體效果 121
拓展練習：繪製一個極簡風格的播放器主頁 121
3.4 實戰：微故事主頁的製作 122
3.4.1 繪製背景 122
3.4.2 繪製標題 122
3.4.3 繪製卡片 123
3.4.4 製作立體效果 124
拓展練習：繪製一個卡片類型的電影App主頁 124
3.5 實戰：推薦文章主頁的製作 125
3.5.1 繪製背景 125
3.5.2 繪製頁邊 125
3.5.3 繪製狀態欄 126
3.5.4 繪製底部操作欄 126
3.5.5 添加正文 126
3.5.6 製作立體效果 128
拓展練習：繪製一個圖文混排的好文章分享App主頁 128
3.6 實戰：直播App主頁的製作 129
3.6.1 繪製背景 129
3.6.2 繪製操作欄圖標 129
3.6.3 製作立體效果 132
拓展練習：繪製一個漸變效果的視頻剪輯App主頁 132
第4章 圖表頁設計 133
4.1 實戰：簡約水波圖表頁的製作 134
4.1.1 繪製背景 134
4.1.2 繪製頂部水紋 134
4.1.3 繪製定界框並放入圖標 136
4.1.4 繪製圓圈部分圖標 136
4.1.5 添加文本 138
4.1.6 繪製底部列表 139
4.1.7 完善細節 140
4.1.8 製作立體效果 141
拓展練習：繪製一個漸變發光效果的數據圖表頁 141
4.2 實戰：漸變互動指數圖表頁的製作 142
4.2.1 繪製背景 142
4.2.2 繪製定界框 143
4.2.3 添加文本 143
4.2.4 繪製指數圖部分 144
4.2.5 製作立體效果 145
拓展練習：繪製一個藍紫色的圖表頁 145
4.3 實戰：漸變活力評分圖表頁的製作 146
4.3.1 繪製背景 146
4.3.2 繪製操作欄 148
4.3.3 繪製圓環部分 148
4.3.4 繪製卡片部分 149
4.3.5 製作立體效果 153
拓展練習：繪製一個極簡風格的圖表頁 153
4.4 實戰：漸變業績圖表頁的製作 154
4.4.1 繪製背景 154
4.4.2 繪製狀態欄 154
4.4.3 繪製卡片部分 155
4.4.4 繪製列表 156
4.4.5 製作立體效果 158
拓展練習：繪製一個卡片樣式的圖表頁 158
第5章 個人中心頁設計 159
5.1 實戰：居中形式的個人中心頁製作 160
5.1.1 繪製背景 160
5.1.2 繪製定界框 160
5.1.3 繪製用戶信息 161
5.1.4 添加圖標 162
5.1.5 添加數據信息 162
5.1.6 添加底部圖片 163
5.1.7 製作立體效果 164
拓展練習：繪製一個居中形式的個人中心頁 164
5.2 實戰：側邊形式的個人中心頁製作 165
5.2.1 繪製背景 165
5.2.2 繪製定界框 165
5.2.3 添加用戶頭像 166
5.2.4 添加文本 166
5.2.5 製作立體效果 167
拓展練習：繪製一個側邊欄樣式的個人中心頁 167
5.3 實戰：斜邊形式的個人中心頁製作 168
5.3.1 繪製背景 168
5.3.2 繪製定界框 169
5.3.3 繪製圖標 170
5.3.4 添加用戶信息 170
5.3.5 繪製列表 171
5.3.6 添加按鈕 172
5.3.7 製作立體效果 173
拓展練習：繪製一個左對齊形式的個人中心頁 173
5.4 實戰：中心展示類的個人中心頁製作 174
5.4.1 製作用戶信息 174
5.4.2 製作列表信息 175
5.4.3 繪製“提示”按鈕 175
5.4.4繪製“關閉”按鈕 176
5.4.5 製作立體效果 176
拓展練習：繪製一個中心展示形式的個人中心頁 176
第6章 登錄頁設計 177
6.1 實戰：時尚不規則卡片登錄頁的製作 178
6.1.1 繪製背景 178
6.1.2 繪製卡片 179
6.1.3 繪製定界框 179
6.1.4 添加登錄信息 180
6.1.5 添加細節 180
6.1.6 製作立體效果 181
拓展練習：繪製一個極簡登錄頁 181
6.2 實戰：極簡風格登錄頁的製作 182
6.2.1 繪製背景 182
6.2.2 添加導航欄信息 182
6.2.3 繪製頭像 183
6.2.4 繪製“相機”圖標 183
6.2.5 繪製列表 184
6.2.6 繪製按鈕 184
6.2.7 製作立體效果 185
拓展練習：繪製一個極簡風格的卡片登錄頁 185
6.3 實戰：透氣建築風格登錄頁的製作 186
6.3.1 繪製背景 186
6.3.2 繪製定界框 188
6.3.3 添加裝飾色塊 188
6.3.4 添加登錄信息 188
6.3.5 添加按鈕 188
6.3.6 製作立體效果 189
拓展練習：繪製一個建築風格的登錄頁 189
6.4 實戰：漸變小彈框登錄頁的製作 190
6.4.1 繪製背景 190
6.4.2 繪製卡片 190
6.4.3 添加文本 191
6.4.4 製作立體效果 192
拓展練習：繪製一個卡片類型的登錄頁 192
您曾經瀏覽過的商品
購物須知
大陸出版品因裝訂品質及貨運條件與台灣出版品落差甚大，除封面破損、內頁脫落等較嚴重的狀態，其餘商品將正常出貨。
特別提醒：部分書籍附贈之內容(如音頻mp3或影片dvd等)已無實體光碟提供，需以QR CODE 連結至當地網站註冊“並通過驗證程序”，方可下載使用。
無現貨庫存之簡體書，將向海外調貨：
海外有庫存之書籍，等候約45個工作天;
海外無庫存之書籍，平均作業時間約60個工作天，然不保證確定可調到貨，尚請見諒。
為了保護您的權益，「三民網路書店」提供會員七日商品鑑賞期(收到商品為起始日)。
若要辦理退貨，請在商品鑑賞期內寄回，且商品必須是全新狀態與完整包裝(商品、附件、發票、隨貨贈品等)否則恕不接受退貨。