本書是關(guān)于UI設(shè)計(jì)的入門書籍，主要講解以移動(dòng)智能終端為主的界面設(shè)計(jì)，內(nèi)容包括理論基礎(chǔ)、案例分析、軟件詳解、實(shí)戰(zhàn)案例訓(xùn)練、作品集設(shè)計(jì)五個(gè)部分。第一部分對理論知識(shí)進(jìn)行梳理；第二部分通過案例分析，培養(yǎng)讀者的審美與設(shè)計(jì)思維；第三部分對軟件的實(shí)際操作進(jìn)行了講解；第四部分結(jié)合具體項(xiàng)目進(jìn)行實(shí)戰(zhàn)演練，將理論應(yīng)用于實(shí)際工作中，幫助讀者快速掌握界面設(shè)計(jì)思維與方法；第五部分講解如何利用高質(zhì)量作品集展示自己的設(shè)計(jì)水準(zhǔn)，從而獲得工作機(jī)會(huì)。
書中使用Figma與Principle兩款軟件進(jìn)行UI設(shè)計(jì)教學(xué)，實(shí)現(xiàn)界面從低保真原型到高保真視覺及交互效果的設(shè)計(jì)過程。其中Figma是一款時(shí)下流行的基于Web的云應(yīng)用UI設(shè)計(jì)工具，支持多人協(xié)作、云端實(shí)時(shí)保存，具有原型設(shè)計(jì)、UI設(shè)計(jì)等功能，不僅適用于獨(dú)立設(shè)計(jì)師，還便于多人設(shè)計(jì)團(tuán)隊(duì)在線上協(xié)作。目前，其市場占有率正在持續(xù)攀升，也適合作為一款簡單易懂的UI設(shè)計(jì)入門軟件投入教學(xué)。Principle是一款交互原型與動(dòng)效設(shè)計(jì)軟件，操作簡單，便于對移動(dòng)端App進(jìn)行輕量級的交互動(dòng)效設(shè)計(jì)。本書旨在幫助入門級設(shè)計(jì)師構(gòu)建Figma Principle的UI設(shè)計(jì)生態(tài)圈，系統(tǒng)地學(xué)習(xí)從理論到實(shí)戰(zhàn)的UI設(shè)計(jì)知識(shí)和技能。本書是從基本的設(shè)計(jì)思維和方法入手，逐步深入到具體的設(shè)計(jì)工具和實(shí)戰(zhàn)案例，幫助讀者全面提升自己的設(shè)計(jì)能力。
本書內(nèi)容布局合理并配套了教學(xué)視頻，提煉了界面設(shè)計(jì)中的要點(diǎn)，將設(shè)計(jì)思維與實(shí)戰(zhàn)訓(xùn)練相結(jié)合。本書不僅僅是一本教材，更是一本面向就業(yè)的實(shí)戰(zhàn)指南。通過對本書系統(tǒng)化的學(xué)習(xí)，能使讀者掌握從設(shè)計(jì)思維到工具應(yīng)用的完整的知識(shí)體系，獲得獨(dú)立完成UI設(shè)計(jì)項(xiàng)目的能力。本書可作為藝術(shù)設(shè)計(jì)類相關(guān)專業(yè)院校師生的參考教材或教參，還可作為希望提升技能的新人設(shè)計(jì)師的讀物。
劉月蕊，東華大學(xué)副教授，1970年生，籍貫山東，1994年畢業(yè)于蘇州大學(xué)藝術(shù)學(xué)院（原蘇州絲綢工學(xué)院），獲學(xué)士學(xué)位。2003年畢業(yè)于東華大學(xué)服裝藝術(shù)學(xué)院，獲碩士學(xué)位。主要研究方向：數(shù)字媒體藝術(shù)設(shè)計(jì)。從事相關(guān)教學(xué)與專業(yè)領(lǐng)域研究30年，出版多部教材，著作，發(fā)表高水平論文20余篇，主持多項(xiàng)省部級項(xiàng)目，指導(dǎo)學(xué)生參加比賽多次獲重要獎(jiǎng)項(xiàng)。曾與盛趣網(wǎng)絡(luò)、幻維數(shù)碼等多家互聯(lián)網(wǎng)企業(yè)、設(shè)計(jì)公司開展產(chǎn)學(xué)研合作，有著豐富的教學(xué)與實(shí)踐經(jīng)驗(yàn)。現(xiàn)兼任中國高等院校影視學(xué)會(huì)動(dòng)畫與數(shù)字媒體藝術(shù)專業(yè)委員會(huì)理事；中國高等院校影視學(xué)會(huì)會(huì)員；學(xué)位中心評審專家。
王培栩，女，2000年生于上海，東華大學(xué)設(shè)計(jì)學(xué)學(xué)術(shù)型碩士。主要研究方向：用戶體驗(yàn)與交互設(shè)計(jì)，在讀期間長期實(shí)習(xí)于攜程產(chǎn)品工作，曾負(fù)責(zé)春運(yùn)大促活動(dòng)、從0-1的百科類C端產(chǎn)品等項(xiàng)目。有著豐富的用戶體驗(yàn)設(shè)計(jì)經(jīng)驗(yàn)。曾獲國家獎(jiǎng)學(xué)金以及大廣賽全國一等獎(jiǎng)、米蘭設(shè)計(jì)周全國二等獎(jiǎng)等多個(gè)設(shè)計(jì)獎(jiǎng)項(xiàng)，。
盧芷儀，女，2000年生于福建福州，東華大學(xué)藝術(shù)設(shè)計(jì)專業(yè)碩士。主要研究方向：用戶體驗(yàn)與交互設(shè)計(jì)，在讀期間曾實(shí)習(xí)于愛奇藝、百度、玩出夢想等多家互聯(lián)網(wǎng)企業(yè)，擁有豐富的體驗(yàn)設(shè)計(jì)經(jīng)驗(yàn)。曾獲上海市優(yōu)秀畢業(yè)生、東華大學(xué)獎(jiǎng)學(xué)金等榮譽(yù)獎(jiǎng)勵(lì)，設(shè)計(jì)作品多次獲得全國性賽事獎(jiǎng)項(xiàng)。
目錄
1 UI 設(shè)計(jì)的基礎(chǔ)知識(shí)
1.1 UI 與UX 008
1.2 移動(dòng)端、PC 端、游戲端及其他端 008
1.3 B 端、C 端、G 端 013
1.4 UI 設(shè)計(jì)師的工作架構(gòu) 013
1.5 最全UI 設(shè)計(jì)流程 015
1.5.1 頭腦風(fēng)暴 016
1.5.2 用戶調(diào)研 017
1.5.3 用戶畫像 017
1.5.4 競品分析 018
1.5.5 信息架構(gòu) 018
1.5.6 用戶故事 019
1.5.7 用戶旅程圖 020
1.5.8 線框圖 021
1.5.9 低保真原型 021
1.5.10 高保真原型 022
1.5.11 設(shè)計(jì)審核 023
1.5.12 設(shè)計(jì)交付 023
1.5.13 設(shè)計(jì)走查與UI 驗(yàn)收 024
1.5.14 輔助上線 024
1.5.15 迭代優(yōu)化 025
1.6 UI 設(shè)計(jì)師技能樹 025
1.6.1 視覺設(shè)計(jì)能力（★） 025
1.6.2 用戶體驗(yàn)感知能力（★） 026
1.6.3 代碼邏輯能力（▲輔助） 026
1.6.4 溝通能力（▲輔助） 027
1.6.5 創(chuàng)意思維能力（●加分） 027
1.6.6 趨勢觀察能力（●加分） 027
1.7 UI 設(shè)計(jì)師常用軟件 028
1.7.1 常用軟件介紹 028
1.7.2 為什么要打造Figma Principle 的生態(tài)圈 029
1.8 優(yōu)秀設(shè)計(jì)師的工作技巧 029
1.8.1 工作排期合理分配自己的工作時(shí)間 029
1.8.2 AB 測試通過數(shù)據(jù)來衡量設(shè)計(jì)成果 030
2 什么是好UI 的設(shè)計(jì)
2.1 用戶體驗(yàn)用戶中心設(shè)計(jì) 033
2.2 好的UI 設(shè)計(jì) 034
2.3 優(yōu)秀案例 035
2.3.1 米家生態(tài)閉環(huán) 035
2.3.2(Not Boring) Habits正向反饋 037
2.3.3Airbnb氛圍留白 037
2.4 選A 還是選B ？界面設(shè)計(jì)局部案例練習(xí) 040
3 軟件詳解（figma Principle）
3.1 Figma 050
3.1.1 進(jìn)入Figma 的世界 050
3.1.2 繪制精美的圖標(biāo) 099
3.1.3 如何使用插件 106
3.1.4 UED 常用網(wǎng)站 112
3.1.5 制作一個(gè)完整的頁面 117
3.1.6 如何制作交互原型 123
3.1.7 移動(dòng)端Figma App 126
3.1.8 Figma 中的進(jìn)階技巧 126
3.1.9 Figma 常用快捷鍵對照表 130
3.2 Principle 133
3.2.1 初識(shí)Principle 133
3.2.2 Principle 的動(dòng)效原理 137
3.2.3 從Figma 中導(dǎo)入文件 139
3.2.4 交互與事件 140
3.2.5 讓按鈕變得生動(dòng) 142
3.2.6 制作一個(gè)有趣的Loading 界面 144
3.2.7 滑動(dòng)與轉(zhuǎn)場 146
3.2.8 Principle 常用快捷鍵對照表 150
4 交互設(shè)計(jì)實(shí)戰(zhàn)訓(xùn)練
4.1 前期調(diào)研 154
4.1.1 市場調(diào)研 154
4.1.2 用戶調(diào)研 154
4.1.3 用戶畫像 158
4.1.4 競品分析 158
4.1.5 產(chǎn)品定位 166
4.2 梳理交互流程 166
4.2.1 信息架構(gòu) 166
4.2.2 用戶旅程圖 167
4.3 繪制線框圖 169
4.3.1首頁線框圖 169
4.3.2視頻頁面線框圖 170
4.3.3收音機(jī)- 聽書頁面線框圖 170
4.3.4 收音機(jī)- 戲曲頁面線框圖 171
4.3.5 收音機(jī)- 廣播頁面線框圖 171
4.3.6 我的頁面線框圖 171
4.3.7 我的- 收藏頁面線框圖 172
4.3.8 我的- 福利中心頁面線框圖 172
4.3.9 新聞- 搜索頁面線框圖 173
4.3.10 語音助手頁面線框圖 173
4.4 確定界面風(fēng)格 174
4.4.1 總結(jié)關(guān)鍵詞 174
4.4.2 整理情緒板 174
4.5 完成UI 設(shè)計(jì)稿 175
4.5.1 配色 175
4.5.2 字體、字號、字重 176
4.5.3 主要界面設(shè)計(jì) 176
4.5.4 其他界面設(shè)計(jì) 185
4.5.5 切圖與標(biāo)注 186
4.6 動(dòng)效制作 186
5 作品集制作
5.1 作品集是什么 195
5.2 作品集框架設(shè)計(jì) 195
5.3 如何用Figma 制作一本好的作品集 196
書單推薦
