皮皮-
界面Interface 绘图Canvas 屏幕中心区域是绘图空间，绝大部分工作将会在这里完成。它包括所有画布和画布间的跳转关系。被选中的画布将会以绿色边框高亮显示。 预览Preview 预览功能可以随时操作预览你的设计草稿，它默认锁定在屏幕右上。当然你可以拖拽预览窗口到软件窗口外解锁。点击关闭按钮即可重置预览窗口到工作区右上角。拖拽预览窗口四角可以改变窗口大小，窗口大于画布时，画布不会放大，但窗口小于画布时会等比缩小。 图层列表LayerList 图层列表在软件的左下，它显示了全部画布、子图层、图层间的层级关系。在图层列表中拖拽图层可以可以成组或解组。拖拽画布排序即改变画布在屏幕中的显示位置顺序。点击眼睛可以切换隐藏显示图层以便编辑，但不影响在预览窗口中的可见性。 检查器Inspector 工作区左侧，图层列表上方是检查器，在这显示了选中图层的各种属性，包括：对齐操作、X/Y坐标、长/宽、角度、缩放、透明度、圆角率、关联的图片、颜色填充、组合裁剪、水平/竖直操作。 动效视图AnimateView 点击顶部“Animate”工具按钮或点击画布间的跳转箭头即可打开动效视图。它通常用来调节切换动画的时间和动画曲线。 联动视图DriversView 点击顶部“Drivers”工具按钮打开动效视图。它通常用来创建逐帧的补间交互动画。 画图Drawing 初见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 当你勾选“ClipChildren”后，组合功能可以裁剪图层。如果想要圆形的遮罩，可以调节圆角率参数。 连续的交互ContinuousInteractions Principle内建了三种通用的交互：拖拽、滚动、翻页。并可以单独的只在图层的X轴或Y轴开启。 拖拽Dragging 开启拖拽后就能用鼠标点击按住移动图层来改变位置。轮播图、悬浮窗、探探，都是典型的拖拽案例。 滚动Scrolling 当一个图层有子图层时，可以开启滚动。当手指拖动滚动图层时，子图层会随手指移动，但父图层整体不会移动。地图、新闻列表、长文章都可以利用滚动实现。如果没有子图层时开启了滚动，那么系统会自动创建一个滚动图层组，很棒吧。打开“Clipchildren”选项后滚动到边界之外的部分会不可见。 翻页Paging 翻页和滚动很像，只不过翻页可以每次滚动固定的距离，这个距离和组合的大小一致。翻页可以用于图片切换、手机主页的图标翻页、或者任何卡片式翻页设计，最近这种设计非常流行。如果你想在页面间添加内边距，让翻页组稍稍比你需要的大一些，留空页面内容的边距。 事件Events 事件触发器用于在不同画布之间页面切换。点击图层或画布，你会在右侧发现“闪电”图标，点击图标会出现支持的事件列表。点击按住事件前面的空心圆，拖拽指针到想要跳转的画布就创建了页面跳转的一种交互。这时你会发现两个画布上面会出现一条箭头，从出发页面指向目标页面。 拖拽时如果指向当前的画布，会在右侧复制一份当前画布。值得注意的是如果把图层的透明度设置为0，那么这个图层就不能触发点击事件，是真的“透明”。 下面是事件的几个类型 点击Tap 点击是最常见的事件，多数用于可点击的按钮。触发非常简单：按下，松开，发射！ 拖拽开始DragBegin 当按住部件，开始移动时，就会触发这个事件。使用这个事件的前提是要打开部件的可移动属性(draggable)，如果在目标画布有同样名称的图层部件，不出意外完成拖拽事件后部件的位置就确定了。 拖拽结束DragEnd 拖拽图层部件之后松开鼠标会触发事件。同样在使用之前需要打开可移动属性。 滚动开始Scroll?Begins 当一个部件图层开始滚动时触发事件。使用前需要打开可滚动属性。 滚动释放ScrollReleased 当部件图层滚动并抬起鼠标时触发事件。注：此时滚动可能还没停止，只是鼠标松开了。这个事件同时对滚动和翻页起作用。使用前需要打开可滚动属性。 滚动结束ScrollEnded 当滚动完全停止时触发事件。这个事件同时对滚动和翻页起作用。由于必须完全停止后才触发事件，所以整个动画可能有很长时间的延迟等待动画完全结束。使用前需要打开可滚动属性。 按下TouchDown 当鼠标按下时触发事件。可以用于制作按钮的按下效果。 释放TouchUp 当鼠标抬起时触发事件。注：鼠标从外部按下，移入有事件的部件图层，这样是不能触发事件的。必须在带有事件的部件图层按下才可以触发事件。 长按LongPress 按住0.5秒后触发事件。 自动跳转Auto 当进入设置此属性的画布时，自动触发。多用于循环原型或复杂的多步骤动效。注意：只有当鼠标进入预览区域时才会触发事件。这一举措是为了节省电池寿命，和你的精神。 动画Animation 当触发事件时，Principle会自动创建两个画布之间的补间动画。 动画地图AnimationMappings 如果一个图层部件在两个画布中名称一样，Principle就认为这两个部件是同一个，继而根据这个部件的位移等属性变化创建补间动画。反之，如果在两个画布间没有图层部件名称相同，画布切换时部件就会突然消失或显示。 预设动画曲线CustomAnimations 动画的默认持续时间是0.3秒，默认曲线是iOS和OSX中使用的曲线。在动画视图(Animate)中可以调节设置。点击两个画布顶部的箭头显示该转换的动画视图，可以生成动画的图层部件及其属性以列表显示，在这个时间轴可以调节动画持续时长、出现时机和动画曲线。 关键帧Keyframes 在动画视图中，每条时间轴有两个关键帧，一个代表动画开始时刻，另一个是结束时刻。拖拽关键帧可以改变动画持续时间，拖动选区或用Shift可以批量修改。 缓和曲线EasingCurves 缓和曲线决定了以下动画相关属性的速率：移动会不会从慢逐渐变得越来越快？或是开始非常快，但接近终点时突然又变慢了？以上现象就是由缓和曲线去控制的。 在动画视图中点击时间轴右侧的下拉菜单，菜单中显示了预设的几种曲线，点击曲线名称可以在坐标轴里查看图形。 预设的几种曲线跟iOS和OSX使用的一样。你可以随时调节预设的曲线：拖动曲线的两个手柄，改变长短和角度，或者在下方直接输入坐标都可以自定义动画曲线。自定义曲线不会抹掉预设曲线，可以大胆使用。 弹性曲线Springs 弹性曲线模拟了物理弹性，和固定曲线那种从开始和结束的属性数值做渐变不同。它可以把一个元素的运动变成生动活泼。但也不能滥用，因为它会吸引人的注意力而打断思路。动画曲线的属性会根据持续时间自动的调节，所以只需微调关键帧即可改变动画的强度：越长力度越小，软绵绵；越短力度越大，干脆弹力十足。 可选择的属性OptionalProperties 动画视图中，图层名字后面有个绿色/红色方块。它可以切换是否允许一个属性在两个页面动画过度后变化。说白了，它把一个属性从上一个画布搬运到目标画布。Thisisusefulwhenappliedtoadraggablelayertoleaveitspositionunaltered.(暂时没用过这个功能不知道如何解释，以后更新) 联动Drivers 想制作带有交互的视差效果？想让一个图层在拖拽的同时旋转？联动功能可以实现。联动用关键帧链接了每个属性。和动画不同，动画发生在页面切换时，联动发生在同一个页面中。在工具栏点击“Drivers”可以当前画布的联动视图。 联动和典型的动画时间轴工作原理一致，唯一不同在于动画不是基于时间，而是属性的参数变化。 联动源DriverSources 想要创建联动，必须存在一个可改变的属性，这叫做联动源。可拖拽、可翻页的图层还有可选择的属性都可以作为联动源，在联动视图中列表显示。 可联动属性DrivenProperties 一旦有了联动源，你就可以用它控制其他属性。选择一个你想控制的图层，点蓝色的加号图标，选择一个你想做联动的属性。这时会以当前的属性参数创建一个关键帧。只有一个关键帧不起任何作用。 联动关键帧DriverKeyframes 和动画一样，联动需要至少两个关键帧才能有效果。水平拖拽灰色标记，然后再次点击蓝色加号按钮可以在时间轴当前位置创建另一个关键帧。千万别忘了修改第二个关键帧的属性参数。 导出Export 一旦完成一个工程，你一定想让全世界都看到你的成果。有以下几种方式可以实现。 视频录像和Gif动图VideosandAnimatedGifs 通过预览视图上的录制工具可以导出视频或Gif。当你点击右上角的录制按钮就开始录制预览视图中的全部操作(按住Alt键再点击可以在导出的视频中隐藏鼠标指针；按Cmd键可以切换显示鼠标箭头形状还是手指形状，在设计桌面应用时可能会用到)。开始录制后，再次点击录像按钮停止录制。 Gif设置 当你导出Gif时，你可以在下拉菜单选择或键入参数来设置下面几个预设格式： ·45% 输入一个百分数可以生成按百分比缩小的版本。并且这个设置会覆盖下面的设置。 ·134h 导出一个确定高度的Gif，是等比缩放的。 ·320w 导出一个确定宽度的Gif，是等比缩放的。 ·400w300h 导出一个固定大小的Gif，此时会缩放画布至合适的大小，并且会自动增加内边距和投影，还可以在右侧设置图片背景的颜色。 在设备上运行RunningonDevice 在手上把玩你的设计稿是最好的体验方法，它提供的体验和使用鼠标点按完全不同。下载PrincipleMirror在你的iOS设备上然后用数据线连接电脑。PrincipleMac版会自动发现已连接的设备，并立即发送当前的设计稿到设备上。使用快捷键Cmd+~可以快速切换两个设计稿。 iOS设备上的设计稿在断开数据线后可以继续运行。这可以让你更容易的把设计展示给团队成员。 Principle文件可以在iOS设备上直接打开。所以你可把文件发送给他人，或者让别人把设计稿发给你，一切就是这样简单。 动画参数AnimationValues 动画参数可以用在代码中。工程师可以非常简单的获取动画参数。 核心动画(iOS,Mac) 在这个例子中，我们给图层的x属性做了动画 floatnewValue=320.0f; floatoldValue=layer.position.x; //Movelayertonewposition layer.position=CGPointMake(newValue,layer.position.y); CABasicAnimation*animation=[CABasicAnimationanimation]; animation.fillMode=kCAFillModeBackwards; animation.additive=YES; animation.toValue=@0; animation.keyPath="position.x"; animation.fromValue=@(oldValue-newValue); animation.duration=0.3;//timevalueofsecondkeyframeminusthefirstkeyframe"s animation.beginTime=CACurrentMediaTime()+0.1;//timevalueoffirstkeyframe animation.timingFunction=[CAMediaTimingFunctionfunctionWithControlPoints:0.1:0.1:0.9:0.9];//these4numbersarefromthecurveselectorpopup [layerToAnimateaddAnimation:animationforKey:nil]; CSS3动画 div{ animation-duration:4s;/*timevalueoffirstkeyframe*/ animation-delay:2s;/*timevalueofsecondkeyframeminusthefirstkeyframe"s*/ animation-timing-function:cubic-bezier(0.1,0.1,0.9,0.9)/*these4numbersarefromthecurveselectorpopup*/ } 快捷键Shortcuts 图层Layers 添加矩形：R(Alt+R作为子图层添加) 添加文本：T(Alt+T作为子图层添加) 添加画布：A 组合：Cmd+G 拆分组合：Cmd+Shift+G 移到顶层：Shift+Cmd+] 上移一层：Cmd+] 下移一层：Cmd+[ 移到底层：Shift+Cmd+[ 编辑Editing 移动部件：方向键 快速移动部件：Shift+方向键 旋转部件：Cmd+拖拽"旋转"把手 旋转15°的倍数：Cmd+Shift+拖拽"旋转"把手 原处复制：Cmd+D 复制并移动：Alt+拖拽部件 选择器文本框：可以识别简单运算，如"320/2+10" 选择器标签：鼠标左右拖动可以快速调节数值 画布导航CanvasNavigation 移动画布：空格键+拖拽画布 放大画布：Z+点击需要放大的地方 放大画布：Cmd+= 缩小画布：Cmd+- 缩小画布：Alt+Z+点击需要缩小的地方 连续缩放：Alt+空格键+鼠标拖拽 完整显示：Cmd+1 选区完整显示：Cmd+2 把选区移至中央：Cmd+3 实际大小：Cmd+0 选择Selection 选择父部件：Esc 选择子部件：Enter 选择其他子部件：Tab 选择全部子部件：Cmd+A 预览Preview 重置原型预览：W 显示鼠标指针：Cmd(当鼠标在预览框中) 录制Recording 录像中隐藏鼠标指针：Alt+点击录像按钮 开始录像：Ctrl+V 开始录像(不显示指针)：Ctrl+Alt+V 常见问题FAQ Princile会有Windows/Linux/Android版本吗？ Principle和PrincipleMirror是利用OSX和iOS独有的核心技术构建构成的，所以很遗憾不会有其他平台的版本。 可以导出网页格式原型吗？ 考虑到网页性能的局限性，我们暂时没有计划开发这个功能。 什么时候会在MacAppstore上架？ 我们不打算在Appstore上发行，因为它的审核速度慢又严格，而且还要扣除30%的收入。在Appstore之外提供下载，我们可以频繁的升级，自由的增加新功能而不用经过漫长严格的审核过程。 Principle以后的发展路线是怎样的？ 我们不说对未来功能有什么规划。但是如果你有一些很好的想法，可以在应用内的feedback功能上提交，说不定以后的版本我们就会增加!
真可-
帕累托图（Pareto Chart），又称柏拉图、主次因素排列图等，是质量管理七大手法之一。之所以叫这个名字，是因为在概念上与帕雷托法则（Pareto principle）有关。在质量管理中，大多数的损失是由少数几个关键的质量问题引起的，而这些这些质量问题，往往又是少数几个关键的缺陷原因所导致的。使用帕累托图，可以直观地将影响质量问题的主要因素呈现出来，从而方便对质量问题作进一步的改进。 帕累托图中包含一个柱形图和一个折线图，有左右两个纵坐标，及一个横坐标。左边纵轴表示缺陷原因的频数，右边纵轴表示缺陷原因的累计频率，横轴表示影响质量的各项因素，按其影响大小，从左至右依次排列。直方柱高度表示因素影响大小，折线表示各项累计频率的连线。 二、帕累托图制作 假设我们已经在wps表格中制作出一个如下的产品缺陷原因次数分布表。 下面我们根据这些数据来制作一个帕累托图。先呈上最后完成的效果： 具体步骤： 1、选中单元格 B4:F11，点击“插入→图表”，“图表类型”选择“柱形图”，然后点“下一步”。 2、点击“系列”选项卡，删除“累计频数”和“百分比”两个系列。然后点击“完成”。 此时图表的样子： 3、选中图表，点击“图表工具”选项卡，在下拉列表中选择“系列‘累计百分比"”点击“更改图表类型”。在弹出的“图表类型”窗口中，选择“折线图”下第二行的第一个图表（数据点折线图），点击“确定”。 4、点击“设置所选内容格式”按钮，在弹出窗口中点击“坐标轴”选项卡，在“系列绘制在”组中，选择“次坐标轴”。 5、点击“数据标志”选项卡，在“数据标签包括”组中，勾选“值”。然后在“标签位置”中选择“上方”。 此时，帕累图已基本绘制完成：