前言

身為一名網站前端工程師，關於「工程師與設計師如何進行合作，進而能完成更好的作品」一直是個讓我感興趣的議題。

當然這個議題範圍相當廣泛，從規格規範、工作流程、彼此的換位思考，到各式能提昇效率的工具等等。

去年認識了幾位網頁設計領域相關的朋友，在工作之餘的分享小聚中，得知「Sketch」這個好用的應用程式，它似乎能改善工程師與設計師合作時遇到的許多痛點。

今年才來介紹 Sketch 是有些 Lag，不過還是紀錄一下我的試用過程吧。

---

合作時遇到的痛點

由於每間公司的工作流程，以及部門配置都不大一樣，因此每個人在這段合作過程中遇到的痛點也各有不同，就簡單列一些我遇過，以及從其他前端、設計朋友那邊聽過的吧。

• wireframe -> mockup -> prototype 一套標準，各自解讀。
• 工程師怎麼都不照 mockup 實做，出來的成果總是歪嘴眼斜。
• 少了設計眼的工程師，實做時對於色碼與間距總感受不到細微差異。
• 在工作流程中加入「設計師必須提供 mockup 及 design spec」的流程，但標註每個細項（間距、寬高、色碼等）實在是曠日廢時且無趣的工作。
• 標註出來的規格表密密麻麻，讓人看到脫窗，很可能還會漏標或是漏看。
• 設計師缺乏元件化的概念，每一個單元的按鈕都有不知道是不是手誤造成的些微差異，無法重複沿用。
• 想要針對設計稿進行討論再實做，但不知怎麼進行。
• 有些公司裡設計師不負責製成網頁，但是 PSD 圖層又亂得毫無章法，要切圖與排成網頁很讓工程師頭痛。
• 要準備 @2x 跟向量 SVG 切圖相當麻煩。
• 工程師拿到設計稿進行網頁實作時，PM 也沒提供文案，只能開 PSD 複製文字或是自己打。
• 需求是個 RWD 網站，但設計稿只做了桌面版的大小，其他規格總是被遺忘，只好自己腦補。
• 各種腦補。

等各式各樣的問題。

---

Sketch

嗯，不是那個作 3D 模型的 Google SketchUp，在 Google 搜尋常會誤搜到 SketchUp 的教學，哈哈。

那麼 Sketch 能幫助我們什麼呢？當然，必須先說的是，它並無法解決所有的痛點，有些問題其實不在工具。

Sketch 是一套 Mac Only（Windows 的朋友們抱歉了 :P）的向量 UI mockup 設計工具，比起最常被使用的 Adobe Photoshop 跟 Adobe Illustrator，Sketch 它：

Continue reading