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

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

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

我們先了解一下過去我們標(biāo)注方法，我們從凌亂的標(biāo)注進(jìn)化到清晰的標(biāo)注：

這一改變大大的幫助了前端工程師對于設(shè)計(jì)細(xì)節(jié)的實(shí)現(xiàn)，但這其中不可否認(rèn)的有兩個(gè)缺點(diǎn)：

1. 方便了工程師，麻煩了視覺設(shè)計(jì)師——標(biāo)注太過耗時(shí)；
2. 在標(biāo)注過程中，總有缺漏的地方，后期還要再補(bǔ)，這也增加了后期溝通與反復(fù)的成本。

設(shè)計(jì)師就是一群不妥協(xié)，不斷想解決方法的人，基于這兩點(diǎn)，我們終于找到了解決這兩點(diǎn)的有效工具——Sketch Measure。

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

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

Sketch Measure 1.0版本

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

Sketch Measure 2.0版本

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

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

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

2. 重要注意點(diǎn)

雖然我們有了這個(gè)神器，但還有以下幾點(diǎn)需要大家注意的：

1. 關(guān)于工具：導(dǎo)出后的文件名需要用英文，在Windows系統(tǒng)中用中文名文件下載后所有畫板名稱將變成亂碼，Mac系統(tǒng)沒有這個(gè)問題；
2. 關(guān)于設(shè)計(jì)稿：在設(shè)計(jì)稿中需要非常仔細(xì)、精確每一個(gè)元素的位置，因?yàn)楣こ處煏?huì)完全按照文件中的標(biāo)注實(shí)現(xiàn)，這就要求設(shè)計(jì)師在文件管理上更加細(xì)致；
3. 視覺規(guī)范與稿件管理：遵循視覺規(guī)范并且按照規(guī)范對于文字進(jìn)行標(biāo)注，在動(dòng)圖中，我們在右側(cè)信息欄中看到這么一條信息：

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

某產(chǎn)品視覺Guideline

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

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

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

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

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

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

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

第二招：慢動(dòng)手，先動(dòng)腦

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

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

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

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

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

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

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

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

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

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

2. 分析功能

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

舉個(gè)例子：

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

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

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

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

3. Mind Map

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

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

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

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

作者：Kana@點(diǎn)融設(shè)計(jì)中心DDC，微信公眾號(hào)：「微信ID：DR_DDC」

本文由@點(diǎn)融設(shè)計(jì)中心 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。