2010年國(guó)際網(wǎng)站設(shè)計(jì)風(fēng)格發(fā)展趨勢(shì)分析！

2010年網(wǎng)站設(shè)計(jì)發(fā)展趨勢(shì)的分析！?? ?
?? ? ?我們看到更好的互動(dòng)設(shè)計(jì)，以及更美觀的設(shè)計(jì)。 而且我們看到越來(lái)越多的個(gè)人，從事和令人難忘的網(wǎng)站了。 但究竟什么是使不同？ 什么是網(wǎng)頁(yè)設(shè)計(jì)的新方向今天的標(biāo)題嗎？ 有什么新技術(shù)，概念和想法變得越來(lái)越重要？ 在這篇文章中，我們提出一些意見(jiàn)狀態(tài)網(wǎng)頁(yè)設(shè)計(jì)上的電流。 我們描述了 現(xiàn)有的和即將到來(lái)的趨勢(shì) ，并解釋可能演變網(wǎng)頁(yè)設(shè)計(jì)如何在未來(lái)數(shù)月和數(shù)年。 我們也將觸及我們作為Web設(shè)計(jì)者應(yīng)準(zhǔn)備好繼續(xù)掌握新的機(jī)遇和挑戰(zhàn)。
?? ? ?網(wǎng)站設(shè)計(jì)是一個(gè)多變的產(chǎn)業(yè)。?就像每一個(gè)其他形式的藝術(shù)表現(xiàn)，網(wǎng)站設(shè)計(jì)經(jīng)歷了一個(gè)令人驚訝的持續(xù)快速發(fā)展。?一旦愛(ài)好者樂(lè)園，它現(xiàn)在已經(jīng)成為一個(gè)成熟的具有較強(qiáng)吸引力的美學(xué)和功能豐富的媒介。事實(shí)上，我們正在經(jīng)歷可能是網(wǎng)頁(yè)設(shè)計(jì)的黃金時(shí)期 - 或至少是迄今為止最好的時(shí)期。?我們已在我們的處置（CSS3中，HTML5的，字體嵌入，等），提供便利的免費(fèi)資源，強(qiáng)大的設(shè)計(jì)界也大量強(qiáng)大的新工具（如果您需要更多的?。┛煽康腤eb標(biāo)準(zhǔn)的支持，主要瀏覽器。

1。 設(shè)計(jì)怡情

作為設(shè)計(jì)師，我們的工作是有效溝通的想法。 對(duì)于每一個(gè)特定的消息，我們創(chuàng)建了一個(gè)上下文中的信息將最好的工作，指導(dǎo)用戶實(shí)現(xiàn)他們的任務(wù)，贏得他們的信任，或說(shuō)服他們，無(wú)論我們是溝通。 當(dāng)然，有無(wú)窮的辦法創(chuàng)造這方面。 其中之一是設(shè)計(jì)的視覺(jué)美感，驚喜，歡樂(lè)，幸福-設(shè)計(jì)喜悅; 網(wǎng)站設(shè)計(jì)是令人難忘的和顯著的。

有吸引力的東西更好地工作，幫助重點(diǎn)和保持用戶的關(guān)注。 興奮難忘的設(shè)計(jì)，提高了產(chǎn)品和品牌，從而增加參與。 事實(shí)上，一個(gè)強(qiáng)大的，可靠的客戶和他們之間的感情關(guān)系的觀眾可能是有史以來(lái)最好的事情發(fā)生在你的事業(yè)。

⁴
Brizk設(shè)計(jì)工作室^四 有一個(gè)驚人的美學(xué)設(shè)計(jì)，與微妙的動(dòng)畫，漂亮的印刷字體和一個(gè)干凈的布局。 當(dāng)你頁(yè)腳懸停在紅色的鳥(niǎo)，小Twitter的框顯示出來(lái)。 一流的設(shè)計(jì)，是一個(gè)純粹的喜悅。

雖然絕大多數(shù)的品牌仍然保持沉默，被動(dòng)和客觀的，我們已經(jīng)觀測(cè)到一些額外的關(guān)注小更多的網(wǎng)站努力進(jìn)行我們的感官，無(wú)論是通過(guò)強(qiáng)有力的審美情趣，通過(guò)在內(nèi)容塊或干脆詼諧動(dòng)畫，在“關(guān)于”頁(yè)面設(shè)計(jì)元素。 這樣的設(shè)計(jì)很漂亮看，有趣的導(dǎo)航，但最重要的，令人難忘的 - 原因很簡(jiǎn)單，他們是不同的。 令人愉快的個(gè)人風(fēng)格加入到您的設(shè)計(jì)中，您在人群中脫穎而出，給觀眾談?wù)摰臇|西并與朋友和同事分享。 這是個(gè)良好的開(kāi)端。

您可以引出各種設(shè)置的喜悅：在您的維護(hù)模式頁(yè)上，404錯(cuò)誤頁(yè)面，在您預(yù)先加載器和其他任何地方。 這樣做是為了給他們一些驚喜愉快的談?wù)撚慰汀?/span>

賞金和Bev⁵
賞金和Bev是一個(gè)美麗的網(wǎng)頁(yè)設(shè)計(jì)飲料公司。 除了其微妙的懸停效果和動(dòng)畫，網(wǎng)站有一些不錯(cuò)的演員：如果你用鼠標(biāo)向下滾動(dòng)滾輪，頁(yè)面手動(dòng)一個(gè)小的彈出，詢問(wèn)您是否需要電梯。 排版強(qiáng)而難忘的，設(shè)計(jì)是好玩。 簡(jiǎn)單，清晰和個(gè)人，該網(wǎng)站留下了強(qiáng)烈的正面的印象。

⁵

Analog.coop⁶
模擬提供了一個(gè)非常個(gè)人的體驗(yàn)參觀者。 當(dāng)您訪問(wèn)的頁(yè)面，它會(huì)顯示您所在，并告訴您的團(tuán)隊(duì)成員是誰(shuí)（在我們的情況下，艾倫和喬恩，誰(shuí)是大約500英里之外的布里斯托爾）最近給你。 該網(wǎng)站有一個(gè)很好的復(fù)活節(jié)彩蛋未第一眼看到夫婦。 您可能要玩頭和團(tuán)隊(duì)的照片左右。 該網(wǎng)頁(yè)是有趣的探索。

⁶

⁶

Forrst⁷
漂亮的設(shè)計(jì)有吸引力的視覺(jué)元素和原始導(dǎo)航 - 一個(gè)設(shè)計(jì)，管理，使良好的持久的印象。 請(qǐng)注意如何在瀏覽器時(shí)，調(diào)整窗口大?。ㄒ暡钚?yīng)）頁(yè)面上改變區(qū)域的背景。 即用“登錄”是很涼了。 令人驚訝的是，形式是建立在與某些原因表。

⁷

比利坦普林⁸
在他的博客，比利坦普林集中在他生活的小勝利。 每個(gè)帖子記錄了個(gè)人成就，展示了定制設(shè)計(jì)的獎(jiǎng)?wù)潞蛯?duì)征服的解釋。 比利整個(gè)網(wǎng)站使用這個(gè)比喻，說(shuō)“超級(jí)網(wǎng)絡(luò)能力”（敏捷的CSS，PHP的準(zhǔn)備，使用IE6強(qiáng)化等）和“英雄設(shè)計(jì)實(shí)力”（人類友好的目標(biāo)，銳意創(chuàng)新的細(xì)節(jié)，等等）。 他還擁有一個(gè)網(wǎng)站上的個(gè)人投資組合。 請(qǐng)注意好配色方案適合的主題。 設(shè)計(jì)簡(jiǎn)潔，美觀，而“成就”扭曲是不尋常的，令人難忘。

⁸

混合⁹
混合實(shí)驗(yàn)室，為設(shè)計(jì)人員和Web開(kāi)發(fā)人員社區(qū)的博客，沒(méi)有隱藏的功能，吸引人的動(dòng)畫或懸停效果顯著。 相反，它有一個(gè)一致的，視覺(jué)上吸引人的設(shè)計(jì)：你能點(diǎn)在哪里以及如何往往色彩鮮艷圓圈整個(gè)網(wǎng)站重復(fù)？ 該設(shè)計(jì)強(qiáng)調(diào)的內(nèi)容，具有個(gè)人風(fēng)格。 只是美麗。

⁹

藍(lán)天簡(jiǎn)歷¹⁰
這是在寫簡(jiǎn)歷網(wǎng)站有一個(gè)小團(tuán)隊(duì)，在設(shè)計(jì)美觀大方不尋常的演員夫婦：標(biāo)頭包含一個(gè)基于Flash的云動(dòng)畫完全符合公司的品牌。 網(wǎng)站上也有微妙的動(dòng)畫和軟懸停效果。 而“關(guān)于”頁(yè)面介紹了一個(gè)難忘的方式相當(dāng)原始和每一個(gè)同事。

¹⁰

Mailchimp¹¹
MailChimp大量采用了在其設(shè)計(jì)的所有方面猴子的比喻。 最近的更新通知客戶，Mailchimp目前的ASCII動(dòng)畫告訴用戶什么是發(fā)生在后臺(tái)，這是令人驚訝的還不錯(cuò)不引人注目的細(xì)節(jié)。 該公司還使用個(gè)人的，友好的，也許有時(shí)令人討厭的語(yǔ)言在解決用戶的需求。 這是深思熟慮的圖像MailChimp保存在Web應(yīng)用程序的一部分。

¹²

¹¹
大版本¹³

進(jìn)一步閱讀

• 52周UX上：喜悅設(shè)計(jì)¹⁴
  這篇文章解釋了怡情設(shè)計(jì)的重要性和特點(diǎn)，嘗試一些網(wǎng)站進(jìn)行用戶的感官。
• 在糖果國(guó)防眼¹⁵
  研究證明，有吸引力的東西更好地工作。 我們的想法不能脫離我們的感覺(jué)。 下次老板，客戶或同事在美的概念，界面設(shè)計(jì)是非常重要的嘲笑，他們的同輩人點(diǎn)這里。
• 看起來(lái)很重要，因?yàn)槲覀兯杏懈星榈?/span>¹⁶
  討論了情緒和設(shè)計(jì)美學(xué)的重要性。

2。 按鍵導(dǎo)航

作為設(shè)計(jì)師試圖使他們的設(shè)計(jì)更直觀，這是毫不奇怪的網(wǎng)站變得更加敏感。 這不僅適用于用戶界面的現(xiàn)代Web應(yīng)用程序（這是為桌面應(yīng)用程序變得強(qiáng)大 - 而且往往更聰明），但與廣泛采用的JavaScript庫(kù)，“經(jīng)典”的網(wǎng)站正在變得更強(qiáng)大和互動(dòng)，也。 一個(gè)辦法讓網(wǎng)站更加適應(yīng)是通過(guò)“導(dǎo)航按鍵”，這還沒(méi)有被廣泛沿用至今。 但是，最近我們觀察更多的設(shè)計(jì)方案有效地執(zhí)行本。 對(duì)這種導(dǎo)航最流行的設(shè)置是在諸如Flickr或FFFFound攝影網(wǎng)站。

總的想法是讓用戶的鍵盤快捷方式，幫助他們完成繁瑣的任務(wù)幻燈片，如導(dǎo)航博客帖子一間，通過(guò)在移動(dòng)圖像，改變當(dāng)前視圖一個(gè)喜歡橫向到縱向網(wǎng)格），物品（如：與部分之間的導(dǎo)航一個(gè)網(wǎng)站。 導(dǎo)航按鍵是常見(jiàn)的閃存為基礎(chǔ)的設(shè)計(jì)，但是我們現(xiàn)在看到它適用于基于CSS的設(shè)計(jì)，太。 谷歌閱讀器^17個(gè) 按鍵的導(dǎo)航是一個(gè)最好的例子先進(jìn)的，但其他網(wǎng)站有很好的實(shí)現(xiàn)了。

它們使應(yīng)用程序¹⁸
一兩個(gè)月前，他們使應(yīng)用程序開(kāi)始作為一種替代傳統(tǒng)的滾動(dòng)順利，為用戶提供先進(jìn)的鍵盤導(dǎo)航。 用戶可以同時(shí)使用之間切換，在頁(yè)面的主要導(dǎo)航下拉菜單模式。 在“鍵盤導(dǎo)航模式，”用戶使用箭頭鍵來(lái)瀏覽內(nèi)容塊之間，“返回”鍵觸發(fā)了詳細(xì)的意見(jiàn)，“逃離”返回到主網(wǎng)頁(yè)。 出于某種原因，這個(gè)導(dǎo)航是不再可用。

¹⁸
圖片來(lái)源¹⁹

狂ar.ch²⁰
馬克安東達(dá)門的網(wǎng)站是基于Flash的，它的導(dǎo)航是很先進(jìn)的：用戶可以跳轉(zhuǎn)到以“C”與尺度圖像的聯(lián)系方式“ - ”和“+”，然后導(dǎo)航和排序圖像，并通過(guò)文本滾動(dòng)垂直方向鍵。

²⁰
圖片來(lái)源¹⁹

9GAG²¹
9GAG是一個(gè)社會(huì)性書簽網(wǎng)站的形象。 用戶可以導(dǎo)航到下一個(gè)和前一個(gè)影像使用的“J”和“k”分別。 目前的圖像可以贊成票通過(guò)的“L”（愛(ài)）：無(wú)鼠標(biāo)滾動(dòng)必要的。 在這種情況下，一到網(wǎng)格視圖的快捷方式會(huì)很有用。

²¹

FFFFound！²²
第一次社會(huì)性書簽網(wǎng)站的形象之一，F(xiàn)FFFound提供快捷跳轉(zhuǎn)到頁(yè)面的頂部（“H股”），改變圖像的視圖（“V”形），瀏覽圖片（“K”的和“j”）和跳到下一頁(yè)（“升”）。

²²

費(fèi)塔²³
還有一個(gè)基于Flash的網(wǎng)站，讓您使用左，右箭頭鍵來(lái)瀏覽一個(gè)節(jié)項(xiàng)目，向下鍵選擇和向上鍵返回。

²³

紐約時(shí)報(bào)：時(shí)報(bào)斯基默²⁴
紐約時(shí)報(bào)的快速概覽頁(yè)面已經(jīng)非常先進(jìn)的導(dǎo)航按鍵。 用戶可以使用箭頭瀏覽部分，放大使用“轉(zhuǎn)變，”帶“T”，返回到頂部刷新“R”和使用“A”和箭頭選擇當(dāng)前節(jié)的文章。 學(xué)習(xí)的關(guān)鍵是有點(diǎn)費(fèi)時(shí)，但一旦你得到他們，瀏覽網(wǎng)頁(yè)時(shí)要容易得多。

²⁴

Pictory²⁵
PictoryMag，致力于照片故事一本雜志，也有“j”和“K”的導(dǎo)航系統(tǒng)來(lái)瀏覽圖片。

²⁵

CrushLovely²⁶
CrushLovely，單頁(yè)的投資組合，讓您使用箭頭鍵瀏覽的網(wǎng)頁(yè)板塊。

²⁶

想了生活²⁷
對(duì)于生活的思考可以讓用戶使用左，右箭頭瀏覽功能之間的報(bào)價(jià)。

²⁷

野餐Extraterrestre²⁸
除了是最不尋常的，我們已經(jīng)看到的設(shè)計(jì)之一，伊萬(wàn)Ferreiro的野餐Extraterrestre有相當(dāng)先進(jìn)的導(dǎo)航按鍵。 圖文電視和模仿的設(shè)計(jì)做了很好的工作。 所有導(dǎo)航項(xiàng)目可以加載使用的數(shù)字快捷鍵。 現(xiàn)在的樂(lè)趣！

²⁸

編碼技術(shù)和教程

請(qǐng)注意，當(dāng)您的設(shè)計(jì)實(shí)施按鍵導(dǎo)航，請(qǐng)確保您定義的快捷方式不與常見(jiàn)的瀏覽器快捷鍵，操作系統(tǒng)快捷鍵，屏幕閱讀器的快捷方式或用戶定義的快捷鍵沖突。 這聽(tīng)起來(lái)可能比現(xiàn)在簡(jiǎn)單。 像往常一樣，在實(shí)施前廣泛的測(cè)試（有精明和新手用戶）將幫助您找到您的快捷方式問(wèn)題。 這是安全的假設(shè)，箭頭鍵，“j”和“K”的組合，“越獄”的關(guān)鍵是安全的。 另一方面，使用“控制”，“Alt”鍵和“Shift”鍵是不推薦。

此外，把作為附加按鍵（因此可選）功能，將不會(huì)提供給誰(shuí)在瀏覽器中禁用了JavaScript的用戶導(dǎo)航。 因此，強(qiáng)烈建議您提供作為導(dǎo)航輔助，不是主要的，層鍵盤導(dǎo)航。 下面，你會(huì)發(fā)現(xiàn)在你的設(shè)計(jì)實(shí)施了一些有用的按鍵導(dǎo)航技術(shù)，教程和參考。

• 使用jQuery添加鍵盤導(dǎo)航²⁹
  這個(gè)截屏介紹如何實(shí)現(xiàn)鍵盤導(dǎo)航到移動(dòng)滑塊后退和前進(jìn)。 演示和代碼都可用。
• 如何創(chuàng)建按鍵導(dǎo)航使用jQuery³⁰
  本教程介紹了如何實(shí)現(xiàn)按鍵導(dǎo)航瀏覽網(wǎng)站部分。
• 先進(jìn)的導(dǎo)航按鍵用jQuery³¹
  你可以用鼠標(biāo)選擇鏈接，但你也可以使用方向鍵（即向上和向下）來(lái)瀏覽列表。 這個(gè)腳本是有點(diǎn)多余的功能，因?yàn)楫?dāng)用戶將鼠標(biāo)懸停結(jié)合按鍵先進(jìn)。
• 在JavaScript中使用鍵盤快捷鍵³²
  在本文中，您將學(xué)習(xí)如何使用JavaScript和jQuery框架，沒(méi)有鍵盤快捷鍵。
• 如何建立一個(gè)導(dǎo)航網(wǎng)站使用鍵盤：PSD轉(zhuǎn)HTML³³
  本文著眼于如何添加鍵盤導(dǎo)航網(wǎng)站使用幾行簡(jiǎn)單的JavaScript。 首先，您將創(chuàng)建一個(gè)在Photoshop簡(jiǎn)單的主題，然后轉(zhuǎn)換成工作網(wǎng)站，提供鍵盤功能跳轉(zhuǎn)頁(yè)面上。

插件和有用的資源

• 白堊熱鍵：跨瀏覽器的JavaScript jQuery插件用于連接鍵盤事件³⁴
  該jQuery.Hotkeys插件可以讓你輕松地添加和刪除鍵盤事件的處理程序代碼中的任何地方，它支持幾乎所有的按鍵組合。 綁定和取消綁定一個(gè)熱鍵組合需要一行代碼。
• 鍵盤導(dǎo)航的jQuery插件³⁵
  鍵盤導(dǎo)航的jQuery插件提供的網(wǎng)頁(yè)元素進(jìn)行導(dǎo)航的能力，并通過(guò)鍵盤上的箭頭鍵激活。
• 快捷鍵：可編程鍵盤快捷鍵與Prototype JS庫(kù)³⁶
  快捷鍵提供的功能類似的訪問(wèn)鍵屬性，但更多的是對(duì)鍵盤驅(qū)動(dòng)接口細(xì)粒度控制讓許多增強(qiáng)功能。
• 檢測(cè)重點(diǎn)招：參考表³⁷
  檢測(cè)用戶的擊鍵原來(lái)是一個(gè)專業(yè)部門的事件處理。 這頁(yè)詳細(xì)介紹了一些更惱人的問(wèn)題，包括強(qiáng)制性的兼容性表。

3。 打印設(shè)計(jì)的影響

而喜悅的設(shè)計(jì)主要是突發(fā)而令人愉悅的一筆，設(shè)計(jì)旅客留下深刻印象，現(xiàn)代的Web設(shè)計(jì)人員經(jīng)常去與他們工作的底層細(xì)節(jié)一步，試驗(yàn)，生產(chǎn)更多的創(chuàng)意和獨(dú)特的布局。 事實(shí)上，人們并沒(méi)有成為一個(gè)專家，看到了傳統(tǒng)的印刷設(shè)計(jì)技術(shù)，在網(wǎng)絡(luò)上日益增長(zhǎng)的影響力。 他們往往表現(xiàn)在所謂的“藝術(shù)指導(dǎo)的”博客文章（或“blogazines”），因此每個(gè)博客文章具有獨(dú)特的設(shè)計(jì)和精心制作的。

這些網(wǎng)站的布局往往類似于印刷雜志或海報(bào)，以醒目的標(biāo)題的，多列文本，突出報(bào)價(jià)，縮進(jìn)的文本，支持圖像，sidenotes和腳注。 堅(jiān)持的設(shè)計(jì)通常有較強(qiáng)的電網(wǎng)，生動(dòng)的排版。

³⁸
設(shè)計(jì)舉報(bào)人：基于網(wǎng)格的網(wǎng)頁(yè)設(shè)計(jì)，簡(jiǎn)化³⁸ 有一個(gè)簡(jiǎn)單干凈的兩列布局，明確區(qū)分文字插圖的。 請(qǐng)注意頁(yè)面上的大寫字母在作者的姓名標(biāo)題下的設(shè)計(jì)，報(bào)價(jià)也可見(jiàn)英寸 這里的內(nèi)容決定了布局。

在大多數(shù)情況下，藝術(shù)指導(dǎo)的設(shè)計(jì)是推動(dòng)純粹的雄心和它們的創(chuàng)造者的決心。 這樣的設(shè)計(jì)主要是自由職業(yè)者的網(wǎng)站上找到（即個(gè)人項(xiàng)目的水果），很少發(fā)現(xiàn)企業(yè)設(shè)置。 主要的障礙，更廣泛地采用這些技術(shù)的是，這樣的設(shè)計(jì)創(chuàng)作（或者更確切地說(shuō)，其執(zhí)行與（X）HTML和CSS）是費(fèi)時(shí)。 藝術(shù)指導(dǎo)的布局是相當(dāng)困難的代碼和維護(hù)，而且他們往往需要內(nèi)聯(lián)CSS樣式，否則設(shè)計(jì)師將結(jié)束與聯(lián)合國(guó)在其語(yǔ)義類幾十個(gè)樣式表了。 此外，在這些網(wǎng)頁(yè)上的廣告整合很困難，因?yàn)樗麄儼言O(shè)計(jì)師的布局約束。 因此，目前，這些設(shè)計(jì)更適合，因?yàn)檩^少的開(kāi)銷更新網(wǎng)頁(yè)合適。

如果您決定定向設(shè)計(jì)，實(shí)驗(yàn)，藝術(shù)，應(yīng)注意文章的布局應(yīng)是次要的，始終支持內(nèi)容本身，而不是主宰它。 問(wèn)題是，一旦你開(kāi)始設(shè)計(jì)一個(gè)博客帖子，很容易超標(biāo)準(zhǔn)頁(yè)面元素，因?yàn)槟憧梢?，不是因?yàn)樗膬?nèi)容支配。 事實(shí)上，設(shè)計(jì)界是有都只是“一直是辯論是否藝術(shù)指導(dǎo)的設(shè)計(jì)過(guò)Photoshop處理篇³⁹，“純粹為設(shè)計(jì)而設(shè)計(jì)的緣故。

良好的設(shè)計(jì)是有效的溝通，不能以犧牲易讀性裝飾。 正如舊金山Inchauste所說(shuō)的那樣，“我認(rèn)為這是一個(gè)'挑選兩個(gè)人的情況下排序。 的選擇是：豐富的內(nèi)容，偉大的藝術(shù)指導(dǎo)和定期的時(shí)間表。 如果您嘗試全部命中三個(gè)，其中之一將開(kāi)始下降簡(jiǎn)短的“底線：。這是深受影響，平面廣告設(shè)計(jì)網(wǎng)頁(yè)設(shè)計(jì)很漂亮，但只有當(dāng)你的文章的技術(shù)支持。

關(guān)于講如何做一個(gè)小人⁴⁰
獨(dú)特的布局中的一個(gè)豐富多彩，很好地說(shuō)明了文章。 注意到一些不尋常？ 該設(shè)計(jì)基于表的布局。 設(shè)計(jì)有一個(gè)與實(shí)際信息，圖形表格數(shù)據(jù)位的CSS布局。 有時(shí)候這是必要的藝術(shù)指導(dǎo)的設(shè)計(jì)。

⁴⁰

埃文迪恩斯莫爾：21⁴¹
為Web海報(bào)設(shè)計(jì)。 本博客文章很簡(jiǎn)單，它以生動(dòng)的圖像替換累純文本。 但是，這是它的缺點(diǎn)，也：一個(gè)基于文本的版本會(huì)更方便了。

⁴¹

粗體斜體：博士感覺(jué)良好⁴²
一個(gè)非常令人印象深刻的雜志一樣的布局，多列，圖像，標(biāo)題和新的位置。 如果你只看到了這個(gè)網(wǎng)頁(yè)打印出來(lái)，你就不會(huì)認(rèn)可的設(shè)計(jì)它作為一個(gè)網(wǎng)站。 該網(wǎng)頁(yè)有40個(gè) 分區(qū) 的容器。

⁴²

的感覺(jué)：修改字體棧⁴³
很長(zhǎng)，詳細(xì)和精心的設(shè)計(jì)。 在藝術(shù)指導(dǎo)的設(shè)計(jì)，包括這一個(gè)，大的圖像常常被用來(lái)推動(dòng)布局的界限。 這種形象通常都是800至1000像素寬，填補(bǔ)了整個(gè)版面的寬度。

⁴³

克里斯Coyier：在Safari的挑戰(zhàn)⁴⁴
這是一個(gè)微妙的設(shè)計(jì)，大空間，文字，標(biāo)題，注腳和縮進(jìn)多個(gè)列。 從美學(xué)角度，它可能是從書頁(yè)。

⁴⁴

凱爾菲爾德：保持好奇⁴⁵
一個(gè)經(jīng)典。 你還記得那些使用大行情和視覺(jué)效果創(chuàng)建的文本流的舊雜志？ 請(qǐng)注意好了，這個(gè)標(biāo)題和colophone的位置在問(wèn)號(hào)。 一個(gè)好的，簡(jiǎn)單，原始設(shè)計(jì)。

⁴⁵

過(guò)夜：一個(gè)批判性分析我的鞋⁴⁶
一個(gè)簡(jiǎn)單的基于網(wǎng)格的設(shè)計(jì)，合理的文字，鞋襯線字體和漂亮的插圖。 不幸的是，對(duì)齊的文本仍然無(wú)法在網(wǎng)絡(luò)上看起來(lái)非常好。

⁴⁶

亞龍舒恩：太多的按鈕⁴⁷
有時(shí)候，藝術(shù)指導(dǎo)的博客職位要求的東西略多：像bakground的背景和顏色，以及作為一個(gè)CSS樣式位。 這個(gè)例子說(shuō)明正是這么做的。

⁴⁷

粗體斜體：勿踏草地⁴⁸
另多列布局，顯著的例子...

⁴⁸

粗體斜體：灰姑娘的故事⁴⁹
...和另外一個(gè)。 打印設(shè)計(jì)靈感處于最佳狀態(tài)。

⁴⁹

特拉維斯尼爾森：默認(rèn)開(kāi)關(guān)⁵⁰
一個(gè)平靜，簡(jiǎn)單，簡(jiǎn)潔的設(shè)計(jì)自定義標(biāo)題。

⁵⁰

進(jìn)一步閱讀

• 再用驚人的超級(jí)Blog的未來(lái)發(fā)展趨勢(shì)³⁹
• 死亡后的無(wú)聊博客？⁵¹
  從這里的一個(gè)關(guān)于藝術(shù)指導(dǎo)的設(shè)計(jì)上碎雜志的文章。
• 賈森關(guān)于他的反思圣瑪麗亞講座⁵²
• WordPress的藝術(shù)指導(dǎo)插件⁵³
• WordPress郵寄樣式插件⁵⁴
• WordPress的指定插件⁵⁵
• 杰森圣瑪麗亞：印刷的設(shè)計(jì)的影響⁵⁶
• HeartDirected⁵⁷
  一個(gè)藝術(shù)指導(dǎo)的設(shè)計(jì)廊。
• 獨(dú)特的文章設(shè)計(jì)⁵⁸
  另一種藝術(shù)指導(dǎo)的設(shè)計(jì)廊。

4。 Horizontalism

在過(guò)去的一年，我們觀察到一個(gè)緩慢的網(wǎng)頁(yè)設(shè)計(jì)重型方向轉(zhuǎn)化的文本。 設(shè)計(jì)不僅是獲得深度和現(xiàn)實(shí)主義，但導(dǎo)航的變化中。 一些設(shè)計(jì)師正在充實(shí)導(dǎo)航（如傳統(tǒng)的垂直滾動(dòng)與滑動(dòng) 這里⁵⁹），通常在兩個(gè)滾動(dòng)滾動(dòng)垂直和水平方向，甚至是純粹的水平。 這就是所謂的“horizontalism?！?/span>

網(wǎng)站與水平滾動(dòng)條一直比較困難，因?yàn)閷?dǎo)航設(shè)計(jì)的鼠標(biāo)滾動(dòng)垂直。 但這些設(shè)備的出現(xiàn)，多點(diǎn)觸摸迫使我們重新思考這種設(shè)計(jì)的可用性問(wèn)題。 畢竟，無(wú)論是用戶瀏覽垂直或水平上這樣的設(shè)備并沒(méi)有真正發(fā)揮作用。 而一些插件（如 滾動(dòng)⁶⁰ 和 jScrollHorizontalPane⁶¹）簡(jiǎn)化學(xué)習(xí)曲線的行動(dòng)，使用戶通過(guò)使用橫向?qū)Ш捷啒?biāo)準(zhǔn)垂直滾動(dòng)鼠標(biāo)，從而縮小。

水平滾動(dòng)條已經(jīng)出來(lái)了在十年內(nèi)，但今天的感覺(jué)，他們也有了新的上下文。 水平移動(dòng)到滾動(dòng)條可能是一個(gè)在一些設(shè)計(jì)者試圖以提供更鮮明的用戶體驗(yàn)。 這樣的設(shè)計(jì)通常是經(jīng)過(guò)精心策劃，發(fā)現(xiàn)主要網(wǎng)站和精心組合電子commmerce網(wǎng)站。 無(wú)論horizontalism將擴(kuò)大到更多種類的網(wǎng)站仍然將在今后幾個(gè)月內(nèi)看到。

想了生活⁶²
這篇文章不僅討論關(guān)于可讀性的優(yōu)點(diǎn)和缺點(diǎn)horizontalism，但它也有一個(gè)很好的水平布局本身具有多個(gè)文本列。 雖然方向是不尋常的第一眼，看后很愉快，舒適。

⁶²

OurType⁶³
一個(gè)與水平閃存為基礎(chǔ)的導(dǎo)航比利時(shí)型鑄造。 內(nèi)容塊幻燈片水平。

⁶³

榮格訴馬特⁶⁴
這個(gè)網(wǎng)站有一個(gè)導(dǎo)航水平的時(shí)間表。 請(qǐng)注意有沒(méi)有水平滾動(dòng)條;旅客使用垂直滾輪導(dǎo)航水平。

⁶⁴

您的輔助⁶⁵
是許多所謂的“單頁(yè)的布局?！绷诉@些網(wǎng)站全部?jī)?nèi)容是在一個(gè)頁(yè)面上，這是導(dǎo)航使用鍵盤，鼠標(biāo)或菜單（本網(wǎng)站使用了第三個(gè)選項(xiàng)）。 在這里，我們有一個(gè)良好的（普通）導(dǎo)航相結(jié)合的縱向和橫向（顯示 ScrollTo的jQuery插件⁶⁶ 在行動(dòng)）。

⁶⁵

其中二十六個(gè)⁶⁷
這個(gè)投資組合的水平導(dǎo)航不同的。 除了“上一頁(yè)”和“Next”按鈕，用戶也會(huì)變的下拉菜單中選定內(nèi)容的概述。 一旦他們選擇一個(gè)選項(xiàng)，頁(yè)面水平滾動(dòng)。 用鼠標(biāo)滾輪的水平可能會(huì)改善這種導(dǎo)航設(shè)計(jì)的可用性。

⁶⁷

賈克斯葡萄園⁶⁸
此酒店網(wǎng)站導(dǎo)航有趣和獨(dú)特的水平，這是你瀏覽時(shí)觸發(fā)的葡萄酒目錄。 無(wú)論是背景圖片和幻燈片的葡萄酒水平的描述。 簡(jiǎn)單的CSS和JavaScript的使用。 一個(gè)美麗動(dòng)人的設(shè)計(jì)。

⁶⁸

發(fā)光霍洛韋⁶⁹
和Candice Holloway的組合有一個(gè)很好的利用水平布局。 她的作品被放置在“墻”;橫向?qū)Ш绞亲鳛橐粋€(gè)藝術(shù)畫廊漫步比喻。 同樣有趣：滾動(dòng)時(shí)觸發(fā)了您的鼠標(biāo)箭頭的水平徘徊，沒(méi)有點(diǎn)擊必要的。

⁶⁹

雅馬哈銀座⁷⁰
你會(huì)發(fā)現(xiàn)，隨著實(shí)驗(yàn)的角度設(shè)計(jì)。 有時(shí)，方向是對(duì)角...

⁷⁰

Edpeixoto⁷¹
...有時(shí)布局剛剛掛在空中...

⁷¹

的ASOS⁷²
...有時(shí)它的傾斜。 請(qǐng)注意各元素都沒(méi)有垂直線。

⁷²

進(jìn)一步閱讀

• Horizontalism和可讀性⁶²
• 周五焦點(diǎn)：傾斜的網(wǎng)頁(yè)設(shè)計(jì)⁷³
  展示的設(shè)計(jì)是一個(gè)傾斜到一邊，避免垂直線。
• 水平滾動(dòng)的網(wǎng)站：展示和教程⁷⁴
• jQuery的ScrollTo插件⁶⁶
  這個(gè)插件可以讓用戶通過(guò)四溢的元素和屏幕本身滾動(dòng)。 你得到很多不同的自定義選項(xiàng)和各種方式來(lái)指定哪個(gè)方向滾動(dòng)。

5。 富強(qiáng)印刷術(shù)

印刷術(shù)起到了多年網(wǎng)頁(yè)設(shè)計(jì)的重要作用。 大膽，強(qiáng)烈，沉重的標(biāo)題可以有效地傳達(dá)組合的目的，一個(gè)電子商務(wù)網(wǎng)站，或者在細(xì)微結(jié)構(gòu)，內(nèi)容和標(biāo)題幫助提高可讀性。 顯然，大的變化，我們今天看到的更豐富，更靈活的排版，使部分可能由 @字體面 出現(xiàn)屬性和TypeKit服務(wù)，如嵌入字體。 豐富的排版元素現(xiàn)在可以選擇并復(fù)制到瀏覽器，這是不是很簡(jiǎn)單的一個(gè)幾年前。

未來(lái)是大的，大膽的和排版。 豐富的字體家庭將不僅用于頭條，但對(duì)身體的副本，使網(wǎng)絡(luò)到印刷排版慣例。 此外，設(shè)計(jì)者將復(fù)雜的實(shí)驗(yàn)更豐富， 襯線字體⁷⁵ 和大膽的氣勢(shì)， 平板字體⁷⁶，圖像支持微妙。 網(wǎng)頁(yè)設(shè)計(jì)師也加入更多的深入到排版與 文字陰影 的CSS3屬性研究。 當(dāng)然，這種微妙的聯(lián)系非常緊密的布局選擇。 這些排版設(shè)計(jì)往往是基于網(wǎng)格的設(shè)計(jì)techniqes和借鑒從印刷注腳，如sidenotes和。

我們還注意到，設(shè)計(jì)師都在延伸的字體棧，增加后備字體的情況下越來(lái)越多的一個(gè)指定的字體不可用。 這很好，因?yàn)椴煌闹灰矫嬷亓浚┑谋戎担ɑ蜃煮w不可過(guò);一些屏幕字體將出現(xiàn)更廣泛的或字體高度大于其他，因此有較大的長(zhǎng)寬比，這意味著一些用戶將看到您的網(wǎng)頁(yè)在字體大小會(huì)比其他人要小得多。 您可能希望了解更多的CSS字體棧 拉斯威克利的介紹⁷⁷。

基利安穆施泰爾⁷⁸
基利安穆斯特爾使用相當(dāng)堆棧擴(kuò)展serif字體為他設(shè)計(jì)： 字體家庭：帕拉提諾，“帕拉提諾行型活字”，“書安蒂奎”，Constantia的時(shí)代，“宋體”，襯線;。 的博客的職位基爾安也有sidenotes。

⁷⁸

extrapolish⁷⁹
請(qǐng)注意，在這個(gè)網(wǎng)頁(yè)的設(shè)計(jì)機(jī)構(gòu)的波蘭網(wǎng)站的文字大多設(shè)在首都：導(dǎo)航菜單，介紹性文字，甚至聯(lián)系地址已全面首都。 然而，冷靜的設(shè)計(jì)，清潔和拋光。

⁷⁹

DNA的達(dá)爾文⁸⁰
這個(gè)網(wǎng)站在其整個(gè)設(shè)計(jì)只襯線字體： 字體家庭：“skolar - 1”，“skolar - 2”，格魯吉亞，時(shí)代，襯線;。 注意到文本拆分到列，我們沒(méi)有看到這最后的一年。

⁸⁰

COG'AOKE⁸¹
同樣，巨大的，大膽的平板印刷術(shù)，使一個(gè)強(qiáng)烈的印象，讓觀眾。

⁸¹

TRüF⁸²
這種設(shè)計(jì)結(jié)合了機(jī)構(gòu)精簡(jiǎn)，同樣大膽的無(wú)襯線字體大膽的色彩選擇。

⁸²

先鋒⁸³
這個(gè)網(wǎng)站結(jié)合了生動(dòng)的形象和頑皮的版式。 設(shè)計(jì)看起來(lái)像一本小冊(cè)子或超過(guò)“經(jīng)典”的網(wǎng)頁(yè)海報(bào)更多。

⁸³

科利⁸⁴
西蒙科里森的微妙注意最微小的細(xì)節(jié)使排版字面上脫穎而出。 沒(méi)有大膽的，尖叫排版這里只是清晰，美觀的設(shè)計(jì)。

⁸⁴

圣約翰的圣經(jīng)⁸⁵
本網(wǎng)站顯示他們最好的serif字體。 配合主題的字體和布局完全符合。 請(qǐng)注意好一個(gè)美麗的視覺(jué)設(shè)計(jì)和經(jīng)典的字體可以一起工作。

⁸⁵

啤酒廠⁸⁶
一個(gè)類型和視覺(jué)效果不錯(cuò)的組合使這個(gè)網(wǎng)頁(yè)顯著。 但是，目前尚不清楚為什么在頁(yè)面的標(biāo)題有三種不同的字體，兩個(gè)就足夠了。

⁸⁶

蜱講座⁸⁷
這得到任何可以更大膽？ 大號(hào)加粗字體，橫跨全頁(yè)的蔓延大寫字母。 當(dāng)滾動(dòng)頁(yè)面，請(qǐng)注意漂亮的背景效果。 一個(gè)非常簡(jiǎn)單和強(qiáng)大的設(shè)計(jì)。

⁸⁷

德國(guó)SEW周刊⁸⁸
此博客已很好玩，邀請(qǐng)字體（為標(biāo)題比鄰新星對(duì)身體科凱特復(fù)制和），它可以很容易地都選擇和復(fù)制。 這是權(quán)力的字體嵌入（TypeKit在這里使用）。 只有用襯線字體： 字體家庭：“skolar - 1”，“skolar - 2”，格魯吉亞，時(shí)代，襯線;。 公告文本分成列-再等一年的趨勢(shì)，我們只看到了這一點(diǎn)。

⁸⁸

內(nèi)曼集團(tuán)⁸⁹
本內(nèi)曼集團(tuán)將其納入導(dǎo)航和頭版標(biāo)題的品牌顏色。 排版是輕和經(jīng)典，并給出了頁(yè)面某種氣氛。

⁸⁹

結(jié)論

現(xiàn)代網(wǎng)站設(shè)計(jì)更好，更豐富，更方便用戶使用。 我們看到更好的美學(xué)而令人愉悅的用戶體驗(yàn)和視覺(jué)設(shè)計(jì)中使用。 從平面設(shè)計(jì)中的傳統(tǒng)技術(shù)越來(lái)越多地被應(yīng)用到網(wǎng)絡(luò)，無(wú)論是技術(shù)或豐富的多功能布局排版。 橫向和對(duì)角線方向，甚至帶來(lái)了該單位的2 - D我們已經(jīng)多年未見(jiàn)的設(shè)計(jì)（用自己的文字重，基于閃存的頁(yè)）新的視角。

這些事態(tài)發(fā)展是一對(duì)即將到來(lái)的時(shí)代，網(wǎng)站設(shè)計(jì)，其中設(shè)計(jì)人員可以使用新的工具和技術(shù)，充分發(fā)揮他們的潛力的跡象。 網(wǎng)頁(yè)設(shè)計(jì)師應(yīng)該向前看的精彩和充滿希望的日子。