垂直列表的几个常见模式,但本文更多描述商城

来源:http://www.zhlcard.com 作者:每日资讯 人气:57 发布时间:2019-11-20
摘要:原标题:你知道产品图片列表,采用什么布局最好吗? AnyForWeb正式推出电子商务网站设计分析的系列文章,每月更新,本次主题为电商网站的商品列表页设计,欢迎关注! 什么是列表

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

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

什么是列表?

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

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

对于商城类的产品,【商品列表页】是很关键的一环。好的布局可以让用户快速寻找到目标商品,文字or图片更优先?选择合适的布局,可以大大增加用户进入到【商品详情页】的概率。

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

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

为什么需要列表?

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

本文主要选择如今市面上的商城类产品,浅析各种布局的优劣势,最后再附上用中继器实现淘宝wap端商品列表页的切换教程。文末附下载链接。文中部分思路来自《App中列表、卡片和双栏卡片的布局思考》,但本文更多描述商城类商品。

澳门新葡亰76500 1

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

列表的几个常见类型

先睹为看看看原型效果吧:(可以对比淘宝WAP,记得F12)

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

澳门新葡亰76500 2

垂直列表

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

澳门新葡亰76500 3

垂直列表的几个常见模式

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

澳门新葡亰76500 4

时间轴模式、对框框模式

澳门新葡亰76500 5

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

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

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

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

澳门新葡亰76500 6

轮播面板

axure效果图

下面我总结了六大布局:

1.展示基本信息

网格列表(宫格列表)

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

一、列表形式

列表形式常见于各类新闻客户端,下图为今日头条,天天快报,搜狐新闻的主页,均是采用列表形式。稍有不同就是三图和单图,图片放左侧或右侧的区别,整体来看还是整齐列表形式。

澳门新葡亰76500 7

列表

列表形式的布局形式在商城中应用也很广泛:

澳门新葡亰76500 8

淘宝

淘宝app商品列表页

列表形式其实可以再细分为【列表+卡片】或是【列表+极简】,一张图解释:

澳门新葡亰76500 9

列表+卡片/列表+极简

可以看出上面列表形式的布局差异,左侧是【列表+极简风格】,每个单元的商品横向贯通,个人感觉这种设计更符合现代的设计,而且在商城内商品数量较多时此种布局是不二选择。

右侧是【列表+图片】相对于左侧的布局略有收缩,当客户浏览商品列表的时候会有间断感,更适合于商城内商品较少的情况。

小结:列表形式的布局可以在相同空间内展现最多的商品(图+文),特别是商城内商品较多时,可以参考【新闻资讯类】app的布局,列表形式主要是文字为主,图片为辅助。在这种列表形式的布局下,文字占有的地位更高。缺点是略显拥挤,特别是在文字(商品名称)过长的情况下。

澳门新葡亰76500 10

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

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

二、双栏小图

双栏小图在商城内的应用也很广泛,,但是双栏小图也可以再细分为【小图+卡片】【小图+瀑布】【小图+极简】,三张图说明吧:

1)双栏小图+卡片

澳门新葡亰76500 11

小图+卡片

上图为京东商城和苏宁易购的商品列表页

2)双栏小图+瀑布流

澳门新葡亰76500 12

双栏小图+瀑布流

上图为天猫商城+小红书

3)双栏+极简

澳门新葡亰76500 13

双栏+极简

小结:双栏卡片和列表形式是目前商城采用最多的布局方式,许多商城可以在列表页由用户自主选择,切换排列方式。双栏+卡片布局较为工整,图片大小一致,在系统默认图片大小时双栏卡片是最优选择;双栏+瀑布流,主要是由图片大小决定的,在需要用户上传图片,允许存在尺寸差异的情况下是最优选择;双栏+极简用得不多,更适合价格敏感的用户,通过价格吸引用户点击。

在双栏布局时,图片和文字的地位基本持平,相对于列表形式,图片占有了更重的比例。

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

澳门新葡亰76500 14

垂直列表

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

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

三、大图(单图)形式

大图形式更多是在图片社交类的app,不过也有许多商城采用了此种布局,大图可分为【大图+卡片】和【大图+极简】

1)大图+卡片

澳门新葡亰76500 15

大图+卡片

大图+卡片,特点就是图——大

2)大图+极简

澳门新葡亰76500 16

大图+极简

小结:大图样式的布局,意图很明显,图片的重要性已经完全盖过了文字,为了过度展示商品的图片,通过商品图片吸引用户,文字起到一点补充的作用,大部分这样布局的其实只需要商品图片和价格就足够了。在确保用户对商品有足够的熟悉的前提下,此种布局为优。在很多图片社交中也不乏此种布局。

列表布局

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

轮播面板

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

四、中继器实现一个切换效果

因为正好想做一些商品布局的总结,所以顺便用中继器来模拟了一下淘宝wap端的切换排列功能。

1)阅读此文需要有一定中继器知识,相关阅读——用过那么多原型软件,为什么我还是最爱Axure

我们现在已经有了一个列表形式的中继器:

澳门新葡亰76500 17

中继器

然后我们将此中继器再复制两份:

澳门新葡亰76500 18

复制两份

影分身之术

2)分别修改另外两个中继器内部的排列样式

因为我们的目标是列表(list)、双栏卡片(card)、大图(img),所以我们依次来修改

澳门新葡亰76500 19

修改

分别修改为图示样式,为了方便看,所以我把内部拿出来,放在一起比较了。

注意:双栏卡片的中继器样式为水平排列,每行两个。

澳门新葡亰76500 20

影分身+变身术

然后我们有了三个目标样式的中继器,小伙伴应该知道我后面会干什么了,奥义——后宫术。

3)用个面板把他们套一起

澳门新葡亰76500 21

按钮面板

用一个套套把他们三套一起,注意一下摆放顺序,然后依次放好。

4)加个切换按钮

按照淘宝的样式加个可以控制布局的按钮。

澳门新葡亰76500 22

切换按钮

同样是三层套套,记得把不同的图标找好。

5)添加用例

澳门新葡亰76500 23

添加用例

如右图所示。点击切换按钮(Transform)时切换按钮面板0(Transform)和套中继器的面板(content)为下一个,并且循环。OK了。

个人观点的总结总结:不同的布局主要取决于图片和文字的重要性,也就是图片和文字谁能更准确的向观众传递信息。根据不同的商品、用户群体选择合适的布局,使用大图布局时需谨慎。中级器教程写得比较略,还有一种方法些微麻烦,懒得写了,够用就行。有补充希望在留言区告诉我。谢谢阅读。

下载链接: 百度云下载 密码: w1t9


你看,那个点赞的人好像天使诶嘿~

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

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

网格面板

适用于集中展示大量图片

澳门新葡亰76500 24

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

瀑布流(网格列表变种)

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

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

澳门新葡亰76500 25

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

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

如图:

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

垂直列表导航

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

澳门新葡亰76500 26

3.出现适量的附加信息

轮播式导航

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

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

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

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

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

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

澳门新葡亰76500 27

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

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

澳门新葡亰76500 28

澳门新葡亰76500 29

什么时候使用?

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

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

教程未完,请看下一页!

大图网格布局

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

澳门新葡亰76500 30

本文由澳门新葡亰76500发布于每日资讯,转载请注明出处:垂直列表的几个常见模式,但本文更多描述商城

关键词:

最火资讯