設計的工作流程
身為一個過來人，應該說我也還正在這條路上行走，有一些心得想跟大家分享。我是從設計起家的。設計的領域又可粗分為圖示設計跟排版設計…等等，而我是屬於排版這一塊。做網頁的流程大致是：
- 打開 PhotoShop / Sketch 從一張空白的圖層開始做出一個網站
- 進切版(用 PhotoShop / Sketch 切出需要的 icon) 以及 Layout (用 HTML + CSS 做出網站)
- 會碰到 JS 的互動時，我能找套件就先幫忙做好，不行就放著給後端
- 丟給後端套程式。
如果你不是純視覺，我想你的工作流程可能跟我差不多。那，這樣不算是前端嗎？
前端的工作流程
事實上，前端沒有大家想的那麼簡單歐，不過還是有個簡易版的工作流程(俗稱「看得到」)，流程大致為：
- 收到視覺給的設計稿(通常是 PSD 存成的 JPG 圖片檔)，跟視覺討論一下了解動線
- 開始切版(用 PhotoShop 切出需要的 icon，可由視覺提供，也可能自己要會一點 PhotoShop) 以及 Layout (用 HTML + CSS 做出網站)
- 開始做出 JavaScript 互動，不管是用套件還是自己刻
- 跟後端配合串資料，將後端提供的資料(通常是 API) 接到網頁上，使其能順利呈現資料
(按：「看得到」意指瀏覽網頁時看到的樣子，包含網頁長相 (HTML + CSS)，用滑鼠或鍵盤點選的互動 (JavaScript)，我們通常也可稱之為 Prototype )
前端與設計的工作流程差異
比對一下設計的工作流程，主要的差別在於：
- 前端不產視覺 (廢話)
- 前端跟設計都要會 HTML + CSS 做出靜態網頁 (除非你是純視覺設計)
- 前端要比設計懂 JS，不只會套會用，還要會寫，厲害一點的人還會自己寫 plugin
- 前端要懂一些後端的東西，包含如何互丟、接資料，簡單來說就是要懂得如何處理 Client 端 & Server 端的訊息
(按：「純視覺設計」一職通常是大公司才會開這樣的缺，有想了解其中差異的，可以留言告訴我你想看，這樣我才有動力再寫一篇XD)
有沒有開始覺得前端很令人抖抖？光是要會刻 JavaScript，應該就有很多設計卻步了吧！更別說還要跟後端串啊～！
畢竟從以前的觀念就是，做設計的畫面比較強(右腦發達)、寫程式的人邏輯比較強(左腦發達)，除非很有才，否則很強左右腦都開發的完完整整。
但也別灰心，邏輯這東西是可以被訓練的喔！也許一開始寫的很差，只會土法煉鋼；但我相信寫久了、多看別人的 code，或是有好的主管帶領你，絕對可以慢慢進步！一起加油吧。
前端要做的工作
看到這，有沒有燃起了濃濃的信心！不過前面這些還只是前端「看得到」的工作，接下來，來告訴大家什麼是前端「看不到」的工作吧。
請先看這張流傳已久、強大的前端架構圖：
(圖片出處：好像已經找不到帳號的 Flickr 連結)
哈哈，有沒有驚了一下，所謂「看得到」的部份才只是冰山一角罷了。剛剛升起的自信心是不是又被打擊了呢！
假設你只是吞了一下口水，卻還是對前端很嚮往、很有愛，還是想轉前端試試看，我最後跟大家分享一下，你可以從哪些部份開始學起。(老話重提一萬遍：這是我自己的經驗，不是每個人都適用，所以大家可以參考看看，有喜歡的就吸收，沒喜歡的也別吐嘈，但歡迎討論)
從設計走到前端，推薦的學習流程
我覺得設計跟前端寫出來的程式碼，最大的差別就在這。前端的邏輯性很重，他們會把自己寫程式的經驗往回套到 HTML / CSS 裡，並且以模組化和用 slim, scss 等工具為樂(尤其看到 HTML / CSS 可以使用 function 或是變數，眼睛就整個亮起來 XD)。
當然，我們這群轉職者不需要強迫自己眼睛亮起來，也不需要為了跟風而去用這些工具，就我所知還是有很多前端界的大老是不用 slim, scss 取代原本的 HTML / CSS，除非你真的從裡頭找到對你有幫助的點，否則工具只是輔助，你也還是要懂 HTML / CSS 的本質流程，才能寫出好的 code。
為了友好的跟其他前端人員 co-work，以及和後端人員溝通，你要先嘗試修改自己的 HTML / CSS code 發想思維，這部份很博大精深、也很看經驗，不過還是有幾篇文章可以給大家參考：
1. 成為 CSS 團隊的一員：CSS 團隊開發的最佳實踐 / MSDN Magazine
2. CSS-Guidelines ： 編寫易於管理及維護的 CSS 的指導綱要
至於 HTML 的 markup 同樣也是很多眉角可以拿出來討論，加上每個人都有自己的想法，討論個三天三夜大概也說不完。如果你不知道要聽誰的意見好，那請以「你工作團隊的意見」為優先考量，畢竟你是要跟他們一起工作，而不是跟外面的那些討論者。多討論彼此能接受的寫法，並且嘗試將其他人的寫法吸收納入，等到以後你變成有決定權的人，就可以訂套 Guildline 出來啦(好像扯太遠了XD)
我想這沒什麼好說的了，這就是前端吃飯的工具阿 XD，你能不練嗎？如果真的學不起來 JS，或對 JS 沒興趣，那..你可以考慮往圖示設計或純視覺前進！？
前陣子在 JSDC，Even Wu 有個演講：如何教設計師前端技術。他在裏面提到：「不要丟一本工具書給設計」，設計是視覺的動物，你要先給他看網頁特效，如果他覺得有趣，他就會自己去學、去找。
大致來說是這樣沒錯，學做網頁本來就是要有興趣 XD。但有興趣只是領進門的必要條件，打好基礎才是能學到東西的重點。所以我認為，還是要給設計一本工具書，如果你想直接看網站文件也可以啦 XD。
工具書的重點是在打基礎，沒有這些基礎，你看到有趣的特效還是只會套用。但如果你真的想走前端，至少要懂得怎麼套用、怎麼改點 function、怎麼調用變數 … 等等吧！
雖然 Even Wu 演講的時候提到的例子是以 CSS3 為例，不過不管是 HTML / CSS / JavaScript…任何程式語言，「基礎」永遠是最重要的喔！，地基不先打穩，房子倒了都不知道是什麼問題呢 XD
Developers tools (開發者工具) 這也是一定要會的！有在寫 HTML / CSS 的人對他應該都不陌生了，利用開發者工具進行網頁除錯，應該是每個人必備的技能。
而如果要往前端邁進，必須將開發者工具的使用範圍擴大，除了「Elements」之外，你要開始學習「Network」、「Timeline」、「Console」…等這些面板的運用，假設你是使用 Google Chrome，Google 有提供一系列的相關入門教學，請大家好好認真研讀！！！
就連我自己也要認真研讀呢(握拳
如果很會用開發者工具進行除錯，對於網站的製作絕對可以省時省力(想想你們以前在用「Elements」的那種愉快之心吧 XD)
以往身為一個設計，只要把 layout 後的網頁檔丟出去就沒你的事情了(除非套程式的時候跑版 XD)，但身為一個前端，你要開始注重網頁的效能，包含網頁讀取時間、網頁大小、連線數、元件載入的時間順序…等等阿裡不達所有關於「時間」的議題；甚至也要關心網站在 mobile / PAD 的效能喔。
其實說到這我一直很疑惑，以往 56k 逼逼逼數據機連線的時代，大家網頁動輒讀取 30 秒以上都在可忍受範圍，現在頻寬愈來愈大，大家卻連 1 秒都不願意等，這反差實在讓我百思不解(個人碎碎念請忽略)
至於哪些元件會影響網頁效能呢？舉凡所有網頁檔案都會喔，每個檔案都是一個連線數，所以這也是為什麼我們要用 css sprite, lazy loading, coding optimize 等技術，就是為了讓效能變好。這裡有一篇 20 個線上測試網站速度的工具 給大家做參考，我自己首推Pingdom Tools。
以上這些，是我自己的前端入門，所以我也推薦給各位，如果你覺得跟你的狀況雷同，不妨參考。
至於前端串後端，我倒是覺得可以慢慢來，因為反過來思考，後端也是要懂如何串前端，假使一開始不熟，可以先請教後端再慢慢補強。其他的前端工作也是一樣，都可以透過學習再慢慢加強，但我認為首重還是前面這幾點。
從設計轉前端，是一條強大且漫長的路，跨過去了就是你的；跨不過也不要氣餒，純視覺設計也是一條強大且漫長的路喔，大家一起加油吧 ：)
留言列表
網頁程式設計 (5)