返回

从零开始学 UI

#设计知识
#知识库
65%
进度
0/14
知识点
0
笔记
概述
移动端UI设计的基本认识
移动端UI设计的基本认识
UI 界面设计所需的技能解析
UI 设计的软件介绍
移动端的基础规范认识
移动端的规范认识
屏幕和分辨率的规范
设计的单位和格式
UI 中的字体与显示
UI 文字的属性设置
基本色彩模式的认识
UI 设计中的原子理论
iOS 的基本规范认识
iOS 的控件和组件认识
标准规范下的APP 设计演示
苹果音乐主页的设计
资料库页面的设计
专辑页面的设计
播放页面的设计
界面的合并和输出
移动端的基本控件和组件设计
UI 中的尺寸定义逻辑
按钮的设计逻辑
输入框的设计逻辑
列表行的设计逻辑
图标的尺寸定义
分页器控件的设计
轮播广告组件设计
快速入口的设计
瓷片区的设计
动态卡片的设计
商品卡片的设计
模态弹窗的设计
移动端页面设计的解析
登录页面的设计
综合型主页设计
动态列表页面设计
商品列表页面设计
电商详情页面设计
影音详情页设计
用户设置页面设计
表单页面设计
UI 中的视觉风格
夜间模式的设计
UI 中的投影应用
首页知识库设计知识从零开始学 UI

快速入口的设计

UX百科编辑部 编辑于 2023-12-1924人正在学
30

快速入口 Quick link 是用于快速进入下级页面、分类、功能的链接按钮聚合组件,是APP 中最常见的组件之一。

它早期的别名叫金刚区,是由美团团队内部流出的叫法,原因是美团初期首页上有 8 个大功能图标,叫八大金刚,后来图标增加且开始做小,就改成叫金刚区。这是一个很抽象的叫法,所以简单了解即可,无需以它为标准记忆。

金刚区本质上就是在一个指定区域内,划分出指定数量的模块,然后将图标和标题文字置入进去。常见的组合有 14、15、24、25,如果数量过多,就会使用横向的滚动或轮播的形式进行隐藏。

设计快速入口首先要确定它的区域宽度,正常情况下它的宽度就是通栏整屏宽,或者减去左右页边距后的宽,但以这种思路做出来的效果并不理想,因为图标左右两侧的间距不是太大就是太小。

所以实际的设计中,左右两侧的间距减少 8-12 即可,可以让图标的分布更和谐。

然后就是往里面填入图标和文字了,图标的尺寸通常再 44-56 之间,可以包含圆形、菱形背景的,也可以只有基础的图标轮廓,这就是图标设计风格的问题。然后再添加 12-14 的标题文字,就可以确定快速入口区域的实际高度。

基础的快速入口内的操作区域都是等分的,图标的大小也是一样的。但在一些复杂的场景中,如选项权重有差异,包含上下级关系等,那么区域的划分就会出现差异,且图标的大小不会一致。

比如下面这些案例:

具体应该怎么设计,就看前期对选项内容的理解和空间利用的目标上,要由设计师自己判断。

课后作业

下面,可以通过完成对空白区域的快速入口设计进行实践,掌握对应的布局方法,图标可以使用任意素材不用和文字完全对上也可以,保证最终的展示效果良好即可:

以下是用于检查和校对的原图:

点赞
收藏
学会
12543024
下一篇: 瓷片区的设计
瓷片区是由多个展示内容要素的区域组合而成的组件,因为它的布局很像瓷砖贴片,所以得名瓷片区。 瓷片区本质上也是用于跳转到下级页面的按钮,所以很多人分不清瓷片区和快速入口之间的区别。除了样式上的差异外,瓷片区更类似商超中的展柜,将具体内容展示给用户,而且会根据运营需要定期更新,有很强的引导性,吸引用户关...
笔记 (9)
只看自己
logo
sumi 记录于 2024-03-08
金刚区图标群两边保留8-12的边距最合适
原文: 实际的设计中,左右两侧的间距减少 8-12 即可,可以让图标的分布更和谐。
凯尔队长 记录于 2024-02-25
1
通过截图和快速拼贴找到最适合当前界面风格的快速入口
原文: 掌握对应的布局方法,图标可以使用任意素材不用和文字完全对上也可以,保证最终的展示效果良好即可
© 2023 uxbaike.com All rights reserved
版权声明意见反馈联系我们
weixinlogo
mx-auto
TOP
mx-auto
笔记
mx-auto
点赞