2010 年 Web 設計風

來源: 銳商企業CMS 發布時間: 2010-05-11 10:24 閱讀: 1167 次推薦: 0 原文鏈接 [收藏]

Web 設計是個變幻無常的行業，如今已經成為一個包含了美學體驗，功能豐富的富媒體，事實上，當今的 Web正處在黃金時代，我們擁有強大的新工具，唾手可得的豐富資源，龐大的設計社區，以及主流瀏覽器對 Web 標準的普遍支持。如今的 Web風潮云涌，令人目不暇接。本文講述了2010年最新 Web 設計風，這是第一部分。

1. 愉悅的設計

Web 設計師的工作是有效的傳遞思想，引導用戶完成他們的任務并贏得他們的信任，我們有很多方法實現這些，如視覺之美，之驚奇，之愉悅，之難忘。令人過目不忘的設計會在你的品牌和用戶之間建立起堅固的，可靠的情感紐帶。

Brizk design studio 擁有令人目眩的設計，精美的動畫，漂亮的字體和干凈的布局，將鼠標放到底部的小鳥上時，會浮顯出 Twitter 消息。

以下的這些示例站點，盡管名不經傳，但它們在努力表達一些東西，試圖融入我們的感受，它們擁有美麗的外觀，而更重要的是，讓人過目難忘。

Bounty Bev ： Bounty Bev 是一家軟飲料公司，這是一個單頁式網站，該站的設計簡單，清晰，充滿個性。

Analog.coop ： Analog為訪問者帶來很個性化體驗，根據的 IP顯示你地理位置，并告訴你他們的工作人員中有誰離你最近（不過，根據測試，這個消息似乎并沒有什么實際價值，不管訪問者來自何地，離他們最近的似乎永遠是Alan 和 Jon - 譯者）。整站的設計還是充滿了樂趣感。

Forrst ：漂亮的設計，吸引人的視覺元素，富有創意的導航系統。

Billy Tamplin ：這是 Billy Tamplin 的博客，記錄他生活與工作中的小小得意與榮譽。設計簡單，漂亮。

MIX ：這是一個開發與設計社區博客，吸引人的動畫與引人注目的效果，設計上保持了視覺上的一貫性，整體注重內容和個人感觸。

Blue Sky Resumes : 一個代寫簡歷的小團隊，Header 部分的 Flash 動畫很好地暗合了公司的名字，值得注意的是，在這段動畫加載之前，Header 部分是以簡單的圖形填補動畫加載前的空白的，這種漸進式體驗非常體貼。

Mailchimp : 小猴子視覺表征隨處可見，使用 ASCII 字符動畫顯示最新動態。

快捷鍵導航

現代的 Web，越來越擁有桌面應用的特質，借助 JavaScript，傳統的 Web站點變得更富有交互性，鍵盤快捷鍵導航開始流行，其中最著名的例子是照片共享站點 Flickr 和 FFFFound。快捷鍵導航曾一度是Flash 站點的專利，現在越來越多出現在基于 CSS 的站點，Google Reader 是一個最典型的例子，還有更多站點也做得非常好。

They Make Apps ：幾個月前，他們有一個鍵盤導航模式，使用箭頭在內容之間穿梭，回車鍵展示細節內容，Escape 鍵返回主頁面。但不知何故，鍵盤導航功能現在已經去掉了。

Image source

Mad-ar.ch ：基于 Flash，因此可以實現很高級的導航，按 c 到留言頁，按 - 和 + 縮放圖片，諸如此類。

9GAG : 一個社會化圖片書簽站點，按 j 和 k 前進或后退，使用 l 鍵為當前圖片投票。

FFFFound! : 最早的圖片書簽網站之一，按 h 鍵返回頁面頂部，按 v 改變視圖，同樣 j 和 k 表示前進和后退。

Feta : 另一個基于 Flash 的站點，使用箭頭鍵在不同項目之間穿梭，下箭頭表示選擇，上箭頭返回。

NY Times: Times Skimmer : 紐約時報的新聞概要頁擁有很好的鍵盤導航功能，使用箭頭鍵在新聞間前進后退，使用 Shift 鍵縮放，返回頂部按 t，刷新當前內容按 r，選擇新聞按 a 和箭頭。

Pictory : 照片故事雜志，同樣使用 j 和 k 在不同圖片之間瀏覽。

CrushLovely : 一個單頁式站點，使用箭頭鍵在不同部分之間瀏覽。

Thinking for a Living : 使用左右箭頭鍵導航。

Picnic Extraterrestre : 一個非常不同的設計，模仿圖文電視風格，所有導航內容都可以通過數字鍵實現。

Web的平面設計風

現代 Web 設計，還追求平面設計般的精致與創意，以下這些示例站點，擁有雜志和海報般的設計風格，醒目的題頭，多欄，縮進，圖片包圍，旁注與腳注，諸如此類。

Design Informer: Grid-Based Web Design, Simplified 擁有兩欄式結構，將文字和圖片清晰地左右分開。

A Lesson on How to Be a Villain : 一個擁有出色設計和獨特布局的站點，CSS 加 Table 布局，有時候，這是 Web 平面設計化的必要技術。

Evan Dinsmore: 21 : 海報式設計，使用生動的圖片替代文字，不好的一面是，用戶界面不夠有好。（Web 平面設計化的固有問題 - 譯者）

The Bold Italic: Dr. Feel Good : 雜志式布局，多欄，如果將頁面打印出來，你也許不相信這是個 Web 頁面。

A Way Back: Revised Font Stack ：非常精細的設計，大型圖片橫跨整個頁面。

Chris Coyier: The Safari Challenge : 一個微妙的設計，大面積留白，多欄文字，從美學上看，更像一頁書。

Kyle Fielder: Keeping Curious : 多像那些舊雜志的畫面。

Sleepover: A Critical Analysis of my Shoes : 簡單的網格布局，文字左右對齊，圖片也漂亮，不過左右對齊式文字在 Web 上似乎不怎么行得通。

Yaron Schoen: Too Many Buttons : 平面設計化的 Web 頁面需要更多東西，背景圖片與配色，CSS 式樣，這個示例說明了這些。

The Bold Italic: Keep Off the Grass : 另一個多欄式設計示例。

The Bold Italic: Cinderella Story : 受平面設計影響

Travis Neilson: Default Switch : 一個冷靜的，簡潔的設計

4.橫向主義

曾幾何時，Web 易用性規則告訴我們，不要讓用戶橫向滾動內容，因為鼠標的滾動按鈕天生是豎向滾動的，然而，新的多點觸控技術的出現正在改變這一現狀。

Thinking for a Living ：這不僅是一片討論內容橫向滾動和豎向滾動孰優孰劣的文章，本身還是橫向滾動的一個絕佳示例。

OurType : 一家比利時字體設計公司，內容橫向滾動。

Jung v. Matt : 以橫向時間線導航，雖然沒有橫向滾動條，但鼠標的滾輪式橫向滾動的。

Your Auxillary : 單頁式設計，也是結合橫向和豎向導航的示例。

One Twenty Six : 除了左右導航箭頭，還可以從下拉選擇框中直接選擇要訪問的內容，并左右滾動定位到那段內容。

Jax Vineyards : 一個有關葡萄酒的網站，非常有效的左右滾動導航，基于 CSS 和 JavaScript 的設計十分精良。

C. L. Holloway : Candice Holloway 的作品展示網站，橫向導航很有畫廊的感覺。

Yamaha Ginza : 基于 Flash 的全向導航。

Edpeixoto : 很獨特的布局

ASOS : 傾斜也是美

5. Rich, Strong Typography

字體在現代 Web 設計中意義深遠，隨著 @font-face 與 TypeKit 等技術的發展，我們已經可以在 Web 中使用個性化字體，在 Web 頁面上實現平面設計般的感覺。

Kilian Muster ： Kilian Muster 在設計中大量使用襯線字體，Palatino, Palatino Linotype, Book Antiqua, Constantia, Times, Times New Roman,Serif。（襯線字體一般常用于書籍印刷品，在 Web 上并不多見（請參閱《字體的故事之：襯線體的前世今生》） - 譯者）