一、首页的作用

首页的主要作用是进行流量分发，让用户能够快速进入到子入口，所以功能入口做的很明显，图片也做的很大，有很多瓷片区的版块。

二、首页细节拆分

1、首页细节拆分可能设计板块

首页可能涉及到的三大板块

2、基础

（1）基础布局

基础布局包括 背景层 + 内分隔区 + 外分隔区，有时候会有点击态颜色；

比如微信的“发现”板块，背景是灰色偏蓝的，内分隔区是“朋友圈”、“扫一扫”这些区间，外分隔区是内分隔区相间的区间。

微信的“发现”板块

（2）字体

字体可以根据实际情况来，一个页面出现的字号最好不要超过四种，涉及到金额数字的字体，可以参考微信或者京东在数字金额方面的字体；

美团APP字体样式参考

（3）颜色

颜色的使用场景主要是4种，文字 + 按钮 + 背景色 + 分割线，提示框/标签内容用柔橘色，警示框用红色，其他根据整体风格来配色；

美团APP颜色搭配参考

（4）标签

icon高度是30，宽度根据字体个数来定，字体间距6px来保证呼吸感，边上的字离边框也是6px,圆角矩形设置为2px。同时为了设计更有质感，可以对字体进行设计，比如 “买 + 闪电图标” = 买；

标签高度一般是30px，字间距6px，左右两边6px,圆角矩形2px

3、组件

（1）导航栏

导航栏的基本功能是 原生的，需要快速迭代的内容是 i 版的，icon一般是 42×42，不过设计切图的时候是48 × 48；

42px

（2）输入框

输入框页边距一般是24px，方框的圆角一般是6 和 8 ，按钮的圆角一般是8和10；

输入框

（3）UGC头条

主要是为了让客户增加对工具类产品的粘性，让用户有动力回到纯工具的产品中；

（4）列表版块

列表分为表头、表内容和表尾三个部分；

列表样式 表头 表内容 表尾

4、图标

首页图标区

如果使用微信头像登录的，就是微信头像。

图标

三、示例评论

示例评论

1、基础：

基础布局：割裂感太强，总共有5个外分隔区 

文字：字体的色彩偏向需要结合实际情况进行润色，数字金额字体包不太好看，可以参考京东、微信账单支付页面，最好不要超过4种字号；

颜色：蓝色的底色目前稍微有点沉闷，第一排三个颜色饱和度不够，标签的呼吸感太强（一般是6px）。

2、组件

导航栏的头像比搜索框要大，实际过程中应该是差不多大的，高度也一致；

输入框图标比字体到，输入框图标离字体的距离也过大（一般左边是10px，右边是16px）；

UGC的“更多”可以用图标来代替，或者加一个图标；

金刚圈图标，第一排全是面性，下面是线性，有的是原型，有的是方形；列表图标也没有统一（账单、预定有，房东故事没有），租约的图标挖空太复杂。