設計師 ＋ 好溝通的 ＋前端工程師 ＝ 團隊
前端工程師 ＋ 好溝通的 ＋設計師 ＝ 團隊
A + 好溝通的 + B = 團隊
你 + 喜歡的 + 人 = 一起工作的人
我喜歡跟怎樣的人一起工作？
會得到一個全新的問題：我喜歡跟怎樣的人一起工作？
 |
| PO, Developer, Editor, UI/UX, PM |
團隊的成員有？
討論主題前，讓我們先來看看完成一個網站建置需要哪些人？
專案負責人：溝通專案需求、協調團隊工作及管理專案時程；
系統架構師：畫出網站架構藍圖，決定網站什麼地方該放什麼；
後端工程師：前端工程師與後端資料庫的連接橋樑；
前端工程師：將設計畫面轉換成程式語言；
設計師：將專案需求從文字變成美麗的畫面。
這是最基本且合理的編組，為什麼要特別提到且合理呢？因為兩三個人包辦全部工作的機會並不少見。
全端、後端、前端？
早期沒有前端工程師這個職稱，通常是後端工程師包辦全部開發工作；近年來數位裝置種類越來越多、交互行為變得越來越複雜、設計的要求也越來越高，一個人包辦所有開發工作的時代已經落伍了，取而代之的是更專業的分工，也因此誕生了前端工程師這個新職業。
學校不量產前端工程師，在市場上能看到的前端工程師，主要的取得方式有下面幾種，第一種類型是後端工程師轉前端工程師，又稱為全端工程師，我屬於這種；第二種類型是目前的主流，直接學習前端開發語言的原生前端工程師，特別強調原生是因為通常這樣的前端工程師不具備後端開發能力；第三種是近幾年急起直追的設計師轉前端工程師，一般會稱為前端設計師或 UI 工程師（UI : user interface 使用者介面設計）。想了解更多请参考我的另一篇文章「架個網站很難嗎」。
前端工程師跟視覺設計師的差別只是使用的工具不同，一個是用程式碼，一個是用設計工具，最後完成的作品都叫設計。
前端工程師跟設計師其實是性質非常接近的工作，最大的差別是使用的工具不同；前端工程師用程式碼來實現設計師的作品，依賴的是挑戰設計難度的想像力。設計師則用設計軟體來完成作品，需要的是無中生有的創造力。再深入觀察這兩個工作，會發現需要的能力幾乎是相同的，只是需要的能力出現在解決問題的不同時間點。
我們遇到問題了
白眼翻到天邊去
對設計師說：
- 只是換個顏色應該不難吧？
- 這底色有點暗，能換成亮一點的黑色嗎？
- 差 2px 不行嗎？
- Logo 太小，可以放大一點嗎？
- 可以模仿那個網站做一個類似的嗎？
- 我想要豐富帶點灑脫的感覺……
- 這可以放一張大一點的照片嗎？
- 我覺看起來怪怪的，說不上來哪有問題，你覺得呢？
- 只改幾個字要三小時！
- 麻煩把這些小字改成粗體，這樣看起來比較明顯。
對工程師說：
- 這很容易吧，只是換個位置？
- 應該不難吧，明天能好嗎？
- 網站要向下相容到 ie6！
- 客戶又改需求了！
- 你先把功能做出來，我們再來評估。
- 只是複製貼上怎麼還要這麼貴？
- 用 css 改一下就改好了啊。
- 為什麼字體不是 18.5 px ?
- copyright 字體太大了，我給的是 8px 啊！
- 老闆說明天就要！
為什麼設計師、工程師聽到這些話會白眼翻到天邊去？因為用錯了溝通方式。
善於溝通的設計師
設計是為了解決問題而存在，商業需要的是設計師，不是藝術家。
藝術家：通常是有比較高的成就或擁有獨特的個人風格，並且具備一定美學素養的人。
不在意個人風格的設計師不可能成為好設計師，但設計跟商業扯上關係時，有時得先拋開個人風格；專案都有各種限制，時間很趕、經費不高或人力不足等問題，很多時候必須作出妥協，不是要設計師放棄理念，而是要在殘酷的現實中找出一個平衡點。
設計在發展到極致時可以成為藝術，但先要能解決問題，然後才是追求個人風格。曾經合作過的優秀設計師都具備這樣的特色，能深入理解問題、善於溝通、接受不同的觀點，看看後面這幾個例子。
潘潘(用戶體驗設計師)：為什麼按鈕要用紅色？
小白（設計師）：為了配合整體設計，這裏用紅色按鈕比較適合。
潘潘：可是紅色通常在警告時使用，換個顏色會不會好點。
小白：那只保留紅色框行嗎？還是換成半透明？
潘潘：換紅色框其它按鈕是不是要跟著調整？時間來得及嗎？
小白：沒問題，只要提供樣式給工程師，一次就能搞定所有按鈕。
---
阿魯(前端工程師)：這樣的動態太複雜，時間上可能會來不及，能不能換個表現方式？
小白：我希望透過滾動來表現時間感，除了滾動還有其他方式嗎？
阿魯：因為滾動會跟頁面上的部份區塊衝突，需要較多開發及測試時間，所以能不能換個方式。
小白：那換成一次捲動一頁呢？我還是希望能保持捲動來呈現時間概念。
阿魯：好吧，我先試試用捲頁式，時間許可再嘗試滾動式。
小白：太好了，非常感謝你，如果還是不行我們再想想其他方法。
---
阿魯：設計稿應該在上週就完成了，為什麼今天還沒收到？
小白：因為上週有做了一些小調整，所以多加了三天。
阿魯：增加三天的時間會影響到開發時間，這樣會 Delay。
小白：已經跟專案負責人確認過了，設計時間延後影響到開發，上線時間會往後調整。（想法是好的，但可能性幾乎是零）
---
善於溝通的工程師
 |
| 電腦螢幕上眼睛看得到的都屬於前端工程師 |
前端工程師：擁有前端技能（即HTML, Javascript和CSS）以及專業設計（視覺設計和交互設計）技能。
我對前端工程師的要求很簡單，百分之百實現設計師的想法，不管是設計風格、動態或交互。
有句話是這樣說的，用戶永遠是對的；其實這句話很有問題的，很多時候用戶會因為無知做出錯誤的判斷，但在這我們先不談防呆，那是另一個值得討論的議題。設計師也會犯相同的錯，當設計師因為不了解技術限制時也會做出不合理的設計，比如前面提到的 18.5px，這時就需要良好的溝通能力了，看看下面幾個例子。
小白(設計師)：為什麼紫色看起來跟我的設計不一樣？
阿魯(前端工程師)：這個紫色會有問題，能不能換其他顏色；
小白：紫色是客戶的代表色，一定不能換；
阿魯：一定要用也不是不行，只是它不屬於網頁安全色，在不同瀏覽器會有些微的色差，如果能接受，那就沒問題；
小白：怎麼會這樣！
阿魯：不同品牌的瀏覽器對顏色的定義是不同的，所以有些顏色會出現這樣的問題，先跟你說，以免客戶問起來不知道如何回答。
---
小白：為什麼這個動態需要兩個禮拜？
阿魯：因為沒有現成的套件能用；
小白：什麼是現成的套件？
阿魯：網頁上的動態如果是很常被使用的，就會有人把它寫成套件，這樣其他人在開發時就能直接拿來用，不需要花很多時間重新開發；
小白：那沒有怎麼辦？
阿魯：自己開發啊，因為沒有人寫過，所以需要花時間研究跟測試，預估最快要兩週，也可能需要更長的時間。
---
小白：為什麼動態跟漸層都不見了？
阿魯：哦，我來不及跟你討論，老闆說這禮拜就要先上線；
小白：就算這樣也不能改我的設計啊；
阿魯：嗯，我也覺得這樣不對，少了看起來不太對，但全部完成要到下週才能上線，這樣會來不及。所以我先做一個完整頁面，這禮拜上線前應該來得及把漸層加上去，至於動態就沒辦法了，少了動態確實差滿多的，我們先上線一個內容完整版，下週會再把動態補上，你覺得如何？
---
很多時候只是溝通的方式錯了
溝通的過程主要是資訊發送者把思想內的資訊內容以可交換或共同認可的表示方式編碼，以某個渠道來傳遞。資訊接收者獲得資訊後，便進行解碼，轉換成內在的資訊。
可交換或共同認可的表示方式這段話是溝通問題的根源；說話，其實就是一種編碼過程，我們的想法經過大腦思考、整理、歸納後轉換成文字（編碼），然後透過嘴巴輸出，聽的人由耳朵輸入，經過大腦還原（解碼）成能理解的文字，這就是溝通過程。那為什麼每個人用的方法都一樣，卻還是溝通不良？問題就出在編碼方式不同。
設計師用最新型的彩色編碼器，工程師用的是最高檔的黑白編碼器，你覺得能溝的通嗎？當然不能！但編碼方式能說換就換嗎？很難，非常難，改變對任何人來說都不是件容易的事，除非認真想讓自己變的更好，否則幾乎是不可能的事；下面提供幾個讓溝通變得更容易的方法。
把你變成我們
別傻了，對事不對人是禮貌性的謊言，⌈人⌋ 跟 ⌈事⌋ 是綁在一起，不可能分開的，相信對事不對人就是你太年輕了；好比我心裡想的是：你這個蠢蛋，卻打出你太年輕這幾個字，因為我們都太習慣用好聽話包裹內心真實的想法。
小白：我覺得這樣的設計沒抓到客戶要的感覺，客戶可能不會買單，可是，你不要誤會喔，我一直都很喜歡你的設計，只是這樣的風格不太對。
是不是有點熟悉？對事不對人，那這個客戶不買單的設計是誰做的？很多時候我們只是不敢直接面對問題，因為對事容易對人難，所以繞一圈說對事不對人，說穿了就是不想得罪人，那怎麼辦？有沒有什麼辦法，其實只要換個角度面對問題，結果就會完全不同。
先要站在一起。丟掉你、我，他，開始用我們，例如：讓我們一起完成最好的作品，把這句話當成前提，其他問題就不再是問題了，因為有了共同目標，問題就不再是你的設計有問題或我的程式沒寫好，而是我們的設計該怎麼做，程式可以如何完成。當你將工作變成我們的工作時，很多爭執都會消失於無形。
不懂可以問
在工作時最怕遇到的就是不懂卻不問，我想是教育造成的問題。台灣人很不愛問問題，以前在上程式課時就發現有這現象，問學生有沒有問題？台下像被按下靜音鍵，接著讓大家試著寫寫看，全卡關；最近教小學生也發現一樣的問題，原來發問能力在小學時期就壞掉了。
設計師的每個設計都有一套脈絡跟想法的，有時為了一個背景色的選擇就要花幾小時甚至幾天的時間跟客戶溝通確認、做各種探索、嘗試。當你用無知的語氣說：這顏色太暗，能不能換亮一點的顏色時？你覺得會得到什麼答案？
工程師已經花了一個禮拜的時間，上網找了一堆資料，跟其它工程師討論，一次又一次的改寫程式，測試，好不容易才完成。當你用無知的語氣說：這應該不難吧，只是讓頁面自動往下捲動？你覺得會得到什麼答案？
很多時候因為我們的無知，一腳就踩在雷上，能不引爆嗎？別讓無知毀掉所有的努力，不懂可以問：為什麼會選擇這個顏色？有什麼特別的想法嗎？為什麼這樣的捲動方式很困難？跟一般捲動的有什麼不同？當你真心想知道為什麼，多數人會回應你的用心的，至於那些懶得回答你的就踩爆他吧。
讓專業的來
在專案進行前都會先跟團隊溝通一個基本原則，尊重專業；遇到問題時團隊先確認問題類型，是設計的問題、程式的、客戶的、還是規劃出問題，不管問題出在哪個環節，每個成員都會有自己的想法跟見解，但最後做決定的會是這領域的專家，也就是設計問題設計師必須作最後判斷，開發問題則由工程師來做決定，時間管理問題就是專案負責人的工作了。
當專業受到挑戰時，怎麼心平氣和的溝通？
PM：為什麼變這麼醜？
小白：因為老闆覺得綠色不好看，希望能換成藍色的。
PM：這應該很簡單，明天能上線吧。
阿魯：靠！光套版就要一天，你想要多快？
小白：為什麼沒用我設計的顏色？
阿魯：我覺得那顏色不好看，所以做了一點調整。
是不是很熟悉，背後不知道偷罵了多少次，那個 XXX 是不是智障；最後，工程師挨罵了，設計師離職了，專案 Delay 了。
好的團隊是從尊重每個成員開始，在面對問題時我們可以有不同的觀點，可以分享自己的想法，可以透過進行討論取得更好的答案，但現實不會總是如此，當問題無法取得共識時，請先想想，誰是這領域的專家，將最後決定權交給他，他才是最適合做決定的；提醒你，決策出問題時會負起責任的不是你，除非你想跟老闆說：都是我的錯，是我說要改的。
不要停止學習
學習用團隊的角度思考；專案成功不是一個人能做到的，是大家一起努力換來的。好的計劃不能缺少設計師，好的設計沒有工程師也只是美麗的畫面，再好的技術少了設計師是什麼都做不出來的。一起做、一起想、一起挨罵、一起偷懶最後還要一起成長，這樣的團隊還能有什麼溝通問題？
學習對方的語言，設計師除了設計，學點程式語言也是不錯的，相信我，你會打開另一扇窗，說不定你會愛上程式設計。工程師除了寫 code 也可以多多接觸設計啊，不能老是被當成只買格子襯衫的阿宅，相信我，學會設計會更受歡迎喔。至於 PM 就都學吧，誰叫你全都要管？哈哈哈。建議大家多學點，不用學到能轉行的程度，只要學到堪用就行了。舉我喜歡的 snowboard 為例，只要能平安的從山頂滑下來，管你用什麼方法。
學習相信成員的專業能力，相信你的夥伴很難嗎？少了信任的團隊是不可能做出好作品的。我的團隊有設計師、工程師、研究員及用戶體驗設計師，在工作時其實沒有很明確的區分，工程師會談設計，設計師會討論技術問題，研究員會提出設計觀察，每個人都有自己的工作該完成，也會在同伴遇到困難時提出建議，很多時候無厘頭的想法也能迸出精彩的火花。
如果上面說的都沒用
整理好你的作品，準備換工作吧。（可以參考我的下篇文章）
寫這篇文章時我也一直自問，這些東西有用嗎？真的是這樣嗎？一定有不少人有相同的疑問。其實，溝通問題很多時候是出在組織或企業文化上，組織文化會影響每一個成員，如果企業本身有問題，個人再怎麼努力也是白搭。
我待過的公司都是扁平化的組織型態，不會特別強調上下關係，需要面對的只有人跟人之間的溝通問題。大部分傳統企業就不是這樣了，需要面對的有主管、主管的主管、老闆或討厭的客戶，這時上面提到的方法就不一定管用了，畢竟人是最難處理的問題，但也不是完全沒用啦，只是需要學的東西更多，短時間是很難改變的，即使革命成功，結果也不一定是你想要的，所以，換個新環境也許是更好的選擇。
---
總算寫完了，花了快一個月的時間；文中提到的工作說明不是所有人都是這樣的，有精通設計的工程師，也有很會寫程式的設計師，還有非常專業的PM，我只是將工作時看到、經歷過的寫下來跟大家分享。文中提到的想法有任何疑問，歡迎提出來討論。最後謝謝你的時間，希望這篇文章有幫助到你。
發表文章
沒有留言:
張貼留言