毛標標開發日誌：讓圖片標注成為表達的樂趣

需求背景

毛標標說來好玩，本來是我想做一個給自己所有圖片類產品用的一個標注公共組件，沒想到做著做著，投入了很大的激情，反而被這個產品所打動，甚至愛上了用它發圖文的體驗，更愛表達了。

產品介紹

閒話不多說，直接進入產品介紹環節。

1. 首先它是一款圖片標注軟件，可以處理一般圖片、GIF、實況照片，原格式進原格式出，對於 GIF 和實況的標注會在上面加一層，不影響動圖本身；

2. 它有著全面的標注功能，有：

   1. 文本添加

   2. 畫線條（頭尾可設置箭頭樣式）

   3. 手繪線條

   4. 模糊

   5. 馬賽克

   6. 矩形

   7. 圓形

   8. 添加圖片

   9. 裁剪或擴圖

   10. 圓角

我挑選一些注入了很多巧思的功能來講。

文本添加

文本添加功能，是在朋友圈里看到了朋友小雲、小魚他們喜歡發直接在圖片上寫文字的圖文形式，忽然想到，如果我對一個圖片添加文本，只需要寫文案而不需要調整樣式和位置，那該多麼暢爽，於是做了這個自動排版的文字添加功能。它有幾個很巧妙的特性：

1. 自動避開圖片主體，找一個適合安放文本又不妨礙圖片主題闡述的位置。

2. 自動配色，會根據圖片中的關鍵色彩，搭配出文本的顏色，出幾套方案給你選，通常默認效果就相當不錯。

   

基礎屬性的調整就不說了，我在其中加了幾個比較特別的功能，相當獨特：

1. 主體繞排。使用這個功能，文字會沿著畫面主體（通常是人）的邊緣排布，寫出環繞的效果來。

   

2. 文字畫筆。文字畫筆相當於手動的主體繞排，更自由，更狂野，可以玩出很不一樣的花招來。

   

3. 自適應雙色。根據圖片的色彩，懸浮在上面的文字會逐字自動調整為白色或者黑色，起到一個反差強化的效果。

   

4. 微信氣泡對話。這也是最近做出來的一個效果，可以做出非常經典又搶眼的微信對話效果，首次使用的時候上傳一張圖當自己和對話方的頭像，下次就可以直接使用了。

   

手繪

1. 毛筆筆跡。手繪最值得一提的是我將此前做的一個毛筆筆跡 demo 引入了這個項目，於是在毛標標里，你可以使用非常逼真的筆跡手繪效果，就這一個效果就比市面上各種畫筆圈選靚麗了不止一個檔次。

   

2. 播放筆跡。更酷的是，如果你編輯的是實況照片，可以勾選播放筆記開關，最後生成的實況照片里，筆記是可以播放出來的，就像你寫的一樣。

   

圖片

插入圖片的時候是支持提取主體的，也就是你可以完成很多奇怪的拼圖～

其他

這個產品打磨了挺久，自己每天都在用，有很多交互上的巧思，比如：

1. 使用各種工具在圖片上操作的時候，UI 會隱藏，保證能看清圖片全覽；

2. 一邊畫一邊縮放圖片大小的交互不衝突；

3. 工具欄的排布，螺螄殼里做道場，千錘百煉。

4. 另外這個產品是 iOS、iPadOS、MacOS 三端可用的，在 MacOS 里針對 Mac 系統做了很多優化，比如拖曳圖片進去編輯、打開和保存都走 finder、以及各種快捷鍵支持。

價格

這個產品也是我第一個完全免費的產品，只設置了一個捐贈，如果你用得還不錯，可以一次捐贈 18 元人民幣，或者每年捐 18 元人民幣，支持我做更好、便宜的產品。如果不捐贈，也完全不影響使用。我戲稱這是我互聯網乞討的開始。

和我目前做的所有產品一樣，這個產品里的引導並不是很多，需要你自己多嘗試點點，撤銷重做機制很成熟，不必擔心把東西弄丟了，希望你用得開心，更樂意表達！