目錄
第1章 圖標與界面設計基礎 ........... 1
實戰1 認識界面(UI)設計 ............. 2
實戰2 智能手機操作系統有哪些 2
實戰3 界面設計常用單位 ............ 3
實戰4 界面設計常用圖像格式 .... 3
實戰5 低保真與高保真原型設計 4
實戰6 界面設計常用的軟件 ........ 4
實戰7 按鈕圖標尺寸要求 ............ 5
實戰8 界面設計準則 . 6
實戰9 界面設計與團隊合作關系 7
實戰10 界面設計色彩學 .............. 7
實戰11 色彩的含義 ... 8
實戰12 常見界面設計配色方案 10
實戰13 界面設計配色秘笈 ........ 11
第2章 界面元素設計基礎 .............15
實戰14 搜索框 ......... 16
實戰15 下單按鈕 ..... 19
實戰16 下載按鈕 ..... 20
實戰17 簡潔進度條 . 21
實戰18 音量滑動條 . 22
實戰19 糖果進度條 . 23
實戰20 開關元素 ..... 27
實戰21 確認及取消按鈕 ............ 29
實戰22 狀態按鈕 ..... 30
實戰23 下載指示欄 . 33
實戰24 圖標應用欄 . 38
實戰25 下拉式菜單 . 41
實戰26 信息接收控件 ................ 43
實戰27 運行進度標示 ................ 48
實戰28 信息圖標 ..... 51
第3章 常用按鈕及旋鈕的制作 ......55
實戰29 簡潔按鍵開關 ................ 56
實戰30 立體多邊形按鈕 ............ 57
實戰31 滑動按鈕 ..... 60
實戰32 播放控制按鈕 ................ 63
實戰33 滑動調節按鈕 ................ 66
實戰34 五維按鍵 ..... 71
實戰35 音量旋鈕 ..... 76
實戰36 簡潔旋鈕 ..... 80
第4章 超強表現力之寫實風格 ......85
實戰37 寫實SIM卡 .. 86
實戰38 寫實收音機 . 88
實戰39 質感金屬云 . 92
實戰40 寫實光盤 ..... 97
實戰41 質感日歷 ... 102
實戰42 質感CD包裝 ................. 108
第5章 主流扁平圖標與界面的設計 ........... 115
實戰43 循環圖標 ... 116
實戰44 扁平分享圖標 .............. 117
實戰45 拼貼APP圖標 ............... 120
實戰46 信封圖標 ... 122
實戰47 回收文件管理界面 ...... 124
實戰48 信息對話界面 .............. 126
實戰49 企業管理登錄界面 ...... 129
實戰50 美食APP界面 ............... 130
實戰51 智能手表界面 .............. 133
實戰52 簡潔音樂播放界面 ...... 134
實戰53 簡潔天氣界面 .............. 137
實戰54 運動圖標 ... 142
實戰55 加速圖標 ... 144
實戰56 清新音樂圖標 .............. 147
實戰57 文件管理圖標 .............. 149
實戰58 新聞應用圖標 .............. 152
實戰59 網球游戲圖標 .............. 154
實戰60 餐廳元素圖標 .............. 156
實戰61 資訊圖標 ... 158
實戰62 盾牌圖標 ... 160
實戰63 衛士應用圖標 .............. 162
第6章 蘋果風格界面圖標的設計 165
實戰64 蘋果音樂圖標 .............. 166
實戰65 經典應用商店圖標 ...... 167
實戰66 秋景主題登錄界面 ...... 170
實戰67 主題天氣界面 .............. 172
實戰68 私人電臺界面 .............. 175
實戰69 郵件圖標 ... 177
實戰70 無線連接圖標 .............. 181
實戰71 社交應用圖標 .............. 184
實戰72 天氣圖標 ... 186
實戰73 涂鴉應用圖標 .............. 187
實戰74 時鐘圖標 ... 191
實戰75 調節器圖標 .................. 193
實戰76 炫彩開關圖標 .............. 195
實戰77 寵物樂園圖標 .............. 198
第7章 流行風圖標界面的設計 ....205
實戰78 美麗拍圖標 .................. 206
實戰79 粉色控制圖標 .............. 210
實戰80 簡潔時鐘圖標 .............. 213
實戰81 存儲數據界面 .............. 218
實戰82 游客統計界面 .............. 222
實戰83 財富應用圖標 .............. 225
實戰84 簡潔羅盤圖標 .............. 230
實戰85 簡潔進程圖標 .............. 235
第8章 常用圖標界面設計集合 ....239
實戰86 股票應用圖標 .............. 240
實戰87 清新郵件圖標 .............. 243
實戰88 清新音樂圖標 .............. 246
實戰89 生產力APP登錄界面 ... 248
實戰90 mini音樂播放器 ........... 254
實戰91 計算器界面 .................. 258
實戰92 數據進程界面 .............. 261
第9章 UI界面綜合設計實戰 .......269
實戰93 日程應用界面 .............. 270
實戰94 酒店登錄界面 .............. 272
實戰95 iPhone匯率換算界面 ... 275
實戰96 四葉草插件界面 .......... 282
實戰97 Android概念手機界面 . 288
實戰98 手機游戲個人界面 ...... 299
實戰99 Windows 10手機界面 .. 304
實戰100 iPad旅游應用界面 ..... 307
第7章流行風圖標界面的設計APP
本章介紹
本章講解流行風圖標界面設計，流行風，顧名思義，是指當下最流行的圖標設計風格，本章精選了當下流行的多個實例，從最實用和流行的風格入手，對圖標界面的制作進行完全展示，通過對此種風格的了解和學習，可以完全掌握當下流行風圖標界面的設計方向。
要點索引
學會美麗拍圖標的繪制
學習簡潔時鐘圖標的繪制
了解財富應用圖標的制作思路
掌握存儲數據界面的設計
掌握游客統計界面的設計
實戰78美麗拍圖標
本例講解美麗拍圖標制作，整個制作過程十分簡單，重點在于圖標的中細節的刻畫，為平面圖形添加相應的圖層樣式，制作出具有立體視覺效果的圖形，最終效果如圖7.1所示。
圖7.1最終效果
Step01繪制矩形并添加陰影
(1)選擇菜單欄中的【文件】|【新建】命令，在彈出的對話框中設置【寬度】為600像素，【高度】為450像素，【分辨率】為72像素/英寸，新建一個空白畫布，將畫布填充為深藍色(R:9，G:18，B:32)。
(2)選擇工具箱中的【圓角矩形工具】，在選項欄中將【填充】更改為白色，設置【描邊】為無，【半徑】為60像素，在畫布中按住Shift鍵繪制一個圓角矩形，此時將生成一個【圓角矩形1】圖層，如圖7.2所示。
圖7.2繪制圖形
(3)在【圖層】面板中，選中【圓角矩形1】圖層，單擊面板底部的【添加圖層樣式】按鈕，在菜單中選擇【漸變疊加】命令，在彈出的對話框中將【漸變】更改為藍色(R:35，G:160，B:254)到青色(R:62，G:255，B:248)，完成之后單擊【確定】按鈕，如圖7.3所示。
圖7.3設置漸變疊加
(4)選擇工具箱中的【橢圓工具】，在選項欄中將【填充】更改為藍色(R:36，G:160，B:254)，設置【描邊】為無，在【圓角矩形1】圖層中的圖形底部位置繪制一個橢圓圖形，此時將生
成一個【橢圓1】圖層，如圖7.4所示。
圖7.4繪制圖形
(5)選中【橢圓1】圖層，選擇菜單欄中的【濾鏡】|【模糊】|【高斯模糊】命令，在彈出的對話框中將【半徑】更改為110像素，完成之后單擊【確定】按鈕，如圖7.5所示。
圖7.5設置高斯模糊
(6)選擇工具箱中的【圓角矩形工具】，在選項欄中將【填充】更改為黑色，設置【描邊】為無，【半徑】為50像素，在圖標底部后方位置繪制一個圓角矩形，此時將生成一個【圓角矩形2】圖層，如圖7.6所示。
圖7.6繪制圖形
(7)選中【圓角矩形2】圖層，按Ctrl+T組合鍵對其執行【自由變換】命令，單擊鼠標右鍵，從彈出的快捷菜單中選擇【透視】命令，拖動變形框將圖形變形，完成之后按Enter鍵確認，如圖7.7所示。
圖7.7將圖形變形
(8)選中【圓角矩形2】圖層，按Ctrl+Alt+F組合鍵打開【高斯模糊】命令對話框，在彈出的對話框中將【半徑】更改為3像素，完成之后單擊【確定】按鈕，如圖7.8所示。
圖7.8設置高斯模糊
(9)在【圖層】面板中，選中【圓角矩形2】圖層，單擊面板底部的【添加圖層蒙版】按
鈕，添加圖層蒙版，如圖7.9所示。
(10)選擇工具箱中的【畫筆工具】，在畫布中單擊鼠標右鍵，在彈出的面板中選擇一種圓角
筆觸，將【大小】更改為150像素，【硬度】更改為0%，如圖7.10所示。
圖7.9添加圖層蒙版圖7.10設置筆觸
(11)將前景色更改為黑色，在其圖像上部分區域涂抹，將其隱藏，如圖7.11所示。
圖7.11隱藏圖像
Step02繪制標志圖形
(1)選擇工具箱中的【圓角矩形工具】，在選項欄中將【填充】更改為白色，設置【描邊】為無，【半徑】為30像素，在圖標位置繪制一個圓角矩形，此時將生成一個【圓角矩形3】圖層，如圖7.12所示。
圖7.12繪制圓角矩形3
(2)選擇工具箱中的【圓角矩形工具】，在選項欄中將【填充】更改為黑色，設置【描邊】為無，【半徑】為5像素，在剛才繪制的圖形靠左側位置繪制一個圓角矩形，此時將生成一個【圓角矩形4】圖層，如圖7.13所示。
圖7.13繪制圓角矩形4
(3)選中【圓角矩形4】圖層，按Ctrl+T組合鍵對其執行【自由變換】命令，當出現變形框以后，在選項欄中【旋轉】后方的文本框中輸入45，再分別將圖形高度縮小，寬度增加，完成之后按Enter鍵確認，如圖7.14所示。
(4)選擇工具箱中的【刪除錨點工具】，單擊圖形左側錨點將其刪除，再將圖形稍微移動，如圖7.15所示。
圖7.14變換圖形圖7.15刪除錨點
(5)在【圖層】面板中，選中【圓角矩形3】圖層，單擊面板底部的【添加圖層蒙版】按
鈕，為其添加圖層蒙版，如圖7.16所示。
(6)按住Ctrl鍵單擊【圓角矩形4】圖層縮覽圖，將其載入選區，將選區填充為黑色，將部分圖形隱藏，完成之后按Ctrl+D組合鍵將選區取消，如圖7.17所示。
圖7.16添加圖層蒙版圖7.17隱藏圖形
提示
隱藏圖形制作鏤空效果之后【圓角矩形4】圖層無用，可以將其刪除。
(7)選擇工具箱中的【圓角矩形工具】，在選項欄中將【填充】更改為白色，設置【描邊】為無，【半徑】為5像素，在剛才繪制的圖形靠右側位置繪制一個圓角矩形，此時將生成一個【圓角矩形4】圖層，如圖7.18所示。
圖7.18繪制圖形
(8)以剛才同樣的方法對【圓角矩形4】圖層中的圖形進行變換并刪除部分錨點后，適當移動圖形，如圖7.19所示。
圖7.19刪除錨點并移動圖形
Step03制作細節部分
(1)選擇工具箱中的【鋼筆工具】，在選項欄中單擊【選擇工具模式】按鈕，在彈出的選項中選擇【形狀】，將【填充】更改為無，【描邊】更改為無，在圖標位置繪制1個不規則
圖形，此時將生成一個【形狀1】圖層，如圖7.20所示。
圖7.20繪制圖形
(2)在【圖層】面板中，選中【形狀1】圖層，單擊面板底部的【添加圖層樣式】按鈕，在菜單中選擇【內陰影】命令，在彈出的對話框中將【顏色】更改為青色(R:56，G:210，B:254)，【不透明度】更改為50%，【距離】更改為6像素，【大小】更改為13像素，如圖7.21所示。
圖7.21設置內陰影
(3)在【圖層】面板中，選中【形狀1】圖層，單擊面板底部的【添加圖層蒙版】按鈕，為圖層添加圖層蒙版，如圖7.22所示。
(4)選擇工具箱中的【畫筆工具】，在畫布中單擊鼠標右鍵，在彈出的面板中選擇一種圓角筆觸，將【大小】更改為50像素，【硬度】更改為0%，如圖7.23所示。
圖7.22添加圖層蒙版圖7.23設置筆觸
(5)將前景色更改為黑色，在其圖像上部分區域涂抹將其隱藏，如圖7.24所示。
圖7.24隱藏圖像
(6)在【圖層】面板中，選中【形狀1】圖層，將其拖至面板底部的【創建新圖層】按鈕上，復制1個【形狀1拷貝】圖層，如圖7.25所示。
(7)選中【形狀1拷貝】圖層，按Ctrl+T組合鍵對其執行【自由變換】命令，單擊鼠標右鍵，從彈出的快捷菜單中選擇【垂直翻轉】命令，完成之后按Enter鍵確認，將圖形向下移動至與原圖形相對的位置，雙擊其圖層樣式名稱，在彈出的對話框中取消勾選【使用全局光】復選框，將【角度】更改為-120度，完成之后單擊【確定】按鈕，如圖7.26所示。
圖7.25復制圖層圖7.26變換圖形
(8)在【圖層】面板中，選中【形狀1拷貝】圖層，將其拖至面板底部的【創建新圖層】按鈕上，復制1個【形狀1拷貝2】圖層，如圖7.27所示。
(9)選中【形狀1拷貝2】圖層，按Ctrl+T組合鍵對其執行【自由變換】命令，將圖形向右側移動并適當旋轉，完成之后按Enter鍵確認，再選擇工具箱中的【直接選擇工具】適當調整圖形錨點，再雙擊其圖層樣式名稱，在彈出的對話框中取消勾選【使用全局光】復選框，將【角度】更改為-60度，完成之后單擊【確定】按鈕，如圖7.28所示。
圖7.27復制圖層圖7.28變換圖形
(10)選擇工具箱中的【矩形工具】，在選項欄中將【填充】更改為無，設置【描邊】為無，在圖標靠右側位置繪制一個矩形，此時將生成一個【矩形1】圖層，將其移至【圓角矩形4】圖層上筆觸，將【大小】更改為60像素，【硬度】更改為0%，如圖7.34所示。
圖7.33添加圖層蒙版圖7.34設置筆觸
(16)將前景色更改為黑色，在圖像上部區域涂抹，將其隱藏，這樣就完成了效果制作，最終效果如圖7.35所示。
圖7.35完成了制作
……
新書資訊