2013年2月4日 星期一

『Web Layout 設計眼 - 高品質的網頁設計』讀後感

        由於最近打算嘗試自己做點有趣的東西,而且又覺得要找合適的設計夥伴配合非常麻煩(因為肯定會不斷東改改、西改改,總不好老是厚著臉皮麻煩人家),於是跟公司內的網頁 ART 聊聊,商借了這本她的私房寶典。

        雖然我不碰前端網頁開發已經好幾年了,但基本的 sense 還是有,而這本書不是寫給不熟悉網頁語法的初學者,是寫給已經相當熟悉 HTML / CSS / JavaScript 語法的人,再更深入專研『如何設計出結構良好、易於維護、體驗舒適的網頁』為目的而寫的進階書籍

        本書內容扎實,我雖然從裡面獲益良多但卻是“我個人”看過電腦技能類書籍過程中,最讓我打瞌睡難以專注的一本證明我不是前端工程師的命嗎?)。當然這是我個人問題,不是作者的問題



        因為這類電腦技能書籍,都會有相當的篇幅列舉範例原始碼上,若是後端的程式語言開發書籍,那些原始碼其實都描述某個作業流程的邏輯在裡面,是有前因後果,可以用某些 Use Case Story 去理解的。所以只要抓到重要的概念和流程邏輯,就不至於被周公抓走。

        但是前端視覺開發技術的原始碼,背後其實不太有邏輯或是流程的概念,每一行描述的,就是『這個東西要靠左,那個要靠右,這個要留邊寬空隙多少像素,那個要用什麼背景圖片⋯⋯etc』全部都是前後毫無相關、非常片段零碎的記憶,每次版面解說完後進入原始碼解說的篇幅,一下子我就腦力不支了。

        如下:



        我略懂網頁相關語法,但卻缺乏規劃頁面組織結構的經驗,例如 CSS 中的 class / id 這些使用時機如何善用,而這本書真的有強化我這方面的知識,而且也提供了一套不錯的 SOP 作業流程




        當拿到設計師的網站設計稿,首先如何理解資訊?如何拆解區塊?如何組織易於管理的 CSS?


        另外,由於前端開發最容易受到使用者因為不同版本的瀏覽器而產生各種非預期的狀況,也是讓我後來不太願意繼續接觸前端開發的重要原因。而本書,也提供了非常多 browser hack 的手法來一一解決瀏覽器間不一致的問題(這些知識真的好零碎啊!好多東西是要靠記憶,沒得推論的啊!),對於常踩到瀏覽器挖的洞而摔傷的人,本書有許多珍貴實用的知識。