如今,人們對各種類型的UI界面的要求越來越高,為滿足廣大UI設計者的需求,本書向讀者們介紹如何設計美觀又符合要求的UI界面。
本書由淺入深地講解了初學者需要掌握的UI界面設計基礎知識和操作技巧,并結合實際案例操作,詳細地介紹了其制作的步驟和軟件的應用技巧,使讀者能輕松地學習并掌握。
本書的結構清晰,內容有針對性,實例精美實用,適合大部分UI設計愛好者與設計專業的大中專學生閱讀。隨書附贈的資源包中包含了本書所有實例的教學視頻、素材和源文件,用于補充書中遺漏的細節內容,方便讀者學習和參考。
適讀人群 :ui設計從業人員,學生。 本書采用通俗易懂的語言全面地向讀者介紹各類UI設計所需的基礎知識和操作技巧,確保讀者能夠理解并掌握相應的功能與操作。采用基礎知識和實戰案例相結合的講解模式,書中所使用的案例都具有很強的商業性和專業性,不僅能夠幫助讀者強化知識點,還能幫助讀者拓展思路和激發創造性。本書在基礎知識和實戰案例的講解過程中列出了大量的提示和技巧,這些信息都是結合作者長期的UI設計經驗與教學經驗歸納出來的,可以幫助讀者更準確地理解和掌握相關的知識點和操作技巧。
為了增加讀者的學習渠道,增強讀者的學習興趣,本書配有多媒體教學資源包。資源包中提供了本書中所有實例的相關素材和源文件。
隨著信息社會的不斷發展,人們的生活越來越離不開軟件,提到軟件就不得不說用戶圖形界面。用戶圖形界面是用戶與各種機器和設備進行交互的平臺,好的用戶界面設計應該同時具備美觀性與可操作性。
本書主要通過理論知識與案例操作相結合的方法,向讀者介紹了使用Photoshop CC 2019進行各類UI 設計所需的功能和操作技巧。
內容安排
本書共分為7章,下面介紹各章的主要內容。
第1章 UI界面設計基礎。本章主要介紹了UI設計相關的理論知識,包括UI界面設計的發展歷史及分類、UI界面設計中的圖像、UI界面設計中的文字、UI界面設計的黃金法則、UI界面設計的色彩搭配、UI 界面設計中的布局、UI界面設計的工作流程以及常見的UI界面設計軟件等內容。這些知識可以幫助讀者初步了解UI設計。
第2章 UI界面設計元素。本章主要介紹了UI界面設計元素的基礎知識和相應的制作技巧,包括UI界面設計元素的分類、UI界面中的啟動界面、UI界面中的裝飾線條、UI界面中的按鈕和圖標、UI界面中的開關和進度條及UI界面中的菜單和工具欄設計等內容。通過本章的學習,讀者能夠掌握UI界面元素的設計技巧。
第3章 軟件UI界面設計。本章主要向讀者介紹了軟件UI界面設計的基礎知識,包括軟件界面設計基礎、PC端應用軟件設計規范、軟件安裝與啟動界面設計、軟件面板設計、軟件皮膚設計和播放器軟件界面設計。通過本章的學習,讀者應該熟悉軟件界面的設計規范。
第4章 游戲UI界面設計。本章主要向讀者介紹了游戲UI界面設計相關的基礎知識和操作技巧,包括游戲UI界面設計基礎、游戲UI界面設計中的視聽元素、游戲UI界面設計的要求和游戲UI界面的類型等內容。
第5章 網頁UI界面設計。本章主要向讀者介紹了網頁UI界面設計的特點和需要注意的問題,以及一些常用的操作技巧,包括網頁的類型、網頁設計原則、網頁界面構成元素、網頁版式與布局、網頁切圖規范和網頁UI界面適配等內容。本章要重點掌握網頁界面構成元素及網頁切圖規范。
第6章 Android系統UI界面設計。本章主要介紹了Android系統界面設計需要注意的問題和所需的知識,包括認識Android系統、Android系統UI界面設計規范、Android系統UI界面設計原則,以及Android系統界面輸出等內容。本章要重點掌握Android系統的UI界面設計規范,以及切圖標注的方法。
第7章 iOS系統UI界面設計。本章主要介紹了如何設計iOS系統UI界面,包括iOS系統概況、iOS系統界面設計規范、iOS系統界面設計原則和iOS系統界面輸出等內容。通過本章的學習,讀者能夠掌握iOS系統的界面設計規范,并能夠應用到工作中。
李曉斌,有豐富的教學經驗,曾參與制作教學微課、幕課上百小時。熟悉微課策劃、設計、拍攝、制作全過程。為中國石油、中國鐵路等大型企業做專業企業培訓,參與培訓北京骨干教師活動,曾在中國傳媒大學、北京大學、北京師范大學、北京交通大學等重點院校以及Adobe創意大學和新東方等培訓機構教授設計課程。出版過相關設計類書籍數十種,參與清華大學中職教材的編寫、國家開放大學網頁設計課程規劃及教材策劃等工作。
1.1 了解UI界面設計1
1.1.1 什么是UI 界面設計 1
1.1.2 UI 界面設計的發展歷史 1
1.1.3 UI 界面設計的分類 4
1.2 UI界面設計中的圖像 6
1.2.1 常見的圖像格式 6
1.2.2 常見的圖像類型 7
1.3 UI界面設計中的文字 8
1.3.1 簡化文字內容 8
1.3.2 字體設計合理 8
1.3.3 安排文字層次 9
1.3.4 信息表達準確 9
1.3.5 文字畫面美感設計 9
1.4 UI界面設計中的黃金法則 10
1.4.1 保持界面的一致性 10
1.4.2 在界面中設置快捷方式 10
1.4.3 為用戶提供信息反饋 11
1.4.4 提供簡單的錯誤處理 11
1.5 UI界面設計的色彩搭配 11
1.5.1 色彩基礎 11
1.5.2 色彩搭配原則 15
1.5.3 色彩搭配方案 18
1.6 UI界面設計中的布局 20
1.6.1 構圖的基本概念 20
1.6.2 構圖的法則 20
1.7 UI界面設計的工作流程 21
1.7.1 市場調研/ 需求分析 21
1.7.2 設計分析/ 線框圖繪制 22
1.7.3 界面制作/ 調研驗證 22
1.7.4 測試產品/ 改進方案 23
1.7.5 投入市場/ 用戶反饋 23
1.8 常見的UI界面設計軟件 23
1.8.1 Axure RP 23
1.8.2 Sketch 24
1.8.3 Photoshop 26
1.8.4 Illustrator 27
1.9 本章小結28
2.1 UI界面設計元素的分類 29
2.2 UI界面中的啟動界面 33
2.2.1 啟動界面的概念 33
2.2.2 啟動界面的作用 33
2.2.3 啟動界面的設計技巧 34
2.3 UI界面中的裝飾線條 34
2.3.1 點與線的關系 35
2.3.2 線條風格的變化 35
2.3.3 裝飾線條的作用 38
2.4 UI界面中的按鈕和圖標 38
2.4.1 按鈕設計的概況 38
實戰練習01——制作扁平化按鈕 39
2.4.2 UI 界面中的圖標 44
2.4.3 圖標的設計原則 45
2.4.4 圖標的常用格式 47
2.4.5 擬物化風格圖標 48
實戰練習02——設計制作逼真的話筒圖標 49
2.4.6 扁平化風格圖標 56
實戰練習03——設計制作扁平化圖標 58
2.5 UI界面中的開關和進度條 64
2.5.1 軟件開關 65
2.5.2 進度條設計 65
實戰練習04——設計制作進度條 65
2.6 UI界面中的菜單和工具欄設計 71
2.6.1 菜單的重要性 71
2.6.2 菜單的設計重點 71
實戰練習05——制作UI 界面導航和索引菜單 72
2.6.3 工具欄的作用 76
2.7 本章小結76
第3章 軟件UI界面設計
3.1 軟件界面設計基礎 77
3.1.1 軟件界面的概念 77
3.1.2 軟件界面的分類 77
3.1.3 與移動端的差異性 79
3.1.4 軟件包裝及市場化 81
3.2 PC端應用軟件設計規范 81
3.2.1 顏色規范 81
3.2.2 文字規范 82
3.2.3 控件規范 83
3.2.4 尺寸規范 86
3.3 軟件安裝與啟動界面設計 87
3.3.1 軟件啟動界面設計 87
3.3.2 軟件安裝界面流程 88
3.3.3 安裝界面的細節設計 89
3.4 軟件面板設計91
3.4.1 軟件面板布局 91
實戰練習01——制作在線聊天軟件
的界面框架 92
3.4.2 軟件面板布局的合理性 96
實戰練習02——制作軟件界面的標題欄、頭像
與圖標 97
3.4.3 軟件面板的設計原則 104
實戰練習03——制作聊天軟件界面
的聯系人列表 106
3.5 軟件皮膚設計 110
3.6 播放器軟件界面設計 112
3.6.1 播放器界面設計原則 113
實戰練習04——制作圖片播放器的背景和名稱 115
3.6.2 界面的人性化設計119
實戰練習05——制作圖片播放器的主體 120
3.7 本章小結 126
4.1 游戲UI界面設計基礎 127
4.1.1 關于游戲UI 界面設計 127
4.1.2 游戲UI 界面中的設計理念 128
4.1.3 與其他UI 界面設計的區別 129
4.1.4 認知心理學的作用 130
4.2 游戲UI界面設計中的視聽元素 130
4.2.1 圖形元素設計 131
實戰練習01——制作游戲界面的背景
和圖形元素 133
4.2.2 動態元素設計 137
實戰練習02——制作游戲界面的標簽欄 140
4.2.3 視聽元素設計 146
實戰練習03——制作游戲界面的導航欄和裝飾
元素 147
4.3 游戲UI界面設計的要求 154
4.3.1 游戲UI 界面設計的準備工作 154
實戰練習04——制作游戲的幫助界面 156
4.3.2 游戲UI 界面的設計原則 164
4.3.3 游戲UI 界面的設計要點 165
4.4 游戲UI界面的類型 168
4.4.1 PC 端游戲UI 界面設計 168
4.4.2 移動端游戲UI 界面設計 169
4.5 本章小結 176
第5章 網頁UI界面設計
5.1 網頁的類型 177
5.1.1 環境型界面 177
5.1.2 情感型界面 177
5.1.3 功能型界面 178
5.2 網頁設計原則 180
5.2.1 界面美觀 180
實戰練習01——制作時尚簡潔的網站背景 181
5.2.2 優秀的用戶體驗 185
5.2.3 中心明確 186
5.2.4 整體性與一致性 186
實戰練習02——制作時尚簡潔的網站主體與
版底 186
5.2.5 及時更新與定期維護 192
5.3 網頁界面構成元素 192
5.3.1 文本 193
5.3.2 圖像 193
實戰練習03——制作寬屏網頁的頂部與底部 193
5.3.3 多媒體 197
5.3.4 配色 198
5.4 網頁版式與布局 198
5.4.1 布局方式 198
5.4.2 網頁選圖 201
實戰練習04——制作寬屏網頁的主體 203
5.4.3 網頁構圖 204
5.5 網頁切圖規范 205
實戰練習05——制作時尚簡潔地電子商務
網站切圖 206
5.6 網頁UI界面適配 209
5.6.1 適配的方式方法 209
5.6.2 適配需要注意的點 210
5.7 本章小結 210
第6章 Android系統UI界面設計
6.1 認識 Android 系統 211
6.1.1 Android 系統概述211
6.1.2 Android 系統的優勢 211
6.1.3 Android 系統的局限性 212
6.1.4 定制 Android 系統 212
6.2 Android 系統UI界面設計規范 214
6.2.1 Android 系統的基本單位 214
6.2.2 Android 系統界面的設計尺寸 215
實戰練習01——制作購物App 的頂部
和Banner 217
6.2.3 Android 系統的圖標與按鈕 221
6.2.4 Android 系統的元素間距 223
6.2.5 App 中的文字規范 223
實戰練習02——制作App 的分類圖標
和Banner 225
6.3 Android 系統UI界面設計原則 229
6.3.1 界面美觀整潔 229
6.3.2 操作簡便 230
6.3.3 優化用戶體驗 233
6.3.4 App 界面的整體性 234
實戰練習03——制作App 的版本更新彈出框 235
6.4 Android 系統界面輸出 239
6.4.1 設計稿標注 239
6.4.2 設計稿切圖 240
實戰練習04——制作App 的優惠專區
和底部導航 242
6.4.3 適配輸出 245
6.5 本章小結 246
第7章 iOS系統UI界面設計
7.1 iOS系統概況 247
7.1.1 了解iOS 系統 247
7.1.2 了解Watch OS 系統 248
7.2 iOS系統界面設計規范 248
7.2.1 界面尺寸規范 248
7.2.2 欄高尺寸規范 250
7.2.3 邊距和間距尺寸規范 250
實戰練習01——制作iOS 系統天氣界面 254
7.2.4 圖標尺寸規范 259
7.2.5 字體規范 260
7.2.6 圖片設計規范 262
實戰練習02——制作iOS 系統監測界面
上半部分 262
7.3 iOS系統界面設計原則 265
7.3.1 審美完整性 265
7.3.2 一致性 267
7.3.3 直接操作 268
7.3.4 反饋 269
7.3.5 隱喻 269
7.3.6 用戶控制 269
實戰練習03——制作iOS 系統監測界面
下半部分 270
7.4 iOS系統界面輸出 273
7.4.1 項目立項 273
7.4.2 項目制作 274
7.4.3 切圖標注 275
7.4.4 切圖輸出 277
實戰練習04——制作完美的iOS 系統
天氣界面切圖 279
7.4.5 適配輸出 283
7.5 本章小結 284