Figma UI设计技法与思维全解析电子书

内容简介

作者简介

推荐语

作者介绍

前言 移动互联网设计领域的“战国时代”

云应用 趋势？机遇？还是昙花一现？

01 我们要成为怎样的设计师

01-01 风口不在，UI设计师如何自我定位

1．移动互联网依然是朝阳行业

2．行业越成熟，对设计师要求越高

3．不同阶段设计师的目标及定位

01-02 你为什么成长那么慢？什么是UI设计师的核心竞争力

1．一个现象

2．冰山模型

3．你为什么成长那么慢

4．UI设计师的核心竞争力

01-03 UI设计师必备技能分析

1．美学基础知识

2．图形绘制能力

3．版式设计能力

4．工具应用能力

5．自我探索能力与自我学习能力

01-04 UI设计师的思维和方法论

1．面向用户（客户）的设计思维

2．拯救设计师的“方法论”

02 从软件开始放飞自我

02-01 如何选择适合自己的UI设计工具

1．UI设计学习者的工具学习路径

2．一切为我所用：正确认知使用工具的目的

3．顺应设计及工具发展趋势

02-02 Hello新朋友—初识Figma

1．Sketch颠覆者，Figma介绍

2．无须安装，使用体验如本地工具

3．支持自动布局

4．海量插件，无须担心兼容性问题

5．简单分享和协作

6．完善的高保真交互原型创建功能

7．组件功能，让团队中的所有成员保持统一

02-03 Figma基础操作详解之界面篇

1．如何使用Figma

2．认识Figma的操作界面

02-04 Figma基础操作详解之工具篇

1．移动工具与缩放工具

2．Frame与切片工具（Slice）

3．图形绘制工具

4．图片置入工具（Place Image）

5．钢笔工具（路径编辑工具）

6．Figma中的文本工具

7．让Figma支持更多字体

8．创建和复用文本样式

9．将文本转化为路径

10．文本使用问题Q&A

11．拖动工具

12．添加／显示注释工具

02-05 Figma基础操作详解之菜单篇

1．File（文件）菜单

2．Edit（编辑）菜单

3．View（视图）菜单

4．Object（元素）菜单

5．Vector（矢量）菜单

6．Text（文本）菜单

7．Arrange（排列）菜单

8．Plugins（插件）菜单

9．Integration（集成）菜单

10．preference（偏好设置）菜单

02-06 Figma中的特色插件

1．Juuust Handoff：图片离线标注插件

2．Unsplash：图片填充插件

3．Iconify：图片填充插件

4．Content Reel：内容填充插件

5．Autoflow：交互流程添加插件

6．Charts：图表生成插件

7．Vector 3D：样机生成插件

8．SmoothShadow：平滑阴影生成插件

9．Find and Replace：查找替换文本插件

10．Figma Chinese Rename：智能中文命名图层

11．Similayer：全选相同属性的图层

12．Chinese Font Picker：中文字体选择器

13．To Path：附加到路径

14．Mockup：应用画板到透视图形

15．Image Palette：提取图像配色插件

16．Blobs：不规则矢量色块创建插件

17．Humaaans for Figma：免费矢量人物图库

18．Able：色彩对比度测试插件

19．Design Lint：测试设计稿中的各种错误

20．Noise：创建杂点效果

21．TinyImage Compressor：图片压缩插件

22．WireFrame：低保真原型图组件

02-07 那些让你大呼好用的Figma小技巧

1．复制粘贴图层属性

2．快捷拖曳调整数值

3．快捷调整图层透明度

4．一次导入多张图片并放置在对应位置

5．批量重命名图层

6．智能移动排列多个元素

7．全选具有相同属性的元素

8．快速创建扇形（弧形）

9．在Figma中使用Gif动画

10．在属性检查器的数值框中进行数学运算

11．将高保真设计稿转换为低保真线框图

12．旋转复制功能

02-08 界面中的约束与自适应布局

1．什么是约束（Constraints）

2．使用约束（Constraints）创建自适应菜单栏

3．使用约束（Constraints）创建自适应列表

4．创建Auto Layout布局

02-09 Figma交互功能详解

1．创建基本交互效果

2．交互动画效果

3．交互属性调节面板

4．交互动画实例演练

02-10 Figma如何与Sketch及Adobe XD结合使用

1．进行格式转换的原因及必要性

2．从XD转换为Sketch

3．从Figma转换为Sketch

4．从XD转换为Figma

5．从Sketch转换为Figma

6．从Figma转换为XD

7．从Sketch转换为XD

8．各取所需，灵活使用不同软件的特性

02-11 使用Figma完成你的第一页UI设计稿

1．获取iOS设计模板文件

2．在Figma中建立Frame

3．绘制头部背景

4．绘制Tab菜单、搜索图标及轮播图

5．放置金刚区图标

6．“热门精选”栏目

7．菜单栏设计

03 Figma协作功能解析

03-01 在UI设计工作流中活用Figma与产品经理、需求方沟通

1．将设计稿分享给第三方

2．需求方如何协同工作

03-02 UI设计师如何使用Figma与开发工程师无缝对接

1．设计稿前期整理

2．将设计稿分享给开发工程师

3．使用Handoff插件导出离线预览文件

03-03 使用Figma Mirror快速预览UI设计稿

1．使用客户端Figma Mirror预览

2．使用手机浏览器预览

03-04 挽回你的“第一稿”：Figma设计稿版本管理功能

1．浏览设计稿的历史版本

03-05 断网怕不怕？将Figma设计稿保存为本地文件

1．正在使用Figma做设计，突然断网会怎样

2．定期将Figma设计稿保存到本地，以防万一

04 Figma UI设计细节进阶

04-01 Figma图标设计实战：线性图标与Big Sur轻拟物图标绘制

1．不同种类的图标形式

2．运用Figma绘制线性图标实例

3．运用Figma绘制面性图标

4．Figma绘制Big Sur风格轻拟物图标实例

04-02 版式设计练习：UI设计的核心能力

1．布局

2．文字

3．对齐

4．颜色搭配

04-03 UI界面中的金刚区图标：Tab栏图标

1．金刚区图标

2．Tab菜单栏

04-04 启动页设计：用户的第一印象很重要

1．图形化启动页面

2．单Logo启动页面

3．空白启动页面

4．在Figma中设计启动页面

04-05 分清重点：应用首页设计技巧

1．常规应用首页的构成

2．确定页面左右留白

3．导航栏区域设计

4．轮播图区域设计

5．金刚区设计

6．列表区设计

04-06 UI详情页设计技巧及设计目标

1．使用用户体验地图优化页面

2．产品详情页的构成

3．产品详情页的设计形式

4．检验设计效果：转化率跟踪

04-07 用户个人中心页设计

1．用户中心页的构成

2．用户成就模块设计规则

3．让“我的”页面更有创意的小诀窍

04-08 万物即列表：从列表设计强化自己的设计能力

1．列表的多种展示形式

2．分隔线列表与无分隔线列表

04-09 插画：为UI界面锦上添花的技巧

04-10 “原子化”设计思路：用Figma制作设计规范与组件

1．设计中的“原子”“分子”与“组织”

2．原子设计理论（组件化设计）的特点

3．使用Figma创建组件库的步骤

05 iOS与Android人机界面设计指南——以不变应万变的设计秘籍

05-01 日渐融合的iOS与Android设计

05-02 内容至上：设计原则解析

1．明晰（Clarity）

2．遵从（Deference）

3．深度（Depth）

4．其他设计原则

05-03 屏幕（密度）精度：开始设计之前首要关注的内容

1．像素（px）

2．像素密度（PPI）

3．磅（Point）

4．设备独立像素（Device Independent Pixel，DP）

5．可缩放像素（Scaled Pixel，SP）

05-04 从“亮色模式”到“暗黑模式”: iOS 13新增规范讲解

1．为什么要用暗黑模式

2．设计暗黑模式需要注意的要点

3．深浅模式下的颜色对比

4．暗黑模式下的层次结构表现

5．暗黑模式下善用透明度

6．检查颜色对比度，确保可读性

7．暗黑模式与深夜模式

8．材质（Material）

05-05 小组件Widget崛起：iOS 14设计规则解析

1．小组件的尺寸

2．桌面小组件不可交互

3．为同一个应用制作多个小组件

4．利用小组件的叠放属性

5．创建有意义的小组件，并实时展示信息

6．将设计内容专注在一个点上

7．不同尺寸的组件显示的内容量不相同

8．小组件需要支持Dark Mode（暗黑模式）

9．设定合理的间距，确保可读性

10．小组件的功能需要进入App具体的功能页面

11．小组件中的文字字号

06 从细节到整体：以产品和用户为核心的设计思路

06-01 以品牌眼光做应用设计及展示

06-02 创造触动人心的作品展示页的13个步骤

1．讲故事，塑造氛围，带用户产生同理心，进入观赏状态

2．设计形象展示海报

3．打磨产品简介

4．介绍项目背景

5．阐述产品目标

6．分析老版本或其他产品存在的问题

7．设定用户画像

8．设定情绪关键词，推导表达情绪的图片，进而设定颜色和风格

9．展示UI页面

10．设计规范、图标、插画

11．品牌延展

12．总结感想和收获

13．感谢

07 静电的Q&A时间

08 后记

09 附录

09-01 优秀UI作品展示

09-02 本书软件来源及合作伙伴

09-03 作者爱用的设计工具推荐

Eagle

墨刀（modao）

字魂（izihun）

软购（APSGO）