2010網頁設計趨勢解剖
純粹主義者會說,偉大的設計是永恆的。是的,在一個理想世界中,我們可以忽視趨勢與流行。
但是實事求是地講,跟蹤和融入設計的趨勢是很有價值的,尤其是網站方面。讓我們面對現實:網路時刻在迅速變化,而不像其他媒體,網站設計的趨勢不再僅僅受美學驅動。技術是不斷變化的,媒介的能力和手段都在隨之而發生巨大變化。2010年,我們看到設計師在網頁設計方面不斷推陳出新,形成了以下明顯的趨勢...
印刷式設計
印刷設計一直都是網頁設計的靈感來源。網頁設計已經有了一段的歷史,足夠形成一個強勁的沒有印刷設計經驗的設計師核心。而結果我們看到更多的靈感是來自於印刷,似乎這些設計師不僅僅是網站設計。
襯線字體
印刷的最重要問題之一是可讀性。印刷設計師們總是傾向於襯線字體,因為這種字體邊緣明顯,提高可視效果,使字形更容易識別。
無襯線字體,一般認為它更容易在螢幕上閱讀。但是,隨著越來越多的用戶流覽解析度的提高和字體平滑技術的改進,襯線字體顯示正文文本可讀性十分良好。
大標題
印刷設計師一直使用的大標題,以吸引不同年齡層的注意。如果期望別人來讀,印刷材料的形式已經有很深的影響。如果你看到一個沉悶的小冊子賴在辦公桌上,你都懶得撿起來?不是嗎?
這一趨勢開始於2009年,目前在普及。大標題已證明更有吸引力和明晰溝通。
多列佈局
設計人員的工作往往受限於手段和媒介。跟印刷不同,網頁是可以滾動的,因為它沒有紙張尺寸的限制。因而使用多列可讓你在同一空間呈現更多的內容。
現在,螢幕解析度在增加,網格佈局已到來,更多的設計師正在網頁設計上適應這種方法,使得網站更易用,容納的內容也更加多。
大幅配圖
一張好圖片勝過千言萬語。因為在網路之前,印刷品的圖片(解析度更高)已經有了相當的影響,現在寬頻接入使得大圖片的使用更具可行性。
我們看到越來越多的網站使用大幅的,給人印象深刻的圖片來吸引用戶,創造一個身臨其境的體驗。
圖表和資訊圖
印刷設計師多年來一直使用圖形來傳達複雜的資訊。最為普遍常見就在雜誌和年度報告。
對於那些複雜的關係和比例,純文本是很難表達的,圖形是一種很好的溝通的方式。資訊圖像往往有一個簡單而豐富的視覺外觀,越來越多更多的設計師都採用資訊圖像,或者模仿這種設計風格。
簡約
安東尼•德•聖-埃克蘇佩里曾說過,“完美就是多一點則太多,少一點則太少。” 簡潔設計的優點很多。
希克斯定律告訴我們,多出的每一個選擇,都需要增加時間來做決定。此外,信號噪音的理論告訴我們,給網站(信號)的資訊和功能添加額外的東西,只能令到網站設計效果更差(噪音)。
簡單的設計更容易使用和理解,資訊傳播也更加明確。
極簡和網格設計
極簡主義是功能強大,但難以掌握。它僅僅包含的基本要素,多餘的一切都拋棄,結果是呈現出元素的最大影響力。
極簡設計需要一個強大的行之有效的網格系統。一般的,設計會留有足夠的空白,所以如果沒有這種網格,一個簡約的設計會讓人感到截斷的和草率的。網格就是賦予它組織和結構。
單頁佈局
有幾種方法可以簡化設計。單頁佈局展示了其中兩種方法:隱藏和刪除。
有效的單頁佈局會隱藏掉那些次要的元素。如果用戶希望看到這些元素之一,只需點擊一下就呈現出來。這比什麼都顯示出來更有效果,因為那樣會使頁面複雜和壓抑。
同樣,單頁佈局背後的原則決定了那些額外的頁面是沒必要的。隨著強大的JavaScript庫興盛和網路速度提高,許多網站現在已經沒必要使用幾個頁面。設計人員可以輕鬆地將資訊容納到一個頁面上,不會讓用戶為層層分級的頁面感到厭煩。
巨型的留白空間
在網站設計之初,我們沒有太多的螢幕可以工作,所以並沒有表現出很大的空白。如果你曾經嘗試為640 × 480解析度的網站做設計,我說的是什麼,你懂的。
現在我們有了更高的解析度,還可以使用JavaScript隱藏和顯示元素,利用留白空間已經容易得多。
空間留白是良好設計至關重要的一部分。給眼睛一個休息的地方。很自然的就提高了設計品質。而且通過元素間距也更容易表達它們之間的關聯性。
版式佈局
在以前,我們在控制展示內容的時候,僅僅限於少數可選擇“網頁安全字體“,現在我們有了更廣泛的工具來豐富我們的排版。
Web設計者一直喜歡使用型式作為溝通資訊的一個微妙工具。隨著控制和能力的增強,我們將看到更多的設計師會把印刷樣式的排版的作為設計元素重點。
CSS3 技術
不確定你可以利用CSS3嗎?再想想。網路先鋒如Andy Clarke 和 Jeremy Keith一直提倡網頁設計要“逐步加強”。
逐步增強是指在網站設計師時要兼顧到舊版流覽器的可用性,而“增強”則是針對喜歡最新技術的用戶。
在這樣的設計陣營,你利用可以盡情利用CSS3屬性的優勢,如圓角,邊框背景和文本框陰影。新版流覽器用戶會看到一個很好的版本,並且對舊版本用戶( IE6同學,我就不每次都點名了)將看到較為基本的版本。
CSS3 動畫
在網路上動畫經歷了很多階段。起初,我們只能用GIF動畫圖片。然後,我們又幾乎限於Flash。現在,我們可以選擇的有Flash,Silverlight,以及GIF,JavaScript和甚至乎CSS3。CSS3更輕量,更易用,可創造令人難忘的微妙的動畫。
圓角
在2005年和2006年的Web 2.0風格,使得圓角大受歡迎,惱人的問題是,在當時要實現這些可不容易。有沒有固定可行的方法來建立真正的圓角。退而求其次的,大多都是利用CSS,JavaScript和圖像來類比。
現在CSS3允許流覽器直接生成圓角,不僅創建輕鬆,而且更有效率,因為用戶不必下載額外的圖片或JavaScript檔。
2010年,設計師正越來越多地利用流覽器的這些新功能優勢。
圖框和文本陰影
在網路的早期,利用陰影創造一種立體感是早已有之(甚至有時是用過頭了)。但其實並不總是那麼好搞的,要給文本添加陰影,你得使用的圖片,從而增加載入時間,並且維護更加困難。框架陰影需要一些圖片和CSS技巧,如“滑動門”。
CSS3具有陰影高度可定制的能力,這對於創新影響十分巨大,不僅包括陰影,還有內陰影。有創意設計師已經開始使用這些CSS3效果,模擬浮雕和壓印的效果。
RGBa和半透明
多年來,使用不透明性和透明度,在網路上技術上是不可能的。你有三種選擇:使用平面圖像模擬的透明度,使用不能跨流覽器相容的PNG格式,或者去折騰CSS基本的透明選擇器和濾鏡。
CSS3使得設計師在使用RGBa不透明屬性時,更加穩定和自由。你可以在很多方面利用半透明的優點,其中之一就是使用半透明的顏色疊加到複雜背景時起到特別作用。之前,這種效果如果沒有使用PNG是不切實際,也是不可能達到的。
手機相容設計
移動網路讓成千上萬的用戶在排隊等候(無事可做)時能夠檢查他們的銀行帳戶,在地鐵裏可以查看最新分數,在開車時更新自己的Twitter的情況(這是一個危險的習慣?),移動網路正在茁壯成長。
據我們所知,很多公司都都在考慮他們的網站是否要加入移動網路,如果是的話又會怎麼樣。而創新公司則已經投入鉅資在開發高效的用戶友好的移動版本網站。
創新
社交媒體使用率的爆炸性增長證明,人們對連接和共用東西總是熱情有加的。
在設計領域,我們已經看流覽和分享別人作品的趨勢正在增長。作為設計師,現在我們感受著別人創造力的衝擊。這不僅提高了設計品質的標準,還鼓勵了共用精神,也促進了創造力和創新文化理念。
清新的插畫
如果你像我一樣,看著迪士尼電影長大,你會欣賞動畫裏面每一幀的效果。我們早已淡忘了墨水和馬克筆劃插畫的日子,工具的演變產生了一些非常有創意的方法去實現設計。
很多設計師正在學習使用光滑,乾爽,清晰的插圖創建一個獨特的感覺,這不是攝影或簡單的剪貼畫可以達到的。結果是出現了很多美麗動人富有吸引力的專業插畫設計。
紋理背景
紋理圖案背景在網路上沒有什麼新鮮的。但是,最近幾個月這種技術已經出現了有趣的變化。我指的是“微型紋理”, 是微妙的,幾乎不明顯的背景紋理。
縮略圖
你可能會說,“縮略圖從網路出世那天早就有了。怎樣麼會是趨勢呢?”是的,它們一直被使用,但普遍很簡單。有一個縮略圖,點擊一下就可以看得更大的圖片。需要的功能就是這樣,不過很無聊。
在最近幾個月,設計師們開始探討,“怎樣才能使縮略圖更精彩?”這些探討導致了縮略圖在智慧和可用性方面大大增強。
水彩效果
隨著網路的發展,我們看到越來越多的設計師正從各種媒體來源獲取靈感。毫不奇怪,藝術就是來源於此。
最近出現風格之一是模擬水彩。這種輕柔優雅風格看起來總是那麼清晰和平靜。
手寫
手寫字體和草稿字體一直濫用得很厲害。基於這個原因,許多設計師避開這兩種類型,出於厭惡或者因為看起來很業餘的感覺。不過最近,許多設計師都發現,如果使用得當,手寫風格可以傳達手工藝和策劃的意識。在結合上下文環境使用,會是一個功能強大的表達方式。
社交媒體
現在人們在Facebook和Google上花更多的時間,設計師正用創新的方法來把社交媒體整合到網站上。
有些設計師竟然在社交媒體網路上發佈內容,然後利用他們的網站聚合。
可以很有把握的說隨著2010年的進一步發展,我們將看到更多的設計師創造性地整合社交媒體到網站,以更好的吸引用戶。
固定元素
現在,流覽器可以更好地支援元素position: fixed屬性,我們看到這個屬性的一些巧用。
很多情況下,固定的元素(如固定不動的導航條)可以為目標客戶更好服務,網站也更加實用。
固定元素令人難忘且增強用戶體驗,有無數的創意用途,我們將會看到設計師利用這些優點。
那些流行趨勢是你在追隨的?還有其他什麼樣的新興的趨勢?歡迎討論
來源:webdesignerdepot, cnBeta網
參考文獻:
梁定澎主編。「電子商務理論與實務」。第十章網路行銷。(檢索日期2008/03/12)。
CR & LF 研究所著,博碩文化編譯( 2006 )。配色王:最能激發創意與觸動人心的配色技法。
王樂成、林祐聖、葉欣怡(譯)(2002 )。James Slevin 著。網際網路與社會,(Internet and society)。台北:弘智。
石恩綸(2000)。女性網路使用者的網站印象與網路使用行為。台北大學企業管例研究所碩士論文,未出版,台北。
Davis, F. D.; Bagozzi, R. P.; Waarshaw, P. R. (1989), User Acceptance of Computer Technology: A Comparison of Two Theoretical Models, Management Science, 35(8), 982-1003.
Dou, W. (2004), Will Internet Users Pay for Online Content, Journal of Advertising Research, 44(December), 349-359.
Ducoffe, R. H. (1996), Advertising Value and Advertising on the Web, Journal of Advertising Research, 36(5), 21-35.
Gregory, S. B. (2005), Is eBay for Everyone? An Assessment of Consumer Demographics, S.A.M. Advanced Management Journal, 70(1), 50-59.
相關文章
網頁加速的14條黃金法則20歲傑青心得「不怕挫折」的網頁設計蘋果推出 HTML5 技術的網頁設計展示專頁力抗蘋果 Adobe推新版Flash網頁設計蘋果不支援 Flash 網頁設計正逐步影響相關產業
最新文章
HVACKer:入侵隔離網絡的新型攻擊技術還有什麼不會被入侵?路由器 LED 燈已成為攻擊入口美 5 家獨角獸同天申請 IPO 掛牌,最狂的是一家估值 124 億美的數據分析新創!【台灣「智慧產業」開始佈局】緯創集團領投跨國 AI 新創 iKala,下一步拓展東南亞市場快可以用手機遠端遙控你的所有家電了