《UI設計技術與應用案例解析》以案例為指引，以理論做鋪墊，全面系統(tǒng)地對UI設計的方法與技巧進行了講解。書中用通俗易懂的語言、圖文并茂的形式對Photoshop、Illustrator、MasterGo軟件在UI設計中的應用進行了細致的剖析。 全書共8章，遵循由淺入深、從基礎知識到案例進階的學習原則，對UI設計的基礎知識、圖像處理相關知識、圖形元素的設計技能、產(chǎn)品設計交互工具、組件與圖標設計、App界面設計、網(wǎng)頁界面設計以及軟件界面設計等內(nèi)容進行了逐一講解。 《UI設計技術與應用案例解析》結構合理、內(nèi)容豐富、易學易懂，既有鮮明的基礎性，也有很強的實用性�！禪I設計技術與應用案例解析》既可作為高等院校相關專業(yè)的教學用書，又可作為培訓機構以及圖形設計愛好者的參考書。
《UI設計技術與應用案例解析》緊密圍繞素養(yǎng)、知識、技能三位一體的教學目標，從愛國情懷、社會責任、法治思維、職業(yè)素養(yǎng)等維度落實課程思政；提高學生的創(chuàng)新意識、合作意識和效率意識，培養(yǎng)學生精益求精的工匠精神，弘揚社會主義核心價值觀。
全書共8章，遵循由淺入深、從基礎知識到案例進階的學習原則，對UI設計的基礎知識、圖像處理相關知識、圖形元素的設計技能、產(chǎn)品設計交互工具、組件與圖標設計、App界面設計、網(wǎng)頁界面設計以及軟件界面設計等內(nèi)容進行了逐一講解。
UI設計是指對軟件的人機交互、操作邏輯、界面布局的整體設計。其中，界面設計是本書的重點介紹方向。界面設計不只是單純的美術繪畫，而是需要根據(jù)使用者、使用環(huán)境、使用方式，為最終用戶進行的設計，是純粹的、科學性的藝術設計。
根據(jù)設計者需求，可以在Illustrator軟件中設計矢量圖形，然后調(diào)入Photoshop、MasterGo等軟件中做進一步處理。同時，也可將AI、JPG等文件導入Photoshop軟件中進行編輯處理。除此之外，MasterGo軟件還可以多人協(xié)同地進行產(chǎn)品設計，從而節(jié)省時間，提高工作效率。
隨著軟件版本的不斷升級，目前Photoshop、Illustrator等軟件的技術已逐步向智能化、人性化、實用化方向發(fā)展，旨在讓設計師將更多的精力和時間都用在創(chuàng)新上，以便給大家呈現(xiàn)出更完美的設計作品。
本教材從讀者的實際出發(fā)，以淺顯易懂的語言和與時俱進的圖示來進行說明，理論與實踐并重，注重職業(yè)能力的培養(yǎng)。黨的二十大精神貫穿素養(yǎng)、知識、技能三位一體的教學目標，從愛國情懷、社會責任、法治思維、職業(yè)素養(yǎng)等維度落實課程思政，提高學生的創(chuàng)新意識、合作意識和效率意識，培養(yǎng)學生精益求精的工匠精神，弘揚社會主義核心價值觀。
內(nèi)容概述
本書共8章，各章內(nèi)容如下。
章 內(nèi)容導讀 難點指數(shù)
第1章 主要介紹UI設計的概念、設計流程、設計方向、設計原則以及設計規(guī)范 ★★☆
第2章 主要介紹Photoshop軟件的基礎知識、圖形的繪制與填充、文本的創(chuàng)建與編輯、蒙版和通道、圖像的色彩調(diào)整以及圖像的特效應用 ★★☆
第3章 主要介紹Illustrator軟件的基礎知識、基礎圖形的繪制與填充、路徑的繪制與編輯、對象的選擇與變換、文本的創(chuàng)建與編輯以及特效與樣式的添加 ★★☆
第4章 主要介紹MasterGo軟件的工作界面、基礎工具、組件和樣式、原型交互、協(xié)同評論以及切圖和導出 ★★☆
第5章 主要介紹UI控件、組件的構成，按鈕的組成、設計類型與設計風格，圖標的類型、設計風格以及設計規(guī)范 ★★★
第6章 主要介紹App的界面類型、界面視覺設計、ios系統(tǒng)和Android系統(tǒng)手機設計規(guī)范 ★★★
第7章 主要介紹網(wǎng)頁常用界面類型、界面設計原則、界面布局以及界面設計規(guī)范 ★★★
第8章 主要介紹PC客戶端軟件界面的常用類型、界面設計原則、界面框架類型以及界面設計規(guī)范 ★★★
本書特色
本書采用案例解析 理論講解 課堂實戰(zhàn) 課后練習 拓展賞析的結構進行編寫，內(nèi)容由淺入深，循序漸進，讓讀者帶著疑問去學習知識，并從實戰(zhàn)應用中激發(fā)學習興趣。
1）專業(yè)性強，知識覆蓋面廣
本書主要圍繞UI設計的相關知識點展開講解，并對不同類型的案例制作進行解析，讓讀者了解并掌握該行業(yè)的一些設計原則與設計要點。
2）帶著疑問學習，提升學習效率
本書首先對案例進行解析，然后再針對案例中的重點工具進行深入講解，可讓讀者帶著問題去學習相關的理論知識，從而有效提升學習效率。此外，本書所有的案例都經(jīng)過了精心的設計，讀者可將這些案例應用到實際工作中。
3）行業(yè)拓展，以更高的視角看行業(yè)發(fā)展
本書在每章結尾部分都安排了拓展賞析板塊，旨在讓讀者掌握了本章相關技能后，還可了解到行業(yè)中一些有意思的設計方案及設計技巧，從而開拓思維。
4）多軟件協(xié)同，呈現(xiàn)完美作品
一份優(yōu)秀的設計作品，通常是由多個軟件共同協(xié)作完成的。UI設計也不例外，在創(chuàng)作本書時，添加了Photoshop、Illustrator、MasterGo軟件協(xié)作章節(jié)，即圖像處理、圖形設計和產(chǎn)品設計，讓讀者可以根據(jù)需要選擇最合適的軟件進行操作。
讀者對象
從事UI設計的工作人員。
高等院校相關專業(yè)的師生。
培訓班中學習版面設計的學員。
對平面設計有著濃厚興趣的愛好者。
想通過知識改變命運的有志青年。
想掌握更多技能的辦公室人員。
本書由鄒平吉編寫，在編寫過程中力求嚴謹細致，但由于編者水平有限，疏漏之處在所難免，望廣大讀者批評指正。
編者
素材文件 課件、教案、視頻
第1章
UI設計基礎知識
1.1UI設計概述 2 1.1.1UI設計的概念 2 1.1.2UI設計的基本原則 3 1.1.3UI設計的流程 6 1.1.4UI設計的常用軟件 7 1.2UI設計方向 8 1.2.1用戶研究 8 1.2.2交互設計 8 1.2.3界面設計 8 1.3UI界面設計原則 9 1.3.1一致性原則 9 1.3.2準確性原則 9 1.3.3可讀性原則 9 1.3.4布局合理化原則 10 1.3.5系統(tǒng)操作合理性原則 10 1.3.6系統(tǒng)響應時間原則 11 1.4UI設計規(guī)范 11 1.4.1文字應用規(guī)范 11 1.4.2圖片應用規(guī)范 12 1.4.3色彩應用規(guī)范 13 課后練習 收集不同類別的UI界面設計 19 拓展賞析 中國的榫卯工藝 20
第2章
圖像處理知識準備
2.1基礎知識詳解 22 2.1.1案例解析：制作九宮格效果 22 2.1.2認識工作界面 23 2.1.3圖像的輔助調(diào)整 24 2.1.4圖像的顯示調(diào)整 27 2.1.5圖像的變形與變換 29 2.1.6圖像的修飾與修復 31 2.2圖形的繪制與填充 35 2.2.1案例解析：重構圖像顯示 35 2.2.2選框工具組 36 2.2.3畫筆工具組 36 2.2.4鋼筆工具組 37 2.2.5形狀工具組 38 2.2.6取樣、填充顏色 39 2.2.7漸變工具 40 2.3文本的創(chuàng)建與編輯 40 2.3.1案例解析：制作電商Banner 40 2.3.2認識文本工具 42 2.3.3創(chuàng)建文本 42 2.3.4編輯文本 43 2.4蒙版和通道 44 2.4.1案例解析：制作圓角方形頭像 44 2.4.2認識通道 45 2.4.3認識蒙版 45 2.5圖像的色彩調(diào)整 46 2.5.1案例解析：提取圖像線稿 46 2.5.2色階 47 2.5.3曲線 47 2.5.4色相/飽和度 48 2.5.5色彩平衡 49 2.5.6去色 49 2.6圖像的特效應用 50 2.6.1案例解析：制作動感飛馳效果 50 2.6.2圖層樣式 50 2.6.3獨立濾鏡組 51 2.6.4特效濾鏡組 53 課堂實戰(zhàn) 制作平鋪背景效果 55 課后練習 制作千圖成像效果 57 拓展賞析 傳世名畫：清明上河圖 58
第3章
圖形元素的設計技能
3.1基礎知識詳解 60 3.1.1案例解析：快速調(diào)整圖像尺寸 60 3.1.2認識工作界面 61 3.1.3畫板的尺寸調(diào)整 63 3.2基礎圖形的繪制與填充 63 3.2.1案例解析：繪制卡通云朵 63 3.2.2繪制線段和網(wǎng)格 64 3.2.3繪制幾何形狀 65 3.2.4構建新的形狀 67 3.2.5設置填充與描邊 68 3.3路徑的繪制與編輯 72 3.3.1案例解析：繪制手賬本簡筆畫 72 3.3.2繪制路徑 73 3.3.3調(diào)整路徑 74 3.3.4編輯路徑 75 3.4對象的選擇與變換 76 3.4.1案例解析：制作流動的山脈 76 3.4.2對象的選擇 78 3.4.3對象的對齊和分布 79 3.4.4對象的排列 80 3.4.5 對象的變換 80 3.4.6 對象的高級編輯 82 3.5文本的創(chuàng)建與編輯 84 3.5.1案例解析：制作網(wǎng)站Banner 84 3.5.2創(chuàng)建文本 87 3.5.3編輯文本 88 3.6特效與樣式的添加 89 3.6.1案例解析：制作多重文字描邊效果 89 3.6.2Illustrator效果 91 3.6.3Photoshop效果 91 3.6.4外觀與圖形樣式 92 課堂實戰(zhàn) 制作拆分文字效果 94 課后練習 制作立體按鈕 95 拓展賞析 中國的水墨動畫 96
第4章
產(chǎn)品設計交互工具
4.1認識MasterGo 98 4.1.1MasterGo工作界面 99 4.1.2視圖選項調(diào)整 100 4.1.3標尺和參考線 101 4.2MasterGo基礎工具 103 4.2.1案例解析：繪制半圓效果 103 4.2.2選擇工具 104 4.2.3容器工具 105 4.2.4形狀工具 106 4.2.5鋼筆工具 107 4.2.6文本工具 108 4.3MasterGo組件和樣式 108 4.3.1案例解析：應用預設樣式 108 4.3.2創(chuàng)建組件 110 4.3.3應用預設組件 111 4.3.4創(chuàng)建樣式 111 4.4MasterGo原型交互 114 4.4.1案例解析：原型內(nèi)容的固定與滾動 114 4.4.2了解原型模式 116 4.4.3交互觸發(fā)和動作 117 4.4.4交互動畫和效果 118 4.4.5溢出行為 119 4.4.6約束設置 119 4.4.7原型演示 119 4.5MasterGo協(xié)同評論 120 4.5.1文件分享 120 4.5.2了解標注模式 121 4.5.3評論工具 122 4.6MasterGo切圖和導出 123 4.6.1創(chuàng)建切圖 123 4.6.2導出預設 123 4.6.3導出Sketch格式 124 課堂實戰(zhàn) 制作網(wǎng)站登錄界面 125 課后練習 制作App首頁界面 127 拓展賞析 中國喜慶的裝飾藝術：年畫 128
第5章
組件與圖標設計
5.1 UI的控件、組件 130 5.1.1UI控件詳解 130 5.1.2UI組件詳解 131 5.2按鈕的設計 133 5.2.1按鈕的組成 133 5.2.2按鈕的設計類型 133 5.2.3按鈕的設計風格 136 5.3圖標的設計 137 5.3.1圖標的類型 137 5.3.2圖標的設計風格 138 5.3.3圖標的設計規(guī)范 140 課堂實戰(zhàn) 音樂應用圖標設計 143 課后練習 制作便簽圖標 148 拓展賞析 中國古代三大印花工藝 149
第6章
App界面設計
6.1App常用界面類型 152 6.1.1閃屏頁 152 6.1.2引導頁 153 6.1.3注冊登錄頁 154 6.1.4空白頁 155 6.1.5首頁 155 6.1.6個人中心頁 157 6.2App界面視覺設計 159 6.2.1顏色規(guī)范 160 6.2.2圖片規(guī)范 161 6.2.3邊距和間距 161 6.3ios設計規(guī)范指南 162 6.3.1界面尺寸 162 6.3.2文字規(guī)范 164 6.4Android設計規(guī)范指南 165 6.4.1界面尺寸 165 6.4.2文字規(guī)范 166 課堂實戰(zhàn) 音樂App界面設計 167 課后練習 制作App首頁界面 174 拓展賞析 中國傳統(tǒng)玩具 175
第7章
網(wǎng)頁界面設計
7.1網(wǎng)頁常用界面類型 178 7.1.1首頁 178 7.1.2欄目頁 179 7.1.3詳情頁 179 7.1.4專題頁 180 7.2網(wǎng)頁界面設計詳解 181 7.2.1網(wǎng)頁設計原則 182 7.2.2網(wǎng)頁的界面布局 184 7.3網(wǎng)頁界面設計規(guī)范 187 7.3.1界面尺寸 188 7.3.2字體規(guī)范 189 7.3.3顏色規(guī)范 190 7.3.4圖片規(guī)范 190 課堂實戰(zhàn) 音樂網(wǎng)站設計 191 課后練習 制作家居網(wǎng)站界面 201 拓展賞析 中國四大國粹 204
第8章
軟件界面設計
8.1軟件界面常用類型 206 8.1.1啟動頁 206 8.1.2著陸頁 206 8.1.3集合頁 207 8.1.4主/細節(jié)頁 207 8.1.5詳細信息頁 207 8.1.6表單頁 208 8.2軟件界面設計詳解 208 8.2.1軟件界面設計原則 209 8.2.2軟件界面框架類型 210 8.3軟件界面設計規(guī)范 212 8.3.1界面尺寸 212 8.3.2字體規(guī)范 213 8.3.3圖標規(guī)范 215 課堂實戰(zhàn) 音樂軟件界面設計 215 課后練習 制作視覺設計平臺軟件界面 226 拓展賞析 中國名山 227 參考文獻 228
書單推薦
