wowbox blog (網頁設計知識庫) - 設計共享

對於新人和菜鳥來說，模仿是最快的成才之路，也是成為一個設計師的必經之路。大家都會覺得模仿很簡單，不就是做的「一模一樣」嗎？這個誰不會？但是總會出現一個情況，就是你模仿的效果和原圖總感覺有區別，差點意思，尤其是模仿別人的部分效果，比如把英文的網頁效果圖換成中文的，或者換個圖片，換個字什麼的，感覺一下就不對了。到底是什麼原因造成的呢？下面是總結的一些個人觀點，希望對新人有所幫助。

1、一定的技術實力
模仿的前提是你有一定的技術水平，比如軟件操作比較熟練，看到的效果你也知道怎麼做，否則肯定模仿不了。

2、模仿對象的選擇
有一句古話「觀其上而取其中」就是指你看到好的作品，你去模仿，往往也只能達到別人一半的效果或水平，也就是說，在最開始選擇模仿對象的時候就要模仿好的，模仿大師的作品(不要誤解我的意思，我指的是達到一定水平的作品)，否則隨便找個作品就模仿，別人做的一般，你模仿出來的就更一般了。

3、細心&耐心
有耐心，肯為效果花時間和力氣，細心，能注意到細節，其實就是模仿中最重要的兩點，大多時候，能夠把熱情和積極性從頭保持到尾不是一件容易的事情。

4、模仿7要素
想要模仿出來的效果和別人的作品一模一樣，需要注意以下幾點內容：
1-色彩
2-版式
3-圖像素材
4-字體
5-段落
6-logo（標誌）
7-細節

也就是說，你要分析他人作品中的這些點，然後你的模仿作品要每個點都能一一對應起來，那麼肯定你的模仿作品是成功的。

未完待續。。。。。。。。。

設計師決勝商界的十大金科玉律

hanher@hotmail.com(Admin) — Mon,09 Feb 2009 03:49:24 +0800

《NewWebPick》電子雜誌邀請全球500強企業中的企業領袖及資深市場總監，對設計師在商界中如何更好的服務客戶，做出了以下十條忠告，希望做為設計師的您，通過這十條瞭解到普通商業客戶真正需要的是什麼。
　　
10 Golden Rules for Designers in the Commercial World
設計師決勝商界的十大金科玉律
　　
1. Never engage in an argument or oppose the person who holds your cheque; he/she is probably more concerned about the outcome of your design than yourself.
永不與付款給你的人爭論或對抗，他/她們肯定比你更關心設計後的結果。
　　
2. Things are not design oriented; your design will first and foremost be used to deliver a message to the market for your client, before it is an item of personal artistic expression.
作品並非設計主導的，在為藝術家表達自己之前，你的設計首先及主要為你的客戶用於傳遞一個市場信息。
　　
3. Communicate patiently with your clients. Remember, they are not designers, so use their language to get your idea across.
要有耐性和你的客戶溝通。緊記他們並非設計師，故須用他們的語言來闡述你的觀點。
　　
4. I believe there is meaning and a story behind your designs and works, but if you don't put effort into telling me, how will I fully understand?
我相信每個你的設計和作品背後都有一個意思和故事，但你不用心去說明，我又如何可完全明白呢?
　　
5. Respect the deadline; meeting it improves your credibility and will impact your career development.
尊重期限時間，做到將可改善你的可信任度和增進你的事業發展。
　　
6. People prefer to talk to someone who is presentable, meaning clean and tidy. Stylish doesn't have to mean unclean and untidy, do you catch my drift?
人們喜歡與注重外型的人傾談，意思是清潔及整齊。型格並非是骯髒及混亂，你能領略我的意思嗎?
　　
7. Punctuality is important, it is important to anyone who is professional, which includes designers.
守時是十分重要的，特別是專業人員，專業人員包括設計師。
　　
8. Never get angry during the price negotiation process, it's just business and nothing to do with insulting your work. There is no reason for them to do so anyway, if you really think about it.
不要在討論價錢過程中動怒，這只是商業而己，他們並非在羞辱你的作品。你要知道，他們並沒有任何理由去做此事的。
　　
9. Your reputation can be proved by business references or winning awards. Don't forget to win more awards, because it is what customers believe in.
你的名氣是來自商業推介或獲取獎項。不要忘記去獲取更多獎項，它會使顧客更相信你。
　　
10. Never, ever, attempt to copy others' designs for any reason at all. It is a death sentence to any designer.
無論任何理由，永不要企圖抄襲別人的設計。這會是任何設計師死亡之路。

你做到了幾點呢？我好像大部分都沒做好！難怪了！可能是快變成工程師了！對工程師或許是沒用的！

中國首頁四大特色：長閃擠花

hanher@hotmail.com(Admin) — Tue,16 Dec 2008 01:16:10 +0800

先說這個「長」，中國網站的頁面真是長啊，以至於我坐在電腦前瀏覽的時候經常會想，這個頁面的最低端會不會已經搭拉到我的腳面上了。我們的萬里長城是第幾大奇跡來著？反正中國的網站應該緊排在她後面。

我們的大型門戶網站恐怕應該是長頁面的領軍者吧。現在能生存下來的大型門戶各個實力不凡，又紛紛上市，其他網站能與他們頁面相似應該也能說明實力相似吧，這幾家大型門戶已經給用戶形成了「長則是好」的印象，於是眾多網站都紛紛「長」起來了。無論是綜合性網站還是專業性網站，只要有內容，就能做多長就做多長，沒有內容，抄襲別人內容也要做長，以至於不少實力有限的網站只是首頁很長，到了欄目頁面（二級頁面）就簡陋的可憐了。

長的基礎就是要內容要多，這些眾多的長網站在組織內容的思路上基本是一致的，就是把二級頁面的內容摘要的放在首頁上。首頁分成若干個相應的通欄的大塊兒（這樣可以逐個部分的下載頁面，易於顯示），再在每兩塊之間加一條廣告，最後再在頁面的最上面加一個更綜合的區域，所謂的重中之重，這樣以來頁面想短都短不了。

按照Jakob Nielsen的說法：網站首頁的長度不應該超過4屏。當然這個準則也未必就那麼準確，但是至少應該承認頁面不是越長越好的。

第二，說說「閃」。就是網頁上能動的東西－－－動畫。主要是Gif動畫，flash動畫，腳本語言實現的圖片交替效果，還有就是彈出窗口。動畫對網頁表現本應該是個很好的補充，但是現在的實際效果是對網頁的干擾，因為動畫從一開始就扮演著廣告的角色。雖然將各種形式的動畫應用於網站在國外的網站上也常見，但是中國網站上的動畫實在是太多了。恐怕也是因為中國網站頁面長吧，能放動畫的空間自然也就大了。整個頁面到處都在不停的閃。科學家已經證實，在月球上是看不到萬里長城的，但是我想，應該是可以看到中國網頁的，它們不僅長，而且還在不停的閃爍。

這些動畫通常是廣告，網站要生存，要有經濟效益，這是可以理解的，但卻不可接受，尤其是太多的時候。最不可接受的是一些網站會把自己的欄目名稱，網站logo之類的很重要的內容也做成動畫，以為這樣可以更醒目，要知道，絕大多數用戶是經驗豐富的，他們看到動畫閃來閃去就會認為那是廣告的，儘管你不是，那也活該，誰讓你亂閃來著。

雖然彈出窗口裡的內容不一定是動畫，但是它「噌」的一下彈出來，著實是夠「動」的，就動畫的效果而言，絕對是最具視覺衝擊力的。還好，現在有越來越多的雷鋒式的好公司提供了能屏蔽彈出窗口的工具。

腳本語言實現的圖片交替效果目前主要是用在網站頭條的圖片報道上，雖然是動，分散用戶的注意力，好在這種方式還是為了給用戶提供盡可能多的信息，應該值得肯定，也應該是動畫應用於網絡的發展方向，只是不知道什麼時候，哪位設計師靈感突現，把廣告也偽裝成這種樣子，應該能在一片罵聲中為公司贏得不少經濟效益。

Gif動畫是種傳統的動畫形式了，不過在flash動畫面前，它的生存空間越來越小了，與flash動畫相比恐怕Gif動畫唯一的優勢就是在用戶將網頁「另存為…」後，Gif動畫還能顯示，而flash就不行了。雖然Gif已是人老珠黃了，但是還是要批判，因為它通常是廣告。

Flash動畫無疑是網頁動畫的主力了，文件小，效果好，一個白方塊在黑背景上隔幀出現，連續幾次，只要尺寸稍大就足以造成用戶暫時性失明。實際上，flash基於其強大的交互性應當能為提高用戶界面的性能提供巨大幫助，但是如前面所說，它更被廣告商所看好。更不幸的是越來越多「閃客」在為這項事業服務，原本代表特例獨行、自由創造精神的人走向了相反的方向。這有點兒象政府將反政府武裝招安後讓他們穿著原來的軍裝去給政府機關當保安。

第三是「擠」。我們的網站看上去滿滿噹噹的，比公共汽車還擠。每天早上都是擠公共汽車，然後擠地鐵，擠電梯，擠著打卡，好容易坐下了，打開電腦就不要再那麼擠了，大家站開點兒吧，網頁上有的是地兒。

與英文相比，中文本身就顯得比較複雜，對於有鏈接的文字中國網站又往往更傾向於傳統的隨時保持下劃線的方式，再加上小的幾乎不存在的行間距（顯然，這裡誇張了，至少還要有劃下劃線的地兒），使得頁面看上去分外豐滿，如同我小時候習慣了在田字格本上寫字後，初次改用行距很小的單線格本寫字所展現出的風采。

即便是體檢用的視力表也沒有把行距安排的如此之小，那可是專門給我們眼睛找麻煩的工具啊，我們的網站無一不是把用戶放在第一位的（至少自稱是這樣的），為什麼不能把行距拉大些呢？

經常可以看到某網站為了突出重點內容而使用14pt的字號，然而卻不加大該內容與其他內容的距離，這樣只能使頁面看上去更擁擠。這種做法倒是與老闆（個別的，個別的，如果您是老闆，那這裡所說的一定不包括您）的做法頗為相似：只增加工作，不加薪。也許是設計師在用這種擁擠的樣式向老闆示威吧。

第四是「花」，中國網站的色彩之絢爛，幾乎無以復加。前面分析了首頁的構成方式－－－將各個欄目摘要排放在首頁上，通常每一個欄目會有一種主色調，這樣一來，首頁上的色彩自然就很豐富了。

當然，分欄目確定主色調的設計方式本身並沒有錯誤，也不足以搞「花」頁面，然而實際情況卻更複雜，以文字為例，未點擊的鏈接文字有黑色和藍色，重點的文字會用紅色（重點通常還很多），點擊後的文字鏈接是紫色，無鏈接且不重要的文字是灰色，此外為了突出某一個重點內容會添加一個醒目的背景色或文字顏色。網頁設計師為了表明自己工作用心，會給每一個子欄目的標題部分設計一個很具有特色的背景，這些文字再與數不勝數的圖片、動畫交相輝映，使得用戶可以在一個頁面上將電腦可以顯示的全部色彩盡收眼底。網頁設計師實際上根本不需要絞盡腦汁為頁面設定主色調了，所有的頁面色調都已經設定好了－－－彩色。

為什麼中國網站會設計成這個樣子呢？

造成「長，閃，擠，花」問題的實質是一個「多」字。中國網站首頁上內容多，重點多，欄目多，圖片多，廣告多，該多的多，不該多的也多，要多多，有多多。

「多」是中國網站的特點，更是中國社會的現實狀況。無論是超級市場裡還是購物中心裡，到處是商品，到處是人潮，即使是象書店，美術館這樣的場所也是相似的場面，人們相信人多的商場裡的商品會更好，人多的書店裡的書會更全，人多的美術展會更有水平，賣家只能盡可能的展現自己的產品，從而證明自己的實力，而其他更高級的要求，諸如：環境，風格，品味，服務……都要為展示產品讓路了。

在目前的中國，無論是物質產品還是精神產品，廣大受眾的需求都遠遠沒有得到滿足，所以大家都希望能看到更多產品，這樣就形成了「多則好」消費心理（瀏覽網站的消費形式顯得更間接），網頁設計師在應聘時經常會被問到：你是否能勝任「大型」網站的設計，即「能不能把頁面做的很長。」

中國網頁內容多，給人忙亂的感受，正像我們自己經常會向別人抱怨自己忙的要死，以此來表示我們自己的價值。

引用Donald Norman 在《emotional design》一書中的理論，設計可以分為三種層次：本能水平的設計、行為水平的設計、反思水平的設計。本能水平的設計是滿足人類本能審美需求的設計，也就是漂亮、美觀的設計；行為水平的設計是注重效用的設計，注重功能、易用性、可用性；反思水平的設計注重信息、文化的作用，一件產品被設計的很獨特、出眾、引人矚目，用戶會因為始終這個產品而產生樂趣，產生滿足感。

根據這個理論，中國網站的設計普遍達沒能實現本能水平的設計，雖然網站的boss、設計師本人都希望把網站設計的很漂亮，吸引用戶的眼球。行為水平的設計逐漸被重視了，不過目前基本上還是停留在不高的水平上。上面說到的中國網站的種種問題實際上正式在反思水平上的設計，一種變相的反思水平設計。

「多」這種看似缺陷的現象，實際上正式給用戶一個好的反思－－－「這個網站的內容豐富，在這裡我能得到想要的東西。」儘管很多用戶並不會真的關注首頁上的內容。

正是這種反思吸引著用戶，保證著網站的訪問量。

造成上述網站首頁設計問題的罪魁並不是設計師沒水平或者用戶沒品味，而是產品不夠，這表面上的「多」其實是由於「少」造成的。用戶對網絡內容的需求引導著網站的設計，策劃人員有意無意的在迎合著這樣的需求。

要改變中國網頁設計單靠高水平的設計師是不夠的，中國網頁設計水平的提高是伴隨著社會發展在進步的。

好吧，我們好好幹吧，等我們實現了「四個現代化」，完成了「三步走」，創建了「和諧社會」，那時候，會需要更好的頁面設計的。

PS：太多的功利心讓設計師失去了對一個網站的真正認知，內容的豐富不代碼這個站是我想要的東西，花哨的界面，沒有任何的重點在裡面，技術已經升級了不知多少次，但人的思想沒有起步，結果就成這樣了。

那台灣的網站又長成什麼樣子呢？改天可以列出來看看喔！

設計天才必然論

hanher@hotmail.com(Admin) — Fri,21 Nov 2008 02:21:45 +0800

怎樣才能提高智力超越愛因斯坦！
想變成1個非常聰明的人可不知道怎麼辦？
是不是努力思考就可以了啊！

問題補充：
買了1本智力題目的書可這樣可以嗎?
我現讀初2下期數學和物理我自己決的不錯(100制都有95+)
可在智力測試時(16-40歲用的) 只有112分
我知道智力並不要太在意可有沒有確實的提高方法啊

最佳答案
呵呵，有骨氣！我國到目前為止還沒有人拿到過諾貝爾獎。（楊振寧，李政道不算，他們是美國國籍）超過愛因斯坦，到時候，還不鐵定拿諾貝爾獎，為祖國爭光。

多做些數學題，數學不是思維的體操嗎？學學音樂，好好上音樂課（別學我，那時候光跟同學聊天了），愛因斯坦不是也拉小提琴麼?概括起來就是勤用腦。多吃些海魚。注意我可說的是海魚，不是河魚。因為海魚中含有豐富的DHA，很耳熟吧。DHA,學名是二十二碳六烯酸,是大腦營養必不可少的高度不飽和脂肪酸，它除了能阻止膽固醇在血管壁上的沉積、預防或減輕動脈粥樣硬化和冠心病的發生外，更重要的是DHA對大腦細胞有著極其重要的作用。它佔了人腦脂肪的10％，對腦神經傳導和突觸的生長發育極為有利。

想超越愛因斯坦，提高智力是一方面，更主要的是個人的努力。還是愛迪生那句老話：什麼是天才？天才是99%汗水加上1%天賦。人要想成功，非智力因素占主要方面。努力吧！無論遇到什麼困難或失敗，都不要忘了你說的話：「我要超越愛因斯坦！！！」

以上是摘自「百度知道」

天才，百分之一是靈感，百分之九十九是汗水。但那百分之一的靈感是最重要的，甚至比那百分之九十九的汗水都要重要。(愛迪生)

當然，這句話本身並沒有被偷梁換柱，但偏偏每次都漏掉後面那關鍵的一句話：「但那1%的靈感是最重要的，甚至比那99%的汗水都要重要」。大家可以看到，沒有後面的這句話，全句的意義就完全改變了。愛迪生當然是個天才，他也是相信天才的他對天才持一種「有條件的承認」的態度，即天才是最重要的，但天才也需要努力。愛迪生承認努力，但他歸根結底更重視靈感。從來只有這第一句，這等於全面否定靈感的意義

上面這個話也是來自「百度知道」

縱觀凡有所成就者，必有那「1%的靈感」。
在論壇，看到不少帖子，有為設計迷茫，也有為設計失意，不少人努力升級了，也太多人在白費心機。。。。

在設計的路上，有的人很拚命學習，模仿，但是永遠到不了那樣的高度，這是命中注定的事情，因為並不是每個人都可以登上珠峰。

有人迫不得已淪為抄襲者，這是命中注定的事情，因為並不是每個人都是天才，並不是每個人都有那「1%的靈感」。

認命吧，水平雖然可以提高，但是極限早已經被注定！

視覺設計常見誤解

hanher@hotmail.com(Admin) — Mon,17 Nov 2008 02:45:30 +0800

有機會研究對視覺設計作用的常見誤解，這些誤解仍然盛行於行政主管、產品主管，工程經理和市場專家中。設計團隊成員如何說明這些認識是錯誤的？又該如何向同事和老闆展示視覺設計真相？

視覺設計師在特定產品領域或職業生涯中會面對各種困難，但有三種誤解頻繁發生：

視覺設計是美化產品；
突出顯示能改善視覺設計；
可以分割評估視覺設計。

視覺設計是美化產品

這種信條可能起源於工業時代的設計理念引入。從那時起，產品以前所未有的方式進行設計，並形成風格。Raymond Lowey等工業設計師對呆板產品進行美學設計，而聲名大噪。

視覺設計固然能美化產品，但其與人交互的潛能早已超越美麗外觀。通過組織視覺元素，設計師可以傳達回答關鍵問題的核心信息：

這是什麼？
怎麼使用？
為什麼要使用？

回答這些問題是功能和可用性的關鍵組成部分，尤其是對於交互產品。舉些例子來說明：

圖1到圖3，某個網絡應用工具，相同基本設置的三種表現方式，字體、顏色、漸變和圖片都相同。三者主要區別是頁面元素組織方式不同。這種區別表明該網絡應用工具存在三種主要使用方法。

圖1、網絡應用工具設計示例

圖1，表現方式清晰顯示出主要功能------查找客戶聯繫信息；其次，用戶可以編輯、刪除或者增加備註。圖2，重點是顧客和公司之間的交流；其次，用戶可以查看、編輯和刪除聯繫人信息。

圖2、相同網絡應用工具，不同視覺組織

圖3，關注點放在編輯客戶信息上。查看聯繫人信息和跟蹤正在進行的會話功能被弱化。

圖3、另一種視覺組織

相同應用工具，三種不同視覺組織，三種不同主操作：查找聯繫人信息、管理客戶交流以及維護客戶記錄。每個例子中，影響視覺設計的因素大體一致：顏色、字體、漸變和圖片。

顯而易見，視覺設計不僅是美化此工具。它傳達工具的核心功能：它是什麼？如何使用？為什麼要使用？，而同時有美化了界面。

能讓這個更突出嗎？

很多網站都喜歡把logo做得比較大，客戶和老闆常要求視覺設計師著重強調頁面上某些元素。這類評論有時可以幫助我們發現設計中的最重要元素，但也常引發視覺設計的另一常見誤解：改善網站視覺設計，通過加大、加粗、變紅或同時使用三種方法來實現！

頁面任何元素的相對重要性都是由其周邊元素決定。白色頁面放上紅色圓圈，會吸引很多注意力。但把紅圈放在10個粉色圓圈旁就不會吸引那麼多注意力。突出重要元素是整體設計的一個過程，並不是改變任何單一元素。給予單個元素額外視覺權重會破壞佈局平衡，攪亂相關元素、主操作等之間的關係。

要是滿足客戶和老闆每個強化某些功能的需求，頁面所有元素都會去搶著吸引用戶注意—— 結果就是都得不到注意。圖4和圖5，兩個互聯網瀏覽器下載頁面。Firefox頁面，下載瀏覽器號召很明顯，頁面其他元素——Thunderbird、 Mozilla商店和最新內容——沒有干擾。

圖4、Firefox下載頁

圖5，Flock下載頁面強調了許多不同元素，設計團隊決定提供四個下載入口------右上角、左側菜單底部、新聞面板右上角和頁腳。如果頁面上沒強調那麼多其他元素，Flock下載頁面或許可以和Firefox一樣只用一個下載按鈕。

圖 5、Flock下載頁

可以分割評估視覺設計

沒有從設計整體考慮，而強調單個元素會非常困難，同樣做出孤立改變也很難。但是視覺設計師收到的大部分反饋集中在孤立元素上：可以把Logo做大點嗎？能改變標題顏色嗎？這裡可以換張圖嗎？

這些的確幫助設計師明白用戶和老闆想要的東西，但他們沒有考慮優秀設計必需的整體分析。改變顏色需要反覆思考整體配色，因為設計師必須確保顏色對比明顯，才能突出關鍵操作。改變圖片意味著同時要改變周邊元素，因為原圖片形成的焦點可能已不存在。諸如此類。

產品總體視覺設計源於謹慎平衡頁面元素------傳達產品功能、可用性和優勢的關鍵信息。如果要調整一項元素，設計師需要重組全局，重歸平衡。孤立設計決策無法保持修改前後整體一致。

孤立評估基於互聯網的產品特別脆弱。單個產品可以進行獨立測試，所以產品團隊就會假設"這些產品結合在一起也會很好"，而常常把單獨表現良好的產品組合起來。圖6，孤立決策的後果。

在這個eBay頁面，頁頭水桶測試（bucket testing）表現良好，PayPal保護機制的logo在焦點小組（focus group）中獲得好分數，攝影物品宣傳也獲得不錯點擊流，但把三個元素綜合到一個頁面上，並沒有形成有效設計。事實上，頁面上很多元素似乎互相競爭，互相干擾。

圖6、eBay意大利首頁

希望這些例子能解釋對視覺設計角色的一些常見誤解。只有同事和老闆能直接體驗視覺設計潛能，他們才會相信視覺設計絕不僅僅是設計樣式、顯化元素或做出孤立決定。

設計師和美工

hanher@hotmail.com(Admin) — Thu,30 Oct 2008 11:37:42 +0800

原文：點這裡...

無意又談起了這個老話題，美工和設計師（視覺）有什麼不同？

以文字排版設計為例，列了下面兩個圖來說明，可能會有一些啟發，第一個圖應該算美工做的(隨手畫的)，第二個是算設計師做的（來自thecreator）：

下面簡單說一下第一圖隨手畫的用意：

第一點也是很重要的一點（很多年輕設計師都會犯類似的毛病），設計的時候沒有去理解這句文字想要表達的內容，至少從設計作品裡不能體現出來他對內容理解了：「art is breaking the rule(藝術正在打破規則)」。可以看出第一圖中用了心思去排布文字，體現特殊的平衡感，但是設計如果不能服務於內容和主題，這樣的作品一樣是沒有靈魂；相比較而言，第二圖對rule的破解技巧要顯得專業和切合主題一些，而且對排布也有很細緻的構思，比較獨特；
第二點，過多地注重文字細節特效的表現，未能從全局去平衡設計的整體效果，第一圖雖然沒有很大的錯誤或漏洞，但是整個作品缺乏統一的整體感；
再後就是對個性、風格的詮繹，不犯錯誤、中規中矩往往會落入俗套而缺乏新意，設計、特別是視覺設計，用什麼方式讓欣賞者通過視覺感官留下深刻的印象？他們能看到另一個作品就知道是同一個設計師設計的嗎？

上面只是個人的一些體會，相信設計師對這幾點的思考會帶來一些啟發，歡迎大家補充、交流。

理解『漸進增強』

hanher@hotmail.com(Admin) — Thu,16 Oct 2008 03:31:04 +0800

原文：Understanding Progressive Enhancement
作者：Aaron Gustafson
翻譯：http://lifesinger.org/

從1994年開始，Web開發社區就敲響了優雅降級（Graceful Degradation）的鼓聲。這個概念來自工程世界，其核心理念是給最新最強大的瀏覽器全套餐式的體驗，而給那些不幸還在使用Netscape 4的可憐人們只留些殘羹冷炙般的基本功能。毫無疑問，這發揮了作用。但是它並不很符合Tim Berners-Lee（譯註：萬維網之父）關於普遍可訪問性網絡（Universally Accessible Web）的原始願景。

大約10年後，一些聰明的傢伙開始質疑優雅降級，發現它在很多層面上有不足之處。他們將精力集中在內容可用性（Content Availability）、總體可訪問性（Overall Accessibility）和移動設備瀏覽器的能力上，尋找到了一條Web開發的新途徑——此方法將內容作為關注焦點，而不只是對舊設備的支持嘴上說說卻沒有實際行動。

在2003年的 SXSW 會議（譯註：一個關於電影、音樂和交互的會議）中，Steve Champeon和Nick Finck做了一個名為「面向未來的全方位Web設計」的演講。這樣，他們揭示了這種Web開發新方法的藍圖。Steve還給它取了個名稱：漸進增強（Progressive Enhancement）。

這裡有個（微妙的）差別

如果你撓著頭想弄清楚優雅降級和漸進增強的區別，我告訴你，這是一個關於視角的問題。優雅降級和漸進增強都考慮一個網頁在各種設備的各種瀏覽器上如何良好運轉。兩者區別的關鍵在於它們各自關注的焦點，以及這種關注對工作流程的影響。

優雅降級的視角

優雅降級關注於在最先進/最全能的瀏覽器上構建網站。在被認為「老的」或能力不足的瀏覽器中的測試，經常要等到開發週期的最後一個環節才進行，並且通常限制在主流瀏覽器（如IE、Mozzila等）的前一個發佈版本中。

在這種模式下，老的瀏覽器只可能提供差強人意（poor, but passable）的體驗。或許會做些小補丁來適應某個特定瀏覽器，但這些瀏覽器畢竟不是關注的焦點，除了修正重大的錯誤，也不會再費多大的神了。

漸進增強的視角

漸進增強關注於內容。請注意區別：我甚至都沒提及瀏覽器。

內容是我們最初創建網站的原因。有些網站傳播內容，有些收集內容，有些請求內容，有些操作內容，有些網站以上所有功能都有，然而它們都需要內容。這就是漸進增加成為一種更適合的模式的關鍵所在。這也是Yahoo!迅速採納這種模式並用它創建了分級瀏覽器支持（Graded Browser Support）策略的原因。

它是怎樣運作的

進入漸進增強的思維方法很簡單：只要從內容開始往外想。內容形成堅實的基石，在此之上你才能添加樣式和交互。如果你愛吃糖果，可以將它想像成一顆M&M花生巧克力：

（圖示：漸進增強的巧克力層）

從你的內容花生開始，將其標記為富含語義的(X)HTML. 接著給內容裹上一層富含奶油的CSS. 最後，添加JavaScript作為糖果硬殼，這就做成了一顆可口無比的美味（並使得它不會在你手裡融化）。

如果你非常熟悉Web標準化運動的口號——分離、分離、分離——這個類比就相當清楚了。基於Web標準的開發經常被比作夾心蛋糕（或者，可以更富想像力地比作為鬆糕（譯註：一種多層蛋糕，可以夾水果、奶油、沙司等））。

我更傾向拿M&M花生巧克力來類比，因為它的外層把內容完全包裹住了，這和我們的樣式與腳本將內容包裹起來幾乎是一樣的。

如果你允許我的食物類比論再多講一點（希望不會讓你感覺飢餓），我將解釋為什麼這種方式更好以及在這種模式下各層之間是如何交互的。

花生仁

有些人喜歡花生。實際上，有人喜歡花生勝過M&M花生巧克力。類似地，有些傢伙（以及像搜索引擎爬蟲這類東西）只想要內容。

還有些人無福消受花生上的巧克力和糖果層（例如糖尿病患者）。和他們類似，移動設備或老瀏覽器用戶可能無法看到你漂亮的設計，或者與你流暢的AJAX驅動的界面交互。

確保你的標記能夠將所包裹的內容的細節最大限度地傳達出來，這對於給這些用戶提供基本體驗至關重要。

巧克力外衣

接下來，你可以將內容小心地浸入芳香美味的CSS暖浴中了。不過在你跳進糖果硬殼之前，還有些額外的考慮。

有的人愛吃巧克力裹著的花生。這些人就像中級用戶，他們的瀏覽器有比較好的CSS支持，但可能沒有很好的JavaScript支持。或者，可能在他們工作的公司裡，IT安全人員對JavaScript極其病態性地恐懼。對他們來說，JavaScript就可能完全被禁用了。

無論是傾向於愛吃巧克力花生（譯註：一種直接用巧克力覆蓋的花生，沒有外層硬殼，類似於有內容和CSS但沒有JavaScript支持的網站）還是被限制只能吃巧克力花生，這些人都應該得到滿足。這裡有幾種漸進增強的方式可以將樣式應用於內容，這將是本系列第二篇文章的話題。

糖果硬殼

最後，你可以將JavaScript添加到內容和樣式的混合體中了。JavaScript提供了富交互的可能性，同時具有操作內容層和展現層並與其交互的能力，這實際上使得JavaScript成為了把網站帶入「體驗」高度的一味配料。

我不確定糖果硬殼到底是怎樣添加到M&M花生巧克力上的（我猜是另一種什麼浸蘸過程吧），但是，你腦中想著漸進增強的話，在你的網站上加入基於JavaScript的功能和交互就輕而易舉了。另外，就如M&M花生巧克力有各種各樣顏色一樣，依據所運行的瀏覽器和設備的能力，JavaScript的體驗也可以各不相同。

正如你可能知道的那樣，這種類型的開發叫做無侵入式（Unobtrusive）JavaScript. 我將在本系列的第三篇和最後一篇文章中講述這些技巧和實踐。

都放在一起

一旦理解了漸進增強的理念並開始在實踐中使用，那麼用漸進增強進行開發就非常簡單了。也許比做糖果還簡單。本系列接下來的兩篇文章將幫助你使用CSS和JavaScript來磨練你的漸進增強技巧，並向你展示怎樣把哲學轉換成代碼。

譯註：

1. Graceful Degradation有譯為預留退路、平穩退化的，但我覺得這兩個翻譯沒有表達原意，不如直接翻譯成優雅降級的好。
2. Unobtrusive有譯為不唐突的、分離的、低調的，在Web開發領域，我覺得翻譯成「無侵入的」最能表達原意。

設計！以『更好的人』為本

hanher@hotmail.com(Admin) — Thu,16 Oct 2008 03:23:23 +0800

當思想被分為東西方的時候，「禪」作為東方智慧的代表之一，令許多人著迷。人們從「禪」的思想裡，尋求人生的解答。

人生的問題，是要處理各種關係：人與他人的關係，與世界的關係，與自身的關係。「禪」通過不斷地簡化這些關係，讓人得以從紛繁複雜的表象中，看到一種深刻的本質，從而理解生命無常的自然，欣然接受這種自然，達到人生的返璞歸真，淡定從容。總而言之，「禪」對於現有關係的處理態度，是「減法」。

而設計呢？設計是主動地去創造一種關係，創造人與物的一種關係，甚至借由這種人與物的關係，去創造人與人的關係。因此，從表面上看來，設計對於人們的生活來說，是一種「加法」。

但這種「加法」，其實是可以通過借鑒一些「減法」的元素，而使東方的智慧，在西方發起的「工業設計」的「設計」一詞中，留下更多的婉轉流暢，讓人微微一笑的感動。

你是在「設計」「陷害」嗎？

「以用戶為中心」的思想已經被提倡很久了，滿足用戶的需求，成為至高無上的目標和動力。但是用戶的需求，一定要被滿足嗎？不僅僅是出於商業設計經營成本的預算，而是從將用戶作為與我們同樣的人來考慮：所有的需求，真的必須滿足嗎？

需求理論，大概馬斯洛的層次之分最為有名。但是我這裡想特別說的，是人的一些稱為「慾望」的負性需求。老子說，看不慣那些使用靈巧機械的人，覺得這些複雜的器具，使得人們「有機心」，從而使得陰謀狡詐之徒，變多。其實人的陰謀狡詐，只是由這些器物投射出來罷了。

但是在軟件、網絡設計，因為工具的靈活簡便，而顯得成本特別低廉，嘗試機會特別高的時候，各種各樣的設計都呈現出來。大家都舉著「以用戶為中心」的旗幟，因為的確要從用戶那裡獲取商業價值，但是並不一定會從用戶真正的需要出發。網絡的人際信任度很差，難道是一朝一夕，一個網站導致的麼？木馬，病毒，到處做的像程序一樣的廣告陷阱，誰沒有上過當，吃過虧呢？至於色情網站，就是典型為滿足「慾望」而「設計」的。

在中文裡，「設計」是一種「埋陷阱」的意思，「設計陷害忠良」。我們做設計的人，是不是在「設計」「陷害」人呢？抓住用戶的弱點，然後打敗他？

從「以人為本」到「以更好的人為本」

設計有一段時間，是因為工業革命而興盛。有段時間，人們被機器的效率樂昏了頭，努力供奉機器，讓人去適應機器。後來終於因為垮了很多人，大家意識到，機器是我們自己設計的啊，我們怎麼可以讓自己適應自己造的物，而不讓物來適應我們呢？我們可以設計的，但我們本身可被改變的很少啊！於是我們進入了「以人為本」的階段。

但是「以人為本」似乎是不夠的，因為正如前面所說，人本身的需求，不是全部必須要被滿足的。為什麼許多宗教強調禁慾呢？因為人對慾望的控制，是人真正能夠獲得快樂的保證。人必須成為自己的主人，才不會讓慾望成為自己的主人。所以我們是要「以更好的人為本」，其實是「以幫助人良性地成長」，讓人「成為更好的人」為本。

在這個機器、人造物超過人數量的時代裡，為什麼我們越來越孤獨，越來越陌生呢？弗洛姆在《愛的藝術》裡，認為：「……現代人對自己、對同代人、對大自然產生異化。他變成一種商品，……人與人之間的關係從本質上來看是互為陌生的，是自動機器之間的關係……」我贊同這一點。同時，我也覺得，在我們設計的物中，我們迷失了我們自己。我們忘記了這些是我們造出的，而我們原本是更加具有靈氣的，人。我們應當將靈氣注入這些物的設計，而不是在這些物面前，丟失了自己的靈氣，把自己當成一個「機器」來拆卸，和整修匹配滿足一些所謂的「需求」。

認識我們自己

這裡再次說回「禪」，這個使用「減法」而讓我們人更加有人的感覺的智慧。

我們不能阻擋世界上一些糟糕的設計的誕生，就像古往今來，真正留在人們感動、讚歎記憶裡的建築物，是那麼的有限一樣，我們這個時代，雖然有著無數的設計從業者，每天互聯網上有無數新的頁面在不停地啟用，誕生，但是真正偉大的設計，還將是有限的。因為這些設計的作品，都是設計師心靈的投射，只有那些拋棄了繁雜，真正較好解決了那三種關係的設計師，才會有讓人欣然一笑的作品。

如果說中國的設計，具有一種「巧適」的特點，那麼它的優秀代表之一，就是我們日常使用的漢字。大家可以仔細觀察下，這種符號是多麼的精巧實用而且富有靈氣。

也許你要說，「禪」不是說一切要盡然捨棄麼？為什麼我們還要設計呢？我想，設計的活動本身，就是一個參禪悟道的過程，也是一個學習處理前文所說的三種關係的過程。通過「人適應機器」到「機器適應人」，我們在用機器探索自己的認知，行為領域的同時，也在探索自己與自己關係，因為「機器」是我們認知的投射，它們代表了我們的一個部分。我們怎樣與自己的部分相處呢？我們怎麼來擺佈這個關係，就是我們怎麼來「設計」這個「人機界面」。

綜上所述，我想我並不是要生硬地講兩件並不相關的事情扯到一起，而是希望表達出，在人與物的關係中，我們投射出的是我們自己對於人與人關係的思考，鑒於這些關係的處理，最終都是要達到人生問題的解決，而優良的設計，應當是有助於我們思考解決這些問題的。我們有信心相信，「禪」的思想，可以幫助我們在設計的中國風上，走的更遠。