编者按:本文从组件介绍、使用场景、设计要点、样式拓展4个方面,帮你快速熟悉UI组件中的金刚区设计

上期回顾:

一、组件介绍

快速入口 (Quick Links / Quick Access),国内也会用颇具东方特色的「金刚区」来称呼。在一个结构比较复杂的 APP 首页或者主页面中,快速入口往往扮演着功能导航、曝光和引流的运营角色,通常表现为一组有序排列的图形入口。

新手科普!4个方面帮你快速熟悉UI组件中的「快速入口」

快速入口不管是位置还是权重都处于页面的中心地带,所以设计时需要格外注意基础和细节。这里我会介绍一些快速入口通用且基础的设计方法,但因为这个组件变化非常多样,所以可能无法面面俱到。诸如更符合页面需要的布局方式,以及图标如何绘制等,这些将是大家需要长期打磨练习的地方。

二、使用场景

当一个页面内除开本身需要承载的内容之外,还需置入超过四个功能模块的入口时,我们就可以考虑使用快速入口这个占用空间小,信息密度大且美观的入口展示形式,故而在多数 App 中快速入口集中出现在主页和个人页;而在诸如美团、大众点评等综合性更强的 App 中,下级分类页面也会使用快速入口。

所以总结下来,快速入口大多出现在:首页、下级主页、个人页这三个地方。

新手科普!4个方面帮你快速熟悉UI组件中的「快速入口」

快速入口在页面中的地位应该无需赘述,各位用多了 APP 也能总结出它常常出现在主要页面中中间靠上的核心区域。如果有 Banner,则通常会出现在 Banner 下方,如果没有 Banner,则会直接置于标题栏下方。

新手科普!4个方面帮你快速熟悉UI组件中的「快速入口」

三、设计要点

1. 布局方法

① 页面内等分

等分的快速入口可以表现为一个 (1~3)行× (4~5)列的矩阵,6 列的也有(起点精选页),但是比较不常见。

新手科普!4个方面帮你快速熟悉UI组件中的「快速入口」

设计时我们优先确定每个背景视图的尺寸,如何确定呢?首先是宽度,单个视图的宽度具体是多少其实并不重要,重要的是总宽度,即 390 减去页面两侧边距的大小(边距不固定,根据实际情况设置),再用这个数值除以列数,这就是背景视图的宽度。

新手科普!4个方面帮你快速熟悉UI组件中的「快速入口」

高度则需要根据图标和文字区域的总高来确定,例如图标 (包含安全区域或几何背景) 为 44×44pt,文字段 12pt 苹方默认高 17pt,图标和文字之间给 4pt 间距,上下边距 8pt,那么视图的总高就是 44+17+4+8×2=81pt。

新手科普!4个方面帮你快速熟悉UI组件中的「快速入口」

当然高度这一项中,上下间距的自主性比较大,你也可以选择留更小或更大的间距来调节矩阵在视觉上的松紧程度,尤其是多行矩阵,更需要注意上下行之间的远近,这会影响观感。总之一切都以设计师预期的视觉效果为准。

新手科普!4个方面帮你快速熟悉UI组件中的「快速入口」

② 超范围滚动

尽管大多数等分的入口矩阵同样可以采用多分页滚动的形式 (淘宝、京东),不过我们这里说的超范围滚动则更接近于滚动卡片那种非等分的,会在最右侧边界被裁断的形式,例如网易云、Keep。

新手科普!4个方面帮你快速熟悉UI组件中的「快速入口」

在这种布局下,我们需要优先确定图标与图标之间的间距,将它们调整到第一屏有 4 至 5 个,且默认露出下一个图标的一部分。最左侧的图标与其余页面元素左对齐即可。

新手科普!4个方面帮你快速熟悉UI组件中的「快速入口」

③ 主副型布局

有些 APP 需要更加明确地区分入口的权重,则会采用强弱对比的主副型入口,主副型入口属于等分的一种,两类入口的背景视图可以不同高且不同宽 (支付宝),也可以同高也高宽 (马蜂窝)。

新手科普!4个方面帮你快速熟悉UI组件中的「快速入口」

在实际设计过程中,按照等分的规则各自确定两类入口的背景视图区域即可。

2. 视觉形式

① 图标 / 文字

我们日常使用的绝大多数 APP 都采用了上图标下文字的视觉形式,这种形式具有更普遍的适用性。

新手科普!4个方面帮你快速熟悉UI组件中的「快速入口」

② 卡片形式

之前在瓷片区的文章中有提到过,一些快速入口会像瓷片区一样做成卡片拼贴的样式,指的就是如下图所示的这种视觉形式。

新手科普!4个方面帮你快速熟悉UI组件中的「快速入口」

卡片形式的入口对图形设计能力要求颇高,尤其是几个权重最高的入口,由于快速入口只能使用图形来修饰内容,为了匹配这几个入口的权重,设计师往往需要绘制精细度比一般图标更高的插画,所以我并不推荐新手尝试这种样式。

③ 主副形式

与主副型布局相对应的视觉形式,通常会采用不同类型的图标来表达不同的权重,权重高者往往使用更精细的插画图标,权重低者则使用基础的线性、面性或线面混合图标。

新手科普!4个方面帮你快速熟悉UI组件中的「快速入口」

而像支付宝、美团这样的 App,反而使用最简单的线性图标来表达功能之核心,之基础;权重则使用不同的背景色来物理区分。

3. 图标类型

① 基础渐变

在基础图形上加入了同色相不同明度的渐变,就可以做出一套简单、够用的快速入口图标,尽管不适合风格化强烈的 App 页面,但胜在通用性强,首页、个人页都能采用。

新手科普!4个方面帮你快速熟悉UI组件中的「快速入口」

② 几何背景

指的是图标拥有一个圆角矩形或者圆形的纯几何背景,实际图标则一般使用纯色或渐变。这种类型的图标好处是更容易做到视觉大小的统一,并且由于实际图标方面不需要太多的修饰,设计起来也更加简单。

新手科普!4个方面帮你快速熟悉UI组件中的「快速入口」

不过几何背景的图标也有进阶的变体,背景上可以做成不规则形状,图标上也能加入更多细节 (甚至 3D),总之能做得非常花哨,例如美团外卖的入口图标:

新手科普!4个方面帮你快速熟悉UI组件中的「快速入口」

③ 色彩交叠

因图标中存在重叠的两部分而使得这部分色彩更深。这个类型的图标本质上与渐变没有区别,都是色彩运用的一种手段,只不过交叠类图标使用得比较少见,所以会相对更具辨识度。

新手科普!4个方面帮你快速熟悉UI组件中的「快速入口」

④ 扁平插画

在图标中直接使用插画,自由度更高的同时,风格化也更明显,非常有利于品牌风格的塑造,唯一的缺点是对设计师的要求相对偏高。对插画来说,纯扁平或是微渐变都是可以的,前者更易表达场景,后者则往往会有更加立体的观感。

新手科普!4个方面帮你快速熟悉UI组件中的「快速入口」

⑤ 玻璃拟态

近年来大火的风格化设计之一,做起来简单却很有视觉效果。特征是图标中的会出现两个上下关系的层级,下层往往采用渐变或纯色的色块,上层图形则会模拟亚克力、云母、磨砂玻璃的质感。具体做法为背景模糊,以及为自身边缘添加高光描边。

近年来越来越多的在主流 App 中出现,例如飞猪、站酷。

新手科普!4个方面帮你快速熟悉UI组件中的「快速入口」

⑥ 实物图片

实物图片一般多用于电商类 APP,在进行商品分类时会直接采用特征典型的商品,优点是比图标更直观、易辨认,缺点是对图片的要求较高,对视觉大小统一的调整也需要更加细致。

新手科普!4个方面帮你快速熟悉UI组件中的「快速入口」

当然,人像也算是实物图片的一种,多用于影视类 App。

除了上述 6 个比较常见的分类,快速入口这个区域的图标还有很多奇特的类型,例如 2.5D 轴测图、文字类、3D 类,甚至多种类型图标混合使用等等。因组件本身的设计开放性极大,几乎没法全部涵盖到。所以图标类型方面的知识,还需要大家自己在工作和学习中慢慢积累。

四、样式拓展

1. 自如

新手科普!4个方面帮你快速熟悉UI组件中的「快速入口」

自如 APP 的快速入口设计向来别出心裁,值得大家一直放在手机里观察它的设计改版。自如在这一版本中,将 12 个格子其中的两个格子合并成了一个宽格,既强调了这个格子的内容,又让这三行图标发生了一定变化,不至于枯燥。

2. 起点

新手科普!4个方面帮你快速熟悉UI组件中的「快速入口」

在快速入口中加入动效听起来是个很多余的做法,因为对这些图标的交互几乎没有观察后续反馈的必要(都直接跳到另一个页面了)。不过起点在这里做了一个动效的示例——在某个你想强调的图标中加入循环动效,可以起到吸引用户注意力的作用。

3. 其他样式

新手科普!4个方面帮你快速熟悉UI组件中的「快速入口」

结尾

快速入口的组件就介绍到这,后续所有有关组件的介绍都会同步更新!

点赞 42
收藏 75

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。