設計師與工程師如何溝通

設計意圖的表達方式

我們在項目中會綜合使用多種方式表達設計意圖，抽象程度、靈活性、製作成本、維護成本、使用時機各有不同。

工程師通常希望設計人員使用更具體的表達方式。

這裡所謂「具體」的意思是：接近代碼。

按具體程度排列：

• 口頭描述

• 文字敘述

• 靜態原型

• 動態原型

• 代碼示例

• 真實案例

• 項目中已有組件

需要注意的是，不是成本越高的表達方式就越具體。動態原型的具體程度在以上列舉中只是中等水平。

舉個例子，如果要做一個背景視差滾動效果 ，你會用哪種方法表達你的設計意圖？

如果設計師自己懂技術，就可以直接說明「各區域背景使用fixed定位」。

如果設計師不懂技術，可以找到類似的網站給研發參考。

如果設計師知道哪裡有相關的組件，可以告訴研發去用。

這些都是更加具體化的表達方式，效果可能比高成本的動態原型還要好。

設計師可以不懂技術，但一定要善於利用已有的案例、組件來表達自己的設計意圖。

具體化過程

所謂具體化過程就是從設計意圖到代碼的過程。

設計意圖的表達方式越具體，離代碼就越近，具體化過程中出現的問題越少。

具體化過程中需要設計人員的跟進與配合。如果設計人員的參與程度太低，最終結果可能就與預想的相去甚遠。

對於設計師，表達方式只是助力溝通的工具，不同情境、不同階段適用的不同的表達方式，善於溝通比懂技術更重要。

系統化設計

在以上列舉的設計意圖表達方式中，最具體的也是研發最喜歡的就是能夠利用項目中已有的組件。

所謂系統化設計就是構建並維護可復用的組件，然後利用這些組件進行組合，從而完成整個設計。

系統化設計的核心是復用優先，所謂復用優先就是優先考慮復用已有的組件，做組件時要考慮可復用性。

系統化設計的好處是加強了產品的內在一致性，避免了不必要的差異與溝通成本，促進產品積累與技術積累。

總結

綜合以上觀點，我給出的建議就是：

• 善於利用現有的東西 - 真實案例 樣式庫 開源組件 項目積累

• 注意設計意圖表達的過程性，要加強參與程度，沒有完美文檔

• 要有系統化思維，復用優先，保持一致性，積累團隊財富

一些參考：

Animate.css 動態效果庫

CodePen - Front End Developer Playground & Code Editor in the Browser 頁面效果Demo

One Page Love 有很多有趣的動效