2010年網(wǎng)頁設(shè)計趨勢：現(xiàn)實生活中的隱喻和CSS3的適應(yīng)

????? 現(xiàn)代的網(wǎng)站有很大的優(yōu)勢，如靈活性，跨瀏覽器的兼容性和個性化，但他們也變得越來越簡單和直觀。這樣做，是通過微妙的可用性增強(qiáng)應(yīng)用程序，無論是從網(wǎng)絡(luò)本身或離線交互系統(tǒng)繪制。在今天日益復(fù)雜的網(wǎng)絡(luò)，而互聯(lián)網(wǎng)的使用越來越簡單。

???? 在這篇文章中，我們將探討一些新的設(shè)計方法和技術(shù)，你可能想開發(fā)自己的項目。我們將目前的不尋常的或非常規(guī)的設(shè)計方法，并嘗試了解什么是真正對他們感興趣的，我們?nèi)绾螌⑺鼈儜?yīng)用到現(xiàn)代的網(wǎng)頁設(shè)計。更具體地說，我們將討論以下內(nèi)容：現(xiàn)實生活中應(yīng)用到網(wǎng)頁，隱藏的復(fù)雜，微妙的互動，上下文敏感的導(dǎo)航和快速適應(yīng)對CSS3的隱喻。

1?，F(xiàn)實生活中的隱喻和隱藏的復(fù)雜性

也許現(xiàn)代Web應(yīng)用程序和服務(wù)的最顯著特點之一是，他們提供豐富的用戶體驗。用戶在這些系統(tǒng)之間的互動變得非常簡單，直觀，甚至“人?！钡@種直覺意識并不僅僅從良好的視覺設(shè)計或更好的傳統(tǒng)原則的適用來的信息架構(gòu)。我們已經(jīng)看到更多的Web設(shè)計中的設(shè)計元素或模仿現(xiàn)實生活中的隱喻或隱藏，讓用戶進(jìn)行選擇的復(fù)雜性更有限，更簡單的決定。

按鈕 是第一個發(fā)展的良好范例。在今天的網(wǎng)頁設(shè)計，按鈕的外觀和互動就像在現(xiàn)實世界中的按鈕的用戶。按鈕往往顯得非?，F(xiàn)實的。他們站出來，有鮮明的色彩，而且非常敏感：當(dāng)超過或點擊一個按鈕，用戶就徘徊，他們也經(jīng)常是視覺反饋。如果您在形狀方面比較有（自動柜員機(jī)按鈕這些按鈕，顏色和響應(yīng)），你會發(fā)現(xiàn)一些驚人的相似之處。

預(yù)示 是一個關(guān)鍵的本土設(shè)計元素的質(zhì)量。它指的是一個對象或環(huán)境，允許用戶執(zhí)行某些操作方面。正如在他的著作“日?，嵤碌脑O(shè)計唐納德諾曼指出，”賦提供有力線索事物的運(yùn)作。當(dāng)預(yù)示采取利用，用戶知道該怎么做，只要看看：沒有圖片，標(biāo)簽或指示要求。越是熟悉的設(shè)計元素在頁面上看起來，就越容易為用戶與它相關(guān)聯(lián)的一些具體的實際應(yīng)用程序或任務(wù)。

這種做法并不只涉及到號召性動作按鈕：當(dāng)你將看到下面，它反映的是，適當(dāng)?shù)谋扔鱽肀磉_(dá)的意義和一般的某些設(shè)計元素的目的。顯然，這種方法降低了用戶交互的復(fù)雜性。另一種方法來實現(xiàn)這一目標(biāo)是通過最大限度地減少元素的外觀，或者更準(zhǔn)確地說，給他們一個不同的環(huán)境，還是減少在頁面上的視覺重量。

越來越多的網(wǎng)站變得過時，笨拙，無法使用與陡峭的學(xué)習(xí)曲線擺脫接口。查找出直觀的，本土的隱喻。例如，滑塊，有時會比一般選擇更好的工作領(lǐng)域（如顯示的預(yù)算和時間框架）;切換的開關(guān)旋鈕，可能更適合比復(fù)選框和復(fù)雜性可以被隱藏，以簡化用戶交互?，F(xiàn)代Web應(yīng)用有吸引力的，直觀明了。

現(xiàn)實生活中的隱喻

弗雷德佩里
弗雷德佩里的電子商務(wù)商店有一個現(xiàn)代和優(yōu)雅的外觀，傳達(dá)品牌的關(guān)鍵特性非常好。每一個樣式是作為一個在墻上的海報，而不是像普通的商店，但氣氛是相當(dāng)熟悉的用戶。一個現(xiàn)實生活中的比喻非常規(guī)但有趣的應(yīng)用到電子商務(wù)網(wǎng)站。

和C. L.霍洛韋
一個由康迪斯霍洛威類似的方法。她額上的“墻”，她的作品;水平導(dǎo)航是一個通過一個藝術(shù)畫廊漫步比喻使用。

滴水脂肪
這款T -恤衫商店上使用機(jī)庫的衣服現(xiàn)實生活的隱喻。這是一個不錯的主意，如果您沒有在您的商店的項目太多，但如果你有困難的數(shù)百種產(chǎn)品。

Gowalla
而不是顯示的功能在應(yīng)用程序的名單或解釋它如何在一個錄像作品，Gowalla顯示一個例子，它使用真實生活場景來解釋該應(yīng)用程序。用戶在幾秒鐘內(nèi)得到的想法。插圖可能不完美的，可能看起來有點不一致，但他們所服務(wù)的重點。為充分說明認(rèn)為，在圖像上點擊以下。

XHTML的咖啡館
XHTML的咖啡不承擔(dān)與無生命的促銷內(nèi)容塊的用戶：相反，它適應(yīng)一個很好的現(xiàn)實生活中比喻的形象。有吸引力的，令人難忘。

CulturedCode：狀態(tài)
該名單上的文化代碼開發(fā)者在他們的狀態(tài)頁面航班到達(dá)他們目前的任務(wù)。列表中的每個項目都有一個描述，派出會員和地位。這些經(jīng)典的設(shè)計類似于一個航班表在機(jī)場經(jīng)常見到。一個有趣的使用方式為Web設(shè)計的實際生活中的比喻。它不會工作在每一個方面，但它非常適合在這里。

Builditwith.me
雖然這個網(wǎng)站可能會先看看有點普通，什么有趣的是在右上角的區(qū)域切換開關(guān)?；旧?，它是一個復(fù)選框，用戶可以選擇是否對他們的人應(yīng)該已經(jīng)有了一個好主意尋找。但是，而不是使用傳統(tǒng)的復(fù)選框，設(shè)計者決定一個切換的開關(guān)旋鈕。雖然這可能是一個在總體上是好的想法，目前還不清楚，如果這個工程。它實際上可能刺激用戶誰假定它是一個滑塊。這種相互作用的經(jīng)驗是不同的比你得到一個滑塊，和相當(dāng)類似于一個開關(guān)。

哦！媒體
其中一項有吸引力的，突出的，有光澤和可點擊的按鈕的例子很多。小圖標(biāo)按鈕的右邊是一個行動或進(jìn)展很微妙的比喻，難以察覺，但它的作品。簡單而引人注目。

蘋果
iPhone的用戶界面有一個簡單的通斷其喜好開關(guān)。這個比喻是類似于許多現(xiàn)實生活中對象的按鈕，是打開和關(guān)閉一個簡單的開關(guān)設(shè)置。直截了當(dāng)。

隱藏復(fù)雜性

SlideDeck
幻燈片是由本質(zhì)上是一個不錯的方式來隱藏復(fù)雜性，因為他們在一個緊湊的重組互動區(qū)多個信息點。 SlideDeck是一個設(shè)計解決方案，集成到一個元素的橫向和縱向滑動導(dǎo)航很好的例子。布局是干凈的，并提供了很好的概述可用的功能。

諾索特羅斯
諾索特羅斯有一個有趣的和非常規(guī)的導(dǎo)航方法。它非常巧妙地減少，減少導(dǎo)航唯一有意義的圖標(biāo)的復(fù)雜性。該博客頁面已為6個圖標(biāo)的導(dǎo)航選項的博客服務(wù)。有一次，一個用戶點擊圖標(biāo)，選擇該類別，為其他類別的圖標(biāo)消失。這將是有趣的工作，這種做法是否會在更大的規(guī)模。 Calicott 采取了類似的做法，盡管有不同的設(shè)計。

Gmail的
密切關(guān)注小事情可以有更直觀和本地的用戶體驗。如果你正在編寫一個在谷歌的電子郵件服務(wù)的電子郵件和附加一提，你是一個文件到你的郵件，但別忘了它附加，系統(tǒng)給你點了一個友好的警告信息。這是一個擁有用戶的最佳利益為依歸的應(yīng)用很好的例子;之間的良好和優(yōu)秀的Web應(yīng)用的差異。如果你想允許稍有夸張，你可以比較這一個客戶到郵政辦公室走路一包，經(jīng)過短暫的分心的友好工人提醒客戶發(fā)送包了。

KBB
KBB，為尋找和銷售新車和二手車資源，提供了一個原預(yù)先寫好的電子郵件模板零售業(yè)主。如果用戶有興趣，他們可以輸入他們的第一個和最后一個名字，街道地址和電話號碼，一鍵發(fā)送電子郵件。當(dāng)然，可定制的信息。這是一個Web應(yīng)用程序的繁瑣任務(wù)需要仔細(xì)照顧的好榜樣，提供了一個簡單的一鍵解決用戶。

Moof
Moof需要與聯(lián)系方式類似的方法。目前還不清楚是否增加或減少其方法的轉(zhuǎn)換率，那將是很有意思，就這一個可用性測試。

Livestream
許多Web應(yīng)用程序有一個定價方案和特性一樣，Livestream。這種設(shè)計，不過，該計劃將明確傳達(dá)適合特定類別的用戶最好的。公告所附的幫助工具提示“流”功能，并在該表底部的紅色緞帶。黃色的按鈕響應(yīng)，也提供視覺反饋。一個簡單的，有吸引力的設(shè)計。

值得注意的應(yīng)用：定價表
突出最流行的計劃是個好主意，因為這有助于使用戶無需檢查整個表的決定。這是一個利用社會驗證比喻很好的例子：當(dāng)用戶在社交場合，他們會尋找其他人來看看如何做人。這不是一個自覺的過程，但它可以幫助我們來正視困難的決定。

Mailchimp
為什么用的功能，而不是讓用戶簡單地做出他們的決定基于應(yīng)用程序的最重要的特征顯示幾十個幾十個計劃？ Mailchimp允許它的用戶只選擇通過選擇其用戶數(shù)在每月的計劃。所有其他的定價計劃可用，也不過是背后的復(fù)雜性小“查看所有價格計劃”鏈接大多數(shù)用戶隱藏。這可能是不可避免的舉措，因為Mailchimp已字面上與組合數(shù)十個品種的定價方案：展示他們一下子將作出選擇太困難，導(dǎo)致一些用戶決定癱瘓。

單一登錄和注冊
降低復(fù)雜性，是一種合并為一個單一功能的多個相關(guān)的功能簡單的解決辦法。例如，而不是兩個單獨的聯(lián)系，并為登錄并簽署了網(wǎng)頁，您可以為用戶提供一個單一的“登錄或馬上注冊”按鈕，同時為目的。將更新的形式通過JavaScript后，用戶選擇一個單選按鈕。對于這種形式登錄，請注意，“提交”按鈕說：“登錄”，并有一個鏈接，找回丟失的密碼。對于注冊的形式，為密碼字段標(biāo)簽提示用戶“選擇一個密碼”和“注冊”，并接受服務(wù)條款。

另一種方法是提供兩個輸入域，標(biāo)記為“電子郵件”和“密碼”，然后提出一個“還沒有帳號嗎？注冊了！“鏈接旁邊。這兩種方法將工作的優(yōu)良新訪問者和回訪。

Quiksilver的
Quiksilver的要求其潛水衣客戶提供關(guān)于其重量，高度，風(fēng)格和功能的信息第一。而不是顯示的幾十個可供選擇，它為用戶搜索過濾器，只顯示那些項目，目前已經(jīng)上市，符合用戶的個人資料。一個隱藏不必要的信息和對重要的東西集中很好的例子。

2。微妙互動

雖然往往是相反的主張，我們認(rèn)為，閃存有它在現(xiàn)代網(wǎng)頁設(shè)計的地方。今天，我們觀察之間的HTML / CSS的網(wǎng)站和Flash網(wǎng)站的關(guān)注明確分工。雖然HTML / CSS的已成為事實上的基于文本的網(wǎng)站標(biāo)準(zhǔn)，對信息消費為重點，F(xiàn)lash是支配其廣泛的視覺和音頻效果和豐富的用戶交互娛樂和多媒體網(wǎng)站。

但是，這并不意味著，HTML / CSS的網(wǎng)站僅限于平原，單純的用戶交互。事實上，相反的，似乎是真實的。我們看到更多的HTML / CSS的網(wǎng)站越來越互動，好玩的，引人入勝。更多動畫是被用于視覺反饋（例如，在鼠標(biāo)懸停和點擊次數(shù)）和視覺效果正在為一個更敏感的用戶體驗使用。當(dāng)然，這些影響依賴于JavaScript庫，它在后臺燃料的互動層。

盡管如此，基于CSS的網(wǎng)站設(shè)計者傾向于避免極端的交互性，而使用微妙的，精致的影響甚少。其設(shè)計使用的交互性，支持用戶以驚人的互動和推卸三維效果和通航建筑物絕大多數(shù)用戶的不便。

CoTweet
CoTweet有一個干凈的，有吸引力和響應(yīng)按鈕很好的例子。雖然懸停效果是微妙的，點擊相應(yīng)按鈕是驚人的。注意在大小和文本的“注冊”和“了解更多”按鈕色差。還要注意的醒目色帶上的“向上”的形式，其中突出的標(biāo)志，但并不突兀。這可能是一個非常微妙的變化，但加入小圖標(biāo)的號召性詞語按鈕可以是非常有益的：例如，加一個鎖圖標(biāo)（出于安全的比喻），以溝通，在認(rèn)為是安全的日志。

WeightShift
WeightShift需要通過展示一個更加互動的方式在其導(dǎo)航選擇一個有趣的設(shè)計方法。最近的工作是顯示在一個中心的布局突出的信息框，與有相關(guān)圖片的背景。當(dāng)用戶從一個項目到另一個導(dǎo)航，背景的變化，也。請注意，該信息框是半透明的，一個好的設(shè)計技術(shù)。

賈克斯葡萄園
第1部分中，我們展示了這個網(wǎng)站，但它完美地演繹了本節(jié)的點，也。此酒店網(wǎng)站有一個有趣而獨特的水平導(dǎo)航，這是您開始瀏覽時觸發(fā)的葡萄酒目錄。無論是背景圖片和幻燈片的說明葡萄酒水平。簡單的CSS和JavaScript的使用。一個美麗動人的設(shè)計。

費爾勒彼得
費爾勒最近重新設(shè)計是非常性感。友情鏈接，內(nèi)容塊和插圖巧妙地作出反應(yīng)，鼠標(biāo)懸停在不同的方式：不同的透明度，動畫，突出環(huán)節(jié)，改變背景圖像，衰落到另一種顏色，顯示評論或修改導(dǎo)航。設(shè)計是非常邀請，參與和響應(yīng)。費爾勒的設(shè)計也使用鍵盤導(dǎo)航，網(wǎng)頁設(shè)計中的另一個產(chǎn)業(yè)的共同發(fā)展 我們談到了在第1部分。手下來，一個美麗的一流的設(shè)計。

燃料公司品牌
官方網(wǎng)頁的燃料品牌公司有一個漂亮的動畫種類：圖像上懸停規(guī)模的增加，改變背景圖片，幻燈片是用于導(dǎo)航和交互式工具提示和其他效果是顯而易見的?；有运坪跖c官方公司網(wǎng)站受歡迎。

馬爾科姆讀顧問
另一種微妙的互動有趣的設(shè)計技術(shù)：三個圖像自動顯示在頂部垂直滑動，更新在頂部橫向?qū)Ш降谋尘皥D片，也。不支持Flash是用在這里。

LifeGear樣機(jī)
一個模擬的一個互動產(chǎn)品頁面。許多電子商務(wù)的網(wǎng)頁正在得到更多的互動產(chǎn)品展示，太，例如，360度全景或像這樣的一個互動的指示。

Carsonified：100件
Carsonified集成了一個微妙的色彩過渡和淡入出效果迅速顯示有關(guān)本次會議的發(fā)言者的信息。

和諧共和國
在這里，我們有互動懸停效果和豐富的字體，而且管理和笨拙的文字，因為該網(wǎng)站的加載時間長的閃光的性質(zhì)。這個網(wǎng)站可以很容易地被設(shè)計與純JavaScript，可以更好地復(fù)制和粘貼文本的，靈活的字體大小和本地的鼠標(biāo)交互（即從指針更改為手工上的鏈接懸停）。很抱歉，但Flash不屬于這里。它比較屬于 這里例如。

弧90：我們的團(tuán)隊
然而，另一個是“關(guān)于”互動網(wǎng)頁設(shè)計元素的例子。照片取代懸停：但游客還可以輕松地過濾他們的隊員占領(lǐng)。圖片過濾掉褪色為灰度。

S的P D
另外一個不錯的微妙懸停效果。在這個組合的頁面，每個項目填寫一個細(xì)胞。標(biāo)頭有18個在所有細(xì)胞。當(dāng)用戶超過一徘徊，它擴(kuò)展到填補(bǔ)地區(qū)的6個相鄰的單元格，顯示有關(guān)選定項目的補(bǔ)充資料。在這里沒有使用Flash。一而再，再而微妙的互動是相當(dāng)有幫助。

Duplos
人們可以采取進(jìn)一步的互動一點也。在里卡多梅斯特的組合，設(shè)計元素慢慢浮整個頁面。你能現(xiàn)場危險Twitter的小鳥怪物？當(dāng)然，沒有Flash是用在這里。

亞歷布嘎
亞歷克斯的設(shè)計去走極端。該網(wǎng)站是建立與CSS和JavaScript，但它也同樣可以被用Flash設(shè)計的。幾乎所有的設(shè)計元素有一定的動畫排序。大多數(shù)設(shè)計師不去這種極端手段提供互動性。一個非常有趣和巧妙構(gòu)思執(zhí)行，雖然。 （走出去，甚至更遠(yuǎn)，有時甚至 徽標(biāo)是用jQuery動畫。）

3。上下文敏感導(dǎo)航

上下文敏感的導(dǎo)航的本質(zhì)是導(dǎo)航（通常附加到主導(dǎo)航），關(guān)于在網(wǎng)頁上取決于用戶上下文（例如，他們在做什么）。它的最大優(yōu)點是它可以消除干擾和控制無關(guān)的用戶的當(dāng)前上下文。上下文敏感的導(dǎo)航顯示選項只有在用戶實際需要它們。顯然，這種模式將是特別有用的用戶界面設(shè)計：它能夠幫助解除雜波接口和重點任務(wù)，他們正在執(zhí)行用戶的注意。

這種方法已用于在Web開發(fā)多年，但是從我們的觀察，它是更多的網(wǎng)站和Web應(yīng)用程序今天出現(xiàn)。 Vimeo 是一個上下文敏感的導(dǎo)航經(jīng)典的例子：回放控制消逝一旦開始播放視頻和再次出現(xiàn)的需求（即當(dāng)在視頻領(lǐng)域徘徊的用戶）。

當(dāng)執(zhí)行上下文敏感的航行，確保實際可用的導(dǎo)航當(dāng)用戶需要。記住各種設(shè)置和用戶方案，測試在最壞的情況了。對于視頻播放控制，如iPhone的觸摸界面或ipad公司用戶（用戶）將無法切換導(dǎo)航因為懸停效果將無法使用。在這種情況下，您可能要考慮觸摸手勢代替。

Vimeo
Vimeo，視頻分享平臺，顯示播放控制，直到用戶開始觀看影片。當(dāng)播放視頻時，控件消逝，只有當(dāng)再次出現(xiàn)在影片的用戶徘徊。一個上下文敏感的導(dǎo)航的典型例子。這種導(dǎo)航正在使用其他播放的網(wǎng)站越來越多，太 - 例如， Blip.fm。

紐約時報
紐約時報巧妙地顯示相關(guān)文章，并在其特色故事。而不是促進(jìn)他們的文章的實際內(nèi)容，它們的設(shè)計者提出一個適當(dāng)?shù)姆秶鷥?nèi)：1塊幻燈片的右下角，當(dāng)用戶到達(dá)該文章的末尾：在方便和幫助?？捎眯匝芯繉⒋_定用戶是否覺得這種行為從長遠(yuǎn)來看惱人。此外，請注意，只要你在一個除了鏈接的文章（點擊單詞），一個“？”工具提示出現(xiàn)允許您查找所選單詞。這項服務(wù)更有道理，如果在這比它在導(dǎo)航菜單隱藏在頂部或側(cè)欄背景下提出的。上下文敏感的導(dǎo)航處于最佳狀態(tài)。

路透社
下拉式導(dǎo)航是另一種上下文敏感的導(dǎo)航共同的地方。路透社的下拉式導(dǎo)航是相當(dāng)先進(jìn)的。它不僅提供對導(dǎo)航的選擇，但目前還顯示，如股票和熱點問題，這是立即發(fā)現(xiàn)有用的信息。還要注意“打開在右側(cè)欄沒有顯示在下面的截圖（”按鈕）。當(dāng)它被點擊，一個詳細(xì)的信息框（最初隱藏的，但在要求立即可用）覆蓋當(dāng)前頁面，并顯示相關(guān)信息（見第二下面的截圖）。路透社還允許用戶按照自己喜愛的主題并保存供日后閱讀文章。個性化的確是未來的網(wǎng)絡(luò)。

信息建筑師
信息建筑師有一個互動和有益的搜索功能。當(dāng)用戶鍵入一個關(guān)鍵字，系統(tǒng)搜索并顯示結(jié)果，強(qiáng)調(diào)在文章的摘要關(guān)鍵字。而不是顯示在下拉菜單的方式，例如谷歌的網(wǎng)站（或選擇的關(guān)鍵字，例如， GetSatisfaction）這樣做，該網(wǎng)站為用戶提供即時的結(jié)果。好用的快捷方式，節(jié)省了時間。順便說一下，在搜索框不只是出現(xiàn)盲目與其他所有鏈接，它是在“章程”的網(wǎng)頁上顯示的檔案，當(dāng)用戶瀏覽和搜索最近或特定的文章。

AllTop
而不是顯示默認(rèn)的數(shù)十個門類，Alltop顯示需求時，在右上角的信觸發(fā)它們。另一個隱藏在一個方便，用戶友好的方式輔助信息的一個例子。

DailyMile
DailyMile有一個干凈和有吸引力的用戶界面。主要的導(dǎo)航選項都顯示在左側(cè)邊欄。當(dāng)用戶超過一徘徊，顯示一個提示，說明該鏈接。在其他Web應(yīng)用程序，它可能是有用的強(qiáng)調(diào)導(dǎo)航選項和顯示懸停第二選擇。還要注意“更多在側(cè)邊欄底部的”開關(guān)，提供輔助導(dǎo)航選項，這是僅當(dāng)用戶正在積極尋找這些選項，而是隱藏其他。

黑港
默認(rèn)情況下，這里的圖像部分不顯示任何內(nèi)容比實際圖像等。但是，當(dāng)用戶對圖像的徘徊，標(biāo)題，描述和評論的出現(xiàn)。公告“共享”在右上角的氣球？論懸停（并且只在懸停），它幻燈片到Twitter的，臉譜，Digg和StumbleUpon公司聯(lián)系。所有這些信息將顯示在特定的區(qū)域時，在特定情況下（鼠標(biāo)懸停），它消逝時自動將鼠標(biāo)移開。

進(jìn)一步閱讀與資源

看如何在未來數(shù)月上下文敏感的導(dǎo)航變化和年會非常有趣。我們可以期待更清潔，干凈整潔的界面，根據(jù)用戶的意圖和行為上的需求出現(xiàn)在元素。 聰明的導(dǎo)航和任務(wù)欄 和用戶為中心的Web應(yīng)用將更加注重用戶的實際投入。

• 懸停的CSS控制的iPhone
  iPhone擁有一個觸摸屏，所以你不能真正懸停在任何東西，但這里介紹的技術(shù)仍然工作。而不是徘徊，用戶點擊該控件顯示在一個地區(qū)。這一地區(qū)是一個鏈接，或者內(nèi)聯(lián)或塊（1塊鏈接效果更好，因為你可以使可點擊區(qū)域較大）。
• 觸摸手勢參考指南
  本指南包含了軟件設(shè)計和觸摸式用戶界面開發(fā)工作組獨特的資源。

4。快速適應(yīng)對CSS3

隨著提高現(xiàn)代瀏覽器的主要特征對CSS3的支持下，設(shè)計界似乎很關(guān)心新的進(jìn)步和可能性感到興奮。每個人都似乎與對CSS3實驗中，無論是RGBA的透明度，對CSS3選擇器先進(jìn)的，對CSS3轉(zhuǎn)換或其他屬性。其結(jié)果是非常令人振奮的：我們所看到的更少討厭的瀏覽器黑客，更美麗，先進(jìn)，靈活和強(qiáng)大的設(shè)計比以前多。

最流行的對CSS3的功能似乎是迄今為止 邊界半徑，動畫和多種背景 箱陰影。這是可以理解的，因為這些可以很容易地被用來取代先前的解決方案，需要離奇的變通辦法和第三方工具來執(zhí)行任務(wù)。此外， @字體面對面 正在迅速普及，但請記住，這不是一對CSS3功能，因為它提出了CSS2中，被幸運(yùn)地在Internet Explorer（以及在其他瀏覽器的早期版本后才實施 - 法郎3.5 +和Safari 3.2 +，鉻4.0 + ，歌劇10.1 +）。這就是為什么它實際上安全使用 @字體面對面 今天在您的設(shè)計。

與對CSS3壞消息是，為了使功能可以很容易地適用于所有主流瀏覽器，我們將不得不等待的Internet Explorer 8期滿。它如何還有待觀察以及實際的互聯(lián)網(wǎng)瀏覽器9將支持新的標(biāo)準(zhǔn)（你可以看一下CSS支持在Internet Explorer中第9頁 互聯(lián)網(wǎng)瀏覽器9：測試驅(qū)動）。今天最流行的瀏覽器（即家庭的Internet Explorer版本）只支持對CSS3盒大小的屬性。的Internet Explorer 7 / 8有廣泛的支持對CSS3屬性選擇器（[交通運(yùn)輸技術(shù)$ =瓦爾]， [交通運(yùn)輸技術(shù)^ =瓦爾]等），combinators（é?f與），但沒有對CSS3偽類的支持（：n個孩子的（）， ：最后的孩子等）?；ヂ?lián)網(wǎng)瀏覽器9（將在2010年底公布的最早）將至少支持對CSS3媒體詢問，對CSS3的顏色（HSL的，低合金高強(qiáng)度，的RGBA），對CSS3選擇器和 邊界半徑。在此期間，我們將不得不使用現(xiàn)代瀏覽器為IE對CSS3和整合的解決方法，并有 他們中很多。

事情似乎是不可能在一年前，我們正在實施與純對CSS3，由設(shè)計界的創(chuàng)意燃料。我們可能已經(jīng)進(jìn)入了網(wǎng)頁設(shè)計，關(guān)鍵技術(shù)的CSS時正在誕生，類似于2003年到2005年時的CSS精靈和CSS滑動門制定了肥沃的新時代。事實上，我們有一個令人興奮的創(chuàng)意幾年期待。

的SXSW Beercamp
為了的SXSW Beercamp設(shè)計，創(chuàng)作者提出了一些比較大膽的決定。在每一頁的頂部信中，他們使用的 文本陰影 物業(yè)49倍。此外，各種動畫和轉(zhuǎn)換都適用，有 箱陰影 和HSLA。順便說一下，你有沒有在頂部日出？那么，設(shè)計師使用20

Tapbots
工作時，最好對CSS3功能巧妙地應(yīng)用與細(xì)節(jié)，加上一個清潔，簡單，有意義的設(shè)計。 Tapbots使用對CSS3的圓角，懸停動畫和一些透明效果，這是很難找的第一眼。這是一個很好的例子是對CSS3功能正確適用：沒有大膽的頭條新聞 文本陰影不夸張的梯度，沒有過多的動畫 - 只有固體，良好的設(shè)計。

2009年全正面
該 文本陰影 財產(chǎn)似乎特別有效的文本時，光的陰影里的人是黑暗的背景下使用。這是一個黑暗的另一個文本陰影簡單的例子（1位比背景暗）在白色的標(biāo)題使用。此外，該網(wǎng)頁使用 邊界半徑 和 箱陰影 根據(jù)每一位發(fā)言者描述中的快速鏈接。

要穩(wěn)定與斯塔塞
但有時一個黑暗的申請 文本陰影 對一個淺色背景的作品也很好。但在這種情況下，您可能需要添加一個“強(qiáng)大”的文字陰影。

GigaOm等
千兆奧姆用戶的RGBA透明度的特色街區(qū)。

下拉菜單對CSS3
一個更實用的方法，對CSS3的功能，使用 邊界半徑， 箱陰影，梯度和 文本陰影 在一個多層次的下拉菜單中，效果良好。沒有圖像用在這里。

克里斯托夫奧茨
克里斯托夫奧茨使用 文本陰影 財產(chǎn)增加其深度的頭條新聞。壓花效果的清潔和鋒利，幫助排版突出。

精明的條例草案
安迪克拉克的設(shè)計反應(yīng)定價列和按鈕。他用 箱陰影， - WebKit的梯度 為梯度，為不透明的RGBA， 邊界半徑 為圓角，和Webkit動畫懸停效果

Colly.com
西蒙科利森使用 箱陰影 財產(chǎn)給予更深入的列在他的布局。

對CSS3實驗：月球
丹塞德霍爾姆編寫了一個很好的演示，說明對CSS3的一些新功能的設(shè)計師在設(shè)計中可以利用今天。特別是，在側(cè)欄的通知微妙的動畫。 CSS的轉(zhuǎn)換和CSS -動畫使用。該設(shè)計提供了很好的視覺回報用戶，創(chuàng)造一個更加敏感和參與互動。

沙雷茨
沙雷茨'博客是一種使用一個不錯的懸停效果的動畫和過渡對CSS3的實際例子。注意有效地利用 文本陰影 一個充滿活力的藍(lán)色背景。

Mindgarden
Mindgarden使用查詢對CSS3媒體在不同的分辨率顯示不同的布局。有廣泛的瀏覽器窗口大小的用戶可以得到多列布局（2或3列，看到第一個畫面），和一個較小的瀏覽器窗口的大小用戶只能看到一列（第二屏幕）。另外，圖像的尺寸按比例自動根據(jù)用戶的屏幕大小。網(wǎng)頁設(shè)計者已經(jīng)使用多年的同一目的JavaScript，但現(xiàn)在我們可以創(chuàng)建使用純粹的CSS為基礎(chǔ)的解決方案，自適應(yīng)布局。傳媒查詢一對CSS3擴(kuò)展媒體類型，讓以上的站點布局呈現(xiàn)設(shè)計師更多的控制。目前，他們支持在Firefox 3.6 +和Safari 4 +，10 +歌劇和鉻。 Internet Explorer 8中不支持他們。對于有關(guān)媒體對CSS3疑問，頭部到解決辦法，并進(jìn)一步資料 拉斯威克利的演講“對CSS3媒體查詢”。

噪
啁啾會議網(wǎng)站使用的輪換和發(fā)言者的圖像動畫CSS動畫。

貝洛和比鄰新星：形式實驗
對于他的實驗，添布朗使用漸變，掩蔽，圓角，轉(zhuǎn)場和多個背景圖像。上徘徊，在頂部的標(biāo)題似乎脫穎而出。

NeutronCreations
美麗在工作中對CSS3的版式和變換在這里。旋轉(zhuǎn)的圓圈，作為公司的名稱將顯示。

Neography型實驗對CSS3
沒有圖片是用在這里。純對CSS3轉(zhuǎn)換，旋轉(zhuǎn)，陰影和其他改動。

CSS的海報
設(shè)計人員正在試驗不同的布局技術(shù)和CSS3技巧。下面是一個CSS規(guī)則簡單的CSS海報設(shè)計的例子。其實，一個很簡單的技術(shù)，它使用@字體，字體嵌入的臉。但它只是看起來偉大和服務(wù)的目的，太。

大衛(wèi)Desandro：頁腳
對CSS3瘋了：大衛(wèi)Desandro使用在其網(wǎng)站頁腳各種對CSS3規(guī)則。陰影，動畫和過渡都非常生動，豐富多彩，有吸引力。這是對與對CSS3，大多數(shù)網(wǎng)站使用的微妙片段對CSS3的影響正好相反。然而，在這種情況下它工作良好，因為它完全不同于其他網(wǎng)站的設(shè)計除了產(chǎn)品組合。

歌劇與對CSS3標(biāo)志
不同的視覺效果可能與對CSS3。隨著藝術(shù)創(chuàng)作位，您可以創(chuàng)建真正的不平凡的事。例如，歌劇院標(biāo)志設(shè)計在這里純粹是對CSS3：梯度， 箱陰影 和 邊界半徑。 CSS的形狀是什么，我們應(yīng)該想到會快？

賴恩德羅普
另外一個有趣的例子實現(xiàn)的視覺效果與純對CSS3。

一個關(guān)于文本陰影悲哀的財產(chǎn)

一個普遍的問題，我們通過觀察對CSS3有今天，是設(shè)計制作的出現(xiàn)，為的只是為了對CSS3。一本是完美的過度使用說明 文本陰影 財產(chǎn)，有時是大量應(yīng)用于標(biāo)題和正文。記住，對CSS3熊是一個強(qiáng)大的工具，因為它可以作為有效的，也可以很容易被濫用，導(dǎo)致了問題的可用性和可讀性問題的新一輪談判。這看起來是一個非常明顯的意見，但它仍然值得一提：前增加了對CSS3功能，您的網(wǎng)站，請確保它實際上是一個增強(qiáng)，為美學(xué)而加 和 在成本的可用性可用性，而不是美學(xué)。

一個明顯而重要的規(guī)則涉及到這樣的：你的設(shè)計不應(yīng)該依賴于對CSS3的改善，而應(yīng)結(jié)合起來，作為豐富的現(xiàn)代瀏覽器的用戶與它們的附加層。采用先進(jìn)的缺點是，對CSS3屬性，因為他們還沒有規(guī)范，因為壁虎和Webkit需要專有的屬性，實施幾年一定的，我們最終可能相當(dāng)臃腫的樣式表中包含無用的風(fēng)格了。所以，你可能要提取全部專有增強(qiáng)對CSS3到一個單獨的樣式表，以簡化維護(hù)以后。另外，請記住，您總是對CSS3棧應(yīng)該結(jié)束了對CSS3標(biāo)準(zhǔn)規(guī)則（如 邊界半徑，不 -萬盎司邊界半徑）。通過這樣做，可以確保在未來幾年，為在新版本的Web瀏覽器對CSS3規(guī)則更好的支持，您的規(guī)則仍然適用，將實際工作中的主要瀏覽器。

Twitter的媒體
在一些Windows系統(tǒng)，導(dǎo)航，標(biāo)題及正文設(shè)置 文本陰影 可以是相當(dāng)困難的閱讀與默認(rèn)的文本設(shè)置。有時實在沒有必要使用 文本陰影 身體復(fù)制和導(dǎo)航，從而影響與舊版瀏覽器的用戶設(shè)計的質(zhì)量。

廷德
廷德使用 文本陰影 物業(yè)文本。有些用戶（即使有良好的視力者）可能會遇到困難他們的屏幕上閱讀這個文本。

布蘭登現(xiàn)金
布蘭登現(xiàn)金使用 文本陰影 他的身體財產(chǎn)副本。雖然文字是清晰，更難以閱讀，如果它是比普通的副本。比較中鉻（左）和Safari（右視圖）：差異顯著。這很可能認(rèn)為很多用戶不使用ClearType字體或任何為其他類型的文本平滑。作為一個設(shè)計師和用戶的需要提倡，你要記住這一點。

Sramekdesign
淡藍(lán)色的淺灰色的背景文本很少清晰。隨著白色的文本添加到文本的影子，它變得更加惡劣。很抱歉，但是這不是地方 文本陰影 應(yīng)適用。

結(jié)論

新的可能性總是創(chuàng)造性地實施，但如此時髦，他們也被濫用。雖然良好的設(shè)計做法正在被納入網(wǎng)絡(luò)設(shè)計迅速通過現(xiàn)實生活的隱喻，響應(yīng)界面和上下文敏感的導(dǎo)航（），我們已看到許多“過度設(shè)計”的網(wǎng)站，使用他們自己而對CSS3的新功能。

設(shè)計趨勢不存在應(yīng)遵循的。其存在是為了被打破，重塑和由社區(qū)蕩漾通過設(shè)計創(chuàng)新精神取消。從本質(zhì)上看，趨勢是好的，但什么：他們忽略了通信設(shè)計的主要目的，破壞美學(xué)和功能之間的平衡。而不是跟隨潮流，使用權(quán)為目的，適當(dāng)?shù)姆秶鷥?nèi)適當(dāng)?shù)墓ぞ?。這就是信息設(shè)計的魅力在于，它使之間的一個不錯的設(shè)計和一個不錯的和巨大的差異 可用 設(shè)計。

?