簡體書 » UI界面設計

UI界面設計

定價：~~179~~ 元

NT $ 179

作者：張小玲
出版社：電子工業出版社
出版日期：2014-09-01
語言：簡體中文
ISBN10：7121241609
ISBN13：9787121241604
裝訂：206頁 / 普通級 / 1-1

內容簡介

本書按照高職高專計算機多媒體技術專業教學大綱的要求編寫，是一本全面的UI界面設計與制作的基礎教程。本書以培養學生的UI設計理念、方法為基本，結合Photoshop軟件中常用的各種工具和方法，有針對性地剖析設計制作的實施策略與過程，以訓練和提高學生UI界面設計制作技能。

全書內容共7章，分為三個部分。第一部分是UI界面設計相關知識的介紹，包括什麼是UI界面設計、UI界面設計的常用方法和設計工具、UI設計與用戶體驗的關系等基本知識。第二部分是各種UI界面常用元素的制作。第三部分是UI界面設計典型實戰，通過4個遞進的設計實例，從任務分析、功能定位、制作步驟入手對界面設計制作進行全過程講解。

本書結構合理、內容翔實、圖文並茂，在項目中講述Photoshop CC的要點和難點，將藝術設計的知識與技巧融入其中，引導讀者進行思考及軟件操作實踐，提升讀者的審美、審藝能力。

張小玲，高級界面設計師。擅長藝術設計。在界面設計方面，她有系統的理論基礎，並且已經在多年的實踐中得以應用和驗證。曾任正大恆領網絡科技有限公司美術總監，項目經驗豐富。現任職於重慶工程學院，負責和參與多項教研教改項目研究，為界面設計領域培養了諸多專業人才。

第一部分知識准備

第1章 UI界面設計相關知識1
1.1 UI界面設計1
1.1.1 UI設計的概念1
1.1.2 UI設計的流程2
1.1.3 UI界面設計的規范4
1.1.4 UI界面設計常用工具5
1.2 UI界面設計與用戶體驗6
1.2.1 UI界面設計與用戶體驗6
1.2.2 影響用戶體驗的因素7
1.3 知識拓展8
1.3.1 Photoshop CC入門8
1.3.2 Photoshop CC精彩新功能9
1.3.3 圖像常用基本操作11
1.3.4 選區的基本操作14
1.3.5 畫筆工具的應用16
本章小結19

第2章 UI界面設計的常用方法20
2.1 UI界面設計中的設計方法20
2.1.1 方法與方法論20
2.1.2 認識論和設計方法20
2.1.3 UI界面設計中實用的設計方法21
2.2 UI界面設計中實用的構成方法23
2.2.1 什麼是構成23
2.2.2 形式美法則23
2.2.3 構成的思維方式29
2.3 UI界面設計中實用的色彩搭配技巧32
2.3.1 色彩的基本理論33
2.3.2 色彩搭配法則35
2.4 知識拓展——UI界面設計風格46
2.4.1 扁平化46
2.4.2 擬物化48
2.4.3 卡通化48
2.5 能力拓展——Photoshop CC中圖層的應用49
2.5.1 圖層類別49
2.5.2 圖層的基礎操作49
2.5.3 圖層樣式50
2.5.4 混合模式51
2.5.5 Photoshop中的蒙版52
2.5.6 漸變工具56
本章小結58

第二部分牛刀小試

第3章各種UI界面常用元素制作59
3.1 常用圖形制作59
3.1.1 圓形、圓角59
3.1.2 多邊形60
3.1.3 直線60
3.2 常見控件制作60
3.2.1 按鈕的制作60
3.2.2 下拉選擇框的制作62
3.2.3 滑動條的制作64
3.2.4 TAB切換塊的制作66
3.2.5 氣泡對話框的制作68
3.3 創意圖標設計與制作70
3.3.1 圖標設計技巧70
3.3.2 利用Photoshop打造擬物化設計風格圖標74
3.3.3 利用Photoshop打造四種扁平化設計風格圖標79
3.4 知識拓展83
3.4.1 圖標設計的趨勢——響應式圖標83
3.4.2 路徑與形狀工具83
3.4.3 擦除類工具86
3.5 能力拓展——簡單網頁設計制作實例87
本章小結93

第三部分 UI界面設計典型實戰

第4章操作型APP——計算器界面設計94
4.1 界面設計任務分析94
4.2 學習目標95
4.3 制作步驟詳解95
4.3.1 新建文件，確定尺寸規范95
4.3.2 制作背景96
4.3.3 制作狀態欄區域96
4.3.4 制作顯示區細節96
4.3.5 制作功能鍵區和數字鍵區細節97
4.3.6 定稿輸出有效的設計方案97
4.4 知識拓展98
4.4.1 圖層組98
4.4.2 APP界面布局設計99
4.4.3 Photoshop外部素材的載入使用100
4.5 能力拓展100
4.5.1 拓展練習：水平儀UI界面設計100
4.5.2 拓展練習：拼拼樂APP界面設計101
4.5.3 獨立實踐105
本章小結105

第5章實用型軟件——播放器界面設計106
5.1 界面設計任務分析106
5.2 學習目標106
5.3 制作步驟詳解106
5.3.1 創建播放器106
5.3.2 播放器專輯信息部分制作108
5.3.3 播放器播放按鈕部分制作112
5.4 知識拓展119
5.4.1 色彩的搭配119
5.4.2 Photoshop中的色彩調整120
5.5 能力拓展120
5.5.1 拓展練習：設計制作DVD光盤圖標120
5.5.2 拓展練習：設計制作金屬按鈕121
5.5.3 拓展練習：為黑白照片調色122
5.5.4 獨立實踐125
本章小結125

第6章手機主題UI界面設計126
6.1 界面設計任務分析126
6.2 學習目標127
6.3 制作步驟詳解127
6.3.1 主體形象設計制作127
6.3.2 手機壁紙設計制作129
6.3.3 鎖屏設計制作130
6.3.4 天氣插件制作131
6.3.5 桌面圖標制作137
6.4 知識拓展147
6.4.1 手機界面設計原則147
6.4.2 手機常用尺寸與圖標格式148
6.5 能力拓展149
6.5.1 拓展練習：ico圖標設計制作149
6.5.2 拓展練習：偽扁平手機主題UI界面設計150
6.5.3 獨立實踐152
本章小結152

第7章 Web界面設計實例——兒童節專題網頁設計153
7.1 界面設計任務分析153
7.2 學習目標154
7.3 制作步驟詳解154
7.3.1 設計制作頭部主圖154
7.3.2 設計制作裝飾圖形167
7.3.3 設計制作欄目「書籍系列」173
7.3.4 設計制作欄目「服飾系列」181
7.3.5 設計制作欄目「玩具系列」184
7.3.6 設計制作底部區域187
7.4 知識拓展189
7.4.1 網站界面設計基本原則189
7.4.2 網站界面的功能美與形式美189
7.5 能力拓展190
7.5.1 拓展練習：照射在透明玻璃窗上效果190
7.5.2 拓展練習：Photoshop打造傾盆大雨效果191
7.5.3 拓展練習：Photoshop打造電子商務網頁界面192
7.5.4 全局觀念的強化206
7.5.5 獨立實踐206
本章小結206

參考文獻207

看更多