8个您应该知道的网页设计原则

善微科技 2017 05月21日 发布


您的网站设计比您想象的更重要。您可以在世界上实施任何转化提升策略,但如果看起来像垃圾,那么你不会很好。


设计不只是设计师的设计。设计是营销。设计是您的产品及其工作原理。我对设计了解越多,结果越好。


这是您应该知道和遵循的8个有效的网页设计原则。


注意:ConversionXL研究所是营销人员的前1%的学习手段的地方。今天注册


有效的网页设计原则1:视觉层次

吱吱吱吱吱吱吱吱吱吱吱嗒的轮子得到油脂和突出的视觉效果引起注意。视觉层次是良好网页设计背后最重要的原则之一。人眼看到的是什么样的顺序。





不知道有关这些圈子的事情,你很容易对他们进行排名。那就是视觉层次。


您网站的某些部分比其他部分(表单,号召性用语,价值主张等)更重要,您希望这些部分比较不重要的部分更受关注。如果您的网站菜单有10个项目,都是同样重要的?您希望用户点击哪里?使重要链接更加突出。


层次结构不仅来自于大小。亚马逊通过使用颜色使“添加到购物车” 呼叫更加突出:




从商业目标开始


您应该根据您的业务目标对您网站上的元素进行排名。如果您没有具体目标,您将无法知道要确定哪些优先级。


这是一个例子,这是一个截图,我拿到了威廉姆斯索诺玛网站。他们想卖户外炊具。


最大的眼睛捕手是巨大的肉块(让我想要的),其次是标题(说是什么)和呼吁行动按钮(得到它)。第四名是标题下的一段文字,第五名是免费送货横幅,顶部导航是最后一个。这是完美的视觉层次。



浏览网页并有意识地对视觉层次结构中的元素进行排名。然后去看你自己的网站。有什么重要的(关键信息点,访客可能寻求)在层次结构中不够高?改变一下


更多关于视觉层次结构。


有效的网页设计原则

黄金比例是一个神奇的数字1.618( varphi),使得所有的东西与美观相称(或者相信)成比例。


那么还有  斐波纳契序列  ,其中每个术语被定义为前面两个术语的和:0,1,2,3,5,8,13,21等等。有趣的是,我们有两个看似无关的话题产生相同的确切数字。



这当然只适用于最窄版本的UI。如果您的浏览器窗口更宽,您的详细信息窗格将会展开,以提供更多的实用程序,从而减少这些比例。但最窄的宽度显示了我们开始的比例。


因此,如果您的布局宽度为960px,请将其除以1.618(= 593px)。现在你知道内容区域应该是593px和sidebar 367px。如果网站高度高达760px,您可以将其分割成470像素和290像素块(760 / 1.618 =?470)。



有效的网页设计原则3:希克定律

希克法则说,随着每一个额外的选择都会增加决定所需的时间。


你在餐厅经历了无数次。具有巨大选择的菜单使您难以选择您的晚餐。如果只提供2个选项,作出决定将需要更少的时间。这类似于悖论选择 - 你给人的选择越多,选择就越容易。


用户在使用网站时使用的选项越多,使用(或根本不会使用)就越困难。所以为了提供更愉快的体验,我们需要消除选择。为了做出更好的网页设计,在整个设计过程中消除干扰选项的过程必须是连续的。


在无限选择的时代,人们需要更好的过滤器!如果您销售大量产品,请添加更好的过滤器,以便更容易的决策。


葡萄酒图书馆销售大量的葡萄酒。他们在过滤器上做得很好(在左边):




了解更多关于希克定律。


有效的网页设计原则#4:菲特定律

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


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




他们还将其放置在左上角的全屏桌面应用程序中,这被认为是最有价值的房地产,因为角落在技术上是最容易接近的。然而,这不适用于网页设计(由于滚动和操作系统的方式)。


这并不意味着越大越好。占用一半屏幕的按钮不是一个好主意,我们不需要数学研究来了解这一点。即使如此,Fitts定律也是二进制对数。这意味着对象的可用性的预测结果沿着曲线运行,而不是直线。


当给予20%大小的增加时,一个小按钮将变得更容易点击,而当给定相同的20%的大小增加时,非常大的对象在可用性方面不会有同样的好处。


这与目标大小的规则相似  。


按钮的大小应与其预期的使用频率成比例。您可以检查您的统计数据,人们使用的按钮最多,并使流行的按钮更大(更容易命中)。


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




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


更多关于菲特定律。


有效的网页设计原则#5:三分法则

在设计中使用图像是一个好主意。视觉传达您的想法比任何文本快得多。


最好的图像遵循三分法则:图像应该被分为九个相等的部分,两个等间隔的水平线和两个等间隔的垂直线,并且重要的组成元素应沿着这些线或它们的交点放置。


看看右边图像更有趣吗?这是行动中三分之二的规则。


图片来源:维基共享资源


用美丽的,大的图像有助于设计,因为它是(不耐受的增长  Pinterest的),遵守这个规则,将会使他们更有趣,因此您的网站更具吸引力。


有效的网页设计原则#6:格式塔设计法

格式塔心理学是一种思想和脑力的理论。它的原理是人眼在察觉到他们的各个部分之前,看到对象的全部。


这就是我的意思:




请注意,您如何看待狗,而不关注狗组成的每个黑点?


这里的关键是在人们看到这些部分之前看到了整体。人们总是先看到你的整个网站,然后再区分标题,菜单,页脚等。作为构图的创始人之一,库尔特·科夫卡(  Kurt Koffka)  表示:  整体独立于零件。


有八种所谓的格式设计法允许我们预测人们会如何看待某些东西。他们来了:


近似法则 


人们将东西集合在一起,在太空中紧密结合在一起。它们成为一个单一的感知对象。


通过有效的网页设计,您需要确保不合在一起的东西不被认为是一个。同样,您想将某些设计元素组合在一起(导航菜单,页脚等),以形成一个整体。



 


2.相似法则


我们把类似的东西在一起。这种相似性可以以形状,颜色,阴影或其他质量的形式发生。


在这里,我们将黑点分组成一组,并将白点分成另一组,因为 - 好像,黑点看上去是相似的。


代码学校使得所有的推荐框都相似,所以我们将所有的推荐视为一个单独的组:



3.关闭法


我们要求完整性。当没有关闭的形状,当整个图片的部分丢失时,我们的感觉填补了视觉差距。我们看到两个正方形重叠在四个圆上,即使这些形状实际上并没有存在于图形中。



没有关闭的规律,我们只会看到不同长度的不同的线条,但是根据关闭的规律,我们将线条整合成整体。



对称法则


心灵将对象看作是对称的,围绕中心点形成。能够将物体分成偶数个对称部分,感觉上令人满意。


当我们看到两个不连接的对称元素时,心灵感知地连接它们以形成一致的形状。




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


人们喜欢不对称的外观。平衡三列和曲线增添了BootB网页设计的享受:




共同命运法


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




人们将某些地方的棍棒或举手集中在一起,因为他们都指向同一个方向。您可以使用它来指导用户的注意事项(例如注册表单,价值主张等)。




例如,如果存在点阵列,而另一半向下移动,则一半的点向上移动,则将向上移动的点和向下移动的点看作两个不同的单元。


6.连续性法则


人们倾向于认为一条线是继续其确定的方向。在对象(例如行)之间存在交集的情况下,我们倾向于将两行视为两个单一的不间断实体。刺激仍然显着,即使重叠。




Fixel使用它将面孔连接到bios:




还有其他的格式法律,如图和地面或良好的格式塔法(如果它们形成正常,简单有序的模式 - 像奥林匹克环),我们认为这些提法这里是最有用的知道。


有效的网页设计原则#7:白色空间和干净的设计

白色空间(也称为“负空间”)是页面部分“空”。它是图形,边距,沟槽之间的空间,列之间的空间,类型或视觉线之间的空间。


它不应该被认为只是“空白”空间 - 它是设计的重要元素。它使它中的对象完全存在。白色空间是关于层次结构的使用。信息的层次,无论是类型,颜色还是图像。


没有空白的页面,充满文字或图形,容易出现繁忙,杂乱的风险,通常很难阅读(人们甚至不会打扰)。这就是为什么简单的网站在科学上更好。


足够的空白让网站看起来“干净”。虽然干净的设计对于传达清晰的信息至关重要,但它不仅仅意味着更少的内容。清洁设计意味着充分利用其空间的设计。为了做一个干净的设计,你必须明白地使用白色空间知道如何清晰地沟通。



精细的白色空间使它很容易集中在主要的消息和视觉效果上,而身体的副本易于阅读。


白色空间促进优雅和复杂性,提高易读性和推动焦点。



如没特殊注明,文章均为善微网络原创,转载请注明来自https://www.sanways.com/news/335.html