bts防弹少年团演唱会

bts防弹少年团演唱会

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

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

您的网站设计对于转化比您想象的更重要。 你可以在世界上实现每一种提升转换的策略,但是如果你的网页设计看起来像废话,它对你没有多大帮助。

设计不仅仅是设计师所做的事情。 设计就是营销。 设计是您的产品及其运作方式。 我越了解网页设计的原则,我得到的结果就越好。

  • 《8 2019年要了解的网页设计原则》
  • 免费的用户体验和可用性课程

    由卡尔吉利斯

    从原则到实践。 观看UX和可用性免费课程。

  • 此字段用于验证目的,应保持不变。

以下是您应该了解和遵循的8种有效的网页设计原则

1.视觉层次结构

吱吱作响的轮子获得油脂,突出的视觉效果引起了人们的注意。 %E8%A7%86%E8%A7%89%E5%B1%82%E6%AC%A1%E7%BB%93%E6%9E%84%E6%98%AF%E8%89%AF%E5%A5%BD%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1%E8%83%8C%E5%90%8E%E6%9C%80%E9%87%8D%E8%A6%81%E7%9A%84%E5%8E%9F%E5%88%99%E4%B9%8B%E4%B8%80%E3%80%82″>

行使。 请按重要性顺序排列圈子:

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

如果不知道这些圈任何事情 ,你能对他们进行排名
容易。 这是一个视觉层次结构。

您网站的某些部分比其他部分更重要( %E8%A1%A8%E5%8D%95“>

如果你的网站菜单有10个项目,它们都同样重要吗? 您希望用户在哪里点击? 使重要的链接更加突出。

层次结构不仅来自大小。 亚马逊通过使用颜色使“添加到购物车”和“立即购买” 号召性用语按钮变得更加突出:

《8 2019年要了解的网页设计原则》
哪些按钮引人注目? 颜色可以帮助网页元素脱颖而出。

从业务目标开始

您应该根据您的业务目标对您网站上的元素进行排名。 如果您没有特定的目标,您将不知道要优先考虑的内容。

这是一个例子。 这是我从Williams-Sonoma网站上截取的截图。 他们想卖户外炊具。

《8 2019年要了解的网页设计原则》
视觉层次对于有效的网页设计至关重要。

最大的吸引眼球是巨大的肉块(让我想要它),然后是标题(说它是什么),以及号召性用语(得到它)。 第四位是标题下的一段文字; 第五个是免费送货横幅,顶部导航是最后一个。

这是视觉层次结构 – 网页设计的永恒原则 – 做得好。

行使。 浏览网页并有意识地对视觉层次结构中的元素进行排名。 然后去看看你的网站。 在层次结构中是否有一些重要的东西(即访问者寻求的关键信息)? 让它更突出。

2.神圣的比例

《8 2019年要了解的网页设计原则》
小写的希腊字母phi用于黄金比例。

%E9%BB%84%E9%87%91%E6%AF%94%E4%BE%8B%E6%98%AF%E7%A5%9E%E5%A5%87%E7%9A%84%E6%95%B0%E5%AD%971.618%EF%BC%88%CF%86%EF%BC%89%E3%80%82″>

然后,有Fibonacci%E5%BA%8F%E5%88%97%E3%80%82“>了相同的确切数字。

以下是黄金比例的样子:

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

许多艺术家和建筑师使用比例来近似黄金比例。 一个着名的例子是古希腊建造的帕台农神庙:

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

黄金比例可以用于网页设计吗? 你打赌。 这是推特:

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

这是多年前Twitter推特创意总监道格鲍曼的评论。 该设计选择不是偶然的p“>

因此,如果您的布局宽度为960px,则除以1.618(= 593px)。 您知道内容区域的宽度应为593px,侧边栏的宽度应为367px。 如果网站高度为760px高,您可以将其拆分为470px和290px块(760 / 1.618 = ~470)。

如果您想了解更多信息,请查看本文,了解如何将黄金比例应用于排版。

希克定律

%E5%B8%8C%E5%85%8B%E5%AE%9A%E5%BE%8B%E8%AF%B4%EF%BC%8C%E6%AF%8F%E5%A2%9E%E5%8A%A0%E4%B8%80%E4%B8%AA%E9%80%89%E6%8B%A9%EF%BC%8C%E5%B0%B1%E4%BC%9A%E5%A2%9E%E5%8A%A0%E5%81%9A%E5%87%BA%E5%86%B3%E5%AE%9A%E6%89%80%E9%9C%80%E7%9A%84%E6%97%B6%E9%97%B4%E3%80%82″>

你在餐馆经历了无数次。 选择丰富的菜单会让您难以选择晚餐。 如果它提供两种选择,做出决定将花费更少的时间。 这类似于选择的悖论 – 你给出的选择越多,选择什么就越容易。 这两个原则都与网页设计有关。

用户在您的网站上拥有的选项越多,使用起来就越困难(如果使用的话)。 我们需要消除选择。 为了实现更好的网页设计,请注重在整个设计过程中消除分散注意力的选项。

在一个无限选择的时代,人们需要更好的过滤器! 如果您销售大量产品,请添加更好的过滤器以便于决策。 %E8%91%A1%E8%90%84%E9%85%92%E5%9B%BE%E4%B9%A6%E9%A6%86%E5%87%BA%E5%94%AE%E5%A4%A7%E9%87%8F%E8%91%A1%E8%90%84%E9%85%92%E3%80%82″>

他们使用过滤器做得很好:

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

费特定律

Fitt定律规定,移动到目标区域所需的时间(例如,单击按钮)是目标的距离和目标大小的函数。 换句话说,物体越大,物体越近,它就越容易使用。

Spotify比其他按钮更容易点击“播放”:

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

在手机应用程序中,他们还将播放按钮放在易于点击的位置。

更大并不总是更好。 占据屏幕一半的按钮不是一个好主意,我们不需要数学研究来告诉我们。 即便如此,Fitt定律也是二元对数。 这意味着对象的可用性的预测结果沿着曲线而不是直线运行。

当尺寸增加20%时,一个小按钮更容易点击,而一个非常大的物体,在尺寸增加20%的情况下,将无法提供相同的可用性优势。

这类似于目标大小规则。 按钮的大小应与其预期使用频率成比例。 您可以使用鼠标跟踪查看人们使用最多的按钮,然后使流行按钮更大(更容易击中)。

让我们想象一下,你希望人们填写一个表格。 在表单的末尾,有两个按钮:“提交”和“重置”(清除字段)。

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

99.9999%想要点击“提交”。因此,按钮应该比“重置”大得多。

5.三分法则

在您的设计中使用图像是个好主意。 视觉可以比文本更快地传达您的想法。

最佳图像遵循%E4%B8%89%E5%88%86%E6%B3%95%E5%88%99“>

下面,看看右边的图像更有趣吗? 这是三分之二的规则。

《8 2019年要了解的网页设计原则》
三分法则是一个简单的图像设计原则。 (图像源)

使用漂亮的大图像有助于良好的网页设计。 如果您的图片更有趣,您的网站将更具吸引力。

6.格式塔设计法

格式塔心理学是一种思想和大脑的理论。 它的原理是人眼在感知各个部分之前就能看到整个物体。

这就是我的意思:

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

请注意如何在不关注狗所构成的每个黑点的情况下看到狗? 格拉特科夫卡的创始人Kurt” koffka>

由于它与网页设计有关,人们首先会看到整个网站,然后才能区分标题,菜单,页脚等。

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

1.接近法则

人们将在太空中靠近在一起的东西组合在一起。 它们成为一个单一的感知对象。

对于有效的网页设计,请确保 合并的内容不会被视为一个。 同样,您将相关的设计元素组合在一起(导航菜单,页脚等),以便将它们组成一个整体。

《8 2019年要了解的网页设计原则》
“邻近法则”显示了思维如何根据彼此的距离自然地分组(或分离)项目。

Craigslist使用此法律可以轻松理解哪些子类别属于“待售”:

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

2.相似定律

我们将类似的东西归为一类 这种相似性可以以形状,颜色,阴影或其他品质的形式发生。

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

在这里,我们将黑点分为一组,将白色分为另一组,因为相同颜色的点看起来彼此相似。

应用于网页设计时的效果如何? Mixpanel%E4%BD%BF%E7%94%A8%E7%B1%BB%E4%BC%BC%E7%9A%84%E8%AE%BE%E8%AE%A1%E6%9D%A5%E9%93%BE%E6%8E%A5%E5%88%B0%E6%A1%88%E4%BE%8B%E7%A0%94%E7%A9%B6%EF%BC%8C%E5%9B%A0%E6%AD%A4%E6%88%91%E4%BB%AC%E5%B0%86%E5%AE%83%E4%BB%AC%E8%A7%86%E4%B8%BA%E4%B8%80%E4%B8%AA%E5%8D%95%E7%8B%AC%E7%9A%84%E7%BB%84%EF%BC%8C%E6%AF%8F%E4%B8%AA%E7%BB%84%E5%90%88%E5%BC%BA%E5%8C%96%E5%8F%A6%E4%B8%80%E4%B8%AA%EF%BC%9A”>

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

3.关闭法

我们寻求完整。 当未关闭的形状或图片的某些部分缺失时,我们的感知会填补视觉空白。 我们看到一个圆圈和一个正方形,即使下图中的两个形状实际上都不存在。

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

如果没有闭合定律,我们只会看到不同长度的不同线条。 但是闭合定律将线条组合成整体形状。

使用闭包定律可以使徽标或设计元素更有趣。 世界自然基金会的标志就是一个很好的例子,该标志由彼得斯科特爵士于1961年设计:

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

4.对称定律

头脑将物体视为对称的,围绕中心点形成。 将物体分成偶数个对称部分是感觉上令人愉悦的。

当我们看到两个不相连的对称元素时,心灵会在感知上将它们连接起来形成一个连贯的形状。

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

当我们观察上面的图像时,我们倾向于观察三对对称的支架而不是六个单独的支架。

人们更喜欢对称外观而非不对称外观。 交替的图像和文本列,居中的滑块和三列列表增加了Trello主页设计的视觉享受:

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

5.共同命运法则

我们倾向于将对象视为沿着路径移动的线。 我们将具有相同运动趋势的对象组合在一起,因此在同一条路径上。

在精神上,人们聚在一起棍棒或举手指向某处,因为他们都指向同一个方向。 在您的网站设计中,您可以使用它来引导用户注意某些事物(例如注册表单,价值主张等)。

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

例如,如果有一个点阵列,一半点向上移动而另一半点向下移动,我们将向上移动的点和向下移动的点视为两个不同的单位。

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

6.连续性法则

人们倾向于认为一条线继续其既定方向。 当对象(例如线条)之间存在交叉时,我们倾向于将这两条线感知为两个单一的,不间断的实体。 即使重叠,刺激仍然不同。

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

Fixel%E4%BD%BF%E7%94%A8

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

还有其他格式塔法则, %E5%A6%82%E5%9B%BE%E5%92%8C%E5%9C%B0%E9%9D%A2%E6%88%96%E8%89%AF%E5%A5%BD%E6%A0%BC%E5%BC%8F%E5%A1%94%E6%B3%95%E3%80%82“>

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

白色空间(也称为“负空间”)是网页中保持“空”的部分。它是图形,边距,装订线,列之间的空间,类型线之间的空间或视觉效果之间的空间。

它不仅仅是“空白”空间 – 它是网页设计的重要元素。 它使其中的对象存在。 白色空间是关于信息,排版,颜色或图像的层次结构的使用。

没有空白区域的页面,挤满了文字或图形,风险显得繁忙或混乱。 通常,它很难阅读。 (人们甚至都不会打扰。)这就是%E4%B8%BA%E4%BB%80%E4%B9%88%E7%AE%80%E5%8D%95%E7%9A%84%E7%BD%91%E7%AB%99%E5%9C%A8%E7%A7%91%E5%AD%A6%E4%B8%8A%E6%9B%B4%E5%A5%BD“>

适量的空白区域使网站看起来“干净”。虽然干净的设计对于传达清晰的信息至关重要,但它并不仅仅意味着更少的内容。

干净的设计充分利用了它所处的空间。要创建一个干净的网站设计,您需要知道如何通过明智地使用空白区域进行清晰的沟通。 Made.com%E4%BD%BF%E7%94%A8%E7%99%BD%E8%89%B2%E7%A9%BA%E9%97%B4%EF%BC%9A”>

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

精细使用白色空间使您可以轻松地专注于主要信息和视觉效果,并且身体副本易于阅读。 一般来说,白色空间可以促进优雅和精致,提高易读性并提高焦点。

阅读更多关于白色空间和简洁性的信

8.奥卡姆的剃刀

当给出几个相互竞争的假设时,奥卡姆的剃刀促使你选择那个做出最少假设的剃刀,从而提供最简单的解释。 为了将其置于网页设计的背景下,Occam的Razor认为最简单的解决方案通常是最好的。

在一篇%E5%85%B3%E4%BA%8E%E4%BB%96%E4%BB%ACAngelpad%E4%BD%93%E9%AA%8C%E7%9A%84%E6%96%87%E7%AB%A0%E4%B8%AD“>

Angelpad团队和导师在很多方面挑战了我们。 “你的主页上有太多东西”是我们最初不同意的事情,但我们很乐意测试。 事实证明我们确实是错的。 我们删除了80%的内容,并在主页上留下了一个注册按钮和一个了解详情链接。 注册转换增加了300%。

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

这不仅仅是关于外观,还关乎如何工作的。 像37Signals这样的公司已经将“简单”转变为商业模式。 以下是创始人Jason Fried撰写的“ 返工 ”一书的引用:

很多人讨厌我们,因为我们的产品比竞争对手少。 当我们拒绝包括他们的宠物特征时,他们受到了侮辱。 但我们对我们的产品不做的事情感到自豪,因为我们的工作就像我们一样。 我们将它们设计得很简单,因为我们认为大多数软件太复杂:功能太多,按钮太多,混乱太多。

简单,简约的设计并不能保证设计的正常运行。 但是,根据我的经验,简单总是好于相反 – 因此,我们应该努力简化我们的网页设计。

结论

有效的网页设计和艺术是不一样的。 但许多心理和设计原则适用于网站。 您可以通过将这些法律的相关方面应用于布局,排版和图像来设计出色的网站。

为用户您的业​​务目标设计。 良好的网页设计可以提供美观和经济上有益的结果。

相关文章

点赞

发表评论

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