視覺設計師是怎樣讓前端工程師 100% 實現設計效果的?

發表於2016-07-30

這是一個經常被討論的問題,「創新設計能力 & 跟進還原能力」。這是一個商業設計師而非藝術家的兩重技能要素,同樣重要,缺一不可,甚至在很多時候後者的作用力會更大,畢竟我們還是要做一個落地的商業產品而不是意淫的概念稿。這是任何一個在職的商業設計師能力模型之內不能被忽視的要素之一。

1:效果實現難度

設計師天馬行空的大腦會迸發出各種奇思妙想,例如一個看起來酷炫的動畫,結果跑到工程師面前,工程師很犯難的表示做不了,或者硬著頭皮做到最後也發現不盡人意。所以前期對實現難度的基本溝通是必要的,很多時候,酷炫的效果並不是拯救設計的唯一方式,反而,大多時候我更傾向於樸素的手法來解決問題。酷炫的效果往往不是必要的,而是錦上添花的,需量力而行。

2:明確的規範

何時候不要小看規範的作用力,剛入行的某一段時間我經常喜歡不做規範,直接搬個凳子到開發工程師面前指指點點(好在和開發關係比較好,遊戲好基友,不然我可能都沒命活到今天),看似非常具有效率,但這種效率僅僅適合單槍匹馬戰鬥時,涉及到團隊協作,幾個設計師面對幾個開發甚至更多時,規範的作用力就顯得十足重要。

規範的編寫儘可能讓開發少動腦,例如互動原則「Don’t Make Me Think」一樣,不要讓開發費很多精力在理解規範,規範能多傻就多傻。試舉一例,如下:

視覺設計師是怎樣讓前端工程師 100% 實現設計效果的?

見過太多設計師如右圖一樣標註規範,事實上,圖片的實際畫布尺寸是左側藍色框的範圍,所以在標註規範時一定要如左圖所示,否則開發還要量多一遍你的空白畫素。

視覺設計師是怎樣讓前端工程師 100% 實現設計效果的? 包括標註出不同情況(dock欄)時的不同規範,或在備註欄告知開發排列方法(例如控制邊距,橫向平均排列)

視覺設計師是怎樣讓前端工程師 100% 實現設計效果的?

3:語言轉化

將視覺語言轉化為開發語言,每個人對形體的觀感是不同的,設計師很多接受過美術方面訓練,對造型的比例有一定認知,可以感覺細微的視覺差異,但不意味著你可以要求開發同學也如你一樣,過去的工作經驗中,也經常聽到如下對話:

「天吶,這兩個圖完全不同啊,你怎麼能做成這個樣子」
「啊?不同麼?我看上去差不多啊」
「你瞎啊,這麼明顯的不同你都看不出來」
「。。。」

所以需要轉化語言讓開發能夠輕易的明白,將抽象的感性內容轉化為可量化的理性數字。例如動畫運動軌跡,靠開發觀察運動軌跡幾乎是不可能的,所以需要轉化你的語言讓開發更容易明白。

視覺設計師是怎樣讓前端工程師 100% 實現設計效果的?

4:反覆驗收

對每一個節點都要進行驗收,多次驗收可以讓你及時瞭解最新動態,如出現問題也可以及時的做出修改反饋。即使做到以上幾點,開發也不是能完全理解你想表達,所以需要非常頻繁的同步資訊,而不是做的七七八八了,突然發現這裡有問題,那個時候再來改,時間可能已經不夠用了。另外,只有做到以上幾點,你才能理直氣壯的和開發定責,否則,哪有臉找別人理論吶。

綜上所述,相信你已經足夠明白「跟進還原能力」對一個設計師的重要性,會做「好看」的設計師這個世界上大把,dribbble上一抓一大把,但能做好商業設計,所需的能力遠遠不止於此,一個不具備將事情由始至終合格完成的設計師在任何時候都是不及格的,從結果導向上來看,甚至不如一個「你認為比你低階很多」的設計師,擁有全方位的素質才是「稀缺物種」

相關文章