我已經有設計了,幫我做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,很簡單的畫面那倒是不錯的,假設你想要設計比較複雜和多功能的網頁,那麼還是好好的學習代碼,畢竟泡麵只是代餐,不能長期吃的。

  • 我的想法跟你 一 模 一 樣

    • nickjazz

      谢谢

  • Wen Wang

    blog写的都好不错,学习ing

  • Zeng BravoMan

    我已經會RWD了,可以幫我設計一下版型嗎?我自己 RWD。
    這樣講會不會很搞笑?

  • Chuck Lin

    想請問…我會視覺,桌機的網頁與行動的網頁視覺設計完成後,就交由另一位同事切版,但如果自己也很想要學會切版這一塊,請教有必要嗎?因為覺得…萬一之後換了公司,有些公司需要設計切版都要會,謝謝

    • nickjazz

      是沒有必要,但是如果妳會那是更好。
      另外當你也會把腦海中或你畫的東西都自己code出來,那感覺是很棒的!

      • Chuck Lin

        真是超級抱歉,現在才上來回覆你。
        感謝你的解答,我會好好思考報名課程去學這部分,不然真的是卡卡的啊!就像你說的,如果設計完後都是自己code出來,一定很有成就感!謝謝你

  • Yu jo Chia

    話雖如此,
    但我去年(2015)面試時
    10間有7間會問我會不會切版
    1間會問切出來的板會不會做成RWD

    • nickjazz

      只能代表大多數人,都不太了解,包括面試者。
      我也被問過很多次XD