有沒有什麼開發工具可以自動識別設計稿中元素的尺寸、坐標？

12-26

設計完成後，UI同學需要再把眼睛看瞎來進行標註，開發同學開發時又得逐個元素的輸入/調整來保證像素級的實現設計稿。

這兩個工作都很費事和相對無意義，目前有沒有工具可以對此流程做改善？
實現類似：「從設計工具導出XX文件，然後開發工具可以讀取該XX文件以獲得設計稿中的各(部分)參數/坐標」這樣的功能？

讓UX用Blend Expression來畫界面，你用Visual Studio來做data binding和提供view model，合併起來直接可以編譯，再也不需要複製人家的畫了。我們也這麼用過，效果拔群。

可用這個小巧簡便的 Photoshop script: pixelmeasure - https://code.google.com/p/pixelmeasure/

按著說明安裝就可以，然後在 Photoshop 中用 Marquee (M) 工具選好要量的距離，將前景顏色選為想標註的顏色，在 File &> Scripts 下點 Pixel Measure 就可以了。建議做一個 shortcut，那麼每次選好要量的位置按 shortcut 就可以。

用這 script 加的標註的距離線、數值等會自動放到一個 Pixel Measure 的 Group，可整個隱藏起來或整個轉色（CS6 用 Group Blending Options 來轉較容易）。

我覺得問題的關鍵在於，這個設計稿是什麼格式的。

如果是個圖片，那基本無解，識別圖片中的用戶元素計算機目前做不到。

事實上這個問題，設計師和開發者用同一套軟體就可以了。

Blend + VS就不錯啊。
Photoshop + Dreamweaver也不存在問題啊。

Zepline是目前公認比較好的解決方案，尤其是因為跟Sketch完美結合：
Zeplin

顯然是marketch

Sketch畫板直接轉換成HTML，不用註冊不用收費，開發拿到就能看到各種屬性和距離。

可以試試騰訊合金鋼隊出的合金鋼設計者：AlloyDesigner——For Fast Web Development。簡單來說就是把設計稿鋪在網頁中，然後你控制樣式與設計稿做到重合即可。這個工具也提供了簡單的測量和取色，這兩個功能貌似比較雞肋。

但是！但是！這東西估計是個 KPI 產物，理想是好的，用起來相當坑爹，設計稿居然單純靠滑鼠和方向鍵定位，沒有對齊功能。不固定的話，滑鼠點工具欄也會拖動設計稿。。。
反正我是沒用好，有用好了的同學拜託傳授下經驗，如果能實現廣告上說那種效果，拜謝！

馬克鰻，另外騰訊也模仿做了一款類似的，但沒有Markman好用。

Assistor PS ,UI利器,以前收費的9.9美元一個月，現在免費了
官網：witstudio
功能：UI標註、自動切圖、建立網格參考線、UI計算器、圓角矩形工具、鋪磚助手
（詳細教程百度搜索，這裡只介紹主要功能模塊）
1.UI標註、自動切圖

Guide Box 可以顯示圖層邊界（不規則圖形，有投影效果的圖層必用功能）
Layer Snips 就是你要的自動化切圖功能了
支持自動存儲，可以自定義路徑，切完自動保存
可以設置縮放，設置圖片格式

這就是自動切出來的圖片文件

2.建立網格參考線

3.尺寸轉換計算器和取色器

一看就明白，附帶一個取色器

4.製作圓角矩形（Photoshop本身可以更方便）

效果：

5.鋪磚功能：將選中的圖層按照你的參數（行數、列數、橫豎間距）設定進行鋪設

效果：

功能標籤設置：

用著不錯，來點個贊吧……

如果是macsketch 用戶的話，牆裂推薦 Zeplin（人類福音）
整完設計稿，一鍵導入zeplin。程序員葛葛就能看到size/margin/color等等等。並且支持直接下載icon。免費用戶可以創建一個項目，不過用用也夠了(省錢臉)。可以無限加入頁面，就是強迫症看著有點亂鬧心。

xScope 自己量的苦逼。