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

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

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

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

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

涵蓋功能摘要

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

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

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

免責(zé)聲明

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

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

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

Web 2.0的？

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

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

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

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

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

簡(jiǎn)介

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

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

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

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

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

1簡(jiǎn)單

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

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

2.0設(shè)計(jì)手段突出重點(diǎn)，清潔，簡(jiǎn)單。

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

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

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

下面是一些例子。請(qǐng)注意已去掉不必要的元素每個(gè) 。可能是有很多每一頁上多有... ...，但會(huì)令他們強(qiáng)嗎？

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

?

為什么簡(jiǎn)單好

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

何時(shí)及如何使您的設(shè)計(jì)變??得簡(jiǎn)單

什么時(shí)候？

永遠(yuǎn)！

怎么樣？

與簡(jiǎn)單取得成功有兩個(gè)重要方面：

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

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

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

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

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

下面是一個(gè)患有不夠簡(jiǎn)單的設(shè)計(jì)，例如。

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

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

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

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

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

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

所有的的“忙碌”的休息：在后臺(tái)的形狀，在梯度網(wǎng)格的接口面板，... ...的對(duì)角線線條所有這是噪音，它的所有“非數(shù)據(jù)墨水”，因?yàn)樗?/span>的不使溝通 。

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

簡(jiǎn)單的手段：

因?yàn)槟阈枰褂帽M可能多的像素，在你需要的任何方式，以方便的溝通，需要做的。

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

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

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

軟信息

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

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

請(qǐng)看下面的例子：

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

但它也很簡(jiǎn)單，因?yàn)樗褂昧怂南袼?油墨/關(guān)懷和靈敏度忙碌。這不是無償?shù)模?/span>經(jīng)濟(jì)和豐富的。

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

2中央布局

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

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

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

此外，因?yàn)槲覀冋谂c我們的像素（和內(nèi)容）更經(jīng)濟(jì)，我們不為加壓塞進(jìn)盡可能多的信息水線以上/倍。

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

何時(shí)及如何使用中央布局

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

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

3較少的列

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

為什么使用較少的列好

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

統(tǒng)治中心的布局還有一個(gè)副產(chǎn)品。因?yàn)槲覀儾荒芴顫M整個(gè)屏幕，這么多，而不是試圖在屏幕上，在任何一個(gè)時(shí)間，我們根本就不需要很多列的信息。

如何選擇列

我肯定會(huì)推薦使用不超過3列，只是因?yàn)槟銘?yīng)該使用沒有什么比你需要更多。

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

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

4個(gè)單獨(dú)的頂端部分

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

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

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

為什么不同的部分是好的

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

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

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

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

何時(shí)及如何使用一個(gè)獨(dú)特的頂部

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

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

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

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

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

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

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

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

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

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

最強(qiáng)的方式做，這是使用的顏色。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

為什么呢？

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

何時(shí)及如何？

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

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

您的標(biāo)志：

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

更多信息...

8大文本

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

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

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

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

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

何時(shí)及如何使用大文本

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

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

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

您還需要haave一個(gè)原因做出一些大于其他文字文本。和文本必須是有意義的和有益的。有沒有加入一些大的文字，只是因?yàn)樗腛H -使2.0點(diǎn)！

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

9粗體文字介紹

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

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

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

何時(shí)及如何使用粗體文字介紹

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

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

10個(gè)強(qiáng)烈的色彩

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

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

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

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