# 工程師與設計師的合作方式

:::info
工程師與設計師的合作方式非常多元，會根據不同的公司性質而產生出合作上的差異，這次分享會以我過去的經驗角度出發。

**主要影響的因素包含：**
1.公司規模
2.工程師/設計師群體規模
3.產品性質（to B/C）
4.專案人員組成
:::

## 設計師使用軟體介紹
1. [Sketch](https://www.sketch.com/)(通常搭配[Zeplin](https://zeplin.io/))
2. [Figma](https://www.figma.com)
3. [Adobe XD](https://www.adobe.com/tw/products/xd.html)
4. Adobe Photoshop
5. Adobe Illustrator
</br>

## 設計流程
#### 1. 需求確認
製作user research, user story...等，了解使用者的目標及預期效益。
由業務、PM、設計師、前端工程師、後端工程師，跟專案有關的全部成員都要到齊，由業務根據網站規劃書的內容逐一說明，將讓所有成員了解專案內容，由PM紀錄專案。此階段PM的角色比較重要，負責客戶與專業團隊之間的溝通，並協助專案成員排除各種障礙。
PM與工程師一起寫文件條列專案功能與規格;與設計師一起思考user story。設計師會根據客戶或專案需求，先大概設定基本設計風格。

#### 2. Functional Map
functional map功能和資訊（內容）的組織架構，目的是將抽象的「需求」轉變成可實現的功能。
通常使用 draw.io、[figjam](https://www.figma.com/figjam/)等繪製。

#### 3. UI Flow
安排功能在頁面之間的操作動線，瞭解使用者要經過多少頁面才能完成一個操作任務。
分為文字版及圖片版，圖片版在wireframe完成後才會製作。

#### 4. Wireframe
網頁或應用程式的低保真原型。去除所有視覺影響，用來確認將要顯示的
頁面元素。

#### 5. Mockup
畫好 wireframe 之後就是 mockup，此階段決定頁面的視覺風格，並定義出UI guideline。

#### 6. Prototype
可被操作且動態的原型，目的是模擬使用者與介面之間的互動，例如說按鈕按下後會出現的操作方式與呈現等。簡單來說，就是模擬一個產品完整的體驗。
以各種不同軟體呈現，呈現效果分為低/高保真

**個人經驗：**

## 工程師與設計師合作建議
**1. 理解彼此思維的歧異才能讓溝通更順暢**

設計和開發之間最大的差別在於：設計是具包容性的（inclusive），必須在解決方案中顧及越多要素越好；而開發則是具排他性的（exclusive），藉由排除其他所有的可能性找出最佳解。
建議在專案初期（也就是user story、架構圖及wireframe階段）要密集的溝通，提早釐清雙方想法避免誤會。

**2. 善用站會（Daily Weekly Meeting）**
善用站會或零碎時間與設計師討論目前各自的進度，交換想法以及提出困難。

**3. 告知框架、套件限制**
如果有使用框架、套件及特定風格（例如bootstrap、material design），在設計前期（設計師畫wireframe前）可以先告知設計師，請設計師按照特調風格與限制製作。

**4. 請設計師提供UI guideline、UI kit**
定義整體設計的主視覺、主色、輔色、功能色/按鈕、元件的互動效果

**5. 請設計師製作錯誤畫面、空白畫面、極限狀態**
錯誤畫面：404要怎麼呈現？資料送出成功與不成功的呈現？沒有網路連線的畫面？

空白狀態：尚未有資料、搜尋無結果的畫面

極限狀態：提醒設計師必須設計出不同數量資料帶入的畫面，當文字非常多時，整體的呈現會是如何？

**6. 專案時間准許下，請設計師提供Prototype**
Prtotype又分為低保真與高保真的prtotype，低保真製作時間短，但互動效果有限，常見的軟體有Invision、marvel等。高保真製作時間長，互動效果較全面，軟體有 proto.io、figma內建、protopie等。

## 參考資料
https://www.yottau.com.tw/article/162
https://medium.com/as-a-product-designer/%E4%BD%8F%E6%89%8B-%E4%BD%A0%E5%80%91%E4%B8%8D%E8%A6%81%E5%86%8D%E6%89%93%E4%BA%86-%E8%A8%AD%E8%A8%88%E5%B8%AB%E8%88%87%E5%B7%A5%E7%A8%8B%E5%B8%AB%E7%9A%84%E6%84%9B%E6%81%A8%E6%83%85%E4%BB%87%E5%A4%A7%E8%A7%A3%E5%AF%86-475a976ff67b
https://collectui.com/challenges/sign-up
https://medium.com/as-a-product-designer/%E7%94%A2%E5%93%81%E8%A8%AD%E8%A8%88%E5%B8%AB%E8%88%87%E5%B7%A5%E7%A8%8B%E5%B8%AB%E5%AE%8C%E7%BE%8E%E5%90%88%E4%BD%9C-5b4fc1aef7d0