UI標註之——效率友好的標註工具、切圖軟體——每個UI設計師都在用的 PxCook 畫素大廚
PxCook已更新，新版介紹請移步知乎專欄UI標註最高，PxCook 3.0 ，高效智慧的設計研發工具。支援PS Sketch畫板，點選即可生成程式碼。
https：//www。zhihu。com/video/911997375659274240
PxCook已更新，新版介紹請移步知乎專欄UI標註最高，PxCook 3.0 ，高效智慧的設計研發工具。支援PS Sketch畫板，點選即可生成程式碼。
PxCook
（
畫素大廚
）是面向設計師的一款
免費
、
互動流暢
、
全平臺支援
的標註軟體，切圖工具外掛。它支援對PS、Sketch設計元素尺寸、元素距離、文字樣式、顏色的智慧標註，支援智慧切圖。
以下，就會著重展示PxCook作為一款標註軟體的支援平臺、核心功能與流暢體驗。
支援的平臺
PxCook支援
Windows
作業系統
和
Mac OS
支援的工具型別
（
PS
和
Sketch
均支援）
PS
：
需要把
psd檔案
拖拽到PxCook工具中，PxCook將會在工具內解析psd檔案，以便智慧標註。而切圖需要在PS中開啟
遠端連線
，透過PxCook的浮窗實現切圖
Sketch
：
PxCook還提供了Sketch標註外掛，點選“匯出當前畫板到PxCook”後會自動啟動PxCook，並顯示出Sketch中對應的畫板內容，依舊在PxCook中標註。
流暢的體驗
（一） 元素之間自動標註——
拖、放
需要做的只是
一拖一放
，就是這麼簡單，就自動生成了。
將psd拖拽到PxCook中（或使用sketch外掛），Pxcook就會讀取psd或sketch檔案的所有資訊，接下來，以圖中的im聊天場景為例，無論是元素間，元素與邊框間的距離標註，都只需要簡單的 拖、放，就自動生成了。
（二） 包含關係的自動標註——仍然是
拖
和
放
PxCook能透過自身獲取psd的所有資訊，透過外掛獲取Sketch的所有資訊，包括
從屬關係
。如圖示中的文字框，距離氣泡欄的距離也能透過一樣的操作——拖、放而自動生成。
當元素太小，拖動也很不方便時，可以先後點選兩個元素，然後再點選頂部測量內距的按鈕就嫩自動生成上下左右的距離標註。
（三） 元素的外部尺寸標註——
一個按鈕
，
一次點選
快速標記一個元素的尺寸，可以選中它，點選圖示按鈕就好，依然會自動生成。
對於用慣了拖 放的使用者，像上圖中繼續橫向或
縱向
拖放也是可以的。
（四） 字型的自動標記——
一個按鈕
，
一次點選
PxCook對此的解決辦法是，點一下選中文字框，再點一下就能自動生成。生成的字型字號等標註，是
可以拖動重新擺放位置
的。
這裡有一個精心打造的細節：在Ps裡有些使用者習慣對圖層使用顏色疊加來修改文字顏色，甚至文字圖層外還會套著有顏色疊加的組。這些在PxCook中都不是問題，PxCook可以透過各種巢狀和顏色疊加關係，將最終的文字顏色解析並標註出來。
（五） 支援各種單位自由轉換——
px dp pt
考慮到面向不同手機作業系統的設計師用到的單位不同，PxCook可以自動切換單位，點選切換，所有標註都輕鬆同步更換~。存在於應用頂部的按鈕如下圖：
（六） 內部尺寸標記方法二，
選中點選
還是最簡單的操作，選中、點選，直接解決了尺寸標記在內部的需求
其他PxCook的功能還包括：
自動識別出來的標註數字支援自己手動改數值。
智慧識別PSD和
sketch檔案
，當你遭遇改稿調整時，之前的自動標註會自動更新，終於不用再改一遍標註了！
自動吸附
：標註過程中可以針對影象內突出顏色進行自動吸附。
軟體設定：在設定面板中可以進行如：標註字號、標註自動對齊、滾輪、即
數字精確度
等設定。
定製標註樣式：可以定製每個標註的顏色，標籤位置等樣式。
顏色模式設定：目前支援#Hex， argb， rgba三種顏色模式。
自動備份功能。
還有很多值得期待，因為我們一直在迭代更新……
開發小團隊寫在最後：
PxCook作為設計師貼心的切圖標註軟體，在前端&UI設計領域一直被口口相傳。翻開更新日誌歷史，“提升體驗，
場景設計
…”等好幾百條更新記錄靜靜的躺在那裡，並不急著告訴我們PxCook已走過了兩個年頭。真正令人印象深刻的，其實是在兩年反覆打磨中未曾間斷的喜悅：開發小匠featherJ陸續完成了對Windows、MacOS作業系統都支援的1。x版本、對PS、Sketch也都支援的2。x版本；產品小匠來蘇水也無數次於種子群的深度交流中，將產品需求提煉的日趨完善……慢慢的，一切工作都讓我們越發有底氣的發出聲音—— “希望更多設計師能看到PxCook，使用PxCook，愉快完成設計的最後一個環節。”
再次強調PxCook是一款
免費
的智慧標註切圖工具軟體，免費。
喜歡這篇文章的設計師們，歡迎移步PxCook官網
點選下載
（使用前，請先在官網內安裝Adobe AIR）
我們也會在
公眾號
（搜尋） PxCook 釋出
更多效率工具
及
日常更新
。
有任何使用問題或建議都可以加入官方q群 661255798 提問^^，感謝每位溫暖的使用者。
