網頁設計(jì)趨勢(下(xià))

來(lái)源：徐州億網網絡科(kē)技(jì)有(yǒu)限公司 時(shí)間(jiān)：♦ε÷2010-10-18 作(zuò)者：

CSS3 技(jì)術(shù)

不(bù)确定你(nǐ)可(kě)以利用(yòng)C>≠®↕SS3嗎(ma)？再想想。網絡先鋒如(rú)Andy Clarπ'₩₩ke 和(hé) Jeremy Keith一(yī)直提倡網頁設計(jì)要(yào)&ldquo≠‍;逐步加強”。

逐步增強是(shì)指在網站(zhàn)設計(jì)師(sh₩×ī)時(shí)要(yào)兼顧到(dào)舊(✔±₩εjiù)版浏覽器(qì)的(de)可(kě)↔→↕用(yòng)性，而“增強&rdqu'÷φ§o;則是(shì)針對(duì)喜歡最新技(jì)術(shù)的(de)用(yòng)戶α‍¶。

在這(zhè)樣的(de)設計(jì)陣營，你(nǐ)利用(yòng)可↕♠(kě)以盡情利用(yòng)CSS3屬性的(de)優勢，如(rú)♦₽¶圓角，邊框背景和(hé)文(wén)本框陰®♠•>影(yǐng)。新版浏覽器(qì)用(yòng)戶會(huì)看(kàn)到(dà‌≤™×o)一(yī)個(gè)很(hěn)好(hǎo)的(de)版本，并且對(duì)舊©♦(jiù)版本用(yòng)戶（ IE6Ω∞☆同學，我就(jiù)不(bù)每次都(dōu)點名了(le)）将看(kàn)到(♦←dào)較為(wèi)基本的(de)版本。

CSS3 動畫(huà)
在網絡上(shàng)動畫(huà)經曆了(le)很(hěn)多(duō)階段。起←"↔ 初，我們隻能(néng)用(yòng)GIF動畫(huà)圖片。然後，♣♥我們又(yòu)幾乎限于Flash。現(xiàn)在，我們可(kě)以©©÷選擇的(de)有(yǒu)Flash，Silverlight，以<σσ☆及GIF，JavaScript和(hé)甚至乎CSS3。CSS3更輕量，更÷★§✔易用(yòng)，可(kě)創造令人(rén)難忘的宥(de)微(wēi)妙的(de)動畫(huà)。

圓角
在2005年(nián)和(hé)2006年(nián)的(de)Web 2.0風(fēng)格，↕×使得(de)圓角大(dà)受歡迎，惱人(rén)的(de)問(w蕶n)題是(shì)，在當時(shí)要(yào)≠ε實現(xiàn)這(zhè)些(xiē)可(kě)不(bù)容易。有(yǒu)沒有(÷‌₩yǒu)固定可(kě)行(xíng)的(de)方法來(lái)建立真正的(de)圓角。退而求其次的≤¥§✔(de)，大(dà)多(duō)都(dōu)是(≥€shì)利用(yòng)CSS，JavaScript和(h•Ω•σé)圖像來(lái)模拟。

現(xiàn)在CSS3允許浏覽器(qì)直接β$∑生(shēng)成圓角，不(bù)僅創建輕松，而且更有(yǒu)效率，因δ×♠為(wèi)用(yòng)戶不(bù)必下(xià)載額外(wài)的(de)圖片或JavaScr₹₽ipt文(wén)件(jiàn)。

2010年(nián)，設計(jì)師(s§∞€hī)正越來(lái)越多(duō)地(dì)利用(yòng)浏覽 ∞$☆器(qì)的(de)這(zhè)些(xiē)新功能(néng)優勢。

圖框和(hé)文(wén)本陰影(yǐng)
在網絡的(de)早期，利用(yòng)陰影(yǐng)創造一(y§$♣×ī)種立體(tǐ)感是(shì)早已有(yǒu)之（甚至有(∑'yǒu)時(shí)是(shì)用(yòng)過頭了(le)）。✔∏但(dàn)其實并不(bù)總是(shì)那(nà)麽好(hǎo)搞的(de)，¶&§☆要(yào)給文(wén)本添加陰影(yǐng)，你(nǐ)得(de)使πβ↑用(yòng)的(de)圖片，從(cóng)而增加加載時(shí)間​§¶&(jiān)，并且維護更加困難。框架陰影(yǐng)需要(yào)一(yī)些ε$≠(xiē)圖片和(hé)CSS技(jì)巧，如(rú)“滑動門(mén)& ♠'↔rdquo;。

CSS3具有(yǒu)陰影(yǐng)高(gāo)度可(k€×Ω§ě)定制(zhì)的(de)能(néng)力，這(zhè$ε&)對(duì)于創新影(yǐng)響十分(fēn)巨大(d¶₽↔×à)，不(bù)僅包括陰影(yǐng)，還(hái)有(yǒu)內(nèi♠₽)陰影(yǐng)。有(yǒu)創意設計(←®​ jì)師(shī)已經開(kāi)始使用(yòπ φng)這(zhè)些(xiē)CSS3效果，模拟浮雕和(hé)壓印的(de)效果。

RGBa和(hé)半透明(míng)
多(duō)年(nián)來(lái)，使用(yòng)不(bù)透$>&®明(míng)性和(hé)透明(míng)度，在網絡上(shàng)技(jì)術(shù)α✔←±上(shàng)是(shì)不(bù)可(kě)能(néng)的(de)₹♦。你(nǐ)有(yǒu)三種選擇：使用(yòng)平面圖像模拟的(de)透明(mín♦β'g)度，使用(yòng)不(bù)能(néng)跨浏覽β¥∏☆器(qì)兼容的(de)PNG格式，或者去(qù)≈∑•×折騰CSS基本的(de)透明(míng)選擇器(qì)和(hé)濾鏡。

CSS3使得(de)設計(jì)師(shī)在使用(yòng)RGBa不(bù)£₩∏透明(míng)屬性時(shí)，更加穩定和(hé)自(zì)由。你(nǐ)可(kě)以在很(h↑£ěn)多(duō)方面利用(yòng)半透明(míng)的(de)優點，其中之一(yī)就(↔β★δjiù)是(shì)使用(yòng)半透明(míng)的(de)顔色ΩΩ疊加到(dào)複雜(zá)背景時(shí)起到 <(dào)特别作(zuò)用(yòng)。之前，這(zhè)種效果如(rú₽ ↕Ω)果沒有(yǒu)使用(yòng)PNG是(shì)±♦不(bù)切實際，也(yě)是(shì)不(bù)可(kě)能(néng)達到(dào)的(de♣↑¥)。

手機(jī)兼容設計(jì)
移動網絡讓成千上(shàng)萬的(de)用(yòng)戶在排隊等候（無事(s✔"γhì)可(kě)做(zuò)）時(shí)能(néng)夠檢查他(tā)們的(d<₽₽₽e)銀(yín)行(xíng)帳戶，在地(dì)鐵(tiě)裡(lǐ)可(kě)以‍≈查看(kàn)最新分(fēn)數(shù)，在開(kāi)車(cεα¶hē)時(shí)更新自(zì)己的(de)Twitter的(de)情況（這(zhè)ε§←是(shì)一(yī)個(gè)危險的(de)習(xí)慣？），移動網絡ε​π✔正在茁壯成長(cháng)。

據我們所知(zhī)，很(hěn)多(du≤↓£♣ō)公司都(dōu)都(dōu)在考慮他(tā)們的(de)網站(zhàn)是(shì)否∞¶要(yào)加入移動網絡，如(rú)果是(shì)的(λ∏®de)話(huà)又(yòu)會(huì)怎麽樣。而創新公司則已經投入巨資在開(k ∞Ωāi)發高(gāo)效的(de)用(yòng)戶友(yǒu)好(hǎo)的(d​ ↓e)移動版本網站(zhàn)。

  創新
社交媒體(tǐ)使用(yòng)率的(de)爆炸性©ε→≥增長(cháng)證明(míng)，人(rén)們對(duì)連接和(hé)共享≤εΩ東(dōng)西(xī)總是(shì)熱(☆↔←rè)情有(yǒu)加的(de)。

在設計(jì)領域，我們已經看(kàn)浏覽和(£&hé)分(fēn)享别人(rén)作(zuò)品的(de)趨勢正在$< <增長(cháng)。作(zuò)為(wèi)≥‍♦設計(jì)師(shī)，現(xiàn)在我們感受著(zhe)别人(rén)創↕<×造力的(de)沖擊。這(zhè)不(bù)僅提高(gāo)了(☆©♠le)設計(jì)質量的(de)标準，還(hái)鼓勵了(le)共享精神，←•®☆也(yě)促進了(le)創造力和(hé)創新文(wén)化(huà)理(lǐ)念。
清新的(de)插畫(huà)
如(rú)果你(nǐ)像我一(yī)樣，看(kàn)著(zhe)迪斯尼電(di€₹àn)影(yǐng)長(cháng)大(dà)，你(nǐ)會(hu<λγ₹ì)欣賞動畫(huà)裡(lǐ)面每一(yī)幀的(de)效果。我們早 ♥≠已淡忘了(le)墨水(shuǐ)和(hé)馬克筆(bǐ)畫(huà)插畫(huà)的(de♠ ↓)日(rì)子(zǐ)，工(gōng)具的(de≈₩)演變産生(shēng)了(le)一(yī)些(xiēφ>)非常有(yǒu)創意的(de)方法去(qù)實現(xiàn)設計(jì)。

很(hěn)多(duō)設計(jì)師(shī)正在學習(xí)使用(yòng)光(guā©™ng)滑，幹爽，清晰的(de)插圖創建一(yī)個(gè)獨特的•↓​<(de)感覺，這(zhè)不(bù)是(shì)攝影(yǐng)或簡單的(de)剪貼畫(huà)↔↓可(kě)以達到(dào)的(de)。結果是(shì)≈γ→出現(xiàn)了(le)很(hěn)多(duō)美(měi)麗(ε•↕$lì)動人(rén)富有(yǒu)吸引力的(de)專業(yè)插畫(huà)設計(jì)。←♠®

紋理(lǐ)背景
紋理(lǐ)圖案背景在網絡上(shàng)沒有(yǒu)什(shén)麽新鮮的(de)。但("✘ ₽dàn)是(shì)，最近(jìn)幾個(gè)月(yuè)這(zh®$ §è)種技(jì)術(shù)已經出現(xiàn)了(le)有(yǒu)趣的(de)變化(huà↓≈)。我指的(de)是(shì)“微(wēi)型紋理(lǐ)&r&δdquo;， 是(shì)微(wēi)妙的(de)，幾乎不(∏♦bù)明(míng)顯的(de)背景紋理(l₽σ∑±ǐ)。

縮略圖
你(nǐ)可(kě)能(néng)會(huì)說"&←(shuō)，“縮略圖從(cóng)網絡出世那(nà)天早就(jiù)有♥>(yǒu)了(le)。怎樣麽會(huì)是(shì)趨勢呢(ne)？”是(shì)的§≥→(de)，它們一(yī)直被使用(yòng)，但(dà↔£✔n)普遍很(hěn)簡單。有(yǒu)一(yī)個(gè)縮略£>↔₩圖，點擊一(yī)下(xià)就(jiù)可‍&↓ (kě)以看(kàn)得(de)更大(dà)的(de)圖片。需要(yào)的(d≠♦​ e)功能(néng)就(jiù)是(shì)這(zhè)樣，不(bù)過很(hπ <βěn)無聊。

在最近(jìn)幾個(gè)月(yuè)，設計(jì)師(shī)們開(kāi)始÷÷α探討(tǎo)，“怎樣才能( ∑néng)使縮略圖更精彩？”這(zhèλ∏₩←)些(xiē)探討(tǎo)導緻了(le)縮略圖在智能(néng)和(γ♥₹δhé)可(kě)用(yòng)性方面大(dà)大(dà)增強。

水(shuǐ)彩效果
随著(zhe)網絡的(de)發展，我們看(♦¶<kàn)到(dào)越來(lái)越多(duō)的(de)設計(jì¶★)師(shī)正從(cóng)各種媒體(tǐ)來(lái)源獲取靈感。毫不(b♣♣→ù)奇怪，藝術(shù)就(jiù)是(shì)來(lái♦≈♦)源于此。

最近(jìn)出現(xiàn)風(fēng)格之一(yī)是(shì)模 ↕φ<拟水(shuǐ)彩。這(zhè)種輕柔優雅風(fēng)格看≠>¥↑(kàn)起來(lái)總是(shì)那(nà)麽清晰和(hé)平靜(jìng)。

手寫
手寫字體(tǐ)和(hé)草(cǎo)稿字體(tǐ)一(yī)直α✔™γ濫用(yòng)得(de)很(hěn)厲害。基于這(zhè)個(gè)✔¶原因，許多(duō)設計(jì)師(shī)避開(kāi)這(zhè)兩種類型，出于厭(yàn↑☆↑)惡或者因為(wèi)看(kàn)起來(lái)✘εγφ很(hěn)業(yè)餘的(de)感覺。不(bù)過最近(j$$♦ìn)，許多(duō)設計(jì)師(shī)↕✔都(dōu)發現(xiàn)，如(rú)果使用(yòng©☆)得(de)當，手寫風(fēng)格可(kě)以傳✔™₹達手工(gōng)藝和(hé)策劃的(de)意識。在結≥π>合上(shàng)下(xià)文(wén)環境使用(yòng)，會(huì)是(sh₩× ì)一(yī)個(gè)功能(néng)強大(dà)的(d×Ωe)表達方式。

社交媒體(tǐ)
現(xiàn)在人(rén)們在Faceb₩∞™ook和(hé)Google上(shàng)花(huā)更多(duō)的(d€&e)時(shí)間(jiān)，設計(jì)師(shī)正用(yòng)創新的(de)方法¥ββ§來(lái)把社交媒體(tǐ)整合到(dào)網站(zh≤≤§$àn)上(shàng)。

有(yǒu)些(xiē)設計(jì)師(shī)竟然在社交媒體★←↔(tǐ)網絡上(shàng)發布內(nèπφ•i)容，然後利用(yòng)他(tā)們的(de)網站(zhàn)聚合。

可(kě)以很(hěn)有(yǒu)把握的(de)說(shuō)随著(zhe)20'≠10年(nián)的(de)進一(yī)步發展，我們将看(kàn)到(dà→€o)更多(duō)的(de)設計(jì)師(shī ✔"↔)創造性地(dì)整合社交媒體(tǐ)到(dào)網站(zhàn)，以更好(hǎo> )的(de)吸引用(yòng)戶。

固定元素
現(xiàn)在，浏覽器(qì)可(kě)以更好(hǎo)地(dì)支持元素position: f≈>φ↓ixed屬性，我們看(kàn)到(dào)這(zhè)個(gè)屬性的 ♥ <(de)一(yī)些(xiē)巧用(yòng)。

很(hěn)多(duō)情況下(xià)，固定的(de)元素（∏'λ‌如(rú)固定不(bù)動的(de)導航條）可(kě)π™δ•以為(wèi)目标客戶更好(hǎo)服務，網站(zhàn)也(yě)更加實用(y♠♣♥$òng)。

固定元素令人(rén)難忘且增強用(yòng)戶體(tǐ)驗，有(yǒu)無數(shù)的(♦Ω↑<de)創意用(yòng)途，我們将會(huì)看(kàn)到(dào)設計(jβ↔' ì)師(shī)利用(yòng)這(zhè)些(xiē)優點。

文(wén)章(zhāng)轉自(zì)：cnbe↕↕ta.com

• 上(shàng)一(yī)篇: 網頁設計(jì)趨勢(上(shàng))
• 下(xià)一(yī)篇: 徐州網站(zhàn)推廣↕±¶δ之網站(zhàn)推廣介紹