前言
今天的分享不是幹貨，是錦上添花的軟技能。作為一個開發，日常工作中免不了要畫一些圖，無論是技術架構圖還是業務流程圖。基於個人的一些經驗，分享一下我的作圖方法，給大家一點思路提供參考，希望在未來的工作、生活中都能有所幫助。
一、圖例
1. 程式碼實作圖
2. 技術架構圖
3. 業務流程圖
4. 技術鏈路圖
5. 互動時序圖
Tips：以上圖例均用語雀畫板創作
二、好圖的定義
結構清晰：觀點明確、主次分明、內容清楚
外表美觀：有更多的瀏覽欲/閱讀欲
內容完整：一張圖內容自閉環
三、關鍵點
如何讓圖結構更清晰？具有設計感，設計四大原則。
如何讓圖外表更美觀？具有美感，色輪的運用、黃金分割。
如何讓圖內容更完整？以終為始的設計，使用者為先的思想，資訊補全/添加標註。
1. 設計感：設計四大原則
親密性： 實作組織性（讓有關系的元素挨在一起，有區別的元素分開）
對齊：
使頁面統一而且有條理（元素與元素之間存在一些對齊效果）
對比：
增強頁面的效果、有助於資訊的組織（元素與元素之間存在一些對比效果）
重復：
更統一，增強視覺效果（讓類似的元素存在一樣的效果/樣式）
將這些原則套用到圖的線、塊、面上。
Tips：世界著名設計師羅賓·威廉姆出版過一本暢銷書，叫做【寫給大家看的設計書】，裏面提到了設計四大原則：親密性、對齊、對比、重復，四大基本原則涵蓋了品牌、電商、包裝、UI等諸多領域，成為眾多設計從業者必須掌握的設計原則。對於非設計的同學，也應該了解一下，提升自己的設計感。
2. 美感：色輪的運用
美術三原色： 紅黃藍（在三色場景下，套用最多最廣泛的顏色）
互補色：
一種作為主色，另一種作為強調（在二色場景下，用互補色）
等距三色組：
會讓人愉悅的顏色組合（在三色場景下，使用等距三色組具有愉悅感）
采用同層級的顏色：
具有和諧感的顏色組合（在多色場景下，采用同層級的顏色更具和諧）
Tips：【寫給大家看的設計書】裏面提到了對顏色的運用，我們要從色輪上找到顏色的運用方法。
3. 美感：黃金分割構圖法
黃金分割： 0.618（圖的整體大小采用長1.618寬1的黃金比）
費氏數列： 1，1，2，3，5，8，13，21，34，55，89……，當趨向於無窮大時，前一項與後一項的比值越來越逼近黃金分割0.618
Tips：黃金分割是指將整體一分為二，較大部份與整體部份的比值等於較小部份與較大部份的比值，其比值約為0.618。黃金比有嚴格的藝術感、和諧感，蘊藏豐富的美學價值，而且呈現於不少動物和植物的外觀。現今普遍很多工業產品、電子產品、建築物或藝術品均套用了黃金比，使其更美觀。
4. 完整感：以終為始的設計
思考先行： 以終為始的設計
列出所有要素：
所有能幫助看圖人理解的元素都要有，包括圖例標註、箭頭順序、標題、註解
使用者為先：
把自己當作看圖人，在沒有上下文的情況下能獲取到圖中多少資訊
在這裏我們要借鑒以終為始的思維模式，在作圖前我們要想清楚作這張圖的目的是什麽，是想要表達清楚什麽，以及需要哪些元素，最終實作的效果就是透過一張圖，就能完整地了解你的意圖和目標。
Tips：史蒂芬·柯維的【高效能人士的七個習慣】中，「以終為始」，是第二個好習慣。「以終為始」是以所有事物都經過兩次創造的原則為基礎的。所有事物都有心智的，即第一次的創造(mental /first creation)，和實際的，即第二次的創造(physical/second creation)。我們做任何事都是先在心中構思，然後付諸實作。正因如此，認定使命才顯得如此重要。
四、結語
了解了這4個關鍵點，再回頭看看第一部份的圖例，是不是有更好的體感了。最後，4個關鍵點只是提升你的作圖思維，具體XX架構圖/XX業務圖/XX流程圖/XX鏈路圖/XX時序圖應該怎麽畫，每個人實操畫出來的風格都不一樣，就像有的人喜歡黑字白底、有的人喜歡白字黑底、有的人喜歡深色、有的人喜歡淺色等等，但只要遵循 親 齊 比復四大原則、色輪的運用、黃金分割構圖法、以終為始的設計 這4個關鍵點，畫出來的圖就不會太差，快來試試吧～
> > > >
衍生閱讀
豆瓣讀書：寫給大家看的設計書
https://book.douban.com/subject/26657933/
維基百科：黃金分割
https://zh.wikipedia.org/wiki/黄金分割率
豆瓣讀書：高效能人士的七個習慣
https://book.douban.com/subject/5325618/
作者丨湘葉
來源丨公眾號：阿裏雲開發者（ID：ali_tech）
dbaplus社群歡迎廣大技術人員投稿，投稿信箱： [email protected]
