(前情提要)
筆者個人之前在windows底下, 用過感覺最好的UML (註1) 繪圖軟體為 software ideas modeler,
在繪圖的流暢感以及快速鍵的提示在使用上滿便利的, 繪製出的圖形與線條也較為自然不僵硬、配色也好看,
(從官網上擷取一張圖供參考, 更多說明可參考官網連結, 需注意non-comercial才能免費使用)
但隨著慢慢養成繪製UML圖習慣後, 開始想擺脫windows的束縛,
(遵從我命袪除邪惡解除解開束縛重生吧前鬼～)
也隨著雲端工作術的多元發展, 開始想找尋一套跨平台、雲端作業的UML工具,
這時候試用了一些網路上推薦的軟體最後選擇了draw.io
使用draw.io的好處是僅需要有Web Browser即可使用, 後端儲存的Cloud Server選擇性也多,
首先是選擇愈使用的cloud server, 筆者僅使用過google drive (但選擇server的部分並不影響使用, 僅檔案存放的位置不同而已)
選完之後會提示User同意跟server做認證的動作,
之後即可以點選 [Create New Diagram] 或是 [Open Existing Diagram],
選擇[Create New Diagram]則會提供多種 template (或空白) 供選擇作為畫布, 也可自行輸入 template 的網址供載入,
當打開想要的template後剩下編輯方式其實就與一般 Office 軟體的操作相當接近, 所以這邊就不贅言多做編輯上的介紹。
介紹一些編輯以外的功能
圖層的使用, 使用過類似PS的繪圖軟體應該對圖層都不陌生, 有了圖層的概念可以對畫布上的元件分門別類,
ex.
同樣的手機Mockup (註2), 可以提供多套不同風格的顯示元件, 透過切換顯示的圖層預覽在相同操作的流程圖使用不同風格元件構成的效果。
聊天功能, 因為我只是信手玩了一下, 所以我的猜測應該是透過[檔案]->[分享], 選擇分享的朋友之後,
可以一同參與互動的功能 (總不會是自己跟自己聊天吧)
再來是介紹我們繪圖時可使用的工具
操作畫面的最左邊有可以加入畫布上的元件, 當你需要的元件沒有在現成的選單上出現時,
可以透過以上標記的兩種方式擴充
1. load more
點擊之後會秀出全部可以支援的default icon, 可以透過勾選擴充左邊的工具欄
2. Search
當你在預設的工具中都無法找到需要的圖, 此時可以試著在 Search的欄位可鍵入所需icon的關鍵字,
找尋網路上提供的元件並直接插入你的畫布中。
完成圖表後, drawio 所提供的匯出格式也相當足夠。
最後以筆者個人之前突發的idea用drawio拉的Mockup截圖作為ending, 是不是很方便呢。
註 1. Unified Modeling Language, 用以提供 IT 人員在交流技術上的共同語言, 想像今日如果需要跟外國人士進行溝通,
我想大家應該多半會選擇使用英文而不會各自使用方言單靠語氣來腦補, 而在交流技術的內容上為了達到精準且簡化各自解讀產生的溝通成本,
而制定了這樣的語言, 而UML圖則是這樣的語言的具現化的表達方式。
( 更多內容可以參考 UML入門：統一建模語言入門 )
註 2. Mockup 是介於產品跟草稿中間的概念示意圖, 看過網路上對UI/UX有經驗的設計師提供的定義我消化整理如下
Wireframe (草圖, 僅存在框架, 甚至缺少各元件的絕對位置關係)
Mockup (已經有版面的內容且具備精準的元件關係, 但文字的內容或照片可能來自於非真實的資料, 僅作為示意, 且非動態可操作的表現方式)
Prototype (強調動態可互動的呈現方式來示意, 可以是wireframe或mockup的進階產生, 差別只是在於畫面的精緻程度)
留言列表
