Smashing Magazine版權(quán)所有
作者：Smashing Magazine
譯者：UCD翻譯小組，波希米亞
校審：Angela
網(wǎng)頁設(shè)計(jì)(design)師是幻化無常的。我們喜歡拿東西做試驗(yàn)，喜歡觀察人們?nèi)绾闻c我們的產(chǎn)品進(jìn)行交互。我們喜歡實(shí)驗(yàn)與眾差別的設(shè)計(jì)(design)要領(lǐng)，這些在將來可能會(huì)成為主流和經(jīng)典。因此，隨著新設(shè)計(jì)(design)要領(lǐng)的興起，越來越多的設(shè)計(jì)(design)師關(guān)注他們、使用他們，新的趨勢(shì)也就誕生了。
在過去的幾個(gè)月，我們剖析了很多網(wǎng)頁設(shè)計(jì)(design)，觀察新趨勢(shì)，權(quán)衡設(shè)計(jì)(design)決策和源代碼解決方案的優(yōu)點(diǎn)。在這篇文章里，我們將展示2009年網(wǎng)頁設(shè)計(jì)(design)趨勢(shì)：動(dòng)態(tài)、新的設(shè)計(jì)(design)元素和新的圖形體現(xiàn)形式。接著還討論了這些趨勢(shì)被使用的情況和現(xiàn)有的一些漂亮的案例。在這篇概述中我們還遺漏了哪些動(dòng)態(tài)嗎？通告評(píng)論吧，好讓我們知道！
本文僅涵蓋了過去幾個(gè)月中我們發(fā)覺的25個(gè)趨勢(shì)之中的10個(gè)。第二局部將在下周通告。屆時(shí)將涵蓋結(jié)構(gòu)、新的視覺體現(xiàn)形式和新的設(shè)計(jì)(design)元素。敬請(qǐng)期待。
2009年網(wǎng)頁設(shè)計(jì)(design)趨勢(shì)首先來看看過去幾個(gè)月里我們發(fā)覺和觀察到的主要趨勢(shì)。在這篇概述中，將帶你逐一回顧每個(gè)趨勢(shì)和漂亮的案例，他們將激發(fā)你在下個(gè)項(xiàng)目中的靈感。
1. 凸版印刷
2. 富UI
3. 透明的PNG
4. 大字號(hào)(版面)
5. 自界說字體（sIFR 等）
6. 模式化對(duì)話盒/會(huì)話窗
7. 多媒體區(qū)
8. 雜志外觀
9. 旋轉(zhuǎn)木馬（幻燈片）
10. 導(dǎo)言模塊
好，現(xiàn)在就讓我們到具體內(nèi)容中去仔細(xì)看看上面提到的每個(gè)趨勢(shì)。
1. 凸版印刷在過去幾個(gè)月的觀察中，最出人意表的趨勢(shì)，是凸版印刷樣式（實(shí)際上壓上去的字）出現(xiàn)在網(wǎng)頁設(shè)計(jì)(design)中?？赡苓@種趨勢(shì)孕育產(chǎn)生的最重要的原因是因?yàn)?，這種印刷術(shù)到現(xiàn) 今已經(jīng)很少被使用了。凸版印刷以百般百般的品格被用在網(wǎng)站和主題上；尤其是，已經(jīng)被頻繁使用于產(chǎn)品設(shè)計(jì)(design)和網(wǎng)站的在線辦事中。
2. 富UI
我們欣喜的看到，用戶界面在現(xiàn)代網(wǎng)站和網(wǎng)頁應(yīng)用中已經(jīng)變得越來越漂亮、越來越實(shí)用了。在過去的一年里，這些網(wǎng)站應(yīng)用的用戶體驗(yàn)已得到大大改進(jìn)，從而使得用戶界面的充裕性和響應(yīng)度都非常接近經(jīng)典的桌面應(yīng)用程序。AJAX和Flash在為用戶提供動(dòng)態(tài)交互的廣泛應(yīng)用上，已經(jīng)有了先進(jìn)、老練并且專業(yè)的解決方案。
特別值得一提的是，過去一年里我們看到在設(shè)計(jì)(design)元素中使用了更多的留白，更多的填充以及更大的空間。我們還注重到，許多現(xiàn)代用戶界面用直觀的視覺提示來體現(xiàn)用戶與系統(tǒng)間的交互情況。好比，當(dāng)按鈕被按下時(shí)，它的外觀就由正常變?yōu)榘磯海ň拖馧ewspond.com和Quicksnapper.com上這樣），確認(rèn)并對(duì)用戶與系統(tǒng)的交互賜與及時(shí)反饋。除此之外，越來越多的辦事能夠進(jìn)行用戶本性化：對(duì)我們而言，這清楚的證實(shí)，更適用的用戶界面將在2009年到來。
上述兩個(gè)例子證實(shí)，網(wǎng)頁應(yīng)用的設(shè)計(jì)(design)師們?cè)谛в媒榻B和改進(jìn)交互性、響應(yīng)度等用戶體驗(yàn)問題上投入了更多的精力。
3. 透明的PNG
透明的PNG，盡管不被IE6支持，但從去年來看似乎已經(jīng)得到了很好的普及。顯然，設(shè)計(jì)(design)師們?cè)噲D更好地把配景圖片融入到實(shí)際內(nèi)容中，并計(jì)劃形成一種品格，這在印刷媒體中很多見，好比在雜志中。在多數(shù)情況下，半透明配景從頁面整體配景中脫穎而出，其目的是為了突出一個(gè)重要的設(shè)計(jì)(design)元素，例如頭條和通告。有時(shí)透明PNG也作為模式化對(duì)話盒(會(huì)話窗)的配景。
去年，我們描述了許多可以利用透明度發(fā)揮網(wǎng)頁設(shè)計(jì)(design)創(chuàng)意的要領(lǐng)，很多設(shè)計(jì)(design)師似乎也在他們的勞動(dòng)中實(shí)驗(yàn)著這些技術(shù)。有趣的是，透明經(jīng)常被使用在設(shè)計(jì)(design)的頭部或底部，但也有些設(shè)計(jì)(design) 逾越了這種定式。
4. 大字號(hào)(版面)
在之前的文章（1，2 ）中，我們列舉過一些大字號(hào)(版面)的杰出案例。2009年，大字號(hào)(版面)將成為主流。特別是設(shè)計(jì)(design)機(jī)構(gòu)，開發(fā)大型項(xiàng)目，做產(chǎn)品網(wǎng)站和在線辦事的，他們會(huì)使用大字號(hào)(版面)來轉(zhuǎn)達(dá)自己網(wǎng)站最重要的信息。
這些設(shè)計(jì)(design)元素的字體巨細(xì)通常都要超出36px，在很多情況下，為迎合觀眾都市使用非常漂亮的字體?？偟膩碚f，設(shè)計(jì)(design)師投入更多精力在排版的細(xì)節(jié)方面，如主次關(guān)系，行高和字體的選擇。其結(jié)果是：網(wǎng)站更漂亮，品格更一致，看起來可靠且值得信賴。
5. 自界說字體
就像設(shè)計(jì)(design)師花費(fèi)了更多精力在排版上一樣，他們也更注重用來作網(wǎng)站正文副本的字體。盡管有像Helvetica, Arial, Georgia和Verdana這些毋庸置疑地占據(jù)統(tǒng)治職位地方的經(jīng)典字體存在，我們?nèi)杂^察到有一股向自界說字體成長(zhǎng)的微弱趨勢(shì)（例如使用sIFR）。
有趣的是，這些字體往往無縫結(jié)合于網(wǎng)站設(shè)計(jì)(design)中；它們幾乎從不需要網(wǎng)站因它而更新排版。設(shè)計(jì)(design)師們?cè)噲D融合漂亮的版式和炫目的視覺設(shè)計(jì)(design)，以此來改進(jìn)網(wǎng)站的外觀和用戶體驗(yàn)。
6. 模式化對(duì)話盒/會(huì)話窗
模式化對(duì)話盒（會(huì)話窗）其素質(zhì)上就是一個(gè)改革型的彈出窗。它們以友好的界面替代了傳統(tǒng)JavaScript彈出窗口，并且使用戶的注重力始終集中在網(wǎng)站最重要的區(qū)域內(nèi)。狀態(tài)窗通常是被用戶的行動(dòng)所觸發(fā)（如注冊(cè)或登錄），并且出現(xiàn)于主內(nèi)容之上，就像桌面應(yīng)用中的一個(gè)窗口。會(huì)話窗往往以一個(gè)非常微妙的方法出現(xiàn)：它們通常接納半透明，并且有一個(gè)關(guān)閉按鈕。
7. 多媒體區(qū)
隨著更多寬帶網(wǎng)絡(luò)的接入，相比兩三年前，用戶已經(jīng)可以瀏覽更充裕的內(nèi)容，設(shè)計(jì)(design)師可以借此機(jī)會(huì)，用更具吸引力和值得回憶的方法來出現(xiàn)內(nèi)容。怪不得一些產(chǎn)品網(wǎng)站用多媒體區(qū)（錄像和視頻）來展示他們的內(nèi)容。這類元素的主要優(yōu)勢(shì)還在于，它們可以快捷有效地表達(dá)內(nèi)容，并使用戶更易于消化這些信息。
用戶要做的只是靠在椅背上欣賞；它們會(huì)把每件事循規(guī)蹈矩地展示出來，不需要用戶點(diǎn)擊，搜索說明，或是學(xué)習(xí)導(dǎo)航如何使用。影片通常都簡(jiǎn)明扼要；它們大多正式，但也不乏娛樂。
但請(qǐng)明白，視頻只是網(wǎng)站內(nèi)容的一種替代形式（而不是主體和唯一?。?。不是所有人都通過寬帶上網(wǎng)，也不是所有人都樂意看視頻（因?yàn)樗?她可能正在聽廣播或音樂），更不是所有人的機(jī)器上都安置了Flash和JavaScript.
8. 雜志外觀
在Blog的設(shè)計(jì)(design)中有一個(gè)非常有趣的現(xiàn)象，許多手法通常來自于傳統(tǒng)（印刷）媒體。從頁面文章的排列、排版的運(yùn)用、插圖，甚至到文字對(duì)齊方法都與傳統(tǒng)印刷技術(shù)的手法相似。柵格化設(shè)計(jì)(design)變得日益普及，但多用于大型項(xiàng)目，產(chǎn)品頁面和大型的Blog；它們幾乎不在公司網(wǎng)站或網(wǎng)上商城中出現(xiàn)。
9. 旋轉(zhuǎn)木馬（幻燈片）
旋轉(zhuǎn)木馬其實(shí)就是幻燈導(dǎo)航，它的內(nèi)容筆直或水平輪轉(zhuǎn)（因此得名旋轉(zhuǎn)木馬）。要到達(dá)輪轉(zhuǎn)導(dǎo)航的目的，用戶需要點(diǎn)擊其中某一個(gè)切換元素（通常是左/右或者上/下箭頭）。當(dāng)進(jìn)行切換時(shí)，內(nèi)容就向所選的偏向輪換了。
過去用戶為尋找他們所喜愛的內(nèi)容需要點(diǎn)擊網(wǎng)站中的很多章節(jié)，取而代之，現(xiàn)在可以快速瀏覽可見的內(nèi)容，省去了滾屏和不須要的鼠標(biāo)移動(dòng)。這樣做的好處是：用戶不但節(jié)省了時(shí)間，并且使他們的注重力越發(fā)集中到內(nèi)容中，而不是被疏散到瀏覽器窗口上。這類幻燈導(dǎo)航經(jīng)常被使用在娛樂網(wǎng)站和大型Blog上，但設(shè)計(jì)(design)師也可以把它用在大型項(xiàng)目中，以更互動(dòng)的方法來展示自己的勞動(dòng)。
10. 導(dǎo)言模塊
網(wǎng)站的左上部是頁面中最重要的區(qū)域，因?yàn)樗钅芪L問者的注重力。因此，把網(wǎng)站最重要的信息放在那里是再明智不過的了，這樣就能確保訪問者盡可能快的看到信息。
事實(shí)上，這也是許多設(shè)計(jì)(design)師正在做的事情。不管是為網(wǎng)站應(yīng)用、公司設(shè)計(jì)(design)、在線辦事還是大型項(xiàng)目，設(shè)計(jì)(design)師們都市把他們的口號(hào)和簡(jiǎn)要導(dǎo)言放在頁面頂部，通過使用粗體和生動(dòng)的排版，給用戶留下一個(gè)好的第一印象。一些導(dǎo)言是簡(jiǎn)短的，也有一些夠啰嗦的；無論哪種，它們都市占一大塊區(qū)域；與結(jié)構(gòu)等寬，高度在 250-400px之間，已成為這些導(dǎo)言模塊的通用尺寸。值得注重的是，這些模塊幾乎從不出現(xiàn)在Blog中，網(wǎng)上商城中也很少出現(xiàn)。
敬請(qǐng)期待！
本文僅涵蓋了過去幾個(gè)月中我們發(fā)覺的25個(gè)趨勢(shì)之中的10個(gè)。第二局部將在下周通告。屆時(shí)將涵蓋結(jié)構(gòu)、新的視覺體現(xiàn)形式和新的設(shè)計(jì)(design)元素。敬請(qǐng)期待。
