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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

隱藏復(fù)雜性

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

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

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

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

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

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

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

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

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

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

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

2。微妙互動(dòng)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4?？焖龠m應(yīng)對CSS3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

大衛(wèi)Desandro：頁腳
對CSS3瘋了：大衛(wèi)Desandro使用在其網(wǎng)站頁腳各種對CSS3規(guī)則。陰影，動(dòng)畫和過渡都非常生動(dòng)，豐富多彩，有吸引力。這是對與對CSS3，大多數(shù)網(wǎng)站使用的微妙片段對CSS3的影響正好相反。然而，在這種情況下它工作良好，因?yàn)樗耆煌谄渌W(wǎng)站的設(shè)計(jì)除了產(chǎn)品組合。

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

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

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

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

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

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

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

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

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

結(jié)論

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

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

?