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

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

1。 設(shè)計怡情

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

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

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

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

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

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

⁵

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

⁶

⁶

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

⁷

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

⁸

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

⁹

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

¹⁰

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

¹²

¹¹
大版本¹³

進一步閱讀

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

2。 按鍵導(dǎo)航

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

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

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

¹⁸
圖片來源¹⁹

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

²⁰
圖片來源¹⁹

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

²¹

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

²²

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

²³

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

²⁴

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

²⁵

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

²⁶

想了生活²⁷
對于生活的思考可以讓用戶使用左，右箭頭瀏覽功能之間的報價。

²⁷

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

²⁸

編碼技術(shù)和教程

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

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

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

插件和有用的資源

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

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

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

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

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

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

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

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

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

⁴⁰

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

⁴¹

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

⁴²

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

⁴³

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

⁴⁴

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

⁴⁵

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

⁴⁶

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

⁴⁷

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

⁴⁸

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

⁴⁹

特拉維斯尼爾森：默認開關(guān)⁵⁰
一個平靜，簡單，簡潔的設(shè)計自定義標題。

⁵⁰

進一步閱讀

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

4。 Horizontalism

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

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

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

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

⁶²

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

⁶³

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

⁶⁴

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

⁶⁵

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

⁶⁷

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

⁶⁸

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

⁶⁹

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

⁷⁰

Edpeixoto⁷¹
...有時布局剛剛掛在空中...

⁷¹

的ASOS⁷²
...有時它的傾斜。 請注意各元素都沒有垂直線。

⁷²

進一步閱讀

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

5。 富強印刷術(shù)

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

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

我們還注意到，設(shè)計師都在延伸的字體棧，增加后備字體的情況下越來越多的一個指定的字體不可用。 這很好，因為不同的只要方面重量）的比值（或字體不可過;一些屏幕字體將出現(xiàn)更廣泛的或字體高度大于其他，因此有較大的長寬比，這意味著一些用戶將看到您的網(wǎng)頁在字體大小會比其他人要小得多。 您可能希望了解更多的CSS字體棧 拉斯威克利的介紹⁷⁷。

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

⁷⁸

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

⁷⁹

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

⁸⁰

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

⁸¹

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

⁸²

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

⁸³

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

⁸⁴

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

⁸⁵

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

⁸⁶

蜱講座⁸⁷
這得到任何可以更大膽？ 大號加粗字體，橫跨全頁的蔓延大寫字母。 當滾動頁面，請注意漂亮的背景效果。 一個非常簡單和強大的設(shè)計。

⁸⁷

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

⁸⁸

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

⁸⁹

結(jié)論

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

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