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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

隱藏復(fù)雜性

SlideDeck
幻燈片是由本質(zhì)上是一個(gè)不錯(cuò)的方式來(lái)隱藏復(fù)雜性，因?yàn)樗麄冊(cè)谝粋€(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ù)雜性。該博客頁(yè)面已為6個(gè)圖標(biāo)的導(dǎo)航選項(xiàng)的博客服務(wù)。有一次，一個(gè)用戶(hù)點(diǎn)擊圖標(biāo)，選擇該類(lèi)別，為其他類(lèi)別的圖標(biāo)消失。這將是有趣的工作，這種做法是否會(huì)在更大的規(guī)模。 Calicott 采取了類(lèi)似的做法，盡管有不同的設(shè)計(jì)。

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

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

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

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

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

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

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

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

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

2。微妙互動(dòng)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Vimeo
Vimeo，視頻分享平臺(tái)，顯示播放控制，直到用戶(hù)開(kāi)始觀看影片。當(dāng)播放視頻時(shí)，控件消逝，只有當(dāng)再次出現(xiàn)在影片的用戶(hù)徘徊。一個(gè)上下文敏感的導(dǎo)航的典型例子。這種導(dǎo)航正在使用其他播放的網(wǎng)站越來(lái)越多，太 - 例如， 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)用戶(hù)到達(dá)該文章的末尾：在方便和幫助。可用性研究將確定用戶(hù)是否覺(jué)得這種行為從長(zhǎng)遠(yuǎn)來(lái)看惱人。此外，請(qǐng)注意，只要你在一個(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)的。它不僅提供對(duì)導(dǎo)航的選擇，但目前還顯示，如股票和熱點(diǎn)問(wèn)題，這是立即發(fā)現(xiàn)有用的信息。還要注意“打開(kāi)在右側(cè)欄沒(méi)有顯示在下面的截圖（”按鈕）。當(dāng)它被點(diǎn)擊，一個(gè)詳細(xì)的信息框（最初隱藏的，但在要求立即可用）覆蓋當(dāng)前頁(yè)面，并顯示相關(guān)信息（見(jiàn)第二下面的截圖）。路透社還允許用戶(hù)按照自己喜愛(ài)的主題并保存供日后閱讀文章。個(gè)性化的確是未來(lái)的網(wǎng)絡(luò)。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

結(jié)論

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

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

?