您好!欢迎来到灵烯源码网

网站建设技巧之页面布局

  • 建站技巧
  • 来源:源码码网
  • 编辑:admin
  • 时间:2020-01-28 22:20
  • 阅读:754

网站的产品列表是网上商店很重要的页面之一,同时也是用户决定购买或使用的关键页面。合理的布局方案不仅能提升用户的视觉体验,同时还能挺高用户的操作体验,促进用户买单。一般来说,产品列表页主要有列表布局、大图布局、两列网格布局、两列瀑布流布局、两列拼图布局以及三列网格布局等六种布局方式。下面,小编将为大家详细分析这六种网站布局方式的特点。

  布局方式一:列表布局


营销型网站制作案例


  图片细节展示:★ ★

  承载产品数:★ ★ ★ ★ ★

  商品信息对比:★ ★ ★ ★ ★

  趣味性和新鲜感:★ ★

  列表布局是我们常见的图文列表,着重文本内容,由于图片尺寸较小,因此图片细节展示不丰富。这种布局方式常用于电商类或团购类产品中,适合产品图片质量不高,产品数量较多,需要通过优惠信息、价格参数等来进行对比时使用。

  优势:列表布局循自上而下的阅读模式,有利商品信息的对比,同时一屏可展示产品数较多。

  劣势:趣味性和新鲜感较差,因此浏览时间过长会出现视觉疲劳。

  布局方式二:大图布局

营销型网站制作案例

  图片细节展示:★ ★ ★ ★ ★

  承载产品数:★ ★

  商品信息对比:★ ★

  趣味性和新鲜感:★ ★ ★ ★

  大图网格布局是指一行只展示一张图片,由于图片所占比例较大,往往一屏只能展示1-2张,但图片细节比较清晰,用户可根据图片对商品进行对比。此列表方式适合产品数量较少,图片有专人维护时使用,多用于图片类、商品推荐等列表中使用。

  优势:视觉效果好,适合以图片为主的产品或商品数量较少的推荐列表等。

  劣势:大图布局页面空间消耗大,一屏可展示内容少,不利于信息的查找和对比。

  布局方式三:两列网格布局

营销型网站制作案例

  图片细节展示:★ ★ ★

  承载产品数:★ ★ ★ ★

  商品信息对比:★ ★ ★ ★

  趣味性和新鲜感:★ ★ ★

  两列网格布局主要是将屏幕一分为而,图片和文字进行上下展示,类似一个网格,而浏览次序则类似「Z」,能均衡地被用户所看到。如果产品主要以图片对比为主,但又不需要大图展示,可采用该布局进行设计,一般来说,两列网格布局往往和列表布局会一起使用。

  特点:相比于大图展示,一屏可展示更多的商品,有利于信息的对比,相对于列表布局,两列网格布局更适合用户目标不明确或者以图片为主的产品。

  布局方式四:两列瀑布流布局

营销型网站制作案例


  图片细节展示:★ ★ ★ ★

  承载产品数:★ ★ ★ ★

  商品信息对比:★ ★ ★ ★

  趣味性和新鲜感:★ ★ ★ ★

  两列瀑布流布局即将屏幕一分为二,但图片的高度会随图片的尺寸变化而变化,与两列宫格布局不同,瀑布流布局采用不规则的Z字布局,让界面更有趣味性,避免视觉疲劳。两列瀑布流布局方式多用于用户目标不明确,同时产品数量多,可以无限下滑的时候。

  优势:由于布局的高度由图片决定,因此,图片细节的表达更为有力,同时可增加商品分类标签,方便用户在操作疲劳时进行选择性筛选。

  劣势:图片大小不统一,大的容易被看到,而小的容易被忽略。

  布局方式五:两列拼图布局


营销型网站制作案例


  图片细节展示:★ ★ ★ ★ ★

  承载产品数:★ ★

  商品信息对比:★ ★

  趣味性和新鲜感:★ ★ ★ ★

  两列拼图布局,一般是以一张大banner的形式出现,下面再有几张图片以各种拼图形式呈现。一般来说,下面展示的信息都是与大banner相关列表的商品,适用于推荐类页面。

  优势:采用拼图的形式展现,从不同角度进行产品的展示,能更容易吸引用户购买。

  劣势:因为不规则的拼图会导致维护成本过高,同时小图片很容易被忽略,因此多用于推荐页面中。

  布局方式六:三列网格布局

营销型网站制作案例

  图片细节展示:★ ★

  承载产品数:★ ★

  商品信息对比:★ ★

  趣味性和新鲜感:★ ★

  三列网格布局,也是将屏幕一分为三进行展示,这种方式能比两列网格布局一屏可以展示更多的商品,但由于商品图标过小,因此对比性较弱,且内容多,界面排版样式单一,趣味性和新鲜感也会随之降低。三列网格布局适合用户再次操作目的性不强,同时产品数量非常多,对图片细节要求不高时使用。

  优势:一屏能展示更多商品。

  劣势:商品图片小,对比性较弱,趣味性和新鲜感也因内容多和界面排版样式单一而降低。

  产品采用哪种图片布局方式,主要还是以取决于产品本身的类型,例如:电商类产品适合列表页布局,推荐页适合两列拼图布局等。


特别声明:
1、如无特殊说明,内容均为本站原创发布,转载请注明出处;
2、部分转载文章已注明出处,转载目的为学习和交流,如有侵犯,请联系客服删除;
3、编辑非《灵烯源码网》的文章均由用户编辑发布,不代表本站立场,如涉及侵犯,请联系删除;
全部评论(0)
推荐阅读
  • 阿里云ecs云服务器使用非root账号登陆实例
  • 阿里云ecs云服务器使用非root账号登陆实例
  • 在某些时候我们为了避免服务器被攻击,需要使用系统用户root登录Linux操作系统的ECS实例,这样可以获取系统最大权限。但是该方式虽然便于您进行系统运维操作,但如果ECS实例被入侵,则会存在影响严重的数据安全风险,因此通常情况下,我们会通过一些配置限制root账户登录,而创建新的登录账户,并赋予一定的权限,下边就说说如何进行非root账户权限加固。1、创建新账号ecs-useradduserecs-user 2、为新账
  • 源码教程
  • 时间:2024-11-07 09:19
  • 阅读:686
  • PHP集成环境工具phpEnv介绍
  • PHP集成环境工具phpEnv介绍
  • 相信很多开发的同学在日常的程序开发中都使用过服务器,那么最常见的服务器Linux系统的服务器也是用的最多的,以前在配置服务器的时候多半都以命令的方式进行配置,对于不熟悉Linux服务器命令的同学来说,有点困难,近些年我们我们熟知的PHPStudy(小皮面板)、宝塔面板等都很好的为我们解决了这些困惑,但是今天小编要来介绍另外一款PHP集成环境工具,他是基于Windows桌面安装phpEnv,可以日常的本地开发中很好的搭建演示。phpEnv
  • 软件教程
  • 来源:灵烯源码网
  • 编辑:灵烯源码网
  • 时间:2024-10-20 13:44
  • 阅读:1016
  • PHP开发五种数据打印方式举例说明
  • PHP开发五种数据打印方式举例说明
  • 在PHP中,有几种常用的打印方式,包括:1、echo:用于输出一个或多个字符串。它是PHP语句,不是函数,因此没有返回值。例如:echo ”Hello, World!”; // 输出 ”Hello, World!”2、print:用于输出一个字符串。它需要一个参数,并需要使用圆括号。print函数在输出后有返回值,如果执行失败则返回f
  • 源码教程
  • 来源:灵烯源码网
  • 编辑:灵烯源码网
  • 时间:2024-10-18 23:09
  • 阅读:989
  • php开发判断字符串是否相等的方法
  • php开发判断字符串是否相等的方法
  • 本文介绍php开发中常用的字符串比较的方法,以PHP7.4为例,可以使用双等号,strcmp()方法,strcasemp()方法、strncasecmp()方法以及ctrncmp()方法,等进行判断,下边以”==”和strcmp()方法为例进行举例:// 定义插入的数据$data = [    ”name” &
  • 源码教程
  • 来源:灵烯源码网
  • 编辑:灵烯源码网
  • 时间:2024-10-18 21:04
  • 阅读:562
  • js实现点击按钮复制某个元素的值
  • js实现点击按钮复制某个元素的值
  • 日常开发中js实现点击按钮一键复制内容的方法很多,比如使用使用document.execCommand()方法。也可以使用使用ClipboardAPI,还可以使用第三方库,例如Clipboard.js,下边我们说最简单的一种原始方法。
  • 源码教程
  • 来源:灵烯源码网
  • 编辑:灵烯源码网
  • 时间:2024-10-17 22:39
  • 阅读:107
联系我们

联系电话:0763-84538663

联 系 QQ:540383622

工作时间:周一至周五8:00~18:00

联系客服
源码代售 源码咨询 素材咨询 联系客服
0763-84538663
手机版

扫一扫进手机版
返回顶部