超实用!帮你在线创建图表/流程图的Gliffy - 优设-UISDC

超实用!帮你在线创建图表/流程图的Gliffy

2015/10/14 41971评论区

online-diagram-and-flow-chart-1

编者按:今天@不到布 给同学们安利一个超实用的在线神器,可以创建流程图、UML图、线框图、BPNM、组织架构图、网站地图等各式图表,还有很多贴心功能,来一一感受下。

之前写醍醐灌奶酪的时候,做了一张很大的图。可以说,当时写文查资料只占那篇文全部精力的一半,剩下一半则是作图 ><。

在我记忆里这种图用 Axure 或者 AI 也不是不能画,但是好死不死我电脑里并没有这两个软件也并不想装。我相信万能的互联网会给我答案!经过一番筛选,我也成功找到了心仪的它 XD,它就是——Gliffy。

Gliffy是可以在线创建流程图、UML图、线框图、BPNM、组织架构图、网站地图等各式图表的工具型网站。可以同步Google、微软以及著名不存在网站帐号,也可以使用邮箱注册。免费用户有30天无限制试用期,试用期过后,部分组件会被锁定(主要是UML和线框图的部分),不能保存私有图表,并且保存图表限制为5张。对于大部分普通用户来说是足够了。

dg20151014

可以在首页直接点START DRAWING或者先登录帐号都可以开始绘图,登录了帐号才能保存图表哦~新建图表后的界面是这样的

最上面两行分别是菜单栏和工具栏,左边是组件库,右边最大的空白区域就是编辑区了。

画图的方式也非常简单…就是把左边组件库的组件,拖~~~到右边来就可以了。选中组件的时候,这个组件右边会出现

这样的按钮,点开左边的按钮之后就是组件属性设置:

应该还挺容易看明白的吧…第一排从左到右分别是填充颜色,边框(线条)颜色,边框(线条)粗细,边框(线条)种类,渐变(它的渐变是自动的,不能手工调整),投影(同样不能手工调整),透明度。下面则分别是坐标尺寸旋转角度以及锁定功能。

同时选中多个组件的时候,设置工具就会变样,打开之后则是多了一排对齐工具,熟悉任意一种绘图工具的同学应该都会熟悉这些图标的意思,不明的话点点看就知道了。

属性设置右边的A字按钮,顾名思义就是修改文字设置的。只要双击任何一个组件,就可以在上面添加文字(如果是连接线,则可以添加多段文字,你在哪双击的,就会在哪添加,添加好的文字位置也可以拖动修改),虽然不能设置文字边距这些,但是文字位置、对齐方式这些还是可以修改的。

另外它虽然提供了字体字号的修改工具,但是这个工具对中文的支持性…很一般,默认导出的图片只能是宋体(windows),当然你也可以选择导出svg然后再去改代码或者进AI编辑。

而说到连接线,则要使用 Gliffy 提供的连接工具了:

从左到右分别是 1.撤销/重做;2.组合/解散组合;3.置于最前/置于最后;4.超链接工具;5.弹出框工具;6.格式刷;7.文字;8.形状;9.连接/直线;10.选择;11.移动画布;12.缩放;13.放大/缩小;14.自动辅助线;15.网格;16.对齐网格;17.主题;18.图层。

选择连接工具(9),组件上就会出现很多小十字,鼠标挪过去之后,对应的十字就会变成绿圈,点一下并拖动到想要连接的另外一个组件上去就可以了。之后要记得选回到选择(10)状态,单击连接线,就会出现

这样的编辑按钮,同样点左边的,就会出现属性设置的窗口。

前两个分别是初始箭头和结束箭头的样式,最后一个type则是线型,有直线、折线、圆角折线、曲线四种选择。

最后我要盛赞它的主题…在工具栏上点开主题按钮(17)之后,界面右边就会出现默认主题的选择

鼠标悬停就可以查看样式,点一下就可以应用,非常方便,重点是,都还挺好看的。

全部搞定之后,就可以导出啦。格式有PNG、JPG、SVG和 Gliffy 可选。PNG并不是透明背景的这一点不是特别好…当然导出svg也完全没问题。

PS:除了我上述这些,Gliffy 还带有表格功能、图层管理、插入图片、直接打印等等其他功能,因为我没用过,就不多说了 XDD 更详细的功能说明可以参考他们的使用说明,虽然都是英文的,但是配图很多不怕不懂~

当时为了货比三家,也找了很多其他的在线工具,去掉使用 flash 的网站之后…就没剩几个了。这里比较推荐使用的是Draw.io,优点是完全免费,缺点是需要自备梯子以及主题不好看 =3=。另外如果只是结构图或者脑暴图,也可以选择各种脑图工具,比如百度脑图,优点当然是操作简单,缺点也是由此而引发的自定性差。

BTW,请不要在网络上保存涉及公司机密的文件,你懂的。

【优设免费神器推荐】

 终于等到你!功能强大难以想象:
《免费了!切图标记外挂神器ASSISTOR PS深入解读(上)》
《免费了!切图标记外挂神器ASSISTOR PS深入解读(下)》

已经有设计师用上了我会说?
《SKETCH神助攻!无代码做动效神器HYPE3入门教程》

两枚功能精悍的神器:
《设计神器两枚!随机生成用户头像的PS插件+布局神器SHOELACE》

投稿者:@不到布

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量102万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/online-diagram-and-flow-chart

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 优设大课堂 转场动效 设计师 扁平化设计 交互设计师 界面设计 排版布局 职场 平面设计 设计师专访 素材下载 视觉设计 设计流程 配色 web前端开发 用户体验设计 AI教程 设计理论 海报设计 字体下载 神器下载 设计规范 设计趋势 psd下载 动效设计 图标设计 产品设计 logo设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里