網頁設計師與WEB前端之間的合作可以說是最常見的狀況了，Photoshop、Illustrtor 以及 Flash 等可視化的設計工具與前端HTML有著不同的性質，網頁設計師的工作是讓網頁看起來更美觀、排版更協調等、因此利用這些工具方便快速地做視覺上的調整。而WEB前端則是必須設法將這些完成后的設計透過HTML實現出來。尤其在 Flash 日漸式微以及HTML5 蓬勃發展的現在越來越常遇到。
因此，網頁設計師最好能在制作完排版設計后，為圖像做清楚的標注，讓接手的WEB前端更快的進入制作狀況，常見需要標示的狀況如下所示：

1. 預備使用HTML語言制作的按鈕等互動組件的色彩、尺寸以及細節等
2. 版面上各組件彼此間的距離等
3. 其他常見必須標示的環節

因此這張標示圖差不多會長這樣 (示意)：

?

但有時候太多信息在畫面上也容易造成閱讀跟制作上的困擾，因此注意以下幾點，會讓你的信息傳遞更明確：

1. 將同種類信息擺放在一起、并整齊排列，讓人一目了然
2. 標注色彩清晰、勿使用會與背景難以分辨的色彩
3. 標注與圖像本身間預留適當間隔，以不擾亂圖像本身為原則
4. 切勿重復標注

雖然清楚的標示可以免去很多溝通上的困擾，但是要 Photoshop 跟 Illustrator 中加入這些標示還是個可怕的噩夢，尤其是遇到重復修改的狀況時，這件工作真的會讓人受不了。其實除了在這些常用繪圖軟件土法煉鋼繪制這些標示圖以外，有許 多軟件開發者開發了許多好用的小工具，節省大家浪費花費的時間與精力。

首先是由 Onpixel 開發的 Specctr ，這是一個 Firework 的外掛套件、具有可沿續原本工作環境流程以及跨平臺的優點，該程序提供試用以及 Lite 的免費版可以下載

另外一個是?MarkMan（馬克鰻），使用 Adobe AIR 所開發，因此也有著跨平臺的特性，雖然是簡體中文，但是所有的按鈕都經過圖形可視化，接口也相當精簡明確，并不會造成使用上的困擾。

 
原文地址：dclick.fourdesire.com

 
================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
設計微博：擁有粉絲量40萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：