【基础界面】C.首页（Beta）

我理解的首页？

在理解到App的导航模式之后，我们开始对一些公共界面做一些总结以供探讨，从首页开始。

首页，是每一个App都必不可少的界面，且在用户每次进入时呈现，承载了App与用户关系的所有信息入口。有些首页一屏可以显示全部内容，而也有些首页可以让你滑动一天都翻不完。所以我们要提到一个“首屏”的概念，来凸显首页首屏的重要性。

首屏：首页初始化完成后首次占满屏幕并呈现给用户的界面内容，属于App主动推荐的行为；是产品一级功能入口和重要运营位、Banner的显示区域。

非首屏：需要从首屏位移滑动才可以将其展示在可视区域的内容，多为用户触发行为；多是二级、三级功能或基础信息流内容。

首页主要有哪些类型？

1、Banner

Banner也就是广告运营位，一般设计在页面顶部并有轮播放映效果，2-3秒/次。这里主要有三点考虑：

从视觉流角度看，人们浏览时通常是从上到下从左到右到，图片和动效会打乱这一规律。也就是说，顶部轮播的Banner会首先被用户注意到，用漂亮的Banner迎合用户视觉的同时还能刺激用户到参与感或者盈利，何乐而不为呢？

从大屏下的操作现状来看，顶部Banner是处于拇指的易操作区域之外的，并且随着屏幕尺寸越来越大用户越发不便于点击这个区域，也就是说首页顶部区域的功能价值是在降低的，所以不妨用Banner来美化这个区域，把易操作区域更多的留给一级功能。

从美观度上，顶部Banner的轮播效果能给人以视觉刺激，且配色相对于界面的功能层面影响较小，给设计师发挥的空间更大。而在其他位置的Banner都应当非常注意Banner图的配色设计，以弱化由此影响到功能的传达。

通常的做法就一定普世正确吗？未必，渐渐的人们发现Banner置顶的设计并不适合工具类App，所有界面的设计一定是功能优先，信息层级正确的情况下，先保证好用再考虑是否美观和其他。

Banner通常展示短期有时效性的商品推荐、优惠活动等，需要经常更新和排序。

2、一级功能

一级功能即核心功能，是产品存在的基本意义，承载用户80%以上的需求和时间。

产品功能比较单一的，首页的设计可以围绕这个单一功能的使用流程来进行。如打车软件，用户使用打车软件的场景和任务是非常明确的，打开App就是要尽快叫到安全便宜的车，围绕打车流程设计的首页无疑是最高效的，Uber深谙此道并给出了近乎完美的答案。

产品功能丰富或业务多元的，比较通用的做法是给不同业务以同级入口，同级的之间的排序以战略、规模、流量等多维度综合决定。

3、运营位置

确切的说，Banner也是运营位置。不过有些产品属性是运营导向的，生活服务和电商都是比较好的例子。不定期的优惠、活动很多，并且有部分是需要长期固定存在、重要性很高的，以至于Banner无法满足这类需求，所以首页固定的可配置的运营位置就显得比较有意义了。首页开辟独立运营区域的好处主要有两点：降低用户获取信息的成本、提高在线时长增加消费机会。

4、二级功能或新功能

有人说，一个好的首页是不需要有二级功能的，同意。

当我们也常常看到一些App首页中既有一级功能也有二级功能甚至还有些新功能，这是为什么呢？主要有两方面原因：导航模式的先进性和新功能的重要性。

首页是依附于导航模式的，一个好的导航设计是满足现在且面向未来的，可拓展的。那么当产品在不同地区能够提供的服务是不同，或当前企业发展阶段所能提供的服务有限时，在一个比较有拓展性的导航结构下并不适宜，这时候需要有二级功能或新功能来暂时填充这个导航。如易到用车。

顺便说一个反例，滴滴出行；估计很快要有调整。

‌

5、主要内容信息流

在保证首屏重要位置已给到一级功能和运营位之后，我们要考虑的问题是能否更充分的利用用户的滑动习惯、视觉余光和完成任务后的闲暇时间。

有了这个想法之后，你自然会考虑到把产品的基础信息呈现在首页非首屏位置，让界面显得更丰富。这没有明显的不好，但个人认为所有放在首页中的内容都应当是产品最重要的信息，必须是有运营机制的内容。如果要把基础内容信息流设计在首页中，那么顺便也把首页总长度设计在3屏，并且支持预加载吧，这样会稍显得人性化一些。

首页设计的趋势是什么？

有些App是有两部分内容构成的，或者说是同时充当两种职能：工具和媒体资讯。这类产品首次给用户展示的“首页”是不固定的，是区分用户场景或用户级别来提供内容并展示给用户不同界面的。典型的如音乐类App，同时作为音乐播放器和媒体资讯平台存在，当用户有网络的情况下，呈现给用户媒体资讯界面，当用户没有网络的情况下，呈现给用户本地音乐文件界面。

‌‌

此外，随着云、大数据、账号体系的不断融合发展，个性化首页也将会日益普及。今日头条／网易云音乐等都是比较好的例子。

至此，感谢自我回归。

好久没有写东西，比较水的部分请自行略过，我会在后续的文章中慢慢把自己榨干的；见谅！

Openself

2015.10.26