原型设计软件笔记-Figma
产品经理虽说对于产品的设计要求没有那么高，但是也需要一款快速提高工作效率的设计软件。我一直使用axure，但是它对于复杂的界面就有点捉襟见肘了。所以从今天开始学习figma看能不能解决这些问题。
B端画布尺寸
常规项目
- 1280×620
- 1440×800
特殊项目
- 1920×980
B端页面布局
当整体页面内容少，导航操作频率低的时候用上下布局
当整体页面层级多，导航操作频率高的时候用左右布局
1.标签栏的应用
确定是否应用页内标签栏，适用于需要在多个页面切换比较的产品需求
2.抽屉组件应用
确定是否使用抽屉的方式来展示部分详情、表单的信息，优点是没有跳出原来的页面
3.弹窗的使用
确定强提示弹窗是否需要遮罩，弹出的页面的哪个区域
4.提示气泡
确定弱提示类气泡的弹出位置、逻辑，以及如何消失和关闭
B端内容栅格
栅格的应用，就是制定固定的对齐标准以及将每个列宽作为一个长度系数来使用
| 12栏栅格 | 14栏栅格 | 16栏栅格 |
|---|---|---|
| 内容宽度：1000px | 内容宽度：1000px | 内容宽度：1000px |
| 栅格宽度：76px | 栅格宽度：64px | 栅格宽度：55px |
| 栅格间距：8px | 栅格间距：8px | 栅格间距：8px |
| 外边距：20px | 外边距：20px | 外边距：20px |
B端样式规范
默认字体
| 中文 | 英文 | |
|---|---|---|
| Windows | 微软雅黑 | Segoe UI |
| Mac / IOS | 苹方 | San Francisco |
| Android | 思源黑体 | Roboto |
网页字体渲染流程
- 网页文件指定字体
- 浏览器获得网页字体要求
- 浏览器匹配用户本地字库
- 用匹配到的字体渲染网页文字
- 匹配不到则显示系统默认文字
推荐字号
| 使用场景 | 字号（px） |
|---|---|
| 注释英文、数字 | 9-11 |
| 注释、小段文本 | 12-13 |
| 正文、小型标题 | 14-16 |
| 大标题、大数字 | 16-20 |
按钮状态
默认状态、悬浮状态、点击状态、禁用状态
按钮推荐尺寸
大按钮：40-64px
中按钮：28-40px
小按钮：12-28px
定宽按钮
自适应宽度按钮
输入框设计
输入框高度：24-40px （4的倍数）
输入框宽度：优先确定最小宽度（在响应式中，输入框随父级伸缩）
基础状态：默认、选中、输入中、已输入、禁用
输入框其他类型：日期选择器、下拉菜单、选择器
单选多选设计
多选框状态：默认状态、选中状态、不可选状态、半选状态
下拉菜单设计
下拉菜单状态：默认、展开、鼠标悬浮选项、点击、结束
Figma原型练习
结尾：
在简单的使用了figma来画原型图后，发现友好程度比axure高很多，特别是多部门协同，大大简化了设计师和开发人员工作流程。
比如产品设计好原型图后，UI设计师不需要重新画界面，只需要在原型的基础上便可以进行设计，设计出来的图不需要再蓝湖上导一遍，即可以生成css代码，出现边距、颜色等前端信息，快速提高了工作流。
但是也有没那么好的地方，figma是产品设计软件，所以产品原型图上的交互逻辑无法像axure一样简单的展现出来，需要设置交互逻辑，或者通过文字进行描述。所以还是需要根据自己的工作习惯来使用适合自己的软件。
原型设计软件笔记-Figma
