與設計師的良好合作經驗

帶給我的幫助

2016/ 8/ 30 @ UI/UX Taipei  

 

Denny Ku

 

簡報網址:

http://slides.com/dennyku/deck-5/

我是誰

Denny Ku

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

對什麼有興趣

  • Programming Language
  • Front-end
  • Serverless
  • NLP

擅長技能

  • JavaScript
  • Web Front-end
  • 跟設計師當好朋友

今天要講什麼

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

今天不講什麼

 

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

我也知道

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

 

與設計師的良好合作經驗

=>

好的協作體驗

名詞解釋

名詞解釋

前端工程師

專指開發 Web GUI 的 Front-end

 

例子:我

略懂程式設計,但我不會設計

從「人月神話」談起

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

什麼是人月

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

  • B工作:2 個人做 3.5 個月能做完 = 2 * 3.5 = 7人月

你覺得合理嗎?

 一個極端的例子

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

 

 

 

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

 

什麼是人月神話

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

什麼是人月神話

「人月神話」的背後隱含:人和時間是可以互相替代的資源。

一個太簡單的結論

  • 溝通的成本

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

我是一個前端工程師

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

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

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

因為這是前端工程師唯一能為設計師做的事情

(真的啦)

如何打造良好的協作體驗

  • 概念面
  • 技術面

如何打造良好的協作體驗

概念面

先從當個好前端說起

萬年月經文:前端工程師要不要懂設計?

Photoshop、illustrator、Sketch?

當個好前端

會的話很好,但人生苦短

那好的設計師呢?

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

JavaScript、CSS、HTML?

當個好的設計師

會的話很好,但人生苦短

所以我們應該要

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

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

注意:

是「理解」,而非說服

真正的溝通

 好的溝通,不是說服對方

而是建立共同的價值觀

「小孩才分對錯,成年人只看利弊」

- 電影《後會無期》

自以為常見的盲點

  • 教設計師寫程式很困難(X)
  • 不想用心教程式(O)

自以為常見的盲點

  • 讓工程師懂設計很困難(X)
  • 工程師自以為懂 UI/UX(O)

自以為常見的盲點

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

如何打造良好的協作體驗

技術面

簡單做個問題分類

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

招聘

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

討論

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

合作

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

驗收

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

其他

  • 改需求怎麼辦?
    • 答案:
      • 前端也需要架構,一改就爆的話還稱的上前端「工程」嗎?
      • MVVM、Unidirectional data flow
  • Component base 的優勢:
    • 每個畫面元件的複用性
    • CSS modules 帶來的限制
    • 「簡單易學」的語法

這件事給了我什麼幫助

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

前端工程師

「後端 API 的邏輯是理性的,

    設計師圖稿的美感是感性的,

    而前端就是站在理性跟感性中間的介面設計者。」

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

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

但其實我頂多只能做到

不要跑版...QQ

求職天眼通的故事

這是什麼?

開發之前

 

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

理念先行

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

起源

  • 打倒萬惡 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

謝謝大家

參考資料

Made with Slides.com