目錄

1 UI 設(shè)計的基礎(chǔ)知識

1.1 UI 與UX 008

1.2 移動端、PC 端、游戲端及其他端 008

1.3 B 端、C 端、G 端 013

1.4 UI 設(shè)計師的工作架構(gòu) 013

1.5 最全UI 設(shè)計流程 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è)計審核 023

1.5.12 設(shè)計交付 023

1.5.13 設(shè)計走查與UI 驗收 024

1.5.14 輔助上線 024

1.5.15 迭代優(yōu)化 025

1.6 UI 設(shè)計師技能樹 025

1.6.1 視覺設(shè)計能力（★） 025

1.6.2 用戶體驗感知能力（★） 026

1.6.3 代碼邏輯能力（▲輔助） 026

1.6.4 溝通能力（▲輔助） 027

1.6.5 創(chuàng)意思維能力（●加分） 027

1.6.6 趨勢觀察能力（●加分） 027

1.7 UI 設(shè)計師常用軟件 028

1.7.1 常用軟件介紹 028

1.7.2 為什么要打造Figma Principle 的生態(tài)圈 029

1.8 優(yōu)秀設(shè)計師的工作技巧 029

1.8.1 工作排期合理分配自己的工作時間 029

1.8.2 AB 測試通過數(shù)據(jù)來衡量設(shè)計成果 030

2 什么是好UI 的設(shè)計

2.1 用戶體驗用戶中心設(shè)計 033

2.2 好的UI 設(shè)計 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è)計局部案例練習(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 制作一個完整的頁面 117

3.1.6 如何制作交互原型 123

3.1.7 移動端Figma App 126

3.1.8 Figma 中的進(jìn)階技巧 126

3.1.9 Figma 常用快捷鍵對照表 130

3.2 Principle 133

3.2.1 初識Principle 133

3.2.2 Principle 的動效原理 137

3.2.3 從Figma 中導(dǎo)入文件 139

3.2.4 交互與事件 140

3.2.5 讓按鈕變得生動 142

3.2.6 制作一個有趣的Loading 界面 144

3.2.7 滑動與轉(zhuǎn)場 146

3.2.8 Principle 常用快捷鍵對照表 150

4 交互設(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收音機- 聽書頁面線框圖 170

4.3.4 收音機- 戲曲頁面線框圖 171

4.3.5 收音機- 廣播頁面線框圖 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è)計稿 175

4.5.1 配色 175

4.5.2 字體、字號、字重 176

4.5.3 主要界面設(shè)計 176

4.5.4 其他界面設(shè)計 185

4.5.5 切圖與標(biāo)注 186

4.6 動效制作 186

5 作品集制作

5.1 作品集是什么 195

5.2 作品集框架設(shè)計 195

5.3 如何用Figma 制作一本好的作品集 196