RP、PS、AI、AE、XD、蓝湖、墨刀

原型与设计

PRD：Product Requirements Document，产品需求文档

原型图：线框图、低保真

设计稿：视觉稿，高保真

UI设计师（美工）的工作：原型图 -> 设计稿 -> 标注、切图

切图：从设计稿中抽出前端开发所需的图片

原型图工具：Axure RP、Balsamiq Cloud

设计稿工具：Adobe PS、Sketch、Adobe XD

标注工具：蓝湖、Zeplin

切图工具：蓝湖、Zeplin

矢量图工具：Adobe Illustrator

动效工具：Adobe After Effects

设计规范

手机界面栏目：状态栏40px、导航栏88px、标签栏（工具栏、底栏）98px、搜索栏、Banner
首页类型：入口导流型（消费类）、瀑布流型（资讯类）、对话列表型（社交类）
图标：线性图标、填充图标(选中状态)

Web项目新建设置：宽1920像素，高2000像素，分辨率72 像素/英寸，背景透明
宽屏：宽高比16:9
Banner尺寸：1920，有效信息区1200，不压缩居中显示

图标
图标风格：拟物化（下分：2.5D风格、超写实风格）、扁平化（下分：线性-线条组合、剪影-色块组合、填充-线面结合）、手绘风格
MBE风格：法国设计师MBE 创作的图标风格，属于填充风格；断点式描边、高饱和度色彩、同类色光影、表情元素、丰富的辅助图形(星星)

设计社区网站：站酷zcool、UI中国ui.cn、优设网、花瓣网

Axure RP

美国Axure Software Solution公司出品
RP：Rapid Prototyping（快速原型）
简图类别：页面图、流程图
导出HTML：Publish -> Generator HTML Files -> 用IE打开
母版（Master）：选中元素,右键 -> 转为母版（Create Master）

Sketch

荷兰Bohemian Coding公司出品，只有Mac版

Adobe Photoshop

文档：包含画布 和 图层
图像大小：图像->图像大小，选中图层的大小

移动工具参数：自动选择（不锁定的图层都能选中，否则只能选中当前图层）
画板工具：一个设计稿中可以包含多个画板，可以用于设计手机应用的不同屏

裁剪工具：选择范围后，鼠标在范围内可移动位置，范围边缘可调整大小，范围外可旋转；双击应用裁剪；应用后再次选择范围则退到重新选择范围。切换到移动工具，则生效裁剪。
裁剪工具参数栏->删除裁剪的像素：勾选则裁剪文档（画布和图层），不勾选则只裁剪画布
透视裁剪工具：平直的物体边缘，由于透视原理在图片中显示为斜边；使用透视裁剪工具，沿物体边缘裁剪，应用裁剪即可将斜边拉直。

自由变换（缩放、旋转、移动）：选中图层->编辑->自由变换，另有操控变形、透视变形
斜切、扭曲、透视：自由变换时 -> 右键 -> 斜切、扭曲、透视；即可以单独调整一个角的位置。斜切是平面上缩放，扭曲带有纵深方向的变换，透视是同时对两个角斜切。

智能对象：对智能对象图层进行自由变换后，重新选中这个图层，仍然可以重新调整。如果是拉入打开的图片，自由变换后，重新选中该图层，那么其边缘是紧贴它的矩形，而不是变换后的形状
置入智能对象：文件->置入链接的智能对象
转换为智能对象：图层->右键->转换为智能对象
智能对象效果：对智能对象进行调整 或 滤镜（模糊化、锐化等），相当于是加了效果蒙版，涂黑该蒙版就是去掉效果，涂白即增加效果范围

选区工具：包括选框工具、套索工具、魔棒工具、快速选择工具
选区运算：选区工具参数->可选择叠加或扣除选区、选择->反选、选择相似
选区操作：选择范围后即可复制黏贴、剪切、编辑->填充、图层底栏->添加图层蒙版（该图层只留下选中区域）、面板->调整（调整色彩）、图层->新建->通过拷贝的图层（复制选区作为新图层）
魔棒属性：连续
取消选中：选择->取消选择
色彩范围：选择->色彩范围，一次选择指定色彩范围内的区域

橡皮擦工具
背景橡皮擦工具：取样参数=一次（点击时进行颜色取样，移动鼠标只擦除取样颜色）

图层
图层属性：图层顶栏->不透明度/混合模式
图层混合模式：共6组27个模式
图层操作：图像->调整（色相、饱和度等）、面板->调整（色相、饱和度等）、图层->修边->去边、图层底栏->创建蒙版/调整(黑白圆)/新建/删除/分组、图层顶栏->过滤/锁、图层列表->隐藏显示/解锁/排序
图层样式（阴影、渐变、描边等）：双击图层、图层底栏->fx、窗口->样式面板（预设样式）、图层->图层样式、图层右键（清除、拷贝图层样式）
多选图层：参数栏可设置对齐，编辑->自动对齐图层（根据图层内容自动吻合重叠）

图层蒙版：蒙版的白色部分表示图层的显示部分，黑色为不显示部分
图层蒙版属性：双击蒙版打开属性面板，反相（该图层留下的部分取反）
画笔工具绘制蒙版：新建蒙版为全白色蒙版，选中蒙版，设置画笔颜色为黑色，即可对图层进行擦除，实质为对蒙版绘制黑色；此方法优于橡皮工具擦除，因为可以用白色画笔擦回来。
智能滤镜：选中图层->滤镜->转换为智能滤镜->滤镜->模糊，或者图层右键->转换为智能对象->滤镜->模糊 ；相当于添加了一个滤镜蒙版，选中蒙版->画笔工具涂黑，涂黑部分滤镜失效
剪切蒙版：图层右键->创建剪切蒙版，图层->创建剪切蒙版；让当前图层的显示部分为下一图层的不透明部分
蒙版转选区：蒙版->右键->添加蒙版到选区，蒙版涂黑部分形成选区

通道：图层的红绿蓝分量，红通道越白表示红分量越高
直方图：窗口->直方图，对整个图层的颜色统计，横轴表示亮度，纵轴表示像素数量

调整：曲线（对指定的亮度区域，调整亮度），黑白（可以根据不同通道决定灰度）
对比度：高亮区域 与 阴影区域 的亮度差
色彩饱和度（鲜艳度，纯度）：主通道(可能是两个) 与 其他通道的亮度差，纯白，灰色，纯黑的色彩饱和度为0
色相：即颜色
色阶：即亮度梯度
色调：色相、纯度、亮度的综合效果

渐变工具：在新建图层上使用渐变工具，再与底页合理叠加
渐变填充：图层底栏->调整->渐变填充，渐变蒙版填充整个图层
渐变映射：选中有渐变的图层->调整面板->渐变映射，设置渐变效果

照片处理
滤镜：滤镜->Camera Row滤镜
防抖滤镜：滤镜->锐化->防抖，去重影
内容识别填充：选区->编辑->填充->内容识别，去掉照片上的指定部分并与背景融合
内容感知移动工具：选区->内容感知移动工具（修复工具组下）->移动选区->应用，用于移动照片上的指定部分并修复背景
内容识别缩放：选中图层->编辑->内容识别缩放，缩放照片时不会整体缩放，而是优先缩放空白处
修复工具：污点修复画笔工具（滑动鼠标修复）、修补工具（用修补工具选定区域，移动区域到目标区域，即用目标区域修补选定区域）、修复画笔工具（Alt+点击 取样，涂抹修复）、红眼工具
历史记录画笔工具：涂抹部分回复到编辑前
照片拼接：文件->自动->Photomerge->选中要拼接的多张图片

海绵工具：加色、去色、加深、减淡
仿制图章工具（克隆工具）：Alt+点击 取样，涂抹克隆。更多参数在 窗口->仿制源
吸管工具：吸取前景色
标尺工具：测量两点距离，在信息面板中查看
注释工具：添加注释
油漆桶工具：魔棒工具+填充

消失点滤镜：滤镜->消失点->创建平面工具->绘制四角平面->把其他图像粘贴到消失点滤镜窗口->把图像拖入到四角平面，图像超过四角平面的部分不显示。让四角平面形成一个透视角度，再调整图像贴合透视角度，可达到图像符合透视效果地贴合到底图。
液化滤镜：瘦脸、修身、局部收缩(收腰)、局部膨胀(丰胸)
自适应广角滤镜：约束工具（在图像上拉一条斜线，放开后图像会扭曲，使得斜线两端成垂直或水平方向）
镜头校正滤镜：拉直工具（在图像上拉一条斜线，放开后图像会旋转，使得斜线两端成垂直或水平方向）、变换（增减透视度）

UI
矢量工具：钢笔工具、文字工具、路径选择工具、直线工具
文字工具：用文字工具画一个框，即段落范围
网格：视图->显示->网格
智能参考线：视图->显示->智能参考线，从标尺出拖出参考线 或 视图->新建参考线
标尺：视图->标尺
网格设置：编辑->首选项->网格
表格：在excel中制作表格，然后粘贴到PS
图标：形状工具组->自定义形状->参数栏上可以选中不同的形状
钢笔工具：点击添加锚点，点击不放，可以拉出一个弧度路径，可以闭合为一个形状
路径修改：删除锚点工具、添加锚点工具、转换点工具（修改钢笔工具拉取的弧度）
路径选择工具：选择路径 和 形状
直接选择工具：可以操作锚点
切片工具：裁剪工具组->切片工具，划线 或者 划框
切片选择工具：选择切片
切图：1、切片工具划框；2、参考线划框，切片工具->基于参考线的切片，再删除多余的切片；
导出切片：文件->存储为Web所用格式->png 24
自动切图：文件->导出->将图层导出到文件->png 24，设计时需确保 图层和切片的一一对应
自动切图：编辑->首选项->增效工具->启用生成器，文件->生成->图像资源（勾选），给图层 或 图层组 命名为*.png/jpg/webp/svg，就会自动在项目目录下生成assets目录，里面放着图层和图层组对应的图片。命名为 200% *.png则导出二倍图
导出多倍图：图层右键->导出为

色彩的三大属性：HSB，色相、饱和度、明度。是对单色的度量，而不是对整个图像的度量。
配色：色（色相）环上，同类色(距离0-15度)，邻近色(距离15-30度)，类似色(距离30-60度)，对比色(距离120度)，互补色(距离180度)，邻近色、类似色最佳
色盘：色盘上选色即确定HSB三个指标

RGB：(Red-Green-Blue，红绿蓝)，发光模式（加色模式），发光三原色
CMY：(Cyan-Magenta-Yellow，青-品红-黄~=红黄蓝)，反光模式（减色模式），反光三原色（美术三原色，印刷三原色，颜料三原色）
三间色：两种原色混合得到的颜色
CMYK：CMY + Black，实际印刷中，加入黑色，避免得用三色混合来实现

Adobe Illustrator

软件布局和工具 跟PS差不多
最大图标：256*256
分割为网格：对象->路径->分割为网格，可以在每一个网格里放一个图标
画笔工具：可以先用画笔工具画一个草图，作为参考
剪刀工具：可以把路径剪成两半
偏移路径：选中路径->对象->路径->偏移路径，生成一个比原路径大的相似路径
水平直线：Shift+直线工具
轮廓化描边：对象->路径->轮廓化描边，把一个形状分离为两个形状，其中填充部分为一个，描边范围为另一个
线性图标改剪影图标：轮廓化描边->删除填充部分形状

Adobe After Effects

动画12法则：挤压与拉伸、预备动作(主动作开始前的小幅反动作)、惯性跟随(动作停止前有一个惯性效果)、慢入与慢出、弧形运动轨迹、附加次要动作、动作夸张化
图层：文本图层、纯色图层、灯光图层(只影响启用3D属性的图层)、摄像机图层(只影响启用3D属性的图层)、形状图层、调整图层(即具有调整属性的图层，影响其下方所有图层)
图层属性：3D属性，调整属性
图层属性开关：点击图层后的方格
图层效果：图层右键->效果
关键帧动画：时间轴-拉到起始时间->图层面板-展开图层-变换-点亮秒表->时间轴-拉到结束时间->图层面板-展开图层-变换-设置变换目标
缓入缓出：时间轴-关键帧->右键->关键帧辅助->缓入/缓出
图表编辑器：打开时间轴边上的图表编辑器，可以拖动拉杆，设置关键帧之间的变化曲线
渲染队列：菜单栏-合成->添加到渲染队列->渲染队列面板->导出模块->设置导出格式->输出到->设置输出文件->右侧渲染
导出gif：输出格式设为QuickTime，输出mov文件。安装quickTime软件，用PS打开mov文件，导出->存储为Web所用格式

Adobe XD

跳转设计：切换到原型页签，点击组件，拉取箭头到另一个画板
新增组件：在画板中选中一个组件，在组件面板中点击加号，即添加到组件库
资源自动嵌入功能：图片、text文件 都可以拖入到组件中
从PS、AI导入：从PS、AI可以把图层拖入XD
重复网格：选中组件->属性栏-重复网格->拉动组件边上的耳朵，在一定范围内重复排列组件
导出标记：图层面板->鼠标悬浮于图层->添加导出标记，即把该图层作为一个切图
导出切图：导出->导出所有内容
导出设计稿：导出->导出所有画板

蓝湖

蓝湖产品（项目下的产品页签）
1、从蓝湖官网上下载蓝湖Axure并安装
2、打开Axure RP，点击预览
3、在蓝湖Axure上点击上传

蓝湖UI设计（项目下的设计页签）
1、从蓝湖官网上下载蓝湖PS插件并安装
2、重启PS，窗口->扩展功能->蓝湖->蓝湖面板->登录->上传，即可自动标注
3、选中要作为切图的图层 -> 蓝湖面板->切图页签->标记为切图->上传，即可自动切图

蓝湖交互设计（项目->设计->上方-交互原型）
1、框出感应区域，选定跳转目标
2、左侧-演示