使用 Sketch 改善網頁前端與設計的標註與合作方式

Standard

前言

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

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

去年認識了幾位網頁設計領域相關的朋友,在工作之餘的分享小聚中,得知「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