画图

初见 Principle,可能会觉得它像一个绘图工具。基本元素可以在 Principle中绘制,复杂的图形可以通过图片形式导入。新图层会默认归入当前的画布中。

画布 Artboards

Principle 的画布和其他画图软件类似:每个画布相当于一个独立的页面。画布的尺寸可以设置成各种设备的大小或任意你喜欢的尺寸。多个画布可能代表同一个页面,页面间只有细微的差别。例如:设计播放器的播放和暂停状态使用两个画布,两个画布只有播放和暂停的按钮不同。

矩形 Rectangles

点击左上角“矩形”图标或使用快捷键“R”来画一个新的矩形。如果想画一个圆,只需把圆角率调成一个非常大的数值。把图片拖到检查器的图片区中可以给图形设置图片背景。新矩形默认尺寸为44x44像素,这是因为在iOS中至少44x44的区域才方便点击。

文本 Text

文本和矩形的属性参数类似,只多了字体、对齐方式、字体大小。字体和对齐方式两个属性不能动态变化。

Principle 中使用的字体可能在iOS设备中不存在,所以这可能导致在设备连接“镜像”时不显示文字。使用常规字体或安装所需字体来解决这个问题。

图片 Images

在 Finder 中可以拖拽图片到 Principle 里 ,也可以直接粘贴 PNG 和 JPEG 到 Principle 中。如果你是 Sketch 用户 , 合并选区为一张 PNG 图片,粘贴到 Principle 即可。

当图片很多层级结构错综复杂时,会让人很烦恼。我们深知这一情况,正在着手解决。图片的长宽比默认是锁定的,你可以点击长/宽属性框中间的小锁头图标解锁。拖拽图片到一个矩形的图片容器中可以把图片变成一个矩形,点击图形容器并按DELETE键可以删除矩形的图片背景。

高分辨率图片

如果拖入的图片名以“@2x”或“@3x”结尾(例如logo@2x.png、menu@3x.png),那么导入的图片将会自动缩放为1/2和1/3大小。如果你已经导入了一个高分辨率的图片,也可以通过设置图片的长宽数值为1/2达到同样的效果。(进阶提示:检查器的属性输入框支持简单的数学运算,输入“320/2”可以方便的调节图片大小。)

从 Sketch 和其他软件中复制粘贴图片到 Princile 中默认是1倍大小。所以在导入 Principle 前,图片最好导出为高清分辨率来保证显示正常。

组合 Groups

组合在 Principle 里只是一个有确定填充的矩形图层。因此,组合将会有自己独立的位置和大小,不管是否小于子部件的边界。UIKit,Android,DOM 也是这样去绘图和运动的,如果你按使用 Photoshop 或 Sketch 的方式来使用图层可能会有意外情况发生。组合在制作更大的图层交互、旋转不同原点的图层、在每个图层的基础上实现连环动画是非常实用的。

裁剪/遮罩/剪辑 Cropping / Masking / Clipping

当你勾选“Clip Children”后,组合功能可以裁剪图层。如果想要圆形的遮罩,可以调节圆角率参数。