席克法则 有效网页设计原则 网页艺术
目录
Web Design Principles You Should Know
可视化层次结构
神圣的比例
希克定律
Fitt定律
三分法则
格式塔设计法
白色空间和简洁的设计
奥卡姆的剃刀
Web Design Principles You Should Know
您的网站设计对于转化比您想象的更重要。 你可以在世界上实现任何转换提升策略，但如果它看起来像废话，它对你没有多大帮助。
设计不仅仅是设计师所做的事情。 设计就是营销。 设计是您的产品及其运作方式。 我学到的设计越多，我得到的效果就越好。
以下是您应该了解和遵循的8种有效的网页设计原则。
注意：CXL研究所是营销人员中最优秀的1％
可视化层次结构
吱吱作响的轮子让油脂和突出的视觉效果引起了人们的注意。 视觉层次结构是良好网页设计背后最重要的原则之一。 这是人眼看到它所看到的东西的顺序。
Exercise： 请按重要性顺序排列圈子：
在不了解这些圈子的任何内容的情况下，您可以轻松地对它们进行排名。 这是视觉层次结构。
您网站的某些部分比其他部分更重要（表单，号召性用语，价值主张等），您希望这些部分比不太重要的部分更受关注。 如果你的网站菜单有10个项目，它们都同样重要吗？ 您希望用户在哪里点击？ 使重要的链接更加突出。
层次结构不仅来自大小。 亚马逊通过使用颜色使“添加到购物车”号召性用语按钮更加突出：
从业务目标开始
您应该根据您的业务目标对您网站上的元素进行排名。 如果您没有特定目标，则无法确定要优先考虑的内容。
这是一个例子，它是我拍摄的Williams Sonoma网站的截图。 他们想卖户外炊具。
眼睛最先捕获的是巨大的肉块（让我想要它），然后是标题（说它是什么）和号召性用语按钮（得到它！）。 第四位是标题下的一段文字，第五位是免费送货横幅，顶部导航是最后一位。 这是完美的视觉层次结构。
Exercise： 浏览网页并有意识地对视觉层次结构中的元素进行排名。 然后去看看你自己的网站。 是否有重要的东西（访问者可能寻求的关键信息点）在层次结构中不够高？ 改变这一点。
更多关于视觉层次结构
神圣的比例
黄金比例是一个神奇的数字1.618（\ varphi），使所有的东西都认为它在美学上令人愉悦（或者相信它）。
然后还有Fibonacci序列，其中每个术语被定义为前两个术语的总和：0,1,1,2,3,5,8,13,21等等。 有趣的是，我们有两个看似无关的主题产生相同的确切数字。
这是黄金比例的样子：
许多艺术家和建筑师将他们的作品比例接近黄金比例。 一个着名的例子是在古希腊建造的万神殿：
它可以用于网页设计吗？ 完全正确。 这是推特：
图像来源
以下是Twitter创意总监@stop的评论：
对于那些对#NewTwitter比例感到好奇的人，要知道我们没有把这些比率留给机会。
当然，这仅适用于最窄版本的UI。 如果您的浏览器窗口更宽，您的详细信息窗格将展开以提供更大的实用性，从而消除这些比例。 但是最窄的宽度显示了我们开始的位置，比例方面。
因此，如果您的布局宽度为960px，则除以1.618（= 593px）。现在您知道内容区域应为593px，侧边栏为367px。如果网站高度为760px高，您可以将其拆分为470px和290px块（760 / 1.618 = ~470）。
希克定律
希克定律说，每增加一个选择，就会增加做出决定所需的时间。
你在餐馆经历了无数次。选择丰富的菜单会让您难以选择晚餐。如果它只提供了2个选项，那么做出决定将花费更少的时间。这类似于选择的悖论 - 你给人们的选择越多，什么都不选就越容易。
用户在使用您的网站时拥有的选项越多，使用起来就越困难（或者根本不会使用）。因此，为了提供更愉快的体验，我们需要消除选择。为了实现更好的网页设计，消除分散注意力的选项的过程必须在整个设计过程中持续进行。
在无限选择的时代，人们需要更好的过滤器！如果您销售大量产品，请添加更好的过滤器以便于决策制定。
葡萄酒图书馆出售大量葡萄酒。他们使用过滤器做得很好（左侧）：
Fitt定律
Fitt定律规定，移动到目标区域所需的时间（例如，点击按钮）与目标的距离和目标的大小成反比。 换句话说，物体越大，它越接近我们，就越容易使用它。
Spotify比其他按钮更容易点击“播放”：
他们还将它（在全屏桌面应用程序上）放在左下角，这被认为是最有价值的房地产，因为角落在技术上是最容易接近的。但是，这并不适用于网页设计（由于滚动和操作系统的方式）。
这并不意味着更大更好总是更好。占据屏幕一半的按钮不是一个好主意，我们不需要数学研究来了解这一点。即便如此，Fitts定律也是二元对数。这意味着对象的可用性的预测结果沿着曲线而不是直线运行。
当给定20％的尺寸增加时，一个小按钮将变得更容易点击，而当给予相同的20％的尺寸增加时，非常大的对象将不具有相同的可用性益处。
这类似于目标规模的规则。
按钮的大小应与其预期使用频率成比例。您可以检查人们最常使用哪些按钮的统计数据，并使流行按钮更大（更容易击中）。
让我们想象一下，你希望人们填写一个表格。在表单的末尾，有两个按钮：“提交”和“重置”（清除字段）。
99.9999％想要点击“提交”。 因此按钮应该比'重置'大得多。
三分法则
在您的设计中使用图像是个好主意。 视觉可以比任何文本更快地传达您的想法。
最好的图像遵循三分法则：图像应该被想象为由两条等间距水平线和两条等间距垂直线分成九个相等的部分，并且重要的构图元素应该沿着这些线或它们的交叉点放置。
看看右边的图像更有趣吗？ 这是行动中的三分法则。
图片来源：Wikimedia Commons
使用漂亮的大图像有助于设计（不能承受Pinterest的增长），遵循此规则将使它们更有趣，从而使您的网站更具吸引力。
格式塔设计法
格式塔心理学是一种思想和大脑理论。 它的原理是人眼在感知各个部分之前就能看到整个物体。
这就是我的意思：
请注意如何在不关注狗所构成的每个黑点的情况下看到狗？
这里的关键点是，人们在看到零件之前就会看到整体。 在他们区分标题，菜单，页脚等之前，人们总是首先看到整个网站。 作为格式化的创始人之一，库尔特科夫卡说：整体存在于各部分之间。
有8种所谓的格式塔设计法则允许我们预测人们如何看待某些东西。 他们来了：
1.接近法则
人们将在空间中紧密相连的事物组合在一起。 它们成为一个单一的感知对象。
通过有效的网页设计，您需要确保不会合在一起的东西，不会被视为一个。 同样，您希望将某些设计元素组合在一起（导航菜单，页脚等），以便将它们组合成一个整体。
Craigslist使用此法律可以轻松了解哪些子类别属于“待售”：
2.相似定律
我们将类似的东西归为一类 这种相似性可以以形状，颜色，阴影或其他品质的形式出现。
在这里，我们将黑点组合成一组，将白色组合成另一组，因为 - 好吧，黑点看起来彼此相似。
Codeschool使所有推荐框都相似，因此我们将所有推荐书视为一个单独的组：
3.关闭法
我们寻求完整。 对于未关闭的形状，当整个图片的某些部分缺失时，我们的感知会填补视觉空白。 我们看到两个方块叠加在四个圆上，即使图形中实际上不存在这些形状。
如果没有闭合定律，我们会看到不同长度的不同线条，但是根据闭合定律，我们将线条组合成整个形状。
使用闭合法可以使徽标或设计元素更有趣。 一个很好的例子是1961年彼得斯科特爵士设计的世界自然基金会：
4.对称定律
头脑将物体视为对称的并围绕中心点形成。 能够将物体分成偶数个对称部分是感觉上令人愉快的。
当我们看到两个不相连的对称元素时，心灵在感知上将它们连接起来形成一个连贯的形状。
当我们观察上面的图像时，我们倾向于观察三对对称支架而不是六个独立支架。
人们更喜欢对称外观而非不对称外观。 平衡的三列和曲线增加了BootB网页设计的乐趣：
5.共同命运法则
我们倾向于将对象视为沿着路径移动的线。 我们将具有相同运动趋势的对象组合在一起，因此在同一条路径上。
人们在精神上将棍棒或举手指向某处，因为它们都指向同一个方向。 您可以使用它来引导用户注意某些事物（例如注册表单，价值主张等）。
例如，如果有一个点阵列，一半点向上移动而另一半向下移动，我们会将向上移动的点和向下移动的点视为两个不同的单位。
6.连续性定律
人们倾向于认为一条线继续其既定方向。 在对象（例如线）之间存在交叉的情况下，我们倾向于将这两条线感知为两个单独的不间断实体。 即使重叠，刺激仍然不同。
Fixel使用它将面部连接到bios：
还有其他格式塔法则，如图和地面或良好格式塔法（如果它们形成一个规则，简单和有序的模式，如奥林匹克环，则对象往往会在感知上组合在一起），但我认为提到的那些这里最有用的知道。
白色空间和简洁的设计
白色空间（也称为“负空间”）是页面“空”的部分。它是图形，边距，装订线，列之间的空间，类型线或视觉效果之间的空间之间的空间。
它不应仅仅被视为“空白”空间 - 它是设计的重要元素。它使其中的对象可以存在。空白是关于层次结构的使用。信息的层次结构，无论是类型，颜色还是图像。
没有空白区域的页面，挤满了文字或图形，冒着出现繁忙，杂乱无章的风险，通常难以阅读（人们甚至都不会打扰）。这就是为什么简单的网站在科学上更好。
足够的空白使网站看起来“干净”。虽然简洁的设计对于传达清晰的信息至关重要，但它并不仅仅意味着更少的内容。清洁设计意味着一种能够充分利用其所处空间的设计。为了实现清洁设计，您必须明智地使用白色空间来清楚地沟通。
Made.com做好白色空间：
精细使用白色空间可以轻松地将注意力集中在主要信息和视觉效果上，并且可以轻松阅读正文。
白色空间促进优雅和精致，提高易读性并提高焦点。
奥卡姆的剃刀
奥卡姆剃刀是一个原则，敦促人们在竞争假设中进行选择，这些假设产生最少的假设，从而提供最简单的效果解释。 为了将其置于设计环境中，Occam的Razor指出最简单的解决方案通常是最好的。
在一篇关于他们Angelpad体验的文章中，Pipedrive的人说如下：
Angelpad团队和导师在很多方面挑战了我们。 “你的主页上有太多东西”是我们最初不同意的事情，但我们很乐意测试。 事实证明我们确实是错的。 我们删除了80％的内容，并在主页上留下了一个注册按钮和一个了解详情链接。 注册转换增加了300％。
这不仅仅是关于外观，还有关于它是如何工作的。 一些公司 - 比如37Signals--已经将“简单”转变为商业模式。 以下是“返工”一书的引用（由创始人撰写）：
很多人讨厌我们，因为我们的产品比竞争产品少。 当我们拒绝包括他们的受到青睐特征时，他们受到了侮辱。 我们因为不做他们做的事情而对我们的产品感到自豪，因为我们的工作就像我们自己一样。 我们将它们设计得很简单，因为我们认为大多数软件太复杂：功能太多，按钮太多，混乱太多。
简单，简约的设计并不意味着设计有效或有效。 但根据我的经验，简单总是好于相反 - 因此我们应该努力简化。
结论：
有效的网页设计和艺术是不一样的。
您应该为用户设计并考虑到业务目标。 使用这些网页设计原则，您可以获得美学和经济上有益的结果。