如何轻松玩转APP设计规范——从Axure画草图>PS复刻>墨刀原型简单交互
关于APP设计的
保存下两个网址借鉴：
huaban.com 花瓣网
s.ui.cn ui中国
一、App设计规范：
UI：是用户界面：User interface。就是操作逻辑，交互逻辑，界面美好化。就是界面。
UE(ux)：用户体验
Ucd：以用户为中心的设计。
APP开发流程：项目经理 原型图 风格确定 出图程序（前端安卓ios后台服务器） 测试 运营
HCI:人机交互
产品分为设计和代码部分。
前台
后台
设计师职能：图形设计 交互设计 用户体验 前端
交互设计：可用性 可视性 启发性 准确性
APP分类：
- 原生App
- 网页APP
- 半原生，混合app
Ui设计分类：
1.Wui web user interface网页
2.移动端UI MUI
3.未来界面设计 FUI
IPHONE4/4s 640x960
Iphone5/5s 640x1136
Iphone6/6s/7/8 750X1334
Iphone6p/6sp/7p 1080x1920
安卓
1080x1920
720x1280
二、图标 icon（512x512 分辨率72px rgb 透明背景 圆角矩阵 角度90）
App图标是在应用商店里看到的图标，也是进入app的入口；功能图标。
独特的图形：表现出产品的特性和功能；表达出产品的内涵；
用色：高饱和度 高明度
尽量少使用字体 字体变形：右键转换为形状 小白工具
禁止使用图片
适应不同场景
图标类型
三、视图
Ios界面
| 状态栏 ： 高度40px 安卓：50px |
| 导航栏： 88px 安卓96px |
| 标签栏：98px 安卓96px |
| 内容区域 |
列表视图
四、ios和安卓交互差异
1.硬件特性：ios上只有一个home键，一般作为app的出口，app icon为app的入口，通过虚拟按键进行返回，前进的操作。
2.导航机制
3.界面布局
4．操作栏
5.通知信息
6.操作方式
3dtouch
五、App设计规范
1.颜色规范：HSB模式（默认选择H状态）H色相 S饱和度 B明度
PS play
PS mirror
2.渐变
采用hsb模式可以保证渐变的亮部和暗部的色相一致，线性渐变
- 全局色
- 中性色：灰度色
B20 B40 B80 B100 文字颜色背景图 | B90 B94 B98背景颜色
通常使用于背景、文字、分割线、投影
- 主色 一般都是白色或者蓝色较多 辅助色 橙色墨绿色较多
- 全局色 点睛色或者点缀色（小图标次要文字） 用主色
- 出错，关闭，没通过：红色
通过，正确：绿色
审核中，待定:蓝色
纯白色：B100 #FFFFFF 列表表单背景或者对话框背景
B98 #fafafa 顶部导航栏或者操作栏 底部标签栏 工具栏
分割线：
B90 #e6e6e6
B94 #f0f0f0
文字用色：
主色 正文：B20 #333333 辅助色B80 #cccccc 提示用字 B60 #999999
辅助默认b40 #666666
图标用色： b80 #999999 b60 #cccccc
字体规范
Ios
中文：苹方 英文sf
安卓
中文：思源 英文 roboto
- 导航栏 操作栏标题
36px-40px 背景色 为灰色 b20
标题或者大按钮文字 30-36px b20
正文 24-28px b40
辅助性的文本 18-24Px b40 b60
在这个ps的阶段，还是要了解了一些ps的基本操作，根据布尔运算，可以制作出一些简易的复杂图形，每个图层都可以有形状，形状有描边和填充，描边有不同的形状、端点等。描边可以打断。但是现在版本的ps打断描边会影响填充的效果，为了解决这个问题，我们可以采用的是，两个一模一样的图层，下面的图层只填充不描边，上面的图层只描边不填充，这样打断上面的描边，也不会影响到底下的填充图案。要会简单的使用工具栏里的基本工具，进行去水印，改变颜色，调整明暗度，色阶，曲线局部的调整明暗度。污点修复工具，可以根据笔触大小周围进行调整。Ctrl+shift+t：按照上个ctrl+t运动的方式进行操作。我们也可以进行许多操作，比如将一个图片变成多张图片。将形状变得有厚度。然后就是是2d图片，主要就是蒙板的使用，达到类似渐变的效果，利用钢笔工具和锚点的使用 简单图片的布尔运算 达到想要的效果。如果遇到图片不规则的时候，可以将图片翻转过来进行操作，最后完了以后，在翻转回去就好了。最后就到了抠图，在抠图的过程中，有简单的图形，我们可以使用钢笔工具，钢笔工具可以画出直线和伸缩成各种曲线，然后他有个边，任何曲线都是以那个位切线。为了不影响下一个线段，我们可以使用alt将，钢笔工具末端最后一个切线删除，这样就不影响后期的操作，最后加入选区给一个蒙板，就可以实现简单的抠图操作了。但是图片不一定都是简单的图形，所以我们在有毛发的时候，就会使用更加细致的抠图：利用选区加入蒙板进行抠图。可以用快速选择工具将整个图片选择下来，进入（选择并遮住）（ctrl+alt+r）模式，选择黑白图片，将边缘的半径 选择到一定得大小，然后如果中间有镂空的样式，可以选择左边第二个工具。进行镂空操作。然后返回图层。新建一个透明图层，选择一个画笔，颜色选择图片边缘的颜色。也可以用加深减淡工具。
在通道抠图当中，同样用快速选择工具。选择通道面板，三键将通道加入选区，返回图层面板，加入蒙板，用加深减淡工具或者画笔，进行将不透明变得不透明。然后如果想改变色阶，可以点击蒙板（ctrl+l）调整色阶。三原色还原，就是web格式下，我们使用的是rga的颜色，红色绿色蓝色。先将通道的图片加入选区，然后分别新建图层，分别选择红255，绿255，蓝255，最后选择滤色。达到和原图一模一样的效果。
感叹ps的快捷键是真的多，但是吧，也有很多重复的快捷键可以类比，达到日常或者工作中的便利，也是很不错的。
附部分快捷键：
Ctrl+t：进行了许多图形的变换 按esc可以恢复到最初始的状态
快捷键：
Ctrl+N：新建文件；
Ctrl+O：打开文件；
Ctrl+1：显示效果100%；
Ctrl+0：将图片完全显示在工作区内；
Ctrl+shift+c：更改画布大小；
Ctrl+alt+z：撤销多步操作
Ctrl+r：显示或者隐藏标尺
Ctrl+；将参考线隐藏或者显示
Win+d：显示桌面
Win+e：打开我的电脑
F：隐藏所有面板
Alt+del：填充前景色
Ctrl=del：填充后景色
Ctrl+k：首选项
Shift：按住此建拖动鼠标可以等比例缩放 旋转也是15度一次
Alt+鼠标右键左右拖 ：可以改变指针大小
Shift+f5: 内容识别 确定
Ctrl+d：取消选区
在选中状态下 ALT可以减少选中区域shift 增加选中区域
Alt+s+t：变换选中区域大小 转动
选择图层中
Ctrl 多选（单个点击）
Shift多选（从第一个选到最后一个）
Ctrl+g：组合
Ctrl+shift+g：取消组合状态
Ctrl+缩略图:将图层加入选中区
Ctrl+a：将画布加入选中区
Ctrl+shift+t：按照上个ctrl+t运动的方式进行操作
一份好的设计完成之后，最先想到的就是它的交互效果，简而言之就是交互原型。现在我们就来介绍一款简单快捷的原型设计工具--墨刀。她支持创建 iPhone/iPad、Android、平板、watches、PC 各平台设备的原型，也可以自定义设备尺寸，提供一个便捷、真实又自由的创作环境。有提供 iOS、Android 等平台的常用组件及大量精美图标，原型搭建就像堆积木一样轻松。同时您还可以自定义自己的个性化组件，方便项目之间自由切换、使用。提供丰富的页面切换方式、交互手势及动画，简单操作即可创作仿若真实 app 的产品 demo。通过二维码、链接分享，可以在网页、移动端、墨刀预览助手 app 中快速查看产品 demo 的演示效果。
我们只需要准备你需要的页面图片，一整个页面的图片格式，直接拖拽到编辑区。
左边有四个功能区，我们最常用的就会是链接区域。把他拖进来，设置大小，就可以设置他的点击事件，转换到另一个界面。界面效果也可以改变。如果你是APP端，还可以添加全局手势，比如左滑右滑之类的等等。工作区左边有两个小滑块，可以上下移动，上滑块以上，下滑块以下，都可以固定住。意思就是说，如果是长图，就中间的那部分会滑动。工作区上的组合，模板和图标都相当的便利。
最强大的功能，就是他可以模拟操作，通过二维码、链接分享，可以在网页、移动端、墨刀预览助手 app 中快速查看产品 demo 的演示效果。虽然感觉很简洁，但是足够了。
其余也有许多功能，欢迎大家自己尝试。
Axure RP 8上创造草稿》》在PS复刻》》最后在墨刀上实现简单的交互。