App设计标准
字体
- No more than three fonts.
- “Helvetica” font is default
- minimal height is 11px
颜色选择步骤
- select a base color
- select secondary colors using harmony principles
- adjust tints, shades and tones
矢量图和位图
- 矢量图：图形
- 像素图：图像。
- 矢量图形通常是绘制出来的，而图像一般是拍摄获得的。
- 矢量图放大后不会失真
- Sketch是矢量图制作的利器，但位图处理较弱
PT和像素的关系
- Point (PT) - 表示独立于设备的像素点 (在Android上叫DP)
- 像素点: 相同Point的按钮，在Retina屏幕上的图片像素是非Retina屏幕的两倍,通过@2x后缀标识
iPhone resoulutions
The Ultimate Guide To iPhone Resolutions
iPhone size standard
iOS Human Interface Guidelines
Interface
Attribute of layer
- Allignment
- Fills
- Borders
- Shadows
Fill Color with existing one
点击色调盘中的 “+”，可以将采取的颜色存储起来
Export
All Version
Customize tool bar
Create iPhone art board
Functionality
Symbol
create and use Symbol
Symbol好比是个全局变量。创造出来后可以从库中调用。对库中的symbol所做的任何变动都会反应到实例中。
Symbol resizing
对于组合后的元素，如group or symbol,它们之间的相对关系有以下四种
要先选择”group”,再进行相关操作
Symbol override
可以只改变当前instance object的值，而不会直接修改symbol。
Rotate Copy
Siccer
Make Grid
Text
Text Style
类似symbol。创造出来后可以从库中调用。对库中的text style所做的任何变动都会反应到实例中。
create and organize text style
Use text style
Text convert to outline
将字体转为矢量图后可以采用渐变等图像的处理方式
Text font
Image
Image Property
Edit
双击图像
9-slice
只有在九宫格内的图像才能放大或缩小
Mask
重叠Mask
将两者重叠
调用mask
或者这样采用mask
最终效果
限制性的使用Mask
顶部的text可以完全显示
渐变Mask
Bool operation
Method 1.
将圆圈拖拽至矩形上，组合成combined shape
点击subtract
Method 2.
- 同时选择两个图层。
- 点击BOOL operation 图标，如下图。
- 拖拽某个图层，可以显示交集在变化。
Layer
Add Layer
- Insert —-> Click + shift 保证是正方形或正圆
- Insert —> Click + opt 是以鼠标为中心，而不是左上角绘制图
Choose Layer
- select layer —> option 看尺寸及在artboard的位置
- Select layer —> 点击眼睛标志 —> 隐藏图层
- Select layer —> Click + 方向键（左为宽度增大，右为宽度减小，同时按住shift变化10，否则变化1）
- Select beneath layer —> opt + cmd —> 选中下部图层
- Select layer with cmd or shift ——>点击 Group —>将所选图层归为一组
- Select layer + right click ——> Lock this layer ( cannot move)
Move Layer
- 移动时使用shift键 —>上下移动
- 按住图层，移动时使用opt键 - duplicate
- cmd + D — 重复上次的行为
Shape
Bezier curve
锚点
- 在线上点击，选择锚点
- 按住shift，选中所有锚点
- 按住cmd，锚点在原来两个锚点的中间
创建
闭合
矩形编辑
双击矩形，可以按住端点编辑其形状
Template
使用模板
采用自定义模板 - 先打开下载好的sketch文件，再存入系统的template文件夹
Extension
Content generator
Renamit
Measure
Notebook
Tips
取色技巧 with Sip
单独的页面设置调色板
导出的方式
- 直接拖拽图层到桌面
- 选中图层，底部Export
- 选中artboard,底部Export,同时可以选择”background color”
- Insert —> Slice 剪切图层
- 顶部Export all
命名技巧
在命名artboard或symbol时，采用”/“，这样导出会自动产生文件夹
设置grid
Shortcut key
需要设置的快捷键
- 对齐功能
- 分布功能
- 对齐像素功能
方法: System preference -> Keyboard -> Shortcut
如果有重复的，需要用 ->输入完整的路径
快速定位对象
- cmd + 1 = 显示所有
- cmd + 2 = 最大化显示
- cmd + 0 = 100%显示