• sudo _：Front-end developer
• 和沛科技：Front-end engineer
• github： abalone0204
• Blog：abalone0204.github.io
• 寫了個 Chrome 插件：求職天眼通

最近對什麼有興趣

• Programming Language
• Front-end
• golang

擅長技能

• JavaScript
• Web Front-end

• 跟設計師當好朋友

今天要講什麼

• 為什麼該重視與設計師的協作「體驗」
• 如何讓設計師放手設計
• 這件事給了我什麼幫助
• 「求職天眼通」的故事

今天不講什麼

• 任何跟 gui 開發無關的程式
• 任何切版的技巧
• 太多無聊的細節
• 任何我不懂的東西

我也知道

• 「前端跟設計師合作」的題目是老生常談
• 我們沒有找出一個真正的好解法
• 這問題可能真的沒有好解法
• 回家洗洗睡  提出更多可以嘗試的方向

與設計師的良好合作經驗

=>

好的協作體驗

名詞解釋

名詞解釋

前端工程師

專指開發 Web GUI 的 Front-end

為什麼我們該在乎「協作體驗」？

什麼是人月

• A 工作：1 個人做 2 個月能做完 = 1 * 2 = 2 人月

• Ｂ工作：2 個人做 3.5 個月能做完 = 2 * 3.5 = 7人月

你覺得合理嗎？

 一個極端的例子

• C 工作：1 個人做 10 個月能做完 = 1 * 10 = 10 人月

• 老闆：「我們把團隊加到 10 個人，一個月就把東西幹出來」

什麼是人月神話

用「人月」為單位來衡量一件事是一個扯淡的神話。

什麼是人月神話

一個太簡單的結論

• 溝通的成本

• 二十個人的團隊可能比兩個人的團隊產值還低

我是一個前端工程師

• 我不懂、也不該告訴設計師什麼樣的設計是最好的

• 我可以讓我們溝通的成本降低

為什麼該在乎如何打造良好的協作體驗

如何打造良好的協作體驗

• 概念面
• 技術面

如何打造良好的協作體驗

先從當個好前端說起

萬年月經文：前端工程師要不要懂設計？

Photoshop、illustrator、Sketch？

當個好前端

會的話很好，但人生苦短

那好的設計師呢？

萬年月經文：設計師要不要懂寫程式

JavaScript、CSS、HTML？

當個好的設計師

會的話很好，但人生苦短

所以我們應該要

讓工程師「理解」設計思維

讓設計師「理解」程式思維

注意：

是「理解」，而非說服

真正的溝通

自以為常見的盲點

• 教設計師寫程式很困難（X）
• 不想用心教程式（Ｏ）

自以為常見的盲點

• 讓工程師懂設計很困難（X）
• 工程師自以為懂 UI/UX（Ｏ）

自以為常見的盲點

• 兩者都不是因為「溝通」的技巧出問題，而是一個團隊裡，大家的目標不同

如何打造良好的協作體驗

技術面

簡單做個問題分類

• 招聘
• 討論
• 合作
• 驗收
• 其他（需求有變動時）

招聘

• 最容易被忽略的環節
• 讓設計師參與前端工程師的招聘流程
• 讓前端工程師參與設計師的招聘流程
• 為什麼我們只討論合作過程，而沒想過人一開始就不對呢？
  • ​老闆喜歡的人 = 合作愉快的夥伴？

討論

• Talk is cheap.
• 畫圖表明想法
• 多問為什麼
  • 「畫面上的每個東西，都應該要有它的意義」

合作

• 能自動化就全部自動化
  • 任何跟畫圖、實作無關的都應該想辦法自動化
  • 例子：出圖、icon、標記 px
• 軟體輔助：
  • Zeplin、Avocode、Invision
  • Sketch 的 plugin
• 千萬不要覺得這個自己來沒什麼

合作

• 不同版本間的設計變化其實很麻煩
• 如何讓設計師有版本控制的概念
• 如何解決麻煩

合作

• 所謂教「設計師寫程式」，不是只教皮毛
• 版本控制概念乃軟體開發流程中的基本功

合作

• 分散式版本控制系統
• 時光機

合作

• 不要試圖教會所有 git 指令，先從 gui 開始
• 只要會 commit 和 push 就好
• commit ：存下現在的時間點
• push：把這些改變推到網路上給團隊的人知道

合作

• 學會 git 之後有什麼好處？
• 對版本控制會有更好的理解
• CI
• 搭配 sketch 插件(e.g: blade)生成 html + github page
• 設計師ㄧ push 後就可以上網看 prototype 
• 其他詳見補充資料

驗收

• 完成後一定要請設計師來對一次畫面
• 這階段是最好推坑寫程式的階段
  • 「設計師的控制欲」 by Even Wu
  • 詳情見補充資料

其他

改需求怎麼辦？

其他

• Component base 的優勢：
  • 每個畫面元件的複用性
  • CSS modules 帶來的限制
  • 「簡單易學」的語法

其他

• 教設計師學會版本控制
  • 每個畫面元件的複用性
  • CSS modules 帶來的限制
  • 「簡單易學」的語法

這件事給了我什麼幫助

• 理解前端工程師在團隊中的位置
• 明白如何加速與設計師的協作
• 心中保持著「為什麼要這樣設計」的疑問
• 跟設計師變成好朋友

前端工程師

• 該發揮創意的地方是程式碼、架構，工程的協作，而非畫面

曾經有人跟我說寫程式能改變世界

但其實我頂多只能做到

求職天眼通的故事

這是什麼？

• 一個可以在人力銀行職缺留言的 Chrome 插件
• 下載位址
• 粉絲專頁

開發之前

• 你是否聽過：
  • 「我要一個優雅一點的感覺」
  • 「現代、立體一點的感覺」
  • 「這色調感覺不太對吼？」

理念先行

• 「為什麼」很重要
• 建立共同的價值觀很需要知道「為什麼」
• 就能避免掉太多無謂的「感覺」問題
• 所以就先來談談背後的「理念」

起源

• 打倒萬惡 der 資方
• 讓大家遠離人力銀行​
• 勞方間的資訊流通
  • ptt: salary、soft_job？
  • facebook 、twitter？
• 問題不只在人力銀行、慣老闆
  • 更多的是勞方身份資方腦的奴隸王

如何讓企業公佈資訊

如何讓資訊在勞工間流通

• 你聽過 Bit torrent 嗎？

靠自己比較實在

• 假如我們把每個勞工所知道的知識都連接起來
• 是否就能有個解決問題的機會？

然後就開始動手做了

• 端午連假，我找不到設計師幫忙
• 畢竟，放假對勞工來說是一件很嚴肅的事情
• 但是，理念說清楚了，找到對的設計師應該也不是難事...吧？

 進化史

• 原本的 logo​

 做完第一版後

 這就是

• 工程師自以為懂 UI/ UX 的經典範例

但還好我有設計師朋友

• 所以​厚著臉皮請大家試用後，做了更改

 進化史

• 原本的 UI

 進化史

 進化史

近況

近況

• 目前正在修復舊的留言系統
• 開發對公司留言
• 我不喜歡 Disqus
• 粉絲專頁分享勞工資訊和新功能發布
  • 粉絲專頁不是我一個人管的 XD
• 剩下留到工商服務時間再說

一些心得

馬的

• 那為什麼之前不去做？

一些心得

台灣的奴隸王真的很多

沒有老闆或資方告過我

反而很多身為勞工的人覺得 OOXX

一些心得

收到許多被壓迫人的訊息：

• 怕被告
• 怕沒遣散費
• 怕臭掉

更加確定

好的勞動環境真的要靠勞工自己打造

工商服務時間

最後一個故事

有一天，我的老闆們告訴我：

「這個東西很好，你出去做這個。」

！

於是他們從老闆變成我的股東 + Mentor

感謝 Ben 及 Simon

總之我開了一間公司

要當 XX 界的 Uber

要當 OO 的 Airbnb

想專注把一件事情做好

工商服務時間

相信各位設計師一定都懂「天眼通」背後的理念

工商服務時間

需要 UI 設計師

薪水最低 40,000 起 + Option

學歷、經歷不限

詳情：

http://goo.gl/z8fM3b

工商服務

前端工程師：等到找到設計師後才會找

不過也歡迎寄到：

hr@qollie.com