杭州UI设计学习|快速入口的设计要点

　　1.布局方法

　　①页内等分

　　等分快速录入可以表示为(1~3)行×(4~5)列的矩阵，也有6列(起点选择页面)，但不常见。

　　在设计时，我们优先考虑确定每个背景视图的大小。怎么会？首先，是宽度。单个视图的宽度并不重要。重要的是总宽度，也就是390减去页面两边的页边距(页边距不固定，根据实际情况设置)，然后用这个值除以列数。这是背景视图的宽度。

　　高度应该根据图标和文本区域的总高度来确定。例如，图标(包括安全区域或几何背景)为44×44pt，文本部分12pt的默认高度为17pt，图标与文本之间的距离为4pt，上下边距为8pt，因此视图的总高度为44+17+4+8×2=81pt。

　　当然在身高这一项，上下间距更独立。也可以选择留较小或较大的间距，从视觉上调整矩阵的紧密度，尤其是多行矩阵。你需要多注意上下排的距离，会影响观感。总之一切以设计师所期望的视觉效果为准。

　　②滚动超出范围。

　　虽然大部分平分的词条矩阵也可以采用多页滚动的形式(淘宝，JD。COM)，我们这里说的越界滚动，更接近于滚动卡片的非等差形式，会在最右边界切割，比如网易云和Keep。

　　在这个布局中，我们需要优先考虑图标之间的间距，将其调整为折叠以上4到5，默认暴露下一个图标的一部分。最左边的图标可以与页面元素的其余部分左对齐。

　　③主辅布局

　　有些app需要更清晰的区分入口的权重，所以会使用强弱对比的主入口和辅助入口。主门户和辅助门户属于同等范畴。两个入口的背景视图可以是不同的高度和宽度(支付宝)，也可以是相同的高度和宽度(马蜂窝)。

　　在实际设计过程中，两类入口的背景视野面积可根据等分原则确定。

　　2.视觉形式

　　①图标/文本

　　我们日常生活中使用的app，大多采用上图下文的视觉形式，具有更普遍的适用性。

　　②卡片形式

　　上一篇文章在磁贴区提到，有些快速入口会像磁贴区一样做成卡片拼贴，指的就是下图这种视觉形式。

　　卡片形式的入口对平面设计能力要求很高，尤其是权重最高的入口。由于快速入口只能使用图形来装饰内容，为了配合这些入口的权重，设计师往往需要绘制比一般图标更高精细度的插画，所以我不建议初学者尝试这种风格。

　　③主辅形式。

　　不同类型的图标通常用于在对应于主布局和辅助布局的视觉形式中表达不同的权重。权重较高的图标通常使用更复杂的插图图标，而权重较低的图标则使用基本的线性、平面或线-面混合图标。

　　像支付宝、美团这样的app反而用最简单的线性图标来表达功能的核心和基础；重量使用不同的背景颜色进行物理区分。

　　3.图标类型

　　①基本坡度

　　通过在基本图形上添加相同色调、不同明度的渐变，可以做出一组简单而足够的快速入门图标。虽然不适合风格化很强的App页面，但是比它的多功能性要好，无论是首页还是个人页面都可以使用。

　　②几何背景

　　意思是图标有纯几何背景，有圆角矩形或圆形，而实际图标一般用纯色或渐变。这类图标的好处是更容易统一视觉大小，而且由于实际图标不需要过多的装饰，设计起来也更简单。

　　然而，几何背景图标有一些高级的变体。背景可以做成不规则的形状，更多的细节(甚至3D)可以添加到图标上。总之可以把它们做得很花哨，比如美团外卖的入口图标:

　　③颜色重叠

　　因为图标中有两个重叠的部分，所以这个部分比较暗。这类图标本质上和渐变是一样的，是一种颜色应用的手段。但是重叠图标很少使用，所以相对来说更容易识别。

　　④平面插图

　　在图标中直接使用插图，自由度更高，同时风格化更明显，非常有利于品牌风格的塑造。唯一的缺点就是对设计师的要求比较高。举例来说，平坦或微梯度都是可能的。前者更容易表现场景，后者则倾向于更立体的观感。

　　⑤玻璃拟态

　　最近几年火的风格化设计之一，做起来很简单但是很有视觉效果。功能图标中会有两个层次的上下关系。下层往往采用渐变或纯色块，上层图形会模拟亚克力、云母、磨砂玻璃的质感。这是通过模糊背景并在边缘添加高光笔画来实现的。