一個合格的UI設計師需要對視覺稿進行標註嗎？

12-25

標註的內容包括但不限於：距離、尺寸、顏色值、字體、效果參數等等

其實在在設計經常更新or項目比較趕、設計保真程度比較高、工程師機器配置（安裝的字體、解析度等）比較合適的情況下，一些尺寸不標註也可以的，比如 Web 前端，幾個瀏覽器都有放一張半透明圖片對著調整的插件：

PerfectPixel by WellDoneCode
就算在適配沒插件的老瀏覽器之類，也可以用任意能放半透明窗口的軟體拿去疊。移動設備的話也可以在電腦上對著設備模擬器疊一個半透明的圖片做調整，現在瀏覽器和移動開發用的 IDE 大多數都可以實時調整布局的，調到跟圖片一致並不用多少時間。但是這種工具其實提高了對設計師的要求，很多細節上的東西要和設備實際處理得一致，工程師才能對著進行調整。

一些特殊意圖（比如居中、靠左對齊）可以最好在圖上標註一下，也就是說標註在設計上的主要是「流動」的一些參數（居中、對齊、分布），剩下沒標註的就是「固定」的值，表示按圖調整，那麼工程師就按圖寫定數值，這樣還是比較好溝通的。
重複率很高的一些東西（特別是顏色和字體）可以寫進一個文檔（算半個 Style Guide 吧），時間緊的話不用那麼正規，直接用類似 key-value 的格式命名好，方便工程師查找就行。其實不會浪費很多時間，因為按理來說設計師本身開始動手設計前也會開一個調色板/字體庫之類的，寫進文檔花不了多少時間，也方便和其他設計師溝通和交接。如果出的圖沒有顏色損失（比如直接導出高質量png）或者是矢量的，工程師其實可以自己用取色器取色（點一下就把設定好格式的顏色取值字元串塞進剪切板，這種軟體/插件有很多），反而比從文檔複製快……
不過顏色、字體這種比較「字面量」的東西，如果時間又趕設計師沒空還去搞份 Style Guide（比如忍不住認真排版啥的= =），大家溝通一些key的名字然後讓設計師花幾分鐘學會寫 JSON （很容易的）之後寫進一個 JSON 可能更好（甚至工程師預先寫個只有key的 JSON 模板，加上注釋讓設計師填空），工程師還可以用各種插件或者自己寫個小腳本讀一下自動插值到代碼里，有改動就發新的JSON過去，直接跑一遍插新值進代碼，省時省力。如果團隊使用LESS或者SASS就更方便了，設計師填寫variables.less/variables.scss就可以，主要是變數名的規律要溝通好。

一些不說清楚比較難調準的特效參數（陰影、半透明）之類還是要給的，節省猜/查找的時間。動態交互的參數也比較必要。

對視覺設計輸出物進行尺寸標註，是一件勞民傷財的事，非常沒必要的浪費時間，減少了設計師投入到創造性工作中的時間。

最美的設計師是現在團隊里做培訓，教工程師夥伴們使用基本的 PS 和其他有用的工具，然後文檔就可以省掉了，每次工程師夥伴都會自己直接看，以我們的實踐來看，效率非常高。

這前提是團隊中有真正靠譜且在乎設計的工程師，對於界面的品質有追求。設計師和這樣的工程師合作會有滿滿的幸福感。

—— 2017年9月更新 ——

學習 UI/UX 和產品設計

1、UI 和 UX 設計師的課程表

2、UI、UX交流QQ群：633293003，會定時舉行公開課和答疑。歡迎大家加入。

比較有趣的是Web設計師，只要設計水平ok並且對前端有一些了解的話，跟前端工程師配合是不需要標註的。甚至源文件里的分組都是按DIV結構來分的。

但移動端因為終端尺寸各不一樣，平台也不一樣，所以目前都是需要設計師進行標註的。

其實我想問，導致現在UI設計師必須標註，是不是因為做APP沒有專門的「前端工程師」？

iOS不多說了，安卓端要標註的話設計師應該知道哪些地方要用DP，哪些要用SP，哪些實在特殊才要用PX，哪些地方不能標死，可以用百分比。這些也需要設計師去多向開發工程師們了解和學習，互相更了解才能配合更好。

時隔半年再來更新下～
目前使用sketch做UI設計，已經完全拋棄標註這個步驟。
之前用的zeplin由於收費以及許久沒更新，所以已拋棄。轉為sketch的插件：Measure。導出設計稿給開發是一份html文件，在瀏覽器打開，開發只需要滑鼠點擊某個元素，即可查看該元素詳細的參數以及與其他元素之間的間距～

以下為原答案
很有必要，但可以討巧。
個人覺得，標註是為了讓開發清晰明了的看到所需的信息，從而減少溝通的代價以及儘可能還原視覺效果。如果設計師懂一點代碼，會更加理解為什麼標註以及如何標註。

這是我個人做第一個項目時候的做法：

部分設計規範

交接文件夾

設計過程中把視覺規範(Style Guide)整理在一個PDF裡面，標註文字時大多數我只需要把文字級別標註出來就好了（黑白的文字採用Material design的做法，直接做幾個級別的透明度就不需要開發記住好幾個＃xxxxxx的顏色了）。另外尺寸方面一些重複性的，直接在視覺規範裡面列出來。只要有一定的邏輯性(例如兩個親密元素的間距是20px，疏遠的元素為40px），開發很容易不用看標註也能看出來尺寸、字型大小應該用多少。
最後交接給開發時候，把字體和顏色標註在一個頁面，尺寸標註獨立一個頁面（這是參考 @匡雪婷的做法視覺設計師是怎樣讓前端工程師 100% 實現設計效果的？ - 匡雪婷的回答）。

但是！如果是在一個小團隊或者是一個經驗少的設計師（me…），前期做設計規範真的很耗時間，影響了整體進度反而得不償失。而且這個需要和有要求的開發配合才能發揮最大效果，有些開發會覺得糾結幾個像素沒什麼意義，所以不會細看的。有些開發找不到規範或者我沒有標註好就會跑來問（莫名的覺得好感動:-D）。但視覺規範還是需要做的，不是為了裝得很專業，是為了統一風格以及整體的邏輯性，還有雖說是自己設計，但很多尺寸或者字型大小你會忘記或者搞混，好記性不如爛筆頭，做個簡單的視覺規範方便你我他。

最近換了MacBook Pro，開始學習sketch（真心好用）
插個題外話：以前使用ps做ui，其實也不是特別難用，只是相比sketch太重，少了些靈活，這裡推薦兩個插件：切圖神器cutterman（感覺比是sketch自帶的好用），還有輔助線工具GuideGuide。

標註方面目前使用zeplin，並教會開發使用協作，已經脫離標註以及切圖了。不需要交接任何文件，只需要把小夥伴都拉到zeplin（可惜免費帳戶只支持一個項目，意味著如果需要同時開發Android和iOS，又不想付錢那就需要給其中一個開發切圖，但基於一倍的尺寸，標註還是不需要的）

所以現在可以更加專註的做設計。

如果是曾經的我（不用太久，一個月之前）來寫這個答案，答案肯定是yes。但是現在我改變了我的主意：設計師朋友們不要給我標註了，直接給我sketch源文件可好。

原因並不僅僅是勞民傷財這麼簡單。因為很多界面程序員在實現的時候，並不會根據你的標註（比如你的標註是頂部到actionbar之間的距離，但是實際上我這個界面用的是LinearLayout，我從標註上得不到我要的數據）。而給了我sketch，再配上各式各樣的插件，我可以輕鬆得到我要的數據，而設計師也不需要很辛苦得給我們標註一份看似翔實，實際用處不大的標註圖了。相比Photoshop，sketch更加輕量，更適合非設計師同學日常用。當然，在有些界面上做適配的時候，也需要去諮詢設計師怎麼辦，這是另外一回事了。

不過也有缺點：用sketch的話必須要用Mac。。。不過我覺得這個對大部分設計師不算是什麼門檻吧。（當然我聽設計師朋友說過Mac上邊Photoshop手寫板會漂移（別問我為什麼），這可能也是很多設計師同學不選擇Mac的原因）

其實隨著響應式設計的應用，如果需要UI設計師把每個線框圖都寫上明確的標註的話那是個多大的工作量和耗時啊…不多麼？…就拿蘋果的設備線舉個栗子：

看完以後請自覺配合一下被嚇尿好嗎？在這種環境里，扁平化的流行不止是因為用簡單的設計提供了美觀的視覺需求，更重要的是為相應不同尺寸的顯示提供了十分便利的設計解決方案。

好像跑題了……
個人認為，產業化的UI設計並不需要這樣複雜的頁面標註，不然你讓知乎 taobao這種無數個頁面還帶User generated content的網站和應用怎麼設計？那不用首頁這樣的標註，這些關於尺寸和縮進的等等問題如何解決？用Style Guide啊！（具體可以參閱谷歌Material Design的Style Guide範例，我這裡就不貼出來了反正也被牆……）

總之在設計師做好了Style Guide之後，開發人員就可以很輕鬆的使用已經定義好的設計，減少了後期的工作量。為什麼是後期？因為前期製作Style Guide真的很複雜……所以這種方法也不適合中小型公司和項目。

總之，無論以何種方式，好的項目里，設計師與開發人員的溝通與交流都是最重要的環節，這不是幾個註解就能實現的。當然還有一種更棒的情況，那就是你的設計師就是一名前端……

昨天在 Product Hunt 上面看到的。
這是我所見過的最好的解決方案了。
Zeplin

自己的觀點是，前端開發中不需要標註

因為標註的信息並不是我想要的，或者說設計師不理解開發需要哪些數據，也沒有這個義務去理解。

就拿題主的圖來舉例子吧，

基本上所有的到文字之間的垂直方向上面的距離在前端上面並不會直接用到，前端通過控制行高會使得字體上下有間距，而行高和行間距的轉換並不是很直接

關注的數據沒有體現，比如進度條的高度，圓角的大小，字體等等

可能更關注顏色，尤其是字體的顏色（由於字體有亞像素存在，直接取色不準確，通過字體面板取色有時候會沒安裝字體，各種複雜）尺寸倒沒有很重要，因為設備的不一致性需要做不同的適配，尺寸上面更需要設計師考慮的是一致性

再說一些其他的，有些開發可能要求設計師合併圖層，這個感覺也不需要，理由還是設計師不能準確理解開發的需求

部分需要：）

作為一個合格的前端開發人員，應該幫助設計師將主要精力放在具體的設計上。開發人員應該有能力將源文件絲毫不差的轉換為前端代碼。

都是標註像素的話，那麼怎麼適配蘋果的Retina？
響應式設計是什麼樣的體驗？

現在有很多好用的工具，不需要再像幾年前一樣手工進行標註了，http://www.biaonimeia.com
像這樣的自動化標註工具其實很多，只需要一鍵，即可自動生成全部標註信息。

設計師處理。效率高
原因，1.很多時候無法完全還原，處女座設計師還是會讓你改，效率低。 2.設計師標註相對快，畢竟是自己的作品。效率快

前端和設計合體的人才才是王道而且業界不在少數

合格的會進行標註

你是不會理解只設計了PC卻要求適配手機的要求

這個UI（第三方）用的sketch，這個UI認為他不用給標註，研發直接打開sketch看就行了，軟磨硬泡後，得到了標註，可以看看他的標註（為了他的標註，我表示浪費了很長時間，這裡面是一段故事）：

然而我家的程序根本不看我花了一天辛辛苦苦標註好的稿子…

對接設計圖前端的時候，設計圖不一定要標註。但是，最好自己有一份標註的文檔，以免下次修改又用了新的間距色值什麼的。不要笑。這種情況經常有。而且作圖要考慮全幾種情況。文字太長怎麼辦，換行還是省烈。滑鼠經過的狀態等等

題主這是原型圖吧？

不用、首先大廠會有規約、包括字體大小、顏色blabla、
不過一般設計師不會有前端思維、模塊劃分很奇葩、
所以我們都不要設計師寫這個、不規範的地方太多、
前端有psd原文件就夠了、有和設計師溝通的時間早幹完了.