OmniGraffle使用技巧汇总(20150717)

1. 自定义你的工作界面

在工具栏上右键,选择Customize Toolbar

你将会看到更多工具,试着拖拽它们到工具栏,然后看看都有什么用。

我最常用的Make Table 和Combine Shapes.

2. 样式刷(拷贝部分属性)

在 Omnigraffle 中,可以通过拖拽指示器到另一个组件上的方式将包括边框填充颜色等样式复制过去,也可以复制任意单一属性,大大节省了重复或近似组件的样式修改成本。

在Photoshop里面又“拷贝图层样式”的功能,原来在OmniGraffle里也有,而且还能单独拷贝一个物体的部分属性。(下图第二张是从别的博客里copy的)

如第一张图,在右侧面板的最下角部有当前选中物体的属性,直接拖拽属性到目标物体,就可以将当前属性拷贝到目标物体。

3. 网格、智能辅助线及参考线

除图示外,在画布空白处点击右键可以看到三个选项

对齐到网格,参考定义画布环节描述的网格设定,勾选这个选项后,调整形状大小就会使边缘贴近网格,拖拽位置时会根据形状大小让任意一边贴近网格。

智能对齐辅助线,勾选后,拖拽形状位置时,会自动寻找当前水平或垂直方向,边缘或中心能对齐的已有形状或画布中心线,推荐勾选

智能距离辅助线,勾选后,会自动寻找水平或垂直方向上临近的两个形状,在等距的时候给出提示,推荐勾选

4. 流程图

在用 visio 画流程图过程中最受不了的就是连接线不能随意控制形状位置样式,只能画几种特定的图,新建节点的操作步骤也很繁琐,而这一缺陷直接导致各种思维导图软件的崛起。在 Omnigraffle 中这些都变得很容易,只要记住几个快捷键,画起流程图来轻松写意。

5. 点击事件以及导出 pdf & html

在制作交互模型时,加入对点击事件的处理能很方便的演示我们想要的效果,Omnigraffle 支持的脚本不多,没有鼠标滑过,没有动画,只有点击跳转和点击显示或隐藏图层两种,对于一般的原型演示足够用了,尤其是图层显示隐藏,例如可以像图中所示将浮层中的内容放在图层2上,用关闭按钮用来触发隐藏,来实现图示效果。

在演讲模式、导出为 pdf 或 html 后都可以用来演示设定好的交互点击效果。在演示移动原型的时,我通常的做法是制作和屏幕大小一致的文件,设置好点击效果后导出 pdf ,在手机上用任意支持读取 pdf 的应用打开。(这里推荐多看,无页面翻转动画,无多余留白)

6. 画布和图层

和 Fireworks 一样,Omnigraffle 提供类似的画布和图层管理,方便将项目所有内容集中在一个文件中,每个画布可以单独设置页面背景、大小、单位、网格和参考线,并且可以通过共享图层让所有画布使用同一个母版,也就是说既可以当 Indesign 用,也可以当 PPT 用。

画布:Omnigraffle 默认使用 pt 来定义自身单位,在画布面板中用 1pt = 1xx 的方式来设置换算方式,目标单位可以是像素、厘米、英尺、千米等,意味着除了用来画用户界面,还支持用来画地图、家装平面图等任何大小的精准图形。

图层:可以将 Omnigraffle 中的图层理解为一个特殊的、可以批量隐藏或锁定的、可以直接转换为所有页面共享的群组,共享图层的名称会被标记为橙色,界面左下方的内容面板显示了每个图层内部的层叠顺序,如果文件导出时选择 psd,Omnigraffle 还会将图层内容合并成 photoshop 能读取的格式。

如图所示,利用共享图层这一特性,我们可以将画布设定为1024*768,并在共享图层的指定位置插入页码 (Edit→Insert Variable→Canvas Number) 等,模拟 PPT 的方式制作演示用文档。

7. 快捷键

点击 Help→Keyboard Shortcuts,查阅所有的系统快捷键,了解下面这几个就能满足大部分情景了

最常用的检查器面板,cmd+12345切换;

设置好一个常用的形状样式,右键点击加入收藏,以后按住 s 不放就可以直接画出来;

按住 t 不放点击空白处就可以直接新建一个文本块,双击任意形状也可以在里面插入文字;

放大缩小只能通过 cmd+shift+. 和 cmd+shift+, 右手需要离开鼠标不是很方便,我通常是按住 z 鼠标点屏幕来放大,option+z 点击屏幕来缩小(z这个操作在ps和ai里也通用);

快速复制一个形状 cmd+d,新的形状会在当前形状右下方一个网格的位置出现,比cmd+c之后在cmd+v省一步。

8. 无穷的模板库

在 Omnigraffle 中,工作文档 .graffle和模板文档 .stencil 的表现和编辑是完全一样的,可以很方便的将已经编辑好的文档组织整理后,复制粘贴到模板文件中沉淀,作为后期复用规范,如果搭配云同步工具使用,小型设计团队统一设计规范不再是难事。

除软件自身提供的一堆模板外,全球 Omnigraffle 爱好者们搭建了 Graffletopia 用来共享各自的模板 (部分收费),事实上如果你有足够的耐心和精力,所有的模板你都可以照猫画虎自己画出来。

9. 制作自己的图标库

Omnigraffle 自带的图形基本上能满足大部分需求,简单形状也可以用形状组合和钢笔工具来画, Graffletopia 上有很多其他人画好的形状图标,但面对具体项目的时候需要自己画图标时该怎么办呢?以下有几种方式可供大家选择

最快捷:直接粘贴图标图片进来,缺点是无法调整颜色,不可放大。

多色图标:从 AI 中直接拖拽图形进来,仍旧保持矢量可随意拖拽但不可调整颜色。

单色图标:将 AI 中画好的单色图标导出为pdf (File→Scripts→SaveDocsAsPDF) 后用 Omnigraffle 打开,可随意调整大小和颜色,非常适合图标库的建立。

10. 使用hex值定义颜色

Mac 自带的取色器只能在已有的颜色集里选或是靠肉眼在色盘里选,非常不严谨,还好有爱心人士提供了 Hex Color Picker 和 Developer Color Picker 插件来帮助我们精准设定颜色。Developer Color Pick

11. 左箭头和右箭头平移设置

在PS、AI、Axure中←和→都是移动1px,但是在OmniGraffle中会移动一个奇怪的数值,每次调整都比较麻烦。今天看了人家的tips,发现这个是可以设置的。

在Canvas inspectors面板中

首先将Units(标尺)调整成pixels。然后在Grid(网格)中,将主网格调整成100px,辅助网格也调成100px。这个数值是可以改变的,←和→移动的数值其实是(主网格/辅助网格)的值,所以只要这两个数值一样,每次移动就是1px为单位移动的。

12. 自定义调色盘

在画布中画出要定义的颜色或者颜色组

选中全部,右键copy,然后打开调色盘

选择New from Clipboard,即可将刚才copy的颜色组添加到色盘中。

如图,选择颜色的鼠标指针呈点状,可以很精确选择颜色。

再看调色板下方那条格子状的色栏,它是用来自定义颜色的,将想要自定义的颜色直接拖入其中某一个即可。

该色盘提供非常丰富的颜色,大家可以自行发现。唯一美中不足的是不能直接输入十六进制颜色,必须在Photoshop里面转换成RGB、CMYK或者HSB。

 

时间: 2024-08-12 13:24:51

OmniGraffle使用技巧汇总(20150717)的相关文章

js调试技巧 Firefox调试技巧汇总

Firebug入门指南        :  http://www.ruanyifeng.com/blog/2008/06/firebug_tutorial.html Firebug控制台详解: http://www.cnblogs.com/see7di/archive/2011/11/21/2257442.html    http://www.cnblogs.com/leejersey/archive/2012/11/27/2790998.html debugger: js中调用console写

移动平台3G手机网站前端开发布局技巧汇总

移动平台3G手机网站前端开发布局技巧汇总 作者:前端开发-武方博   发布:2011-05-10 09:11   分类:移动开发   阅读:120,618 views   7条评论 您或许正在或准备参与一个WepApp项目,您或许正在Google搜索mobile development相关的文章,您或许是一名专业的WEB前端工程师,您或许想学习Mobile前端开发方面的技术,如果您被我说中了,呵呵那么这篇文章将为您带来意想不到的惊喜!当您看到这篇文章时,哥已经默认认为您是一名资深的WEB前端工程

vim 折叠代码技巧汇总

以下命令输入的方式: 如zo命令,先按z键,松开后按o键即可展开折叠. 一.打开.关闭折叠 zo 展开折叠,只展开最外层的折叠. zO 对所在范围内所有嵌套的折叠点展开,包括嵌套折叠. zc 折叠,只折叠最外层的折叠 zC 对所在范围内所有嵌套的折叠点进行折叠,包括嵌套的所有折叠. zm 这将折叠更多 (M-ore).你可以重复 “zr” 和 “zm” 来打开和关闭若干层嵌套的折叠,不然得一个一个的用zc来折叠. 如果你有一个嵌套了好几层深的折叠,你可以用这个命令把它们全部打开: zM 这将增加

oracle sql使用技巧汇总

1.删除一个表的重复数据 所用的table_name一样 DELETE FROM table_name a WHERE rowid > ( SELECT min(rowid) FROM table_name b WHERE b.id = a.id and b.name=a.name); 2.导出一个用户的所有信息 exp scott/[email protected] file=d:/scott.dmp3.导入一个用户的所有信息 imp scott/[email protected] file=

微信各种BUG、技巧汇总

BUG: Android 4.0+微信4.5.1 会导致打开的网页文字非常小重现机型 galaxy s3, 三儿子 iOS6 下改变字号,JS获取的高度还是原始字号的高度 ios微信webview里 iframe 里的 input ,双击之后出不了菜单,导致无法输入 android 2.3+4.5微信webview刷新还没过期css的话,返回200,而不是304 无法打开自定义scheme 例如 <a href="tmt://" /> 公众账号 图文列表不认识中文文件名图片

C++指针数组、数组指针、数组名及二维数组技巧汇总

这篇文章主要介绍了C++指针数组.数组指针.数组名及二维数组技巧汇总,对于深入理解C++数组与指针来说非常重要,需要的朋友可以参考下. 本文较为详细的分析了关于理解C++指针数组,数组指针,数组名,二维数组的一些技巧.是比较重要的概念,相信对于大家的C++程序设计有一定的帮助作用. 一.关于数组名 假设有数组: 1 int a[3] = {1, 2, 3} 1.数组名代表数组第一个元素的地址,注意,不是数组地址(虽然值相等),是数组第一个元素地址,a 等同于 &a[0]; a+1是第二个元素的地

近期开发项目中用到的编码小技巧汇总说明(二)

之前有总结发表过<近期开发项目中用到的编码小技巧汇总说明>,虽没有涉及什么高大上的东西,但都是一些很实用的平时大家可能用到的知识,今天继续分享一些小技巧,欢迎大家了解,不足之处,可以直接评论留言谢谢! 接上篇序号 6.解决当同一个类在不同的项目中(命名空间不同,但类的定义完全相同的情况)使用BinaryFormatter进行序列化后再反序列化时出现找不到程序集的问题或反序列化的结果为null 原代码:(DataSetSurrogate分别在API项目中,客户端项目中都存在,类定义一样但由于不在

CSS 技巧汇总

CSS 选择符优先级 !important 声明>内联样式(style)>id 选择符(#id)>类选择符(.class)=伪类选择符(:hover )=属性选择符([attr] )>类型选择符(标签)=伪元素选择符(:first-child) sticky 定位问题 sticky 定位的元素受父级块级元素影响,其宽度继承的是父级的宽度,另外其只能显示在父级的内容区,当滚动距离超过其父级的高度时,即超过内容区后,其也会相应得被推出可视区域,使用时要注意.注:sticky 元素的父级

jQuery操作表格(table)的常用方法、技巧汇总

摘录自:http://www.jb51.net/article/48943.htm 虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下次再使用的到时候,会让你如鱼得水,提高开发效率 以下列出13个jQuery操作table常用到的功能: 1.鼠标移动行变色 复制代码 代码如下: $('#table1 tr').hover(function(){