网易UI微专业课笔记——UI零基础预习课程
一、UI设计概述
UI相关术语解释
UI（User Interface)用户界面
GUI(Graphical User Interface）图形化用户界面
UX/UE（User Experience）用户体验
UED（Users Experience Design）用户体验设计
IXD（Interaction design）交互设计
理解手机屏幕相关概念
Px(pixel）像素
像素是屏幕上组成图像的最小单位
分辨率
显示器显示的像素数量，如iphone7分辨率：750×1334
dp（device independent pixels）
设备独立像素，安卓抽象单位
PPI（Pixels per lnch）
每英寸容纳像素数量
换算公式：dp×ppi/160=px
DPI（Dots Per Inch）
每英寸上点的数量，DPI概念用在计算机上，就应称之为ppi
栅格系统（Grid Systems）
网格系统
位图
“点阵图”，多个“像素”组成，放大失真
矢量图
几何特性绘制的图形，不会失真
手机屏幕尺寸大全：手机屏幕尺寸
UI设计师需要做什么？
结合自己UI设计、前端开发、产品经理三个维度的实践经验，尝试将产品设计流程大致分为五个阶段：
认知分析阶段（解决什么问题？）
交互原型阶段（寻找解决方案）
界面设计阶段（包装解决方案，更好的表达）
研发实施阶段（生产）
验证改良阶段（质量监控、改良）
UI设计师需要学习哪些软件？
1.PS 2.AI 3.AE 4.Sketch
UI设计师需要掌握哪些理论知识？
RGB颜色模式
R(红色）G(绿) B(蓝)
CMYK颜色模式
C(青）M(洋红) Y(黄色) K(黑色)
学习文章
UI设计需要遵从什么规范和法则？
UI设计中有哪些设计风格？
UI设计中动效
UI设计资源推荐
平台类网站（国内）
平台类网站（国外）
灵感类
icon类
配色网站
其他网站
设计类公众号
网易UEDC 庞门正道 做设计的面条 你丫才美工 UI头条 可能性与大设计 非科班设计 回音分享会 菜心设计铺 LOGO大师 Goodmor宁 设计咖UXCoffee 零设计 优秀网页设计
优秀设计师收藏夹
UI设计书籍推荐
书籍
《心理学与生活》 《About Face4》 《七日掌握设计配色基础》 《配色设计原理》 《写给大家看的设计书》
《设计心理学》 《为什么设计》 《日本版式设计原理》 《认知与设计》 《Dont make me think》
互联网行业书库
二、走进PS
PS主界面
Tab键 隐藏整个工作区
Tab+shift 隐藏右侧工作区
F键 全屏快捷键
移动工具
v键 移动工具快捷键
自动选择勾选 可移动点中的图层
重叠图层时 取消自动选择 右键选择要移动的图层
Alt键 摁住Alt拖动复制
Delete 删除
选区工具
摁住Shift键 拉出正方形或正圆选区
拉出选区不松手 摁住空格 可移动选区
增加选区 拖拽选区后摁Shift选择增加的区域
减少选区 拖拽选区后摁Alt选择减去的区域
保留交叉的选区 拖拽选区后摁Alt+Shift选择想保留的选区
Ctrl+D 取消选区
魔术棒和快速选择工具
魔术棒选择的是颜色相同的连续（连续选项可关闭）的选区
对所有图层取样 所有图层相同颜色区域都会选上✔
容差 容差越大 选择的区域越大
快速选择工具 手动拉出颜色相同的区域
快速选择工具+Alt 可减少选择区域
裁剪工具
C 裁剪工具快捷键
裁切的比例可在左上角调节 1:1 16:9 等等
比例也可左上角自己设定
右侧的网格图标可更改剪裁的图形样式 如黄金比例、金色螺线
如果不勾选删除剪裁的像素 则剪切区域外的原图部分还在
选择拉直 拉出垂直线 可将物体拉直修正并裁切多余区域
剪裁工具下的画布裁切工具 可调节点 裁切透视矩形
吸管工具
颜色 RGB 可调节
色板可切换 以及新建颜色
污点修复画笔工具
选择污点修复画笔工具 涂抹覆盖污点
快捷键J
修补工具
选择一片区域 移动到想修补的地方
无损修补 选择内容识别模式——新建图层——对所有图层取样
选择目标模式 所选区域填充其他区域
选择对象模式 所选区域被其他区域填充
修复画笔工具
摁住AIT 点击替代的区域 点击被修复区域
正常模式 修补后有过渡的痕迹 替代模式 替代区域完全替代被修补区域
笔刷工具
B 快捷键
不透明度后面的绘笔按钮开启后 绘制的线条透明度会随笔压变化
Ctrl+Delete 填充背景
橡皮工具
E 快捷键
模式：画笔 铅笔（边缘比画笔硬） 块（方形笔触）
勾选抹到历史记录 涂出来的是上一步操作
背景橡皮擦工具
连续取样 AIT键 一边擦除一边取样
一次取样 AIT键 以第一次取样颜色为准擦除
背景色板取样 AIT键 把取样颜色转换为背景色擦除 容差可调
油漆桶工具
G 快捷键
可填充前景以及纹样
Alt + Delete 填充前景色
Ctrl + Delete 填充后景色
模式改成颜色后 可以保留原有产品的光照效果
渐变工具
模式 线性渐变 径向渐变 金字塔渐变 圆柱渐变 十字形渐变
上边的滑杆改变不透明度 下边的滑杆改变颜色
减淡加深工具
O 快捷键
减淡工具 范围有 阴影 高光 中间调三种
海绵工具
修改像素饱和度
模式 去色（降低饱和度） 加色（增加饱和度）
如果是黑白照片 去色（降低对比度） 加色（增加对比度）
钢笔工具
P 快捷键
模式 路径 形状 像素
路径
锚点和线段组成 点击路径选择工具A可以移动路径 点击直接选择工具 框选锚点可以调整
点开自动增加/删除锚点 钢笔点击锚点可以删除 点击没有锚点的线段可以增加
曲线路径
点击不要松鼠标 点第二下拖动鼠标
锚点和线段组成 点击路径选择工具A可以移动路径 点击直接选择工具 框选锚点可以调整
点开自动增加/删除锚点钢笔点击锚点可以删除 点击没有锚点的线段可以增加
勾选约束路径拖动 调整当前曲线时其他曲线不跟随变化
转换点工具
可把曲线改成直线
像皮带
打开像皮带可预览曲线接下来的路径
自由钢笔工具
直接用鼠标拉出不规则图形
文字工具
T 快捷键
基本参照word文字使用方式
形状工具
U 快捷键
模式 形状 路径 像素
摁Alt键拉出形状 以鼠标位置为中心拖出图形
Shift+Alt 绘制正矩形 再空白键可拖动矩形
圆角倒角矩形 倒角半径可调节
多边形可改变段数 角是否变光滑 是否为星形
像素下的直线工具 可设置勾选箭头
自定义形状工具
Shift键 画正的图形
Alt键 从中间开始画
Shift + Alt 从中间开始画并是正的
空格键 边画可以边移动图形
路径的自定义图形可切换路径选择工具 调节路径
切换锚点工具可切换它的锚点
编辑下的自定义形状工具 可自定义你编辑的形状
抓手工具
H 快捷键
模式 100% 适合屏幕 填充屏幕
窗口 排列 双联垂直 可垂直显示两个画面区域
勾选滚动所有窗口 可同时对两个画面区域使用抓手工具
拾色器
H 色相
S 饱和度
B 明度
R 红色
G 绿色
B 蓝色
形状属性栏
钢笔工具和形状工具都可绘制形状
可选择绘制形状还是路径模式
形状模式可调节高宽 填充颜色 描边粗细 线段形式 描边位置 拐角设置 四个边倒角的弧度
钢笔工具
绘制完钢笔形状后 Ctrl键快速选择工具 调节曲线
Alt 切换为转角曲线
Ctrl摁住不要放 按回车键 建立钢笔选区
点击下一图层 建立图层蒙版
如要修改细节 点击图层蒙版 黑色为前景色 用笔刷擦除
布尔运算
绘制绿色矩形 再绘制红色椭圆 合并图层会合并成上一图层色彩
选择两个图层
Ctrl+E 合并图层
点击布尔运算 模式 新建图层 合并形状 减去顶层形状 与形状区域相交 排除重叠形状 合并形状组件
合并形状 圆形方形合并
减去顶层形状 圆形被减去
与形状区域相交 只有相交部分保留
排除重叠形状 只有不相交的部分保留
点击此图标可改变形状图层顺序
可改变图形的对齐形式
对齐模式 对齐到画布（以画布为对齐标准） 对齐到选区（以和对齐的方向最靠近的图形作为对齐标准）
图层样式
双击图层空白处 弹出图层样式对话框
投影角度可直接点击投影拖动到理想位置
摁住AIT键点击图层效果 拖动到其他图层 其他图层可应用此效果
单击此处可缩放效果
右击图层选择删除图层样式 可删除样式
了解加减色模式
印刷三原色/减法三原色（印刷） 光的三原色/加法三原色（电脑）
加法三原色 图层模式设定为线性减淡/添加
减法三原色 图层模式设定为正片叠底
三、AE基本操作
打开和保存项目
文件——新建——新建项目
Ctrl+S 保存快捷键
Ctrl+W 关闭快捷键
Ctrl+Q 退出
Ctrl+O 打开项目
关闭项目可关闭不需要的项目
在面板左上的项目区域右击可新建合成（合成相当于ps里的图层 pr里的序列）
工作区介绍和浮动面板
工作区包括 所有面板 动画 效果 简约 绘画 文本 运动追踪 模式
不同工作区面板会发生变化
窗口菜单里可关闭和打开想要的面板
工作区的面板（如合成面板）可自由调节 选中面板可拉伸边缘
右击三横按钮 可关闭面板 浮动面板 关闭组中其他面板
浮动面板可拖拽调整位置 放入其他面板中心区域 等于嵌入其他面板组里
如放入其他面板上、下、左、右 则并列关系放置上、下、左、右
多个面板的调节 可将鼠标放置面板交界处拖拽
标准菜单下选项 重置为已保存的布局 保存对此工作区所做的更改 另存为新工作区 编辑工作区
编辑工作区 可对工作区删除和排序
了解合成面板
合成相当于Ps里的图层组 相当于一个舞台 容纳图层
双击项目面板中的合成名称可打开合成
点击合成中的图层 可调节图层
改变图层名称 选中名称并回车
Ctrl+Z 撤销
合成界面
Ctrl+N 新建合成
像素长宽比最好使用方形像素
帧速率 电脑播放 流畅要求高 30帧/秒
主流帧率 25帧/秒
持续时间可改成你想制作的视频的时间长度
背景颜色 可选择自己喜欢的颜色
分辨率
目前流行的分辨率 1280×720
1280×720
电视片头分辨率 1440×1080
1440×1080
制作视频时尽量选择高的分辨率 因为高分辨率可调低 低分辨率调高如图像质量低会模糊
如何将分辨率调低？
合成菜单——合成设置——修改分辨率
点击建立好的合成会显示 名称 持续时间 帧率 分辨率
名称可选自定义 保存自己喜欢的合成预设
时间码
如想制作1分8秒4帧 可输入00010804
控制时间对应 时(h) 分(m) 秒(s) 帧（f）
AE脚本 文件菜单——脚本命令——Scale Composition
这个脚本可将分辨率等比缩放
第一选项是按倍数（输入倍数） 第二选项是单独改宽（输入具体数值） 第三选项是单独改高（输入具体数值）
缩放分辨率脚本
93.2%是放大率的设置 100%为完整大小 一般选择适合
预览下的按钮
第二个图标是选择网格和参考线
标题/动作安全 制作标题和文字不要超过给定的最外的框 防止裁剪画面将文字裁掉
除此之外还有 网格 参考线 标尺
第四个图标是时间码
第五个图标是抓拍快照
第六个是显示抓拍的快照
第七个是颜色通道的显示
第八个是分辨率的调节（用于预览的分辨率 电脑负担小）
第九个是透明网格 （背景颜色其实是用作参照的 背景实际为透明色）
第十一个是视图调整
第十三个选择自适应分辨率渲染最快
首选项设置
合成设置高级选项渲染器选项里 如果做2.5D视频勾选经典3D
如果做3D视频 勾选光线追踪3D
项目设置
文件菜单——项目设置
素材开始时间——使用媒体源
默认基准——25帧/秒
首选项
编辑——首选项
显示——勾选在时间轴面板中显示时间码
导入——序列素材——25帧/秒
自动保存——务必勾选10分钟
如何导入PSD和AI文件素材
导入PSD格式素材
第一种
导入种类 选择素材 选择图层
选择图层分合并图层样式到素材和忽略图层样式
合并会保留图层样式 忽略不会保留图层样式
图层大小分图层大小和文档大小
图层大小是就是该图层素材大小
文档大小是整个图像大小
第二种
导入种类 选择合成
选择图层——可编辑的图层样式 会导入所有图层保留图层样式
选择合并图层样式到素材 样式不可更改
第三种
导入种类 选择合成—保持图层大小
与合成相比保持了图层大小
导入AI格式素材
双击项目区域直接导入
AI文件如想以图层形式导入 必须将路径转化为图层
点击AI软件中的图层菜单右上角小三角标 选择释放到图层并保存
再次导入会显示PS导入时的对话框 此处处理方式与PS导入雷同
图层面板
拖动图层可改变图层位置
右键某一图层 选择在资源管理器中显示 可查看图层所在文件位置
圆圈图标——独奏按钮 点击独奏 则只显示此图层（可按住左键拖动独奏多个图层）
编辑PSD的文字 可右击图层转换为文字图层
标签图标颜色主要为区分素材类型
锁定图标——阻止编辑图层
消影图标（像头骨的那个家伙！）——暂时隐藏图层
Alt +【 减去指示线的前面的部分 Alt + 】减去指示线的后面的部分
预览面板里可以跳跃帧
单帧跳跃键盘↑ ↓键
十帧一跳Shift+↑↓键
单帧跳跃
图层与定界框的对齐
勾选菜单栏的对齐工具 定界框有重叠时自动对齐
对齐面板对齐方式
1.对齐到选区
对齐不超过素材的边缘
分布图层 素材之间的上下左右中的距离之间的距离相等
时间轴面板
时间轴区域 搜索🔍图标
想要查找该图层的变换属性 选择该图层 可在搜素区域输入变换属性（如不透明度)
展开或折叠图层开关命令
展开或折叠转换控制命令
展开或折叠入点——出点 持续时间
如何改变持续时间？
将鼠标放在轨道上 鼠标呈双箭头时拖动
修改输入的持续时间
如何统一导入素材的持续时间？
编辑——首选项——导入——静止素材——修改时长——确定
时间轴的列如不需要可以隐藏
右键隐藏即可（如父级就是右键标题隐藏此项）
隐藏后想调出可再次右键——列数——父级
切换开关/模式 展开控制菜单
时间线
时间图表显示模式
摁左上角的时间图表按钮打开
时间线由时间导航器（开始）——时间导航器（结束）组成
拉动左侧导航器缩小时间轴 拉动右边导航器放大时间轴
直接双击导航器条放大到最大 双击再双击放到最合适状态
导航器与下面的放大缩小三角是一样的作用和效果
导航条下的是工作区域
工作区域 预览或最终输出渲染的合成的持续时间 开始时间B 结束时间N
可调节滑块选择最后需要渲染的工作区域
工具栏功能介绍
如何调节导入素材为适合舞台的宽高比？
导入图片——右键——变换——适合复合
工具栏截图👇
一、选择工具
1.移动图层
2.对素材大小进行更改 拖动素材控制框的锚点
二、抓手工具
1.移动整个画面（图层加舞台）
2.快捷键 空格键
三、缩放工具
快捷键 Z 放大
快捷键 Alt 缩小
四、旋转工具
六、向后平移锚点工具
可将中心的锚点移动到任意位置 再使用旋转工具时会以此为中心旋转
七、矩形工具
矩形工具右键 含有矩形工具 圆角矩形工具 多边形工具 星形工具
描边 填充 像素可改变
拉出形状后 会自动建立图层
点击该图层 绘制图形 图形将保留在该图层
如点击空白处绘制图层 则建立新的图层
摁住Ctrl键拉矩形框 形状会以起点为中心点扩散
添加按钮里带有多种特效
图层里矩形的属性
矩形名称右侧为它的混合模式 就像PS图层的混合模式
点开矩形路径右侧最右边的箭头按钮 可打开反转路径
矩形的大小 位置 圆度都可以调节
描边选项下有 合成 颜色 不透明度 描边宽度 线段端点 线段连接 尖角限制
描边
在同组中前一个之上 将描边的顺序置于填充之上
如你的描边像素为30 左右上下各描边宽度也为30
在同组中前一个之下 将描边的顺序置于填充之下
如你的描边像素为30 左右上下各描边宽度为15 因为还有15的宽度被填充挡住
颜色 可吸取改变描边颜色
不透明度 可调节描边透明度
描边宽度 就是宽度调节
线段端点 平头端点 圆头端点 矩形端点（调成虚线才会明显）
线段连接 斜接连接 圆角连接 斜面连接（连接处的形状）
虚线 虚线——调整虚线距离 偏移——移动虚线位置
填充
合成 颜色 不透明度
填充规则——确定哪部分算是路径内部区域
填充规则 非零环绕（一般使用此规则） 奇偶
如何对图形做出交叉打孔的效果？
在图形上拉出想打孔的轮廓后 反转路径方向
如何填充渐变色？
描边和填充都可以渐变
摁住Alt键点击填充颜色和描边颜色 会切换油漆桶模式 如线性渐变 径向渐变
以下的属性可调节
文字工具
工具组T图标 分为横排文字工具 竖排文字工具
文字图层分为 文字以及变换属性
字符和段落面板 此处使用方法与PS字体一样！
描边颜色被压在文字颜色后 激活后会变为前层
描边
钢笔工具
钢笔工具的绘画方式与PS里的钢笔工具相同
摁住ctrl键可以拖动调整画好的钢笔路径
添加顶点工具 添加锚点
删除顶点工具 删除锚点 快捷键Ctrl
转换顶点工具 转换锚点直角转换曲线 快捷键Alt
蒙版羽化工具 在有图片的图层绘制图形就会形成蒙版效果
蒙版羽化工具
点击线段任意处 出现圆点之后向外拉 就会出现羽化边缘
五个基本变换属性和坐标介绍
每个图层都会有可调节的变换属性
锚点A
锚点就是图中红色的圆圈位置
锚点（00，00）锚点会移动到左上角
锚点坐标为图标坐标一半时锚点在中心 如图片（200×200）锚点（100×100）
锚点数值正值图片会往上走 负值会往下走
位置P
位置（x轴位置，y轴位置）
位置（0，0）就是锚点的位置
摁住CTRL键移动锚点 会吸附定界框的点
如果锚点不小心移开要移回中心 右键变换—居中放置锚点
缩放S
缩放图片
旋转R
旋转中心为锚点
0x（几次旋转）+0°
不透明度T
可见程度
Shift+任一属性的快捷键可调出该属性
右键图片 变换——锚点——可修改锚点坐标
进入图表编辑器的世界
Shift + F3 快捷键
使用二维图表示属性值 并水平表示（从左到右）合成时间
另一方面 在图层条模式 时间图表仅显示水平时间元素 而不显示变化值的垂直图形表示
切换图表的键
值图表显示属性值（一般用这个）
速度图表
表示速度的变化 水平值表示速度恒定 值越高速度越快 越低速度越慢
（右键关键帧可调整关键帧速度）
点击不同的属性会出现它的值图表
摁住ctrl选择多个属性 会展示多个图表
点击位置属性再点击这个图标 可以将X Y轴位置分开显示
显示选择的属性 选择动画属性（所有属性）
显示不同的图表类型
最后一个图表——允许帧之间的关键帧可以对帧微调
显示多个关键帧时显示“变换”框
框选多个关键帧时可以调节框内关键帧
查看视图（可以查看完整的时间线）
Alt键+鼠标中键 可以缩放时间轴
空白键可以调出抓手工具
将关键帧转换为定格
使用它动画中的过渡效果就会消失
将指定关键帧转化为线性（默认就是线性）
将指定关键帧转化为贝塞尔曲线
摁住Alt键可以单边调整曲度
缓动 缓入 缓出
