幫助視覺設計師高效工作的三大招
互聯網視覺設計師如何在職業上精深一直是我在思考的,遇到過許多視覺設計師想轉行去做交互或者項目經理,找不到視覺設計師的價值和專深入點。我也在思考與探索中,下文是我現在想到的一些點,也歡迎同道中人一同探討,互相啟發。
第一招:標注神器
對于視覺設計師來說,除了設計產品本身占用時間外,對我們設計師自身成長并沒有什么意義的工作應該就是“標注”了~在工作中,有些大的功能光標注一般就要占去一天的工作時間,如何即能讓前端工程師清晰了解界面內容,又能節約視覺設計師工作時間?最近我們團隊就找到了新方法,在實行了一段時間,得到前端小哥的良好反饋后,在此與大家分享,希望能幫助到同有此煩惱的你們。
我們先了解一下過去我們標注方法,我們從凌亂的標注進化到清晰的標注:
這一改變大大的幫助了前端工程師對于設計細節的實現,但這其中不可否認的有兩個缺點:
- 方便了工程師,麻煩了視覺設計師——標注太過耗時;
- 在標注過程中,總有缺漏的地方,后期還要再補,這也增加了后期溝通與反復的成本。
設計師就是一群不妥協,不斷想解決方法的人,基于這兩點,我們終于找到了解決這兩點的有效工具——Sketch Measure。
1. 標注神器:Sketch Measure
上一版本的Measure只有在設計稿中標注各距離大小的功能:
Sketch Measure 1.0版本
而這一版本就有很大的更新,我們來看一下菜單:
Sketch Measure 2.0版本
在原有功能上還增加了兩個板塊的內容,在這里我們主要介紹“Spec Export”這個功能。點擊“Spec Expor”t出現一個彈框,顯示出所有設計畫板的名稱,在此選擇需要導出的畫板。
點擊“導出”,選擇存放地址后,將自動生成一個以原Sketch文件名為名稱的文件夾,點擊其中的index.html文件,將在游覽器中顯示標注界面 。
操作這個界面,前端工程師可以自由查看這個html里面所有界面標注啦!來!贊一個!
2. 重要注意點
雖然我們有了這個神器,但還有以下幾點需要大家注意的:
- 關于工具:導出后的文件名需要用英文,在Windows系統中用中文名文件下載后所有畫板名稱將變成亂碼,Mac系統沒有這個問題;
- 關于設計稿:在設計稿中需要非常仔細、精確每一個元素的位置,因為工程師會完全按照文件中的標注實現,這就要求設計師在文件管理上更加細致;
- 視覺規范與稿件管理:遵循視覺規范并且按照規范對于文字進行標注,在動圖中,我們在右側信息欄中看到這么一條信息:
這幾個字母數字是什么意思呢?我們再看這兩張圖
某產品視覺Guideline
這是我們與工程師的“約定”,俗稱Guideline。我們在Guideline中制定了一系列代號,它是由字母加數字組成,用來代替各色值、字號、控件等,工程師依照我們的代號在庫中設置好,這樣在工作中就不用每一次敲入長長的色號、字大小、控件等,只要輸入代號就好,如這里的C是Color,S是Size的縮寫。
有了Guideline中的代號后,我們下一步就需要在Sketch設計文稿中為每一種字體樣式“Create new text style”,它顯而易見的好處是:1.前端實現更快捷 ?2.當需要修改同一屬性元素時,只需修改一個,其余元素會自動變化。高效快捷??!
3. 總結:高效的關鍵之一就是時間
我們在遵循視覺Guideline和設計稿規范精細的前提下,利用Sketch?Measure這個工具,達到節約視覺設計師大量時間的目的。
那具體節約了哪些時間呢?個人認為有三點:
- 標注設計稿的時間
- 需要修改設計稿時,改稿后再修改標注的時間
- 后期,縮短與前端實現的Demo校稿修改的時間
那節約出來的時間可以做什么呢?
第二招:慢動手,先動腦
1. 業務需求
視覺設計師在工作中大多數情況是拿到交互稿,看到不明白的地方問一下交互設計師,了解開發上線時間,給出自己完成的時間,然后就開始著手工作了。
然后會有幾種情況出現:
- 完美的一次通過(在做夢吧~)
- 為了更好的結果,視覺修改(正常,一切為了用戶更直觀清晰——值得?。?/li>
- 需求變動了,交互稿隨之改變,視覺稿不斷的再一次,再一次改動(內心是崩潰的,這才是日常)
對于第三點,難道我們真的就束手無策了嗎?
我的答案是:走向業務!原先沒有時間了解業務需求,參與交互討論的時間通過第一招就可以擠出來了,前期業務的了解非常重要!非常重要!非常重要?。ㄖ匾氖虑檎f三遍),而前期的了解也是提高效能的重要關鍵!
了解業務需求的3點好處:
(1)了解業務需求會讓我們知道:為什么要做這個功能,我們終極目是什么。在腦中有清晰的認知,才能在視覺設計時,突出與表明重點。我們容易從美觀的角度去布局頁面,而交互會從用戶功能使用的便捷流暢考慮。我們視覺要謹慎,不要在交互稿上做減法,而是做加法,讓用戶直擊重點。
(2)了解業務需求能有效減少與交互溝通的時間,這里指的是無效溝通——視覺因誤解功能而減弱交互的溝通。如能熟悉需求,反而讓交互參與到視覺創意,“謀士眾多,所謀乃成——圣經箴言15章22節”,也許可以共同創造更好的產品。
(3)了解業務需求能增加我們視覺設計師的寬度,更多了解交互設計與項目經理的工作職能與技能需求。好的視覺設計師就好比一個好演員,一般的小演員,會在意自己能否站在好的光源下,鏡頭里的自己美不美,是否能站到一個好的位置。而好演員,能整場考慮,自己如果帶了眼鏡,能在表演的時候不讓光反在鏡片上,能清楚的知道自己是否出鏡,能多一些動作,以便后期剪輯時容易剪…我們就好比一個好演員,我們了解與我們相關的職能越多,在展現出我們設計能力的過程中,才能成為他人的助力,這才是專業的體現。
2. 分析功能
一個功能達成一個目的,一個頁面突出一個重點。這個是我在設計過程中秉承的理念。在拿到一份交互稿時,先要自己分析交互稿在說什么,重點是哪個,再與交互設計師確認自己的理解是否正確,確認一切細節。
舉個例子:
這張交互稿交代了頁面交互重點操作在兩個輸入框,而視覺設計師需要平衡插圖與重點之間的輕重關系,提示文字能醒目被用戶閱讀,并且單個頁面符合整個App視覺風格。
接著,我們做了幾種嘗試,如圖:
左圖輸入信息與提示信息在一起,信息層級沒有拉開,用戶需要自己分辨信息。右圖區分了信息,已經好多了,但重點還是不夠突出,雖然這樣也可以,但還是不滿意。再做了一些嘗試后,最終決定了這樣,如下圖:
運用了層疊與陰影,突出頁面重點。輔助插圖特意用黑白色調的圖標,就是為了不搶頁面重點。視覺設計師在了解重點后,可以有多種嘗試,在有限的時間條件下,做到最好。
3. Mind Map
出產物的質量與兩個點有關,一是項目所處的階段,二是時間。
設計師腦中要有很清晰的認知,手上的設計是在MVP版本,還是早期版本,還是視覺體驗優化階段,每個階段對設計的要求是不同的,項目給予設計師相對應的時間也不同。一般而言,早期項目反復更多,給予的時間也短,處于試錯的階段,此時產品中視覺不是重點(通常情況下),更多的是產品本身商業定位等等。在這個過程中,視覺盡全力幫助產品盡快上線,不要太糾結,先達成功能目標,視覺與體驗可以在之后的版本中迭代。當然,對于我們設計師來說,這種妥協是很不舒服的,我們很不愿意看到自己經手的設計明明可以更好,但為了產品需要妥協。此時,對于產品的宏觀認識就起到了關鍵作用。
我們在動手開始做設計前,需要先了解業務需求,拿到交互稿時分析重點,并清晰的了解團隊所處的階段。這些條件都是為了我們能利用有限的資源,讓設計做到最優。其中也省去了許多溝通的時間,提高溝通質量。就好比與聰明人說話,說一句他就懂了,不費勁。站在更宏觀的角度也能讓我們變成“聰明人”。
在日常的工作中,我越來越發現,動手前多思考,動手做時的反復也就越少,也能更高效!想要了解在真正動手還有什么小技巧,竊聽下回分解。
作者:Kana@點融設計中心DDC,微信公眾號:「微信ID:DR_DDC」
本文由@點融設計中心 原創發布于人人都是產品經理。未經許可,禁止轉載。
謀士眾多,所謀乃成!