iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 17
1
自我挑戰組

軟體開發商新手 PM 30 個第一次系列 第 17

【第 17 個第一次】PM 與設計師與前端開發者的溝通工具 - Zeplin

Day 17 - 在一個內部會議上,「麻煩請 PM 把每個頁面跟客戶談的 action 跟限制等規則寫在 Zeplin 的 Notes 上好嗎? Zeplin 工程跟設計都會一起協做,這樣三方溝通比較明確。」

剛進來這間公司的時候才初次聽到 Zeplin 這個工具,但不是很確定在 PM/設計/工程 三方當中該怎麼互相合作讓專案能順進行,少點 Review 跟來回對功能的時間。

大家好,我是 Jade Chang
先前任職於科技外商,主要負責對於 Developers 的開發經驗體驗,過去 5-6 年出沒於技術社群以及大專院校。嘗試過直播節目、技術黑客松、帶狀節目系列以及線上短期活動等行銷策略,半年前轉職到台灣在地的軟體開發商,從事行銷與專案經理,也合夥新創了一間數位公司,超展開職涯要開始囉!!!

先來談談 Zeplin 這個工具

搭拉,超愛他的 Logo ,是艘帥氣的飛行船,
Zeplin 頁面一進去就可以很清楚知道這套工具的強項,專注於設計師與工程師之間的協作 > https://zeplin.io/
https://ithelp.ithome.com.tw/upload/images/20201001/20094570WSUcrATJiD.png

  • 應用程式僅提供 MAC 版本,但是好處是 Zeplin 用網頁板就可以打開了
  • 介面上以 UI 為主,不論是展示給客戶或是 PM 對稿上都很快能上手
  • 可以將專案與 Slack 做綁定,一有更新就可以推送通知

專案上協做 Zeplin 好用的地方

Zeplin 可以讓設計師們直接將 Sketch 的設計稿做匯入,匯入後設計師可以在將頁面做整理與分類,下面的圖示為目前公司使用的方式,會按照頁面來分類設計稿,也會將桌機手機板做分類,這樣方便在頁面眾多的專案能有索引的概念,讓大家在第一時間找到要討論的頁面。
https://ithelp.ithome.com.tw/upload/images/20201001/200945702G31V5OLkF.png

設計稿匯入後,右手邊的工具會提供色碼、尺寸、元件距離,同時也會提供原件 PNG/SVG 做下載檢視,也有提供參考用的 CSS / HTML 語法做為參考。
https://ithelp.ithome.com.tw/upload/images/20201001/20094570vsTmPE4SXS.png

同時在 Zeplin 上也可以透過 Styleguide 來先將專案的顏色、字型字體、間距以及每頁都固定會有的元件做模組化,讓工程師在製作時不用重複很多一樣的東西,要修改時也是一併調整,節省很多不必要的時間。
https://ithelp.ithome.com.tw/upload/images/20201001/20094570JcOaWXJRiG.png

對於 PM 來說,由於最清楚知道客戶的需求同時也會一同參與網站規劃,是最清楚專案流程的人,每一個按紐客戶希望連結到哪,輪播的圖片要幾張,這個頁面想要顯示幾條資訊等等,很多詳細的規則會需要告知工程師這邊會有這樣的限制或是功能,與其等工程師觀落陰或猜猜樂做出來後再一一修改,一開始就先定義好 Spec 還是最重要的,通常會使用 Notes 來做註記與需求確認。

https://ithelp.ithome.com.tw/upload/images/20201001/20094570sgpeBiw5s0.png

目前專案上使用到 5 - 6 種協做工具 (Slack,Google Sheets, HackMD.....),Zeplin 還是PM/設計/工程最有交集的工具,且能清楚知道討論的位置與最終的記綠,目前使用上都還算蠻順利的。

One more thing!

歡迎訂閱我 Medium 或是透過 Facebook 一起來交流

https://ithelp.ithome.com.tw/upload/images/20201001/20094570epR6m0wwAd.png

中秋節快樂 /images/emoticon/emoticon24.gif


上一篇
【第 16 個第一次】Sitemap 網站地圖的作用
下一篇
【第 18 個第一次】 淺談 User Experience 使用者經驗在專案上的應用與各種心理學法則
系列文
軟體開發商新手 PM 30 個第一次30

尚未有邦友留言

立即登入留言