UI设计－首页解析
UI设计中的首页设计是最重要的一个页面，首页承载的内容很多也很复杂，是给用户传递产品气质的首要页面；首页也是整个app的风格定向和规范定向。在做首页时需花费更多时间在首页的各板块的细节上，而不仅仅是关注首页的视觉呈现。
一、首页常见组成部分
根据《UI设计规范与控件的建立》，首页常见组成部分分为下面这些部分，设计规范也是根据首页的设计开始创建的。
首页组成部分
二、首页细节拆分
对比不同行业app的首页，会发现不同首页的布局其实大同小异，都有着流量分发的作用
不同app首页
市场中不同行业的首页都略有不同，但通过分析会发现都差不多由下面这些“星辰大海”组成。逐一突破每部分的的设计细节，我们设计首页就会得心应手了。
首页的星辰大海
1.基础布局
基础布局中我们要想好我们首页的布局结构是怎样的，并定下基础部分的视觉规范，比如背景色、分割线、上下模块间距大小等。
58同城的首页的布局可以分为5个板块，顶部导航条（需要考虑首屏与下拉两种不同场景）、卡片1、卡片2、新闻资讯列表流与tab栏。在做设计时需要定义好最基础的视觉规范。
58同城布局拆分
从背景层、内容层（卡片式的内容）进行细节拆分，这样能注意到每一个设计细节，不遗漏。首页的基础规范会一直沿用到其他页面的设计。下面拆分了58同城首页的背景层设计规范
背景层设计规范拆分
❤设计tip
1.分割线常用色值：E8E8E8;背景色应浅于分割线颜色。
2.要减少页面分裂感。可使用大留白来代替灰色板块分割；用灰色板块分隔不宜太深，常用色值F2F2F2,F4F4F4。
2.文字
文字是用户易识别的元素，通过文字层次的区分来体现不同内容的重要层级关系。文字层次的三种体现：
1.字体粗细（字重）
2.字体大小
3.字体颜色
文字层次区分
❤设计tip
1.数字类字体使用DIN、IATO、DOSIS字体会更精致
英文字体资源分享：https://pan.baidu.com/s/1G531L3ibvbUnj9gUEItfug
2.学会设置行间距，会让文字看起来更透气也更易于阅读。行距常为字体大小的的1.5倍-2倍。
3.颜色
对于颜色方面，除了文字常规颜色，最重要的是确定产品的主色，辅助色。首页确定好这些颜色后，会一直沿用在后续所有页面的设计中。对于主题色的确定，我们常用情绪版的方法论进行确定（情绪版办法论见《UI设计方法论》）
从原生关键词出发，头脑风暴出不同的衍生关键词。通过这些关键词从抽象与具象两方面进行图片收集。通过高斯模糊，gif提色等方法提取主要颜色。
使用情绪版确定主色
❤设计tip
1.通用按钮做成品牌色
2.特殊按钮需考虑用户情绪使用颜色
4.标签
标签的作用能让信息更突出，也能使信息更精简。
美团标签应用
❤标签设计tip
1.标签文字大小常用22px，标签高度常为30px－34px；
2.左右边距常设置为8px，且是上下边距的两倍；
3.标签字体略粗于正文字体
标签常见设计规范
5.导航栏
对于导航栏的设计还是得按照各平台的设计规范与自身产品特点进行具体设计。导航栏设计时需注意这3个要点：1.图标大小；2.文字大小；3.背景色
❤标签设计tip
1.选择地址＋搜索框＋图标类导航
■地址选择文字建议为30px。字间距为0；可根据具体情况用常规、或者Medium字重；
■选择下拉箭头图标描边用2px，或者3px；箭头图标大小为20x12px（都是经验型数值，可根据产品特点进行调整）
■下拉箭头与文字间距一般采用10px；但是可以根据五分原则进行间距选择，保持为偶数即可
选择地址＋搜索框＋图标类导航
2.两边图标＋中间搜索栏
设计图标大小时，应用图标盒子进行设计，将图标分为设计内环与外环，通常在导航栏处的图标内环（实际图标大小）为36px，外环（可点击区域）为44px－48px。
注意图标设计规范
3.有背景色的导航栏，弱化时搜索框调整为10%的不透明度，突出时100%。
b站搜索框处理
6.首页图标区
上一篇文章《图标设计规范（面性与线性图标）》里面都有详细讲过。
对于金刚区图标设计要点：
■内图标与底板保持一定的呼吸感
■图标的色彩保持四色原则与饱和度统一、渐变统一
■简约挖空
金刚区图标
列表流图标设计要点：
■上下间距保持一致，左右间距保持一致。
■图标略高于文案
■业务属性相同的图标色彩上保持一致，图标的视觉处理保持一致
■图标简约
列表流图标
tab栏图标设计要点：
■利用网格盒子进行设计，确保视觉大小一致
■tab栏图标大小应根据iOS、android不同界面尺寸设计规范进行调整
图标盒子
图标栅格系统资源分享链接：https://pan.baidu.com/s/1ak0Fjz2XwerfRZwQjtpl4Q
标题栏图标设计要点：
■上下间距保持一致，左右间距保持一致。
■图标略高于文案
■业务属性相同的图标色彩上保持一致，图标的视觉处理保持一致
标题栏图标
7.UGC头条
对于内容资讯设计板块，不同的app这一部分几乎都一样。由文字标题、标签（可以没有）、内容组成。
UGC头条
❤设计tip
■标题文字字体设计：用一些刚劲的字体进行设计变形处理。我会在字由中选用一些粗黑的字体，再在ai或者sketch里面进行变形处理，让字略倾斜、拉长一些。在字由上我们能很方便的找一些字体，在ai、ps、sketch里面能直接应用，不需要下载。（一定注意要变形，不要直接用侵权字体）
推荐－字由
■这里的标签处理相比于普通标签一定要更透气才行，内容文案从千人千面的角度去考虑吸引用户
8.列表板块
对于列表流表头的处理可以多下一些功夫去设计，让用户迅速的找到心仪板块。
表头处理
首页作为整个设计中最复杂的页面，需要去关注很多设计点。在做首页时，想好首页的整体布局，并归纳收集基础部分、组件、图标、模块出现的场景，从而进行设计规范的定义。首页做得越细，规范整理得越详细，会帮助后面的页面设计更高效、流畅。
android设计规范网站：https://material.io/design/
iOS设计规范文档网盘连接：https://pan.baidu.com/s/1bfrN51mpNpbCimb4ILZ_CA
