HTML Living Standard 是什麼 ?－原也網頁設計、網站規劃、網站行銷

  引用自http://www.arthurtoday.com/2012/07/html-living-standard.html#.UBeuo2EzC8A


如果你已經開始研究 HTML5，應該已經有聽過 WHATWG 這個組織，照常理來說，HTML5 這個標準應該是由 W3C 來制定的，不過，誰叫 W3C 不看好 HTML，選擇 XML / XHML 來發展，所以，才會落得 HTML5 標準由 WHATWG 組織來主導，一直到 2008 年，W3C 才回過頭來和 WHATWG 合作並採用 WHATWG 所制定的 HTML5 標準哩 !

不過，日久見人心，喔 ! 不是 ! 是好景不常在， 一山不容二虎，這二個組織對 HTML5 的發展有了不同的想法，因此，最近就宣佈分道揚鑣，WHATWG 傾向於把 HTML5 當成一套動態的標準，就是有問題就修改，就新需求就加入，然後，就發佈新的 HTML5 標準，所以，提出所謂的「HTML Living Standard」，而「Living」的意思就是會一直隨實際狀況而調整的意思哩 !

但是，對以制定標準為目的 W3C 組織來說，「HTML Live Standard」的方式幾乎是在挑戰 W3C 的運作模式，W3C 相來是由一群專家經過討論提出標準的草稿供各界討論，然後，再逐步修正到正式版本為止，因此，W3C 的 HTML5 的標準要到 2014 年才會出爐哩 ! 可是，實際上是，現在的瀏覽器已經在支援 HTML5 了，而且，是在 W3C 決定要制定 HTML5 之前哩 !

阿舍覺得 WHATWG 的 HTML Living Standard 比較像是在開發軟體的模式，出現 Bug 就修改後出新版，有了新需求就修改後出新版本，這樣的做法對瀏覽器開發商的負擔可能會比較大，但是，也可能減少需要瀏覽器廠商在新標準未發佈前要自行解 Bug ，然後出現不同做法的情形，當然啦 ! 瀏覽器廠商也可以只選擇對 W3C 的 HTML5 標準支援，如果瀏覽器廠商是各自選擇的話，那就有可能再次發生當年要對不同瀏覽器寫不同程式碼的情形哩 !

不過，也可能發生一種情形，就是 W3C 的 HTML5 版本是所有瀏覽器的共通版本，而 WHATWG 的 HTML5 版本則是各家瀏覽器的加強版本，如果是這樣的話，對 Web Application 的開發者而言，阿舍覺得會是好是一件，因為，可以有更多的選擇和解決方案，會比現在卡在一個規範上的情況來的好哩 !


原也網頁設計、網站規劃、網站行銷。

看看設計方眼中的網頁世界(下)－原也網頁設計、網站規劃、網站行銷

  引用自http://www.mydesy.com/web-design-2

看看設計方眼中的網頁世界(上)


設計師與程序：

關於這個問題，很多時候是無法調和的矛盾。很多時候設計和程序是天生的“敵人”——設計師對於頁面的認識是“漂亮”，而程序對於頁面的認識是“簡單”。對於頁面的根本認識的不同，是兩者發生矛盾的關鍵。我不得不承認，這樣的矛盾很多時候是無法完全消失的，不過話說回來，事在人為，通過主觀的努力盡可能去避免這些問題還是可行的。 
1、多了解一些技術的東西是有必要的，DIV+CSS是必須要學的，別覺得那是程序的事情——如果你不想自己的頁面被改的面目全非，所以這個是必須的。JS的代碼可以不懂，但是JS的原理還是該了解——至少和程序溝通你要的效果的時候用的到。這些都是最基礎的，如果你還想朝著更高的方向發展。

2、有時候簡化頁面是沒有辦法的事情，中國的網速就這個情況，現在電腦的配製也是無法改變的客觀事實。有些效果比如FLASH、JQuery等等，雖然效果很華麗，有時候太佔帶寬太佔系統資源。去掉也是沒有辦法的事情，畢竟，如果漂亮的效果讓用戶看不到或者等不到，結果會比沒有效果更糟糕。

3、私底下多和程序溝通。人心都是肉長的，有時候私下溝通比工作溝通有效果的多。沒事情的時候多和程序一起抽抽煙、喝喝酒、吃吃飯、嘮嘮嗑。和好的設計一樣，好程序也大多很有個性，但是思維也大多很簡單，就和寫判斷邏輯一樣，不是0就是1，所以別被表面的現象所迷惑、事實上程序是很容易接觸的一類人。和程序處熟了，工作溝通也會容易不少、甚至可以直接找一個處熟的程序搭檔接一些私單，有財一起發，不僅能賺錢，還能增進相互之間的感情，何樂而不為？  


設計師和終端體驗者：

雖然說設計師很少能和終端體驗者發生關係。但是事實上，一個頁面到底好不好，終端體驗者最有權利說。作為一個設計師，不是說光會設計漂亮頁面就OK了，如果用戶體驗不好，頁面再漂亮，也是空的。

1、需要學習理論，但不要迷信理論。很多設計師喜歡看國外的設計理論，這些理念通常都很先進，而且都有很強的邏輯，讓人覺得“該這麼回事”。不過，實際情況是，這些所謂先進的理念都是外國設計師根據國外用戶瀏覽習慣總結出來的東西，雖然很系統、很完善。但是和中國用戶的習慣還是有很大差異的。關於這點，我做過幾個大型英文網站的項目，感觸很深刻。其實，那些理論也都是外國設計師一點一點總結出來的，我們為什麼自己不能總結一些中國用戶自己的習慣呢？多看各個成功的網站，多觀察身邊的人瀏覽網站的習慣，然後自己思考一下“為什麼”。當你有自己成熟的理論了，你就離“大師”不遠了。

2、好的頁面設計是引導用戶去閱讀的。設計的最終目的是為了傳達信息，如果為了頁面美觀而失去了傳達信息本身的效果，那這種頁面設計的效果就是負的。這是很多有平面設計習慣的設計師時常會忽略的問題。尤其在以文字和圖片作為傳達主體的網站上，這種問題更加明顯。建議有這樣問題設計師能看一些關於排版方面的書籍——在這方面，網頁設計和印刷排版設計是有共通之處的。

3、設計也需要在文字上下功夫。很多時候頁面上的引導是通過文字鏈接實現的，而策劃案裡面或者LAYOUT裡面不會給你明確的文字（有不少策劃案裡所給的文字鏈界是僅供參考的），如果不自己琢磨下，有時候真會出現不少尷尬。最簡單的例子：很多人喜歡用“MORE”、“CLICK HERE”、“SKIP”這樣的英文單詞。這個單詞什麼意思，我們都知道、可是如果這個網站目標用戶群體是中年人或者年紀更大的人。那恭喜你，你對牛談琴了——呈然，現在的年輕人大多有英文基礎，但是老一輩可沒有我們這麼好的教育水平啊！…很多設計師都不太在意文字本身，這在中國是一個很悲哀的事實——這樣的態度會讓設計師很難進步，就是從職業規劃上來說，將來要朝更高的其他方向發展，這也會成為一個障礙。

4、考慮下動態頁面具體使用中會遇到的問題。靜態頁面我們能夠控制最後出來的效果。但是動態頁面卻會出現我們無法預計的問題，你需要考慮到沒有美感的網站編輯用醜陋顏色的標題把你的頁面搞的亂七八遭、你需要考慮到有時候用戶名是8個字，但是你卻只給了7個字的距離……如此等等的問題都會影響到頁面的效果和用戶的觀感。這方面的問題總是會超出你的想像，但是一旦發現了，就必須準備解決的方案，能否發現問題以及是否快速找到解決問題的方案，在一定程度上也是判斷一個設計師是否有經驗的標誌。  


給新人的建議：

1、平時多看所收集整理素材、自己做的頁面分門別類的整理好、老設計師為什麼出東西的速度比你快而且效果好？就是因為他們看的比你多，素材比你豐富。老設計師的硬盤絕對是個寶，恩恩，別想歪了。

2、設計的時候少些想法，設計好之後多些想法。大膽下筆、小心收拾，只要總體的感覺對了，設計就能出效果，相反，設計時候想法多了，不僅會嚴重影響設計速度，出來的東西也會不倫不類。

3、設計有時候不都是加法、減法也很重要，全是效果等於沒有效果，材質和光感覺最好能保證統一。影響整體效果的東西，再漂亮也要狠的下心去掉。

4、自己看效果的時候一定要放到100%看，建議根據不同分辨率瀏覽器寬度拉一下輔助線，保證在不同分辨率下效果都不至於太差。看的時候可以學學畫素描的方法，瞇起眼睛看，那些東西突出沒有、哪些東西沒有突出，用那個方法一看就知，當然如果帶眼睛的可以把眼鏡去掉，效果是一樣的。

5、有能力製作個人網站的話，還是做一個吧！一方面練手，另外一方面，無論是求職還是接單，都用的著！

6、設計有時候真需要天分，如果做了一段時間，發現自己沒有天分，不如像我一樣，跳出去換個工作比較好。呵呵，這條只是一個玩笑。要相信自己的努力會有結果，如果你能堅持的話，我相信，遲早有一天你也能成為最NB的設計師！


原也網頁設計、網站規劃、網站行銷。

看看設計方眼中的網頁世界(上)－原也網頁設計、網站規劃、網站行銷

  引用自http://www.mydesy.com/web-design-2


雖然已經不做設計師快三年了，可是依然會一直留意站酷。看著各位高手的作品，總讓我慶幸我沒有把這條路走下去——三年前，我就是由於覺得自己在設計上沒有什麼天分，於是轉行去了一家遊戲公司，去做官網建設和媒體渠道方面的工作。如今看來，這條路沒有錯，我的設計和站酷上的高手想比，差距不是用努力學習追的上的。 
由於工作的關係，我經常扮演一個網頁設計的需求方的角色。3年的時間，我看了無數的設計稿，也親手槍斃了很多的設計稿。很多時候我覺得很無奈，那些設計都很好——有的精美的讓我槍斃的時候心情極度難受——這些設計本身不是不美觀，只是由於設計者太注意設計本身，忽略了很多設計之外的東西。聯想到在站酷上也經常看到的很多精美華麗的“飛機稿”，這不能不讓我這個依然愛好設計的旁觀者心疼！所以我想就我這三年作為一個設計需求方，從我所看到的視角來說一下網頁設計。希望對大家能有幫助。當然，在設計方面，我只能說是個外行，如果說的有什麼不對，還希望大家能見諒。  


設計師與需求方：

記得我自己做設計的時候，當時公司一位在中國待了快6年了的老外曾經對我說："中國沒有DESIGNER,中國祇有PAGE WORKER!"當時聽到這句話很不服氣，還試圖和他理論，當然，最後結果是老外認錯了，而我和那個老外也成了好朋友。但是，如今自己做了3年的需求方，我終於不得不很無力的承認了這個事實——不是中國設計師沒有創意，而是客戶心理對於項目的需要造就了設計師變成了美工。

我不得不承認，大多數的需求方都是外行，有的甚至審美品位嚴重扭曲——當然，在很多高端的公司，專業的需求方也不是沒有，只是這樣的需求方是可遇不可求的。在大多數需求方看來，在整個項目當中，他們是處於一個“主動”的地位，對於整個項目具有主導話語權。或許他們腦海當中，真的有很漂亮的設計概念，只是他無法實現，於是便找到了設計師，希望設計師根據他所“想”的一個模糊的藍圖來設計頁面。於是問題出來了，由於需求方非專業的描述使得設計者的設計思路變的跟著模糊起來。或許需求方的想法表達的很清晰，但是由於扭曲的審美觀導致設計師無法認同。無論由於前者的原因還是後者的原因，都會使得頁面變的不倫不類。這樣的經歷，我想每位設計師都曾經遇到過。  


接下來我們來說說解決方法：

1、製作之前的溝通非常必要。你要假設需求方是“白痴”，什麼都不懂。在需求在自己腦海裡未明確之前，不要試圖去猜測著做，這樣“飛機”的概率極高。最好是讓需求方找到同類風格的網站至少2-3個，讓他說明這些網站他欣賞在什麼地方。當深入的溝通之後，了解了需求方的意圖和口味之後，你會發現溝通的時間遠遠會小於你重做的時間。

2、對於用戶給予的需求，不要太咬文嚼字，同第一條所說，需要假設需求方為“白痴”，很多專業的細節，他們一般不會關注。在做需求方的過程中，我也犯過類似的錯誤：記得那時侯提交需求，由於項目要求科技感未來感比較強，我在需求中寫了一句：“整個網站的設計基調為科技感未來感比較強的藍紫色。”結果，頁面出來了之後，發現整體的設計風格很符合我事先的要求，頁面也做的很漂亮，只是唯一的問題就出在頭部的人物，設計師看到需求後，為了追求整個頁面的色調“符合需求”把人物的色調也做成了藍色，遠看就像是阿凡達…對於這個結果，我哭笑不得。沒辦法，誰叫當時自己需求沒有寫清晰呢？

3、對於主導意識比較強的需求方,不妨自己做一下用戶引導。好設計師的個性都很強，這是我和很多設計師接觸下來的感覺。有個性是好的，但是工作歸工作，工作的時候還是要講究工作方法的。不要試圖頂撞需求方，這樣做並不明智；也不要試圖用自己的專業術語說服對方，這會造成溝通的無效，嚴重的甚至會讓需求方覺得你是在“忽悠”他,從而對你產生不信任感。比較合理的方式是：“我覺得，你提的想法很不錯，只是，我個人覺得……….（盡量用對方聽的懂的大白話）這樣做的話效果會更好一些。當然，我們可以按照您的思路給您做一稿，但是如果可以，我想按照我的想法也做一稿，兩稿比較下或許會更穩妥些。”如此一來，對方有台階下，不至於傷了自尊，而你，也就是多花了一些時間，至少爭取到了按照自己想法做頁面的機會。

4、“大！一定要大！”很多時候，需求方會對你這麼說。通常這麼說的意思，就是這個需要“明顯”。雖然可以假設需求方是“白痴”，但是在這點上，他比你懂。不過，客戶說“大”，未必一定要“大”，首先，試圖分析下，他為什麼說要“大”，或許從產品本身的角度，對方是正確的；然後是修改，不過這個修改不是需求方說什麼就是什麼，依照第三條的做法，一稿按照用戶的要求改，一稿可以嘗試一些其他方法：比如換字體、換顏色、換樣式，找個襯託的東西什麼的…總之是在不破壞設計效果為前提的基礎上作出自己覺得正確的修正——需求方大多是了解自己的產品並且知道自己要做什麼的（也有不少是什麼都不懂不知道的，遇到那種算你倒霉），他們或許不太清楚如果用美術的方法達到自己的效果，但是如果仔細分析，還是能夠了解他們的意圖的。

5、千萬不要隨意改動LAYOUT，即使你覺得這個LAYOUT糟糕的讓自己崩潰，也不要不和需求方聯繫就隨意去做調整——你需要有這樣的意識：很多時候需求方是需要控制結果並對結果負責的，不告知需求方而隨意修改需求將為結果帶來很大的不可控因素並對結果帶來不可知影響，是對需求方很嚴重的挑釁。即使實在無法接受這樣的LAYOUT，至少自己腦子裡思考下，為什麼對方會這麼佈局？如果不使用這樣的佈局，我是否能有更好的解決方案？然後帶著“可能效果會更好的解決方案”去說問題。這樣至少不會讓需求方覺得你“無視”他的需求，而是在“幫助”他解決問題。

6、要學會挑選客戶，在我還是設計師的時候，一位老前輩曾經說過：“當你選擇接1000￥/p以下的單的時候，就意味著，你的設計已經定位在這個檔次了。”事實也的確如此，很多中小企業的領導、國企或者政府的領導，通常會有很強的主導意識，而且覺得設計不值錢，設計就是按照他們的意圖製作頁面，設計師也就是一工匠。和這樣的客戶講設計基本沒戲，你的設計也別指望能做的出彩。什麼檔次的用戶決定什麼檔次的設計，這句話是有道理的。

待續。


原也網頁設計、網站規劃、網站行銷。

一間成功的設計公司要具備什麼條件－原也網頁設計、網站規劃、網站行銷

  引用自http://www.mydesy.com/love-design


如果你問李永銓，一間成功的設計公司要具備什麼條件？他會告訴你有五件事情缺一不可。 
第一·設計能力
這是每一位設計師最基本的能力，可是設計潮流常常受外在環境影響。設計師若要在市場中打拼，不能只懂設計而對市場動態不聞不問。尤其是衝擊若我們生活的國際大事，由雷曼垮台到牽動兩岸的馬陳會，設計師都需要對這些事有一定的觸覺。這樣他們所創作出來的設計就不會流於表面，沒有內涵。  

第二·銷售技巧
同樣是提供設計服務，為甚麼甲公司可以收取比乙公司多五倍、十倍的價錢?這完全關於一份信任。不過，能夠在那短短數分鐘的對話，十數分鐘的簡報中，建立信任，卻全靠那張能夠化腐陋為神奇的嘴巴，在瞬間因應特定處境，把最恰當的文字，跟眼前的圖像結合，表達出打動人心的訊息。所以李永銓聘請的每一位客戶主任都是溝通高手。他們在面試時，都要以兩文三語說出一個笑話，受聘與否，全憑那一刻，這位未來老闆有沒有爆出笑聲而定。李永銓勸喻各位要多閱讀，不然說起話來，會變得索然無味，詞不達意。這是在競爭劇烈的設計界中，保持名氣歷久不衰的不二法門。  

第三·業務拓展
許多設計公司會為客戶出盡心思向外拓展業務，但自己公司的業務卻鮮為人知，而單靠熟人介紹。較為主動的一批公司，就只曉得倚靠設計比賽中贏取獎項，來壯大自己的名氣，對其它方法卻一竅不通。李永銓在二十多年的設計生涯中獲獎無數，更從中領略出一個道理：在設計賽事氾濫的今天，稍微有點資歷的公司均曾奪取過獎項。獎項再不是拓展業務的靈丹妙藥，最重要的是公司的客戶名單是否包括有名氣的公司。因此李永銓現時拓展業務的目標，是致力發掘懂得欣賞和重視設計的行政高層。只有這群眼光遠大的領導人，才會給予設計公司盡展所長和有利可圖的機會。要接觸這群購買力強大的客戶，較為可取的途徑是開辦為他們而設的專題論壇、座談會和公開演講等。  

第四·建立團隊
你是否見過曾經名噪一時的設計公司，突然消聲匿跡? 問題在於人才不繼上。李永銓起初建立公司一也曾迷信名牌，從香港理工大學、英國中央聖馬田藝術及設計學院等名校招聘設計人員。他滿以為那便是成功的法則。若干年後，他仍然發覺很難留住員工。後來發覺要解決人才流失的問題，一定要從自己所建立的企業文化入手。員工要成為公司的一份子，起碼要用兩年時問和身處的企業文化融合，並須清楚明白公司的工作流程，接下來的兩年才是發揮自己的階段。意即一個人要花四年時間在李永銓的公司內找到自己的位置。留任超過八年的同事更成為公司的核心成員。成功的設計公司不需要每一個人都是設計師，而是各司其職的人才，有客戶服務、業務發展、會計財務等人員。  

第五·財務控制
為甚麼有收入和利潤的公司還是會倒閉?十居其九因為周轉不靈。這現像不單發生在眾多設計公司身上，而且更是許多中小企所遭遇的命運。這些公司都是因為對流動資金、利潤、資產等概念沒有深入認識而遭殃。有見及此，李永銓特別重視財務控制，每年都會做銷售預測，從中得出流動資金、營運成本和其它支出的預算。更每半年檢討一次，確保收入的進度符合預期及銷售額達標。未能達標的話，便要盡快行動把差額追回來。如果進展順利，公司會嘗試招攬一些更難荻取的客戶。  

以上五件事情，缺一不可。舉一個例子：若只具備前四項條件而缺少最後財務控制一項，則難逃賠本收場的命運。如果忽略了首項要點(設計能力)，只著重其馀四方面，就只會與卓越絕緣，最後變成飢不擇食。所以要在設計行業中致勝，設計能力雖然重要，但不是一切。一盤生意的成敗，還看其它。


原也網頁設計、網站規劃、網站行銷。

關於Layout這回事-淺談網頁設計排版規劃－原也網頁設計、網站規劃、網站行銷

  引用自http://nowills.blogspot.tw/2010/07/layout.html


（本篇文章內容已於2010年7月8號做為教育訓練使用，應該算是演講稿，不過呈現在部落格上將會做另外詮飾，對於問答的部份也一律省略，但是大至上內容不會改變太多，講述時間含發問約40分鐘，如果您在閱讀的過程中有任何問題也歡迎留言詢問。）
當我們打開瀏覽器映入眼簾的可能不外乎是YAHOO!奇摩首頁，當然也有其他選項，不過我們就以奇摩首頁來當個開始。下圖左邊是一般打開瀏覽器時我們所看到的畫面，那右邊呢？其實右邊就是網頁設計師眼中的排版與規劃的部份。



你可以很明確的看到右邊有四個區塊，通常我都把單位稱作欄，相信很多設計師也是這樣，外國設計師稱為wrapper，翻譯是包裝、外皮，這樣的一個區塊方式，已經算是現今Web 2.0 模式網站常見的畫面，他呈現出一塊一塊的區塊，不光是在排版上比較有條理，就連在網頁設計製作的過程也變得非常有條理，而當我們把後面的YAHOO!奇摩首頁拿掉，他就僅僅只剩下四個紅色框框，我們先不管內容怎樣，其實四個框框代表的就是四行DIV的HTML Code，這部份稍候會在提到。

我們剛提到YAHOO!奇摩首頁，那是已經有畫面的網頁了，算是後面的結果了，人家説因果因果，有因才有果，我們現在就從因開始看，這個因就是網站形成的原因，也就是網站存在的目的，依照不同的目的會有不同的取向，在這中間彼此的討論就會經過一個Paper Prototype的過程，也就是網站企劃發揮他最大效能的階段，他需要產出網站企劃書，讓設計師明白整體網站架構與大致上的規劃，這些過程對網頁設計流程來說都算是前期規劃，以後有機會在細說這個部份，當規劃完成後就近入了設計階段，也是屬於網頁設計師的曼妙舞台。

對於網頁設計師的設計過程我想因人而異，絕對沒有一個標準流程可以依循，但是確有一些準則可以參考，對於網頁設計來說，排版在設計過程上算是佔有非常重大比例，每一頁網頁在產生的過程中會有許多設計與細節，在設計方面每位設計師都有他自己的一套方法，但是在細節上常常會是許多設計師為了求快或者不知不覺中就忽略的細項，那對於這些細項有沒有一個快速簡單的工具可以作為協助？其實是有的，打從瀏覽器解析度到每欄的排列，其實都是有一個簡單的輔助工具可以來使用的，這個工具就叫做Guideline，中文翻譯為指引，通常稱呼為格線。其實格線沒有一定的標準也沒有一個統一的規定，一些國際網站或者國內知名網站，較注重的都會設定一套統一的格線標準，確保網站不管在任何情況下，都有一個統一的視覺舒暢度，不會因為國家或頻道切換就覺得文字變得擁擠、標題變得不清的情況，在這裡我要推薦一個我個人非常喜歡喜用的格線系統，叫做960 Grid System。

960 Grid System為什麼是960，不是970、980? 原因很簡單，因為現在目前大部份的使用者解析度還是1024X768，有些人喜歡使用書籤列側欄，或者桌面上有安裝Google 桌面等這些側欄輔助工具，在這樣的情況下使用者的解析度勢必會小於1024，再加上一般網頁設計的背景並不是沒有任何存在的意義，所以保留一些範圍讓背景顯露出來，對整體網頁的設計其實一個很棒的襯托。經過測試與研究，最後他們決定以960像素作為一個標準，制定出960 Grid System，設計出12欄與16欄格線，並提供Fireworks、Flash、InDesign、GIMP、Inkscape、Illustrator、OmniGraffle、Photoshop、Visio, Exp Design樣板可以直接下載使用，甚至還有一份PDF版本可以直接列印並手繪上去，非常方便也非常好用。

既然有了格線系統，當然就要照著格線來做設計，它可以讓你整體的排版呈現的更有調理，不過有個地方需要注意，那就是960 Grid System他只有做直向的格線，對於橫向也請設計師們不要忽略，這也是非常重要的一個細節項目，對於每個頁面的排版因為文字段落有長有短，這個比較難做出一個橫向格線系統，所以務必請設計師們可以注意到這個點。另外對於破格設計的部份，也希望設計師可以照著格線系統來跑，你可以跨很多欄做設計，但是請不要超過邊緣欄位，或者剛好卡在兩欄中間，這其實都不是很好。



現在讓我們來看看排版規劃的部份，上圖是一個單欄式頁面的呈現方式，我們一律都先不考慮內容的部份，就從最簡單的外框來看就好，就如同一開始有提到三個區塊分別就是代表三行DIV HTML Code，跟以前網頁設計師使用表格table切板的那段時間比起來，真的是精簡非常多，也顯得非常容易好懂，讓我們來比較一下過去與現在的寫法到底落差有多大，從下圖就可以明顯的比較出來。



我沒有辦法告訴你左邊有幾行，但是左右兩邊比較起來應該是非常顯而易見，右邊明顯比左邊少很多字母與符號，就是因為右邊這樣的寫法讓頁面的HTML顯得非常簡單易懂，所以現今的網頁設計師漸漸都採用右邊的模式，國外的網頁設計師已經採用這種寫法行之多年了，但是台灣依然還是有許多網頁設計師採用左邊的寫法，這樣的寫法不但在撰寫上需要花費較多的時間，而且維護起來也顯得非常不容易，很容易就發生拿掉一個表格table就導致版面毀損，不管是日後自我維護或是他人維護都需要花費相較右邊模式數倍的時間，更別說需要與程式設計師合作或者team work 設計大型網站所產生的問題了。

而目前網頁設計師還有一個非常有利的工具叫做CSS，它可以與HTML做搭配，從文字到背景亦或是icon圖示定義等等，都可以做到一個彈性非常大的撰寫方式，透過CSS裡的ID與Class，適度的規劃是可以做到頁面修改不須變動任何的HTML，僅需修改CSS文件即可，這對不懂程式的網頁設計師來說是非常大的福音，你不必在擔心害怕因為變動頁面上的某些圖案或排列就導致程式無法執行的惡夢，下圖就是英國廣播公司BBS網站所致定的一些元件組部份，因為BBC有大量的新聞與資訊，所以各個頻道都有屬於自己的顏色標示，透過CSS的制定可以設定出多款的元件組，這樣的一份元件組可以交給任何一個設計師使用，不會產生因為不同設計師導致產出的頻道顏色有色差或色塊粗細不一的窘境。



使用HTML+CSS的製作方式好處有很多，舉凡頁面一致性、元件重覆利用率提高、提升SEO效果等等，好處可以說是說不盡，那壞處呢？壞處可以說都是因為瀏覽器惹的禍，現今的瀏覽器並沒有一個統一標準，所以同樣一個CSS寫法在每個瀏覽器呈現的畫面又會多少有些差異，像是表單的呈現，每個瀏覽器都有自己的樣子，更別說到跨作業系統了！為了減少這樣的「環境差異「，通常在製定頁面CSS的第一個步驟就是先將每個瀏覽器的預設值通通歸零，因為這個部份的CSS是差不多的，所以像是YAHOO!就有在YUI中釋出CSS Reset文件，而有些網頁設計師也有會有自己的一套寫法，我個人曾經使用過YUI的CSS Reset方式，但是使用起來沒有我自己制定的順手，所以目前我還是採用自己的一套CSS Reset方式，有機會在跟各位詳細說明這個部份。

以上就是本次教育訓練的內容，希望對於各單位的夥伴們都可以有一些幫助，有任何問題也歡迎與我討論。


原也網頁設計、網站規劃、網站行銷。

讓Adobe來告訴你CSS3跟HTML5有多酷－原也網頁設計、網站規劃、網站行銷

  引用自http://nowills.blogspot.tw/2011/08/adobecss3html5.html


一直以來都以發展Flash技術聞名的Adobe，自從被Apple重重的一拳打在臉上後也開始認真的發展CSS3與HTML5技術相關軟體與應用，而在今年的八月初，Adobe推出了Beta網站—the expressive web，這個網站是基於HTML5環境，運用CSS3的搭配，製作出一些新穎的網頁效果，換句話說，the expressive web是Adobe為了展示HTML5與CSS3的效果所製作的展示網站，你可以隨著左下方的箭頭一格一格觀看，相信每點一格都會讓你發現一些驚奇。

就算同行也會隔行如隔山－原也網頁設計、網站規劃、網站行銷

  引用自http://nowills.blogspot.tw/2009/10/blog-post.html


現在的生活早已超過以前所說的三百六十行行行出狀元的情況，由於科技進步，行業別越來越細，就光以網頁設計來說就可以劃分成視覺設計與程式設計，所以要找到一個可以視覺很棒程式又讚的設計師真的不簡單，因此大部份的公司都是分開作業的。視覺設計通常比較感性，腦袋也很跳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，還要忍受各種不同瀏覽器相容性的折磨，比較起來網頁切板設計師的經驗值就不是主視覺設計師可以短時間瘋狂打怪就補起來的，所以誰比叫吃香呢？我想我也不用明講了。

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


原也網頁設計、網站規劃、網站行銷。

網頁設計的介面設計－原也網頁設計、網站規劃、網站行銷

  引用自http://nowills.blogspot.tw/2008/06/blog-post_24.html


繼上一篇資訊架構、優使性與親和力 ,這一篇為延續主題的探討!
上次講到網頁設計可以大致分成:網站架構.優使性.親和力這三大部分,我先從優使性這一塊來說好了,畢竟一個網站是不是會讓使用者操作的順手,絕大部分都來自於這一塊。

優使性,一個與介面設計有很大關係的名詞,個人認為這兩個詞最大的不同點在於角度的不同,介面設計是設計師層面看到的東西,而優使性則是從使用者角度看到的東西,而本篇我想談的就是設計師層面的東西,所以我要談是介面設計,介面設計又可以分為三部分：

結構設計.互動設計.視覺設計
結構設計 與網站架構相輔相成,一般都會以為是一樣的東西,但是網站架構是由網站架構圖去做分析所得到的草稿,而這裡的結構設計所指的就是最終的架構,並不是草稿,通常這一個步驟都會因為設計時間過短而合併,甚至有些設計師就直接拿著草圖做設計,對於整體網站的架構並沒有仔細的審視,導是常常設計到中途或末端需要從頭再修改架構,或者直接給客戶一堆理由而躲避這個架構問題,制定出整體的架構圖,並且審視一切,以免發生到中末期架構不堪的問題,就像翻一本書,目錄總是占有重要的地位,不管是時常在最前面或者被夾在中間甚至移到了最後面,他都依然站有一席之地,因為他很重要!

互動設計 互動設計必須先搞清楚互動的對象,隨著對向的不同可能會有不同的設計方式,例如:賣書的網站就適合用flash翻頁效果讓線上試讀更真實,在細一點就是滑鼠移到右上角頁面會捲起來向左翻,而滑鼠移到右下角也是一樣捲起來向左翻,雖然中間過程不太一樣,但是結果是相同的,都為了讓使用者更方便的達到心目中想要的結果而做的互動!

視覺設計 視覺設計通常帶給別人的是第一眼的感受,身歷其境的氣氛,運用不同的色彩來表達出意涵,讓版面看起來分明,可以使使用者快速找到什麼是主要的內容,分辨主角與配角都在這個部分,這個部分通常都很主觀意識,每個人都會有不同的想法,當然做出來的結果也會差很多! 各種視聽元素,例如:文字.背景.按鈕.圖案.影像.表格.顏色.背景音樂.音效.捲軸.導覽列.動畫.影片等,充斥在這個領域中,對於版型的設計與配置是否有達到主題鮮明,不讓配角變主角,內容的一致性是否完整,以及整體所強調的概念都是在這一範圍裡很重要的大方向!


原也網頁設計、網站規劃、網站行銷。

資訊架構、優使性與親和力－原也網頁設計、網站規劃、網站行銷

  引用自http://nowills.blogspot.tw/2008/06/blog-post_06.html

良好的資訊架構、可用性以及親和力正成為專業設計師及開發者所關切的領域。 －超越式CSS 網頁視覺設計之王道 P12.



大家一定會覺得奇怪,為什麼書本上寫可用性,可是我的標題卻打優使性? 別懷疑,我沒有打錯,對於這個名詞,目前還沒有一個正確的名稱,中文有許多種不同的說法,像是可用性、易用性、優使性等等,其中以優使性讓我覺得比較接近原義,因為一個好用的設計除了操作容易以外也要看起來很優很順眼,那才會相輔相成,讓設計更加登上一層樓。
本篇的重點不在於名詞論斷,而在於資訊架構、優使性與親和力這三者間的關係,一般而言當我接到案子我會先看他的網站架構,了解整體的資訊架構後才開始著手設計理想中適合的版型,設計好後再網頁製作好後再考慮不同瀏覽器的問題,所以對我來說這三者的關係應該是

 網站架構 -> 優使性 -> 親和力

 
所以網站架構的完整性就會影響到使用還有親和力部分,著墨的多寡也就有所不同

網站架構 50%

優使性 25%

親和力 25%

當然,並不是每個設計師都跟我一樣是如此,就著重優使性的設計師來說,他的比重當然跟我不同,所以著重於親和力的設計師也當然與我不同,最理想的狀態當然是三種都是33%,往後我也會朝這33%的目標前進,我現在正在努力著重於優使性上,也慢慢的在了解親和力的部分,希望有一天我會成為33達人! 以前高中的時候有位很老的化學老師,他曾經說,人只要一離開學校,剩下的日子很少看超過22本書,這是他對學習一個小小結論,不過我想,在現在這個時代裡,22本書,會很難嗎?對網頁來說,每年都會冒出新的東西來,所以這是一個不斷在學習的職業,也是不斷在學習成長的一個範疇,22本書,我想,在同業裡應該會有不少人超過才對!


原也網頁設計、網站規劃、網站行銷。

關於網頁設計的學習之路－原也網頁設計、網站規劃、網站行銷

  引用自http://nowills.blogspot.tw/2008/11/blog-post_15.html

上禮拜遇到一個初學者拿著三本書(分別是html.CSS.JavaScript入門)，他問我為什麼html只是JavaScript的入門，為什麼要有兩個名字？又問我他很想快速學會這些東西，想自己改無名小站blog樣式，別人改還要花錢，自己做比較實在等問題，我很驚訝的問著，是誰告訴你html只是JavaScript的入門？他告訴我這是他翻完三本書後的感想，我心中不驚訝異的感覺為什麼會是這樣？這明明就是不同的東西為什麼會覺得這是一樣的？
HTML，英文全名為HyperText Markup Language，中文翻譯為超文件標示語言，一般瀏覽器就是解讀HTML然後編排出來變成視覺上可看見的畫面，而CSS，英文全名為Cascading Style Sheets，中文翻譯根據我本人認知為＂串聯樣式列表＂（在維基百科上有另外兩個中文名稱，分別為＂疊層樣式列表＂與＂串樣式列表＂），CSS的功能在於方便修改HTML或Xml等文件（以下簡稱文件）的樣式，可以讓文件板面編排更加活性化，並且可以使用少量的圖片達到美化的效果，可以結少網站頻寬的流量，而且可以加強結構，讓文件本身更加便利，也由於CSS太過便利，現今的網頁設計亦或是blog都採用CSS結合xhtml方式來製作網頁，至於最後的JavaScript，他是一種處理視覺動態效果所用的簡單程式，有些程式設計師甚至覺得他根本不是程式語言，但是不管他是或不是，通常JavaScript都用來處理一些例如滑鼠跟隨一張圖或一串文字，又或者是楓葉紛紛飄落，最常見的大概是註冊時檢查您輸入的資料是否正確等等，這三種是完全不同的東西，但是他們卻相生相惜，如果說有什麼是缺一不可，大概就是HTML，因為他是網頁的最根本，但絕定不是CSS或JavaScript的基礎喔！

後來那位初學者的朋友聽完我的解釋，他又問我如果他對這些都有興趣，他該如何學起？我跟他說隨便玩玩的話，我不知道，但是成為一個半路亂出師的網頁設計師我到是略知一二，不知道為何說到這裡周圍一些設計師朋友都聚過來，於是接下來我就開始說著如何成為一個半路亂出師的網頁設計師：

• 第一步: 請自己用手打code，不管學什麼都是 ，就從html開始，然後做一面網頁出來
• 第二步:做一個純html網站出來
• 第三步:做一個CSS+html的網站出來
• 第四步:做一個CSS+html+JavaScript的網站出來
• 第五步:去搶網頁設計師的飯碗，累積實戰經驗是一種快速累積實力的方法
• 第六步:學flash或其他動態網頁程式
• 第七步:搶flash動畫師或其他動態網頁程式設計師的飯碗，二次累積實戰經驗，充提升自己的實力
• 第八步:恭喜你，你已經是一個十分難得網頁設計師了，可以獨自一人接案，就算要開工作室亦或是公司都可以，不過我說的是技能方面，若是公司經營的哲學，這我就不清楚了

當我說完這些，周圍的朋友都紛紛說著我說的很對，而且大部分他們都是這樣學過來的，但是我覺得目前最困難的並不是學習，而是各種瀏覽器規格的不同，就算是專業的設計師，偶而也會遇到一兩次相容性問題而覺得頭疼，對於新手或不熟悉的人來說，通常這都會變成學習的絆腳石，常常打沒幾下就發怒而放棄的人也多的是呢！ 當然最後還是要說以上都是我本人的認知與經驗，當然不可能百分之百都是對的，所以以上僅供參考囉！


原也網頁設計、網站規劃、網站行銷。

痞客邦力推數位媒體服務，《7 Headlines》正式上線－原也網頁設計、網站規劃、網站行銷

  引用自http://www.bnext.com.tw/article/view/cid/145/id/23855


  由城邦集團旗下的痞客邦所研發的數位媒體平台《7 Headlines》昨（9日）正式上線服務，《7 Headlines》是華文市場第一個融合「個人化興趣」與「社群分享」的媒體平台。城邦集團首席執行長何飛鵬指出，《7 Headlines》的推出不但方便大家吸收各種資訊新知，也宛若聘請了一位隨身的小秘書。

關於HTML5這回事-淺談HTML5－原也網頁設計、網站規劃、網站行銷

  引用自http://www.mydesy.com/html5

   

什麼是 HTML5？

HTML5是目前最新的HTML協議，目的是取代1999年所定訂的HTML 4.01和XHTML 1.0 標準，以現今網路使用需求來說HTML 4.01與XHML 1.0已經無法滿足需求，所以發展HTML5是早晚的事情。廣義來說HTML5的內容包含了HTML、CSS和JavaScript三大部份，與以往相比，HTML5已經無法用單一語意式協議來闡明一切，而HTML5的最大使命就是彙整所有網路常用媒體協議，如Adobe Flash、Microsoft Silverlight、Oracle JavaFX等等，提供更有效、更完整、更強大的的媒體組合。

網頁設計的配色方案－原也網頁設計、網站規劃、網站行銷

引用自http://www.websbook.com/yuanli/wysjdpsfa_20577.html

網頁設計吸引人的地方在哪裡？是圖片還是對內容的佈局？或者說是網站的內容決定了網站的價值。
所有這些因素都會發揮其作用，但正是配色方案決定了設計是否出彩。
有經驗的專業人士會告訴你很多訣竅，比如說，一種配色方案可能適合一種設計，但未必適合於另一種；配色方案選擇應該在網站規劃之前還是之後？
今天我們就要找到這些問題的答案。

    

對色彩組合的介紹
選擇色彩組合方法有多種。讓我們快速地瀏覽下它們。

• 單色法：這是我最喜歡的方法，它有一個單獨的顏色打底，我們只需要調整其色度並著手設計即可。單一色彩看起來典雅漂亮，且容易將純色融合在內。但是要通過單一色彩組合來創建吸引眼球的設計卻不是一件容易事。
• 色彩對比法：一個冷色系和一暖色系的色彩相搭。例如，你的標題是暗黑色的，但內容可以是白色的。這也是網站設計使用最多的方法。
• 三色組合法：顧名思義，該方法使用色輪中等色度距離的三種色彩搭配。
• 四色組合法：與三色組合相同，四色組合法使用了四種色彩搭配。
• 模擬法：模擬法是我第二喜歡的設計風格。這種方法借用了色輪中的鄰近的三個色彩，比如說，紫色、紅色和橙色。

這些是最基本的配色方案方法。設計師也能設計其它的配色法，如果你有一定經驗的話，也可以設計自己的方法。對設計師而言，熟能生巧。


顏色及其適用性
正如你知道的，每種顏色都帶有一種情感色彩，與柔美主題相關的網站通常使用紅色，因為紅色代表激情。 當你改變配色方案時，它就與範本的整體感覺不搭。舉個例子，如果你設計了一個頁面，該頁面鮮明的圖像邊界點鮮明就象徵著力量，這種頁面適用於健身房一類的網站；如果你把配色方案設計為粉色和紫色，那這個範本就泡湯了。


佈局和配色方案
現在問題來了，我們應該在網站規劃之前還是之後選擇配色方案呢？根據客戶的需求，你會得到一些配色建議，最好的選擇就讓客戶做決定。 如果客戶選定了最基本的配色方案，你在設計時就不會感到困惑。這樣，你的設計色彩迎合了客戶的喜好，客戶很可能會對你的工作滿意。 因此，要在設計規劃之前決定色彩方案，這種方法適合我。我認為你也該試試這一技巧。


結論
無論何時接到客戶，你要根據客戶業務的性質羅列一些適當的色彩。詢問客戶最喜歡的色彩，並依此他們的喜好來設計佈局。


原也網頁設計、網站規劃、網站行銷。