2012年7月30日 星期一

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

  引用自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以下的單的時候,就意味著,你的設計已經定位在這個檔次了。”事實也的確如此,很多中小企業的領導、國企或者政府的領導,通常會有很強的主導意識,而且覺得設計不值錢,設計就是按照他們的意圖製作頁面,設計師也就是一工匠。和這樣的客戶講設計基本沒戲,你的設計也別指望能做的出彩。什麼檔次的用戶決定什麼檔次的設計,這句話是有道理的。

待續。


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

2012年7月26日 星期四

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

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


如果你問李永銓,一間成功的設計公司要具備什麼條件?他會告訴你有五件事情缺一不可。 
第一·設計能力

這是每一位設計師最基本的能力,可是設計潮流常常受外在環境影響。設計師若要在市場中打拼,不能只懂設計而對市場動態不聞不問。尤其是衝擊若我們生活的國際大事,由雷曼垮台到牽動兩岸的馬陳會,設計師都需要對這些事有一定的觸覺。這樣他們所創作出來的設計就不會流於表面,沒有內涵。  

第二·銷售技巧

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

第三·業務拓展

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

第四·建立團隊

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

第五·財務控制

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

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


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

2012年7月25日 星期三

平面設計和網頁設計的區別-原也網頁設計、網站規劃、網站行銷

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

最近剛好在招UI設計師職位,發現很多設計師(特別是剛畢業不久的)都分不清UI設計(甚至是網頁設計)和平面設計的區別,現轉載短文一篇,藉以分析一下同樣作為視覺傳達設計,它們之間的差異性及通性。



1.視覺元素
在色彩方面平面設計與網頁設計使用的色彩模式完全不同,平面設計因為後期的實現依賴於印刷,所以採用CMYK的色彩模式,而網頁根據其顯像方式使用RGB 的色彩模式。平面設計時的色彩運用注重視覺的衝擊力及視覺流的引導(在這點上與網頁設計中的BANNER設計相類似),而網頁設計(產品類)更注重的是信息結構關係的梳理,如果將色彩運用的過多過強,很容易引起視覺的疲勞感。
我們平時在設計過程中,平面設計的字體選用更為自由一些,不用擔心後期實現的問題,所有的文字最後都會輸出為圖形進行印刷,而網頁設計就需要考慮的更為全面,並且在字體的選用範圍上也很小,為了讓輸出的成品大小不對服務器造成壓力,基於html的特性,所有字體都是根據用戶操作系統內默認字體而定的,當然近年隨著技術的沿革與發展,這個差距也逐步在縮小,目前通過html5的API可以實現個性化字體的使用而不需要將個性化的字體最終輸出為圖形,在不增加後端壓力的同時,大大提升了用戶體驗,非常贊。

從圖形使用上,平面設計比網頁設計豐富,表現方式也多樣化,特別是對於產品類的網頁設計,模塊化的設計思路更為明顯,在視覺表現上也是如此,平面對於圖形的表現是不需要考慮到後期的實現的,在一點上是有目共睹的。在來說一下咱們設計時使用的尺寸單位問題,平面設計在使用尺寸標註時都用的是物理尺寸的概念, 比如英寸,厘米,毫米等,而網頁使用的像素。

2.呈現方式  

3.信息載體  

4.瀏覽方式
平面設計的屬於漸進式的瀏覽方式,無法對整個瀏覽的過程進行多樣化串聯,網頁設計擁有滾動條下拉、按鈕鏈接跳轉等多樣化的瀏覽信息方式,在擁有同樣一種信息架構的條件下,信息之間的串聯性更為豐富,用戶選擇信息的自由度更大,但平面設計也自然有其優勢所在,比如平時我在設計照片書這類產品的時候,就很明顯的發現,這一類的產品在電腦顯示器上進行翻閱,不如印刷成為一個真實的書本來翻閱感受要更好一些,並且更具有收藏及紀念意義。  

5.信息傳播
平面設計屬於比較傳統的信息媒介設計,一般會通過張貼、銷售、郵寄派送等形式進行傳播,這樣傳播的方式範圍小且成本較高,相對而言在這方面網頁設計的信息傳播能力卻非常的強,但依賴於第三方媒介的支持,平面設計卻擁有更為廣泛的受眾人群,不同的年齡層對於紙張或書本的信息接受能力總是強於網絡媒體的,畢竟網絡信息獲取的將會存在一個學習成本,在今後網絡信息的不斷普及以及終端媒介用戶體驗的不斷提升,在受眾人群方面在我看來差距會越來越小。

這兩種設計形式擁有著不同的用戶體驗,我們應該根據不同設計內容,選擇正確的設計形式提升用戶體驗,以上這些只是個人對平面與網頁設計的一些粗淺認識,也作為拋磚引玉希望大家能分享出自己對於設計的想法。


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

2012年7月24日 星期二

關於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方式,有機會在跟各位詳細說明這個部份。

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


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

2012年7月23日 星期一

讓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,還要忍受各種不同瀏覽器相容性的折磨,比較起來網頁切板設計師的經驗值就不是主視覺設計師可以短時間瘋狂打怪就補起來的,所以誰比叫吃香呢?我想我也不用明講了。

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


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

2012年7月19日 星期四

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

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


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

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

結構設計
.互動設計.視覺設計

結構設計

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

互動設計

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

視覺設計

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


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

2012年7月18日 星期三

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

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

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



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

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


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

2012年7月16日 星期一

簡約沒那麼簡單!蘋果首席設計師Jonathan Ive談產品設計-原也網頁設計、網站規劃、網站行銷

  引用自http://www.bnext.com.tw/article/view/cid/135/id/23320

如果你熱愛蘋果產品,那麼你一定聽過強納生.伊夫(Jonathan Ive),他是賈伯斯頭號愛將,也是蘋果的首席設計師;1998年蘋果正瀕臨破產邊緣,他設計出革命性產品iMac,讓蘋果開始反轉向上;強納生的設計徹底顛覆許多重大產業,2001年的iPod改變了唱片產業,2007年的iPhone改變了行動通訊產業,2010年的iPad改變了電腦產業。 

強納生.伊夫日前接受媒體採訪時談到,「設計」一詞可以包含很廣泛,也可以什麼都不是,「我們不真正談設計,我們談的是想法和產品的創作過程」。他進一步解釋,開發設計任何事物都是極具挑戰性的,目標是解決複雜問題時,盡力將簡約(simplicity)帶入未知答案之中。「簡約」是強納生.伊夫經常掛在嘴邊的名詞,而且還會一直強調這個名詞的特殊意義,「簡約並不代表完全不雜亂,這代表的是產品功能和定位,不雜亂只能說是乾淨,簡約則是要完全融入到產品的生產過程,是所有的根基」。

設計出這麼多款的成功產品之後,強納生.伊夫早已將團隊所產出的其它創意視為理所當然,但仍驚嘆每一個創意的發想過程。如果你想瞭解強納生.伊夫,要先認識他的真誠和熱情,這絕不是空談,而是強納生.伊夫此生信念。強納生.伊夫和他的團隊總是竭盡全力思索新想法、研究新材料、創造新製程、和諮詢不同產業的專家,例如研發iMac的時候,強納生.伊夫就詢問了糖果產業的人,如何才能生產出半透明糖果色的電腦外殼。


為了提升設計實力,強納生.伊夫還特別到日本學習武士刀如何製作,更有傳聞指出,iPad 2的設計靈感就是來自於此,雖然強納生.伊夫否認此事,但是這個故事還是讓人深深相信,原因就是強納生.伊夫和蘋果都是相當注重「藏在細節裡的魔鬼」,「有時候我們會投入相當多的資源和時間,只是為了解決一個小問題,但是事實上這個問題一點也不影響產品功能,只是因為我們認為這樣做是對的」。「就像是當你製作一個抽屜的時候,背面也要做好,你可以說因為大家永遠都不會看到這裡,沒必要把它做得很好,我很難清楚說明為什麼這樣做是重要的,但我就是認為這件事很重要,唯有如此才能證明你是真正關心使用者。我們認為自己有這樣的責任,這是一件重要而且對的事情。」

蘋果關心細節的理念融入所有產品,不但讓蘋果成為全球市值最高的公司,也讓大眾認為蘋果是一家永遠不會失敗的公司。其實,蘋果也有許多不成功的商品,像是2000年的Power Mac G4 Cube,還有2007年的Apple TV,強納生.伊夫說,「發展專案的長期過程中,我們通常並不清楚到底是否能解決問題,甚至不知道是不是該放棄這個想法,就算是iPod、iPhone、iPad,我們也曾這樣想過。」「有時候專案已經進入成熟期,也有了解決方案,但還是有一種下沉的不安感,因為你必須表達出產品價值所在,試圖說服別人,這樣的過程往往會讓你發現產品不足的地方,因此你必須告訴自己:『這還不夠好,我們應該要停下腳步』,但這就是相當困難的地方」。知道何時該停止,就是強納生.伊夫最重要的工作之一。


蘋果堅信人們應該要專注在他所專精的領域,但整個研發過程還是能保持相當流暢,當大家坐在一起開會時,你無法分辨出誰是機械工程師、誰是電子工程師、誰又是工業設計師。此外,團隊合作也是蘋果相當在乎的事,因此蘋果設計團隊可以共事超過十五年,這個團隊的美好,就是可以一起學習新事物,也一起承擔失誤決策,沒有這些過程就無法學到東西。

去年,蘋果最重要的領袖賈伯斯離開,華爾街分析師認為蘋果將會無法避免的衰退,正如你所預期的,強納生.伊夫完全不認同這件事,「我們開發產品的方式和兩年前、五年前、十年前都一樣,並不是只有設計團隊這樣做,而是整個公司的工作模式都是如此」,這也是強納生.伊夫認為蘋果會繼續成功的原因。「我們是著迷學習的組織,而且是一個喜愛嘗試解決非常困難問題的組織,也從此獲得無比滿足感。特別是坐飛機的時候,看到大家都在使用蘋果產品,這是多麼美好的一件事」。


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

2012年7月15日 星期日

Google不殺伯仁,伯仁卻因 Google而死-原也網頁設計、網站規劃、網站行銷

  引用自http://wired.tw/2012/07/12/google/index.html
WIRED總編輯觀點



口述:戴季全 / 採訪撰文:張婉怡

在今年的Google年度股東大會上,該公司財務長(Chief Financial Officer,簡稱CFO)Patrick Pichette提到:「Google『可能』是全世界最大的硬體製造商之一。」
一個從軟體業務出發的公司,卻同時具備了硬體產製的強大實力,這個結果的背後,某種程度上印證了當前科技產業發展現況:軟體業主導著硬體業的發展。

原本,Google發展硬體業務只是為了提供更好的軟體效果。他們自己設計伺服器,藉由網路服務來提升價值(Value up),再以降低成本(Cost down)的思維將硬體外包出去。例如,Google的資料中心(Data center)是以貨櫃為單位,每個貨櫃裡可能有上千台伺服器,設計好之後就丟給廣達,由台灣或大陸的代工廠負責生產。

因此,當Google自己設計一個新的硬體架構,向上整合出一套完整的生產流程後,下游製造部分,只要找到能用便宜價格做出同樣規格的代工廠即可,不論是當初的伺服器,或現在的手機、平板電腦都是依循此道理。

為了要量產,大部分硬體廠都從降低成本出發;不過,軟體的量產只須透過複製,所以必須建構在提升軟體價值、散佈能量與應用範圍的基礎上。從這個觀點來看,Google添購硬體設備,甚至企圖掌握更高的硬體整合能力,都是為了讓軟體價值不被硬體規格綁住。

所謂的「最大硬體製造商」,恰好印證了一個現況:當前的科技產業龍頭即將由軟體廠接手。主要原因在於,既有的硬體廠沒辦法滿足Google的龐大用量,它乾脆向上整合。過去,福特汽車也曾這麼做,為了滿足大量的原料需求,福特買下一整個煉鋼廠和煉鋁廠,進行原物料整合,整合完畢後就成為它的競爭優勢。

這說明了一件事:市場主導權已經從硬體走向軟體,而沒有軟體主導能力的廠商,將逐漸失去其競爭優勢。

換句話說,現在的產業趨勢是由軟體需求帶動硬體需求,而不是硬體需求帶動軟體需求。不管是市場研發或技術研發,當一間公司缺少軟體研發能力,剩下的,可能就只有價格優勢。當Google不再只是個搜尋引擎公司,而是更專注於運用創新研發來尋找市場機會,它跨進新市場的每個步伐,不論成功與否,某種程度上都會產生破壞式創新,只是它現在踏入的剛好是硬體市場。

Google執行長施密特(Eric Schmidt)曾提到,當今科技四大巨頭包括Google、臉書(Facebook)、亞馬遜、蘋果(Apple)。我認為這四間公司就像世界的R&D中心,它們藉由研發所產生的產品附加價值很高,儘管過去也曾遇到失敗,但在失敗後,依舊鑽研著該如何創新,提高效率,再將創新轉化為市場機會。

由當前趨勢來看,Google做為軟體或硬體公司的界線似乎逐漸模糊,但在虛實整合的趨勢下,我們至少可以確定,它的關鍵能力來自軟體開發,核心價值就是它的創新能力。反觀微軟(Microsoft)、諾基亞(Nokia)、惠普(HP)、宏碁、華碩、HTC等知名大廠,這些公司的未來發展,倒是頗令人擔憂。


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

2012年7月12日 星期四

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

  引用自http://www.bnext.com.tw/article/view/cid/145/id/23855
  由城邦集團旗下的痞客邦所研發的數位媒體平台《7 Headlines》昨(9日)正式上線服務,《7 Headlines》是華文市場第一個融合「個人化興趣」與「社群分享」的媒體平台。城邦集團首席執行長何飛鵬指出,《7 Headlines》的推出不但方便大家吸收各種資訊新知,也宛若聘請了一位隨身的小秘書。



2012年7月10日 星期二

關於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等等,提供更有效、更完整、更強大的的媒體組合。

2012年7月8日 星期日

網頁設計內容規劃與準備的五個目標-原也網頁設計、網站規劃、網站行銷

  節錄自http://www.ozchamp.com/knowledge_detail_663_ntid_119.html
作者:Alden DeSoto / 原文出處: Google

  許多企業將重點擺在網站的圖形設計,以及建立視覺上賞心悅目的網站,但他們通常都忽略了應該要在網站上多放一些文字。提供資訊的文字能夠讓訪客安心,還能讓搜尋引擎有東西可供檢索。 因此,網頁設計應該從何開始?讓我們看看您可以完成的五大文字相關要件。


2012年7月4日 星期三

充滿創意的404錯誤頁面-原也網頁設計、網站規劃、網站行銷

引用自http://ldope.com/news/design/404-not-found-error_web-page/ 


當瀏覽網頁看到「找不到網頁」、「404 Not Found Error」時是不是火氣就來了呢?今天我們就來看許多網站的404錯誤頁面,但不會讓你火到反而是會心一笑呢~


(點擊圖片進入404頁面。)



   一進來就看見一隻綿羊坐在馬桶上,看牠再慢慢的消失,當滑鼠滑過時,又突然出現,實在是滿好玩的。
原網站http://www.apartmenthomeliving.com/




雖然不像前一個有效果,但是看到那隻袋鼠的動作,也挺有趣的。
原網站http://www.localfitness.com.au/  


有種想找什麼東西,但是找不到,被關了窗的感覺。
原網站http://christophermeeks.com/  


找不到頁面是因為CSS錯了??
原網站http://css-tricks.com/  

XDDDD這設計師正在畫新的404頁面。
原網站http://www.brandcrowd.com/  


連大偵探都找不到。
原網站http://audiko.net/  


這頁真的挺好玩的,上方文字有提醒可以點擊獨角獸,就會出現有趣的對話跟動作,但是我沒想到他有這麼多啊XDDDD  


最後這個不是真的找不到,只是有人把PACMAN的路做成了404,真的可以玩喔!