• <bdo id="g6euu"><blockquote id="g6euu"></blockquote></bdo>
    <bdo id="g6euu"><samp id="g6euu"></samp></bdo>
  • 首页 > 网页教程 > 设计分享 > 垂直电商APP首页设计总结

    垂直电商APP首页设计总结

    时间:2017-08-22    来源:优设网

    上一篇文章我介绍了B2C综合类电商App首页设计,得到了非常多的关注。这篇介绍垂直类电商的首页设计。

    上篇回顾:《超全面!可能是最详细的电商首页设计总结》

    那么首先让我们了解下什么是垂直类的电商。

    B2C垂直电商细分

    淘宝的商品品类(SKU)是以数十亿计的,天猫和京东也应该在数千万的级别。海量的商品品类、鱼目混杂的商家以及参差不齐的商品为消费者的购物带来了极大的选购时间成本。消费者在这样的购物环境中找到适合自己的商品有时并不比大海捞针容易多少,而其中假冒伪劣商品的大量存在更是增加了购物的难度。

    相?#26434;贐2C综合商城的广而博,还有一?#20013;?#32780;美电商形态叫做B2C垂直电商,就是只专注售卖一个或者多个相关品类的电商。鉴定一个电商是否垂直,就是能否找到一个共同属性的用户群体。比如女性,文艺青年等。垂直电商的价值就在于其站在独立第三方的角度,从海量的商?#20998;?#20026;消费者做了一次精选,?#25945;?#38656;要为这些商品做信用背书,所以这些商品基产?#20998;?#37327;也相?#26434;?#20445;证,能通过口碑逐渐地在消费者中间建立信任?#23567;?/p>

    模式优缺点:

    垂直类电商优点是:面对的客户群体有一致的属性。有了这个大的前提,那么很容易知道客户在哪里,他们?#19981;?#21644;关注什么,可以有针对性的精?#21152;?#38144;。而且客户群体的集中和专一,会让其更有归属?#23567;?/p>

    垂直类电商缺点是:商品品类单一,用户重?#22402;?#20080;率低。就是用户想买其他商品你这里没有的卖,那么用户可能选择综合类B2C电商?#25945;ā?#25152;以垂直类电商在发展到一定程度后,业绩增长会遇到天花板,于是就开始扩充品类,走大而全的道路。?#21482;?#36973;到大的B2C商城的竞争。不管是从商品还是价格的角度上来说,淘宝、天猫以及京东这些综合类的B2C电商,都存在大量的商品可以替代垂直类电商。

    常见的垂直电商App

    B2C垂直里面,一些应用的商品品类比较多。比如母婴电商这个大的垂直分类,里面有服饰、鞋子、奶粉等多个小的品类。这些应用相当于垂直电商里的综合类。

    综合类的垂直电商

    因为品类比较多,所以页面?#24615;?#30340;信息密度比?#32454;摺?#25152;以页面设计采用类似综合B2C商城的设计。

    △贝贝和聚美优品首页

    垂直电商里还有一些垂直细分类。例如各?#20013;?#23376;和袜子、奢侈品类、食品类、箱包、水果类、钻戒和珠宝类、酒、养生保健品类、礼品玩具类、鲜花商城、居家类、汽车用品、药店等。

    这些细分类随着时间有的逐渐消逝,如卖鞋子的乐淘。而留下来各种时尚潮品的综合推荐类、家居类居多。这些垂直细分的商品品类不是很多,所以页面设计大多采用大的留?#20934;?#32422;型设计。本节文章重点去分析推荐一些垂直细分类的电商。

    垂直电商App的首页结构

    垂直电商的用户,可能购物的目的性不是很明确,一般都会以逛为主,通过逛发现自?#21512;不?#30340;一些商品完成购买行为。所以首页会放置各?#20013;?#24335;的商品推荐。推荐形式一般有

    • 品类或者品牌中?#35753;?#21333;品的推荐。
    • 以专题形式的某一类商品的集中推荐,以商品推荐为主。
    • 如果有达人推荐的子频道,会在首页有露出,通过一些意见领袖的推荐,
    • 知识库,我的理解还是一种专题的合集,比如什么场合适合穿什么?#36335;?#20160;么季节适合吃什么,如何选择合适的锅。?#27604;?#36825;些知?#29420;?#38754;少不了各种商品的推荐。
    • 其他一些各?#20013;?#39057;道栏目的露出。

    因为综合类电商?#25945;?#27169;块多,每个模块都可能从属某个部门,需要平衡各种部门事业部的利益。设计师设计的页面体现的是各?#20013;?#35843;的意志。而垂直类电商的模块相比就少的多,设计师有更多?#26434;?#21435;考虑各种模块的设计问题。知道了垂直类电商的首页的内容组成,我们开始看垂直类电商的具体模块组成。

    模块1:标题栏

    每个应用都有一个标题栏,这成了App的标准设计了。标题栏上一般会有三个重要的元素组成:logo图形或者文字、搜索页的入口、购物车的图标。

    视觉设计1:品牌logo

    标题栏放置的Logo文?#21482;?#36827;行字体设计,垂直类电商一般会非常重视品牌的露出,所以这里不会使用?#20302;?#40664;认的字体,而是贴图使用设计好的Logo文?#21482;?#32773;Logo图形。

    △造作标题栏使用了logo图形,其他使用了字体设计的logo

    视觉设计2:搜索入口

    大多数垂直类电商,更希望于用户浏览推荐内容,购买推荐活动商品。而不是直接通过搜索去找到相应商品,去完成购买行为。所以垂直类电商App会有意识的弱化商品搜索。不同于B2C综合类电商?#24049;?#26639;上醒目的搜索栏,美食电商Enjoy和兴趣导购life首页,直接在?#24049;?#26639;?#20063;?#25918;置了一个搜索图标。

    △美食电商Enjoy和兴趣导购life首页

    如果你的商品品类并不是很多,那么用户通过关键词搜索很难搜到东西。所以一些应用干脆把搜索和商品分类页进行结合设计。例如造作点击搜索,进入的搜索页就是商品的分类页。

    △造作的首页和分类页

    有的垂直类电商品类并不多,所以干脆直接去掉了搜索入口。在2016年的唯品会的App甚至极端的去掉了搜索功能,希望用户在页面可以停留更长的时间。这种想法显然有点一厢情愿,因为唯品会的品类可不少,这样的设计遭到了很多用户的反对。在最新版本的唯品会又?#37027;?#30340;把搜索功能加了回来。所以留不留搜索入口还是要看你的品类是否足?#29615;?#23500;。

    模块2:分类模块

    由于垂直电商的品类不是那么多。子频道也有限,所以不需要和综合类电商一样,用图标的形式作为模块快速入口,而是直接设计为Tab标签栏的设计形式,放置在标题栏下面,方便用户快速浏览切换。

    视觉设计1:底部标签栏

    Tab标签栏如果类别比较多的时候采用横滑的设计形式。如果应用的频道比较少,例如造作应用,甚?#37327;?#20197;直接把标签栏设计在底部,相当于整个底部标签栏的作用,?#27604;?#24213;部标签栏重要的“我的”模块,入口放置在顶部标题栏上。

    △造作首页底部标签栏

    视觉设计2:滑动隐藏标签栏

    一些垂直类电商的首页设计形式单一,完全由banner图构成。用户向上滑动页面,标题栏会自动隐藏,让用户有更大的页面显示面积。例如Life应用,?#21155;?#21521;上滑动多少像素开?#23478;?#34255;标题栏,你需要给程序员定义出高度。

    △Life 滑动隐藏标签栏

    良仓的首页并没有采用这种滑动隐藏标题栏的设计,?#20063;?#27979;因为良仓的底部栏目太多,没有给购物车留下一个单独的位置。所以可能为了强调购物车的全局显示,所以固定栏顶部标签栏。

    ?#27604;?#25105;认为这种想法可能也说不通,因为首页是不太可能促成交易行为,更多是引流的作用。我认为良?#20540;?#37096;的分享是一个很鸡肋的功能,本质就是一些美图商品推荐而已,如果把这个频道降级放进其他位置,把这个位置留给购物车。我估计设计师就可以舒心的使用隐藏标题栏设计。

    △良仓固定的标签栏

    模块3:横幅广告

    由于垂直类电商的信息密度低,所以有足够大的空间去放置Banner。Banner的常见比例有16:9和1:1两种。也就是750*422和750*750。一般Banner?#35745;?#35774;计还是以750宽度的iphone6/7为基准。?#21155;?#26356;大尺寸的iphone6/7plus还是使用这个?#35745;?#22240;为从节省带宽的角度完全没必要那么大的尺寸。2X的Banner图给3X用也是足够的。

    那么?#35745;?#30340;比例什么时候使用16:9,什么时候使用1:1了?还是从内容的角度进行分析。

    视觉设计1:16:9的Banner图

    如果你的应用展示的Banner图是类似专题性质的。?#35745;?#21482;是一个参考作用,用户是不能从大图看到更多商品信息,需要更多文字?#24471;?#26469;辅助阅读,?#35745;?#27604;例选择使用16:9。例如旅游的产品?#35745;?#23601;适合选用16:9。比如首页你要做一个?#20998;?#30340;路线,你?#29615;?#24052;黎的埃菲尔铁塔的?#35745;?#37027;么提供信息量是?#23545;?#19981;够的,必须加上?#36335;?#24847;深度10日游的文字?#24471;鰲?#20363;如造作展示的都是家居套装专题,而不是具体某个家居的单品。所以使用16:9 Banner?#35745;?#27604;例。

    △造作首页的16:9 Banner图

    视觉设计2:1:1的Banner图

    如果你的应用展示的Banner图是类似商品性质的。?#35745;?#20855;有重要的参考作用,用户通过观看精美的?#35745;?#19981;用太注重文字内容的,就可以吸引点击。?#35745;?#27604;例选择使用4:3。例如最美有物的Banner图是以?#24471;?#21333;个商品为主,不需要太多文字,用户也能看的明白,简单的说有?#35745;?#23601;够了,所以?#35745;?#27604;例选择4:3。

    △ 最美有物的1:1 Banner图

    模块4:卡片化内容推荐

    垂直类电商,首页需要放置各种专题推荐,来导购各种商品。各?#30452;?#36753;精选,达人推荐,热卖商品。?#26434;?#29992;户来说本质就是推荐商品。所以用户并不在乎你的内部各种叫法分类。那么一些电商直接打破了那种综合B2C电商的豆腐块做法。而是用了卡片化设计。各种推荐内容就是一个个卡片设计,这种设计的优点就是足够精简,看起来有格调?#23567;?#32570;点就是信息密度很低,容纳不了足够多的信息。

    视觉设计1:横向卡片

    想去应用采用了横向大卡片的设计。启动画面推荐的商品,通过一个动画切换直接显示在了首页的默认第一个卡片。通过这种强调的手法,让用户足够聚焦。这个横向卡片有一个缺点就是可容纳信息量不能太大,所以只适合做单一类型的内容卡片。如果试图在卡片上加上各种复杂的模块内容。一旦卡片过多,用户在横向滑动卡片的时候,容?#36164;?#21435;位置?#23567;N以?#21738;个模块,我刚才看的模块在哪里,用户容易产生困惑,这是一个鱼与熊掌不可兼得的问题。

    △想去的启动页和首页卡片化设计

    视觉设计2:纵向卡片

    另外一种大卡片设计就是纵向卡片,最美有物的首页卡片是纵向滑动的。同横向滑动相比,滑动的易用性略好于横向滑动,因为用户也更习惯于上下滑动。纵向滑动的信息?#24615;?#24230;更低于横向滑动,因为需要页面需要留出足够的区域,去放置更多前后卡片,去营造卡片的上下立体?#23567;?#36825;样的立体设计可以给予用户更好的位置?#23567;?#22240;为设计可?#20204;?#22495;小,所以更多通过精心标题设计去吸引用户点击。

    △最美有物的首页卡片化设计

    模块5:楼层Banner

    之前我们说过垂直细分类的频道分类可能没有那么多,所以不需要像B2C综合类电商那么复杂的设计形式。可能直接以单一的专题Banner形式展现,从上到下都是Banner形式的楼层。

    视觉设计1?#21644;计?#30340;比例

    因为Banner设计的形式比较单一,采用?#35745;?文字的视觉样式。每个楼层就是一个小模块,那么模块与模块之间的如何通过视觉手段进行区分了?Life应用采用了1+N的设计形式。设计样式上,Life上半部分大Banner加半?#35813;?#40657;底,下半部分?#20882;?#33394;背?#22467;?#26377;一个白色上三角,这样很清晰让用户明白,下半部分的商品是从属于上半部分的专题。

    △Life的楼层Banner

    Life上半部分Banner采用了750*400PX的?#30452;?#29575;, 与16:9相比扣除了22px,没有采用16:9的原因是,是因为上半部分与下半部分之前有30px的留白,为了不让整个Banner太高浪费面积,所以取整选了400PX高度。

    下半部分Banner采用了176*176PX(1:1)的小图。这样?#35745;?#27604;例符合之前分析的专题图适合16:9,商品图适合用1:1。这样的大小比例看起来可以让版块之前区分的很清楚。?#27604;?#22914;果下半部分?#35745;?#19968;定要使用小图,否则看起来层次就混乱,。例如男衣邦的首页,上图和下图的比例看起来非常的接近。模块层次区分的就不是非常好。

    △男衣邦的楼层Banner

    相关推荐
    电商设计:5个快速进阶的电商Banner设计技巧
    从人性的角度,揭露电商Banner设计背后的14个秘密
    电商设计:韩国电商BANNER的构图/配色/元素/应用分析
    电商产品设计感想:你真的?#40092;?#36141;物车吗?
    电商商品详情页如何通过设计提升转化率?
    电商设计教程:电商APP首页设计总结
    电商设计:用可视化编辑,解构看起炫酷的专题页面
    设计一个优秀的电商网站需注意那些方面?
    分享:如何才能让你的设计作品耐看?
    案例分析社交型网站首页设计的优秀设计原则
    网页设计教程分享—能影响观众的网站首页设计10个要点
    网站首页的幻灯片轮播图点击率低的原因分析
    教程?#21644;?#39029;首图设计7个技巧分享
    腾讯CDC:泛泛而谈界面中的斑马纹设计
    简单而又不单调的网页视觉设计技巧
    如何杜绝网页设计中视噪?#26434;?#25143;的影响
    如何让?#21482;?#24212;用于视觉设计中而增强亲和力和感染力
    网页视觉设计如何针?#26434;?#25143;有效表达信息
    网站页面设计中光的特效设计引?#21152;?#25143;视觉焦点
    网页PS设计教程:手把手教你制作漂亮的商?#30340;?#26495;
    网页PS设计教程:手把手教你制作WordPress新闻博客模板
    网页设计教程:5个原则助你设计一个成功的购买按钮
    从网站可用性的角度深入分析?#36824;?#21644;微软官网设计的优劣
    20个精致漂亮的视频播放器界面设计欣赏及点评
    视觉设计:页面构建的审图与细节
    视觉设计之材质绘制的色彩理论
    网站设计之10个儿童网站分析及设计特点总结
    网页配色经验分享:叠柔配色技巧及图解分析
    工具型网站设计及典型案例分析
    深入?#25945;滯计?#26684;式与网页设计的那点?#38706;?/a>
    分享?#21644;?#39029;核?#21738;?#23481;对视觉表现的影响
    响应式网页设计正成为移动互联网大势所趋
    20个超棒的photoshop网页设计教程分享
    ?#31243;?#30028;面设计中的结构设计

    精彩推荐

    ?#35753;?#25945;程

    任选五走势图
  • <bdo id="g6euu"><blockquote id="g6euu"></blockquote></bdo>
    <bdo id="g6euu"><samp id="g6euu"></samp></bdo>
  • <bdo id="g6euu"><blockquote id="g6euu"></blockquote></bdo>
    <bdo id="g6euu"><samp id="g6euu"></samp></bdo>
  • 时时彩怎样玩才能赚钱 羽毛球地板 2017年永久平特肖公式 欧洲百万彩票走势图 河北20选5专家预测推荐号码 宁夏11选5电子走势图官网 新疆11选5前三 七星彩规律103期预测 玄机新刊 2013快乐双彩出奖号码 曾道人开奖爆料 2019欧冠夺冠奖金 河北20选5幸运走势 排列五走势图连线图专业版 混合过关三串一挂一场