拆分屏幕布局是分为两个(或更多)相等垂直列的全屏 Web 元件。然而,尽管分屏布局是时尚,这是一个大胆的风格决定,如果没有一个合理的逻辑,可以伤害多用户体验。当正确执行它可以为多用户提供美妙的观看体验。优秀 WooCommerce 独立站网页设计如何使用分屏布局?

  为什么要使用分屏布局?

  分割屏幕元件在极简主义的 WooCommerce 独立站网页设计中效果最好,因为负空间与粗体垂直分隔相结合,在重要区域增加了最高的重点。除了这些优点之外,分屏布局的益处远远超出视觉美观; 它们对于使用两个并排可选选项来著陆网页特别有效。

  一些明显的例子包括:

  ·登入和登录档单

  ·付费和免费订阅

  ·交替颜色的产品

  拆分屏幕元件的很好示例

  首先,让我们看看一些了不起的例子,并讨论为什么他们的工作这么好的用例。 拆分屏幕布局可以以许多不同的方式使用,因此各个站点之间的优势各不相同,这取决于网站要实现的目标。

  Cam Strobel

  并非每个 WordPress 网站设计都需要访问整个水平视口。 使用超小的设计,如 Cam Strobel 的网站,将屏幕分成两个垂直列意味著所有的内容可以在折叠,完全不需要多用户滚动。

  Studio meta

  全宽 “大标题” 设计仍然很常见 – 这是一个巨大的趋势,然而,很少有机会使用大胆的影像,由于缺乏文字可读性(我们通常需要模糊的影像颜色叠加)。 拆分屏幕布局解决了这一点,Studio meta 向我们展示这种效果。通过使影像和内容并排,我们可以使用更加丰富多彩,更勇敢,更深刻的意义的影像,因为我们不必以任何方式遮蔽影像。

  Bose

  分割屏幕不必由两个 50 个元件组成 – Bose 使这一趋势达到极限,该网站甚至没有尝试适应较小的屏幕。 无论这个外观多么漂亮,响应式设计是您必须考虑的事情,可能很难适应分屏布局到更小的装置。除此之外,这是我最喜欢的分屏示例,因为布局允许 Bose 通过使用不同的颜色显示具有独特个性。 结合前卫的对角形状,这个网站真的抓住了我的眼睛。

  设计分屏布局时需要注意的事项

  如果您正在考虑为您的网站使用分屏元件,那么在设计时应当牢记这三个提示。

  ·移动友好

  拆分屏幕元件确实有一个优点:它们不太适合移动装置。很难让他们做出响应并适应更小的屏幕,您几乎肯定不得不缩小到更温和的东西,可能需要比平常更多的代码,所以请确保您采取移动优先的方法。

  ·没有好的原因,不分割屏幕

  您应该首先考虑您的网站是否需要一个分屏元件。当然,它是’ 趋势’,它看起来很酷,但单是没有足够的理由还是不要轻易尝试它。

  ·是否值得额外的工作使元件响应?

  您的多用户有足够的趋势意识来欣赏布局,还是会混淆它们?是否有足够的负空间使布局工作?您是否有可能将您的多用户的注意力分成两半,更单一的焦点会是一个更好的结果吗?如果任何这些答案是否定的,那么您应该投票反对这个想法。

  利用负空间

  桌面网站水平显示,但是当使用分屏布局时,每个元件在主视口中成为一种垂直视口。因此,有更多的机会来探索显示内容的新方法。 这绝对是一个有创意的机会,所以坚持您的创意上限!跨飞独立站,专业 WordPress 外贸独立站网站建设、 WordPress 站群网站优化、 logo 设计、品牌设计、印刷、 WordPress APP/WordPress 微信开发等产品服务,新上线企业 VI 设计套餐和 WordPress 站群网站营销推广系统(强),欢迎新老顾客前来咨询!

  结论

  分割屏幕布局是有吸引力的,正如我们从示例中看到的,趋势的好处取决于网站的设置实现; 它们可以用于为每个列定义不同的标识,或者它们可以用于更简单的原因:将最小网站中的所有内容保留在不需要视口的整个宽度的最小网站上。如果您以前没有尝试设计分屏布局,什么诱使您现在尝试? 它是视觉美学,还是试验新方法来显示内容的机会?欢迎评论!