網(wǎng)頁設(shè)計(jì)是一個(gè)多變的產(chǎn)業(yè)

網(wǎng)頁設(shè)計(jì)是一個(gè)多變的產(chǎn)業(yè)。就像其他所有的藝術(shù)表現(xiàn)形式，網(wǎng)頁設(shè)計(jì)經(jīng)歷了一個(gè)令人驚訝的快速持續(xù)發(fā)展。一旦愛好者樂園，它已成為一個(gè)成熟的富人中具有較強(qiáng)的審美和功能的吸引力。事實(shí)上，我們正在經(jīng)歷什么，可能是網(wǎng)頁設(shè)計(jì) - 或至少是最好的時(shí)期黃金時(shí)期迄今。我們有我們的處理（對(duì)CSS3，HTML5的，字體嵌入等），一個(gè)免費(fèi)提供資源，強(qiáng)大的設(shè)計(jì)界也大量強(qiáng)大的新工具（如果你需要更多的?。┛煽康腤eb標(biāo)準(zhǔn)支持的主要瀏覽器。

我們看到更好的互動(dòng)設(shè)計(jì)，更美觀的設(shè)計(jì)。而我們看到更多的個(gè)人，從事和令人難忘的網(wǎng)站，太。但究竟是什么使不同？哪些新的方向是Web設(shè)計(jì)在今天的標(biāo)題？有什么新技術(shù)，概念和想法正在成為重要的？在這篇文章中，我們提出關(guān)于網(wǎng)站設(shè)計(jì)的現(xiàn)狀提出一些看法。我們描述 現(xiàn)有的和即將到來的趨勢(shì) 并解釋如何網(wǎng)頁設(shè)計(jì)可能演變?cè)诮窈髱讉€(gè)月甚至幾年。我們也將觸及我們作為Web設(shè)計(jì)者應(yīng)準(zhǔn)備，以隨時(shí)掌握新的挑戰(zhàn)和機(jī)遇。

1。設(shè)計(jì)迪萊特

作為設(shè)計(jì)師，我們的工作是有效地溝通思想。對(duì)于每一個(gè)特定的信息，我們創(chuàng)建了一個(gè)環(huán)境中工作的消息將最好的，指導(dǎo)用戶實(shí)現(xiàn)他們的任務(wù)，贏得他們的信任或有說服力的任何我們溝通他們。當(dāng)然，有無窮的方法來創(chuàng)建此背景下。其中之一是為視覺美感，驚喜，歡樂的設(shè)計(jì)，幸福 - 足以怡情，設(shè)計(jì); 設(shè)計(jì)是令人難忘和卓越。

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

Brizk設(shè)計(jì)工作室 有一個(gè)驚人的美學(xué)設(shè)計(jì)，微妙的動(dòng)畫，漂亮的印刷字體和一個(gè)干凈的布局。當(dāng)您在頁腳中，Twitter的一個(gè)小盒子，揭示紅色鳥翱翔。一流的設(shè)計(jì)，是一個(gè)純粹的喜悅。

雖然絕大多數(shù)的品牌仍然保持沉默，被動(dòng)和客觀的，我們已經(jīng)看到更多的網(wǎng)站，很努力地從事我們的感官，無論是通過一個(gè)強(qiáng)有力的美感，通過詼諧的動(dòng)畫內(nèi)容塊，或只是通過一個(gè)小的額外注意小在“關(guān)于”頁面設(shè)計(jì)元素。這種設(shè)計(jì)美觀，瀏覽的樂趣，但最重要的，令人難忘 - 原因很簡單，他們是不同的。通過增加愉快的個(gè)人接觸到您的設(shè)計(jì)，從你站在人群中，給游客講的東西與朋友和同事對(duì)和共享。這是一個(gè)良好的開端。

您可以引起多種設(shè)置在喜悅：在您的維護(hù)模式頁，404錯(cuò)誤頁面，在你的前裝載機(jī)，和世界各地。這樣做是為了給他們一些驚喜愉快談?wù)動(dòng)慰汀?/span>

邦蒂貝弗
邦蒂貝弗是一家飲料公司，擁有一個(gè)美麗的網(wǎng)頁設(shè)計(jì)。除了其微妙的懸停效果和動(dòng)畫，網(wǎng)站有一些不錯(cuò)的演員：如果你用鼠標(biāo)向下滾動(dòng)的輪子，一個(gè)小彈出的頁面手動(dòng)出現(xiàn)詢問您是否需要一個(gè)升降機(jī)。印刷術(shù)是強(qiáng)大的，令人難忘，設(shè)計(jì)是好玩。簡單，明確和個(gè)人，該網(wǎng)站留下了強(qiáng)烈的積極印象。

Analog.coop
模擬提供了一種非常的親身經(jīng)歷向旅客。當(dāng)您訪問的頁面，它會(huì)顯示您所在，并告訴你誰是最親密的團(tuán)隊(duì)在我們的例子中，艾倫和喬恩，誰是大約500英里以外的布里斯托爾到您（會(huì)員）。該網(wǎng)站有一個(gè)很好的復(fù)活節(jié)蛋是不是在第一眼看到的情侶。你可能想發(fā)揮與團(tuán)隊(duì)的標(biāo)題和照片左右。該網(wǎng)頁是有趣的探索。

Forrst
美麗的設(shè)計(jì)有吸引力的視覺元素和原始的導(dǎo)航 - 設(shè)計(jì)，管理，使良好的持久的印象。請(qǐng)注意如何在頁面上面積變化的背景時(shí)，瀏覽器窗口大小調(diào)整（視差效果）。在“盒子”日志是很冷靜，太。出人意料的是，形式是建立與某種原因表。

比利坦普林
在他的博客，比利坦普林集中在他生活中的小勝利。每一個(gè)職位記錄了個(gè)人的成就，顯示一個(gè)自定義設(shè)計(jì)的徽章，也是值得征服的解釋。比利整個(gè)網(wǎng)站使用這個(gè)比喻，“超級(jí)網(wǎng)絡(luò)能力說話”（敏捷的CSS，PHP的準(zhǔn)備，IE6的增強(qiáng)，等等）和“英雄設(shè)計(jì)實(shí)力”（人性化的宗旨，銳意創(chuàng)新的細(xì)節(jié)，等等）。他還對(duì)網(wǎng)站上的個(gè)人投資組合。請(qǐng)注意好配色方案適合的主題。設(shè)計(jì)簡潔，美觀，和“成就”，是不尋常的轉(zhuǎn)折，令人難忘。

混合
混合實(shí)驗(yàn)室，一個(gè)社區(qū)為設(shè)計(jì)人員和Web開發(fā)人員的博客，沒有隱藏的功能，吸引人的動(dòng)畫或懸停效果顯著。相反，它有一個(gè)一致的，視覺吸引力的設(shè)計(jì)：你能現(xiàn)場豐富多彩的地點(diǎn)和方式往往是整個(gè)網(wǎng)站界重復(fù)？設(shè)計(jì)強(qiáng)調(diào)的內(nèi)容，具有個(gè)人風(fēng)格。簡單美麗。

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

Mailchimp
MailChimp大量采用了在其設(shè)計(jì)的各個(gè)方面猴子的比喻。最近的更新通知客戶，Mailchimp目前的ASCII動(dòng)畫，告訴用戶在什么背景下發(fā)生的，這是令人驚訝的還不錯(cuò)的細(xì)節(jié)不顯眼。該公司還使用個(gè)人的，友好的，甚至有時(shí)令人討厭的語言在處理用戶的需求。這是圖像的一部分，MailChimp若有所思在Web應(yīng)用程序保留。

大版本

進(jìn)一步閱讀

• 52周的UX操作系統(tǒng)：設(shè)計(jì)喜悅
  這篇文章解釋了足以怡情，設(shè)計(jì)的重要性和特點(diǎn)，嘗試一些網(wǎng)站進(jìn)行用戶的感官。
• 糖果在眼國防部長
  研究證明，有吸引力的東西更好地工作。我們?nèi)绾握J(rèn)為不能脫離我們的感覺如何。下一次的老板，客戶或同事嘲笑的概念，美是很重要的界面設(shè)計(jì)，其皮珀斯點(diǎn)這里。
• 看起來很重要，因?yàn)槲覀兌几杏X
  論述了情感在設(shè)計(jì)和美學(xué)的重要性。

2。按鍵導(dǎo)航

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

總的想法是讓用戶的鍵盤快捷方式，幫助他們執(zhí)行諸如博客文章之間航行，繁瑣的任務(wù)，通過圖像移動(dòng)的幻燈片，改變當(dāng)前視圖（從水平到垂直網(wǎng)格），喜歡文章和章節(jié)之間的導(dǎo)航，例如一個(gè)網(wǎng)站。按鍵導(dǎo)航在Flash為基礎(chǔ)的設(shè)計(jì)常見的，但我們現(xiàn)在看到它適用于基于CSS的設(shè)計(jì)，也。 谷歌閱讀器 是先進(jìn)的按鍵導(dǎo)航最好的例子，但其他網(wǎng)站有良好的實(shí)現(xiàn)，也。

它們使企業(yè)應(yīng)用
一兩個(gè)月前，他們讓企業(yè)應(yīng)用開始作為替代傳統(tǒng)的滾動(dòng)為用戶提供平穩(wěn)和先進(jìn)的鍵盤導(dǎo)航。用戶可以切換使用兩頁的主要導(dǎo)航下拉菜單模式。在“鍵盤導(dǎo)航模式，”用戶使用箭頭鍵來瀏覽內(nèi)容塊之間;“返回”鍵觸發(fā)了詳細(xì)查看和“逃避”返回到首頁。由于某些原因，該導(dǎo)航再也無法使用。

圖片來源

瘋狂- ar.ch
馬克安東達(dá)門的網(wǎng)站是基于Flash的，它的導(dǎo)航是很先進(jìn)的：用戶可以直接進(jìn)入以“C”與“ - ”和“+”，然后規(guī)模圖像的聯(lián)系方式導(dǎo)航和排序圖像，并通過文字滾動(dòng)的垂直箭頭鍵。

圖片來源

9GAG
9GAG是一個(gè)社會(huì)書簽網(wǎng)站的形象。用戶可以瀏覽到下一個(gè)和以前的圖像使用的“j”和“k”分別。目前的圖像可以被否決了用“升”（愛）：沒有鼠標(biāo)滾動(dòng)必要的。在這種情況下，一到網(wǎng)格視圖中，快捷將是很有用。

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

羊乳酪
還有一個(gè)基于Flash的網(wǎng)站，可以讓您使用左，右箭頭鍵來瀏覽一節(jié)項(xiàng)目，向下鍵選擇和行動(dòng)的關(guān)鍵回去。

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

Pictory
PictoryMag，致力于照片故事一本雜志，也有“J”的和“k”導(dǎo)航，瀏覽圖片。

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

一個(gè)生活的思考
想了生活讓用戶使用左，右箭頭，導(dǎo)航功能之間的報(bào)價(jià)。

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

編碼技術(shù)和教程

請(qǐng)注意，當(dāng)實(shí)施你的設(shè)計(jì)按鍵導(dǎo)航，請(qǐng)確保您定義的快捷方式不會(huì)與通用的瀏覽器快捷鍵，操作系統(tǒng)快捷鍵，屏幕閱讀器的快捷方式或用戶定義的快捷鍵沖突。這聽起來可能比簡單的。像往常一樣，廣泛的測試（有精明和新手用戶）實(shí)施前將幫助你找到你的快捷方式問題。這是安全的假設(shè)上的箭頭鍵，“J”型和“k”組合和“逃避”的關(guān)鍵是安全的。另一方面，使用“控制”，“Alt”鍵和“移”鍵不建議。

此外，認(rèn)為這是額外的（因此可選）功能，將不會(huì)提供給用戶誰在他們的瀏覽器禁用JavaScript的按鍵導(dǎo)航。因此，強(qiáng)烈建議你提供一個(gè)次要的，不是小學(xué)，導(dǎo)航層鍵盤導(dǎo)航。下面，你會(huì)發(fā)現(xiàn)一些有用的技巧，教程和實(shí)施你的設(shè)計(jì)按鍵導(dǎo)航參考。

• 使用jQuery添加鍵盤導(dǎo)航
  本視頻中介紹了如何實(shí)現(xiàn)鍵盤導(dǎo)航移動(dòng)滑塊向后和向前。該演示和代碼都可用。
• 如何創(chuàng)建按鍵導(dǎo)航使用jQuery
  本教程介紹了如何實(shí)現(xiàn)按鍵導(dǎo)航，瀏覽網(wǎng)站的部分。
• 先進(jìn)的導(dǎo)航按鍵與jQuery
  你可以使用鼠標(biāo)來選擇鏈接，但你也可以使用箭頭鍵（即向上和向下）瀏覽列表中。這個(gè)腳本是位高級(jí)由于額外的功能，當(dāng)用戶將鼠標(biāo)懸停和結(jié)合按鍵。
• 在JavaScript中使用鍵盤快捷鍵
  在這篇文章中，您將學(xué)習(xí)如何使用JavaScript的鍵盤快捷鍵，有和沒有jQuery框架。
• 如何建立一個(gè)與鍵盤導(dǎo)航網(wǎng)站：密碼為HTML
  本文探討了如何添加鍵盤導(dǎo)航網(wǎng)站使用JavaScript的一些簡單的線條。首先，您將創(chuàng)建一個(gè)簡單的主題，在Photoshop中，然后轉(zhuǎn)化為一個(gè)工作網(wǎng)站，提供鍵盤功能，它跳頁。

插件和有用的資源

• js中，熱鍵：跨瀏覽器的Javascript的jQuery插件可連接鍵盤事件
  該jQuery.Hotkeys插件可以讓你輕松地添加和刪除代碼中的任何地方鍵盤事件的處理程序，它支持幾乎任何鍵組合。綁定和解除綁定的熱鍵組合需要一行代碼。
• 鍵盤導(dǎo)航的jQuery插件
  鍵盤導(dǎo)航的jQuery插件，提供了網(wǎng)頁元素被導(dǎo)航能力，并通過鍵盤上的箭頭鍵激活。
• 熱鍵：可編程鍵盤快捷鍵與原型js中圖書館
  熱鍵提供的功能類似的訪問，但關(guān)鍵屬性，為更多的鍵盤驅(qū)動(dòng)的接口細(xì)粒度控制讓許多增強(qiáng)功能。
• 檢測擊鍵：參考表
  檢測用戶的擊鍵原來是一對(duì)事件處理的專業(yè)機(jī)構(gòu)。這頁的詳情更惱人的一些問題，包括強(qiáng)制兼容表。

3。平面設(shè)計(jì)的影響

而喜悅的設(shè)計(jì)主要是意想不到的喜悅和涉及到的設(shè)計(jì)，現(xiàn)代的Web設(shè)計(jì)人員對(duì)旅客留下深刻印象往往走一步，實(shí)驗(yàn)與他們工作的基本細(xì)節(jié)，產(chǎn)生更多的創(chuàng)造性和獨(dú)特的布局。事實(shí)上，一個(gè)沒有被專家看到了傳統(tǒng)印刷的網(wǎng)頁設(shè)計(jì)技術(shù)日益增長的影響力。他們往往體現(xiàn)在所謂的“藝術(shù)指導(dǎo)的”博客文章（或“blogazines”），即每一個(gè)博客帖子有一個(gè)獨(dú)特的設(shè)計(jì)和精心制作的。

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

設(shè)計(jì)線人：基于網(wǎng)格的網(wǎng)頁設(shè)計(jì)，簡體 有一個(gè)簡單干凈的兩列布局，明確區(qū)分開來說明文字。注意，在作者的姓名的大寫字母的頭下，亦在網(wǎng)頁上的報(bào)價(jià)設(shè)計(jì)可見。這里的內(nèi)容決定了布局。

在大多數(shù)情況下，藝術(shù)指導(dǎo)的設(shè)計(jì)是助長純粹的野心和他們的創(chuàng)造者的決心。這樣的設(shè)計(jì)主要是發(fā)現(xiàn)（自由職業(yè)者作為個(gè)人網(wǎng)站的項(xiàng)目成果），很少發(fā)現(xiàn)在企業(yè)設(shè)置。更廣泛的主要障礙是這些技術(shù)的采用，這種設(shè)計(jì)（或相當(dāng)?shù)膶?shí)施與（X）HTML和CSS）的創(chuàng)作是費(fèi)時(shí)。藝術(shù)指導(dǎo)的布局是相當(dāng)困難的代碼和維護(hù)，而且往往需要內(nèi)聯(lián)CSS樣式，否則設(shè)計(jì)師將結(jié)束與聯(lián)合國在其語義類幾十個(gè)樣式表了。此外，這些頁面上整合廣告是困難的，因?yàn)樗麄儼言O(shè)計(jì)師的設(shè)計(jì)難度。因此，在目前，這些設(shè)計(jì)更多的是因?yàn)椴唤?jīng)常更新網(wǎng)頁，開銷適當(dāng)。

如果您決定與藝術(shù)指導(dǎo)的設(shè)計(jì)性實(shí)驗(yàn)，都知道，一篇文章的布局中，應(yīng)一如既往地支持內(nèi)容本身，而不是支配它。問題是，一旦你開始設(shè)計(jì)一個(gè)博客帖子，很容易重復(fù)設(shè)計(jì)的頁面元素只是因?yàn)槟憧梢?，不是因?yàn)樗膬?nèi)容支配。事實(shí)上，設(shè)計(jì)界正對(duì)是否藝術(shù)指導(dǎo)的設(shè)計(jì)，只是進(jìn)行的辯論“過度Photoshop處理的文章“純粹為設(shè)計(jì)而設(shè)計(jì)。

好的設(shè)計(jì)是關(guān)于有效的溝通，不能以犧牲易讀性裝飾。正如舊金山Inchauste所說，“我認(rèn)為這是一個(gè)'二'樣的情況下挑選。選擇是：偉大的內(nèi)容，偉大的藝術(shù)指導(dǎo)和定期的時(shí)間表。如果您嘗試將達(dá)到三個(gè)，其中之一將開始下降短。“底線：網(wǎng)絡(luò)是深受影響，設(shè)計(jì)印刷設(shè)計(jì)是美麗的，但只有當(dāng)您的文章的技術(shù)支持。

關(guān)于如何做一個(gè)小人課
以獨(dú)特的布局多姿多彩，很好地說明了文章。請(qǐng)注意不尋常的東西？ 該設(shè)計(jì)基于表的布局。設(shè)計(jì)有一個(gè)與實(shí)際信息，圖形表格數(shù)據(jù)位的CSS布局。有時(shí)候，這對(duì)藝術(shù)指導(dǎo)的設(shè)計(jì)需要。

埃文迪恩斯莫爾：21
該網(wǎng)站海報(bào)設(shè)計(jì)。這個(gè)博客帖子很簡單，它以生動(dòng)的圖片替換疲倦純文本。但是，這可能是一個(gè)缺點(diǎn)，太：一種基于文本的版本將更加方便用戶瀏覽。

粗體斜體：博士感覺良好
一個(gè)非常令人印象深刻的雜志一樣的布局，多列，圖像，標(biāo)題和補(bǔ)充工具欄。如果你只看到打印出來這個(gè)頁面，你就不會(huì)承認(rèn)它作為一個(gè)網(wǎng)頁設(shè)計(jì)。該網(wǎng)頁有40 科 容器。

阿路返回：經(jīng)修訂的字體堆棧
一個(gè)很長，詳細(xì)和精心設(shè)計(jì)。在藝術(shù)指導(dǎo)的設(shè)計(jì)，包括這一個(gè)，大的圖像常常被用來推動(dòng)布局的邊界。這種形象通常都是800至1000像素寬，填補(bǔ)了整個(gè)版面的寬度。

克里斯Coyier：在野生動(dòng)物園的挑戰(zhàn)
這是一個(gè)微妙的設(shè)計(jì)，大幅度，多列文本，縮進(jìn)標(biāo)題和腳注。從審美的角度來看，它可能是一個(gè)從書頁。

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

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

亞龍舍恩：太多的按鈕
有時(shí)候，藝術(shù)指導(dǎo)的博客職位要求的東西多一點(diǎn)：像一個(gè)背景圖像和bakground顏色，以及一個(gè)CSS的樣式位。這個(gè)例子正正體現(xiàn)了。

粗體斜體：請(qǐng)勿踐踏草地
另一個(gè)多列布局顯著的例子...

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

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

進(jìn)一步閱讀

• 超級(jí)神奇陳木川未來發(fā)展趨勢(shì)的博客
• 該鏜博客后死亡？
  一項(xiàng)關(guān)于這里的藝術(shù)指導(dǎo)設(shè)計(jì)的碎雜志的文章。
• 賈森圣瑪麗亞會(huì)談關(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

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

橫向滾動(dòng)條網(wǎng)站已更加困難，因?yàn)閷?dǎo)航是垂直滾動(dòng)鼠標(biāo)設(shè)計(jì)。但是，多觸摸設(shè)備的出現(xiàn)，迫使我們重新思考這些設(shè)計(jì)的可用性問題。畢竟，無論是用戶瀏覽垂直或水平對(duì)這種設(shè)備沒有真正發(fā)揮作用。和一些插件（如 滾動(dòng) 和 jScrollHorizontalPane）簡化使用戶能夠通過瀏覽使用鼠標(biāo)滾輪的標(biāo)準(zhǔn)垂直水平的行動(dòng)，從而縮小了學(xué)習(xí)曲線。

橫向滾動(dòng)條一直在那里走了十年，但今天它認(rèn)為，他們得到了一個(gè)新的環(huán)境。對(duì)水平滾動(dòng)條移動(dòng)可能是在一些設(shè)計(jì)者試圖提供一個(gè)較為清晰的用戶體驗(yàn)。這種設(shè)計(jì)通常是經(jīng)過精心策劃和主要網(wǎng)站和詳細(xì)的投資組合發(fā)現(xiàn)將給電子商務(wù)網(wǎng)站。無論horizontalism將擴(kuò)大到更多類型的網(wǎng)站仍然將在今后幾個(gè)月出現(xiàn)。

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

OurType
阿與橫向的基于Flash的導(dǎo)航比利時(shí)型鑄造。內(nèi)容塊水平滑動(dòng)。

榮格訴馬特
這個(gè)網(wǎng)站有一個(gè)導(dǎo)航水平的時(shí)間表。請(qǐng)注意，有沒有水平滾動(dòng)條;旅客使用垂直滾動(dòng)輪進(jìn)行操作水平。

您的輔助
許多所謂的“單頁布局之一。”這些網(wǎng)站的全部內(nèi)容是在單頁上，無論是導(dǎo)航使用鍵盤，鼠標(biāo)或菜單（本網(wǎng)站使用了第三個(gè)選項(xiàng)）。在這里，我們有一個(gè)良好的（共同）的縱向和橫向?qū)Ш剑@示的組合 jQuery的ScrollTo插件 在行動(dòng)）。

20六一
這個(gè)組合有不同類型的水平導(dǎo)航。除了“上一頁”和“下一步”按鈕，用戶也得到了在下拉菜單中選定內(nèi)容的概述。一旦他們選擇一個(gè)選項(xiàng)，頁面滾動(dòng)水平。用鼠標(biāo)滾輪導(dǎo)航水平可能會(huì)改善這種設(shè)計(jì)的實(shí)用性。

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

和C. L.霍洛韋
康迪斯霍洛韋的投資組合有一個(gè)很好的采取橫向布局。她的作品被放置在“墻”;水平導(dǎo)航作為一個(gè)藝術(shù)畫廊散步比喻使用。也很有趣：滾動(dòng)觸發(fā)水平時(shí)，在你的鼠標(biāo)懸停箭頭，沒有點(diǎn)擊必要的。

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

Edpeixoto
...有時(shí)布局只是掛在空中...

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

進(jìn)一步閱讀

• Horizontalism和可讀性
• 周五關(guān)注的焦點(diǎn)：傾斜網(wǎng)頁設(shè)計(jì)
  一個(gè)設(shè)計(jì)展示的傾斜到一邊，避免垂直線。
• 橫向滾動(dòng)網(wǎng)站：魅力和教程
• jQuery的ScrollTo插件
  這個(gè)插件可以讓用戶通過滾動(dòng)滿溢元素和屏幕本身。你得到許多不同的自定義選項(xiàng)和多種方式來指定要在其中滾動(dòng)的方向。

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

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

未來是很大的，大膽的和排版。豐富的字體家庭將不僅用于頭條，但對(duì)身體的副本，使從排版印刷到網(wǎng)絡(luò)上的做法。此外，實(shí)驗(yàn)設(shè)計(jì)者將更多的豐富，復(fù)雜的 襯線字體 而大膽，施加 板坯字體通過微妙的圖像支持。網(wǎng)頁設(shè)計(jì)師也增加了更多的深度與字體 文本陰影 對(duì)CSS3屬性。當(dāng)然，這些細(xì)微之處是緊密聯(lián)系在一起的布局選擇。這些排版設(shè)計(jì)往往是基于網(wǎng)格和借鑒平面設(shè)計(jì)之技術(shù)，如圖片的標(biāo)題說明和注解。

我們還注意到，設(shè)計(jì)師是延長其字體棧，添加越來越多的后備，以防字體一個(gè)指定的字體不可用。這很好，因?yàn)殚L寬比（或重量的字體），只要不是太不同，一些屏幕字體將出現(xiàn)更廣泛的或比其他字體更高，因此有一個(gè)較大的長寬比，這意味著有些用戶將看到您的網(wǎng)頁比別人更小的字體大小會(huì)。你可能想閱讀更多關(guān)于CSS的字體在棧 拉斯威克利的演講。

基爾安穆施泰爾
基利安穆施泰爾使用相當(dāng)?shù)臄U(kuò)展serif字體堆棧他的設(shè)計(jì)： 字體家庭：帕拉提諾，“帕拉提諾行型活字”，“書安蒂奎”，康士坦奇亞時(shí)代，“宋體”，襯線;。在基爾安的博客也有圖片的標(biāo)題說明該職位。

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

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

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

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

先鋒
這個(gè)網(wǎng)站結(jié)合了生動(dòng)的圖像和版式嬉戲。設(shè)計(jì)看起來更像一本小冊(cè)子或超過“經(jīng)典”網(wǎng)頁海報(bào)。

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

圣約翰的圣經(jīng)
本網(wǎng)站顯示在其最好的襯線字體。配合主題的字體和布局完全適應(yīng)。公告有多好一個(gè)美麗的視覺設(shè)計(jì)和經(jīng)典的印刷術(shù)可以一起工作。

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

蜱對(duì)話
這能否得到任何大膽？大膽的字體大，在整個(gè)頁面與傳播大寫字母。當(dāng)滾動(dòng)頁面時(shí)，看到漂亮的背景效果。一個(gè)非常簡單和強(qiáng)大的設(shè)計(jì)。

德國SEW周刊
此博客已很好玩，對(duì)身體的邀請(qǐng)印刷術(shù)復(fù)制和標(biāo)題科凱特（Proxima的新星），和它都可以輕松地選擇和復(fù)制。這是嵌入字體功率（TypeKit此處使用）。只有襯線字體使用： 字體家庭：“skolar - 1”，“skolar - 2”，格魯吉亞，時(shí)代，襯線;。公告文本分成列 - 再次，我們看到一種趨勢(shì)，僅此一年。

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

結(jié)論

現(xiàn)代Web設(shè)計(jì)更好，更豐富，更方便用戶使用。我們看到更好的美學(xué)為了取悅用戶體驗(yàn)和視覺設(shè)計(jì)使用。從傳統(tǒng)的印刷設(shè)計(jì)技術(shù)正越來越多地應(yīng)用到網(wǎng)絡(luò)，無論是布局的技術(shù)或豐富的通用字體。橫向和對(duì)角線方向，甚至帶來新的視角，以平2 - D我們已經(jīng)看到了多年來用自己的文字為主的，基于Flash的網(wǎng)頁（設(shè)計(jì)）。

這些事態(tài)發(fā)展是對(duì)即將到來的時(shí)代，網(wǎng)頁設(shè)計(jì)，其中設(shè)計(jì)人員可以使用新的工具和技術(shù)，其最大潛力的跡象。網(wǎng)頁設(shè)計(jì)師應(yīng)該期待著激動(dòng)人心和充滿希望的未來歲月。

?