切圖崽的自我修養－[TOOL] 用Omnigraffle繪制UML

mykurisu 發布于2019-08-01 15:48 / 1394人閱讀

摘要：前言不會畫圖的程序員不是好產品經理喜歡裝逼有品位的程序員都有一顆產品經理的心，但印象中產品經理經常要畫一些奇奇怪怪七七八八的圖，在請教了一些立志做產品經理的程序員之后，發現他們都有一套自己喜歡用的精致小巧的工具，其中經典的一套為線框原型通用

前言

不會畫圖的程序員不是好產品經理

~~喜歡裝逼~~有品位的程序員都有一顆產品經理的心，但印象中產品經理經常要畫一些奇奇怪怪七七八八的圖，在請教了一些立志做產品經理的程序員之后，發現他們都有一套自己喜歡用的精致小巧的工具，其中經典的一套為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/

云服務器 GPU云服務器切圖崽 Omnigraffle 圖像識別數學修養 tool

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50119.html

切圖崽的自我修養－[TOOL] 用Omnigraffle繪制UML

摘要：前言不會畫圖的程序員不是好產品經理喜歡裝逼有品位的程序員都有一顆產品經理的心，但印象中產品經理經常要畫一些奇奇怪怪七七八八的圖，在請教了一些立志做產品經理的程序員之后，發現他們都有一套自己喜歡用的精致小巧的工具，其中經典的一套為線框原型通用前言不會畫圖的程序員不是好產品經理喜歡裝逼有品位的程序員都有一顆產品經理的心，但印象中產品經理經常要畫一些奇奇怪怪七七八八的圖，在請教了一些立...

BWrong 2019-08-29 11:23 評論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