电商UI养成-APP首页如何布局？

温馨提示：满满干货，要耐心看完哟

傻逼了，手欠点了关闭，刚刚写完的教程，灰飞烟灭，仿佛留下了两个嘲笑脸的再见！  我的内心无比挣扎，到底要不要再重新写一遍！  哦！ 哔哔哔哔哔哔哔哔哔   

好吧，这期讲首页怎么做，首页的要刮什么风？

***************************************我 是 分 割 线***************************

这一期讲首页风格/布局逻辑。

首页大家都会做，但是就难在符合操作逻辑的首页。现在市面上有各种各样的电商APP，有像淘宝京东这种集市型的，也有像豌豆公主，丰趣海淘这种做自主售卖的。还有网易考拉自营转入驻的混搭型电商。这篇主要分析下这3种类型的首页。

任何一个APP都是由各种小模块，小卡片组合布局的。对这些小卡片的组合搭配，就形成了结构，把他们分配到合理的位置，就形成了布局。

先分析下电商界的扛把子，阿里和京东两位霸霸。

两位霸霸都是以入驻平台的方式为盈利模式，这样就意味着有很多的商家会带着很多的产品需要展示。采用这种多线程小模块的组合，最大程度的满足多种商品需要展示的需求。

布局分析：

1.传统型强，不论是在视觉还是体验上，这种紧凑的矩型分区的设计方式都能很好的让用户接受。

2.设计简洁，把产品经理规划好的模块按卡片的形式分区设计，对于底子薄弱或者营造氛围能力弱的设计师都能够很好的驾驭。

3.技巧简单，文字和图片以左右结构，或者上下结构的排列组合在一个卡片格子内，无须特效设计点缀，就可以完成一个满足功能的页面。

4.容易入手，这种布局非常容易上手，也非常好做。除去顶部搜索框，banner，模块导航和底部导航这4个固定模块外，里面的展示内容也同样可以总结为文字广告位，小图片广告位，单独图片广告位，和普通产品推送位这4种卡片的排列组合。

配色分析：

采用的都是红色为主要色系的配色方案。有研究表明，红色会促使人有点击的欲望。本人亲自在生活中的傻逼体验就是，如果有一个红色按钮放在我手边，我真的会忍不住去戳他一下。

文字分析：

采用的都是非衬线字体，辨识度高，可读性强，因为都是看图说话的表达形式，所以在文字的使用上，要特别注意他的可读性，不要轻易尝试辨识度低，可爱型，手写型的字体。

表现手法：

简单的看图说话，最大限度的把要表达的产品表述清楚，整个页面看起来是一种很运营的形式。

风格总结：传统的卡片式设计+看图说话的表达方式+非衬线的文字结构。

分析第二种，电商界的新晋小花，自营模式的电商平台

B区这个平台有人可能还没有听说过，它是由我独立完成界面优化的跨境自营全类目电商平台，商品质量有保障！（没错，这就是一条硬广）

这两位新晋小花是以自主平台搭建的自营方式为盈利模式，这样可以自主选择商品活动方式和主推产品。因此，这类型的布局风格就更多的强调了主推产品的banner，活动页面的banner，主图产品的展示，以及分类的展示。总结一句话，我的平台我做主，我想干啥就干啥。

布局分析：

1.这类型的布局设计性非常强，最初设计的时候，要在脑海中有一个完整的画面。切记想一步做一步。事先和产品沟通好他要实现的功能，一定要完整的表达出产品要表现的功能，不能只是追求页面的好看而忽略功能展示。

2.迅速画出草稿，当你有了一定的想法之后，画出大体的草稿图，最好能定好大体的色系，并和产品对接好这个页面，确定产品要做的功能都一一实现。

3.整个页面要有逻辑性，不论页面功能有多少，再设计之初，一定要确保功能在页面设计的顺序有逻辑性，有顺序，有秩序。元素使用风格统一。

4.注意细节优化，这类型页面因为有很多的广告图要设计，每设计一张广告图时，都要注意同其他的广告图风格相似，同类字体的使用，相同元素的使用要统一，例如圆角的px，分割线的px，这些细节都要非常注意。

配色分析：

多广告图的页面设计，配色就沦为了一个辅助颜色，注意在使用辅助颜色时的色号统一。

文字分析：

产品名称，产品介绍采用可读性高的字体。在主图产品banner，活动banner等设计图片可以尝试变换字体。

表现手法：

有一定设计的图文结合。

风格总结：嵌套的卡片设计+拖拽式的展现方式+新颖的文字结构。

分析第三种，走出自己的风格，自营模式转入驻模式的电商平台

看到这种界面有没有感觉留白超多，看着好大气，性冷淡，爽爽爽的风格扑面而来。我自己是非常喜欢这种风格。（当然想要这种风格首先，要问问服务器的小伙伴，咱们的服务器是不是奢华旗舰版，不然用户可能会发现，打开这个页面，满屏都是白色框却加载不出图片）

布局分析：

1.这类型的页面已经形成了自己的设计风格，设计了非常多的模板。对于考拉这类型以活动主导运营的平台，模板的使用可以方便快捷的完成活动的推进和运营。

举个例子，仔细观察下，考拉大部分的banner都是一个拍摄的背景图+白框内的文字排版组成。其实大气的风格就是居中对齐，两边对称的排版。这样的组合排版的banner，设计的小伙伴去找背景图，前端小伙伴改文字内容，就可以很快做出一个活动banner图。

2.在设计之初，必须规划好设计规范，这样才能和前端配合好页面的实现。

我个人是感觉这种工作方式是比较高效的一种，对于人员的要求也会非常高，不仅要具备自己岗位的职能，还要能兼顾上下层环节的部分技能。这完全就是T字型人才呀。当然，前提是你的平台也是这类型以活动为主的运营平台。

配色分析：

大片的白色，也可以理解为是无色。依靠的就是元素和banner图的搭配来达到风格的统一。我是觉得这种设计是最难的设计，是一种仿佛没有设计，设计又是存在于无形。  推荐你们一本书佐藤可士和的《超级整理术》很好的诠释了这种设计于无形。

文字分析：

非衬线字体

表现手法：

极简冷淡，大量留白。

风格总结：极简风的卡片设计+拖拽式的展现方式+非衬线的文字结构。

看了以上3中类型的分析，我想新入行的小伙伴应该能轻松搞定一个首页了吧。如果多分析多个app一定还能在找出很多规律出来。总结一下，风格这种看似抽象的玩意，其实就是选择一个适合你平台的布局，然后通过你的心灵手巧把布局的细节加以完善，最终，把这个完善好的布局加上符合自己平台的特色，这就是属于你平台的首页。

感谢收看！下期再见！