深圳设计新水平布局的效果

19-12-02    1102次

       公司随着时代的发展尝试新的网站设计,以提高其网站在线存在的有效性。 但是一个流行的新趋势对于许多雇用它的组织产生了相反的效果。你可能会遇到一些新的网站,这些网站正在从老式的垂直布局走向一个整洁而优雅,现代化的水平布局。 越来越多的网页设计师投入时间和资源来保持最新状态,从而使他们看到这个行业的重要变化。 但达设互动设计这种水平布局有多有效?

  原始垂直布局和新水平布局的区别

       当一个大型的网站最近公布了其新的水平设计,我绝对喜欢它。 布局是现代和优雅的,直观地认为,比以前的“老式”的垂直布局页面更具吸引力和成功。 然而,通过回顾过渡之前和之后客户活动的热图,发现我完全错误。

  该公司的目标是让访客阅读尽可能多的文章,并接触大量的内容。 网站不会播放任何广告,所以所有指标都直接反映访问者与网页上实际文章和内容的关系。

  如下图所示,原始主页列出了长排列表中的文章,而将A / B测试的一部分显示为百分之五十的新布局包含了横向排列的相同文章。

       原始垂直布局:                                                                                                                                                                                                                                                                         09-32-06-86-4427.jpg

 

       新水平布局:                                                                                                                                                                                                                                                                            09-32-22-54-4427.jpg


  有趣的是,设计游客的水平布局远远低于原来的垂直布局。 下面的热图表示用户的鼠标移动和滚动范围,显示访问者在原始主页上比新的水平滚动向下滚动了34%,因此也在原始布局中徘徊,交互和点击更多的文章,而不是在新的布局上。 事实上,用户几乎没有暴露于横向布置的文章。 为什么会这样呢?

  在左侧的原始版本中,访问者收到了垂直列的一瞥,表明有更多的内容等待下面,并有一个完整的滚动体验被探索。相比之下,较新的水平布局没有指示有更多的向下滚动 - 游客认为这是页面的结尾,并将文章保留隐藏和未开发。此外,即使访问者向下滚动,在页面任何一点显示的每个水平行都可能被误认为页面的结尾,而垂直封装总是表示更多的内容等待在下面。

  这种行为可以在观察和心理层面进行解释。上面的示例演示了垂直布局之间的差异,这种布局鼓励滚动(从而揭开和吸引更多内容)以及不会触发滚动的水平布局。心理见解。术语“对象识别”表示我们解释对象意义的方式。对象的识别对于我们的生存至关重要,因为我们必须先确定对象,然后才能推断出它们的相关特征和喜好。一旦我们确定一个苹果,我们立即知道它是可食用的。一旦我们识别出一只狼,我们就知道不要打扰它。这个过程只需要少量的输入。我们的系统通过“模板匹配”来确认,允许我们立即将字母“B”确定为字母表的一部分,而不是抽象的形状。

  新水平布局带来的效果

  例如,当我们看下图时,我们会自动将其解释为三角形,而不是三个角度。这表明我们的大脑首先看到一个对象的整体形式,之后才开始挑选细节。                                                                           09-33-52-57-4427.jpg


  基于格式塔的“关闭法则”,即使只显示了一小部分形状,我们的思维往往会完成不完整的形状和创造精神对象。我们的想法是通过忽略差距和完成轮廓线来形成我们头脑中已经表现的形状。

  关闭法的一个很好的例子是Kanisza三角形,如下所示。这种幻觉,最初由意大利心理学家Gaetano Kanizsa在二十世纪五十年代探索过,展示了我们如何看到两个重叠的三角形,即使图像中没有完整的三角形。                                                                                                                                                                                                                                           09-34-44-36-4427.jpg


  这就解释了为什么水平布局不起作用。其结构意味着关闭,并且页面底部更典型的模式。当我们看到封闭的水平结构时,格式塔的关闭定律就开始了,我们体验到一个完全封闭的形状。因此,我们不会寻找更多的信息,最终可以俯瞰页面的其余部分。

  其他有问题的布局。水平布局只是与我们的自然对象识别过程相冲突的网站设计的一个例子。例如,这是最近重新设计的Pinterest主页:                                                                               09-34-57-19-4427.jpg


  你可以看到,它显示了一个iPad和iPhone,它们都在页面底部被切断,从而产生了其他图像(以及潜在的其他内容)隐藏在折叠之下的印象。这自动提示我们向下滚动 - 但是无法向下滚动,让我们感到沮丧和焦虑。如果页面更长,这将是导致访问者向下滚动的好方法,因为每个人都希望看到一个完整的形状。Pinterest已经将页面更新为非常漂亮,时尚和动态的外观,解决了这个问题。

  当我们在页面上遇到元素时,我们的头脑同样困惑,因为它们的按钮状形状(例如,带有文字的小矩形,看起来像是一个动作)。当元素不可点击,结果只是一个简单的图像,我们不可避免地会感到烦恼。当我们了解基础模式时,我们很容易填补空白并排除元素的表面含义。问题是网站界面通常缺少任何视觉提示,表明正在采用什么模式。帮助你的访问者了解你网站元素的表面含义将影响他们如何与页面进行交互 - 更重要的是,它们对它们的感受如何。因此,通过确保表面元素可以快速准确地解释,使的访问者感觉到与您的产品交互感到很好,至关重要。

  设计互动体验的方式必须考虑到我们的认知系统的局限性。至于制作必须注重的细节,你在网站上使用建立的交互设计模式越多,访问者的理解就越好,他们将拥有达设互动更多的体验。




以上【 深圳设计新水平布局的效果 】的内容由达设互动(http://www.szdashe.com)为您提供,本文网址 : http://www.szdashe.com/gongsixinwen/162.html ,转载请注明出处!更多有关深圳网站建设,微信小程序、电商平台建设、系统开发等互联网应用服务都可以联系我们。热线:130 7784 6582

扫描二维码微信聊天

在线咨询
联系电话

130 7784 6582