花費(fèi)幾個(gè)月的時(shí)間研究編寫(xiě),Smashing Magazine 列出了2009 年 Web 設(shè)計(jì)風(fēng)格與潮流。它們是對(duì)當(dāng)前流行的大量 Web 設(shè)計(jì)風(fēng)格進(jìn)行分析,總結(jié)出那些可能在 2009 年風(fēng)行的潮流,包括新的設(shè)計(jì)元素,新的圖形方式,并給出大量的漂亮的示例。
點(diǎn)擊圖片可以進(jìn)入相關(guān)網(wǎng)頁(yè)查看更多細(xì)節(jié)。
1. 凸版印刷風(fēng)格
這種風(fēng)格有些出人意料,可能因?yàn)橹昂苌儆腥耸褂?。該風(fēng)格在在各種主題的網(wǎng)站中都有,但主要用于產(chǎn)品設(shè)計(jì)或在線服務(wù)類(lèi)網(wǎng)站。
[Page: ]
2. 富UI
現(xiàn)代 Web 中的 UI 變得越來(lái)越漂亮,越來(lái)越好用。過(guò)去的一年,Web 中的UI 有了顯著提高,有了一種接近桌面的感覺(jué)。Ajax 和 Flash 被廣泛使用。
特別是我們比去年看到了更多留白區(qū)域,還看到很多現(xiàn)代的 UI 技術(shù)會(huì)顯示用戶(hù)同系統(tǒng)之間交流的視覺(jué)狀態(tài),比如,按鈕在正常和被按下時(shí)顯示不同的樣子,用戶(hù)同系統(tǒng)交互時(shí)能及時(shí)得到反饋,另外,越來(lái)越多的服務(wù)可以被用戶(hù)定制。
這些設(shè)計(jì)顯示 Web 設(shè)計(jì)師將更多精力放到了用戶(hù)體驗(yàn)上。
[Page: ]
3. 透明 PNG
使用 PNG 實(shí)現(xiàn)透明雖然不被IE6 支持,卻在過(guò)去的一年大行其道。設(shè)計(jì)師們似乎正在嘗試將背景圖片和內(nèi)容融合并實(shí)現(xiàn)一些印刷媒體的風(fēng)格。比如,將 PNG 半透明圖片放到整體背景的某個(gè)區(qū)域上,用來(lái)加亮顯示這個(gè)區(qū)域,如標(biāo)題或聲明。一些 PNG 同名技術(shù)還用來(lái)實(shí)現(xiàn)燈箱框效果。
去年曾有很多設(shè)計(jì)師在他們的作品中開(kāi)始嘗試這些技巧。有趣的是,透明效果常被用于頁(yè)首和頁(yè)尾部分,不過(guò)也有些例外。
[Page: ]
4. 巨大字體
以前曾介紹過(guò)巨型字體設(shè)計(jì),2009年,巨型字體設(shè)計(jì)還會(huì)風(fēng)行,尤其是那些設(shè)計(jì)社,以及展示型,產(chǎn)品介紹型,或在線服務(wù)型網(wǎng)站,他們會(huì)使用巨型字體顯示重要信息。
巨型字體設(shè)計(jì)中使用的字號(hào)往往超過(guò)36px,設(shè)計(jì)師們對(duì)字體編排注入了更多關(guān)注,以實(shí)現(xiàn)更漂亮,更連貫,更值得信賴(lài)的站點(diǎn)。
[Page: ]
5. 代用字體
設(shè)計(jì)師們還把更多注意力放到字體上,雖然經(jīng)典的Web 字體,Helvetica, Arial, Georgia 以及 Verdana 等仍占主流,一些代用字體正浮出水面(如 sIFR)。
有趣的是,這些字體會(huì)和設(shè)計(jì)無(wú)縫地銜接,設(shè)計(jì)師們似乎并非為字體而字體,而是要將字體同他們的設(shè)計(jì)結(jié)合在一起實(shí)現(xiàn)更漂亮的效果。
[Page: ]
6. 燈箱效果
燈箱框是第二代彈窗,它們比第一代基于 JavaScript 的彈窗更友好,可以讓用戶(hù)將注意力集中到最重要的部分。這些窗口一般由用戶(hù)的某個(gè)行為激發(fā),并顯示在其它內(nèi)容的上層,他們有時(shí)候是半透明的,并包含一個(gè)關(guān)閉按鈕。
[Page: ]
7. 媒體塊
隨著寬帶接入的普及,用戶(hù)現(xiàn)在可以承擔(dān)更豐富的內(nèi)容,設(shè)計(jì)師們也借機(jī)提出更有吸引力的內(nèi)容。越來(lái)越多產(chǎn)品網(wǎng)站使用媒體塊顯示視頻,讓用戶(hù)更容易理解 這些內(nèi)容。用戶(hù)只需靠在椅子上看視頻,不需要一步一步往下點(diǎn),這些食品通常比較短,直奔主題,雖然很正規(guī),但也包含一些娛樂(lè)性。
不過(guò)請(qǐng)注意,視頻應(yīng)當(dāng)是你內(nèi)容展示方式的次要選項(xiàng),并不是所有人都有寬帶接入,也不是所有人都喜歡有視頻播放(他們可能正在后臺(tái)聽(tīng)網(wǎng)絡(luò)收音機(jī)或播放音樂(lè)),另外,也不是所有人都啟用了 Flash 和 Javascript。
[Page: ]
8. 雜志外觀
傳統(tǒng)印刷媒體設(shè)計(jì)中使用的編排技術(shù)也出現(xiàn)在 Blog 設(shè)計(jì)中,文章的編排,文字排版,圖片甚至對(duì)其方式。基于網(wǎng)格的設(shè)計(jì)也很流行,但主要用于展示與產(chǎn)品頁(yè)以及大型博客,極少用于公司網(wǎng)站或網(wǎng)店。
[Page: ]
9. 滾動(dòng)幻燈導(dǎo)航
幻燈片水平和垂直滾動(dòng),可以向不同方向滾動(dòng),當(dāng)前項(xiàng)加大加亮。這種導(dǎo)航技術(shù)可以讓用戶(hù)快速直觀地瀏覽站點(diǎn)中的內(nèi)容。一般常用語(yǔ)娛樂(lè)性網(wǎng)站,另外,設(shè)計(jì)者還可以使用該技術(shù)展示他們的作品。
[Page: ]
10. 在重點(diǎn)位置做形象展示
網(wǎng)站的左上方一般是一個(gè)站點(diǎn)最重要的區(qū)域,因?yàn)槟鞘怯脩?hù)注意力最集中的地方。因此,在那個(gè)部位放上網(wǎng)站中最重要的信息是明智之舉。
事實(shí)上很多設(shè)計(jì)師正是這樣做的,不管是 Web 程序,公司網(wǎng)站,在線服務(wù)還是作品展示,設(shè)計(jì)師們將口號(hào)或簡(jiǎn)介性?xún)?nèi)容放在那里,并使用醒目的排版給用戶(hù)以良好的第一印象。這些內(nèi)容長(zhǎng)短不一,不管哪種方 式,但它們都占據(jù)可觀的空間,一般橫跨整個(gè)幅面,高度在250到400之間。不過(guò)這些形象展示性區(qū)域一般并不用于博客或在線商店。