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

BWrong 发布于2019-08-29 11:23 / 3090人阅读

摘要：前言不会画图的程序员不是好产品经理喜欢装逼有品位的程序员都有一颗产品经理的心，但印象中产品经理经常要画一些奇奇怪怪七七八八的图，在请教了一些立志做产品经理的程序员之后，发现他们都有一套自己喜欢用的精致小巧的工具，其中经典的一套为线框原型通用

前言

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

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

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

常用快捷键:

移动:v

形状:s

线条:c

文字:t

格式刷:w

磁化:m

缩放:z

连接图:d

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

流程图

Ominigraffle有流程图的样式模版，点击文件－>资源浏览器－>型板－>软件->流程图,里面有流程图的基本样式. 然后根据具体流程逻辑补上连接线即可

树状图

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

在页面空白处点一下，生成一个节点

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

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

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

结语

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

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

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

idc机房托管私有云切图崽 Omnigraffle 图像识别数学修养 tool

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111610.html

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

摘要：前言不会画图的程序员不是好产品经理喜欢装逼有品位的程序员都有一颗产品经理的心，但印象中产品经理经常要画一些奇奇怪怪七七八八的图，在请教了一些立志做产品经理的程序员之后，发现他们都有一套自己喜欢用的精致小巧的工具，其中经典的一套为线框原型通用前言不会画图的程序员不是好产品经理喜欢装逼有品位的程序员都有一颗产品经理的心，但印象中产品经理经常要画一些奇奇怪怪七七八八的图，在请教了一些立...

mykurisu 2019-08-01 15:48 评论0 收藏0
切图崽的自我修养－[TOOL] 用MockJs模拟数据

摘要：用前后端分离的开发模式，前端和后端约定好接口格式之后，前端可以用模拟返回数据，从而可以完全脱离后端进行开发安装使用这里作用等价于拓展周杰伦林俊杰邓紫棋方大同自定义的拓展函数同理，用占位符和调用具体的函数等价可模拟整形数组的长度和值可模拟某一 MockJs 用前后端分离的开发模式，前端和后端约定好接口格式之后，前端可以用MockJs模拟返回数据，从而可以完全脱离后端进行开发安装 npm...

Jaden 2019-08-29 11:25 评论0 收藏0
切图崽的自我修养－[TOOL] 用MockJs模拟数据

摘要：用前后端分离的开发模式，前端和后端约定好接口格式之后，前端可以用模拟返回数据，从而可以完全脱离后端进行开发安装使用这里作用等价于拓展周杰伦林俊杰邓紫棋方大同自定义的拓展函数同理，用占位符和调用具体的函数等价可模拟整形数组的长度和值可模拟某一 MockJs 用前后端分离的开发模式，前端和后端约定好接口格式之后，前端可以用MockJs模拟返回数据，从而可以完全脱离后端进行开发安装 npm...

bergwhite 2019-08-20 11:29 评论0 收藏0
切图崽的自我修养－[TOOL] 用MockJs模拟数据

摘要：用前后端分离的开发模式，前端和后端约定好接口格式之后，前端可以用模拟返回数据，从而可以完全脱离后端进行开发安装使用这里作用等价于拓展周杰伦林俊杰邓紫棋方大同自定义的拓展函数同理，用占位符和调用具体的函数等价可模拟整形数组的长度和值可模拟某一 MockJs 用前后端分离的开发模式，前端和后端约定好接口格式之后，前端可以用MockJs模拟返回数据，从而可以完全脱离后端进行开发安装 npm...

Eric 2019-08-01 15:47 评论0 收藏0