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

歡迎關(guān)注點融設(shè)計中心DDC微信公眾號：「ID：DR_DDC」

第一招：標(biāo)注神器

我們先了解一下過去我們標(biāo)注方法：一直關(guān)注我們DDC的小伙伴一定讀過我們的《暢快出效率！幫設(shè)計師與工程師更好溝通的3個方法》這篇文章。其中談到，我們從凌亂的標(biāo)注進(jìn)化到清晰的標(biāo)注：

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

1. 標(biāo)注神器：Sketch Measure

上一版本的Measure只有在設(shè)計稿中標(biāo)注各距離大小的功能：

△ SKETCH MEASURE 1.0版本

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

△ SKETCH MEASURE 2.0版本

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

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

操作這個界面，前端工程師可以自由查看這個html里面所有界面標(biāo)注啦！

2. 重要注意點

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

1. 關(guān)于工具：導(dǎo)出后的文件名需要用英文，在Windows系統(tǒng)中用中文名文件下載后所有畫板名稱將變成亂碼，Mac系統(tǒng)沒有這個問題；

2. 關(guān)于設(shè)計稿：在設(shè)計稿中需要非常仔細(xì)、精確每一個元素的位置，因為工程師會完全按照文件中的標(biāo)注實現(xiàn)，這就要求設(shè)計師在文件管理上更加細(xì)致；

3. 視覺規(guī)范與稿件管理：遵循視覺規(guī)范并且按照規(guī)范對于文字進(jìn)行標(biāo)注，在動圖中，我們在右側(cè)信息欄中看到這么一條信息：

這幾個字母數(shù)字是什么意思呢？我們再看這兩張圖：

△ 點融網(wǎng)某產(chǎn)品視覺GUIDELINE

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

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

3. 總結(jié)：高效的關(guān)鍵之一就是時間

我們在遵循視覺Guideline和設(shè)計稿規(guī)范精細(xì)的前提下，利用Sketch Measure這個工具，達(dá)到節(jié)約視覺設(shè)計師大量時間的目的。

那具體節(jié)約了哪些時間呢？個人認(rèn)為有三點：

1. 標(biāo)注設(shè)計稿的時間
2. 需要修改設(shè)計稿時，改稿后再修改標(biāo)注的時間
3. 后期，縮短與前端實現(xiàn)的Demo校稿修改的時間

那節(jié)約出來的時間可以做什么呢？

第二招：慢動手，先動腦

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

然后會有幾種情況出現(xiàn)：

1.完美的一次通過（在做夢吧～）
2.為了更好的結(jié)果，視覺修改（正常，一切為了用戶更直觀清晰——值得！）
3.需求變動了，交互稿隨之改變，視覺稿不斷的再一次，再一次改動（內(nèi)心是崩潰的，這才是日常）

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

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

1. 業(yè)務(wù)需求

了解業(yè)務(wù)需求的3點好處：

1. 了解業(yè)務(wù)需求會讓我們知道：為什么要做這個功能，我們終極目是什么。在腦中有清晰的認(rèn)知，才能在視覺設(shè)計時，突出與表明重點。我們?nèi)菀讖拿烙^的角度去布局頁面，而交互會從用戶功能使用的便捷流暢考慮。我們視覺要謹(jǐn)慎，不要在交互稿上做減法，而是做加法，讓用戶直擊重點。

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

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

2. 分析功能

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

舉個例子：

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

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

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

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

3. Mind Map

出產(chǎn)物的質(zhì)量與兩個點有關(guān)，一是項目所處的階段，二是時間。

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

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

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

PS：

互聯(lián)網(wǎng)視覺設(shè)計師如何在職業(yè)上精深一直是我在思考的，遇到過許多視覺設(shè)計師想轉(zhuǎn)行去做交互或者項目經(jīng)理，找不到視覺設(shè)計師的價值和專深入點。我也在思考與探索中，上面是我現(xiàn)在想到的一些點，也歡迎同道中人一同探討，互相啟發(fā)。

歡迎關(guān)注點融設(shè)計中心DDC微信公眾號：「ID：DR_DDC」

「更多效率類好文」

1. 設(shè)計師管理術(shù)：《只會用百度？來看這個幫你高效工作的信息搜集及管理術(shù)》
2. 自我養(yǎng)成：《憋磨嘰了！趕緊收了這份高效設(shè)計師養(yǎng)成指南》
3. 資源整理術(shù)：《超高效！輕松3步幫你掌握實用的設(shè)計資源整理術(shù)》
4. 作者偷懶沒插入文中的生產(chǎn)力工具：《效率丨10個前端/設(shè)計師必備的生產(chǎn)力工具》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量190萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com