Adobe XD界面設(shè)計(jì)與原型制作教程（全彩）
定 價(jià)：79 元
- 作者：文家齊
- 出版時(shí)間：2019/1/1
- ISBN：9787121373077
- 出 版 社：電子工業(yè)出版社
- 中圖法分類：TP393.092.2
- 頁(yè)碼：240
- 紙張：
- 版次：01
- 開本：16開
本書基于Adobe XD 2019 中文版，全面系統(tǒng)地介紹XD 的基本操作方法和界面設(shè)計(jì)技巧。書中包括界面設(shè)計(jì)的基礎(chǔ)知識(shí)、XD 的簡(jiǎn)介和安裝方法、工具的使用、對(duì)象的創(chuàng)建和編輯、資源管理、圖層管理、重復(fù)網(wǎng)格、響應(yīng)式調(diào)整、導(dǎo)出到After Effects、XD 格式文件轉(zhuǎn)為PSD 格式文件、生成在線鏈接、標(biāo)注、切圖、交互式原型、語(yǔ)音觸發(fā)、自動(dòng)制作動(dòng)畫、實(shí)時(shí)預(yù)覽、常用插件及與第三方軟件協(xié)作等內(nèi)容，使讀者能夠熟悉并掌握XD 的功能和界面設(shè)計(jì)基礎(chǔ)。本書內(nèi)容在多個(gè)實(shí)戰(zhàn)案例的基礎(chǔ)上，增加移動(dòng)端、小程序、網(wǎng)頁(yè)等多個(gè)商業(yè)案例解析，并適當(dāng)穿插有一些技術(shù)專題知識(shí)，使讀者可以快速上手，掌握軟件功能和界面設(shè)計(jì)思路，提升界面設(shè)計(jì)能力。本書包含XD 當(dāng)前版本的全部基礎(chǔ)知識(shí)點(diǎn)，通過(guò)目錄可以清晰地查看并找到需要的知識(shí)點(diǎn)。本書提供的學(xué)習(xí)資源中包含所有案例的視頻文件、實(shí)例源文件及素材文件。本書可作為XD 自學(xué)人員的參考用書使用，也可作為相關(guān)機(jī)構(gòu)的培訓(xùn)教材使用。
文家齊，XD中文網(wǎng)創(chuàng)始人，從2015年至今一直在中國(guó)推廣Adobe XD軟件，為設(shè)計(jì)工作者們提供Adobe XD的素材、資訊和教程，同時(shí)擁有微信公眾號(hào)、多個(gè)QQ群、微信小程序等眾多社群。
目錄
第1章
初識(shí)Adobe XD
1.1?XD的基本介紹 2
1.1.1?XD與同類軟件的區(qū)別 4
1.1.2?位圖與矢量圖的區(qū)別 6
1.1.3?關(guān)于XD的一些其他使用說(shuō)明 6
1.2?XD的安裝與卸載 6
1.2.1?系統(tǒng)要求 6
1.2.2?安裝和卸載 6
1.3?XD的工作界面介紹 8
1.3.1?啟動(dòng)界面 8
1.3.2?設(shè)計(jì)界面 9
1.3.3?菜單欄 10
1.3.4?導(dǎo)航欄 10
1.3.5?設(shè)計(jì)模式 11
1.3.6?工具欄 11
1.3.7?資源/圖層面板 11
1.3.8?畫布和畫板 12
1.3.9?屬性檢查器 12
第2章
XD的基本操作
2.1?文件管理 14
2.1.1 打開一個(gè)文件 14
2.1.2 文件保存 15
2.1.3 文件保存狀態(tài) 15
2.1.4 關(guān)閉文件 15
2.1.5 撤銷和重做 16
2.2?視圖管理 16
2.2.1 放大視圖顯示比例 17
2.2.2 縮小視圖顯示比例 18
2.2.3 縮放視圖至指定顯示比例 19
2.2.4 移動(dòng)視圖 20
2.3?選擇工具 20
2.3.1 多選 20
2.3.2 選擇對(duì)象內(nèi)部的元素 21
2.4?繪制基礎(chǔ)形狀 21
2.4.1 繪制矩形和圓角矩形 21
2.4.2 繪制橢圓和圓 22
2.4.3 繪制直線 23
2.5?鋼筆工具 23
2.5.1 繪制直線 23
2.5.2 繪制曲線 24
2.5.3 編輯路徑 24
2.5.4 禁用錨點(diǎn)對(duì)齊 24
2.6?文本工具 26
2.6.1 點(diǎn)文本 26
2.6.2 區(qū)域文本 26
2.6.3 拼寫檢查 26
2.7?畫板工具 27
2.7.1 增加畫板 27
2.7.2 修改畫板名稱 28
2.7.3 修改畫板尺寸 29
2.8?隱藏的輔助功能 29
2.8.1 距離測(cè)量 29
2.8.2 更智能的參考線 30
2.8.3 自動(dòng)吸附 30
2.9?對(duì)象管理 31
2.9.1 剪切、復(fù)制和粘貼 31
2.9.2 編組 32
2.9.3 鎖定和解鎖對(duì)象 32
2.9.4 隱藏或顯示 33
2.10?圖層面板 33
2.10.1 XD中的圖層面板 33
2.10.2 鎖定/解鎖和顯示/隱藏 34
2.10.3 調(diào)整圖層順序 35
2.10.4 編組 36
2.10.5 搜索和篩選 36
2.10.6 修改圖層名稱 37
2.11?資源面板 37
2.11.1 資源面板界面 38
2.11.2 添加和刪除資源 38
2.11.3 資源重命名 39
2.11.4 修改資源面板中元素的順序 39
2.11.5 符號(hào) 39
2.11.6 高亮顯示 42
第3章
屬性檢查器
3.1?對(duì)齊 44
3.1.1 對(duì)齊工具 44
3.1.2 相對(duì)于畫板對(duì)齊 44
3.1.3 多個(gè)元素對(duì)齊 45
3.1.4 水平分布和垂直分布 45
3.2?重復(fù)網(wǎng)格 46
3.2.1 創(chuàng)建和編輯重復(fù)網(wǎng)格 46
3.2.2 調(diào)整重復(fù)網(wǎng)格中元素的間距 47
3.2.3 編輯重復(fù)網(wǎng)格中的元素 47
3.2.4 批量替換文本 48
3.2.5 批量替換圖片 49
3.2.6 取消重復(fù)網(wǎng)格 50
實(shí) 戰(zhàn) ?音樂App首頁(yè) 50
3.3?布爾運(yùn)算 54
3.3.1 使用布爾運(yùn)算 54
3.3.2 編輯布爾運(yùn)算對(duì)象 54
實(shí) 戰(zhàn) ?繪制一條小魚 55
3.3.3 轉(zhuǎn)換為路徑 61
3.4?常用屬性和工具 61
3.4.1 寬高和坐標(biāo) 61
3.4.2 旋轉(zhuǎn)角度 62
3.4.3 畫板方向設(shè)置 63
3.4.4 翻轉(zhuǎn)工具 63
3.5?文本屬性 64
3.5.1 字體、字號(hào)和字重 64
3.5.2 文本的對(duì)齊方式 65
3.5.3 點(diǎn)文本和區(qū)域文本切換 66
3.5.4 下畫線 67
3.5.5 字符間距、行間距和段落間距 67
3.6?外觀 67
3.6.1 透明度 68
3.6.2 圓角 68
3.6.3 填充純色和漸變 69
實(shí) 戰(zhàn) ?使用漸變 73
3.6.4 描邊 75
3.6.5 陰影 76
實(shí) 戰(zhàn) ?帶有投影的漸變顏色按鈕 77
3.6.6 模糊 79
實(shí) 戰(zhàn) ?登錄頁(yè)設(shè)計(jì) 80
3.7?網(wǎng)格 86
3.7.1 開啟或關(guān)閉網(wǎng)格 86
3.7.2 設(shè)置方形屬性 86
3.7.3 設(shè)置版面屬性 87
3.7.4 存儲(chǔ)為默認(rèn)并使用 88
3.8?使用數(shù)學(xué)計(jì)算 88
3.9?響應(yīng)式調(diào)整大小 89
實(shí) 戰(zhàn) ?響應(yīng)式調(diào)整大小 91
第4章
導(dǎo)入和導(dǎo)出資源
4.1?導(dǎo)入 94
4.1.1 從本地計(jì)算機(jī)中導(dǎo)入 94
4.1.2 打開或?qū)隤SD文件 94
4.1.3 從Photoshop中復(fù)制內(nèi)容 94
4.1.4 從Illustrator 中導(dǎo)入或復(fù)制 95
4.1.5 從Sketch中導(dǎo)入或復(fù)制 95
4.1.6 關(guān)于Creative Cloud Libraries 95
4.2?導(dǎo)出 96
4.2.1 導(dǎo)出的基本操作方法 96
4.2.2 導(dǎo)出PNG文件 97
4.2.3 導(dǎo)出SVG文件 100
4.2.4 導(dǎo)出PDF文件 101
4.2.5 導(dǎo)出JPG文件 101
4.2.6 導(dǎo)出到After Effects 101
4.2.7 將XD文件轉(zhuǎn)為PSD文件 102
第5章
創(chuàng)建可交互式原型
5.1?創(chuàng)建原型 106
5.1.1 設(shè)置首頁(yè) 107
5.1.2 可滾動(dòng)畫板 107
5.1.3 固定元素 108
實(shí) 戰(zhàn) ?創(chuàng)建固定元素可滾動(dòng)原型 108
5.2?鏈接 111
5.2.1 添加跳轉(zhuǎn)鏈接 111
5.2.2 刪除跳轉(zhuǎn)鏈接 112
實(shí) 戰(zhàn) ?交互式原型 113
5.3?觸發(fā) 118
5.3.1 拖移 118
5.3.2 時(shí)間 118
實(shí) 戰(zhàn) ?自動(dòng)播放的輪播圖 119
5.3.3 語(yǔ)音 121
5.4?目標(biāo) 122
5.5?操作 122
5.5.1 自動(dòng)制作動(dòng)畫 123
實(shí) 戰(zhàn) ?循環(huán)旋轉(zhuǎn)動(dòng)畫 124
實(shí) 戰(zhàn) ?輪播圖拖移動(dòng)畫 125
5.5.2 語(yǔ)音播放 133
5.5.3 上一個(gè)畫板 133
5.5.4 過(guò)渡 134
5.5.5 疊加 135
5.6?動(dòng)畫 136
5.6.1 動(dòng)畫中的無(wú)和溶解 136
5.6.2 滑動(dòng)動(dòng)畫 136
5.6.3 推出動(dòng)畫 138
5.7?緩動(dòng) 139
5.8?持續(xù)時(shí)間 140
5.9?粘貼交互 140
第6章
預(yù)覽和共享
6.1?預(yù)覽 142
6.1.1 桌面預(yù)覽 142
6.1.2 使用XD移動(dòng)端預(yù)覽 144
6.2?共享 144 6.2.1 邀請(qǐng)編輯 145 6.2.2 查看和評(píng)論原型鏈接 147 6.2.3 共享以審閱 150 6.2.4 查看設(shè)計(jì)規(guī)范鏈接 155 6.2.5 共享以開發(fā) 162 6.2.6 管理鏈接 163 第7章 插件和第三方工具介紹 7.1?安裝和管理插件 166 7.1.1 安裝插件 166 7.1.2 管理插件 167 7.2?常用插件 168 7.2.1 頭像填充插件UI Faces 168 7.2.2 二維碼生成插件 QR Code Maker
for XD 169
7.2.3 英文大小寫切換插件Change Case 170
7.2.4 圖層批量重命名插件Rename It 171
7.2.5 多邊形插件Polygons 174
7.2.6 圖片填充插件PhotoSplash 176
7.2.7 日歷插件Calendar 177
7.2.8 提取網(wǎng)頁(yè)設(shè)計(jì)規(guī)范插件Mimic 178
7.2.9 圖表生成插件VizzyCharts 178
7.3?第三方工具介紹 183
7.3.1 通過(guò)Axhub Icons快速使用網(wǎng)絡(luò)圖標(biāo) 183
7.3.2 交互原型設(shè)計(jì)工具ProtoPie 184
7.3.3 自動(dòng)標(biāo)注工具PxCook 185
第8章
商業(yè)實(shí)戰(zhàn)項(xiàng)目案例解析
8.1?設(shè)計(jì)規(guī)范介紹 188
8.1.1 iOS設(shè)計(jì)規(guī)范介紹 188
8.1.2 Android設(shè)計(jì)規(guī)范介紹 190
8.1.3 電腦端網(wǎng)頁(yè)設(shè)計(jì)規(guī)范介紹 191
8.2?萬(wàn)聯(lián)數(shù)字藝術(shù)館App設(shè)計(jì)項(xiàng)目實(shí)戰(zhàn) 191
8.2.1 制作首頁(yè) 192
8.2.2 制作文章列表頁(yè) 197
8.2.3 制作文章詳情頁(yè) 199
8.2.4 制作藝術(shù)家列表頁(yè) 202
8.2.5 制作藝術(shù)家個(gè)人主頁(yè) 204
8.2.6 制作交互原型 206
8.3?鮮藝App小程序設(shè)計(jì)項(xiàng)目實(shí)戰(zhàn) 209
8.3.1 制作首頁(yè) 210
8.3.2 制作分類頁(yè) 215
8.3.3 制作課程列表頁(yè) 217
8.3.4 制作課程詳情頁(yè) 219
8.3.5 制作我的學(xué)習(xí)頁(yè) 219
8.3.6 批量替換顏色 221
8.3.7 制作交互原型 222
8.4?XD中文網(wǎng)網(wǎng)頁(yè)項(xiàng)目設(shè)計(jì)實(shí)戰(zhàn) 224
8.4.1 創(chuàng)建文件并設(shè)置網(wǎng)格 224
8.4.2 制作網(wǎng)頁(yè)導(dǎo)航和首屏 225
8.4.3 制作內(nèi)容列表 227
8.4.4 制作網(wǎng)頁(yè)頁(yè)腳 228
附錄
附錄：常用快捷鍵 230
書單推薦
