跳到主要內容

[思考]就算同行也會隔行如隔山

現在的生活早已超過以前所說的三百六十行行行出狀元的情況,由於科技進步,行業別越來越細,就光以網頁設計來說就可以劃分成視覺設計與程式設計,所以要找到一個可以視覺很棒程式又讚的設計師真的不簡單,因此大部份的公司都是分開作業的。視覺設計通常比較感性,腦袋也很跳tone,而程式設計通常都很理性而且做事講求邏輯,這兩種不同性格的人聚在一起工作就常常會蹦出火花來。如果要在具體一點的比喻,視覺設計師就像感性的右腦,而程式設計師就像理性的左腦,當然大腦的構成絕對不會只有左、右腦還有小腦、腦幹等其他部位,不過這個部份已經有超過我今天想說的了。


曾經聽過程式設計師説設計師的圈內其實很複雜的,因為寫遊戲的會看不起寫網站的,而寫系統的又會看不起寫遊戲,總之就是一個比一個高傲,不過由於我對程式設計圈不熟,畢竟我也不會寫什麼了不起的程式,所以就看視覺設計端,感覺起來似乎比較單純些,一般視覺設計通常又會分為主視覺設計與網頁切板設計兩種,主視覺設計通常都是比較有經驗的設計師所負責,設計稿需要與客戶來回不斷的溝通討論一直到最後確認了,才會由網頁切板設計師(也就是俗稱的製作)來負責處理接下來所有的設計,當然兩者其實可以不用分開,不過問題來了,有經驗的主視覺設計師通常處理平面設計較多,所以他們不懂的網頁設計的規範,不要説是切圖製作,有些甚至連HTML都沒聽過,更不用説W3C或是ACID 等測試跟規範了。


其實網頁切板設計是很專業的一門知識,這裡的切板設計必須跟程式設計師有很良好的搭配,才會讓程式設計師在功能設計上事半功倍,所以通常網頁切板設計師會多少知道一點程式邏輯的概念,因為他們可能在製作上除了要會修圖以外還要非常了解HTML、CSS,還要跟Javascript有點熟又不是太熟,他們還必須注意每種瀏覽器的個性,才不會在網站相容性測試時被弄的哭笑不得,有經驗的設計師就會知道瀏覽器之間到底有多難搞,沒經厭剛入門的設計師都會被搞得三不五時破口大罵,其中被罵最兇的我想不用説也莫過於IE了,畢竟IE目前還是使用大宗,但是偏偏IE6、IE7、IE8的規則都不一樣,當大家早已跟上W3C的規範與通過ACID 1 、 ACID 2 、 ACID 3 測試時,就只有IE到近期才慢慢跟上腳步,真的讓網頁切板設計師頭大的不得了。


近日聽到最好笑的事情就是一位資深視覺設計師他想替自己的Blog設計版型,當他畫好之後的下一步跑來問我“是不是輸出一張JPG然後上傳到Blog的相簿就完成了?“,當下我真的笑了出來,如果這麼簡單,我想我早就失業了吧!當一個頁面被畫成平面之後,接下來的網頁切板設計會開始規劃要怎麼切這個網頁才會讓讀取速度快速,因為有許多研究都顯示出當一個頁面讀取超過三秒使用者就會把他關了,所以如果主視覺的圖案太大、顏色又太多,那這個主視覺就跟燙手山芋沒兩樣,不過許多人為了好看為了美麗根本不管什麼三秒不三秒,就像設計師常常會做的"破格"設計一樣,框架不是框架,規範不是規範,好看的網站就算要讀取個十秒都划算!不過這在網頁切板設計師的觀念裡,這樣的想法跟自殺沒兩樣,因為一個網站讓人沒有耐心看了,那這個網站的存在有什麼意義?到這裡有沒有發現到網頁切板設計師跟主視覺設計師的差別在哪裡?他是不是比較不感性還帶了一點邏輯的理性?


不過網頁切板設計師畢竟不是程式設計師,所以如果跟程式設計師比較想必會被高傲的唾棄,不過網頁切板設計師確實可以在人手不足的情況下取代主視覺設計師,不過前提是大家都不介意少了一點陳年的味道,吃起來比較像酸梅的陳皮梅也不是人人可以接受的,但是反過來看主視覺設計師如果要客串網頁切板設計師,先別說要先嗑掉洋洋灑灑的HTML與CSS,還要忍受各種不同瀏覽器相容性的折磨,比較起來網頁切板設計師的經驗值就不是主視覺設計師可以短時間瘋狂打怪就補起來的,所以誰比叫吃香呢?我想我也不用明講了。


說到這裡好像我比較偏頗保護網頁切板設計師,稿的好像我自己就是一樣,不過説實在的,網頁切板設計師雖然常常會困在他自己框架中,但是總比主視覺設計師天馬行空的畫完後也跟客戶對稿完成後交到網頁切板設計師手上才發現不能做的好吧?如果真的發生了我說的情況,那其實還蠻糟糕的説,說到這裡,我已經不知道要說什麼了,誰説隔行如隔山?同行也會隔很多座山阿!

留言

這個網誌中的熱門文章

[教學] Vue js快速上手 (一) Hello World!

對於前端框架目前有許多的選擇,比方說React、Angular,以及還有今天要介紹的Vue.js!Vue.js有人說它像React,也有人說它像Angular,Vue.js主要是View跟Model的部分,但是效能、速度以及學習門檻都比React或Angular低,所以上手簡單,對於javascript苦手,或是一直遲遲無法學會React或Angular的同學們來說,簡直是一道曙光!

Vue.js的優點呢,主要就是專注在web技術上,支援html template、pug (jade)、coffeescript,甚至可與sass、less等加強版CSS做整合,而擴充性質的plugin也是頗多的,所以對於專注web技術研發的朋友呢,這就真的值得學一下了,畢竟不像React、Angular專注跨平台、跨載具,導致要學的東西就變很多,或是有很多新的架構概念要學習,當然Vue.js也是有缺點的,那就是太專注於web上了,其他平台就沒辦法好好使用了,不過反過來說,如果你主要是開發web,那你來說就沒什麼差了,而且Vue.js可以說是簡單版的Angular,當你學會Vue.js之後要轉到Angular反而可以讓你學習快速,神奇吧!趕快來看一下怎麼用Vue.js吧!

仔細看官網文件你會發現有一堆安裝方式要看,感覺好像非常複雜,其實一點也不複雜,就跟你載入jquery一樣:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
只要把上面這一行放在html檔案裡就可以了,有沒有很簡單?當然你要下載下來放在網站目錄裡也是一個不錯的選擇!

按照寫程式慣例,我們就來示範一個Hello World吧!

第一步,非常簡單,建立空白的html頁面。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
    </head>
    <body>

    </body>
</html>
第二步,引入V…

[居家]DIY 自製除濕桶

因為房間太過於潮濕,又因為我家是回字型,我的房間就剛好是裡面那個口的位置,而且四面牆有一面都是廁所,廁所濕氣很容易透過,導致我房間連接廁所的那面牆開始發霉,房間霉味不斷,住起來感覺很差,除濕機每天都可以抽兩桶水,容量是3.6公升,所以兩桶就超過七公升了,但就算每天抽,地上的地磚也因為吸水開始變色,很容易就可以用肉眼辦別出來,房間裡面放的克潮靈除濕桶少說也有四桶,通常只要放一天就可以看到裡面有水了,而因為買了補充包回來很久,但是還剩很多,於是我就心血來潮的自己做起除濕桶來了。
外面除濕桶可重複使用的價格大概70元,大賣場應該可以買到50幾元,不能重複使用的通常都包四個一組要90元,大賣場大概70幾元,除濕劑補充包三入目前大概是60元,也就是一包20元,而一般除濕桶的結構,大致上都有除濕桶蓋子、鎖水紙、除濕劑、隔板與除濕桶本身,如下圖:

除濕桶的蓋子,如果你平常買不能重複使用的那種,大概就會有種疑問就是鎖水紙已經黏死了為什麼還要蓋子?而且蓋子感覺上並不緊,怎麼還需要蓋子?當然在你還沒破壞除濕桶之前蓋子基本上除了美觀以外我實在想不到還有什麼功能,不過如果你想重複使用這種標著不能重複使用的除濕桶,那你就很需要蓋子了!至於如何使不能重複使用的除濕桶可以再利用,我將在文末再慢慢說明,本段的重點在於了解除濕桶的結構,既然知道了結構那當然就要開始準備材料囉!

本次我所使用的材料其實還蠻簡單的,首先是空藥罐一個,橡皮筋小的兩條,硬一點的吸管一支,厚紙板一張以及包禮物有時候會看到類似紗窗那種塑膠網15平方公分大一張。第一步把厚紙板剪成圓形讓他可以放在藥罐中,接著把吸管從剪好的圓形紙板中心穿過去,這樣就可以固定住吸管了,但是為了讓水可以留過去,我在紙板上剪了兩個180度角的扇形,然後把吸管插進去,接下來把類似紗窗的塑膠網剪成四塊穿在吸管上,讓塑膠網在紙板上頭,這樣就可以避免除濕劑掉落到儲水區了,接下來最困難的大概就是鎖水紙了,我們先看看我成功的除濕桶長相,我再來慢慢說鎖水紙的取代方式:

這是我用來製造除濕桶的中藥藥罐 這是我做好的除濕桶長相(下方儲水區真的有水喔)
好啦!說到鎖水紙,這是花費我最多天實驗的地方了,第一天我用普通衛生紙蓋在瓶口,然後用橡皮筋綁住,但是隔天一看,衛生紙早已濕透而且還會滴水,所以鎖水紙不能用衛生紙取代,於是第二天我換上了棉質薄襪子,因為我剛好多一隻,而且棉會吸水,為了讓除…

[教學] Vue js快速上手 (二) 第一支Real-Time即時更新

上篇我們教了Hello World的寫法,是不是非常簡單好懂,Vue.js其實還有許多不同的寫法是在輔助各種開發情況下,可以快速維護,減少前端人員來來回回找code的時間,而快速維護也變得是這一兩年來最重要的網站發展重點,不管是MVC、MVP或MVVM等等開發模式,其實主要的本質我覺得都在畫清職責、方便維護、提升效能,而這些寫法在後續的教學裡,如果有機會或者有好的例子,我會會盡量一一舉例讓大家可以了解。學習所有的寫法有助於您判斷、規劃一個好的開發架構,讓你日後維護或是開發類似的功能時可以事半功倍。本篇當然延續上篇,用“Hello World!”來做範例,不過會做一些修改與調整好來做展示。

首先在這裡我先提出一種與上篇不一樣的寫法,也是最簡單的變形,那就是將參數設定另外寫,也就是當你參數預設值非常複雜時,為了讓您可以發便維護,會建議你採用這種寫法。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>0 Hello World</title>
    </head>
    <body>

        <div id="app">
            {{ message }}
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
var data = {
                message:'Hello World!'
            }
            new Vue({
                el:'#app',
data:data
            });
        </script>
    </body>
</html>
接下來,我要在這裡介紹一個新的html擴充屬性,叫V-model,如果直…