2010年10月12日 星期二

極簡主義網站設計:寓豐富於簡單

譯自:Minimalist Web Design: When Less is More
原作者:Kayla Knight

作為設計師,我們都知道,一個極簡的設計可以實現漂亮的效果。

然而,很多設計師在實現上有些麻煩:要麼是沒有時間讓使用如此少的元素製作的頁面看起來漂亮,要麼就是最終的結果只是看起來「不完美」。

網上有很多關於極簡主義設計的文章,而本文的目的是幫你實現一個漂亮而不空洞的極簡網站設計

最重要的是,我們將展示一個小的極簡網站設計畫廊,這樣你就可以分析為什麼一些設計可以而其它的則不可以。

什麼是極簡主義設計

極簡主義設計已經被描述為最基本的設計,剔除了多餘的元素、色彩、形狀和紋理。

它的目的是使內容被突出出來並成為焦點。從一個視覺的角度來說,極簡主義設計意味著平靜和將思想帶回本真

這個設計運動始於瑞士,然後被用於多種媒體:圖形設計、建築、音樂、文學、繪畫以及最近的網頁設計。(拓展閱讀維基百科:極簡主義)

儘管極簡主義已經有幾十年了,早期的互聯網並沒有能夠展示它。即便除了旋轉的logo、滾動和鮮艷的色彩之外,網站設計依然常常是雜亂和咄咄逼人的。

我們將在本文中討論極簡網站設計的基本原理。但是即便你選擇不去追求極簡主義的審美,本文也能幫你簡化你的設計,無論你是哪種風格。

越簡單越豐富

正如提到的,極簡主義將最重要的內容帶到最前面並為用戶避免分散注意力。如果一個頁面有太多的元素,瀏覽者將迷惑於去看哪裡或誤解每個元素的優先級。一個極簡主義設計將焦點正好放到正確的內容上。

比如,在一個黑白設計上的任何色斑,都會引起用戶的注意力。色彩本身也將成為焦點。讓我們來看一個具體的例子:



之前你或許已經見到此類設計:純白背景,一個內容塊和一個圖形元素。

圖形元素使用色彩、紋理和形狀。很明顯這是頁面中最重要的元素,而且它代表了設計師的品牌和個性。

因為這個特殊的圖形元素的複雜性,該頁面中的更多內容會讓它不太醒目,顯得不太重要。保持內容到最小,設計師就實現了完美的平衡。

如何簡化內容

實現極簡設計或者簡化設計的第一步,不是簡單的去掉大部分圖片,而是要重新考慮內容並將其簡化到無遮蓋的需求。只有那樣才能讓頁面中最重要的元素實現其預期的效果。

就像你策劃任何其它網站一樣,寫下你需要的內容:logo、介紹、導航等等。去掉其它一切不需要的東東。盡可能的丟掉它們。

下面是一些你可能不需要的元素。請注意這僅僅是一個指導。你的確切的需求將依賴於你的具體設計。下面的一些元素對你的網站來說可能不是必須的。
  • 社區媒體的圖標或圖形,或者社區媒體部分
  • 宣傳員和補充說明或介紹
  • 「推薦,」 「流行」和「最新」列表(包括Twitter和RSS訂閱列表)
  • 多於3個主要部分的頁面(比如「介紹」 「關於」和「服務」)
  • 次級導航頁面

這裡的關鍵並非讓網站有較少的功能,而是去掉不是必要的元素(從而強調必須的元素)或將多個部分整合到一個更簡單的佈局(比如,通過合併你的社區媒體鏈接到「關於」或介紹性部分)。

你也可以分割內容到獨立的頁面,給予內容的每個部分更多關注。


如何簡化設計

現在輪到盡可能的簡化設計了。

簡約設計應該有較少的紋理、色彩、形狀、線條、內容或排版。然而,如果太直白,設計將會空洞。與其丟掉所有東西,不如通過給焦點添加一個重要的特徵來給設計一些感染力。

選擇焦點可能的樣式,並在你的設計過程中注意一下下面提到的技巧。

使用一個很棒的線框

通過理論下面的展示,我們看到一些設計師通過微妙的色彩填充、獨特佈局或有趣的圖形添加一些視覺趣味。然而,或許他們所依賴的最重要的元素,就是一個獨特的線框

為這樣的網頁創建一個線框需要一些額外的注意事項。通過正確的線框,你可以實現正確的層級和組織以及創建正確的視覺趣味。



要啟動一個線框,請按照以下步驟:
  • 確定你絕對需要的內容
  • 在一個列表裡面,區分內容的優先級
  • 給予你的列表繪製線框的草圖以實驗最佳的視覺層級

當作出了線框之後,考慮一下佈置以及視覺上的處理方法。譬如,你的logo使用了一種在其它地方不再重用的顏色,你必須說明原因。

擴展閱讀:從線框圖到最終設計

空白

空白實際上同義與極簡主義。

無論你的設計多麼有創意,一個缺少大量空白的極簡主義設計不是一個真正的極簡主義設計。這樣,一定要在元素周圍比你平時添加更多的空白。

空白對平衡即將出現在頁面中的少量元素是必要的。

平衡、對齊、對比

雖然大部分的佈局可以通過空白和良好的線框實現,還是要特別注意一下設計的基本原則。與極簡設計相關的三個最重要的因素是平衡、對齊和對比

要確保您的設計遵循這些原則,但並不需要一個補充的視覺輔助以看起來「完成」了。



請同時注意其它基本設計原理。回檢它們並實驗不同的選擇來實現最佳的效果。查看 「設計的原理」以獲取更多參考。

當過度設計成為一個習慣

過度設計有時會成為一種習慣。無論你多麼艱難的嘗試將一個設計保持簡單,它最終變得凌亂和複雜。要修正這一點,我們必須養成新的習慣。

試著在每個項目之前回顧上面的技巧並讓它們貫穿整個設計流程。每次集中精力開發一個習慣。比如,努力在將內容放到空白上之前減少和簡化它們。

如果您發現自己左右為難,「有什麼遺漏了」,可以先試著把東西拿出來,而不是加入一些新的東西。

極簡主義的每一個方面,需要不同的天賦。你將這些原理實踐的越多,你的設計就將變得越簡單。

另外,一旦你使用了這裡討論到的技術,看一下最終的產品並查看一下你是否能找到更進一步簡化這個結果的方法。

你可以專注於在設計過程中你不能確定的區域,而且你也可以向其他設計師詢問以指出你可能遺漏的元素。


極簡網站設計欣賞

下面是一個極簡主義網站設計的簡要展示。看一下我們討論的原理是如何實現的。同樣也可以看一下哪個打破了我們的指南,並思考它們為什麼還可行。

1. James Day Photo



2. Killswitch Collective



3. Lonely



4. DBushell



5. XPD.no



6. Toy NY



7. Joshua Serbus



8. Ah-Studio



9. Symour Powell



10. Icon Werk



11. Neil Wilson Architects



12. Non-Format



13. Zaum



14. Checkland Kindlysides



15. Blumenthal



16. Tink London



17. Proud Creative



18. Kimag



19. Bernat Fortet



20. All Day




一些趨勢

正如你能看到的,極簡主義網站設計也有一些清晰的趨勢。瞭解這些趨勢有助於在多個方面增強我們的設計。

我們應不僅僅能從其它設計師創造的佈局中獲得靈感,還要能有意識地打破這些趨勢以形成我們自己的創造性的方法。

接下來讓我們討論一下一些趨勢。

黑白設計

最值得注意的趨勢之一就是黑白色彩的廣泛應用。這是很明顯的:除紋理、形狀和內容以外,色彩也是應該被簡化的。但最近它可以做過頭,就顯得有點沉悶。

看一下上面展示的一些確定色彩的網站,看一下它們是如何從其它極簡網站中被突出出來的。同樣,思考一下即便是在如此強烈的色彩使用下它們是如何能夠保持極簡的。這裡是一個例子:



有趣的排版

基於排版網站設計和極簡主義緊密的聯繫到一起。

當設計師乏於用別的方法激發用戶,他們往往會利用有趣的排版。用排版作為唯一的視覺元素你甚至可以走得更遠。

這是一個大膽的技術,但本身仍然是一個趨勢。尋找保持獨特的同時讓排版增強設計的方法。



Flash

一個驚人數量的極簡主義網站設計是基於Flash的。通過這麼少的視覺刺激,一個設計可以從微妙的動畫獲益而不用被壓倒。

同時,Flash移除了設計流程中的某些限制。非傳統的線框、排版和其它元素可以比傳統方法更容易的實現。



結束

極簡主義網站設計出現多種形式,可是我們常常看到相同的形式重複了。趨勢可以變得咄咄逼人,而我們在理解一個趨勢可行的同時必須與模仿的衝動做鬥爭

無論如何,極簡主義可以是很漂亮的而且將會在未來幾年內出現,所以學習它的一些技術會不能相信的有益,無論對你的客戶或你自己的項目。

但是如果你對極簡主義風格不感興趣,這個教程和難懂的原理可以幫你簡化你的設計,總之這是件好事情。
文章提供: BAYSTARS DESIGN網頁設計公司

2010年10月11日 星期一

重新發現HTML表格

根據最近的一些實踐以及在和一些讀者進行關於HTML表格的使用問題溝通之後,決定寫這篇文章。總的來說,注意到由於誤導性信息,他們對於table的使用有種先入為主的厭惡。事實上很多人會說」看到永遠不應該使用表格」的說法,但是這絕對是錯誤的!這個建議只是針對使用HTML表格來定義網頁的佈局,但是表格在方便的排列數據信息行和列方面非常完美,而且如果你一定要在一個頁面上顯示表列數據,你就不得不使用它們!為什麼不呢?然而,在這種情況下,一些人無視了用於table的某些HTML標籤的存在並且不知道該如何正確的使用它們。

HTML有10個表格相關標籤。下面是一個帶有簡介的列表,但是首先,文檔要被正確的定義在HTML 4.01/XHTML 1或HTML 5下面:

定義表格標題(4, 5)
為表格的列定義屬性(4, 5)
定義表格列的分組(4, 5)
定義表格(4, 5) 定義表格主體(4, 5) \ 定義表格的表注(底部)(4, 5) 定義表格的表頭(4, 5) 定義表格的行(4, 5) 一個基本的表格結構如下: 它包含一個標題、頭部、主體和底部。正確的HTML元素順序是:  
程序代碼 程序代碼
定義一個單元格 (4, 5)
定義表格的表頭 (4, 5)
你也可以使用 和 來定義表格的列或為列分組:
程序代碼 程序代碼
下面是一個正確的表格結構實例:
程序代碼 程序代碼
                                                        
Table caption here
Head 1Head 2Head 3
Foot 1Foot 2Foot 3
ABC
DEF


在瀏覽器中的結果如下圖所示:



關於表格的一些技巧

根據w3schools的解釋和用法,在一個table定義中,元素必須出現在之前,這樣,瀏覽器就可以在接受到所有數據之前呈現表注了。另外,如果不是這個順序,將不能通過W3C的HTML4和XHTML驗證,無論你聲明哪種DTD。(瞭解更多)。
在 HTML 4.01 中,表格的align和bgcolor屬性不贊成使用,所以在HTML 5中不再有任何table的屬性被支持(事實上,在XHTML 1.0 Strict DTD中已經不支持」align」和」bgcolor」屬性了);
所有主流瀏覽器都支持 標籤,但是Firefox、Chrome 以及 Safari 僅支持 colgroup 元素的 span 和 width 屬性;
css中的empty-cells:show|hide 可以設定空單元格是否顯示邊框。注意,這個需要設置在table而不是td/th中。IE6中比較容易遇到該問題;
css中的border-collapse:collapse | separate 可以設置表格的邊框是否被合併成一個邊框;
css中的border-spacing屬性等效於table的cellspacing屬性。
為了實現現在所提倡的表現和結構分離的開發模式,前端觀察建議將頁面中所有與表現層有關的東東,都用CSS來控制,不用HTML自帶的屬性來控制頁面的表現,而table是最容易被忽略的一個。
關於table的更多詳細內容可以查看W3C的文檔: w3 Introduction to tables

最後留一個非常簡單的問題給大家,CSS的哪個屬性等效於table的cellpadding屬性?

文章提供: BAYSTARS DESIGN網頁設計公司

2010年10月10日 星期日

CSS3+HTML5 實現未來Web設計



CSS3 + HTML5是未來的Web,它們都還沒有正式到來,雖然不少瀏覽器已經開始對它們提供部分支持。本文介紹了5個CSS3技巧,可以幫你實現未來的Web,不過,這些技術不應該用在正式的客戶項目,它們更適合你的個人博客站點,Web 設計社區,或者不會有客戶向你投訴的場合。

1. 圓角效果


CSS3 新功能中最常用的一項是圓角效果,標準 HTML 方塊對象是90度方角的,CSS3 可以幫你實現圓角。
程序代碼 程序代碼
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;

甚至單個角也可以實現圓角,不過 Mozilla 和 Webkit 的語法稍有不同:
程序代碼 程序代碼
-moz-border-radius-topleft: 20px; -moz-border-radius-topright: 20px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-top-right-radius: 20px; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px;

所支持的瀏覽器:Firefox, Safari , Chrome
用例:Twitter
請參閱:
W3C Working Draft
Border-radius on CSS3.info
The Art of Web

2. 圖形化邊界



顧名思義,圖形化邊界就是允許使用圖片作為對象的邊界,語法如下:
程序代碼 程序代碼
border: 5px solid #cccccc; -webkit-border-image: url(/images/border-image.png) 5 repeat; -moz-border-image: url(/images/border-image.png) 5 repeat; border-image: url(/images/border-image.png) 5 repeat;

這裡,border: 5px 設定了邊界的寬度,然後,每個邊界的圖片定義告訴瀏覽器,使用圖片的多大一部分來充當邊界。邊界圖片還可以針對每一條邊單獨設置:
程序代碼 程序代碼
border-bottom-right-image border-bottom-image border-bottom-left-image border-left-image border-top-left-image border-top-image border-top-right-image border-right-image

支持的瀏覽器: Firefox 3.1, Safari , Chrome.
用例:Blog.SpoonGraphics.
請參考:
W3C Working Draft
Border-image on CSS3.info
Border-image in Firefox

3. 塊陰影與文字陰影



陰影效果曾讓 Web 設計師既愛又恨,現在,有了 CSS3,你不再需要 Photoshop,已經有網站在使用這個功能了,如 24 Ways website.
程序代碼 程序代碼
-webkit-box-shadow: 10px 10px 25px #ccc;-moz-box-shadow: 10px 10px 25px #ccc;box-shadow: 10px 10px 25px #ccc;

前兩個屬性設置陰影的 X / Y 位移,這裡分別是 10px,第3個屬性定義陰影的虛化程度,最後一個設置陰影的顏色。文字陰影也可以這樣設置:
程序代碼 程序代碼
text-shadow: 2px 2px 5px #ccc;

支持的瀏覽器:Firefox 3.1, Safari, Chrome (只支持 Box 陰影) ,Opera (只支持文字陰影).前3個數字表示紅綠藍三色的值,最後一個值代表透明度,另外,我們還可以使用 opacity 實現透明度(目前的燈箱效果多使用該技巧 – 譯者)
用例:24 Ways.
請參考:
W3C Working Draft
Box-shadow on CSS3.info
W3C Working Draft
Text-shadow on CSS3.info

4. 使用 RGBA 實現透明效果



目前,Web 設計中的透明效果主要靠 PNG 圖片實現(但在 IE 瀏覽器支持得並不好 – 譯者),在 CSS3,可以直接實現透明效果。
程序代碼 程序代碼
rgba(200, 54, 54, 0.5);
/* example: */
background: rgba(200, 54, 54, 0.5);
/* or */
color: rgba(200, 54, 54, 0.5);  color: #000;
opacity: 0.5;

支持的瀏覽器: Firefox, Safari, Chrome, Opera (opacity) 以及 IE7 (opacity, with fixes).
用例:24 Ways (RGBA).
請參考:
W3C Working Draft
RGBA on CSS3.info
Pure CSS Opacity

5. 使用 @Font-Face 實現定制字體



Web 設計中有幾種字體是比較安全的,如 Arial,Helvetica, Verdana, Georgia, Comic Sans (中文的,一般來說細明體是唯一安全的 – 譯者),現在,使用 CSS3 的 @font-face 可以自己指定字體,不過因為牽扯到版權問題,實際能用的字體也是有限的 (另外,體積龐大的中文字體也是一個不好解決的問題 – 譯者)。

語法如下:
程序代碼 程序代碼
@font-face {
font-family:'Anivers';
src: url('/images/Anivers.otf') format('opentype');
}

支持的瀏覽器: Firefox 3.1, Safari, Opera 10 and IE7 (需要一番周折,如果你不怕麻煩,可以在 IE 實現這個功能,請參考: make font-face work in IE )
用例:TapTapTap.
請參閱:
Fonts available for font-face embedding
Font-face in IE, making Web fonts work
Web fonts, the next big thing – A List Apart

雖然 CSS3 尚在開發中,上面提到的這些功能已經可以在部分瀏覽器中使用了,尤其是 Safari。不幸的是,Safari 並非主流瀏覽器。

Firefox 目前擁有大量用戶基礎,另外,即將推出的 Firefox 3.1 支持不少 CSS3 效果,因為 Firefox 用戶的升級積極性很高,因此,會有不少用戶可以提前體驗 CSS3 的新功能。

Google Chrome 今年剛剛發佈,它基於 Webkit 引擎,因此和 Safari 很相似,因為 Safari 主要用於 Mac 市場,Chrome 可以正好彌補 Windows 市場的空缺。

根據統計數據,2008 年11月止,44.2% 的用戶使用 Firefox, 3.1% 使用 Chrome, 2.7% 使用 Safari,意味著 CSS3 的部分功能已經可以支持近半 Internet 用戶,而在 Web 設計圈子,這個比例可能更高,大約有 73.6% (Blog.SpoonGraphics 提供的數據)

6. 負面因素

上面講述的這些 CSS3 功能會給你的網站帶來出色的效果,但仍有一些負面的因素必須考慮:

Internet Explorer:46% 的 Internet 無法看到這些效果,因此不要將這些東西用於重要的設計。同時保證,在這些效果不起作用的地方,有替代設計可用。

CSS 驗證問題:這些 CSS3 功能並非最終版本,目前不同的瀏覽器使用不同標籤實現這些功能,可能為你的 Style Sheet 帶來驗證上的問題。

臃腫代碼:因為不同瀏覽器要使用不同定義語法,最終將導致你的 CSS 代碼十分臃腫。
不當的使用: 對這些效果的不當使用,可能帶來一些不良後果,陰影效果尤其如此。

英文原文:Push Your Web Design Into The Future With CSS3
文章提供: BAYSTARS DESIGN網頁設計公司

2010年10月7日 星期四

關鍵字組怎麼選???

從業以來,不少客戶對於關鍵字的選擇都有其自己的想法,原因不出是預算的考量,但也有少數是來自於「關鍵字」的迷思。
有些客戶,真的只想用非常的「關鍵字」來做為他購買的關鍵字組,比如品牌、產業、服務等名稱,而數量就是這麼關鍵的三或四個字詞而已。這是個有趣的現象,我就把它稱做為「關鍵字的迷思」吧─非常關鍵、極度精準的字詞。
日前創市際市場研究報導提到:如果對搜尋的結果不滿意時,您通常會怎麼做?57.1%的網友表示他們會「換一個全新的關鍵字,或是修改目前使用的關鍵字」。看了這個數據後,各位親愛的廣告主,您還願意相信只要購買幾個「關鍵」字就能在關鍵字廣告的操作上看到最美麗的成效嗎?您還會覺得只要購買幾個「關鍵」字就能完全抓住您在茫茫網路世界中眾多的顧客需求了嗎?
我們都知道,網友的搜尋習慣百百種,無法預知他們會藉由搜尋什麼字串來引導他們找到自己的所需,於是,我們常常建議客戶,在關鍵字組的購買上,一定是要精準搭配廣義。精準的字串能為廣告主帶來最直接的目標客群,而廣義的字串則為廣告主引導有機會的需求者到來。兩相合宜的組合,就像一加一會大於二的市場效應,當消費者不論怎麼樣的變換字組來做搜尋,您的廣告只會有越多的機會被曝光,而不是永遠被最關鍵的那幾組「關鍵字」給挶限住。
「成交絕對不會來自於一、兩組字」,請相信這句箴言。

文章提供: BAYSTARS DESIGN網頁設計公司

2010年10月6日 星期三

HTML5拿什麼取代Flash?



最近關於HTML5吵得火熱,很多人認為HTML5出現會秒殺Flash,以至於在各大web前端開發論壇吵得不可開交。論壇裡三言兩語說的不夠 盡興,只好在自己一畝三分地裡敞開了說說。也當一次神棍,展望一下web前端開發的未來。首先這裡所說的HTML5也不僅指HTML5本身,而是泛指HTML5、CSS3、 JavaScript以及新的瀏覽器API所包含的整 個web端技術。

誰需要HTML5?

Google最需要!Apple的Jobs也需要。但這兩個肯定各懷鬼胎。微軟無所謂了,反正他還有Silverlight。

Mozilla/Firefox非盈利組織,目標可能會高尚些,是w3c標準就要支持。Opera那點瀏覽器市場佔有率估計還沒敢有太多想 法。

Google的雲計算帝國就差一個支持 RIA(Rich Internet Applications)富互聯網應用的客戶端了,試想 HTML5得到普及,更多的應用轉向BS模式時,微軟帝國的桌面軟件生態環境必定受到很大威脅,垂涎多年的Google一定是最大受益者。當在一台操作系 統免費的電腦上使用和MS Word差不多功能的免費Google Doc時,你還會掏錢買微軟的Word嗎?當你所有的辦公應用都只需要打開瀏覽器窗口 時,你還會花錢買操作系統嗎?Google的Chrome OS操作系統界面已經說明了這個意圖。

Jobs也需要HTML5,他是打著小算盤,想讓瀏覽器原生支持視頻音頻,這樣iPhone、iPad就不用嵌入Flash,Jobs當然 不能讓Flash進iPhone OS,要不然App Store裡的遊戲誰去買?同時,如果大量的應用都能基於瀏覽器實現時,用戶就不會被 Windows的桌面應用套牢了。漂亮的Mac電腦誰不喜歡。

他們選擇 HTML5都是為了更大野心,期望HTML5帶來整個軟件生態環境的改變,同時避開不受自己控制的Flash。

Macromedia和後來的當家Adobe把握住了互聯網應用的發展需求,不斷的完善的Flash,使之已經超越了瀏覽器本身的功能。各 大瀏覽器廠商也看到這種應用的需求,不甘於一個本該瀏覽器實現的功能,由一個幾兆大小的 Plugin實現了,並玩的風生水起。於是不遺餘力的推進 HTML5,並且矛頭直指Flash。

用戶想要HTML5嗎?用戶要的不是技術,是應用,是體驗。如果你能拿Ajax實現一個開心農場,我想沒誰會在乎它是不是Flash做的。

開發者想要 HTML5嗎?那需要一個成熟的HTML5+CSS3+JS的開發環境,需要各個瀏覽器提供統一的用戶體驗,即標準的完全兼 容。還需要增加新的學習成本。

Flash 的優勢?

Flash比HTML5強在哪?性能,功能?如果說HTML5將擁有和Flash所有內置對像類似的DOM 呢,還有GPU的2D、3D加 速呢?這不是沒可能,畢竟HTML5還只是草案。當然Flash也能不停的更新。

開發群體:

Flash的優勢是在開發人員上,十多年的積累,有眾多優秀的藝術家、程序員和互動設計師集中在Flash平台上做互動媒體開發。也 使無數的類庫有了AS版,如FLARToolKit,Touchlib,OpenCV這些互動、圖像分析的c++庫都移植到了Flash平台。在RIA應 用上有相對成熟且開源的Flex框架,越來越多的企業在嘗試使用Flex替代Ext等 Ajax框架,為客戶提供更好RIA應用體驗。

持續發展:

FlashPlayer 是一個封閉的系統,是由Adoeb獨家控制,相對於開放的HTML5標準這是弱勢,也是技術上的優勢,它可以很靈 活,可以隨時加入新技術,新功能。而 HTML5是一個公開標準,既然是標準就意味著不會經常改動。Flash的改進升級只需要用戶升級 FlashPlayer插件,插件的升級相對用戶來說,是輕量級的。HTML標準的改進意味著升級瀏覽器,這是相對重量級的用戶操作,尤其是還有很多人不 明白什麼是瀏覽器。

HTML5開放標準一旦確定下來,就會有一個很長的使用週期,今天看是足夠先進的功能,十年後呢。就像當年我們用著 HTML4+CSS2+JS沾沾自喜以為足夠表現Web應用時,誰能想到今天Flash不斷改進所開拓的天地呢。或許十年後我們又該討論HTML6秒殺 Flash的話題了。

超越web應用:

如果當時SUN能重視Java Applet,或許就沒有Flash的今天,SUN也不會淪落到被收購的境地。而如今Adobe AIR更 是讓Flash超越Java Applet,讓Flash超越了web,脫離了瀏覽器。Flash到如今功能不斷增強,在多媒體領域也在不斷地壓縮自家老 大哥Director的應用空間。多點觸摸、人臉識別、Socket通訊同步、AR增強現實、實時視頻等等功能在Flash平台上的實現,讓越來越多的互 動多媒體項目採用Flash方案。

希望Adobe繼續能擴展Adobe AIR平台的功能,提高性能。能有越來越多的跨平台桌面應用在AIR上實現。

Flash 的劣勢?

FlashPlayer版權私有。
swf文件的內容相對封閉,搜索引擎不友好。

插件的安全隱患。
相對與Ajax技術的學習曲線及學習成本。

FlashPlayer 94%裝機率!=100%。
iPhoneOS明確不支持Flash,而iPad首日12萬的訂單,預計將會開啟一個大市場。

不支持3D硬件加速。FlashPlayer如果支持3D硬件加速,必將重寫現有的2D矢量引擎,鑒於ShockWave 3D的 表現,FlashPlayer 硬件3D,很難有很好的用戶體驗!

HTML5拿什麼取代Flash

功能:

HTML5目前還只是草案,從已提交的內容來看,增加了許多更具語義的標籤,新的標籤意味著在DOM中增加新的類,如果把瀏覽器比做一個大 的 Flashplayer,HTML5無非就是在增加新的類,新的API。然後由JavaScript來調用這些API。

如果HTML5要完全取代Flash,至少要提供和Flashplayer10相似的功能。

這應該不是問題,添加WebSocket 、WebSQL、WebGL……甚至WebQt、WebMFC都是可以無盡暢想的。或者乾脆把瀏 覽器就做成一個大虛擬機,完成Java的桌面遺願。如果有足夠的需求動力,這些都不是問題。

性能:

在很多 HTML5激進派的文章裡,都痛指目前Flash的效率低下,導致瀏覽崩潰。真的是Flash效率低到如此不堪嗎?肯定不是,只是 Flash的濫用和參差不齊的Web前端開發人員造成的。同樣如果用IE的JS引擎寫一個Ajax版的XX農場,如果所有頁面廣告動畫都用JS來寫,我想 那才叫效率低下。如果真的Flash效率低,為什麼那麼多網頁遊戲都不是Ajax做的呢?為什麼很多優化的很好的Flash3D遊戲場景都很流暢,而一個 2D的XX農場就能拖慢你的酷睿2呢?不明真相的半吊子開發人員總是把瀏覽器不響應和崩潰歸結於Flash效率低下。
所以未來HTML5要取代Flash 必須有一個高效的2D/3D圖形文字渲染引擎,和一個高效的JavaScript引擎。這樣 才能帶來更好的用戶體驗。這些,眾瀏覽器廠商都準備好了嗎?Chrome和Opera似乎正在走這條路。

兼容性:

HTML4標準已經十多年了,今天我們還會寫下fxckIE6的CSS樣式名。瀏覽器的兼容性會是最大的問題,尤其是加入n多特性後的 HTML5和CSS3。IE,Firefox,Chrome,Safari這些瀏覽器背後的大佬們,怎麼去協調呢?這有個矛盾,開發差異化的產品,卻要提 供同質化的功能。JS性能、標籤瀏覽,同步收藏,插件這些提高用戶體驗的功能,都是這些差異化的方向。如果再出現類似ActiveX這類IE only的 東西,那還不如維持HTML4這種方式不變。

開發模式:

Flash IDE將無數優秀的藝術家、UI設計師和互動程序設計師團結在一起,最終成就了Flash,這也與Macromedia和 Adobe在圖形設計和互動設計群體中的號召力不無關係。

HTML5的互動會將JavaScript提高到一個新的高度,這必將需要一個成熟的開發環境。繼續DW+Firebug?或者DW升級為 全新的HTML5互動開發IDE,或者微軟VS來幹這件事,或者是Eclipse?

成熟的開發環境才能聚攏人才,才能激發無窮的創造力,帶來更多的內容。豐富的內容自然帶來更多用戶。

部署:

這是最重要的一個問題,沒有這一步,一切都是零。

Flash新版本怎麼部署?在90%多桌面佔有率的基礎上更新插件就OK。HTML5怎麼部署,更新瀏覽器,這個有點難,看看頑強的 IE6。聽到有人建議微軟在系統 ServerPack裡包含IE更新,只能說這想法很好,但是反壟斷的大錘一定會把微軟砸死。

那怎麼引導用戶去升級瀏覽器呢?對於互聯網「Core User」來說不是問題,目前支持HTML5和CSS3部分特性的Chrome開發 版,很多人都在用了。但是那些「Light User」呢,可能連天天看網頁用的這個窗口跟瀏覽器是什麼關係都不明白。

這需要一個HTML5的殺手級應用去引導,「Light User」幾乎不會以技術為導向去升級瀏覽器的,他們只會以應用需求為導向去升 級。比如YouTube不再支持IE6用戶,這樣喜歡YouTube視頻的用戶會去升級IE6再來訪問。用戶不會是因為IE6的HTML標準兼容差而選擇 更新IE6,這是必然的。

那HTML5的殺手級應用在哪裡呢?或者說都有Youtube這樣的影響力和號召力嗎?而沒有這種號召力的網站,誰會貿然率先支持 HTML5來要求用戶升級瀏覽器嗎?這些網站之間必定會陷入囚徒困境中,在重複的囚徒困境中,博弈被反覆地進行。最終才會全面進入 HTML5時代。這個 過程或者很短,也可能很長。畢竟現存的Web前端還沒到不堪的地步,反倒是由於Flash這些插件和jQuery這些JS框架弄的有聲有色。

總結
  • HTML5不是用戶應用的迫切需求,更多是廠商試圖改變軟件生態格局的戰略需求。
  • HTML5的兼容性鑒於各大瀏覽器的以往表現,有待觀望,不宜立即遷移應用。
  • HTML5需要一個成熟完整的開發環境,記事本+瀏覽器對付不了。
  • HTML5功能的暴增,瀏覽器必須有一個高 效的圖形引擎和腳本引擎。
  • HTML5需要殺手級應用來吸引和引導用戶升級瀏覽器,最終完成HTML5終端的部署。
  • Flash是一個不斷在發展的技術,有很強的靈活性,HTML5不可能完全取代Flash,眾多的開發人員也不會斷然拋棄Flash。
原文: BLUEIDEA
文章提供: BAYSTARS DESIGN網頁設計公司

2010年10月5日 星期二

五個最常被誤用的META值

「走一步路就可到的事情,跟走三步路才能到的事情,你喜歡做哪個?」這是我最常講的一句話,也是我們在優化網頁HTML程式準則之一。在「修身」的理念裡,其中重要的一個環節就是要優化或簡化我們的HTML程式碼。在過去,許多SEO網站上都會列了一堆meta,讓你在裡面列了一長串的Meta值,但事實上列這麼多,Google早就表示"I don't care",所以你列了這麼多的Meta只是徒增加網頁大小進而影響讀取時間。那哪些meta值是我們最常誤加,或是加了沒有效果的呢?
1. keywords
對於Google或是Bing搜尋引擎,最多人使用的無效Meta值莫屬於keywords。Google很早就表明忽略Meta keywords,當然,現在你身處在大多數人用Yahoo的台灣,到明年中前你還是得設定Meta keywords,但如果你的網站是專注於海外市場,你是可以不需要設定meta keywords的!
2.robots
"robots"的Meta值是用來告訴搜索引擎派來的機器人,在這頁上面要執行怎樣的動作。如果沒有設定這個Meta,那它的預設值就是"index,follow"。而且較佳的作法是使用"robots.txt"文件,讓機器人來的時候先看過這份文件,再決定哪些網頁要爬,哪些網頁不用爬,所以如果你的寫法也跟上面一樣,就把這行槓掉吧,沒有意義。
中場引申閱讀:
Google教你如何設定meta中robots的值
robots.txt編輯交戰手冊
3.revisit-after
很多SEO都會告訴你,這個meta一定要設定,因為它是告訴蜘蛛幾天要來爬一次你的網站。事實上這是一個過時的meta值,真的要提醒蜘蛛幾天要來檢索一次,比較好的作法是設定XML格式的Sitemap,並在"Change frequency"中設定合適的更改時間。這一行也是可以槓掉的無效meta。
4.expires
許多介紹Meta屬性的SEO網站都稱它為:到期時間。事實上它應該是指定這個網頁生成的時間,在過去,這個Meta的設定是避免使用者在讀取時,所讀取到的網頁是暫存在電腦裡,尚未被修改過的檔案,而造成資訊的錯誤。但是現在的技術比較少有這個問題了,同時這個Meta屬性值也是能夠在XML格式的Sitemap中可以設定的。你寫了這一行了嘛?槓掉它吧!
5.REFRESH
關於這個行Meta,很常被當做是作弊的象徵。因為許多黑帽SEO最常的作法就是做一個假頁,上面塞滿了黑帽SEO的技巧,讓搜索引擎收錄後,再利用這行Meta跳轉至客戶的網站。事實上這招目前只有在台灣的Yahoo搜索引擎僅有「短暫」的功效,而且就算它不斷的刷新頁面,也不會被Google(cookie-based)判定為多次的頁面瀏覽。所以槓掉它吧!

以上是五個最常被誤用的meta屬性,其他像是有 或是lt;meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Wednesday, 20-Jun-2007 22:33:00 GMT; path=/">
這一類的,平常比較少人會加,再這邊也就不解釋了,因為他們也是屬於無用Meta。其實meta在SEO所佔的權重比例真的不是重點,它的重點是在於透過一些具有Semantic(語意)屬性的Meta,讓搜索引擎好收錄或分門別類,打造Semantic Web(語意網)方便使用者檢索。你會發現許多比較大的網站,他們事實上並沒有設定一堆meta,他們最多只使用了這兩個最基本的Meta值:
有這兩個確認網站的編碼以及讓機器人了解這網頁的簡單內容,這樣的meta設定便足夠了。

文章提供: BAYSTARS DESIGN網頁設計公司

手繪風格在現代網頁設計



當涉及到網頁設計往往完美,豐富多彩,四四方方的設計獲得晉級,但是,實際情況是不同的,因為它是很難找到一個完美的物體的形狀和完美的色彩在我們的日常工作。為了實現一 獨特 和交際設計我們需要考慮更多的創造性的方法。例如,我們可以得出我們自己的網站-或至少它的某些部分。

其主要目的手繪元素在於他們有能力 傳達一種個性和個人說明 在完美的時候,四四方方和圓形元素隨處可見。他們看起來不同,他們可以使一個網站看起來不同。這就是我們通常後擺在首位。

而事實上,這樣做往往:是否一個博客,商店,廣告,私人網頁,或者一些合作項目-不管是否使用Flash或(X)HTML的。這個職位介紹 新鮮的例子手的繪畫風格在現代網頁設計。網站所有截圖可以點擊並連接到網站從網站中看的更仔細。

到這原始出處網站觀看更詳細的介紹(英文版)..
文章提供: BAYSTARS DESIGN網頁設計公司