如何設(shè)計Web 2.0風(fēng)格網(wǎng)站？

在本教程中，我將介紹各種常見的圖形設(shè)計元素，在現(xiàn)代的Web（“2.0”）設(shè)計風(fēng)格網(wǎng)站。

然后我試圖解釋為什么他們的工作（即為什么他們已成為常見的），以及如何，何時何地，您可能在您的設(shè)計中使用每個元素。

因此，從我當(dāng)前的風(fēng)格文章，更深入地分析當(dāng)前的“Web 2.0”的設(shè)計風(fēng)格的設(shè)計特點。

要了解如何設(shè)計自己的Web2.0網(wǎng)站設(shè)計，你必須閱讀“保存像素-簡單的網(wǎng)頁設(shè)計的藝術(shù)“，這是Web2.0的設(shè)計原則和技術(shù)全面的指南。

涵蓋功能摘要

下面的列表總結(jié)了許多典型的“Web 2.0”的網(wǎng)站的共同特點。

顯然，一個網(wǎng)站并不需要表現(xiàn)出所有這些功能運作良好，并顯示這些功能并沒有設(shè)計“2.0” - 還是不錯的！

我已經(jīng)解決，這些因素我介紹一些當(dāng)前的風(fēng)格的文章。另外請注意我的文章真正的Web2.0的設(shè)計，這就解釋了Web2.0的設(shè)計的本質(zhì)不是表面的圖形效果，但簡單的紀(jì)律。

免責(zé)聲明

并非所有的這些設(shè)計特點是在所有情況。總是有例外，有很多不好的例子，被錯誤地使用這些功能，過度使用，或沒有敏感性的“交響樂”網(wǎng)站的設(shè)計。

你不能只考慮所有這些因素，把它們放在一起，做出一個好的網(wǎng)頁，任何比你可以采取一些雞蛋，糖，面粉，并把它們放在一起，并得到一個蛋糕。

制作一個網(wǎng)頁，需要很多的敏感性，在工作中的各種力量。一個好的設(shè)計方案是一個余額那些（通常反對）的部隊。

Web 2.0的？

我使用的術(shù)語“Web 2.0設(shè)計”來形容當(dāng)時的網(wǎng)頁設(shè)計風(fēng)格，我在我的當(dāng)前樣式文章介紹。

許多人使用的術(shù)語“Web 2.0”來形容：

• 在網(wǎng)絡(luò)經(jīng)濟的復(fù)蘇
• 一個新技術(shù)的交互性的網(wǎng)站和服務(wù)水平之間
• 或從網(wǎng)上社區(qū)和社會網(wǎng)絡(luò)的新類型的社會現(xiàn)象產(chǎn)生的

許多人還參考到最近的學(xué)校網(wǎng)頁設(shè)計中使用的術(shù)語。我在這方面使用的舒適。

在社會學(xué)方面，在許多層面上的變動影響人們：經(jīng)濟，文化，政治等娛樂和體育，音樂和音樂產(chǎn)業(yè)，時尚，或社會崩潰的滑板朋克？

簡介

我要通過優(yōu)秀的網(wǎng)站設(shè)計的電流波的功能，您采取的最顯著的特點，剖析，解釋了為什么每一個可以很好，并告訴你如何使用他們在自己的網(wǎng)站。

如果我不得不用一個詞來總結(jié)“Web 2.0”的設(shè)計，它會要“簡單”，所以這就是我們將開始。

我是一個偉大的信徒在簡單。我認(rèn)為這是網(wǎng)頁設(shè)計的方式向。

今天的簡單，大膽，優(yōu)雅的頁面設(shè)計提供了少花錢多辦事：

• 它們使設(shè)計師齊刷刷網(wǎng)站的目標(biāo)，指導(dǎo)，通過使用更少的站點訪問者的眼球，精心挑選的視覺元素，。
• 他們用字少，但多說了，和精心挑選的圖像來創(chuàng)建所需的感覺。
• 他們拒絕的想法，我們不能從我們的網(wǎng)站猜測，人們想要什么

1簡單

“使用盡可能少的功能，要實現(xiàn)你所需要的實現(xiàn)”

網(wǎng)頁設(shè)計是比以往更簡單，這是一件好事。

2.0設(shè)計手段突出重點，清潔，簡單。

這并不一定意味著無華，稍后我將解釋。

我真的相信簡單。這并不是說，所有的網(wǎng)站應(yīng)該很小，但我們應(yīng)該使用盡可能少的功能，要實現(xiàn)你所需要的實現(xiàn)。

奧卡姆剃刀，這是一個原則，我使用所有的時間，我已經(jīng)寫了其他地方 。解釋的方法之一是：在任何一個問題的兩個可能的解決方案，簡單的一個更好。

下面是一些例子。請注意已去掉不必要的元素每個 。可能是有很多每一頁上多有... ...，但會令他們強嗎？

其結(jié)果是，你必須看內(nèi)容。你會發(fā)現(xiàn)自己完全屏幕功能設(shè)計者所預(yù)期的交互 。而你不介意的-這是容易的，你只是你來。

?

為什么簡單好

• 網(wǎng)站的目標(biāo)和所有網(wǎng)頁的目的。
• 用戶的注意力是一種有限的資源。
• 這是設(shè)計師的工作，以幫助用戶找到他們想要的東西（或通知的網(wǎng)站，希望他們通知）
• 東西在屏幕上吸引人們的目光。有更多的東西，有更多不同的東西要注意，用戶不太可能注意到重要的東西 。
• 因此，我們必須使一定的溝通，我們還需要以盡量減少噪音。這意味著我們需要找到一個解決方案，它盡可能少的東西。這是經(jīng)濟，或簡單。

何時及如何使您的設(shè)計變??得簡單

什么時候？

永遠(yuǎn)！

怎么樣？

與簡單取得成功有兩個重要方面：

1. 刪除不必要的組件，在不犧牲效能。
2. 嘗試達(dá)到相同的結(jié)果，更簡單的替代方案。

“似乎沒有達(dá)到完善時再添加，但時有什么帶走了。“安托萬圣艾修伯里，地球社， 1939

每當(dāng)你的設(shè)計，作為一門學(xué)科，自覺地刪除所有不必要的視覺元素。

特別是在集中的布局是不太相關(guān)頁面的目的，的領(lǐng)域，因為在這些領(lǐng)域的視覺的活動將注意力從關(guān)注的重點內(nèi)容和導(dǎo)航。

使用視覺細(xì)節(jié) - 無論是行數(shù)，字?jǐn)?shù)，形狀，顏色 - 溝通相關(guān)信息，不只是來裝點。

下面是一個患有不夠簡單的設(shè)計，例如。

Yaxay的接口使用了很多的像素，但他們中的絕大多數(shù)是裝飾，頁面背景的一部分 。相對較少的像素是用來為用戶尋找或了解信息，或與網(wǎng)站進(jìn)行交互。

見多少“東西”有看，并注意如何數(shù)的像素是用來澄清實際導(dǎo)航，實際的內(nèi)容，或?qū)嶋H的互動功能。

愛德華托佛特是老板，當(dāng)涉及到信息的設(shè)計。他用“?數(shù)據(jù)墨水“（即細(xì)節(jié)，使信息傳輸）和“非數(shù)據(jù)墨水”（即詳細(xì)的只是詳細(xì)介紹）來形容這種現(xiàn)象。

方法之一托佛特具體措施是使用數(shù)據(jù)油墨比非數(shù)據(jù)墨水信息設(shè)計（圖形，圖表，演示等）的有效性 。數(shù)據(jù)油墨的使用比例越高，就越有可能是設(shè)計是有效的 。

到Y(jié)axay上面詳細(xì)介紹，還有很多我稱之為“忙碌”，即很多邊，色調(diào)的變化，顏色變化，形狀，線條... ...很多東西看。但是，在這個細(xì)節(jié)，唯一有用的功能：

1. 該網(wǎng)站的標(biāo)志，并
2. 標(biāo)簽上的導(dǎo)航按鈕（讀“藝術(shù)畫廊”）

所有的的“忙碌”的休息：在后臺的形狀，在梯度網(wǎng)格的接口面板，... ...的對角線線條所有這是噪音，它的所有“非數(shù)據(jù)墨水”，因為它的不使溝通 。

我對網(wǎng)頁設(shè)計的豐富性，復(fù)雜性或美容

簡單的手段：

因為你需要使用盡可能多的像素，在你需要的任何方式，以方便的溝通，需要做的。

當(dāng)然，通常是你的溝通是不是硬盤的數(shù)據(jù)，但軟信息。

硬盤數(shù)據(jù)

手段的事實，如新聞，股票價格，列車時刻，還是多少錢在您的銀行帳戶是... ...

軟信息

涵蓋了通信的定性方面，有關(guān)的公司，其質(zhì)量意識，服務(wù)提供商是如何平易近人的第一印象，以及你是否覺得產(chǎn)品會為你的權(quán)利。它可以是同樣重要！

無論你溝通的是硬的或軟的，你的像素數(shù)，所以他們自覺使用和護(hù)理。

請看下面的例子：

亞歷Dukal的網(wǎng)站豐富性，趣味性和吸引力。提請您注意，它使用了一個可視化技術(shù)的范圍，使你有興趣，并給你一個溫暖的感覺Alex的工作質(zhì)量。

但它也很簡單，因為它使用了它的像素/油墨/關(guān)懷和靈敏度忙碌。這不是無償?shù)?，它?/span>經(jīng)濟和豐富的。

無論你說的，明智的選擇，您使用的墨水/像素。用它來溝通，首先。然后，問是否可以用更少的溝通一樣有效。如果是的話，做到這一點。

2中央布局

（更多的信息對當(dāng)前的樣式頁） 。基本上，絕大多數(shù)的網(wǎng)站這幾天的定位集中在瀏覽器窗口。相對數(shù)是全屏幕（液體）或左對齊/固定大小，與幾年前相比 。

為什么中央的布局是良好的

這“2.0”的風(fēng)格是簡單的，大膽的和誠實的。直坐前面和中心的網(wǎng)站感覺更簡單，更大膽和誠實。

此外，因為我們正在與我們的像素（和內(nèi)容）更經(jīng)濟，我們不為加壓塞進(jìn)盡可能多的信息水線以上/倍。

我們少用多說，所以我們可以多一點自由和易于使用的空間量，并墊了我們的內(nèi)容有很多可愛的白色空間。

何時及如何使用中央布局

我說，除非有一個很好的理由不集中定位您的網(wǎng)站。

您可能想獲得更多的創(chuàng)意空間，或獲得盡可能多的信息，盡可能在屏幕上（例如，一個Web應(yīng)用程序）。

3較少的列

幾年前，3列的網(wǎng)站進(jìn)行了規(guī)范，以及4列的網(wǎng)站并不少見。今天，二是比較常見的，和3是最大的主流。

為什么使用較少的列好

少就是多。較少的列感覺更簡單，更大膽，更誠實的。我們更清楚地傳達(dá)的信息較少。

統(tǒng)治中心的布局還有一個副產(chǎn)品。因為我們不能填滿整個屏幕，這么多，而不是試圖在屏幕上，在任何一個時間，我們根本就不需要很多列的信息。

如何選擇列

我肯定會推薦使用不超過3列，只是因為你應(yīng)該使用沒有什么比你需要更多。

總有例外，所以這里的有效使用超過3列的幾個例子。

這里的一個網(wǎng)站，得到它錯了... ...

4個單獨的頂端部分

這意味著屏幕的上方（主要品牌及資產(chǎn)凈值的面積）的其余部分（主要內(nèi)容）不同。

當(dāng)然，也有對這種做法并不新鮮。這是一個好主意，并已使用過。但它正在使用比以往任何時候都現(xiàn)在，區(qū)別往往更強。

在這6個樣品，即使是在小規(guī)模的“頁面頂部”是如何明確：

為什么不同的部分是好的

頂端部分說，“這是頁面頂部的”。聽起來很明顯，但感覺好清楚知道頁面的開始。

它還開始的網(wǎng)站/網(wǎng)頁的經(jīng)驗，具有較強的，大膽的聲明。這是非常“2.0”意氣風(fēng)發(fā)。我們想強，操作簡單，大膽的態(tài)度。

這些頂級節(jié)包含只是品牌（Protolize，Mediconmedia），1剛剛導(dǎo)航系統(tǒng)（交叉連接），其余3兼得。

交叉連接器的弱點，在我看來，是該標(biāo)志后的資產(chǎn)凈值 。我寧愿要高，并明確（如如簡單位）的資產(chǎn)凈值 。

何時及如何使用一個獨特的頂部

在任何網(wǎng)站上，兩個主要的品牌和主導(dǎo)航應(yīng)該是顯而易見的，大膽的和明確的，所以這是一個好主意，在一個網(wǎng)站的設(shè)計，崗位標(biāo)識和資產(chǎn)凈值大膽頂部創(chuàng)建一個明確的空間。

屏幕上方的權(quán)利，始終把您的標(biāo)志。我總是建議后，把您的主要航行權(quán)。這絕對是一件好事，標(biāo)志著高級別屏幕功能，從主站點的內(nèi)容單獨一節(jié)，以紀(jì)念頁面頂部。

頂端部分應(yīng)該從視覺上的其他網(wǎng)頁的內(nèi)容不同。最強的鑒別方法是使用一個大膽的，不同的顏色或色調(diào)的固體塊，但也有替代品。

下面是2個例子，其中的頂端部分是實線分開，而不是純色本身，。

在這里，頂端部分內(nèi)容只是坐在大膽以外的主要列區(qū)域。

5屏幕房地產(chǎn)固體領(lǐng)域

領(lǐng)先的明確區(qū)分的頂部區(qū)域，你會發(fā)現(xiàn)，很多網(wǎng)站定義的各個領(lǐng)域大膽，清楚地房地產(chǎn) 。

房地產(chǎn)有多種形式，包括：

• 導(dǎo)航
• 背景/畫布
• 主要內(nèi)容區(qū)
• 其他的東西
• 標(biāo)注/交叉鏈接

可以設(shè)計一個網(wǎng)頁，使這些地區(qū)立即有別于他們的鄰居。

最強的方式做，這是使用的顏色。

但是，白色的空間，可以同樣有效。

色彩濃厚的風(fēng)險是它吸引??眼球，因此它可以從其他相關(guān)的屏幕元素的注意力。我認(rèn)為放在空白清潔的內(nèi)容，創(chuàng)建一個更輕松的體驗，幫助觀眾感到更加輕松和自由瀏覽。

6個簡單的資產(chǎn)凈值

常駐導(dǎo)航 - 全球網(wǎng)站頁面模板的一部分，出現(xiàn)在每一頁上的資產(chǎn)凈值 - 需要明確的導(dǎo)航識別，并應(yīng)該很容易解釋，目標(biāo)和選擇。

• 2.0設(shè)計使得全球?qū)Ш?/span>大的，大膽的，清潔的和明顯的。
• 內(nèi)置的超鏈接?（內(nèi)文字鏈接）通常是明確區(qū)分正常的文本 。

為什么簡單的導(dǎo)航更好

用戶需要能夠識別導(dǎo)航，告訴他們各種重要信息：

• 假如他們是在對事物的計劃
• 還有什么地方，他們可以從這里
• 什么選擇他們做的東西

以下簡單的原則，一般的噪音減少，澄清導(dǎo)航的最佳途徑是：

• 永久定位導(dǎo)航鏈接，除了從內(nèi)容
• 使用顏色，色調(diào)和形狀的區(qū)分導(dǎo)航
• 導(dǎo)航項目和大膽
• 使用明文的每一個環(huán)節(jié)的目的明確的

如何使您的資產(chǎn)凈值的簡單

只需記住的關(guān)鍵是：導(dǎo)航，應(yīng)明確地從非導(dǎo)航區(qū)分 。

只要遵循以上準(zhǔn)則，通過位置，色彩和清晰度的分化。

我的文章導(dǎo)航?

內(nèi)嵌的超鏈接也應(yīng)該足以從他們身邊的文本中脫穎而出。

檢查出這些片段。在每一種情況下，你在做無疑有什么樣的聯(lián)系。（個人而言，我更喜歡用藍(lán)色文字（非下劃線），輪流到強調(diào)懸停的紅色... ...）

7個大膽的標(biāo)志

一個明確的，大膽的，強大的品牌 - 整合的態(tài)度，語氣，和第一印象 - 是幫助一個大膽的標(biāo)志。

下面是一些（100％的比例）。注意，標(biāo)志趨于相當(dāng)大，與一般的2.0原則，。

為什么呢？

強有力的，大膽的標(biāo)志說：“這是我們是誰”的方式，我們可以相信。

何時及如何？

見我的徽標(biāo)上的文章和基于文本的標(biāo)志 。

這很難說，如何創(chuàng)造一個良好的標(biāo)志，但在短暫的... ...

您的標(biāo)志：

• 可視化的工作在其主要的背景下，任何其他用途，它可以使用（如傳單或T恤 ？）
• 識別和獨特的
• 代表你的品牌的個性和素質(zhì)，在第一次觀看

更多信息...

8大文本

“2.0”網(wǎng)站的許多大的文本相比，舊式的網(wǎng)站。

如果您填寫相同數(shù)量的空間少的“東西”，你有更多的空間。

當(dāng)你取得了更大的空間，你可以選擇比不太重要的元素更大更重要的元素（如果他們?nèi)匀淮嬖冢?/span>

事情做大，使他們更加明顯比較輕的元素。這種效應(yīng)已被用于整個平面設(shè)計歷史，標(biāo)題，標(biāo)題頁和標(biāo)題。

不僅大文本中脫穎而出，但它也更容易讓更多的人。這不只是有視覺障礙的人，也是人們尋找液晶屏在陽光下，人們坐在離屏幕遠(yuǎn)一點，而人只是走過場。如果你仔細(xì)想想，這可能是很多很多人！

何時及如何使用大文本

大文本，使得大多數(shù)頁面為更多的人使用，所以它是一件好事。

當(dāng)然，大小是相對的的。你不能把一個正常的，繁忙的站點，使所有的文字更大，使之更加實用。這可能無法正常工作，可能會更糟糕。

為了使用大文本，你必須通過簡化的空間，刪除不必要的元素。

您還需要haave一個原因做出一些大于其他文字文本。和文本必須是有意義的和有益的。有沒有加入一些大的文字，只是因為它的OH -使2.0點！

如果你需要有很多頁面上的信息，它的相對平等的重要性，那么也許你可以保持它的所有小。

9粗體文字介紹

領(lǐng)先的大文本的主題，很多網(wǎng)站鉛具有很強的所有文字標(biāo)題描述。

這些通常載網(wǎng)站的USP，電梯間距或主要信息。

他們往往是圖形，而不是普通的文本，。這樣做的原因是，設(shè)計者想了很多控制頁面的視覺沖擊力，特別是早在瀏覽體驗。

何時及如何使用粗體文字介紹

只使用一個，如果你有一些大膽地說。V（如果你沒有大膽地說，也許是的！值得擁有一個思考的您的網(wǎng)頁/網(wǎng)站的目的，值得一說的大膽與somethign的）

如果你有一個簡單的消息，你首先要看到，前進(jìn)和標(biāo)題它。要明確把對一個相對平淡的背景。

10個強烈的色彩

明亮，強烈的色彩畫的眼睛，用它們來劃分成明確的路段，并突出重要的元素。

當(dāng)你有一個簡單的，剝離出的設(shè)計，你可以使用濃烈的色彩位，以幫助區(qū)分房地產(chǎn)領(lǐng)域，并提請注意你想要的游客要注意的項目。

顏色也是一個傳達(dá)品牌價值的偉大的媒介

小心地使用高價值的功能上或周圍濃烈的色彩