《UI設(shè)計(jì)技術(shù)與應(yīng)用案例解析》以案例為指引，以理論做鋪墊，全面系統(tǒng)地對(duì)UI設(shè)計(jì)的方法與技巧進(jìn)行了講解。書(shū)中用通俗易懂的語(yǔ)言、圖文并茂的形式對(duì)Photoshop、Illustrator、MasterGo軟件在UI設(shè)計(jì)中的應(yīng)用進(jìn)行了細(xì)致的剖析。 全書(shū)共8章，遵循由淺入深、從基礎(chǔ)知識(shí)到案例進(jìn)階的學(xué)習(xí)原則，對(duì)UI設(shè)計(jì)的基礎(chǔ)知識(shí)、圖像處理相關(guān)知識(shí)、圖形元素的設(shè)計(jì)技能、產(chǎn)品設(shè)計(jì)交互工具、組件與圖標(biāo)設(shè)計(jì)、App界面設(shè)計(jì)、網(wǎng)頁(yè)界面設(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)專(zhuān)業(yè)的教學(xué)用書(shū)，又可作為培訓(xùn)機(jī)構(gòu)以及圖形設(shè)計(jì)愛(ài)好者的參考書(shū)。
《UI設(shè)計(jì)技術(shù)與應(yīng)用案例解析》緊密?chē)@素養(yǎng)、知識(shí)、技能三位一體的教學(xué)目標(biāo)，從愛(ài)國(guó)情懷、社會(huì)責(zé)任、法治思維、職業(yè)素養(yǎng)等維度落實(shí)課程思政；提高學(xué)生的創(chuàng)新意識(shí)、合作意識(shí)和效率意識(shí)，培養(yǎng)學(xué)生精益求精的工匠精神，弘揚(yáng)社會(huì)主義核心價(jià)值觀。
全書(shū)共8章，遵循由淺入深、從基礎(chǔ)知識(shí)到案例進(jìn)階的學(xué)習(xí)原則，對(duì)UI設(shè)計(jì)的基礎(chǔ)知識(shí)、圖像處理相關(guān)知識(shí)、圖形元素的設(shè)計(jì)技能、產(chǎn)品設(shè)計(jì)交互工具、組件與圖標(biāo)設(shè)計(jì)、App界面設(shè)計(jì)、網(wǎng)頁(yè)界面設(shè)計(jì)以及軟件界面設(shè)計(jì)等內(nèi)容進(jìn)行了逐一講解。
UI設(shè)計(jì)是指對(duì)軟件的人機(jī)交互、操作邏輯、界面布局的整體設(shè)計(jì)。其中，界面設(shè)計(jì)是本書(shū)的重點(diǎn)介紹方向。界面設(shè)計(jì)不只是單純的美術(shù)繪畫(huà)，而是需要根據(jù)使用者、使用環(huán)境、使用方式，為最終用戶(hù)進(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í)間，提高工作效率。
隨著軟件版本的不斷升級(jí)，目前Photoshop、Illustrator等軟件的技術(shù)已逐步向智能化、人性化、實(shí)用化方向發(fā)展，旨在讓設(shè)計(jì)師將更多的精力和時(shí)間都用在創(chuàng)新上，以便給大家呈現(xiàn)出更完美的設(shè)計(jì)作品。
本教材從讀者的實(shí)際出發(fā)，以淺顯易懂的語(yǔ)言和與時(shí)俱進(jìn)的圖示來(lái)進(jìn)行說(shuō)明，理論與實(shí)踐并重，注重職業(yè)能力的培養(yǎng)。黨的二十大精神貫穿素養(yǎng)、知識(shí)、技能三位一體的教學(xué)目標(biāo)，從愛(ài)國(guó)情懷、社會(huì)責(zé)任、法治思維、職業(yè)素養(yǎng)等維度落實(shí)課程思政，提高學(xué)生的創(chuàng)新意識(shí)、合作意識(shí)和效率意識(shí)，培養(yǎng)學(xué)生精益求精的工匠精神，弘揚(yáng)社會(huì)主義核心價(jià)值觀。
內(nèi)容概述
本書(shū)共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ǔ)知識(shí)、圖形的繪制與填充、文本的創(chuàng)建與編輯、蒙版和通道、圖像的色彩調(diào)整以及圖像的特效應(yīng)用 ★★☆
第3章 主要介紹Illustrator軟件的基礎(chǔ)知識(shí)、基礎(chǔ)圖形的繪制與填充、路徑的繪制與編輯、對(duì)象的選擇與變換、文本的創(chuàng)建與編輯以及特效與樣式的添加 ★★☆
第4章 主要介紹MasterGo軟件的工作界面、基礎(chǔ)工具、組件和樣式、原型交互、協(xié)同評(píng)論以及切圖和導(dǎo)出 ★★☆
第5章 主要介紹UI控件、組件的構(gòu)成，按鈕的組成、設(shè)計(jì)類(lèi)型與設(shè)計(jì)風(fēng)格，圖標(biāo)的類(lèi)型、設(shè)計(jì)風(fēng)格以及設(shè)計(jì)規(guī)范 ★★★
第6章 主要介紹App的界面類(lèi)型、界面視覺(jué)設(shè)計(jì)、ios系統(tǒng)和Android系統(tǒng)手機(jī)設(shè)計(jì)規(guī)范 ★★★
第7章 主要介紹網(wǎng)頁(yè)常用界面類(lèi)型、界面設(shè)計(jì)原則、界面布局以及界面設(shè)計(jì)規(guī)范 ★★★
第8章 主要介紹PC客戶(hù)端軟件界面的常用類(lèi)型、界面設(shè)計(jì)原則、界面框架類(lèi)型以及界面設(shè)計(jì)規(guī)范 ★★★
本書(shū)特色
本書(shū)采用案例解析 理論講解 課堂實(shí)戰(zhàn) 課后練習(xí) 拓展賞析的結(jié)構(gòu)進(jìn)行編寫(xiě)，內(nèi)容由淺入深，循序漸進(jìn)，讓讀者帶著疑問(wèn)去學(xué)習(xí)知識(shí)，并從實(shí)戰(zhàn)應(yīng)用中激發(fā)學(xué)習(xí)興趣。
1）專(zhuān)業(yè)性強(qiáng)，知識(shí)覆蓋面廣
本書(shū)主要圍繞UI設(shè)計(jì)的相關(guān)知識(shí)點(diǎn)展開(kāi)講解，并對(duì)不同類(lèi)型的案例制作進(jìn)行解析，讓讀者了解并掌握該行業(yè)的一些設(shè)計(jì)原則與設(shè)計(jì)要點(diǎn)。
2）帶著疑問(wèn)學(xué)習(xí)，提升學(xué)習(xí)效率
本書(shū)首先對(duì)案例進(jìn)行解析，然后再針對(duì)案例中的重點(diǎn)工具進(jìn)行深入講解，可讓讀者帶著問(wèn)題去學(xué)習(xí)相關(guān)的理論知識(shí)，從而有效提升學(xué)習(xí)效率。此外，本書(shū)所有的案例都經(jīng)過(guò)了精心的設(shè)計(jì)，讀者可將這些案例應(yīng)用到實(shí)際工作中。
3）行業(yè)拓展，以更高的視角看行業(yè)發(fā)展
本書(shū)在每章結(jié)尾部分都安排了拓展賞析板塊，旨在讓讀者掌握了本章相關(guān)技能后，還可了解到行業(yè)中一些有意思的設(shè)計(jì)方案及設(shè)計(jì)技巧，從而開(kāi)拓思維。
4）多軟件協(xié)同，呈現(xiàn)完美作品
一份優(yōu)秀的設(shè)計(jì)作品，通常是由多個(gè)軟件共同協(xié)作完成的。UI設(shè)計(jì)也不例外，在創(chuàng)作本書(shū)時(shí)，添加了Photoshop、Illustrator、MasterGo軟件協(xié)作章節(jié)，即圖像處理、圖形設(shè)計(jì)和產(chǎn)品設(shè)計(jì)，讓讀者可以根據(jù)需要選擇最合適的軟件進(jìn)行操作。
讀者對(duì)象
從事UI設(shè)計(jì)的工作人員。
高等院校相關(guān)專(zhuān)業(yè)的師生。
培訓(xùn)班中學(xué)習(xí)版面設(shè)計(jì)的學(xué)員。
對(duì)平面設(shè)計(jì)有著濃厚興趣的愛(ài)好者。
想通過(guò)知識(shí)改變命運(yùn)的有志青年。
想掌握更多技能的辦公室人員。
本書(shū)由鄒平吉編寫(xiě)，在編寫(xiě)過(guò)程中力求嚴(yán)謹(jǐn)細(xì)致，但由于編者水平有限，疏漏之處在所難免，望廣大讀者批評(píng)指正。
編者
素材文件 課件、教案、視頻
第1章
UI設(shè)計(jì)基礎(chǔ)知識(shí)
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用戶(hù)研究 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í) 收集不同類(lèi)別的UI界面設(shè)計(jì) 19 拓展賞析 中國(guó)的榫卯工藝 20
第2章
圖像處理知識(shí)準(zhǔn)備
2.1基礎(chǔ)知識(shí)詳解 22 2.1.1案例解析：制作九宮格效果 22 2.1.2認(rèn)識(shí)工作界面 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畫(huà)筆工具組 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)識(shí)文本工具 42 2.3.3創(chuàng)建文本 42 2.3.4編輯文本 43 2.4蒙版和通道 44 2.4.1案例解析：制作圓角方形頭像 44 2.4.2認(rèn)識(shí)通道 45 2.4.3認(rèn)識(shí)蒙版 45 2.5圖像的色彩調(diào)整 46 2.5.1案例解析：提取圖像線(xiàn)稿 46 2.5.2色階 47 2.5.3曲線(xiàn) 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 拓展賞析 傳世名畫(huà)：清明上河圖 58
第3章
圖形元素的設(shè)計(jì)技能
3.1基礎(chǔ)知識(shí)詳解 60 3.1.1案例解析：快速調(diào)整圖像尺寸 60 3.1.2認(rèn)識(shí)工作界面 61 3.1.3畫(huà)板的尺寸調(diào)整 63 3.2基礎(chǔ)圖形的繪制與填充 63 3.2.1案例解析：繪制卡通云朵 63 3.2.2繪制線(xiàn)段和網(wǎng)格 64 3.2.3繪制幾何形狀 65 3.2.4構(gòu)建新的形狀 67 3.2.5設(shè)置填充與描邊 68 3.3路徑的繪制與編輯 72 3.3.1案例解析：繪制手賬本簡(jiǎn)筆畫(huà) 72 3.3.2繪制路徑 73 3.3.3調(diào)整路徑 74 3.3.4編輯路徑 75 3.4對(duì)象的選擇與變換 76 3.4.1案例解析：制作流動(dòng)的山脈 76 3.4.2對(duì)象的選擇 78 3.4.3對(duì)象的對(duì)齊和分布 79 3.4.4對(duì)象的排列 80 3.4.5 對(duì)象的變換 80 3.4.6 對(duì)象的高級(jí)編輯 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 拓展賞析 中國(guó)的水墨動(dòng)畫(huà) 96
第4章
產(chǎn)品設(shè)計(jì)交互工具
4.1認(rèn)識(shí)MasterGo 98 4.1.1MasterGo工作界面 99 4.1.2視圖選項(xiàng)調(diào)整 100 4.1.3標(biāo)尺和參考線(xiàn) 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)畫(huà)和效果 118 4.4.5溢出行為 119 4.4.6約束設(shè)置 119 4.4.7原型演示 119 4.5MasterGo協(xié)同評(píng)論 120 4.5.1文件分享 120 4.5.2了解標(biāo)注模式 121 4.5.3評(píng)論工具 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首頁(yè)界面 127 拓展賞析 中國(guó)喜慶的裝飾藝術(shù)：年畫(huà) 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ì)類(lèi)型 133 5.2.3按鈕的設(shè)計(jì)風(fēng)格 136 5.3圖標(biāo)的設(shè)計(jì) 137 5.3.1圖標(biāo)的類(lèi)型 137 5.3.2圖標(biāo)的設(shè)計(jì)風(fēng)格 138 5.3.3圖標(biāo)的設(shè)計(jì)規(guī)范 140 課堂實(shí)戰(zhàn) 音樂(lè)應(yīng)用圖標(biāo)設(shè)計(jì) 143 課后練習(xí) 制作便簽圖標(biāo) 148 拓展賞析 中國(guó)古代三大印花工藝 149
第6章
App界面設(shè)計(jì)
6.1App常用界面類(lèi)型 152 6.1.1閃屏頁(yè) 152 6.1.2引導(dǎo)頁(yè) 153 6.1.3注冊(cè)登錄頁(yè) 154 6.1.4空白頁(yè) 155 6.1.5首頁(yè) 155 6.1.6個(gè)人中心頁(yè) 157 6.2App界面視覺(jué)設(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) 音樂(lè)App界面設(shè)計(jì) 167 課后練習(xí) 制作App首頁(yè)界面 174 拓展賞析 中國(guó)傳統(tǒng)玩具 175
第7章
網(wǎng)頁(yè)界面設(shè)計(jì)
7.1網(wǎng)頁(yè)常用界面類(lèi)型 178 7.1.1首頁(yè) 178 7.1.2欄目頁(yè) 179 7.1.3詳情頁(yè) 179 7.1.4專(zhuān)題頁(yè) 180 7.2網(wǎng)頁(yè)界面設(shè)計(jì)詳解 181 7.2.1網(wǎng)頁(yè)設(shè)計(jì)原則 182 7.2.2網(wǎng)頁(yè)的界面布局 184 7.3網(wǎng)頁(yè)界面設(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) 音樂(lè)網(wǎng)站設(shè)計(jì) 191 課后練習(xí) 制作家居網(wǎng)站界面 201 拓展賞析 中國(guó)四大國(guó)粹 204
第8章
軟件界面設(shè)計(jì)
8.1軟件界面常用類(lèi)型 206 8.1.1啟動(dòng)頁(yè) 206 8.1.2著陸頁(yè) 206 8.1.3集合頁(yè) 207 8.1.4主/細(xì)節(jié)頁(yè) 207 8.1.5詳細(xì)信息頁(yè) 207 8.1.6表單頁(yè) 208 8.2軟件界面設(shè)計(jì)詳解 208 8.2.1軟件界面設(shè)計(jì)原則 209 8.2.2軟件界面框架類(lèi)型 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) 音樂(lè)軟件界面設(shè)計(jì) 215 課后練習(xí) 制作視覺(jué)設(shè)計(jì)平臺(tái)軟件界面 226 拓展賞析 中國(guó)名山 227 參考文獻(xiàn) 228
書(shū)單推薦
