Dec.03.2014

我已經有設計了,幫我做 RWD?

切版已死

其實這個「切版已死」本來是這篇文章的標題,可是我怕大家還來不及消化內容就先下了定論,所以還是說明白死因比較好。「切版」這一詞是我在大學第一次接觸網頁設計的時候得知的,顧名思義,就是把 PSD 檔案,轉換成網頁檔案,即 HTML 檔案,當年還有一些工具可以直接輸出,網頁設計師應該只需要排好版面,按幾個鍵,輸出的就是 HTML 檔案。

可是多年後,現在的網頁應該是層級和堆疊產生的視覺,而已經不是過去平面概念的拼湊,即便產生出來的畫面都是一樣,但是裏面有很多小問題,也無法達到立體視覺的效果。
1

這是火狐遊覽器打開網頁工具看的立體網頁視覺圖,可以很明顯的看到,網頁的層次。
Screen Shot 2014-11-29 at 11.56.41 PM

我已經有設計了,幫我做 RWD?

很抱歉,我實在不知道怎麼做,連續好幾次我都推掉了這一類的工作,或許可以按照即有的設計去想像出手機和平板應該有的樣子,還是覺得這當中有一點牽強,為何呢?首先是因為在一開始的時候,設計者並沒有想到小螢幕的樣子,那麼你要後來怎麼把東西塞進去呢?例如你家只有 20 坪,你買了一個撞球桌,不管我怎麼擺,都是不對勁啊!所以問題應該在一開始就需要先想好手機或小螢幕的樣子,也是後來有一個術語叫做「手機優先」,這一詞除了表現上視覺的考量,還涵蓋在開發外觀界面的時候,所需要思考的因素,也就是前段工程師的工作,怎麼設計和佈局代碼才能達到最好的視覺效果。

也很常發現,說 RWD 就會想到一些框架,例如 Bootstrap,Bootstrap 它不等於 RWD,它只是一套寫好的樣式,而這個樣式剛好有 RWD,假設你不是工程師的話,你就可以這樣理解。

RWD 是需要經過設計的,設計的意義是有考慮過手機用戶的用戶體驗,內容的架構佈局,代碼的設計佈局,網頁元素的細節等等,所以假設你已經有做好的設計,想弄成支援手機和平板的 RWD 界面,那麼就等同在做一次吧。

要把一個男生變帥,不如直接找一個帥的來簡單。

美工的大躍進

有很多公司不會有前端工程師,不會有網頁設計師,但是一定有「美工」,據我所知就是做了涵蓋修圖,維護,上圖,上稿,甚至還需要會一點點Photoshop,會一點HTML,會一點CSS等等。在很多公司美工嚴格來說就是總監的滑鼠,基本上設計的東西就交給一個美感極差的主管,然後指揮你哪裏要什麼顏色,哪裏要放什麼圖案,這裡太空虛了,放一個落葉的 flash 吧。

按照這樣的推理,我有理由相信絕大多數政府部門和大公司機構都有不少美工,實際上這只是一個職位的稱呼,沒有什麼好計較的,不過很多美工在做的事,是前端工程師的事,是界面設計師做的事,所以嚴格來說,他們可以跨到更專精的領域上,專注做好一件事就好,因為光是設計這一件事,就不簡單了,何況還要設計的出來,還要做的出來,做的出來還要可以用在不同的界面。

所以「切版」的概念不應該只停留在「平面」和「一個寬度」上,曾經看過新進的前端工程師拿到設計師圖,就二話不說把「版」切好,就如「俄羅斯方塊」的推疊起來,當然最後還是要重做。

切版雖死,取而代之也有很多新的工具,可以不需要懂代碼,和過去的一些網頁編輯工具一樣,拖拉一下就可以輸出HTML而且還可以支援RWD,很簡單的畫面那倒是不錯的,假設你想要設計比較複雜和多功能的網頁,那麼還是好好的學習代碼,畢竟泡麵只是代餐,不能長期吃的。

不可轉載
Kim Wong
商班生,大馬人,旅台8年,專長網路,生活上態度直接,寫東西的時候卻比較婉轉,喜歡跨領域合作,喜歡音樂喜歡吃。
商班生,大馬人,旅台8年,專長網路,生活上態度直接,寫東西的時候卻比較婉轉,喜歡跨領域合作,喜歡音樂喜歡吃。

更多文章


READ MORE

更多文章

READ MORE

LOGIN

SIGN UP

FORGOT
PASSWORD

請輸入你的帳號或電子郵件位址。你將收到含有建立新密碼鏈結的電子郵件。