最近C端开始新一波的作品集输出了，移动端首页就是其中的重要设计页面，那么今天就来聊聊最新的移动端首页设计方向和框架设计方式。

移动端主页，通常是项目中最先开始设计的页面，也是项目视觉中最重要的页面，它的效果，会直接影响观看者对该项目的第一印象。

所以今天，我们围绕当前的移动端主页设计趋势，来分享主页的设计要点。

移动端主页的认识

移动端的主页虽然指进入应用后（登录后）看到的第一个页面，但这个页面的内容、类型并不是完全一致的，不同应用会采用不同的主页类型，比如OA软件展示近期任务、证券软件展示自选股、社交软件展示聊天记录、番茄应用展示倒计时等等。

而我们今天聚焦的主页类型，是信息聚合型主页，会聚合大量的信息和模块在首页中展示，也是目前中、大型应用中最常用的首页形式。

从产品角度上说，这类主页通常没有独立的功能，它展示的内容基本都属于下级模块或其它页面。比如一个电商主页，有秒杀、团购、商品、社区的信息展示，但这些功能全部有各自专属的页面，首页只是引用它们做展示而不会被归属到它的下级。

这些应用之所要做主页，就是因为它们有非常多的服务、功能、页面，必须要给用户一个进入的方式，而首页就是一个枢纽，以更有效的方式展示这些内容引导用户点击。否则它们的入口太深、太隐晦（比如隐藏的侧边栏），就很难被用户发现和使用。

再换个角度理解，首页就是应用内的流量分发器，假设每天有100W用户进入首页，除了让它们能方便的找到想要的服务外，还要尽可能引导他们停留，触发更多的点击。一个优秀的首页，就可以让应用产生更多的流量和数据，提升商业的收益。

首页的重要性是不言而喻的，而一个优秀的主页除了由产品经理提供底层需求外，也非常依赖设计师的构思和执行，需要设计师能自己围绕产品和体验提供更好的设计方案。

所以在大厂的项目展示中，首页的设计往往会被重点展开，分享背后的设计思路与想法。它也是在面试环境中，会被重点提问并作出解释的页面。

对于首页的设计，我们可以总结成两个方向，一个是基于产品、体验角度出发的对框架布局的规划，另一个则是在品牌视觉性上的设计与创意。

只有两者共同结合，我们才能提供有说服力的设计成果，下面，我就分别展开对它们的思路分享。

主页常见的框架解析

首页的布局是一种从上到下排列模块和信息的过程，这是由手机竖屏的展示特性决定的。而要学习在项目中如何排列它们，就要从最常见的做法开始。

国内移动端产品中最常见的主页框架，就是下图案例所示，包含顶部栏、轮播图、快速入口、瓷片区、不同展示模块、信息流、底部导航的模式。相信已经有丰富APP使用经验对这种布局形式一定不会陌生。

我们还要理解这么做背后的成因，顶部栏通常用于放置搜索栏，以及扫码、消息等图标，如果要聚合多个页面或提供不同分类的切换，也会在顶栏上添加分页标签用于切换。这是个功能性组件，比较容易理解。

而轮播图的存在主要是因为产品会有大量的运营活动或商业广告，通过轮播图的形式可以比较快速、直接的展示较多的内容。

再到快速入口和瓷片区，很多人会有分不清它们的问题。快速入口可以理解成就是个简单的图标+文字组合成的按钮列表，会罗列4-20个按钮不等，它们会链接到产品的核心功能与服务，是用户带有明确目的性时会去点击的对象。

而瓷片区则是一个展示模块，它会像商店橱窗一样对下级内容进行露出，引导用户点击。

这两个模块经常一同出现，快速入口是被动型的模块，被动让用户查找并点击。

而瓷片区则是主动模块，通过主动展示能吸引用户的内容（商品、折扣、服务）吸引用户点击。这两个模块往往共同出现，因为它们既要满足用户本身选择功能的需求，又要立马让用户看见最有吸引力的内容。

再往下的信息展示模块，就由产品需求决定了，不同产品类型和场景会放的内容就各不相同，可以是专题，也可以是排行榜，还可以是内容推荐、用户展示等等。 

最下方，就是烂大街的信息流了。这类信息流通常可以无限向下刷，本意就是想让用户沉浸到信息的海洋中不能自拔，实现更长的停留时间。

这种布局从内容表现上非常的丰富，八面玲珑，理论上可以满足各种需求，实现不同的引流目标。但是，这种做法已经慢慢跟不上时代的发展与变化了。

最直接的变化就是，用户的注意力越来越难在一个应用内停留，一个如此“丰富”的首页其实很难让用户的注意力聚焦，更难引起他们的关注与兴趣，吃力又不讨好。

所以越来越多的大型应用，开始变更首页的设计策略，比如淘宝，原本首页有大广告位以及数十个模块，如今移除顶部轮播图，缩减模块数量，直接将信息流提升到首页就能看到的位置，等于直接鼓励用户在首页就开始刷信息流。甚至支付宝也按这种模式优化（之前的版本下面有4、5屏不同模块的展示没有信息流）。

也就是说，单纯在首页堆内容的做法已经过时了，首页要的模块不是多，而是 —— 有效。只有能让用户快速感受到价值或被吸引的内容，才是好的内容。而信息流是在图文、短视频内容盛行的当下被验证最能吸引用户的内容。

但所有信息聚合型的首页只能往这个方向做吗？当然也不是，还有一部分应用的首页依旧适合排列较多的模块，那就是重内容型的产品，比如音乐、阅读、播客、新闻等。

因为这类应用包含了大量的内容数据，用户进入这些应用就有探索的需求（找歌、找书等），所以首页可以创建不同的模块用不同的形式来推荐内容，比如音乐应用中的榜单、最新、猜你喜欢、官方歌单等等。这种丰富的推荐形式是符合用户探索需要的，而不是每个模块都是独立的功能和服务，这样用户就完全提不起兴趣。

了解完常见的主页布局形式，下面我们就可以进一步展开首页的布局思路分享。

首页布局中的思考维度

首页会放什么模块是由产品需求决定的，而我们要做的是对这些模块进行“布局”。而设计布局的思考主要围绕两个要素，简单概括起来就是 “用户想做什么”、“我们想让用户做什么”，我们可以把前者想成是体验因素，后者想成商业因素。

这两件事往往会是冲突的，因为一个商业应用不会事事体验优先，必然会有一些商业决策从一开始就是破坏用户体验的（比如运营活动）。所以设计首页往往不是应用一套统一的思路来完成，而是分解成不同阶段、模块、维度，并结合它们自身的诉求与场景来做决策。

所以下面我们就来讨论几个比较重要的分析对象：

1.模块的顺序

第一个问题，就是模块的顺序。模块的顺序制定是根据内容优先级来决定的，越重要的模块，就越要放到前面，越次要的则越往后。

前后顺序是基于对模块理解决定的，也就是每个模块你要构思它们的体验和商业因素中的权重，这本质上是对决策收益的预判，哪种做法产生的收益更大用哪种。

比如很多应用顶部会放广告轮播图，但不代表你的应用也要那么做。比如你认为在当前场景中顶部广告图虽然要做，但是根本没有有吸引力的内容不会有多少人点，还会直接干扰用户的正常使用，就可以选择把它移动到其它位置去。

具体的思考着力点多种多样，但一定要符合逻辑。即使可以引用数据，也只是辅助我们对思路进行佐证，不能指望靠数据做决策却无法回答背后的原因。

2.模块的占比

第二个问题就是模块大小的占比。这和模块的内容、权重正相关。理论上模块内容越多、越大，它的占比面积也就越大。但这都要考虑模块权重的高低，有些内容即使很简单，但因为展示的权重高就会放大，有些内容很复杂但因为权重低，就会想办法缩小它。

权重的大小也有体验或商业因素决定，这个东西是不是用户非常想看的，或是商业上非常重要需要突出的。而不同模块之间也有权重差异，不可能完全一致，需要我们在视觉上得到体现。比如首页中会出现多张广告图，而它们就有不同的占比面积。

3.首屏的内容

信息聚合型的首页通常会有多屏的高度，而最重要的部分就是首屏内展示的内容。这里就同时涉及到模块顺序和占比的考虑，也就是越重要的模块就越会直接出现在首屏内。

但同时，首屏设计逻辑也会非常注重“引导性”即让用户愿意往下滑查看后面的内容，而不是所有该做的吸引人的东西都在首屏放完了，他们就不会再往下看了。

所以首屏设计中需要出现被截断的内容，且这些内容是具备一定吸引力的，信息流应用的就是这样的逻辑，但不代表你的应用中也要这么做。应该放哪个模块就要根据你当前的场景自己做决定了。

4.模块的形式

最后一点，就是模块的展现形式了。不管首页展示的内容是多还是少，都要确保不同模块之间的布局是由显著的差异的。形式上过于接近的模块不仅用户不好识别，设计出来的结果也会很枯燥。

比如有的模块是图片背景上面放文字的，那么别的模块就可以不放图片或减少图片比重。有的模块如果是横向滚动的列表，那么临近的模块就不应该再用横向列表可以使用纵向列表和它做出区分。

模块的差异可以形成视觉上的“律动”，是鼓励用户向下探索的动力之一，千篇一律的内容只会阻止他们产生更多的好奇心。这也是主流应用中组件样式变化越来越大的理由之一。

以上四点，是我们思考首页模块布局的主要决策依据，先熟练了解和掌握它们，就可以在实际项目中应对更复杂的情况与挑战。