新印象——中文版Sketch圖標與UI界面設計實例教程

陳曉歷（Kiki）

曾參與《爸爸去哪兒》《宮爆老奶奶》手游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