如何设计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”来形容：

• 在网络经济的复苏
• 一个新技术的交互性的网站和服务水平之间
• 或从网上社区和社会网络的新类型的社会现象产生的

许多人还参考到最近的学校网页设计中使用的术语。我在这方面使用的舒适。

在社会学方面，在许多层面上的变动影响人们：经济，文化，政治等娱乐和体育，音乐和音乐产业，时尚，或社会崩溃的滑板朋克？

简介

我要通过优秀的网站设计的电流波的功能，您采取的最显着的特点，剖析，解释了为什么每一个可以很好，并告诉你如何使用他们在自己的网站。

如果我不得不用一个词来总结“Web 2.0”的设计，它会要“简单”，所以这就是我们将开始。

我是一个伟大的信徒在简单。我认为这是网页设计的方式向。

今天的简单，大胆，优雅的页面设计提供了少花钱多办事：

• 它们使设计师齐刷刷网站的目标，指导，通过使用更少的站点访问者的眼球，精心挑选的视觉元素，。
• 他们用字少，但多说了，和精心挑选的图像来创建所需的感觉。
• 他们拒绝的想法，我们不能从我们的网站猜测，人们想要什么

1简单

“使用尽可能少的功能，要实现你所需要的实现”

网页设计是比以往更简单，这是一件好事。

2.0设计手段突出重点，清洁，简单。

这并不一定意味着无华，稍后我将解释。

我真的相信简单。这并不是说，所有的网站应该很小，但我们应该使用尽可能少的功能，要实现你所需要的实现。

奥卡姆剃刀，这是一个原则，我使用所有的时间，我已经写了其他地方 。解释的方法之一是：在任何一个问题的两个可能的解决方案，简单的一个更好。

下面是一些例子。请注意已去掉不必要的元素每个 。可能是有很多每一页上多有... ...，但会令他们强吗？

其结果是，你必须看内容。你会发现自己完全屏幕功能设计者所预期的交互 。而你不介意的-这是容易的，你只是你来。

为什么简单好

• 网站的目标和所有网页的目的。
• 用户的注意力是一种有限的资源。
• 这是设计师的工作，以帮助用户找到他们想要的东西（或通知的网站，希望他们通知）
• 东西在屏幕上吸引人们的目光。有更多的东西，有更多不同的东西要注意，用户不太可能注意到重要的东西 。
• 因此，我们必须使一定的沟通，我们还需要以尽量减少噪音。这意味着我们需要找到一个解决方案，它尽可能少的东西。这是经济，或简单。

何时及如何使您的设计变​​得简单

什么时候？

永远！

怎么样？

与简单取得成功有两个重要方面：

1. 删除不必要的组件，在不牺牲效能。
2. 尝试达到相同的结果，更简单的替代方案。

“似乎没有达到完善时再添加，但时有什么带走了。“安托万圣艾修伯里，地球社， 1939

每当你的设计，作为一门学科，自觉地删除所有不必要的视觉元素。

特别是在集中的布局是不太相关页面的目的，的领域，因为在这些领域的视觉的活动将注意力从关注的重点内容和导航。

使用视觉细节 - 无论是行数，字数，形状，颜色 - 沟通相关信息，不只是来装点。

下面是一个患有不够简单的设计，例如。

Yaxay的接口使用了很多的像素，但他们中的绝大多数是装饰，页面背景的一部分 。相对较少的像素是用来为用户寻找或了解信息，或与网站进行交互。

见多少“东西”有看，并注意如何数的像素是用来澄清实际导航，实际的内容，或实际的互动功能。

爱德华托佛特是老板，当涉及到信息的设计。他用“ 数据墨水“（即细节，使信息传输）和“非数据墨水”（即详细的只是详细介绍）来形容这种现象。

方法之一托佛特具体措施是使用数据油墨比非数据墨水信息设计（图形，图表，演示等）的有效性 。数据油墨的使用比例越高，就越有可能是设计是有效的 。

到Yaxay上面详细介绍，还有很多我称之为“忙碌”，即很多边，色调的变化，颜色变化，形状，线条... ...很多东西看。但是，在这个细节，唯一有用的功能：

1. 该网站的标志，并
2. 标签上的导航按钮（读“艺术画廊”）

所有的的“忙碌”的休息：在后台的形状，在梯度网格的接口面板，... ...的对角线线条所有这是噪音，它的所有“非数据墨水”，因为它的不使沟通 。

我对网页设计的丰富性，复杂性或美容

简单的手段：

因为你需要使用尽可能多的像素，在你需要的任何方式，以方便的沟通，需要做的。

当然，通常是你的沟通是不是硬盘的数据，但软信息。

硬盘数据

手段的事实，如新闻，股票价格，列车时刻，还是多少钱在您的银行帐户是... ...

软信息

涵盖了通信的定性方面，有关的公司，其质量意识，服务提供商是如何平易近人的第一印象，以及你是否觉得产品会为你的权利。它可以是同样重要！

无论你沟通的是硬的或软的，你的像素数，所以他们自觉使用和护理。

请看下面的例子：

亚历Dukal的网站丰富性，趣味性和吸引力。提请您注意，它使用了一个可视化技术的范围，使你有兴趣，并给你一个温暖的感觉Alex的工作质量。

但它也很简单，因为它使用了它的像素/油墨/关怀和灵敏度忙碌。这不是无偿的，它的经济和丰富的。

无论你说的，明智的选择，您使用的墨水/像素。用它来沟通，首先。然后，问是否可以用更少的沟通一样有效。如果是的话，做到这一点。

2中央布局

（更多的信息对当前的样式页） 。基本上，绝大多数的网站这几天的定位集中在浏览器窗口。相对数是全屏幕（液体）或左对齐/固定大小，与几年前相比 。

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

这“2.0”的风格是简单的，大胆的和诚实的。直坐前面和中心的网站感觉更简单，更大胆和诚实。

此外，因为我们正在与我们的像素（和内容）更经济，我们不为加压塞进尽可能多的信息水线以上/倍。

我们少用多说，所以我们可以多一点自由和易于使用的空间量，并垫了我们的内容有很多可爱的白色空间。

何时及如何使用中央布局

我说，除非有一个很好的理由不集中定位您的网站。

您可能想获得更多的创意空间，或获得尽可能多的信息，尽可能在屏幕上（例如，一个Web应用程序）。

3较少的列

几年前，3列的网站进行了规范，以及4列的网站并不少见。今天，二是比较常见的，和3是最大的主流。

为什么使用较少的列好

少就是多。较少的列感觉更简单，更大胆，更诚实的。我们更清楚地传达的信息较少。

统治中心的布局还有一个副产品。因为我们不能填满整个屏幕，这么多，而不是试图在屏幕上，在任何一个时间，我们根本就不需要很多列的信息。

如何选择列

我肯定会推荐使用不超过3列，只是因为你应该使用没有什么比你需要更多。

总有例外，所以这里的有效使用超过3列的几个例子。

这里的一个网站，得到它错了... ...

4个单独的顶端部分

这意味着屏幕的上方（主要品牌及资产净值的面积）的其余部分（主要内容）不同。

当然，也有对这种做法并不新鲜。这是一个好主意，并已使用过。但它正在使用比以往任何时候都现在，区别往往更强。

在这6个样品，即使是在小规模的“页面顶部”是如何明确：

为什么不同的部分是好的

顶端部分说，“这是页面顶部的”。听起来很明显，但感觉好清楚知道页面的开始。

它还开始的网站/网页的经验，具有较强的，大胆的声明。这是非常“2.0”意气风发。我们想强，操作简单，大胆的态度。

这些顶级节包含只是品牌（Protolize，Mediconmedia），1刚刚导航系统（交叉连接），其余3兼得。

交叉连接器的弱点，在我看来，是该标志后的资产净值 。我宁愿要高，并明确（如如简单位）的资产净值 。

何时及如何使用一个独特的顶部

在任何网站上，两个主要的品牌和主导航应该是显而易见的，大胆的和明确的，所以这是一个好主意，在一个网站的设计，岗位标识和资产净值大胆顶部创建一个明确的空间。

屏幕上方的权利，始终把您的标志。我总是建议后，把您的主要航行权。这绝对是一件好事，标志着高级别屏幕功能，从主站点的内容单独一节，以纪念页面顶部。

顶端部分应该从视觉上的其他网页的内容不同。最强的鉴别方法是使用一个大胆的，不同的颜色或色调的固体块，但也有替代品。

下面是2个例子，其中的顶端部分是实线分开，而不是纯色本身，。

在这里，顶端部分内容只是坐在大胆以外的主要列区域。

5屏幕房地产固体领域

领先的明确区分的顶部区域，你会发现，很多网站定义的各个领域大胆，清楚地房地产 。

房地产有多种形式，包括：

• 导航
• 背景/画布
• 主要内容区
• 其他的东西
• 标注/交叉链接

可以设计一个网页，使这些地区立即有别于他们的邻居。

最强的方式做，这是使用的颜色。

但是，白色的空间，可以同样有效。

色彩浓厚的风险是它吸引​​眼球，因此它可以从其他相关的屏幕元素的注意力。我认为放在空白清洁的内容，创建一个更轻松的体验，帮助观众感到更加轻松和自由浏览。

6个简单的资产净值

常驻导航 - 全球网站页面模板的一部分，出现在每一页上的资产净值 - 需要明确的导航识别，并应该很容易解释，目标和选择。

• 2.0设计使得全球导航大的，大胆的，清洁的和明显的。
• 内置的超链接 （内文字链接）通常是明确区分正常的文本 。

为什么简单的导航更好

用户需要能够识别导航，告诉他们各种重要信息：

• 假如他们是在对事物的计划
• 还有什么地方，他们可以从这里
• 什么选择他们做的东西

以下简单的原则，一般的噪音减少，澄清导航的最佳途径是：

• 永久定位导航链接，除了从内容
• 使用颜色，色调和形状的区分导航
• 导航项目和大胆
• 使用明文的每一个环节的目的明确的

如何使您的资产净值的简单

只需记住的关键是：导航，应明确地从非导航区分 。

只要遵循以上准则，通过位置，色彩和清晰度的分化。

我的文章导航»

内嵌的超链接也应该足以从他们身边的文本中脱颖而出。

检查出这些片段。在每一种情况下，你在做无疑有什么样的联系。（个人而言，我更喜欢用蓝色文字（非下划线），轮流到强调悬停的红色... ...）

7个大胆的标志

一个明确的，大胆的，强大的品牌 - 整合的态度，语气，和第一印象 - 是帮助一个大胆的标志。

下面是一些（100％的比例）。注意，标志趋于相当大，与一般的2.0原则，。

为什么呢？

强有力的，大胆的标志说：“这是我们是谁”的方式，我们可以相信。

何时及如何？

见我的徽标上的文章和基于文本的标志 。

这很难说，如何创造一个良好的标志，但在短暂的... ...

您的标志：

• 可视化的工作在其主要的背景下，任何其他用途，它可以使用（如传单或T恤 ？）
• 识别和独特的
• 代表你的品牌的个性和素质，在第一次观看

更多信息...

8大文本

“2.0”网站的许多大的文本相比，旧式的网站。

如果您填写相同数量的空间少的“东西”，你有更多的空间。

当你取得了更大的空间，你可以选择比不太重要的元素更大更重要的元素（如果他们仍然存在）。

事情做大，使他们更加明显比较轻的元素。这种效应已被用于整个平面设计历史，标题，标题页和标题。

不仅大文本中脱颖而出，但它也更容易让更多的人。这不只是有视觉障碍的人，也是人们寻找液晶屏在阳光下，人们坐在离屏幕远一点，而人只是走过场。如果你仔细想想，这可能是很多很多人！

何时及如何使用大文本

大文本，使得大多数页面为更多的人使用，所以它是一件好事。

当然，大小是相对的的。你不能把一个正常的，繁忙的站点，使所有的文字更大，使之更加实用。这可能无法正常工作，可能会更糟糕。

为了使用大文本，你必须通过简化的空间，删除不必要的元素。

您还需要haave一个原因做出一些大于其他文字文本。和文本必须是有意义的和有益的。有没有加入一些大的文字，只是因为它的OH -使2.0点！

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

9粗体文字介绍

领先的大文本的主题，很多网站铅具有很强的所有文字标题描述。

这些通常载网站的USP，电梯间距或主要信息。

他们往往是图形，而不是普通的文本，。这样做的原因是，设计者想了很多控制页面的视觉冲击力，特别是早在浏览体验。

何时及如何使用粗体文字介绍

只使用一个，如果你有一些大胆地说。V（如果你没有大胆地说，也许是的！值得拥有一个思考的您的网页/网站的目的，值得一说的大胆与somethign的）

如果你有一个简单的消息，你首先要看到，前进和标题它。要明确把对一个相对平淡的背景。

10个强烈的色彩

明亮，强烈的色彩画的眼睛，用它们来划分成明确的路段，并突出重要的元素。

当你有一个简单的，剥离出的设计，你可以使用浓烈的色彩位，以帮助区分房地产领域，并提请注意你想要的游客要注意的项目。

颜色也是一个传达品牌价值的伟大的媒介

小心地使用高价值的功能上或周围浓烈的色彩