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

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

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

1。現(xiàn)實生活中的隱喻和隱藏的復雜性

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

隱藏復雜性

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

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

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

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

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

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

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

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

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

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

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

2。微妙互動

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

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

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

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

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

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

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

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

馬爾科姆讀顧問
另一種微妙的互動有趣的設計技術：三個圖像自動顯示在頂部垂直滑動，更新在頂部橫向導航的背景圖片，也。不支持Flash是用在這里。

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

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

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

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

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

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

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

3。上下文敏感導航

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

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

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

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

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

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

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

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

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

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

進一步閱讀與資源

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

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

4?？焖龠m應對CSS3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

一個關于文本陰影悲哀的財產

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

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

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

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

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

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

結論

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

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

?