这也许是最详细的APP电商⾸页设计分析
距离上⼀篇⽂章已经过去很久了，App设计系列的第三篇来了，今天我们来讲⾸页设计，因为这个⾸页设计⾮常复杂，我花了很久时间去理清相关知识点。讲视觉同时也会讲交互和产品，当
然下次我会加快进度，更新下⼀篇！
移动端产品最难的地⽅就是在很⼩的屏幕上展⽰出你所有的业务。因为有了屏幕的限制，加上
移动端的客户碎⽚化阅读的习惯和⾼流失率。所以业务复杂的App是设计难度较⾼的。电商就是这种类型的App，既要保证⾸页业务展⽰完整性，⼜要保证⽤户体验满意度，每⼀个页⾯设计都要考虑⼀些技巧和思考维度，⾮常考验设计师的设计功⼒。所以电商类App是要展⽰内容最多也是最难做的⼀类App。所以我们以电商为例来分析⾸页设计。
⽤⼿机去购物已经成为我们⽣活中不可或缺的⼀部分，打开天猫、淘宝App进⼊⾸页之后，基本上都是琳琅满⽬的商品促销活动、专题分类以甚⾄是与电商不太相关的功能性⼊⼝。
例如（图1-1）这些都是B2C综合商城类的App，设计师显然不喜欢这种类似菜市场杂乱的界⾯设计，更倾向于去设计⼩⽽美的垂直类电商界⾯设计。或者引⽤国外的电商应⽤设计，觉得那
样的设计留⽩多，图⽚精美，这才是⼀个好的设计。那么如何我们到底该评价⼀个电商App的⾸页设计好坏了？
图1-1 B2C综合商城淘宝和京东
界⾯与产品服务定位相匹配
对电商⽽⾔，⾸页设计的基本原则，就是要能够增加销售机会，把产品卖出去。所以我们要围
绕这个⽬的来去设计界⾯。所以不同类型的App的设计策略都会不⼀样，到适合⾃⼰产品服务定位的设计⽅法。我们来⽐对⼀下B2C综合类App和垂直细分类电商App，如（图1-2）
图1-2 B2C综合类App和垂直细分类电商App运营对⽐
B2C综合类App⼀般体量⾮常庞⼤，他们的⽬标受众是极为⼴泛的，⽆论是社会顶层的精英分⼦，还是只够解决温饱的市井⼩民。那么此时⼈物形象的独特性会弱化，设计的过程也就尽量
页面设计是什么
避免去塑造带有某些固有⼈的特性。所以这类⼤型电商，很像⼀个⼤型超市沃尔玛家乐福。
超市⾥满⽬琳琅被堆满的货架，有铺天盖地的打折促销信息。B2C综合类App，都有⾮常多的额外功
能，给⼿机充话费、线下服务、等等。从设计师⾓度来看，他们是不美观，甚⾄冗余的。但从商业上来看它们每天都有巨⼤的访问量，⽽每个页⾯都要合理的将这些流量导向对应
的⽬的地，如果页⾯内容太少，就没办法充分挖掘出⽤户的潜在需求和兴趣点。⽽这些页⾯的
密集内容也是在经过⼤量探索和庞⼤的数据⽀撑⽽逐步优化完善的。
垂直细分类的电商App，产品的⽬的就是聚合对应类型的产品推送给对应⼈。从产品诞⽣的时候就已经确认了精确的⽬标⽤户层，设计师需要做的是从产品的各个细节来营造属于这个层次
的氛围，设计让这个体产⽣归属感的UI界⾯。例如良仓（图1-3），因为设计师⾯对的⽤户体⾮常明确，可能是⼩资或者⽂艺青年，所以视觉⼿段可以⾮常精准。设计师需要通过⼤块的
留⽩、匠⽓的字体、纤细的线条等视觉⼿段，营造出相应的设计氛围和格调感。由于这类App体量都不会很⼤，也可以充分发挥设计师的个⼈⾊彩。
图1-3良仓⾸页截图
另外⼀些⼩型企业和初创公司，⼈⼒资源不充沛，商业模式经验不充分，在诸多⽅⾯都⽆法⽐
拟⼤型团队，所以功能单⼀是必然的，客观的造成了界⾯的简洁。其实这是没办法奢求⼤⽽
全，只能把⽬光瞄准在⼩⽽精上。所以这类型App⾸页推荐出来的图⽚，为了保证视觉的协调性，都需要经过设计师认真筛选和处理的。这些⼤量⼈⼯⼲预的⼯作量在综合类App上是不可想象的。例如淘宝的⾸页（图1-4）⽤户看到的各种banner图和⼴告推荐图，都是根据⽤户的最近浏览记录，个性化推荐。所以需要海量的banner和产品图，这些都是由机器⼈合成的，所以设计与选图并不可能达到设计师所期望的完美搭配。设计师这⾥需要考虑的是⼀个普适性。
（图1-4）淘宝⾸页机器⼈合成的各种Banner
所以同样是电商，B2C综合类App和垂直细分类的App，因为⽤户的属性的不同，体量的不同，最终设计师给出的设计解决⽅案也不⼀样。那么下⾯我们分别根据不同类型电商App进⾏分析设
计。
电商⾸页设计思路，从上往下思路是：
⽤户使⽤搜索栏快速到⼼仪的商品（让快速定位⽬标）
通过Banner活动拉动流量（产品拉新活跃⽤户，让⽤户进来）
展⽰全部服务类别（⽤户知道产品有哪些商品和服务）
秒杀⽤流量品带动购买量（让⽤户知道该商品和服务在我这⾥很便宜）
⾸屏后的页⾯展⽰各⼤类别（⽅便⽤户进⼊沉浸式浏览⽅式）
模块1：搜索栏
⼤多数⽤户发⽣购买⾏为可能是有明确的⽬的性的。我知道我想要买什么，所以我需要快速的搜到商品。所以App会把最显眼的位置留给搜索栏。搜索栏（图1-5
（图1-5）淘宝和JD的默认关键词
视觉设计：
移动设计的⾸页⼨⼟⼨⾦，所以搜索栏下⾯的Banner图不会做的太⾼，这⾥就带来⼀个⽭盾，就是Banner尺⼨⼩，视觉冲击⼒⼩。京东采⽤的是透明度变化的搜索栏。默认是搜索栏的背景是全透的，这样会留给Banner⾜够的视觉设计空间。滑动页⾯，搜索栏的背景会由全透明转换为不透明。逐渐下滑显现的导航栏会设置两个极限值（图1-6）。下滑多少⾼度开始出现90%透明的导航栏，下滑多少⾼度出现不透明的导航栏。
（图1-6）京东在不同⾼度导航栏的透明度变化
模块2：横幅⼴告
因为电商促销活动是拉动消费最⼤的源泉，⽽Banner是很好展⽰活动页⾯的地⽅。4到6个Banner就能牢牢抓住⽤户贪便宜的⼼理。⽽且Banner作为运营位也可以作为销售的⼴告位进⾏出售。所以⼀开始就要看见Banner是很好的展⽰。
视觉设计：
如果采⽤半透明导航栏的设计，那么Banner设计（图1-7）的时候⽂字区域需要留出⾜够的⾼度，避免⽂字被导航栏遮住。
（图1-7）PS设计Banner会划出辅助线，留出⽂字安全区域
模块3：模块快速⼊⼝
接下来电商会展⽰1排或者2排⼩icon。这些icon相当于web端的分类类⽬列表作⽤。起到了让⽤户知道你有哪些卖的东西和哪些服务可以做。当然像淘宝和京东这类综合类应⽤，有⾮常多的业务。这些业务分布在界⾯中的各个⾓落，需要⼀个快速跳转重要模块的快捷⼊⼝。⽽⼩电商⽹站的ICON往往是⼀个分类。
视觉设计1 模块分割：
这⾥需要的注意的是模块宽度的划分。因为⼿机的屏幕宽度是多种多样的，界⾯设计的宽度是⾃适应的，所以按照⽐例定出每个图标的模块的占⽐，⽽不是具体⼤宽度⼤⼩。⼀些设计师直接五等分划分每个图标模块的宽度，如图（图1-8）飞猪旅⾏就是使⽤直接五等分划分的⽅分割模块的，与⼤众点评相⽐，没有留⽩的做法视觉显得图标摆放松散不够聚拢。
（图1-8）飞猪旅⾏与⼤众点评图标模块
正确的做法是给模块边缘留出空⽩间距。这个间距选择30PX或者20PX，然后剩下的宽度按照模块进⾏均分，⽐如美团（图1-9）留出了30PX的留⽩，然后五等分划分剩下的总宽度。
（图1-9）美团模块的边缘留⽩
视觉设计2 图标风格：
另外需要注意的是图标设计的风格，如果在这⾥使⽤剪影或者线性的图标（图1-10），不是⼀个很好的设计解决⽅案。剪影图标通过⾯来塑造形体的图标，通过切割⾯，分型来塑造图标的体积感。所以剪影图标需要更⼤的视觉⾯积去切割⾯，才能有更多的设计细节可看。那么这⾥图标尺⼨显然没有这么⼤，不具备设计发挥的条件。所以容易轮廓设计的简单，缺乏设计感。与剪影图标不同的是，线性图标通过线来塑造形体的轮廓。同样由于图标尺⼨⽐较⼩，线使⽤的多了，容易线与线纠合在⼀起看不清楚，线少了，图标的视觉⾯积单薄，显得缺乏设计细节。
（图1-10）使⽤了剪影和线性设计风格的图标
那么如何在⼩尺⼨的图标，既不要图标形体复杂，⼜能保持独特的设计感了？这⾥推荐使⽤的微渐变设计⼿法去塑造图标的形体。例如飞猪（图1-11）的模块快速⼊⼝图标使⽤了微渐变⼿法，这种设计风格的好处是，在⼩尺⼨图标使⽤不复杂的剪影轮廓，通过渐变来分割层次，产⽣独特的艺术效果。
（图1-11）飞猪使⽤了微渐变设计风格的图标
微渐变的设计风格的难点就是分型，⼀般会把设计会有两种分型⽅法（图1-12）把图标剪影区分为两个层次，前后层次通过渐变的⼿法进⾏过渡。
（图1-12）飞猪、⽀付宝⼝碑、⼤众点评使⽤渐变分层的图标
视觉设计3 背板设计：
⽬前我们常见的背板都是圆形或者圆⾓矩形的背景板，那么是不是只能有这样单调设计形式了。如何进⼀步创新？答案是使⽤独特的品牌形状做为图标的背景板（图1-13），这个基础形状还可以在底部标题栏图标上使⽤。
（图1-13）使⽤了独特品牌形状的背景板
或者使⽤纹理形式填充背景（图1-14）。这⾥需要注意的是每个背景板的纹理不是每个都⼀样的。那样重复的纹理单调⽽乏味。淘宝使⽤了统⼀粗细且有变化的线条。这样统⼀中⼜有变化，具有独特的设计形式感。
（图1-14）使⽤了独特纹理的背景板
在背景中运⽤各种纹理的⼿法，在品牌设计中经常会运⽤到（图1-15）。M的基本型填充使⽤了各种纹理效果。
（图1-15）品牌设计运⽤填充纹理
对于如何使⽤合适的背景纹理，当你的前景图标设计轮廓简单不复杂，那么根据前景图形表达的情绪挑选适合的图形（图1-16），可以让背景⾜够花哨，营造出不同的氛围感。
（图1-16）不同情绪的背景图形
如果前景的图标⽐较复杂，并不希望背景的图形带来过多的⼲扰。那么需要做的就是⼏何形状的变换（图1-17），在变化中寻求统⼀。
（图1-17）⼏何形状变换的背景
模块4：⽤户订阅
淘宝和京东都将这个⽤户订阅的模块，放置在⾸页banner底下，可见其地位的重要性。原因是⽤户订阅内容对⽤户的转化率⾮常⾼。淘宝和京东都引⼊⾃媒体达⼈作为内容⽣产者⽣产较为专业的内容，内容中穿插推荐商品及其购买链接。相⽐于单纯的将商品信息呈现给消费者，图
⽂等多⽅式的推荐降低消费者的抗拒和挑剔⼼理，更易接受事物。就像有时候，你确定要去商店买⾐服往往买不到中意的，反⽽是随便看看逛时买到了⼼仪的商品。
视觉设计：
⾸页⾯积⾮常有限，所以这⾥的⽤户订阅内容，采⽤的都是⽂字滚屏形式出现。通过⽂字的标题吸引⽤户的注意⼒。这⾥需要注意的是由于视觉⾯积⾮常⼩，所以没有必要塑造⼀个块⾯，同其他块⾯区分开来。这⾥（图1-18）京东的“京东快报”做的不是太好，单独为⽤户订阅做了⼀个模块区分，显得⾮常琐碎。⽽淘宝的“淘宝头条”模块背景，直接与模块快速⼊⼝的背景合并。通过间距的留⽩来区分版块。减少了块⾯的琐碎感，这样的设计⼿法显然更合适。
（图1-18）淘宝的“淘宝头条”模块与京东的“京东快报”
模块5：秒杀品
如果⼀件商品常年都是优惠价，那么等于没有优惠，所以想出了限时秒杀的⽅法。不是简单促使⽤户快速下单的，⽽是只有在规定的时间才可以享受更加优惠的价格。这样增加了⽤户的粘性，必须在制定的时间去再次登录app。在秒杀开始之前，⽤户可能会告诉他的朋友优惠的信息，促使他的朋友也去进⾏购买，就形成了线下带动购买的过程。或者⽤户在其他商品品类闲逛，在这个闲逛的时间⾥，⽤户也有可能去购买其他的商品。淘宝和京东会有秒杀品，秒杀品起到的作⽤就是带动更多的流量进⼊App。
视觉设计：
既然是秒杀，那么三个要素就是⽤户最关⼼的。什么时间有秒杀，有什么秒杀的商品，秒杀的价格到底多有优惠。所以在页⾯中呈现出这3个要素是⾮常重要的。京东的“京东秒杀”（图1-19）在这块的视觉设计是更加突出的，⾮常完整的呈现了这3个要素。⽽淘宝的“淘抢购”因为版⾯狭⼩，⽆法呈现这么多的设计元素，设计上显得⾮常局促。⾄于为什么淘宝采⽤这种设计形式，因为版块上⾯有⼀个天猫超市，明显淘宝更希望主推这个模块。所以“淘抢购”为了追求与有好货的模块设计形式感统⼀。不得不采⽤轻量级的设计。从这⾥也可以看出，⾸页设计也是⼀个根据业务运营需求，平衡的艺术。
（图1-19）京东的“京东秒杀”模块与淘宝的“淘抢购”
模块6：内容推荐
如果说之前的模块都属于商品直接推荐的交易型电商，那么现在另⼀种新的电商形态内容电商，正在逐步崛起。消费费者并没有我要购物的⼼态，⽽是在悠闲地看着美妆达⼈直播，或者⾃媒体的⽂章。这些达⼈或者⾃媒体孜孜不倦的⽣产各种专业内容，内容中穿插推荐商品及其购买链接。当你在想要购物的时候看到商品信息，和你在没想要购物的时候看到商品信息，整个的偏好、选择标准和决策⽅式，都会发⽣巨⼤的变化。这两种⼼态感觉是完全不⼀样。内容电商的购物⼼理是，我喜欢的达⼈或者店铺推荐了⼀款看起来不错的商品，看起来觉得不错，可能就下单购买了。这个过程让很像你在旅游景点去购买纪念品。如果这个商品不是⾮常昂贵，⼤多数情况下⼈们⽄⽄计较这个商品到底值多少钱。⽽是想我购买这样⼀个商品会给我留下美好的记忆。这是⼀个感性的消费⼼理。这个商品推荐模块就是⼀个内容形模块的快速⼊⼝。根据你最近的浏览记录，推荐了⼀些相关的帖⼦或者达⼈。因为每个⼈关注的商品都不⼀样。所以呈现的界⾯模块可能也不⼀样。
例如（图1-20）淘宝这块的推荐，淘宝如果判断你是男性⽤户，默认推荐的是男神范，如果判断你是⼥性⽤户默认推荐的是爱逛街。
（图1-20）淘宝的内容推荐模块
模块7：楼层类别展⽰
之后的往下的页⾯都是超出⼀个屏幕的，过去⽤来展⽰电商每个细分类别中最好的商品进⾏展⽰。⽤
⼤量的品类和优惠价格打动⽤户进⼊进⾏消费。现在更倾向于内容化电商推荐。
不再强调以商品品类作为分类标准，⽽是以专题来分类。专题的选取往往融合情感因素，更能吸引消费者，特别是在消费升级的驱使下，这也符合消费者“逛”时的购买习惯。⽐如京东的爱⽣活模块中集合了3C、家居、超市、宝宝⽤品、个⼈⽤品等。这样的设计说明消费者不管是在线上“逛”还是线下逛，对于商品之间的界限并没有那么明确。关于电商内容化设计这个在后⾯的章节会单独去说。
模块8：猜你喜欢
有时候⽤户逛电商是漫⽆⽬的的，并不⼀定有明确的购买⽬的。但⽤户在逛的过程中也许有了别的联想。通过分析预测⽤户⾏为，促成商品的销售。有的商品具有的天然的关联性，例如⽤户已经购买了⽛刷，那么会不会再要买⼏⽀⽛膏。另外⼀个⽤户3个⽉进⾏两次购买奶粉，电商⽹站记录下⽤户的采购周期，预测出⽤户即将发⽣的采购⾏为的时间及时向⽤户推荐该品类商品。所以电商会对每个商品进⾏标签分类。通过对⽤户的⾏为数据挖掘，预测⽤户可能会感兴趣的相关联商品标签，推荐商品。这样增加⼴告投放的精准度，达到提⾼商品转化率的效果。也许现在⾏为预测效果还不⾜够理想，促成购买是⼀个⾮常复杂的过程。但随着⼤数据技术的发展，展⽰推荐的东西将会越来越符合⽤户的需求，预测⽤户的购买⾏为这是未来的⼀个趋势。
模块9：底部导航栏
底部导航⼀般分为4到5个模块。以图标+⽂字的设计形式进⾏展⽰，电商最常见的底部导航栏设置是⾸页，分类，购物车，我的。
⾸页
告诉⽤户我是卖什么的，⽤户你可以在我这⾥得到什么。然后通过第2屏幕到第6屏幕左右的浏览让⽤户彻底明⽩你这⾥的能买到什么，顺便让⽤户进⼊⼼智模型⾥。彻底进⾏逛街浏览的⼼理。
分类
分类页⾯起到筛选搜索的作⽤。但这⾥的搜索与⾸页顶部的搜索框还不⼀样。因为分类的搜索带有⼀定不确定性，但是却是让⽤户导流进⼊的商品页⾯最好且更直接的⽅式。淘宝由于业务众多，已经放弃了在⾸页提供分类检索商品的做法。⽽更倾向于⽤内容引导⽤户发⽣购买⾏为。
购物车
当⽤户在浏览页⾯到想买的商品后，并不⼀定买⼀个⽀付⼀个，⽽是把他想要买的各种商品集中付款，这符合⽤户在逛超市时去收银台统⼀付款的⼼理。有时候⽤户看上了商品，并不⼀定马上去⽀付，这时候购物车也起到不断提醒⽤户要付款的作⽤。
我的
这是⼀个个⼈后台的作⽤，管理⾃⼰购买商品后的⼀系列状态。例如查看商品物流状态，退换商品，商品评价等。所以底部导航栏从左到右就是⽤户购买商品过程⼀个⼼理写照。
视觉设计
这⾥需要重点设计的就是代表每个模块的图标设计了。打开⼀些App，我们会发现App的底部图标设计的⾮常普通，没有任何特⾊，在素材⽹站上都可以下载到这样的图标贴合上去。那么我们需要单独花时间精⼼设计。这个在后⾯的章节图标设计中会单独表述。
在App页⾯设计中，设计师会遇到⼀个问题就是页⾯每个模块做多⾼多宽合适，页⾯中主要内容的模块与次要内容模块的⽐例是否合适。特别是电商模块⽐较多，样式复杂。做的不好，就显得页⾯乱糟糟的，但⼜说不出什么原因。下⾯我来告诉你如何设计内容模块的视觉⽐例。
屏幕安全边距
做App界⾯的时候，当内容贴合在屏幕边缘的时候，不仅会影响可读性，也会影响美观度。所以我们需要设置⼀个⼀个留⽩区域。这个区域就是屏幕安全边距，所有的内容设计在这个边距内。⼀般留⽩区域是20px或者30px的宽度。如果界⾯内容⽐较多，例如淘宝（图1-21）就选择⽤20PX。
（图1-21）淘宝的内容模块20px边缘留⽩
如果⾸页内容⽐较少，排版⽐较宽松则选⽤30PX的宽度，例如Airbnb的⾸页（图1-22）内容极简极度宽松，完全由专题banner构成，所以留⽩间距达到了惊⼈的45px。
（图1-22）Airbnb⾸页45px的边缘留⽩

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。