如何設計Web 2.0風格網站？

在本教程中，我將介紹各種常見的圖形設計元素，在現代的Web（“2.0”）設計風格網站。

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

因此，從我當前的風格文章，更深入地分析當前的“Web 2.0”的設計風格的設計特點。

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

涵蓋功能摘要

下面的列表總結了許多典型的“Web 2.0”的網站的共同特點。

顯然，一個網站并不需要表現出所有這些功能運作良好，并顯示這些功能并沒有設計“2.0” - 還是不錯的！

我已經解決，這些因素我介紹一些當前的風格的文章。另外請注意我的文章真正的Web2.0的設計，這就解釋了Web2.0的設計的本質不是表面的圖形效果，但簡單的紀律。

免責聲明

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

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

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

Web 2.0的？

我使用的術語“Web 2.0設計”來形容當時的網頁設計風格，我在我的當前樣式文章介紹。

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

• 在網絡經濟的復蘇
• 一個新技術的交互性的網站和服務水平之間
• 或從網上社區(qū)和社會網絡的新類型的社會現象產生的

許多人還參考到最近的學校網頁設計中使用的術語。我在這方面使用的舒適。

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

簡介

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

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

我是一個偉大的信徒在簡單。我認為這是網頁設計的方式向。

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

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

1簡單

“使用盡可能少的功能，要實現你所需要的實現”

網頁設計是比以往更簡單，這是一件好事。

2.0設計手段突出重點，清潔，簡單。

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

我真的相信簡單。這并不是說，所有的網站應該很小，但我們應該使用盡可能少的功能，要實現你所需要的實現。

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

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

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

?

為什么簡單好

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

何時及如何使您的設計變??得簡單

什么時候？

永遠！

怎么樣？

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

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

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

每當你的設計，作為一門學科，自覺地刪除所有不必要的視覺元素。

特別是在集中的布局是不太相關頁面的目的，的領域，因為在這些領域的視覺的活動將注意力從關注的重點內容和導航。

使用視覺細節(jié) - 無論是行數，字數，形狀，顏色 - 溝通相關信息，不只是來裝點。

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

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

見多少“東西”有看，并注意如何數的像素是用來澄清實際導航，實際的內容，或實際的互動功能。

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

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

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

1. 該網站的標志，并
2. 標簽上的導航按鈕（讀“藝術畫廊”）

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

我對網頁設計的豐富性，復雜性或美容

簡單的手段：

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

當然，通常是你的溝通是不是硬盤的數據，但軟信息。

硬盤數據

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

軟信息

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

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

請看下面的例子：

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

但它也很簡單，因為它使用了它的像素/油墨/關懷和靈敏度忙碌。這不是無償的，它的經濟和豐富的。

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

2中央布局

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

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

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

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

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

何時及如何使用中央布局

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

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

3較少的列

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

為什么使用較少的列好

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

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

如何選擇列

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

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

這里的一個網站，得到它錯了... ...

4個單獨的頂端部分

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

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

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

為什么不同的部分是好的

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

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

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

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

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

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

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

頂端部分應該從視覺上的其他網頁的內容不同。最強的鑒別方法是使用一個大膽的，不同的顏色或色調的固體塊，但也有替代品。

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

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

5屏幕房地產固體領域

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

房地產有多種形式，包括：

• 導航
• 背景/畫布
• 主要內容區(qū)
• 其他的東西
• 標注/交叉鏈接

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

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

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

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

6個簡單的資產凈值

常駐導航 - 全球網站頁面模板的一部分，出現在每一頁上的資產凈值 - 需要明確的導航識別，并應該很容易解釋，目標和選擇。

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

為什么簡單的導航更好

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

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

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

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

如何使您的資產凈值的簡單

只需記住的關鍵是：導航，應明確地從非導航區(qū)分 。

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

我的文章導航?

內嵌的超鏈接也應該足以從他們身邊的文本中脫穎而出。

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

7個大膽的標志

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

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

為什么呢？

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

何時及如何？

見我的徽標上的文章和基于文本的標志 。

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

您的標志：

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

更多信息...

8大文本

“2.0”網站的許多大的文本相比，舊式的網站。

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

當你取得了更大的空間，你可以選擇比不太重要的元素更大更重要的元素（如果他們仍然存在）。

事情做大，使他們更加明顯比較輕的元素。這種效應已被用于整個平面設計歷史，標題，標題頁和標題。

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

何時及如何使用大文本

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

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

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

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

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

9粗體文字介紹

領先的大文本的主題，很多網站鉛具有很強的所有文字標題描述。

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

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

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

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

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

10個強烈的色彩

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

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

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

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