包邮交互思维与实战:FIGMA+PRINCIPLE UI设计实用教程

目录

1 UI 设计的基础知识

1.1 UI 与UX 008

1.2 移动端、PC 端、游戏端及其他端 008

1.3 B 端、C 端、G 端 013

1.4 UI 设计师的工作架构 013

1.5 *全UI 设计流程 015

1.5.1 头脑风暴 016

1.5.2 用户调研 017

1.5.3 用户画像 017

1.5.4 竞品分析 018

1.5.5 信息架构 018

1.5.6 用户故事 019

1.5.7 用户旅程图 020

1.5.8 线框图 021

1.5.9 低保真原型 021

1.5.10 高保真原型 022

1.5.11 设计审核 023

1.5.12 设计交付 023

1.5.13 设计走查与UI 验收 024

1.5.14 辅助上线 024

1.5.15 迭代优化 025

1.6 UI 设计师技能树 025

1.6.1 视觉设计能力（★） 025

1.6.2 用户体验感知能力（★） 026

1.6.3 代码逻辑能力（▲辅助） 026

1.6.4 沟通能力（▲辅助） 027

1.6.5 创意思维能力（●加分） 027

1.6.6 趋势观察能力（●加分） 027

1.7 UI 设计师常用软件 028

1.7.1 常用软件介绍 028

1.7.2 为什么要打造Figma Principle 的生态圈 029

1.8 优秀设计师的工作技巧 029

1.8.1 工作排期——合理分配自己的工作时间 029

1.8.2 AB 测试——通过数据来衡量设计成果 030

2 什么是好UI 的设计

2.1 用户体验——用户中心设计 033

2.2 好的UI 设计 034

2.3 优秀案例 035

2.3.1 米家——生态闭环 035

2.3.2(Not Boring) Habits——正向反馈 037

2.3.3“Airbnb”——氛围留白 037

2.4 选A 还是选B ？——界面设计局部案例练习 040

3 软件详解（figma Principle）

3.1 Figma 050

3.1.1 进入Figma 的世界 050

3.1.2 绘制精美的图标 099

3.1.3 如何使用插件 106

3.1.4 UED 常用网站 112

3.1.5 制作一个完整的页面 117

3.1.6 如何制作交互原型 123

3.1.7 移动端Figma App 126

3.1.8 Figma 中的进阶技巧 126

3.1.9 Figma 常用快捷键对照表 130

3.2 Principle 133

3.2.1 初识Principle 133

3.2.2 Principle 的动效原理 137

3.2.3 从Figma 中导入文件 139

3.2.4 交互与事件 140

3.2.5 让按钮变得生动 142

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

3.2.7 滑动与转场 146

3.2.8 Principle 常用快捷键对照表 150

4 交互设计实战训练

4.1 前期调研 154

4.1.1 市场调研 154

4.1.2 用户调研 154

4.1.3 用户画像 158

4.1.4 竞品分析 158

4.1.5 产品定位 166

4.2 梳理交互流程 166

4.2.1 信息架构 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 确定界面风格 174

4.4.1 总结关键词 174

4.4.2 整理情绪板 174

4.5 完成UI 设计稿 175

4.5.1 配色 175

4.5.2 字体、字号、字重 176

4.5.3 主要界面设计 176

4.5.4 其他界面设计 185

4.5.5 切图与标注 186

4.6 动效制作 186

5 作品集制作

5.1 作品集是什么 195

5.2 作品集框架设计 195

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