對于視覺設計師來說，除了設計產品本身占用時間外，對我們設計師自身成長并沒有什么意義的工作應該就是“標注”了，在工作中，有些大的功能光標注一般就要占去一天的工作時間，如何即能讓前端工程師清晰了解界面內容，又能節約視覺設計師工作時間?最近我們團隊就找到了新方法，在實行了一段時間，得到前端小哥的良好反饋后，在此與大家分享，希望能幫助到同有此煩惱的你們。

第一招：標注神器

我們先了解一下過去我們標注方法，其中談到，我們從凌亂的標注進化到清晰的標注：

這一改變大大的幫助了前端工程師對于設計細節的實現，但這其中不可否認的有兩個缺點：1.方便了工程師，麻煩了視覺設計師——標注太過耗時;2.在標注過程中，總有缺漏的地方，后期還要再補，這也增加了后期溝通與反復的成本。設計師就是一群不妥協，不斷想解決方法的人，基于這兩點，我們終于找到了解決這兩點的有效工具——Sketch Measure。

1. 標注神器：Sketch Measure

上一版本的Measure只有在設計稿中標注各距離大小的功能：

△ SKETCH MEASURE 1.0版本

而這一版本就有很大的更新，我們來看一下菜單：

△ SKETCH MEASURE 2.0版本

在原有功能上還增加了兩個板塊的內容，在這里我們主要介紹“Spec Export”這個功能。點擊“Spec Expor”t出現一個彈框，顯示出所有設計畫板的名稱，在此選擇需要導出的畫板。

點擊“導出”，選擇存放地址后，將自動生成一個以原Sketch文件名為名稱的文件夾，點擊其中的index.html文件，將在游覽器中顯示標注界面 。

操作這個界面，前端工程師可以自由查看這個html里面所有界面標注啦!

2. 重要注意點

雖然我們有了這個神器，但還有以下幾點需要大家注意的：

1. 關于工具：導出后的文件名需要用英文，在Windows系統中用中文名文件下載后所有畫板名稱將變成亂碼，Mac系統沒有這個問題;

2. 關于設計稿：在設計稿中需要非常仔細、精確每一個元素的位置，因為工程師會完全按照文件中的標注實現，這就要求設計師在文件管理上更加細致;

3. 視覺規范與稿件管理：遵循視覺規范并且按照規范對于文字進行標注，在動圖中，我們在右側信息欄中看到這么一條信息：

這幾個字母數字是什么意思呢?我們再看這兩張圖：

△ 點融網某產品視覺GUIDELINE

這是我們與工程師的“約定”，俗稱Guideline。我們在Guideline中制定了一系列代號，它是由字母加數字組成，用來代替各色值、字號、控件等，工程師依照我們的代號在庫中設置好，這樣在工作中就不用每一次敲入長長的色號、字大小、控件等，只要輸入代號就好，如這里的C是Color，S是Size的縮寫。

有了Guideline中的代號后，我們下一步就需要在Sketch設計文稿中為每一種字體樣式“Create new text style”，它顯而易見的好處是：1.前端實現更快捷 2.當需要修改同一屬性元素時，只需修改一個，其余元素會自動變化。高效快捷!!

3. 總結：高效的關鍵之一就是時間

我們在遵循視覺Guideline和設計稿規范精細的前提下，利用Sketch Measure這個工具，達到節約視覺設計師大量時間的目的。

那具體節約了哪些時間呢?個人認為有三點：

1. 標注設計稿的時間

2. 需要修改設計稿時，改稿后再修改標注的時間

3. 后期，縮短與前端實現的Demo校稿修改的時間

那節約出來的時間可以做什么呢?

第二招：慢動手，先動腦

視覺設計師在工作中大多數情況是拿到交互稿，看到不明白的地方問一下交互設計師，了解開發上線時間，給出自己完成的時間，然后就開始著手工作了。

然后會有幾種情況出現：

1.完美的一次通過(在做夢吧～)

2.為了更好的結果，視覺修改(正常，一切為了用戶更直觀清晰——值得!)

3.需求變動了，交互稿隨之改變，視覺稿不斷的再一次，再一次改動(內心是崩潰的，這才是日常)

對于第三點，難道我們真的就束手無策了嗎?

我的答案是：走向業務!原先沒有時間了解業務需求，參與交互討論的時間通過第一招就可以擠出來了，前期業務的了解非常重要!非常重要!非常重要!(重要的事情說三遍)，而前期的了解也是提高效能的重要關鍵!

1. 業務需求

了解業務需求的3點好處：

1. 了解業務需求會讓我們知道：為什么要做這個功能，我們終極目是什么。在腦中有清晰的認知，才能在視覺設計時，突出與表明重點。我們容易從美觀的角度去布局頁面，而交互會從用戶功能使用的便捷流暢考慮。我們視覺要謹慎，不要在交互稿上做減法，而是做加法，讓用戶直擊重點。

2. 了解業務需求能有效減少與交互溝通的時間，這里指的是無效溝通——視覺因誤解功能而減弱交互的溝通。如能熟悉需求，反而讓交互參與到視覺創意，“謀士眾多，所謀乃成——圣經箴言15章22節”，也許可以共同創造更好的產品。

3. 了解業務需求能增加我們視覺設計師的寬度，更多了解交互設計與項目經理的工作職能與技能需求。好的視覺設計師就好比一個好演員，一般的小演員，會在意自己能否站在好的光源下，鏡頭里的自己美不美，是否能站到一個好的位置。而好演員，能整場考慮，自己如果帶了眼鏡，能在表演的時候不讓光反在鏡片上，能清楚的知道自己是否出鏡，能多一些動作，以便后期剪輯時容易剪…我們就好比一個好演員，我們了解與我們相關的職能越多，在展現出我們設計能力的過程中，才能成為他人的助力，這才是專業的體現。

2. 分析功能

一個功能達成一個目的，一個頁面突出一個重點。這個是我在設計過程中秉承的理念。在拿到一份交互稿時，先要自己分析交互稿在說什么，重點是哪個，再與交互設計師確認自己的理解是否正確，確認一切細節。

舉個例子：

這張交互稿交代了頁面交互重點操作在兩個輸入框，而視覺設計師需要平衡插圖與重點之間的輕重關系，提示文字能醒目被用戶閱讀，并且單個頁面符合整個App視覺風格。

接著我們做了幾種嘗試，如圖：

左圖輸入信息與提示信息在一起，信息層級沒有拉開，用戶需要自己分辨信息。右圖區分了信息，已經好多了，但重點還是不夠突出，雖然這樣也可以，但還是不滿意。再做了一些嘗試后，最終決定了這樣，如下圖：

運用了層疊與陰影，突出頁面重點。輔助插圖特意用黑白色調的圖標，就是為了不搶頁面重點。視覺設計師在了解重點后，可以有多種嘗試，在有限的時間條件下，做到最好。

3. Mind Map

出產物的質量與兩個點有關，一是項目所處的階段，二是時間。

設計師腦中要有很清晰的認知，手上的設計是在MVP版本，還是早期版本，還是視覺體驗優化階段，每個階段對設計的要求是不同的，項目給予設計師相對應的時間也不同。一般而言，早期項目反復更多，給予的時間也短，處于試錯的階段，此時產品中視覺不是重點(通常情況下)，更多的是產品本身商業定位等等。在這個過程中，視覺盡全力幫助產品盡快上線，不要太糾結，先達成功能目標，視覺與體驗可以在之后的版本中迭代。當然，對于我們設計師來說，這種妥協是很不舒服的，我們很不愿意看到自己經手的設計明明可以更好，但為了產品需要妥協。此時，對于產品的宏觀認識就起到了關鍵作用。

我們在動手開始做設計前，需要先了解業務需求，拿到交互稿時分析重點，并清晰的了解團隊所處的階段。這些條件都是為了我們能利用有限的資源，讓設計做到最優。其中也省去了許多溝通的時間，提高溝通質量。就好比與聰明人說話，說一句他就懂了，不費勁。站在更宏觀的角度也能讓我們變成“聰明人”。

在日常的工作中，我越來越發現，動手前多思考，動手做時的反復也就越少，也能更高效!想要了解在真正動手還有什么小技巧，竊聽下回分解。

PS：

互聯網視覺設計師如何在職業上精深一直是我在思考的，遇到過許多視覺設計師想轉行去做交互或者項目經理，找不到視覺設計師的價值和專深入點。我也在思考與探索中，上面是我現在想到的一些點，也歡迎同道中人一同探討，互相啟發。