切图崽的自我修养-[TOOL] 用Omnigraffle绘制UML

前言

不会画图的程序员不是好产品经理

喜欢装逼有品位的程序员都有一颗产品经理的心,但印象中产品经理经常要画一些奇奇怪怪七七八八的图,在请教了一些立志做产品经理的程序员之后,发现他们都有一套自己喜欢用的精致小巧的工具,其中经典的一套为Balsamiq mockups(线框原型)+Omnigraffle(通用图形)+Markdown(文本编辑)+Keynote(演示汇报)的Mac全家桶. 满满的都是逼格有没有.

所以今天稍微鼓捣了一下Omnigraffle,发现真的非常好用,暂时贴上一点点心得,慢慢补上一些前端程序员经常用到的图表绘制的方法.

常用快捷键:

  1. 移动:v

  2. 形状:s

  3. 线条:c

  4. 文字:t

  5. 格式刷:w

  6. 磁化:m

  7. 缩放:z

  8. 连接图:d

P.s: 按住快捷键不动可以暂时切换到该快捷键对应的功能状态,另外同时按下opt键会有配合效果. 比如格式刷,按住opt+w,再单击某个元素为暂存某个元素的样式. 直接按住w,再单击某个元素,就是把格式刷暂存的样式应用到这个元素上


流程图

Ominigraffle有流程图的样式模版,点击文件->资源浏览器->型板->软件->流程图,里面有流程图的基本样式. 然后根据具体流程逻辑补上连接线即可
切图崽的自我修养-[TOOL] 用Omnigraffle绘制UML_第1张图片

切图崽的自我修养-[TOOL] 用Omnigraffle绘制UML_第2张图片


树状图

切图崽的自我修养-[TOOL] 用Omnigraffle绘制UML_第3张图片

切图崽的自我修养-[TOOL] 用Omnigraffle绘制UML_第4张图片

  1. 双击工具栏中的连接图按钮(快捷键d)

  2. 在页面空白处点一下,生成一个节点

  3. 选中某一个节点,什么都不按在空白处点一下,会生成这个节点的子节点

  4. 选中某一个节点按住option在空白处点一下,会生成这个节点的兄弟节点

  5. 选中一个节点,按住shift在空白处点一下,会生成这个节点的父节点


结语

鼓捣了一阵子才发现,使用Omnigraffle熟练的掌握快捷键和基本操作就够了,很多时候我们并不会自己去从无到有构建具体样式,而是会去借鉴别人的stencil,即图形模版. 你工作中想要画的图,不管是UE/UX/流程图/思维导图/还是UML, 社区里都有一些精美的模版,你只要把这部分模版的样式拷贝下来,根据自己的逻辑应用到自己的图里就好,这能让我们更加专注于图形本身的逻辑和流程,而不是纠结于图形的样式.

分享几个stencil的下载站点,当然有些精美的stencil并不是免费的,但在你需要的时候,一定会物超所值

https://www.graffletopia.com/
https://stenciltown.omnigroup.com/

你可能感兴趣的:(markdown,前端)