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