mac系统的使用提示：

1.windows==ctrl==花键==cmd==comanmd

2.我的电脑==finder

3.程序切换--ctrl+TAB

4.窗口切换--crl+~

5.最大化--ctrl+F 取消--ctrl+esc

6.最大化切换--ctrl+光标键

7.最小化切换--ctrl+m，ctrl+alt+m 所有最小

8.删除--ctrl+backspace

9.输入法--ctrl+空格

10.截屏--ctrl+shift+3 ctrl+shift+4

11.强制退出程序 cmd+alt+esc

12.finder：前往--ctrl+K；桌面--ctrl+shift+D；下载：ctrl+alt+L；文档：ctrl+shift+O

13.f11显示桌面

14.选中空格--预览

15.ctrl+i 显示文件信息

第一章

一.画板A：

1.ios安卓 pc 纸张

2.ctrl+G 网格

3.ctrl+L 布局

4.视图-缩放-显示像素

5.ctrl+R 可以建立参考线

二.文件导出

1.导出整个画板

2.右下角，导出当前图层

三.矢量图形

1.r 矩形

2.o 椭圆

3.u 圆角矩形

四.线条

1.快捷键：L

2.粗细，颜色，端点，拐角，虚线，箭头，居中对齐，百分比圆环（

虚线：直径/0.314*百分数（100/0.314*0.75）百分75的圆环

间隙：直径/0.314

对齐方式选择居中对齐

）

五.矢量工具

1.快捷键V

2.双击矢量图形，可以进入编辑状态

3.角点控制：对称，不对称，直角，断开连接

六.剪刀：删除两个锚点间的线条

七.旋转复制

八.常用操作

1.复制：ctrl+D；alt+拖动；ctrl+C ctrl+V

2.缩放：ctrl + +；ctrl + -；ctrl+1显示全部；ctrl+2最大化旋转物体；ctrl+3 居中

3.侧边栏：ctrl+alt+. 隐藏两边；ctrl+alt+1 隐藏左边；ctrl+alt+2 隐藏右边

4.改变图层顺序ctrl+alt+光标上下

5.在图层中alt切换锁定还是隐藏

6.alt查看隐藏

第二章：检查器

一.蒙版

1.轮廓

2.透明度

二.对齐，分布，透明，图层混合模式，描边，投影，内阴影，图像颜色的调整

三.基本：

1.x，y width height

2.旋转

3.对称

4.ctrl+上下左右键改变大小

四.填充

1.纯色

2.线性渐变

3.径向

4.角度

5.图案

6.噪点

五.颜色

1.文档颜色

2.全局颜色

3.历史颜色

六.模糊

1.背景模糊

2.高斯

3.动感

4.缩放

第三章

一.文字样式--当文字样式更新的时候，所有运用该样式的元素也会产生更新

二.图层样式

三.默认样式

四.取色 ctrl+c

五.组件：

1.组件的命名 item/arrow item/normal

2.修改文字和图片

3.当组件发生修改时候，所有运用组件的元素也会发生改变

4.组件分离（元素和组件就不产生关联关系）

六.组建的嵌套

七.资源库

八.模板

字体的气质与选择

1.不看字体看形态

2.粗的当标题，细的当正文

3.复杂的当标题，简单的当正文

4.粗的亲民，细的表现科技，贵重

5.粗的偏男性，细的偏女性

后台管理界面

一.图表

1.询问前端会什么图表

2.常见的图表：D3，echarts，hightcharts

3.参考程序会的那种图标做设计

二.框架也有模板

1.国内后台框架模板：

1）.react--antDesign

2）.vue--ElementUi

2.框架官网：下载sketch psd；参考样式，对照自己的功能做设计

三.设计原则

1.亲密性：纵向间距：大，中，小固定的间距；推荐8的倍数；

横向：大中小简洁

2.对齐：不推荐缩进；表单标签冒号对齐；数字推荐右对齐（小数点对齐）

3.对比：按钮：面按钮；线的按钮；文字按钮；同一个地方只有一个主要按钮，如果用户需要决策，按钮不要有倾向，状态对比：选中，悬停，静态

4.重复：重复的设计元素

principle第一章

定义：结合sketch制作简单的动画的软件

动画原理：1.两个画板间产生动画

2.在两个画板名称相同的图层产生过度

3.动画的事件：点击，鼠标移入，鼠标移出，鼠标按下，鼠标弹起，自动

4.过渡属性：x，y ；旋转；透明的；颜色

5.时间轴：改变动画的时间长短；动画起始结束时间；缓冲动画：默认；缓入缓出；线性；弹性；没有

principle第二章

一.页面滚动：

1.定义：模拟手机滑动翻页

2.做法：建组，把组的宽度变成一个页面的宽度，水平方向设为页面；

二.联动效果

定义：随着组动动画的距离，来改变其他图层属性动画（元素的动画是和滚动/拖动/页面的距离产生联系）

做法：1.首先有页面动画

2.选择图层

3.移动时间轴，属性关键帧：填充；x，y；缩放；透明

4.再移动时间轴，打属性关键帧（改变属性）

注意：在联动画板里，一个图层，只管一个元素的一个属性

2018-11-28