电商产品设计历经集市时代的比拼价格，到脑部内容意见领袖引导阶段，再到一种数据用户A知道数据用户B的需求，从而A用户精准满足B用户的需求，与此对应的例子在海外比较明显：比如亚马逊的Wishlist，而这个阶段的电商在国内还不明显。因此本文主要总结国内脑部内容电商移动端设计Tips。

垂直化内容移动端设计不需要迎合所有人口味，但是一定要给针对性的用户一个明确的暗示，“嘿，Girl,我是不同的”，这是产品设计的重点。

首先：从首页第一视觉停留开始

首屏是第一视觉第一块信息展示区域，适合设计成时尚和引领当下热点潮流或者产品摄影图等视觉冲击力较强的图片，和符合用户知觉的文案，吸引用户的注意力。第一视觉最好以大图海报形式出现，而海报本身的设计是决定用户是否点击进入的关键，什么样的内容容易吸引用户呢？根据经验有以下三个特点：特征一、以能够唤起用户共鸣的话题性图文切入，引出用户的知感。特征二、融入时下创意性的元素，展现垂直内容的不同视角。特征三、以彰显个体为中心的关怀式设计，将用户的视觉重点分为几个小点，不同的内容能够降低网页的跳失率。

其次：垂直电商的移动端搜索设计

根据对APP搜索设计知觉负载理论的研究。每行2图比每行4图用户搜索效率更高，因为简单页面布局用户所需的认知加工负载较低，更利于进行模式识别及认知加工，因此搜索效率较高。第二点，浅色背景的导航界面设计的搜索效率相对较高，因为深色背景页面的无关刺激会对用户搜索产生干扰作用。

第三：精选内容页面

会放置一些二级页面的主推内容，快速便捷扼要的让用户了解到精选页面都有些什么。同时首页对移动端总结的能力越强，越有调理，越能快速的帮助用户定位，了解移动端的主要内容。选择内容越抢眼，越符合用户的知感，越能吸引消费者继续浏览的兴趣。网络购物和线下不同，用户是通过一个个入口购买衣服，不管是平台，还是垂直应用，商家都不可能同时将所有商品展现在用户面前，只能选择自己内容中已经被用户感知认可过的，获得销量的商品，方能提高用户进入本店继续浏览的几率，将最好的精选优先快速的推送给用户，是增加转化率的最佳产品设计手段。

对上述页面的分析总结出以下几点设计Tips

• Tips1: 垂直化移动端更强调用户可以识别的统一风格
• Tips 2: 首页内容就相当于一个人初次见面穿着打扮如何，从视觉上来说，也是影响别人对自己印象的关键，这就是网站的风格，风格设计好的移动端首页能更好的体现移动端的各种功能内容，更能吸引浏览者的注意，提高首页转化率。
• Tips 3:让内容层次感清晰,以垂直女装移动端电商为例来说，首先，要让用户了解到，此处都是售卖具体某一类女装的。比如：黑色的裙子，内衣专场，还是什么女性类目都有。
• Tips 4: 营销模式是怎么样的，是三级分销，用户分享，还是精美的场景化的图文。

如何在多如牛毛的众多移动端里突出，不仅要注重设计美学布局，更要懂得用户的需求心里分析，垂直电商用户一言不合就会翻到下个应用里去，所以短时间内做到有效，通俗易懂好操作是首要原则，削弱首页的学习性，不盲目设计非常规的操作流程，降低教育用户的成本，方能突出。

第四:垂直化移动端商品列表页设计

进一步筛选出更加精准，只剩下符合用户需求的款式，是商品列表页最核心的使命。

商品列表页设计Tips

• 一、保持信息简明扼要，产品设计者应当深度研究用户画像，了解用户在对比此商品时，哪些信息是必须关注的，哪些是其次，尽量将用户最最需求的内容展现在这一页，就可以减少点进去，再返回，再点开其他页面，再返回通过跳转页面来回对比商品的麻烦现象。
• 二、界面布局设计做到操作更加顺手，上文提到复杂和简单页面两种布局，一种是一行2图，一种是一行4图，目的给予用户方便的操作流程，先选择大类目，再筛选具体的关键词，再浏览商品，因此Tips是注意不要颠倒流程的先后顺序，同时可以从精选、大家喜欢、颜色，大小，图标等方面区分更精准。

话说商品详情页是用户从首页到进入商品详情页的第一环节，产品设计者最主要的是清晰用户画像，精准呈现用户希望看到的内容。

第五:产品详情页

用户需要对某一商品进一步了解时，点击进入商品详情页面，该页面包含了商品的全部必须信息。

此页面为了崔进用户点击购买转化率，除了包含商品主图、购买说明，颜色选择、尺码选择、数量选择、价格、邮费、购买按钮外，还应该加些感性介绍，例如：告知用户这件衣服的穿着风格，和什么什么搭配、适合穿什么鞋，背什么包，适合什么场合等等，通过不同的思维路线，帮助消费者远距离理解一件商品。同时设计的还有其他已购买用户的评价，因为用户的评价反馈更为真实和具有价值参考，这也是当下社群化电商之所以逐渐兴起的原因。用户是否愿意购买的关键在于产品的详情页。

最好还有商品的关联推荐，里面是和本商品类似或者相搭配的商品，给用户更多选择机会，以传达给用户的感知是本站点商品丰富专业度高的信任背书。

商品详情页设计Tips：

产品设计者应再次深度了解产品内核要传达出的用户知感点。是美食、是内衣、是运动还是二手精选

展示图不宜过大或过小，图片的面积、数量形式方向要保持视觉的平衡，且要让用户哪怕是无意间触发都会有种一切尽在自己控制之下的效果。

产品导航，用户已经浏览路线较深，用户越不知道自己在哪个界面，所以产品导航跟随可以帮用户定位，方便用户才是用户喜欢的设计。

商品详情页面不宜过长，用户的耐心总是有限的，用户消费总是感性的冲动的，所以设计长度适中的商品详情页，即让用户了解了商品关键一面，又不啰嗦，控制长度是用户点击 购买按钮的关键。

第六：内容化购物页板块设计分析

内容化购物页面，具有媒体属性，是垂直导购网站最具有特色的板块，内容多为时尚垂直资讯，即解析当下潮流的图文，比如：普世化的价值观的解析来攫取用户的关注，通过分析某个垂直领域的用户想要的内容，而用户有没想到的内容，内容产品设计者可以在此寻找到一个衔接点，告诉用户去哪里吃美食，买什么样的衣服，戴什么样的配饰。

同商品列表以及商品详情页一样，垂直化内容页面设计也具有两级页面，一是所有媒体属性的专题内容聚合页面，一是某一专题内容详细页面

内容化列表页面设计Tips：

• 一、首先区分不同的内容，大大小小的专题和资讯，和商品一样，更加横向纵向交叉分类，商品可以按照款式，价格，颜色等分类，资讯则是按照时间，关注热度，以及资讯内容等，和商品不同的是，商品图的构图较为统一，而资讯的封面图则参差不齐，很难想成统一视觉效果，因此关键点事将不同的资讯形成自己的区域，做好区分。例如：不同的内容的背景色有适当的变化，或者分为几大块儿，每块相对独立，但编排上有规划感。
• 二：内容展示要有针对性和热闹性，内容应包含：标题、概述、封面图、评论数、点赞数、以及浏览量，营造热闹的氛围同时封面设计传达文章主旨，以能引发好奇心或者用户共鸣。

内容化详情页设计Tips:

从内容列表页进入详情页之后，主要分为两类，一类是类似微信订阅号推送的图文形式，另一类则是像时尚杂志的精致排版。前者主要适用新闻性属性、内容介绍性、及对商品自身的价值及周边价值的内容介绍为主，辅以商品属性介绍。后者主要适用于模拟用户生活场景、专题性，场景性购物推荐.

Tips ：产品设计者首先应细分内容，将不同的场景分成不同的专题，越细分，总结性越强，导购的作用越具有吸引力。

而且内容场景关联路线要清晰，从设计上帮助用户进行整理，降低用户学习难度，能够使用户快速了解专题。

第七：品牌展示页

罗列所有入住该站点的品牌，有利于增加站点的信任背书，

设计Tips：品牌页一般根据品牌数量决定预览形式，由多到少会选择，品牌名称预览>品牌LOGO预览>品牌简介预览的顺序进行产品设计。数量较多的也可以选择三种方式结合的方法，以热门程度从高到低进行排列，目的是方便用户筛选。

第八：产品设计的个人页面部分

主要包含个人主页、个人基本信息、个人收藏信息、关注、订单交易记录、社交记录等版块，此类页面设计心得是做到理性和人性化，理性方面：当用户决定购买，加入购物车或者选择立即购买，因此购物车页面，购买信息填写页面，付款页面等，均属于强调理性，功能化的页面，但是来到个人中心页面之前所浏览的商品，点赞过的商品，关注过的人等用户的足迹要及时推送给用户。因此在设计个人中心页面时，要强调个人的归属感、安全感，因为这里汇聚了用户的“人财物的信息”。

综上所述：通过对主要页面的分析，当今比较火的设计趋势有二：一是展示型，例如，首页首屏，商品列表，商品详情，媒体性咨询、专题内容等。这类页面的设计主要是通过感性设计使得用户容易找到 ，从而产生猎奇心理，进而到达下一级页面。另一种是功能性页面，例如：社交和社区的构建，个人中心页面，这类页面需要功能归类清晰，并使得用户操作学习成本降到最低，从而产品具有安全感和归属感。

无论哪种产品设计思路，都需要产品设计者读懂所针对的用户画像，深刻了解用户对何种内容感兴趣到通过社区留下用户，然后通过交易功能的设计带来高转化率的效果。

作为从零到一策划设计过不同产品的我来说，主要想通过此文获得对产品设计和产品运营有独到观点的人交流。（微信号：Line15201991967,邮箱：firstproduct@163.com）

本文由 @lianshilu 原创发布于人人都是产品经理，未经作者许可，禁止转载。