“非设计者”的3种有效网页设计原则

3 Effective Web Design Principles for the “Non-Designer”

在这篇文章中,我们将重点介绍一些优秀设计的通用原则,让您对网页设计有更多的了解。

让我们开始吧!

“非设计者”的3种有效网页设计原则

 

1)三分原则

 

网页设计,平面设计,印刷设计,摄影和其他创意媒体最常见的做法之一是遵循一个简单的规则——“三分原则”。三分原则的主要目标是设计达到更多的平衡与和谐。

尽管有很多关于三分原则的争论,但主流的看法是:如果一个图像或设计在左右或者上下都过于相似时,会让人会觉得枯燥无聊。三分原则使设计在有趣的同时能保持平衡。想象一下一个这样的网格:

将物体或画面焦点放置在交点中的一处或多处通常会更加平衡和对称。下面有两张图片的比较。第一张图未遵循三分原则。

下图则遵循了三分原则。

虽然第一张图也是一个不错的图片,但是通过使用三分原则,即将背景与底部物体的交界放在三分之一处,会让图片感觉更好。让我们用三分法网格看一下第一张图:

然后看一下遵循三分法的第二张图:

你可以感受出区别来。赏心悦目的设计通常是遵循三分原则的。三分原则在摄影和摄像中极为常见,在网站设计中也同样重要。下图是如何将三分原则应用于网站首屏的设计:

这部分网站内容想强调的是以下几点:

1、简要描述我是谁以及这个网站是什么。

2、用一张图片让新用户看到他们将要看谁的内容,增强更舒适可信的感觉。

3、最新电子书的图片,给用户一个注册网站的理由。

4、最后是一个填写和提交电子邮件的号召性用语和输入框。

将三分法网格放上去后,你可以看到重点内容都在交叉点附近:

三分原则是网站设计常用的布局,会给页面带来更好的平衡感。

 

2)布局和流程

在设计和布局一个网页的时候,设计风格是没有错与对的,往往取决于项目、客户的愿望和设计风格等等。现代的时尚设计多数具有简约的外观,有更多的留白、更多的图像、更多的滚动,以及更少的文字内容。

但比较保守的客户可能会反对过多的滚动设计。所以如何设计一个流畅的布局是关键!有一些基本的布局和流程原则可以应用——Z字型布局。许多新的网站遵循了这个原则。

在左边的这个例子中,网页左侧有一个图片,右侧有一个很好的行动号召按钮,然后往下的左侧是一段文字,右侧是一个图片。反之亦然,如果右边是图片,则左边就放文字。文字图片再图片文字。z字形布局是一个很好的方式来让读者保持兴趣,也是一个很好的方式来平衡文字和图片。

虽然这不是网页设计流程布局的唯一选择,但是我们从左往右依次安排内容仍然是很好的做法,然后再从右往左循环往复。所以如果有什么疑难杂症的话,Z字形布局总是一个不错的备选方案。

最后一件事是关于滚动的,通常3-5屏是一个不错的选择。滚动越多通常代表页面加载越慢。不过滚动的长短也没有对错之分,必要的话,让访客滚动网页没什么好怕的。因为社交媒体已经培养了我们不断滚动页面并快速接收信息的习惯了。

 

3)视觉层次

最后一个主要原则是视觉层次结构。简而言之,层次结构帮助用户了解哪些是最重要的信息,并为他们提供非常明确的方向,让他们知道应该将目光放在哪里。层次结构经常被用在印刷排版中(我们将在第三篇文章中介绍),但是在图形元素,图像和网站的整体设计中也是非常重要的。

很多网站用着大小一样的文字与图片,像大杂烩一样的排列在一起,也没有清晰的行动号召,这是我们要极力避免的。使用良好的层次结构可以指导你的网站用户了解他们应该点击哪里,或接下来该做些什么。

以下是使用层次结构原理设计的网页示例:

虽然右上角的标志和电话号码显而易见,但是最显眼醒目的是点击按钮的号召性用语。

这个设计用视觉层次结构去引导客户去点击绿色的按钮。另一个例子就是下面这个网站的设计:

这个网页的主要目标是引导客户在线购物或直接联系。Logo、简短的描述、甚至电话号码都很有用,但是双按钮设计是最突出的:

这些只是一部分视觉层次结构的例子,它是一个非常强大的法则,来引导你的网站用户做你想让他们做的事情,或去你想让他们去的地方。

 

总结

希望这些有效的设计原则能够帮到你。虽然可以运用的设计原则有很多,但是今天提到的这些可能是最常用的三条吧。

如果你有好的想法,欢迎告诉我们。

 

Posted in 默认分类 and tagged .

发表评论

电子邮件地址不会被公开。 必填项已用*标注