UI 設計師的手機端設計利器

相信我們每個人都用過一些界面很精美的 APP，在程序猿們編寫程序之前，這些漂亮的界面最初都只是在設計師的手下的一張張設計圖稿。

一個實用的手機端設計工具，不僅可以在實機的基礎上獲取數據，提升設計師們出圖的效率；還能簡化手機與電腦之間來回切換的次數，讓設計師們的工作更輕鬆。今天，我們就來推薦這樣一款實用的設計工具 —— Designer Tools。

▎通過網格獲取設計數據

一個成熟的設計規範，一定離不開精確的經過多次調試的數據。無論是為自己的界面組件測量大小，還是獲取自己喜歡的 APP 界面的各種設計數據，在此基礎上輕鬆建立屬於自己的美觀又實用的界面，網格都是一個事捷功倍的利器。

Designer Tools 就提供了一個可定製程度非常高的可以覆蓋屏幕的網格工具，默認每個網格是 8dp X 8dp 大小（這是 Google Material Design 的最小單位，你可以看到所有基於 Material Desig 的 APP 所有組件的邊緣一定是和網格邊緣對齊的），還可以自定義網格顏色和大小（不一定是正方形，也可以是非正方形）。

除了基礎功能，Designer Tools 還能在屏幕上覆蓋 keyline，也就是下圖裡面紫色的部分。Keyline 的位置剛剛好是 Material Design 建議的最佳左右邊距，中間的一條則是我們經常看到的帶圖標的列表中圖標與文字之間的最佳距離。只需要把我們自己設計好的界面用下面介紹功能放上去一眼就能看出界面設計得標不標準，省時省力又省心。

▎通過圖層保證精確設計

有時候程序猿做出一版界面，設計師左看右看都覺得和設計圖有些不一樣但是有說不上來；又或者希望程序員能像臨摹一樣在實機上來實現設計稿而不是對著設計圖在電腦上做界面，Designer Tools 的界面覆蓋功能就派上用場啦。

調整好透明度之後現在界面與設計界面的差異一目了然，同時開啟網格和 Keyline 更能輕鬆知道偏差了多少 dp （相信我，程序員會非常高興，再也不用每次偏移 1dp 地去試），還支持橫豎屏顯示不同的設計圖，這個工作效率刷刷的就上去了。

附上最美應用概念 UI 原圖：

▎其他棒棒的功能

作為設計工具，取色器當然不能少。Designer Tools 的取色器只需要拖動就可以輕鬆獲取屏幕上任意位置和顏色，與其他取色 APP 不同的是採用屏幕捕捉的 API，優點是不用載入特定圖片或者保持在當前界面，只要不關閉取色工具，它就可以一直獲取屏幕上的顏色。

Designer Tools 還附加了一個非常有意思的截屏信息功能，當手機截圖的時候，它會將手機型號、系統、DPI 與解析度等信息自動附在截圖上，程序員做界面兼容性測試反饋給設計師的時候再也不用雞同鴨講啦。

不僅如此，Designer Tools 還支持通過 7.0+ 的自定義磁貼和 7.1+ 的 APP shortcut 直接打開任一功能，開發者真是為了提升效率「不擇手段」，如此良心的設計工具絕對是每一個設計師和程序員的口袋必備。

——————

小美說

江湖上有這麼兩種職業

一直都爾虞我詐、水火不容

他們用的武器很像

但是門派不同...

哈蛤，我說的是設計師和美工

大家都愛看：

1.拯救被別人浪費的時間，你需要試試日程共享！

2.擺好姿勢對好口型，一起在奶糖上跟我說「贊」

3.36 氪 - APP 全新改版，讓閱讀更高效快捷

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！