除了做幻灯片、画原型，你还能用 Keynote 做一张精美的流程图

之前大热的手机游戏 Lifeline 发布，第一时间购入，走了几遍流程，很喜欢这种用选择决定故事走向（和主人公生死）的过程，于是就突发奇想，想要用流程图把整个游戏的选项展现出来。怎奈何没有找到合适的软件／服务来实现这个愿望。

关联阅读：比画面更重要的是氛围，没有画面的文字游戏：生命线 Lifeline

典型的 Lifeline 游戏方式：用选择决定故事走向（和主人公生死）

其实各个平台上都有不少制作流程图的软件：Windows 下最好的莫过 Visio，macOS／iOS 则有 OmniGraffle，网上也有很多在线服务，比如著名的 ProcessOn，还有百度脑图，甚至 PowerPoint 都可以……但这些都有各种缺陷：

不想切 Windows，所以 Visio 出局；
OmniGraffle 太贵，拿来偶尔画个流程图实在是大材小用；
在线服务对 macOS 自带的手势支持不佳，离线还没法用；
macOS 上的 PowerPoint（Office 全家）都不跟手。

其实，macOS 上免费的 Keynote 足以满足简单的流程图绘制需求。这里就以 Lifeline 为例，给大家介绍一下 Keynote 制作流程图的基本步骤，以及其中的一些技巧。Lifeline 之庞大（而且第一代还不支持撤销），人尽皆知，因此，本文所作的流程图，仅涵盖前三层选项作者所见的部分（也就是一路只选第一个选项）。

最终成品

制作基本部件

最基本的流程图需要以下部件：

始末框，用来规定流程图的起点和终点；
输入／输出框，用来描述流程图输入什么内容，输出什么内容；
判断框，根据框内条件进行判断，可以实现分支和循环；
过程框，用来描述某一个过程，可以是选择的选项，也可以是运算的方式。

这些部件，使用 Keynote 自带的形状就可以实现。按照一般标准，始末框的形状是两端为圆形的矩形，可以创建一个圆角矩形，调整好大小，再拖动圆角矩形左上的绿色控制点至极限即可。输入／输出框则可以通过矩形和两个直角三角形，在界面右侧「格式」选单的「排列」标签下，使用「混合」实现。

接下来，需要给框加上文字，有两种方法实现：可以单独创建一个文本框，放在框体上，改变文字；也可以双击框体，便可以在框体中添加文字。两种方法各有优劣，前者文字不受框体束缚，但需要多管理一个文本框，结构复杂的话对操作有一定要求，而后者可以减去多余的部件，但添加的文字受框体束缚，且图形内边到文字的边距较大，文字一但较多，显示效果可能会不理想。

风格化

流程图要想「好看」，风格化必不可少，尤其是有突出主题的流程图，更是要注重风格化，不然，就很容易「泯然众人」了。本文要做的这张流程图，就决定以 Lifeline 的美术风格和元素为基础，进行风格化的设计。

首先是框体的颜色选择。Lifeline 中主要有三种按钮状态：确定、取消和未选。这三种样式分别可以对应已选选项、未选选项（都是过程框）和选择点（判断框）。对应的颜色可以通过对游戏截图拾色得到：

接下来是形状。游戏中，每种按钮都可近似为两个圆角矩形堆叠 + 偏移，具体的框体也会如此制作，浅色在上，深色在下，上下错开 10pt。

推荐用单击改变 Y 值，这样改变的幅度可控

还有就是框与框之间的连线。这里的颜色参考的是加载对话时的省略号，届时将用浅色作连线的颜色，并会将省略号置于选项和分支的连线旁边，表示此处有对话。

各种框体、连线和省略号的样式如下图：

最后一步就是背景。为了营造「好像是在玩游戏」的感觉，流程图的背景也参照游戏的界面进行设计。背景主要包括外框、底层和螺钉三部分，具体的取色和制作过程不再专门介绍，仅提供结构图。

当然，这部分也不是必须的，这里做出来只是为了追求成品的风格和美感。各位读者制作流程图时，背景这类非核心要素，可以视具体情况决定去留。

注：最终成品的大小为 1500pt * 1500pt

组合

由于目前所做的部分没有「结束」框，一直向外展开，最好的排布方式是从下往上布局。最下面一层总共应有2 ^ 3 = 8个过程框，对框体的大小限制较高，所以有的选项不一定能写明全部文字（判断框尤甚）。

另外，接下来的操作，强烈建议全程开启对象列表⇧⌘L，方便操作；开启之后，记得将背景层锁定（单击背景成组右边的小锁）。

对象列表是在 Keynote 之前某个大版本更新中加入的功能，类似专业应用的「图层」，可以方便地安排元素的前后顺序，还可以锁定、重命名、查看组合……关于对象列表的具体介绍，参见苹果官方的帮助文档。

第一步，拖入一对过程框和一个判断框，将过程框编组，并将判断框放在编组上方，居中对齐。将判断框与两个过程框分别连接（右键／双指／control单击 > 添加连接线）；

第二步，将这些部件编组拷贝，并保证过程框排布均匀（组与组之间间距可以适当收窄，毕竟是从下往上做）；

第三步，选中所有的连接线，有两种方法：

框选；或者
单击对象列表右下角的「过滤」按钮，条件选「线条」。

选中后（不要⌘A，不然会选中全部元素），在右侧「格式」窗口的「排列」标签下，将连接类型选为「直角」，并调整连线形状；

第四步，重复以上步骤，一直堆到第一层，也就是「开始」框。中间注意有的连线类型要选「直线」；

第五步，调整所有线的样式，并在直线的旁边加上省略号，表示此处有对话；

第六步，修改框体内文字内容和样式，再加上一些修饰内容，就大功告成了。

总结

正如我在「Keynote vs 预览：原生简单图片标注对决」中所说，：

（当然最主要的还是，Keynote 起初就不是用来干这个的。）

Keynote 毕竟只是一款演示文稿制作软件，不能拿专业的作图软件来要求它。然而，作为一款免费的演示文稿软件，能做到这个水平，也确实值得我们去深挖、摸索，不断挑战它的上限——保持这种探索、折腾的精神，也不愧对「少数派」之名。

除了做幻灯片、画原型，你还能用 Keynote 做一张精美的流程图相关推荐

连设计图都不会画，你还想做“系统架构师”？
点击上方"CSDN",选择"置顶公众号" 关键时刻,第一时间送达! 作者简介:互扯程序,某互联网公司 P8 级专家攻城狮,曾参与过央视全台网的研发工作.目前正在 ...
画原型时需要注意什么？
这里是修真院pm小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析pm知识/技能,本篇分享的是: [画原型时需要注 ...
你会先写PRD，还是先画原型？
道路很远, 脚步更长: 肩挑凡世, 拳握初心. 我们要在发展中解决问题. 大概是2020年初,我和公司领导拜访一国企的某处长,向他汇报我们的系统建设,他是我们的甲方,也是我们双方合作的主导者,那次给我 ...
产品经理应该先写需求文档还是先画原型？
先做模型,再画原型,最后PRD 模型:对产品形态结构的梳理,包括功能模块,逻辑关系,信息架构,业务流程等,可以用脑图,use case图,业务流程图来表示,根据不同产品,产出物的侧重点不同.但模型很 ...
作为产品经理的你，画原型图时崩溃过吗？
身为一名高质量PM的你,经历过这种绝望吗? 为了让原型图美观一些,你纠结各种细节,但与此同时,效率低.工作周期延长这必定是你的锅:为了让原型图逼真一些,你思考各种组件布局,结果leader一句话让你回 ...
画原型图的几大坑，你被埋了吗？！
写这篇文章的原因呢,是因为终于选股宝不是只有一个产品狗惹,最近招了个实习生小盆友帮忙.然后捏,懒癌发作,就想把自己不想画的电子原型稿交给小朋友做(暂时先我画手稿,他画电子稿).不过,毕竟是没有在实际的 ...
初试Axure 做Web 界面原型
好久没搞项目了,最近帮手加入专业镇系统,试一下用Axure 来做需求界面原型给用户确认了,再让开发人员进行开发: 配置先写page note page formating 可以做一些全局设在, ...
画原型全靠野路子？来看看规范的原型长这样
最近,墨墨姐后台经常收到一些刚刚成为产品经理的刀友反馈: 因为从业时间短.项目经验少,在画原型时常常会遇到这样或那样的问题: "领导常说我画的原型好丑,还不规范--" " ...
画原型前需要思考的一些事（上）
本文由作者张集群发布于社区产品设计,绝不是简单的画原型.写文档,而是充满匠心精神去制造一个真正产生效用的产物,为企业产生价值并驱动运营形成良性循环,企业发展基于有效整合任意一环的力量,产品设计起 ...

除了做幻灯片、画原型，你还能用 Keynote 做一张精美的流程图

制作基本部件

风格化

组合

总结

除了做幻灯片、画原型，你还能用 Keynote 做一张精美的流程图相关推荐

最新文章

热门文章