中圖網(wǎng)小程序
一鍵登錄
更方便
Figma+Framer打造更好的交互設(shè)計(jì) 版權(quán)信息
- ISBN：9787115583611
- 條形碼：9787115583611 ; 978-7-115-58361-1
- 裝幀：一般膠版紙
- 冊數(shù)：暫無
- 重量：暫無
- 所屬分類：>
Figma+Framer打造更好的交互設(shè)計(jì) 本書特色
1.通過Figma和Framer介紹交互設(shè)計(jì)及多人實(shí)時(shí)協(xié)作設(shè)計(jì)，詳細(xì)的圖文說明+清晰的場景演示；2.提供案例素材文件和效果源文件，供讀者上手練習(xí)。配套在線視頻，掃碼即可下載或在線觀看；3.附贈兩套設(shè)計(jì)師測試題，幫助讀者把握自身特點(diǎn)和設(shè)計(jì)風(fēng)格，形成個(gè)人設(shè)計(jì)特色。
Figma+Framer打造更好的交互設(shè)計(jì) 內(nèi)容簡介
本書對Figma和Framer的使用方法進(jìn)行了詳細(xì)講解，為讀者提供詳細(xì)的圖文說明，包括軟件基礎(chǔ)操作、使用團(tuán)隊(duì)組件庫和界面設(shè)計(jì)等。本書第1、2、3章講解Figma的使用，第4、5章講解Figma社區(qū)和團(tuán)隊(duì)協(xié)作，第6章講解界面設(shè)計(jì)，第7章講解Framer的使用方法。本書附贈案例學(xué)習(xí)文件和在線視頻，便于讀者學(xué)習(xí)使用。 本書適合UI/UX設(shè)計(jì)師、設(shè)計(jì)團(tuán)隊(duì)和計(jì)劃進(jìn)入界面設(shè)計(jì)行業(yè)的讀者學(xué)習(xí)與參考。
Figma+Framer打造更好的交互設(shè)計(jì) 目錄
Figma+Framer打造更好的交互設(shè)計(jì)
第 1章 初識Figma
1．1 開啟Figma之旅/11
1．1．1 Figma介紹/11
1．1．2 創(chuàng)建Figma賬戶/12
1．1．3 登錄Figma/14
1．1．4 下載與安裝Figma/14
1．1．5 給手機(jī)安裝Figma Mirror App/16
1．1．6 使用Figma Mirror App預(yù)覽設(shè)計(jì)文件和原型/17
1．2 你是這樣的Figma/19
1．2．1 編輯器介紹/19
1．2．2 創(chuàng)建團(tuán)隊(duì)/24
1．2．3 新建項(xiàng)目/26
1．2．4 新建文件/27
1．2．5 導(dǎo)入Sketch文件/29
1．2．6 將文件導(dǎo)入Figma/30
1．2．7 添加/ 顯示評論/31
1．2．8 分享設(shè)計(jì)文件和原型/31
1．2．9 合作設(shè)計(jì)/33
1．2．10 團(tuán)隊(duì)資源庫/33
練習(xí)： 在“Design System”項(xiàng)目中創(chuàng)建一個(gè)名為“UI Kit”的文件/34
第 2章 Figma基礎(chǔ)
2．1 文件瀏覽器/36
2．1．1 了解文件瀏覽器/36
2．1．2 查看文件/38
2．1．3 管理*近瀏覽的文件/39
2．1．4 在草稿、項(xiàng)目和賬戶中移動文件/40
2．2 關(guān)于文件的那些事兒/40
2．2．1 Figma中的文件/41
2．2．2 Figma中的頁面/41
2．2．3 添加和管理頁面/42
2．2．4 給文件設(shè)置封面/44
2．2．5 修改文件權(quán)限/45
2．2．6 刪除文件/46
2．2．7 恢復(fù)已刪除的文件/46
2．2．8 版本記錄/47
2．3 形狀和工具/48
2．3．1 Figma中的畫框/48
2．3．2 組/51
2．3．3 形狀工具/51
2．3．4 矢量網(wǎng)絡(luò)/57
2．3．5 編輯對象/58
2．3．6 使用縮放工具調(diào)整對象大小/59
2．3．7 將參考線添加到畫布或畫框/60
2．3．8 布爾運(yùn)算/61
實(shí)戰(zhàn)：對兩個(gè)矩形分別進(jìn)行5種布爾運(yùn)算/62
2．3．9 蒙版遮罩/63
2．4 圖層/64
2．4．1 批量重命名圖層/64
2．4．2 鎖定和解鎖圖層/66
2．4．3 顯示和隱藏圖層/67
2．4．4 填充/68
2．4．5 陰影和模糊/70
實(shí)戰(zhàn)：制作一個(gè)帶有背景模糊效果的iPhone 8導(dǎo)航欄/73
2．4．6 混合模式/74
2．4．7 約束/75
2．4．8 布局網(wǎng)格/78
2．4．9 約束與布局網(wǎng)格的結(jié)合使用/83
實(shí)戰(zhàn)：給移動端的頂層畫框設(shè)置布局網(wǎng)格/84
2．5 顏色/85
2．5．1 配置顏色/85
2．5．2 查看和調(diào)整顏色/86
2．5．3 顏色吸取工具/87
2．6 文本/88
2．6．1 文本屬性/88
2．6．2 美化文本/93
2．6．3 給文本添加鏈接、項(xiàng)目符號、圖標(biāo)字體/94
2．6．4 啟用本地字體/98
2．6．5 管理缺少的字體/98
2．6．6 將文本轉(zhuǎn)換為矢量路徑/99
2．7 圖片/101
2．7．1 添加圖片/101
2．7．2 將GIF圖片添加到原型/103
2．7．3 批量添加圖片/103
2．7．4 裁剪圖片/105
2．7．5 調(diào)整圖片屬性/105
2．8 排版/111
2．8．1 選擇圖層或?qū)ο?111
2．8．2 利用圖層順序調(diào)整圖層的縱向位置/113
2．8．3 對齊/114
2．8．4 整理/115
2．8．5 調(diào)整對象的位置和尺寸/115
2．8．6 測量距離/117
2．8．7 對象之間的關(guān)系/118
2．8．8 使用智能選擇排列對象/119
2．8．9 使用自動布局創(chuàng)建動態(tài)框架/122
第3章 Figma進(jìn)階
3．1 樣式/130
3．1．1 了解樣式/130
3．1．2 創(chuàng)建顏色、文本、效果和網(wǎng)格樣式/130
3．1．3 將樣式應(yīng)用到對象上/131
3．1．4 管理和共享樣式/133
實(shí)戰(zhàn)：創(chuàng)建帶有文字、顏色、效果和網(wǎng)格樣式的文件，并發(fā)布到團(tuán)隊(duì)組件庫/139
3．2 組件和變體/140
3．2．1 創(chuàng)建組件/141
實(shí)戰(zhàn)：創(chuàng)建“單選框”組件/143
3．2．2 創(chuàng)建變體/144
3．2．3 命名和整理組件/155
3．2．4 創(chuàng)建組件的實(shí)例/156
3．2．5 切換組件的實(shí)例/157
3．2．6 組件和實(shí)例之間的“秘密”/159
3．3 原型/161
3．3．1 緩動/161
3．3．2 基礎(chǔ)原型/164
3．3．3 設(shè)置展示原型的設(shè)備和起點(diǎn)/166
3．3．4 觸發(fā)/168
3．3．5 動作/170
3．3．6 動畫/171
3．3．7 構(gòu)建完善的交互原型/172
3．3．8 固定滾動位置/175
3．3．9 溢出行為/176
3．3．10 智能動畫/179
3．3．11 疊加原型/182
實(shí)戰(zhàn)：創(chuàng)建疊加層/185
3．3．12 分享原型/185
3．3．13 在移動設(shè)備上查看原型/186
3．3．14 給原型添加評論/186
3．4 導(dǎo)出/188
3．4．1 導(dǎo)出PNG、JPG、SVG或PDF文件/188
3．4．2 圖標(biāo)切片的命名規(guī)則推薦/191
第4章 社區(qū)
4．1 插件/194
4．1．1 查找并安裝插件/194
4．1．2 在編輯器中使用插件/196
4．1．3 管理插件/198
4．2 社區(qū)/200
4．2．1 瀏覽社區(qū)/200
4．2．2 使用社區(qū)文件/202
4．2．3 構(gòu)建自己的社區(qū)頁面/203
第5章 團(tuán)隊(duì)協(xié)作
5．1 團(tuán)隊(duì)組件庫/207
5．1．1 將組件和樣式發(fā)布到團(tuán)隊(duì)組件庫/207
5．1．2 從團(tuán)隊(duì)組件庫中刪除文件/209
5．1．3 從已發(fā)布的團(tuán)隊(duì)組件庫中刪除部分樣式和組件/210
5．2 檢查面板的使用/211
5．2．1 了解檢查面板/212
5．2．2 觀察模式/214
第6章 使用Figma設(shè)計(jì)頁面
6．1 基礎(chǔ)樣式和約束規(guī)則/216
6．1．1 布局網(wǎng)格樣式規(guī)范/216
6．1．2 文本樣式規(guī)范/217
6．1．3 顏色樣式規(guī)范/219
6．1．4 效果樣式規(guī)范/221
6．1．5 間距規(guī)范/223
6．1．6 邊界半徑規(guī)范/224
6．1．7 線條規(guī)范/225
6．1．8 圖標(biāo)規(guī)范/226
6．2 基礎(chǔ)組件/227
6．2．1 按鈕變體組件/228
6．2．2 輸入框變體組件/228
6．2．3 文字組合變體組件/229
6．2．4 卡片變體組件/230
6．2．5 提示變體組件/232
6．2．6 導(dǎo)航欄/232
6．2．7 產(chǎn)品Logo/234
第7章 Framer應(yīng)該這樣用
7．1 儀表盤/236
7．1．1 儀表盤介紹/236
7．1．2 創(chuàng)建新的Framer項(xiàng)目/237
7．1．3 將Figma、Sketch或Framer Desktop文件導(dǎo)入Framer/238
7．1．4 草稿和*近瀏覽的作用/240
7．1．5 項(xiàng)目示例和教程講解/241
7．1．6 善用存檔/242
7．1．7 Framer的團(tuán)隊(duì)功能應(yīng)該怎樣使用/243
7．2 編輯器/247
7．2．1 工具欄/248
7．2．2 畫布/256
7．2．3 圖層面板/259
7．2．4 屬性面板/261
7．3 圖層/266
7．3．1 文本圖層/266
7．3．2 堆疊圖層/268
7．3．3 滾動圖層/270
7．3．4 翻頁圖層/271
7．3．5 圖形圖層/272
7．4 開始設(shè)計(jì)/273
7．4．1 默認(rèn)組件/273
7．4．2 配套包/281
7．4．3 分享顏色/283
7．4．4 模板/284
7．4．5 響應(yīng)式設(shè)計(jì)/285
7．4．6 繪圖模式/286
7．4．7 替換/287
7．5 使用Framer制作原型/288
7．5．1 預(yù)覽/288
7．5．2 動畫編輯器/290
7．5．3 自動過渡/292
7．5．4 魔術(shù)動畫/293
7．5．5 組件畫布/293
7．5．6 在組件畫布中使用變量和變體/294
7．5．7 變量/295
7．5．8 變體/297
Figma快捷鍵/299
Framer快捷鍵/303
第 1章 初識Figma
1．1 開啟Figma之旅/11
1．1．1 Figma介紹/11
1．1．2 創(chuàng)建Figma賬戶/12
1．1．3 登錄Figma/14
1．1．4 下載與安裝Figma/14
1．1．5 給手機(jī)安裝Figma Mirror App/16
1．1．6 使用Figma Mirror App預(yù)覽設(shè)計(jì)文件和原型/17
1．2 你是這樣的Figma/19
1．2．1 編輯器介紹/19
1．2．2 創(chuàng)建團(tuán)隊(duì)/24
1．2．3 新建項(xiàng)目/26
1．2．4 新建文件/27
1．2．5 導(dǎo)入Sketch文件/29
1．2．6 將文件導(dǎo)入Figma/30
1．2．7 添加/ 顯示評論/31
1．2．8 分享設(shè)計(jì)文件和原型/31
1．2．9 合作設(shè)計(jì)/33
1．2．10 團(tuán)隊(duì)資源庫/33
練習(xí)： 在“Design System”項(xiàng)目中創(chuàng)建一個(gè)名為“UI Kit”的文件/34
第 2章 Figma基礎(chǔ)
2．1 文件瀏覽器/36
2．1．1 了解文件瀏覽器/36
2．1．2 查看文件/38
2．1．3 管理*近瀏覽的文件/39
2．1．4 在草稿、項(xiàng)目和賬戶中移動文件/40
2．2 關(guān)于文件的那些事兒/40
2．2．1 Figma中的文件/41
2．2．2 Figma中的頁面/41
2．2．3 添加和管理頁面/42
2．2．4 給文件設(shè)置封面/44
2．2．5 修改文件權(quán)限/45
2．2．6 刪除文件/46
2．2．7 恢復(fù)已刪除的文件/46
2．2．8 版本記錄/47
2．3 形狀和工具/48
2．3．1 Figma中的畫框/48
2．3．2 組/51
2．3．3 形狀工具/51
2．3．4 矢量網(wǎng)絡(luò)/57
2．3．5 編輯對象/58
2．3．6 使用縮放工具調(diào)整對象大小/59
2．3．7 將參考線添加到畫布或畫框/60
2．3．8 布爾運(yùn)算/61
實(shí)戰(zhàn)：對兩個(gè)矩形分別進(jìn)行5種布爾運(yùn)算/62
2．3．9 蒙版遮罩/63
2．4 圖層/64
2．4．1 批量重命名圖層/64
2．4．2 鎖定和解鎖圖層/66
2．4．3 顯示和隱藏圖層/67
2．4．4 填充/68
2．4．5 陰影和模糊/70
實(shí)戰(zhàn)：制作一個(gè)帶有背景模糊效果的iPhone 8導(dǎo)航欄/73
2．4．6 混合模式/74
2．4．7 約束/75
2．4．8 布局網(wǎng)格/78
2．4．9 約束與布局網(wǎng)格的結(jié)合使用/83
實(shí)戰(zhàn)：給移動端的頂層畫框設(shè)置布局網(wǎng)格/84
2．5 顏色/85
2．5．1 配置顏色/85
2．5．2 查看和調(diào)整顏色/86
2．5．3 顏色吸取工具/87
2．6 文本/88
2．6．1 文本屬性/88
2．6．2 美化文本/93
2．6．3 給文本添加鏈接、項(xiàng)目符號、圖標(biāo)字體/94
2．6．4 啟用本地字體/98
2．6．5 管理缺少的字體/98
2．6．6 將文本轉(zhuǎn)換為矢量路徑/99
2．7 圖片/101
2．7．1 添加圖片/101
2．7．2 將GIF圖片添加到原型/103
2．7．3 批量添加圖片/103
2．7．4 裁剪圖片/105
2．7．5 調(diào)整圖片屬性/105
2．8 排版/111
2．8．1 選擇圖層或?qū)ο?111
2．8．2 利用圖層順序調(diào)整圖層的縱向位置/113
2．8．3 對齊/114
2．8．4 整理/115
2．8．5 調(diào)整對象的位置和尺寸/115
2．8．6 測量距離/117
2．8．7 對象之間的關(guān)系/118
2．8．8 使用智能選擇排列對象/119
2．8．9 使用自動布局創(chuàng)建動態(tài)框架/122
第3章 Figma進(jìn)階
3．1 樣式/130
3．1．1 了解樣式/130
3．1．2 創(chuàng)建顏色、文本、效果和網(wǎng)格樣式/130
3．1．3 將樣式應(yīng)用到對象上/131
3．1．4 管理和共享樣式/133
實(shí)戰(zhàn)：創(chuàng)建帶有文字、顏色、效果和網(wǎng)格樣式的文件，并發(fā)布到團(tuán)隊(duì)組件庫/139
3．2 組件和變體/140
3．2．1 創(chuàng)建組件/141
實(shí)戰(zhàn)：創(chuàng)建“單選框”組件/143
3．2．2 創(chuàng)建變體/144
3．2．3 命名和整理組件/155
3．2．4 創(chuàng)建組件的實(shí)例/156
3．2．5 切換組件的實(shí)例/157
3．2．6 組件和實(shí)例之間的“秘密”/159
3．3 原型/161
3．3．1 緩動/161
3．3．2 基礎(chǔ)原型/164
3．3．3 設(shè)置展示原型的設(shè)備和起點(diǎn)/166
3．3．4 觸發(fā)/168
3．3．5 動作/170
3．3．6 動畫/171
3．3．7 構(gòu)建完善的交互原型/172
3．3．8 固定滾動位置/175
3．3．9 溢出行為/176
3．3．10 智能動畫/179
3．3．11 疊加原型/182
實(shí)戰(zhàn)：創(chuàng)建疊加層/185
3．3．12 分享原型/185
3．3．13 在移動設(shè)備上查看原型/186
3．3．14 給原型添加評論/186
3．4 導(dǎo)出/188
3．4．1 導(dǎo)出PNG、JPG、SVG或PDF文件/188
3．4．2 圖標(biāo)切片的命名規(guī)則推薦/191
第4章 社區(qū)
4．1 插件/194
4．1．1 查找并安裝插件/194
4．1．2 在編輯器中使用插件/196
4．1．3 管理插件/198
4．2 社區(qū)/200
4．2．1 瀏覽社區(qū)/200
4．2．2 使用社區(qū)文件/202
4．2．3 構(gòu)建自己的社區(qū)頁面/203
第5章 團(tuán)隊(duì)協(xié)作
5．1 團(tuán)隊(duì)組件庫/207
5．1．1 將組件和樣式發(fā)布到團(tuán)隊(duì)組件庫/207
5．1．2 從團(tuán)隊(duì)組件庫中刪除文件/209
5．1．3 從已發(fā)布的團(tuán)隊(duì)組件庫中刪除部分樣式和組件/210
5．2 檢查面板的使用/211
5．2．1 了解檢查面板/212
5．2．2 觀察模式/214
第6章 使用Figma設(shè)計(jì)頁面
6．1 基礎(chǔ)樣式和約束規(guī)則/216
6．1．1 布局網(wǎng)格樣式規(guī)范/216
6．1．2 文本樣式規(guī)范/217
6．1．3 顏色樣式規(guī)范/219
6．1．4 效果樣式規(guī)范/221
6．1．5 間距規(guī)范/223
6．1．6 邊界半徑規(guī)范/224
6．1．7 線條規(guī)范/225
6．1．8 圖標(biāo)規(guī)范/226
6．2 基礎(chǔ)組件/227
6．2．1 按鈕變體組件/228
6．2．2 輸入框變體組件/228
6．2．3 文字組合變體組件/229
6．2．4 卡片變體組件/230
6．2．5 提示變體組件/232
6．2．6 導(dǎo)航欄/232
6．2．7 產(chǎn)品Logo/234
第7章 Framer應(yīng)該這樣用
7．1 儀表盤/236
7．1．1 儀表盤介紹/236
7．1．2 創(chuàng)建新的Framer項(xiàng)目/237
7．1．3 將Figma、Sketch或Framer Desktop文件導(dǎo)入Framer/238
7．1．4 草稿和*近瀏覽的作用/240
7．1．5 項(xiàng)目示例和教程講解/241
7．1．6 善用存檔/242
7．1．7 Framer的團(tuán)隊(duì)功能應(yīng)該怎樣使用/243
7．2 編輯器/247
7．2．1 工具欄/248
7．2．2 畫布/256
7．2．3 圖層面板/259
7．2．4 屬性面板/261
7．3 圖層/266
7．3．1 文本圖層/266
7．3．2 堆疊圖層/268
7．3．3 滾動圖層/270
7．3．4 翻頁圖層/271
7．3．5 圖形圖層/272
7．4 開始設(shè)計(jì)/273
7．4．1 默認(rèn)組件/273
7．4．2 配套包/281
7．4．3 分享顏色/283
7．4．4 模板/284
7．4．5 響應(yīng)式設(shè)計(jì)/285
7．4．6 繪圖模式/286
7．4．7 替換/287
7．5 使用Framer制作原型/288
7．5．1 預(yù)覽/288
7．5．2 動畫編輯器/290
7．5．3 自動過渡/292
7．5．4 魔術(shù)動畫/293
7．5．5 組件畫布/293
7．5．6 在組件畫布中使用變量和變體/294
7．5．7 變量/295
7．5．8 變體/297
Figma快捷鍵/299
Framer快捷鍵/303
展開全部
Figma+Framer打造更好的交互設(shè)計(jì) 作者簡介
武斌，美術(shù)學(xué)專業(yè)畢業(yè)，法學(xué)雙學(xué)位，擁有五年互聯(lián)網(wǎng)設(shè)計(jì)經(jīng)驗(yàn)，兩年區(qū)塊鏈交易所設(shè)計(jì)經(jīng)驗(yàn)，一年設(shè)計(jì)團(tuán)隊(duì)管理經(jīng)驗(yàn)?zāi)壳霸谝患液Ｍ饨灰姿?UX Design相關(guān)工作，使用Figma完成網(wǎng)站和App相關(guān)的設(shè)計(jì)，有自己的個(gè)人網(wǎng)站。
書友推薦
- >
史學(xué)評論
- >
回憶愛瑪儂
- >
推拿
- >
詩經(jīng)-先民的歌唱
- >
我與地壇
- >
小考拉的故事-套裝共3冊
- >
經(jīng)典常談
- >
中國人在烏蘇里邊疆區(qū):歷史與人類學(xué)概述
本類暢銷
