《UI設(shè)計技術(shù)與應(yīng)用案例解析》以案例為指引，以理論做鋪墊，全面系統(tǒng)地對UI設(shè)計的方法與技巧進行了講解。書中用通俗易懂的語言、圖文并茂的形式對Photoshop、Illustrator、MasterGo軟件在UI設(shè)計中的應(yīng)用進行了細致的剖析。 全書共8章，遵循由淺入深、從基礎(chǔ)知識到案例進階的學(xué)習(xí)原則，對UI設(shè)計的基礎(chǔ)知識、圖像處理相關(guān)知識、圖形元素的設(shè)計技能、產(chǎn)品設(shè)計交互工具、組件與圖標(biāo)設(shè)計、App界面設(shè)計、網(wǎng)頁界面設(shè)計以及軟件界面設(shè)計等內(nèi)容進行了逐一講解。 《UI設(shè)計技術(shù)與應(yīng)用案例解析》結(jié)構(gòu)合理、內(nèi)容豐富、易學(xué)易懂，既有鮮明的基礎(chǔ)性，也有很強的實用性�！禪I設(shè)計技術(shù)與應(yīng)用案例解析》既可作為高等院校相關(guān)專業(yè)的教學(xué)用書，又可作為培訓(xùn)機構(gòu)以及圖形設(shè)計愛好者的參考書。
《UI設(shè)計技術(shù)與應(yīng)用案例解析》緊密圍繞素養(yǎng)、知識、技能三位一體的教學(xué)目標(biāo)，從愛國情懷、社會責(zé)任、法治思維、職業(yè)素養(yǎng)等維度落實課程思政；提高學(xué)生的創(chuàng)新意識、合作意識和效率意識，培養(yǎng)學(xué)生精益求精的工匠精神，弘揚社會主義核心價值觀。
全書共8章，遵循由淺入深、從基礎(chǔ)知識到案例進階的學(xué)習(xí)原則，對UI設(shè)計的基礎(chǔ)知識、圖像處理相關(guān)知識、圖形元素的設(shè)計技能、產(chǎn)品設(shè)計交互工具、組件與圖標(biāo)設(shè)計、App界面設(shè)計、網(wǎng)頁界面設(shè)計以及軟件界面設(shè)計等內(nèi)容進行了逐一講解。
UI設(shè)計是指對軟件的人機交互、操作邏輯、界面布局的整體設(shè)計。其中，界面設(shè)計是本書的重點介紹方向。界面設(shè)計不只是單純的美術(shù)繪畫，而是需要根據(jù)使用者、使用環(huán)境、使用方式，為最終用戶進行的設(shè)計，是純粹的、科學(xué)性的藝術(shù)設(shè)計。
根據(jù)設(shè)計者需求，可以在Illustrator軟件中設(shè)計矢量圖形，然后調(diào)入Photoshop、MasterGo等軟件中做進一步處理。同時，也可將AI、JPG等文件導(dǎo)入Photoshop軟件中進行編輯處理。除此之外，MasterGo軟件還可以多人協(xié)同地進行產(chǎn)品設(shè)計，從而節(jié)省時間，提高工作效率。
隨著軟件版本的不斷升級，目前Photoshop、Illustrator等軟件的技術(shù)已逐步向智能化、人性化、實用化方向發(fā)展，旨在讓設(shè)計師將更多的精力和時間都用在創(chuàng)新上，以便給大家呈現(xiàn)出更完美的設(shè)計作品。
本教材從讀者的實際出發(fā)，以淺顯易懂的語言和與時俱進的圖示來進行說明，理論與實踐并重，注重職業(yè)能力的培養(yǎng)。黨的二十大精神貫穿素養(yǎng)、知識、技能三位一體的教學(xué)目標(biāo)，從愛國情懷、社會責(zé)任、法治思維、職業(yè)素養(yǎng)等維度落實課程思政，提高學(xué)生的創(chuàng)新意識、合作意識和效率意識，培養(yǎng)學(xué)生精益求精的工匠精神，弘揚社會主義核心價值觀。
內(nèi)容概述
本書共8章，各章內(nèi)容如下。
章 內(nèi)容導(dǎo)讀 難點指數(shù)
第1章 主要介紹UI設(shè)計的概念、設(shè)計流程、設(shè)計方向、設(shè)計原則以及設(shè)計規(guī)范 ★★☆
第2章 主要介紹Photoshop軟件的基礎(chǔ)知識、圖形的繪制與填充、文本的創(chuàng)建與編輯、蒙版和通道、圖像的色彩調(diào)整以及圖像的特效應(yīng)用 ★★☆
第3章 主要介紹Illustrator軟件的基礎(chǔ)知識、基礎(chǔ)圖形的繪制與填充、路徑的繪制與編輯、對象的選擇與變換、文本的創(chuàng)建與編輯以及特效與樣式的添加 ★★☆
第4章 主要介紹MasterGo軟件的工作界面、基礎(chǔ)工具、組件和樣式、原型交互、協(xié)同評論以及切圖和導(dǎo)出 ★★☆
第5章 主要介紹UI控件、組件的構(gòu)成，按鈕的組成、設(shè)計類型與設(shè)計風(fēng)格，圖標(biāo)的類型、設(shè)計風(fēng)格以及設(shè)計規(guī)范 ★★★
第6章 主要介紹App的界面類型、界面視覺設(shè)計、ios系統(tǒng)和Android系統(tǒng)手機設(shè)計規(guī)范 ★★★
第7章 主要介紹網(wǎng)頁常用界面類型、界面設(shè)計原則、界面布局以及界面設(shè)計規(guī)范 ★★★
第8章 主要介紹PC客戶端軟件界面的常用類型、界面設(shè)計原則、界面框架類型以及界面設(shè)計規(guī)范 ★★★
本書特色
本書采用案例解析 理論講解 課堂實戰(zhàn) 課后練習(xí) 拓展賞析的結(jié)構(gòu)進行編寫，內(nèi)容由淺入深，循序漸進，讓讀者帶著疑問去學(xué)習(xí)知識，并從實戰(zhàn)應(yīng)用中激發(fā)學(xué)習(xí)興趣。
1）專業(yè)性強，知識覆蓋面廣
本書主要圍繞UI設(shè)計的相關(guān)知識點展開講解，并對不同類型的案例制作進行解析，讓讀者了解并掌握該行業(yè)的一些設(shè)計原則與設(shè)計要點。
2）帶著疑問學(xué)習(xí)，提升學(xué)習(xí)效率
本書首先對案例進行解析，然后再針對案例中的重點工具進行深入講解，可讓讀者帶著問題去學(xué)習(xí)相關(guān)的理論知識，從而有效提升學(xué)習(xí)效率。此外，本書所有的案例都經(jīng)過了精心的設(shè)計，讀者可將這些案例應(yīng)用到實際工作中。
3）行業(yè)拓展，以更高的視角看行業(yè)發(fā)展
本書在每章結(jié)尾部分都安排了拓展賞析板塊，旨在讓讀者掌握了本章相關(guān)技能后，還可了解到行業(yè)中一些有意思的設(shè)計方案及設(shè)計技巧，從而開拓思維。
4）多軟件協(xié)同，呈現(xiàn)完美作品
一份優(yōu)秀的設(shè)計作品，通常是由多個軟件共同協(xié)作完成的。UI設(shè)計也不例外，在創(chuàng)作本書時，添加了Photoshop、Illustrator、MasterGo軟件協(xié)作章節(jié)，即圖像處理、圖形設(shè)計和產(chǎn)品設(shè)計，讓讀者可以根據(jù)需要選擇最合適的軟件進行操作。
讀者對象
從事UI設(shè)計的工作人員。
高等院校相關(guān)專業(yè)的師生。
培訓(xùn)班中學(xué)習(xí)版面設(shè)計的學(xué)員。
對平面設(shè)計有著濃厚興趣的愛好者。
想通過知識改變命運的有志青年。
想掌握更多技能的辦公室人員。
本書由鄒平吉編寫，在編寫過程中力求嚴謹細致，但由于編者水平有限，疏漏之處在所難免，望廣大讀者批評指正。
編者
素材文件 課件、教案、視頻
第1章
UI設(shè)計基礎(chǔ)知識
1.1UI設(shè)計概述 2 1.1.1UI設(shè)計的概念 2 1.1.2UI設(shè)計的基本原則 3 1.1.3UI設(shè)計的流程 6 1.1.4UI設(shè)計的常用軟件 7 1.2UI設(shè)計方向 8 1.2.1用戶研究 8 1.2.2交互設(shè)計 8 1.2.3界面設(shè)計 8 1.3UI界面設(shè)計原則 9 1.3.1一致性原則 9 1.3.2準(zhǔn)確性原則 9 1.3.3可讀性原則 9 1.3.4布局合理化原則 10 1.3.5系統(tǒng)操作合理性原則 10 1.3.6系統(tǒng)響應(yīng)時間原則 11 1.4UI設(shè)計規(guī)范 11 1.4.1文字應(yīng)用規(guī)范 11 1.4.2圖片應(yīng)用規(guī)范 12 1.4.3色彩應(yīng)用規(guī)范 13 課后練習(xí) 收集不同類別的UI界面設(shè)計 19 拓展賞析 中國的榫卯工藝 20
第2章
圖像處理知識準(zhǔn)備
2.1基礎(chǔ)知識詳解 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圖像的修飾與修復(fù) 31 2.2圖形的繪制與填充 35 2.2.1案例解析：重構(gòu)圖像顯示 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圖像的特效應(yīng)用 50 2.6.1案例解析：制作動感飛馳效果 50 2.6.2圖層樣式 50 2.6.3獨立濾鏡組 51 2.6.4特效濾鏡組 53 課堂實戰(zhàn) 制作平鋪背景效果 55 課后練習(xí) 制作千圖成像效果 57 拓展賞析 傳世名畫：清明上河圖 58
第3章
圖形元素的設(shè)計技能
3.1基礎(chǔ)知識詳解 60 3.1.1案例解析：快速調(diào)整圖像尺寸 60 3.1.2認識工作界面 61 3.1.3畫板的尺寸調(diào)整 63 3.2基礎(chǔ)圖形的繪制與填充 63 3.2.1案例解析：繪制卡通云朵 63 3.2.2繪制線段和網(wǎng)格 64 3.2.3繪制幾何形狀 65 3.2.4構(gòu)建新的形狀 67 3.2.5設(shè)置填充與描邊 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 課后練習(xí) 制作立體按鈕 95 拓展賞析 中國的水墨動畫 96
第4章
產(chǎn)品設(shè)計交互工具
4.1認識MasterGo 98 4.1.1MasterGo工作界面 99 4.1.2視圖選項調(diào)整 100 4.1.3標(biāo)尺和參考線 101 4.2MasterGo基礎(chǔ)工具 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案例解析：應(yīng)用預(yù)設(shè)樣式 108 4.3.2創(chuàng)建組件 110 4.3.3應(yīng)用預(yù)設(shè)組件 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約束設(shè)置 119 4.4.7原型演示 119 4.5MasterGo協(xié)同評論 120 4.5.1文件分享 120 4.5.2了解標(biāo)注模式 121 4.5.3評論工具 122 4.6MasterGo切圖和導(dǎo)出 123 4.6.1創(chuàng)建切圖 123 4.6.2導(dǎo)出預(yù)設(shè) 123 4.6.3導(dǎo)出Sketch格式 124 課堂實戰(zhàn) 制作網(wǎng)站登錄界面 125 課后練習(xí) 制作App首頁界面 127 拓展賞析 中國喜慶的裝飾藝術(shù)：年畫 128
第5章
組件與圖標(biāo)設(shè)計
5.1 UI的控件、組件 130 5.1.1UI控件詳解 130 5.1.2UI組件詳解 131 5.2按鈕的設(shè)計 133 5.2.1按鈕的組成 133 5.2.2按鈕的設(shè)計類型 133 5.2.3按鈕的設(shè)計風(fēng)格 136 5.3圖標(biāo)的設(shè)計 137 5.3.1圖標(biāo)的類型 137 5.3.2圖標(biāo)的設(shè)計風(fēng)格 138 5.3.3圖標(biāo)的設(shè)計規(guī)范 140 課堂實戰(zhàn) 音樂應(yīng)用圖標(biāo)設(shè)計 143 課后練習(xí) 制作便簽圖標(biāo) 148 拓展賞析 中國古代三大印花工藝 149
第6章
App界面設(shè)計
6.1App常用界面類型 152 6.1.1閃屏頁 152 6.1.2引導(dǎo)頁 153 6.1.3注冊登錄頁 154 6.1.4空白頁 155 6.1.5首頁 155 6.1.6個人中心頁 157 6.2App界面視覺設(shè)計 159 6.2.1顏色規(guī)范 160 6.2.2圖片規(guī)范 161 6.2.3邊距和間距 161 6.3ios設(shè)計規(guī)范指南 162 6.3.1界面尺寸 162 6.3.2文字規(guī)范 164 6.4Android設(shè)計規(guī)范指南 165 6.4.1界面尺寸 165 6.4.2文字規(guī)范 166 課堂實戰(zhàn) 音樂App界面設(shè)計 167 課后練習(xí) 制作App首頁界面 174 拓展賞析 中國傳統(tǒng)玩具 175
第7章
網(wǎng)頁界面設(shè)計
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)頁界面設(shè)計詳解 181 7.2.1網(wǎng)頁設(shè)計原則 182 7.2.2網(wǎng)頁的界面布局 184 7.3網(wǎng)頁界面設(shè)計規(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)站設(shè)計 191 課后練習(xí) 制作家居網(wǎng)站界面 201 拓展賞析 中國四大國粹 204
第8章
軟件界面設(shè)計
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軟件界面設(shè)計詳解 208 8.2.1軟件界面設(shè)計原則 209 8.2.2軟件界面框架類型 210 8.3軟件界面設(shè)計規(guī)范 212 8.3.1界面尺寸 212 8.3.2字體規(guī)范 213 8.3.3圖標(biāo)規(guī)范 215 課堂實戰(zhàn) 音樂軟件界面設(shè)計 215 課后練習(xí) 制作視覺設(shè)計平臺軟件界面 226 拓展賞析 中國名山 227 參考文獻 228
書單推薦
