采用什么布局最好吗,如何使用列表展示内容及
分类:互联网

如下图:

目前,国内电商网站的商品列表页常见表现形式有三种,分别是行列排列、瀑布流和特别款突出。这三种形式各有特点,设计师应该根据商品特色选择最适合的表现手法。

几种列表的特性及使用注意点

什么是网格视图?

网格视图是列表视图的另一种表现形式。网格视图将你的内容以垂直和水平的方式,展示在两列或更多列的小块中。

澳门新葡8455最新网站 1

网格视图将你的内容以垂直和水平的方式,展示在两列或更多列的小块中。

澳门新葡8455最新网站 2

美丽说是一个偏向时尚年轻化的网站,因此设计师使用了这类人群都能接受的瀑布流展现方法。美丽说的商品列表页的特点在于增加了其他用户的评论模块,这也是人们在网上购物时很注重的部分。

宫格式导航(网格列表式导航)

扁平化、充分利用整个页面,适用于二级导航

原作者:Nick Babich  翻译者:Puddinnng

两列拼图布局

顺丰优选的整个商品列表页面看起来很简明,但展示的商品信息却并没有弱于其他电商网站,用户真正希望得到的资讯都得到了完整的体现。

澳门新葡8455最新网站,网格列表(宫格列表)

综合横向和纵向的列表形式

小块中的内容

网格视图通常只展示产品的图片,而少有附加的信息。多数情况下,顾客们唯一可以看到的描述,只是产品的名字和价格。

澳门新葡8455最新网站 3

网格视图的例子。图片占据了方片大部分的空间,而文字被缩短了以避免太多换行。

列表布局

澳门新葡8455最新网站 4

轮播式导航

高大上,隐藏其余导航选项、保证用户只专注于当前目标,配合大图背景、会获得较好的体验感(沉浸感)
适用于选项比较少的导航,因为只能切换到相邻的选项

滚动的方向

网格视图往往只能垂直滚动。一般不鼓励水平方向上滚动的网格视图,因为这种交互方式会阻碍典型的阅读模式,并影响理解。

如果内容是可滚动的,你应该让视图边缘遮住一部分内容,以显示下方有更多内容。

澳门新葡8455最新网站 5

左边:避免把滚动一开始的位置,就把网格与视图边缘对齐。因为这个位置不能有效地告诉用户还有更多的可用内容。

以小红书为例:该页面可看成是专题页,采用拼图的形式展现,从不同角度进行产品的展示,最后在用列表进行产品信息展示,引导用户购买。

天猫的商品列表页在给予用户即时反馈这方面做得很到位。当鼠标悬停在商品范围时,显眼的红色线框就马上将该商品与其他商品区分开来,而线框的红色与网站主色调相同,这样也让整体表现得不突兀。

列表的几个常见类型

澳门新葡8455最新网站 6

两列网格布局也就是将屏幕一分为二,图片和文字进行上下展示,类似一个网格,浏览次序类似一个Z字,因此产品都能均衡的被用户看到。例如:天猫、严选等商品列表。

澳门新葡8455最新网站 7

瀑布流(网格列表变种)

适用于展示大量图片,比如lofter和花瓣中的相关页面

浏览模式

网格视图提供给用户一种不连贯的浏览方式,这让视觉理解与区分相似的数据类型更方便。用户的注意力会被平均地分散到每个块中:用户可以随意从一张图片跳到另一张图片而不用担心顺序和连贯性的问题。

澳门新葡8455最新网站 8

图片让用户可以跳跃着浏览

凝视平面图展示了用户在浏览一个卖沙发的电子商务网站时,眼睛都在看哪儿。每个蓝点代表一个视力停留点,更大的蓝点意味着更长时间的停留。

澳门新葡8455最新网站 9

每个蓝点代表了一个视力停留点,更大的蓝点意味着更长时间的停留。

我们很快能得出结论:最关乎用户目标和你商业目标的材料,应该放在不用滚动就能看到的页面中。用户虽然会滚动页面查看更多内容,但所花时间远不及他们查看不用滚动的页面中的内容长。

一个有趣的现象是:比起只有商品的图片,用户会花更多的时间浏览有人出现的图片。

澳门新葡8455最新网站 10

一个人坐在沙发上的图片比只有一张沙发的图片吸引了更多的注意力。

综上,如果满分是五颗星,那么两列拼图布局的图片细节展示丰富为5颗星;承载产品数较少为2颗星;商品信息对比较弱为2颗星;趣味性和新鲜感较好为4颗星。

正因为商品列表页相较于其他页面会显得有些拥挤,因此设计师更应该抱着在限制的区域范围内展现最有用的信息的心态来设计网页。正在浏览商品列表页的用户也许对商品的细节描述并不是很在意,此时的浏览模式更偏于走马观花,因此,简单扼要的图片、商品名称,以及价格说明就已经能够满足用户在该页中的需求了。

为什么需要列表?

在产品设计中,需要用列表来组织内容,有些情况下,能够作为产品的导航。


澳门新葡8455最新网站 11

3.出现适量的附加信息

轮播面板

需要指示器,提示用户有其他内容。大图轮播用圆点指示器,小图滑动显示下一条目的边缘部分

在电子商务 app 中采用网格视图的原因是什么?哪些情况下,用网格视图比简单地采用列表视图要更合适?这篇文章会给你这两个问题的解答。

澳门新葡8455最新网站 12

澳门新葡8455最新网站 13

垂直列表

垂直列表的几个常见模式有:标准模式、 图文结合式、控制模式

澳门新葡8455最新网站 14

垂直列表的几个常见模式

俩个特殊模式:时间轴模式、对框框模式

澳门新葡8455最新网站 15

时间轴模式、对框框模式

(4)两列拼图布局

AnyForWeb正式推出电子商务网站设计分析的系列文章,每月更新,本次主题为电商网站的商品列表页设计,欢迎关注!

使用列表作为导航的注意点

综合具体产品需求,根据各类型导航特点选择对应的形式

网格视图 vs. 列表视图

当谈及移动端设备时,如何为你的商品选择合适的布局呢?该用网格视图还是列表视图?这个决定将影响用户找到他们需要内容的难易程度。

网格视图和列表视图是用来强调不同数据类型的。网格视图强调图片多于文字,而列表视图强调文字多于图片。

澳门新葡8455最新网站 16

手机上,用户只有有限的屏幕空间,在滑动屏幕前他们只能看到一部分内容。网格视图创造了更长的页面并迫使用户去更多的滚动。在下面的例子中你能看到网格视图和列表视图的区别。

澳门新葡8455最新网站 17

红线展示了屏幕上可以看到的区域

然而,在选择网格视图还是列表视图时有一个最关键的因素。那就是用户在选择一个商品时,需要多少信息。这都回归到“内容为王”这条原则了。产品的细节是非常重要的。要选择适合展示你产品内容的布局方式。

像电器这一类产品,产品型号,功率这些在挑选产品时非常重要,那么列表视图就更合适。列表视图会让你有更多空间来展示产品的细节信息。

澳门新葡8455最新网站 18

iOS中的wall mart应用

像服饰类的产品,在挑选时产品性能不那么重要,这时候网格视图就是更好的选择了。

澳门新葡8455最新网站 19

如果你还是不确定哪种布局对于你的商品来说最合适,那么你需要进行A/B测试来决定哪个方案更好。最好的解决方案是带来更多价值的那个。

什么时候使用?

澳门新葡8455最新网站 20

垂直列表

优势: 用户较容易理解,易找到想要的目标
劣势: 内容不够丰富,不适合图片等展示

其他注意点:注意列表内容详细程度和数量之间的平衡。
比如说饿了么的订单列表就可以显示数目少(用户只关心今天的订单),但显示内容较为丰富

做决定

用户主要依据图片来做选择。这让网格视图适合于展示外观相似的商品(那些你主要通过商品外观来决定买不买的商品)。

举个例子,如果用户想买双鞋,其实她/他心里已经有一个理想型了。用户能在看图片时,快速地发现具有她/他想要细节的那双鞋。

澳门新葡8455最新网站 21

网格视图更吸引眼球。

图片是让网格视图变得有用的关键因素。图片能以一种文字描述很难具有的方式来表达商品。如果用户看到低质量的商品图片,他们的信心会减少,然后开始犹豫到底要不要购买。因此,确保你的图片不仅高质量,尺寸合适,并且能提供商品的完整信息。

澳门新葡8455最新网站 22

左边:低质量的图片。 右边:高质量的图片

(1)列表布局

很多网站都会忽略鼠标悬停时应该产生的交互效果,其中也不乏一些知名电商。虽然只是一个很小的效果,但它存在的意义却远不仅如此,甚至承载了一份网站与用户之间的互动和反馈。

网格面板

适用于集中展示大量图片

本教程为翻译教程,原文地址为:

下面为了方便大家分析对比,我将对这六大布局进行分析,同时从图片细节展示、承载产品数多少、商品信息对比强弱、趣味性和新鲜感这四个决定采用何种布局方案的点进行评分。

聚美优品的在列表页采用了特别款突出的表现形式,并且向用户展示了商品的多视角图片,让用户无需进入到详情页就看到商品全貌,间接降低了商品详情页的跳出率。

轮播面板(横向展示的列表形式)

大图展示(网易云音乐的轮播面板)
小图展示(APP Store中的首页APP推荐)

澳门新葡8455最新网站 23

轮播面板

结论

用户最想要的只是有用的信息,如果你的布局能够提供给他们做决定所需要的信息,他们会非常感谢你的。

什么时候使用?

1.展示基本信息

垂直列表导航

简单清晰、易于理解、能够帮助快速定位,常见于二级导航,例如微信中的发现页
不利于多级之间的切换

千万别忘了

在可以滑动的页面中,用户往往会滑动到页面底部。确保他们最初在页面中看到的内容,让他们相信往下滑动是值得的。

老话说,一张图片胜过千言万语。用网格视图时,高分辨率的照片是制胜关键。尝试着在每次滚动时展示更多的产品图片。

当在网格视图和列表视图中选择时,请遵循一个简单的原则:细节信息用列表,图片信息用网格。当然,最终的选择还是以你用户的需求为准。

三列网格布局主要用于用户无目的操作,产品数量较大时使用,和列表式的区别是列表式以文字为主进行对比,而三列网格布局主要以图片进行对比。

电子商务中的商品列表页也被称为商品聚合页,是为了能为消费者提供更完善的商品种类选择。这一类页面的最大特点就是信息量大、图片多,所以布局是否清晰合理,以及如何尽可能的压缩内容是商品列表页设计的重点部分。

什么是列表?

也就是表格,表格就是由若干的行与列所构成的一种有序的组织形式。

行存在几个常见的同义词,如记录、k-元组、n-元组、矢量;列也有几个常见的同义词,如字段、参数、特性、属性 ------ 维基百科

每一页展示更多的产品图片

大尺寸图片在展示单独商品时非常重要,因为用户关心商品外观上的差异。而且,比起不停地在网格视图和商品详情页面中切换,他们更喜欢在一个长的页面上滚动浏览。

当设计网格布局时,要为图片选择一个正确的尺寸。以便用户能够辨别商品,但同时也能允许在一页内展示更多的商品。

澳门新葡8455最新网站 24

用户一般一次能看到4到6个网格商品

澳门新葡8455最新网站 25

2.鼠标悬停时产生交互效果

综上,如果满分是五颗星,那么大图网格布局的图片细节展示丰富为5颗星、承载产品数少为2颗星、商品信息对比弱为2颗星、趣味性和新鲜感较高为4颗星。

教程未完,请看下一页!

(2)大图网格布局

澳门新葡8455最新网站 26

三列网格布局,也就是将屏幕一分为三进行展示,也可以叫宫格布局。

刚才提到了商品列表页应该尽量做到简单简洁,但在此基础上适量的增加一些对用户挑选商品有帮助的附加信息可以起到锦上添花的作用。

两列瀑布流布局

如果商品的种类数量多且繁杂,规规整整的行列排列方式更利于用户找到浏览规律;瀑布流的形式更多的在流行时尚领域的电商中使用;特别款突出的方式可以为一些节日活动的宣传促销而准备。在下面的案例中也会一一提及。

如下图:

另外,瀑布流还有个好处就是,类似上面截图淘宝的列表,可以增加商品分类标签,方便用户在操作疲劳时进行选择性筛选。

当你的产品数量较少,图片有专人维护,同时从产品属性上看,用户需要通过图片来进行对比时,我们就可以采用大图展示,大图展示往往视觉效果好,多用于图片类、租房类、商品推荐等列表中。

大图网格布局

澳门新葡8455最新网站 27

我们不能抛开产品单独分析,而是需要根据你的产品数量、用户需求、产品目的等多方面来确定。不过最重要的在此之前我们还需要知道有哪些布局方案。

在汇总时我发现现在很多APP列表都采用了瀑布流的形式,以小红书和淘宝为例:他们均是以图片展示为主,同时图片多为第三方上传,图片质量不统一,产品数量较多,采用瀑布流提升了界面的趣味性,避免用户视觉疲劳。

澳门新葡8455最新网站 28

相比于两列网格布局一屏可以展示更多的商品,只是商品图片过小,不管是从图片对比性还是文字的对比性来说,三列网格都较弱,同时由于由于内容多,界面排版样式单一,趣味性和新鲜感都较低,如图:

澳门新葡8455最新网站 29

综上,如果满分是五颗星,那么两列网格布局的图片细节展示一般为3颗星;承载产品数较多为4颗星;商品信息对比较强为4颗星;趣味性和新鲜感一般为3颗星。

当你的用户再次操作目的性不强,同时产品数量非常多,对图片细节要求不高时,我们可以采用三列网格布局。

澳门新葡8455最新网站 30

以大众点评为例:其图片直接采用产品图,质量较低而且统一性不强。同时针对团购类的产品,我们需要快速浏览查看每个列表的信息,从而针对优惠信息进行对比,因此采用列表布局较为适合。

澳门新葡8455最新网站 31

两列瀑布流布局和两列网格布局的使用场景类似,唯一区别就是两列网格布局在数量少时,或者用户目标明确时都可以采用。而瀑布流多用于用户目标不明确,同时产品数量多,可以无限下滑的时候。

澳门新葡8455最新网站 32

总结

如图:

其优势是,由于列表布局遵循自上而下的阅读模式,因此有利于商品信息的对比,同时一屏可展示产品数较多。但是其趣味性和新鲜感较差,因此浏览时间过长会出现视觉疲劳。

澳门新葡8455最新网站 33

如果你的产品是以图片对比为主,同时又不需要大图展示时,即可采用该布局进行设计。

澳门新葡8455最新网站 34

以淘票票为例:图片主要起到视觉引导的作用,而用户需要看的就是打折的详细信息,因此采用列表布局有利于商品的对比使用。

拼图布局往往图片有大有小,小的也很容易被忽略,同时编辑成本高,往往适合平台主动推荐的商品列表。我们可以将重要信息放到大图上,次要信息放到小图上。

什么时候使用?

澳门新葡8455最新网站 35

如下图:

三列网格布局主要用于用户无目的操作,产品数量较大时使用,和列表式的区别是列表式以文字为主进行对比。而三列网格布局其图片对比和文字对比都较弱,往往用于用户目标不明确,需要通过展示大量图片供用户选择,同时图片对比性质教弱的产品。

原标题:你知道产品图片列表,采用什么布局最好吗?

大图网格布局,也就是指一行只展示一张图片,由于其图片占比较大,因此往往一屏只能展示1到2张,图片细节能够清晰展现,用户可直接根据图片进行商品对比。最常见的使用场景就是以图片为主的APP推荐列表,例如:爱彼迎、蚂蚁短租、懒人周末等。

(5)三列网格布局

综上,如果满分是五颗星,那么列表的图片细节展示较差为2颗星;承载产品数多为5颗星;商品信息对比强为5颗星;趣味性和新鲜感低为2颗星。

澳门新葡8455最新网站 36

如图:

如图:

综上,如果满分是五颗星,那么两列瀑布流布局的图片细节展示较高为4颗星;承载产品数较多为4颗星;商品信息对比较强为4颗星;趣味性和新鲜感较好为4颗星。

下面我总结了六大布局:

澳门新葡8455最新网站 37

以in和严选为例:虽然他们分别为图片社交类和电商类,但其目的都是让用户通过图片选择自己感兴趣的内容。从产品细节展示来说,比列表布局更丰富;从产品信息对比来说,比大图更便捷。因此目前两列网格布局应用较为广泛。

由于布局的高度由图片决定,因此,图片细节的表达更为有力,但其不足的是图片大小不统一,大的容易被看到,而小的容易被忽略。因此瀑布流布局多用户用户目的性不强,产品数量较多的情况。

以蚂蚁短租和懒人周末为例,虽然他们一个是短租类APP,一个是生活类APP。其共同点是他们的图片都是经过专人编辑,图片质量较高,同时对界面视觉要求较高,采用大图布局可展示更多的细节,帮助用户筛选对比,提升整体的界面效果。

当你的产品图片质量不高,产品数量较多,你的产品需要通过优惠信息、价格参数等来进行对比,另外对界面效果要求较低时,我们可以采用列表布局。

如图:

产品列表采用什么样的布局方案才是有效的呢?

两列拼图布局,在列表中使用较少,因为不规则的拼图会导致维护成本过高,同时小图片很容易被忽略,因此多用于推荐页面中,图片由编辑经过处理之后在进行上传。

本文由 @ 风筝KK 原创发布于人人都是产品经理。未经许可,禁止转载返回搜狐,查看更多

如果你的产品数量较少,你可以采用大图展示。如果你的产品是图片类,图片质量较高,同时产品以图片对比为主时,你可以采用大图布局。

澳门新葡8455最新网站 38

列表布局也就是我们常见的图文列表,一个列表垂直呈现多个连续的行元素。列表布局重在文本内容,由于图片尺寸较小,因此图片细节展示不丰富。最常见的使用场景就是电商、团购类列表,如:淘宝、大众点评等。

澳门新葡8455最新网站 39

两列拼图布局,头部常以一张大banner的形式出现,下面是由几张图片以各种拼图形式呈现。一般来说,下面展示的信息都是和他相关列表的商品。

相比于列表布局,大图布局页面空间的消耗大,一屏可展示内容少,不利于信息的查找和对比,同时视觉效果较好,因此适合以图片为主的产品,同时多用于商品数量较少或推荐列表中。

产品列表是用户挑选商品,决定是否购买或使用的关键页面,合理的布局方案不仅能提升用户的视觉体验,同时还能提高用户的操作体验,从而促进用户买单。

当你的产品图片质量较差,产品数量较多,需要进行文字信息进行对比的产品时,我们可以采用列表布局。

如果你的产品是以图片对比为主,同时又不需要大图展示时,即可采用该布局进行设计。两列网格布局往往和列表布局会一起使用。

什么时候使用?

(3)两列网格布局

以陌陌直播附近和哔哩哔哩番剧为例,这两个栏目用户在使用时目的性都较弱,用户的需求是通过查看图片进行快速筛选和对比。对于图片细节展示要求不高,对于趣味性和新鲜感要求也不高。

澳门新葡8455最新网站 40

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

两列拼图布局,在列表中使用较少,因为不规则的拼图会导致维护成本过高,同时小图片很容易被忽略,因此多用于推荐页面中,图片由编辑经过处理之后在进行上传。

澳门新葡8455最新网站 41

什么时候使用?

两列网格布局

什么时候使用?

作者:风筝KK,公众号:海盐社

三列网格布局

澳门新葡8455最新网站 42

责任编辑:

两列瀑布流布局也就是将屏幕一分为二,和常规布局类似,其中图片的宽固定,高随图片的尺寸变化而变化。相比于两列宫格布局,瀑布流布局采用不规则的Z字布局,让界面更有趣味性,避免视觉疲劳。

综上,如果满分是五颗星,那么三列网格布局的图片细节展示较弱为2颗星;承载产品数非常多为2颗星;商品信息对比较弱为2颗星;趣味性和新鲜感较好为2颗星。

本文由澳门新葡8455最新网站发布于互联网,转载请注明出处:采用什么布局最好吗,如何使用列表展示内容及

上一篇:阿里从来不只属于马云,一年后阿里巴巴CEO张勇 下一篇:没有了
猜你喜欢
热门排行
精彩图文