前端面對視覺不設限，是最優質的合作原則，前提是必須面對夠威的視覺設計師。
強者之視覺設計師出圖，
尺寸絕對不可能只有5,10,15，別以為這是在划酒拳，
色彩也不會只有#333,#999，給#168也不會比較順利。
如果前端與視覺的互動是，a視覺給個尺寸，a視覺給個顏色...
接著又忘記了，只好再a視覺a視覺a視覺...a視覺...
這種事肯定比忘記女朋友生日還恐怖！
接下來當然而就是要介紹視覺與前端互動的好物，
鄉民有言：有圖有真相，沒圖去改圖
改圖就靠以下好物吧！
- Color Maker (Free) (OSX only)
- Mark Man (Free) (OSX, Windows)
- xScope ($29.99) (OSX)
- Skitch (Free) (OSX, Windows)
當然，強者要靠PS萬能，也只能接受小弟我一拜了m( )m
Color Maker (Free) (OSX only)
Color Maker是本人最早使用的工具，輕巧且嵌入在OSX最上方的選單列，只要三步驟立即取得圖片上的顏色。
雖然是輕巧的工具，但基本的history(紀錄)．favorite(最愛)功能還是有，
安裝後，在最上方選單列會出現一個色盤，
點選色盤開啓視窗，接著點選滴管，隨著游標移動即可獲取色碼，
除了放大鏡效果外，按下space鍵立即將色碼記錄起來。
重要的顏色，還可以點擊『星號』設成最愛項目。
如果覺得顏色不滿意，還可以調整。
輕巧的工具學習成本夠低，簡單幾句就可以說明完，
其實到此已經很夠使用，但人總是健忘的，
就算history(紀錄)．favorite(最愛)的數量沒有限制，
專案變多顏色變多，難免搞混搞砸，此時我們就需要介紹下一套進階的工具。
Mark Man (Free) (OSX, Windows)
除了顏色的獲取之外，Mark Man還可以取得尺寸的資訊
單單多一個尺寸功能並無法完全虜獲我的心，
可以將獲取來的顏色/尺規存回圖片裡，並依專案有效管理，
才是我使用Mark Man的最大目的。
先來看看這不怎麼討喜，但很簡單操作的畫面，
Ctrl+V or 拖曳 or 點Mark Man都可以開啓要操作的圖片檔。
Mark Man主要有四個功能，
分別是尺寸．區塊．顏色．註解，快速鍵也分別是1．2．3．4，很好記吧!!
先來介紹尺寸功能，
如圖所示，只要按住Ctrl/Command鍵，就會啓動粘貼效果，
想要從直向測量改為橫向測量，只需要按一下尺寸的button或快速鍵1。
接下來區塊，
按住並拖曳，就會拉出需要的區塊，並標示上x,y,width,height，
很實用，可是我不常用。
顏色正是我最常用的功能，
有需要的地方，點一下即可，想仔細對準位置可以點選右下角的放大按鈕，
可是必定放大功能還是有限的，沒法像放大鏡一樣，
這缺點實在有點糟糕。
第四項功能就是註解，
蠻常會用到的功能，不過廢話還是少打點，大部份都用來描素一些action，或者特別要注意的地方。
重頭戲就是儲存功能，
它可以將截取好的資訊存成png檔，供下次需要使用，
所以通常我會依專案分門別類，把它跟示意圖放在一起，
可惜存成png後的檔案，就不能再修改上面的資訊，
如果想要在後續還可以繼續修改資訊，
必須把[filename].mkm檔，與png檔放在一起。
xScope ($29.99) (OSX)
如果覺得顏色&尺規資訊不夠看的話，
肯定要瞭解這套xScope全方位的工具(箱)，
之所以叫做工具箱，
肯定是功能完整度，好比師傅手邊隨時會提著的那卡萬用工具箱。
首先概略看一下位於最上方選單列的8個按鈕，
分別是：Mirror, Dimensions, Rulers, Screens, Loupe, Guides, Frames, Crosshair
也就是：鏡像, 尺寸, 尺規, 螢幕畫面, 放大鏡, 參考線, 框架, 定位點
要使用鏡像功能，必須先準備一台Mobile裝置iPad, iPhone...
目的是為了...
由於要較多的操作步驟，不如直接看官方教學影片吧！
取得尺寸資訊是這類工具的基本功能，
xScope更棒的是，可以在畫面的任何地方取得想要的尺寸。
尺規功能目的也是取得尺寸資訊，但用法大不相同，
簡單的概念，就是在螢幕上放上直尺去丈量需要的尺寸，
這是一把擁有X&Y坐標的尺，並透過游標位置取得尺寸資訊。
螢幕畫面功能主要是給設計師使用，
很適合用來規劃畫面的區塊，尤其是在Mobile裝置上。
放大鏡不解釋，就是放大鏡功能
重要的是，想要取得畫面顏色，也是透過放大鏡去取得。
接著參考線, 框架, 定位點，都是在對畫面做尺寸取得的操作，
這部分前端設計師使用到的機會也許不多，暫且就不做太仔細的介紹。
Skitch (Free) (OSX, Windows)
最後，
Skitch不能算是開發者工具，
Skitch是由Evernote製作的延伸套件，
但Skitch是一個超好用的溝通工具，尤其在視覺化的問題上。
最常用的肯定是畫面截圖，
截取來源，超豐富(☆_☆)
透過文字『左上角第二顆圓圓的按鈕』，
不如透過箭頭告知要討論的地方。
有時候直接打上說明會更棒。
透過標籤提示重點，或製作操作教學也是很實用的方式
打馬賽克也很好用，尤其是個資相關資訊。
