1. 愉悅的設(shè)計(jì)
Web 設(shè)計(jì)師的工作是有效的傳遞思想，引導(dǎo)用戶完成他們的任務(wù)并贏得他們的信任，我們有很多方法實(shí)現(xiàn)這些，如視覺(jué)之美，之驚奇，之愉悅，之難忘。令人過(guò)目不忘的設(shè)計(jì)會(huì)在你的品牌和用戶之間建立起堅(jiān)固的，可靠的情感紐帶。
Brizk design studio 擁有令人目眩的設(shè)計(jì)，精美的動(dòng)畫，漂亮的字體和干凈的布局，將鼠標(biāo)放到底部的小鳥(niǎo)上時(shí)，會(huì)浮顯出 Twitter 消息。
以下的這些示例站點(diǎn)，盡管名不經(jīng)傳，但它們?cè)谂Ρ磉_(dá)一些東西，試圖融入我們的感受，它們擁有美麗的外觀，而更重要的是，讓人過(guò)目難忘。
Bounty Bev ： Bounty Bev 是一家軟飲料公司，這是一個(gè)單頁(yè)式網(wǎng)站，該站的設(shè)計(jì)簡(jiǎn)單，清晰，充滿個(gè)性。
Analog.coop ： Analog 為訪問(wèn)者帶來(lái)很個(gè)性化體驗(yàn)，根據(jù)的 IP 顯示你地理位置，并告訴你他們的工作人員中有誰(shuí)離你最近（不過(guò)，根據(jù)測(cè)試，這個(gè)消息似乎并沒(méi)有什么實(shí)際價(jià)值，不管訪問(wèn)者來(lái)自何地，離他們最近的似乎永遠(yuǎn)是 Alan 和 Jon - 譯者）。整站的設(shè)計(jì)還是充滿了樂(lè)趣感。
[Page: ]
Forrst ： 漂亮的設(shè)計(jì)，吸引人的視覺(jué)元素，富有創(chuàng)意的導(dǎo)航系統(tǒng)。
Billy Tamplin ： 這是 Billy Tamplin 的博客，記錄他生活與工作中的小小得意與榮譽(yù)。設(shè)計(jì)簡(jiǎn)單，漂亮。
[Page: ]
MIX ： 這是一個(gè)開(kāi)發(fā)與設(shè)計(jì)社區(qū)博客，吸引人的動(dòng)畫與引人注目的效果，設(shè)計(jì)上保持了視覺(jué)上的一貫性，整體注重內(nèi)容和個(gè)人感觸。
Blue Sky Resumes : 一個(gè)代寫簡(jiǎn)歷的小團(tuán)隊(duì)，Header 部分的 Flash 動(dòng)畫很好地暗合了公司的名字，值得注意的是，在這段動(dòng)畫加載之前，Header 部分是以簡(jiǎn)單的圖形填補(bǔ)動(dòng)畫加載前的空白的，這種漸進(jìn)式體驗(yàn)非常體貼。
[Page: ]
Mailchimp : 小猴子視覺(jué)表征隨處可見(jiàn)，使用 ASCII 字符動(dòng)畫顯示最新動(dòng)態(tài)。
[Page: ]
快捷鍵導(dǎo)航
現(xiàn)代的 Web，越來(lái)越擁有桌面應(yīng)用的特質(zhì)，借助 JavaScript，傳統(tǒng)的 Web 站點(diǎn)變得更富有交互性，鍵盤快捷鍵導(dǎo)航開(kāi)始流行，其中最著名的例子是照片共享站點(diǎn) Flickr 和 FFFFound?？旖萱I導(dǎo)航曾一度是 Flash 站點(diǎn)的專利，現(xiàn)在越來(lái)越多出現(xiàn)在基于 CSS 的站點(diǎn)，Google Reader 是一個(gè)最典型的例子，還有更多站點(diǎn)也做得非常好。
They Make Apps ： 幾個(gè)月前，他們有一個(gè)鍵盤導(dǎo)航模式，使用箭頭在內(nèi)容之間穿梭，回車鍵展示細(xì)節(jié)內(nèi)容，Escape 鍵返回主頁(yè)面。但不知何故，鍵盤導(dǎo)航功能現(xiàn)在已經(jīng)去掉了。
Mad-ar.ch ： 基于 Flash，因此可以實(shí)現(xiàn)很高級(jí)的導(dǎo)航，按 c 到留言頁(yè)，按 - 和 + 縮放圖片，諸如此類。
[Page: ]
9GAG : 一個(gè)社會(huì)化圖片書簽站點(diǎn)，按 j 和 k 前進(jìn)或后退，使用 l 鍵為當(dāng)前圖片投票。
FFFFound! : 最早的圖片書簽網(wǎng)站之一，按 h 鍵返回頁(yè)面頂部，按 v 改變視圖，同樣 j 和 k 表示前進(jìn)和后退。
[Page: ]
Feta : 另一個(gè)基于 Flash 的站點(diǎn)，使用箭頭鍵在不同項(xiàng)目之間穿梭，下箭頭表示選擇，上箭頭返回。
NY Times: Times Skimmer : 紐約時(shí)報(bào)的新聞概要頁(yè)擁有很好的鍵盤導(dǎo)航功能，使用箭頭鍵在新聞間前進(jìn)后退，使用 Shift 鍵縮放，返回頂部按 t，刷新當(dāng)前內(nèi)容按 r，選擇新聞按 a 和箭頭。
[Page: ]
Pictory : 照片故事雜志，同樣使用 j 和 k 在不同圖片之間瀏覽。
CrushLovely : 一個(gè)單頁(yè)式站點(diǎn)，使用箭頭鍵在不同部分之間瀏覽。
[Page: ]
Thinking for a Living : 使用左右箭頭鍵導(dǎo)航。
Picnic Extraterrestre : 一個(gè)非常不同的設(shè)計(jì)，模仿圖文電視風(fēng)格，所有導(dǎo)航內(nèi)容都可以通過(guò)數(shù)字鍵實(shí)現(xiàn)。
[Page: ]
Web的平面設(shè)計(jì)風(fēng)
現(xiàn)代 Web 設(shè)計(jì)，還追求平面設(shè)計(jì)般的精致與創(chuàng)意，以下這些示例站點(diǎn)，擁有雜志和海報(bào)般的設(shè)計(jì)風(fēng)格，醒目的題頭，多欄，縮進(jìn)，圖片包圍，旁注與腳注，諸如此類。
Design Informer: Grid-Based Web Design, Simplified 擁有兩欄式結(jié)構(gòu)，將文字和圖片清晰地左右分開(kāi)。
A Lesson on How to Be a Villain : 一個(gè)擁有出色設(shè)計(jì)和獨(dú)特布局的站點(diǎn)，CSS 加 Table 布局，有時(shí)候，這是 Web 平面設(shè)計(jì)化的必要技術(shù)。
[Page: ]
Evan Dinsmore: 21 : 海報(bào)式設(shè)計(jì)，使用生動(dòng)的圖片替代文字，不好的一面是，用戶界面不夠有好。（Web 平面設(shè)計(jì)化的固有問(wèn)題 - 譯者）
The Bold Italic: Dr. Feel Good : 雜志式布局，多欄，如果將頁(yè)面打印出來(lái)，你也許不相信這是個(gè) Web 頁(yè)面。
[Page: ]
A Way Back: Revised Font Stack ： 非常精細(xì)的設(shè)計(jì)，大型圖片橫跨整個(gè)頁(yè)面。
Chris Coyier: The Safari Challenge : 一個(gè)微妙的設(shè)計(jì)，大面積留白，多欄文字，從美學(xué)上看，更像一頁(yè)書。
[Page: ]
Kyle Fielder: Keeping Curious : 多像那些舊雜志的畫面。
Sleepover: A Critical Analysis of my Shoes : 簡(jiǎn)單的網(wǎng)格布局，文字左右對(duì)齊，圖片也漂亮，不過(guò)左右對(duì)齊式文字在 Web 上似乎不怎么行得通。
[Page: ]
Yaron Schoen: Too Many Buttons : 平面設(shè)計(jì)化的 Web 頁(yè)面需要更多東西，背景圖片與配色，CSS 式樣，這個(gè)示例說(shuō)明了這些。
The Bold Italic: Keep Off the Grass : 另一個(gè)多欄式設(shè)計(jì)示例。
[Page: ]
The Bold Italic: Cinderella Story : 受平面設(shè)計(jì)影響
Travis Neilson: Default Switch : 一個(gè)冷靜的，簡(jiǎn)潔的設(shè)計(jì)
