首页 关于我们 项目案例 网站建设 网站优化 微信公众号 技术课堂 联系方式
QQ联系点击这里给我发消息
电话联系
手机联系
QQ联系点击这里给我发消息
电话联系
手机联系
【当前位置】

2019年要了解的网页设计原则

发布时间:2019-06-03 10:09
发布者:康康
浏览次数:
2019年要了解的网页设计原则
您的网站设计对于转化比您想象的更重要。你可以在世界上实现每一种提升转换的策略,但是如果你的网页设计看起来像废话,它对你没有多大帮助。
 
设计不仅仅是设计师所做的事情。设计就是营销。设计是您的产品及其运作方式。我越了解网页设计的原则,我得到的结果就越好。
 
以下是您应该了解和遵循的8种有效的网页设计原则。
 

1.视觉层次结构


吱吱作响的轮子获得油脂,突出的视觉效果引起了人们的注意。视觉层次结构是良好网页设计背后最重要的原则之一。这是人眼看到它所看到的东西的顺序。
 
行使。请按重要性顺序排列圈子:
 
视觉层次圈
如果不知道任何有关这些圈子里,你能对他们进行排名 
容易。这是一个视觉层次结构。
 
您网站的某些部分比其他部分更重要(表单,号召性用语,价值主张等),您希望这些部分比不太重要的部分更受关注。
 
如果你的网站菜单有10个项目,它们都同样重要吗?您希望用户在哪里点击?使重要的链接更加突出。
 
层次结构不仅来自大小。亚马逊通过使用颜色使“添加到购物车”和“立即购买” 号召性用语按钮变得更加突出:
 
亚马逊添加到购物车立即购买按钮
哪些按钮引人注目?颜色可以帮助网页元素脱颖而出。
从业务目标开始
您应该根据您的业务目标对您网站上的元素进行排名。如果您没有特定的目标,您将不知道要优先考虑的内容。
 
这是一个例子。这是我从Williams-Sonoma网站上截取的截图。他们想卖户外炊具。
 
 
视觉层次对于有效的网页设计至关重要。
最大的吸引眼球是巨大的肉块(让我想要它),然后是标题(说它是什么),以及号召性用语(得到它)。第四位是标题下的一段文字; 第五个是免费送货横幅,顶部导航是最后一个。
 
这是视觉层次结构 - 网页设计的永恒原则 - 做得好。
 
行使。浏览网页并有意识地对视觉层次结构中的元素进行排名。然后去看看你的网站。在层次结构中是否有一些重要的东西(即访问者寻求的关键信息)?让它更突出。
 

2.神圣的比例


 
小写的希腊字母phi用于黄金比例。
黄金比例是神奇的数字1.618(φ)。使用由黄金比例定义的比例的设计被认为是美学上令人愉悦的。
 
然后,有Fibonacci序列。每个术语是前两个术语的总和:0,1,1,2,3,5,8,13,21等。有趣的是两个看似无关的主题产生了相同的确切数字。
 
以下是黄金比例的样子:
 
 
许多艺术家和建筑师使用比例来近似黄金比例。一个着名的例子是古希腊建造的帕台农神庙:
 
万神殿的例子黄金比例
黄金比例可以用于网页设计吗?你打赌。这是推特:
 
黄金比例推特
这是多年前Twitter推特创意总监道格鲍曼的评论。该设计选择不是偶然的p:
 
对于那些对#NewTwitter列比例感兴趣的人来说,知道我们没有把这些比率留给机会。http://flic.kr/p/8ETYM7
 
- 道格鲍曼(@stop)2010年9月28日
因此,如果您的布局宽度为960px,则除以1.618(= 593px)。您知道内容区域的宽度应为593px,侧边栏的宽度应为367px。如果网站高度为760px高,您可以将其拆分为470px和290px块(760 / 1.618 = ~470)。
 
如果您想了解更多信息,请查看本文,了解如何将黄金比例应用于排版。
 
希克定律
希克定律说,每增加一个选择,就会增加做出决定所需的时间。
 
你在餐馆经历了无数次。选择丰富的菜单会让您难以选择晚餐。如果它提供两种选择,做出决定将花费更少的时间。这类似于选择的悖论 - 你给出的选择越多,选择什么就越容易。这两个原则都与网页设计有关。
 
用户在您的网站上拥有的选项越多,使用起来就越困难(如果使用的话)。我们需要消除选择。为了实现更好的网页设计,请注重在整个设计过程中消除分散注意力的选项。
 
在一个无限选择的时代,人们需要更好的过滤器!如果您销售大量产品,请添加更好的过滤器以便于决策。葡萄酒图书馆出售大量葡萄酒。
 
他们使用过滤器做得很好:
 
葡萄酒库使用产品过滤器
费特定律
Fitt定律规定,移动到目标区域所需的时间(例如,单击按钮)是到目标的距离和目标大小的函数。换句话说,物体越大,物体越近,它就越容易使用。
 
Spotify比其他按钮更容易点击“播放”:
 
spotify fitts法律按钮大小
在手机应用程序中,他们还将播放按钮放在易于点击的位置。
 
更大并不总是更好。占据屏幕一半的按钮不是一个好主意,我们不需要数学研究来告诉我们。即便如此,Fitt定律也是二元对数。这意味着对象的可用性的预测结果沿着曲线而不是直线运行。
 
当尺寸增加20%时,一个小按钮更容易点击,而一个非常大的物体,在尺寸增加20%的情况下,将无法提供相同的可用性优势。
 
这类似于目标大小的规则。按钮的大小应与其预期使用频率成比例。您可以使用鼠标跟踪查看人们使用最多的按钮,然后使流行按钮更大(更容易击中)。
 
让我们想象一下,你希望人们填写一个表格。在表单的末尾,有两个按钮:“提交”和“重置”(清除字段)。
 
提交和重置相同大小的按钮
99.9999%想要点击“提交”。因此,按钮应该比“重置”大得多。
 

5.三分法则


在您的设计中使用图像是个好主意。视觉可以比文本更快地传达您的想法。
 
最佳图像遵循三分法则:图像应由两条等间隔水平线和两条等间距垂直线分成九个相等的部分。重要的成分元素应沿这些线或其交叉点放置。
 
下面,看看右边的图像更有趣吗?这是三分之二的规则。
 
网站图像的三分法例子
三分法则是一个简单的图像设计原则。 (图像源)
使用漂亮的大图像有助于良好的网页设计。如果您的图片更有趣,您的网站将更具吸引力。
 

6.格式塔设计法


格式塔心理学是一种思想和大脑的理论。它的原理是人眼在感知各个部分之前就能看到整个物体。
 
这就是我的意思:
 
格式塔设计的例子
请注意如何在不关注狗所构成的每个黑点的情况下看到狗?格拉特科夫卡的创始人Kurt Koffka用这种方式解释道:“整体存在于各部分之间。”
 
由于它与网页设计有关,人们首先会看到整个网站,然后才能区分标题,菜单,页脚等。
 

有八种所谓的格式塔设计法则允许我们预测人们如何看待某事物。以下是每种与网页设计的关系:

 

1.接近法则 

人们将在太空中靠近在一起的东西组合在一起。它们成为一个单一的感知对象。
 
对于有效的网页设计,请确保不合并的内容不会被视为一个。同样,您将相关的设计元素组合在一起(导航菜单,页脚等),以便将它们组成一个整体。
 
格式塔接近法则
“邻近法则”显示了思维如何根据彼此的距离自然地分组(或分离)项目。
Craigslist使用此法律可以轻松理解哪些子类别属于“待售”:
 
craigslist格式塔接近法例

2.相似定律

我们将类似的东西归为一类 这种相似性可以以形状,颜色,阴影或其他品质的形式发生。
 
相似性格式设计法则
在这里,我们将黑点分为一组,将白色分为另一组,因为相同颜色的点看起来彼此相似。
 
应用于网页设计时的效果如何?Mixpanel使用类似的设计来链接到案例研究,因此我们将它们视为一个单独的组,每个组合强化另一个:
 
 

3.关闭法

我们寻求完整。当未关闭的形状或图片的某些部分缺失时,我们的感知会填补视觉空白。我们看到一个圆圈和一个正方形,即使下图中的两个形状实际上都不存在。
 
 
如果没有闭合定律,我们只会看到不同长度的不同线条。但是闭合定律将线条组合成整体形状。
 
使用闭包定律可以使徽标或设计元素更有趣。世界自然基金会的标志就是一个很好的例子,该标志由彼得斯科特爵士于1961年设计:
 
商标关闭示例法

4.对称定律

头脑将物体视为对称的,围绕中心点形成。将物体分成偶数个对称部分是感觉上令人愉悦的。
 
当我们看到两个不相连的对称元素时,心灵会在感知上将它们连接起来形成一个连贯的形状。
 
格式塔对称律
当我们观察上面的图像时,我们倾向于观察三对对称的支架而不是六个单独的支架。
 
人们更喜欢对称外观而非不对称外观。交替的图像和文本列,居中的滑块和三列列表增加了Trello主页设计的视觉享受:
 
 

5.共同命运法则

我们倾向于将对象视为沿着路径移动的线。我们将具有相同运动趋势的对象组合在一起,因此在同一条路径上。
 
在精神上,人们聚在一起棍棒或举手指向某处,因为他们都指向同一个方向。在您的网站设计中,您可以使用它来引导用户注意某些事物(例如注册表单,价值主张等)。
 
具有共同命运法则的网页设计实例
例如,如果有一个点阵列,一半点向上移动而另一半点向下移动,我们将向上移动的点和向下移动的点视为两个不同的单位。
 
共同命运法例

6.连续性法则

人们倾向于认为一条线继续其既定方向。当对象(例如线条)之间存在交叉时,我们倾向于将这两条线感知为两个单一的,不间断的实体。即使重叠,刺激仍然不同。
 
 
Fixel使用它将面部连接到bios:
 
 
还有其他格式塔法则,如图和地面或良好格式塔法。(如果对象形成一个规则,简单,有序的图案,就像奥运五环一样,它们会在感知上组合在一起。)但是,上面提到的是网页设计的最佳指导原则。
 

7.洁白的空间和干净的设计

白色空间(也称为“负空间”)是网页中保持“空”的部分。它是图形,边距,装订线,列之间的空间,类型线之间的空间或视觉效果之间的空间。
 
它不仅仅是“空白”空间 - 它是网页设计的重要元素。它使其中的对象存在。白色空间是关于信息,排版,颜色或图像的层次结构的使用。
 
没有空白区域的页面,挤满了文字或图形,风险显得繁忙或混乱。通常,它很难阅读。(人们甚至都不会打扰。)这就是为什么简单的网站在科学上更好。
 
适量的空白区域使网站看起来“干净”。虽然干净的设计对于传达清晰的信息至关重要,但它并不仅仅意味着更少的内容。
 
干净的设计充分利用了它所处的空间。要创建一个干净的网站设计,您需要知道如何通过明智地使用空白区域进行清晰的沟通。Made.com使用白色空间:
 
 
精细使用白色空间使您可以轻松地专注于主要信息和视觉效果,并且身体副本易于阅读。一般来说,白色空间可以促进优雅和精致,提高易读性并提高焦点。
 
了解更多关于白空间和简单。
 

8.奥卡姆的剃刀

当给出几个相互竞争的假设时,奥卡姆的剃刀促使你选择那个做出最少假设的剃刀,从而提供最简单的解释。为了将其置于网页设计的背景下,Occam的Razor认为最简单的解决方案通常是最好的。
 
在一篇关于他们Angelpad体验的文章中,Pipedrive的团队写道:
 
Angelpad团队和导师在很多方面挑战了我们。“你的主页上有太多东西”是我们最初不同意的事情,但我们很乐意测试。事实证明我们确实是错的。我们删除了80%的内容,并在主页上留下了一个注册按钮和一个了解详情链接。注册转换增加了300%。
 
pipedrive简化主页设计
这不仅仅是关于外观,还关乎它是如何工作的。像37Signals这样的公司已经将“简单”转变为商业模式。以下是创始人Jason Fried撰写的“ 返工 ”一书的引用:
 
很多人讨厌我们,因为我们的产品比竞争对手少。当我们拒绝包括他们的宠物特征时,他们受到了侮辱。但我们对我们的产品不做的事情感到自豪,因为我们的工作就像我们一样。我们将它们设计得很简单,因为我们认为大多数软件太复杂:功能太多,按钮太多,混乱太多。
 
简单,简约的设计并不能保证设计的正常运行。但是,根据我的经验,简单总是好于相反 - 因此,我们应该努力简化我们的网页设计。
 
结论
有效的网页设计和艺术是不一样的。但许多心理和设计原则适用于网站。您可以通过将这些法律的相关方面应用于布局,排版和图像来设计出色的网站。
 
为用户和您的业​​务目标设计。良好的网页设计可以提供美观和经济上有益的结果。

本文链接:http://www.kzxseo.com/seoyouhuawenzhang/221.html 康之讯网站建设设计