最近在评审稿子的时候，好几次因为首屏的利用不佳而打回修改，比如首屏头部太空、没有充分利用，或者首屏信息太满太杂乱、可能让用户看不懂等等。

今天就想来分析下，首屏需要达到怎样的设计目标、设计时需要注意哪些关键点来达成这些目标。

首屏的设计目标

这里的首屏是指，打开一个页面，无需进行滑动操作就可以看到的、第一屏的内容。

首屏的设计对一个页面，尤其是是新产品或者活动宣传来说，至关重要。它影响着用户对这个页面乃至整个产品的认知，用户要对产品建立起认知之后，才有可能对产品产生信任与价值认可、产生后续的转化。

通俗点说，滚屏交互虽然简单，但还是有一定操作成本的，首屏内容必须给用户足够的动力，让用户对滚屏后可出现的内容有一定预见和期待，才会滚动查看更多的内容。

首屏设计的目标有三，循序渐进。

第1点，需要让用户能够快速地感知到这个产品/活动是做什么的。比如是在线观看视频的产品，或者是优惠活动页面等等，总之要有一定的认知度，要通过页面结构和细节元素的设计，让用户感知到产品的功能范畴。

第2点，首屏要让用户快速的感知到产品/活动的基本结构、内容范畴。比如这是一个专门看美剧英剧的视频App，或者是购社科类书籍满减的活动等等。

这两点其实都在唤起用户旧脑中已有的认知模式，如果一个新的产品页面可以让用户感觉到，”啊~它跟某某产品是类似的“，”啊~我知道这个icon是代表这个意思“，那么就可以让用户很好的建立起它是做什么的，它能提供什么内容这样的认知。

在此基础上，第3点，首屏还要告诉用户，为什么要选择这个产品。比如上面新电商产品的例子，同样都是电商产品，为什么不选择京东淘宝而选择这个产品呢？这就需要在首屏就传达给用户的。

第3点是最难的一点，其实是要调动用户的新脑，让用户建立起一个新的认知，认识到产品的差异化价值点，从而抛开其他的竞品选择它。

那么我们接着再往下看，在设计时如何完成这3点目标呢？



第1点：我是做什么的

做好这一点，需要在功能架构设计、界面布局以及文案配图等细节上通盘考虑，明确传达产品的功能定位，不让用户困惑。

比如网易云音乐的首屏：

金刚区展示了每日推荐、歌单、排行榜，中部展示了精选歌单，下方展示了个性化推荐的歌曲，很好的诠释了「为你推荐好歌的音乐播放软件」这样的产品功能定位。

再比如马蜂窝旅游的首屏：

上部展示了攻略和订酒店、机票等入口，此外绝大部分页面空间用来展示景点视频或者文章、直播的首页。这些内容很直观的传达了产品的定位——服务用户的出行旅游，包含了吃、住、行、玩等方面。


总结来说，设计时要做到：

1、分类清晰，并列信息、父子级信息之间具备严密的逻辑关系，能够给用户讲一个完整的故事或者传达完整的价值观；

2、有鲜明的视觉风格，迎合目标用户的喜好与诉求，尤其注意品牌元素的合理露出、banner轮播图等视觉冲击力较强区块风格符合品牌认知。



第2点：我有什么内容

这一点的含义是，通过导航、模块标题、默认展示内容、运营区块等等，让用户快速了解产品可以提供的信息内容。

比如小红书:

首屏除了底部的一级导航，顶部的logo、二级导航和搜索框，页面中只放置了4个内容卡片。导航展示了产品的功能范畴是笔记+商城，解答了「我是做什么的」这个问题。

而卡片内容其实另有玄机——我开关了几次App，发现这4个卡片的内容，一般都会有1~2个美食类的、1个健身类的、其它的是关于穿搭、明星、或者美妆护肤的。这其实是产品想传达给用户的、产品中已有的笔记内容范畴。并且通过卡片中的大图或者视频，直观地展示出来。

总结一下，首屏中要选择尽量直观、有冲击力的方式，来展示产品或者活动中涵盖的内容。同时要通过推荐策略，让用户尽量能够看到产品的内容全貌。

同时要注意，设计师要把握自己说不的权利。

比如商务或者业务提出要在首屏重要位置，放置与产品调性不符、或者用户难以理解的内容时，设计师要果断 Say NO。比如原本的旅游服务产品要放做美食的技巧，原本音乐播放器要放贷款……

如果这类内容真的不得不上，也一定要打上「广告」等标签，最好支持关闭此内容或此模块，从而告诉用户——这块其实跟我们产品没有联系！我们是个纯纯粹粹的XX类产品！



第3点：为什么选择我

要做到这一点，对于产品设计来说任重而道远，但总的来说一定要做到，在首屏有能够打动用户的信息点。在极短的时间内能让用户感受到产品的价值。这样才能在众多精品中脱颖而出，让用户选择「我」。

比如盒马：

在头部轮播图、金刚区icon、瓷片区以及其他运营位，均使用高明度的实物图片素材，整个首屏页面营造出一种轻清亮、灵动、鲜活的感觉，容易让用户对盒马售卖产品有新鲜、效率高等印象。可别小瞧了这一点印象分，很有可能就是用户选择盒马并长期使用的原因。

再比如拼多多：

首屏中秒杀、现金、赚大钱、补贴等文案或标签，标红突出展示的价格，几乎是手屏正中间的百亿补贴模块，无一不在说着「我是真的很便宜呀，快来买我吧！」

总的来说，设计侧要高度配合产品运营策略，比如在首屏明显位置的焦点图、瓷片区或者浮窗，展示极具诱惑力的优惠，或者是差异化别处无法获取到的内容、功能、体验，都可以成为用户选择并长期使用的原因。



划重点

本文分析了页面首屏设计的关键目标及设计要点：

第1点，要通过功能架构设计、界面布局以及文案配图等细节上的通盘考虑，让首屏具有鲜明风格与严密逻辑，明确传达产品的功能定位；

第2点，在导航、模块标题、默认展示内容、运营区块等位置，结合直观的表现形式、全面的推荐策略，让用户可以快速了解产品的内容范畴；

第3点，在首屏就要「放大招」，要有能够打动用户的信息点，如优惠、稀缺、高效等，让用户在极短的时间内能让用户感受到产品的价值。



参考引文
《用正确的「姿势」 抓住用户的视线－首屏效应》http://suo.im/61l9zE
《怎样理解“首屏聚焦原则”？》http://suo.im/5TOWO9
《APP点评100篇——第9篇：「网易云音乐」APP分析》http://suo.im/5E2jL2
《APP点评100篇——第90篇：[苏宁]金融产品分析》http://suo.im/5LyxfH



本文原创，未经作者允许不可转载！
更多内容，欢迎关注作者微信公众号：海盐社！