Facebook Pixel Facebook Pixel

前端工程師是人不是神,但不論如何你還是要具備這三種思維

2015-07-02
Kimix
前端工程師是人不是神,但不論如何你還是要具備這三種思維

如果你是一個天才等級的工程師(馬上可以離開),可以獨立完成一個很多事情,你可以是一個怪咖,因為我相信沒有一個人不會不佩服你,但是現實歸現實,多數人都不是天才,而我們職場上也不是單打獨鬥,我們需要團隊合作,我們需要協調和配合,我們需要考慮除了代碼以外的事。

 

前端工程師,也不僅僅只是負責接資料,撈數據,做個回應,當然只是做這些也並沒有不對,但是我們需要和後端工程師溝通,我們也需要和設計溝通,也需要和PM溝通,怎麼做才是對這三方都比較有好處,要把握的好,說一些有建設性的意見。

 

邏輯思維

在開始寫某一段代碼的時候,想一下它會用在哪裏,會重複用嗎? 它以後會不會變,如果會變怎樣,可以怎樣變,而一般上網頁結構的變化,雖然很多但是也有一個根據,這個根據就是可以預先估計好的,因為沒有一個案子,是不會「不改」的,很多時候你都是要一邊做一邊改,甚至可能會來個乾坤大挪移。當真的會發生變動會修改,你有什麼對策?這些都是需要想好,建立在一個邏輯上。

 

通常專業的設計師,設計一個網頁的元素都是同質性很高,等比或對比的,所以代碼按理也是可以重複用的,所以為何你要學會用CSS preprocessor(Sass,stylus,less),寫一個Mixin或一個變數,一開始用你會覺得很麻煩,但是用了你就回不去了,提高你的效率還提高你的準確度。

 

工程師的世界就如武林,大家都各自修煉,每天都有新的祕籍,大家都很好奇跑去修煉一下,希望有天成為武林高手。這也是提升你見識和專業的潛動力,如果你沒有好奇心,看的和懂得東西太少,邏輯自然不會跟上時代。要保持不斷的學習,來磨練自己的邏輯思維。

 

邏輯思維某程度,就是你的程式專業能力,除了能寫出來還有可維護,能閱讀。當事情建立在一個很好的邏輯上,那麼出錯幾率就會比較低,那麼和你工作的人也會比較愉快。拜託你寫了沒有人看的東西的代碼,甚至你會默默問「為何他要寫這個?」「為何寫了120行只是為了要表達這個XX嗎? 」如果你的案子是自己看的那就沒差,你愛寫的多亂都可以,如果不是,那麼還是按照邏輯來寫。

 

可以把一件事做的很好,那是師傅;可以把一件事做好和預測未來的事,那才是專家

 

商業思維

PM和老闆、或者你的客戶或情人,都會問你,「你需要多少時間」,如果說的太短,可能會做不完;如果說的太長,也不可能,是一個怎麼回答怎麼死的問題。有時候,需要換一個立場,在第三方的角度去思考一下,我們的完成度,和他們的完成度可能是不一樣的。

 

我們把案子的細節分成兩種情況,一種是你已經有經驗,可以預估時間的;一種是你沒有做過或你很陌生的,你沒有時間估計的基礎。那麼提出一個,他們可以最低接受的標準,例如一個App網站,最低標準需要一個首頁,和一個鏈接去下載app的按鈕2個,那麼這些是可以預估的,你說三周的時候,你可以完成到這個進度,剩下的,你需要Research一下,之後再給一個比較有根據的時間。

 

估計一個案子需要多少時間做完,是非常非常的重要,因為你消耗的是一組人的時間,不是你自己的(除非你自己一個人做,或者你是老闆),如果你估計算錯了,後面的事情就會延期,做不出來沒有很大的關係,最重要是把問題解決,提出你的解決方法,怎麼的方法才可以達到案子的目的。

 

換一個立場提出解決方案,對事情是有幫助的,對公司或客戶是有幫助的,客戶不會在乎你解決不了手機網頁看不到20個欄位的table那個問題,但是客戶很樂意聽你說,這樣的Table不好看,可以換一個顯示的方法。客戶也不太在意你是用Rails還是php(有些是很在意,他們假裝他們懂),可以購物和發文就好。

 

前端工程師是很常接觸到客戶的投訴,所以有些東西沒有想好,就會很麻煩,做了一個網站,換作你是網友或客戶,你會滿意你自己做的網站嗎?

 

設計思維

很多時候,前端工程師本身也是設計師,但是也有很多是本身是前端工程師也是後端工程師,設計和前端是分割不開的。當然我這裡說的設計,不是真的要你弄一個畫面或完整的設計圖。

 

「”It’s not just what it looks like and feels like. Design is how it works.” —Steve Jobs」

 

前端的設計是指一個畫面或元素,如何被執行和創造,移動或消除,這個設計在不同的寬度和高度,不同的裝置看,效果是怎樣,考慮進去就是你的設計思維,怎麼把設計師的畫面弄成一個活生生的網頁,要用設計師的角度去思考,才能有辦法把設計圖的概念充分的表達出來。

 

話說早前,收到一個「設計圖」,上面有一個「X」,我問客戶這是什麼,他說是「回上一頁」,為何回上一頁是「X」,這不是一個popup也不是一個modal,同時這個圖上還有很多不同顏色和大小的「X」,分別代表了「刪除」、「關閉」、「滑下」,這是一個不太合理的設計。

 

設計的思維,會直接影響你寫的代碼結構和網頁結構,因為你看不出設計的重點在哪裡,怎麼寫才可以達到設計師要求的效果,你沒有辦法好好的組織你的結構和元素,就無法好好把網頁軿湊出來。這不但大大的降低你的效率,做出來的東西也不會一致,可能一個網站,就出現幾種本該一樣,結果「很像」但是不一樣的按鈕,因為你用了幾個class和不同結構來做,那就是你一開始就沒有好好思考設計。

 

你可以做什麼

在前幾篇文章大概有提到,設計前端工程師真的算滿新的工作崗位,當然以上也並非百分之百的對各位有幫助,就只是有那麼一些小想法,自在和大家分享,希望可以在團隊裏面,當一個好隊友。

 

1,沒事要練功,FB逛幾分鐘就好,不需要留戀太久。

2,做好一個網站,自己玩一下,給你朋友玩一下,問一下他們的意見?多問幾個。

3,多看設計圖,看思考一下你會怎麼做。

 

 

延伸閱讀:電商網站,如何越簡單越好?

原文出處:授權轉載自kimixw台北網頁設計

 

 

嚴禁抄襲,若欲轉載,敬請註明出處「SmartM」並附上原文連結。
歡迎各大媒體交換文章連結。
圖片來源:主圖、縮圖:geralt(CC Licensed)
加入SmartM粉絲團,更多電商訊息等你關注 https://www.facebook.com/smartm.tw

 

【超過300本影音說書陪你成就更好的自己】讓大大學院與你共讀,幫助「沒時間讀書」、「讀書速度很慢」、「讀完就忘記」、「抓不到重點」的你,利用18分鐘領略閱讀的樂趣,吸收並帶走鮮明觀點,真正讓知識內涵融會於日常生活。立即點擊加入
大大讀書|全台最大線上影音說書
本網站內容未經允許,不得轉載。歡迎來信投稿、洽談文章授權。

關注職場最新趨勢,為知識學習創造最佳環境

大大學院「全台最大影音說書.知識學習平台」,致力於推廣終生學習、培養職場人士的閱讀習慣。

按讚、追蹤「大大學院」Facebook粉絲團,每天更新最新職場趨勢文章,帶你掌握關鍵資訊。

加入「大大學院|職場趨勢新觀點」,最新、最實用的職場課程都在這,學習資訊不漏接!請用手機點擊「加入Line好友」連結,或是掃描QR Code加入。

處理中