online-diagram-and-flow-chart-1

編者按:今天@不到布?給同學們安利一個超實用的在線神器,可以創建流程圖、UML圖、線框圖、BPNM、組織架構圖、網站地圖等各式圖表,還有很多貼心功能,來一一感受下。

之前寫醍醐灌奶酪的時候,做了一張很大的圖??梢哉f,當時寫文查資料只占那篇文全部精力的一半,剩下一半則是作圖 ><。

在我記憶里這種圖用 Axure 或者 AI 也不是不能畫,但是好死不死我電腦里并沒有這兩個軟件也并不想裝。我相信萬能的互聯網會給我答案!經過一番篩選,我也成功找到了心儀的它 XD,它就是——Gliffy。

Gliffy是可以在線創建流程圖、UML圖、線框圖、BPNM、組織架構圖、網站地圖等各式圖表的工具型網站??梢酝紾oogle、微軟以及著名不存在網站帳號,也可以使用郵箱注冊。免費用戶有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

點贊
收藏 1

發表評論 快來秀出你的觀點

還可以輸入 800 個字
 
 
載入中....
相關推薦
評論 收藏