当前位置: 首页 >文章 > B 端设计 | B 端控件全面认识 下篇
收藏
分享

B 端设计 | B 端控件全面认识 下篇

举报酸梅干超人酸梅干超人发布于 2021-06-011776阅读3点赞
时间选择器,是一个非常复杂的控件,通常它由一个下拉菜单和时间面板组合而成...

他来了,他来了,他又带着干货回来了……

久别重逢,B端系列文章停更了很久(咕咕咕……),虽然鸽了,但真·硬汉是不会自宫太监的。

下面,就回到我们之前停摆的控件讲解,继续认识控件有关设计的内容。

第一篇:B 端设计 | B 端设计规范是什么?

第二篇:B端设计|全方位讲解下字体设计规范

第三篇:B 端设计 | 如何掌握 B 端配色技巧?

第四篇:B 端设计 | B 端控件全面认识 上篇



4.1 时间选择器的组成

时间选择器,是一个非常复杂的控件,通常它由一个下拉菜单和时间面板组合而成。

下拉菜单作为一个表单控件,设计的方式前面已经说过了。时间的选择包含两种类型,单点选择和范围选择,单点是具体到某天某日某时,比如闹钟提醒,而范围是从某个时间点到另一个时间点之间的值,例如酒店预定时长。

不管使用哪种选择类型,我们优先要注意时间的层级格式,要显示年/月/日,还是精细到时/秒/分,以及链接层级的符号。

单点选择模式的表单相对容易,就仅仅是显示格式上的差异。但是,在范围选择中,表单的设计就有比较大的差异,要包含起始和结束两个时间点。

我们可以在一个表单方框中将前后两个时间点都囊括进来,也可以将开始和结束拆分成两个表单,两种模式都有各自的交互逻辑和使用方式。

而点击表单后,就是弹出的时间选择面板。一个最完整的时间面板,会包含年份选择、月份选择、星期标识、日期选择、分时秒选择。


4.2 时间选择面板的定义

下拉菜单部分的设计,和前面的表单输入框基本一致,我就不在这里继续讨论了,主要来分享关于时间选择面板的设计尺寸。

设计该面板的时候,也是先从模块入手:

年/月份选择

日期选择

分时选择

每个模块都有高度的设置规则,年/月和分时选择栏,都可以采取定高的模式设计,可以使用 28-36px 的高度。

而对于日期选择模块,高度的设计则有比较特殊,模块的总高度不需要提前制定,而是根据内容行数决定。包含星期标识行、日期行数。

每个日期的数字,都由一个完整的矩形 View 包裹,整个日期展示区域,就是由这些矩形拼装而成,每个矩形可以是正方形也可以是纵向长方形。

在这个模式下,如果要增加选中模式,可以直接通过填充背景 View 的色彩来完成。

日期数值的显示也有状态的区分,包含 “不可选” 和 “今天” 两个。不可选的日期置灰即可,而标识今天的日期数字,可以使用特殊的色彩或添加特定的符号标识。

最后,就是包含具体分时选择的设置了,如果这个时间选择器中即包含了从日期到秒的选择,那么在面板中,就建议使用手动输入的方式来完时、分、秒的设置。



面包屑控件,用来表示用户当前所处页面的层级,由页面链接和分隔元素组成,是一个比较容易设计的样式。

页面链接主要由文字展示,比较少会在这个部分玩花样,最多关注当前页面和上级页面的色彩差异。在设计它们的时候,最简单的做法,就是使用文本框直接键入,如:

电话亭首页 > 课程 > B端入门

电话亭首页 / 课程 / B端入门

如果要严谨一点,可以将手动键入的大于号换成箭头图标。这种基础的形式占据了 95% 以上的项目场景,只有在高度复杂,层级众多的项目中,我们会额外在该控件中增加页面下拉菜单,以及使用的筛选标签元素。



6.1 页码控件的组成

页码控件是用来控制列表翻页的工具,当列表条目数量超出单页显示数量以后就会均分成若干数量的页面,以页码控件进行翻页和跳转。

在这个应用场景中,包含许多需要考虑的因素,核心问题来自页面数量过多和有限的展示区间的矛盾。对于数据量较大的列表,展示的数据往往会超过4位数,这就需要我们提供多种交互元素来辅助用户进行页面跳转。

在最完整的页码控件中,会包含下面这些元素:

不同的系统或者页面,对所需的交互元素要求是不一致的,需要我们根据页面的目标来判断应该放哪些内容。


6.2 页码控件的尺寸

该控件的设计,样式上主要的差异是是否包含矩形边框,不过不管这个边框是否可见,我们也依旧会以创建 View 视图的方法来设计它。

页面控件的设计首先从页码数字开始,优先制定高度,再根据数字数来制定宽度。通常,这类标签按钮的高度在 28-36px 之间。

宽度非固定的设计模式是一个必须注意的问题,因为 1 位数和 4 位数所需空间是有非常大差异的。只要确认好左右间距的数值,那么设计后面的前/后翻页、输入框、页数等内容,就会变得非常清晰了。

页码设计中,不要遗漏的就是省略号了,它代表还有大量的页码没有被展示出来,通常这个省略号只出现在最后一页或者最开头一页中。

切记不要把省略号安置到序列的中部,变成类似下方这种状态:

1·2·3·4·5 …… 996·997·998·999



7.1 导航栏的组成

在今天,99% B端项目导航栏都坐在左侧,内容在右侧,通过选择左侧导航的链接快速打开和跳转到不同的模块中去。

导航栏的设计相对一般组件来说,对页面的视觉效果影响更大,因为导航栏有较大的占比,而且通常为了和内容做区分,都会采用和右侧相反的色彩进行凸显,或使用品牌色。

常规的导航栏中,仅包含的内容有后台 LOGO、导航选项。复杂的情况下可能还包含头像、提醒、定制模块,暂时不用考虑。
导航选项是导航栏的关键所在,最简单的B端项目往往只有一级,但业务越多的项目导航选项的层级也就越多,会以树桩的形式展开和收起。

对于一些适配支持比较好的项目,导航栏还会有缩略模式,即缩减宽度后只显示图标或更改文字排列方向的状态。


7.2 导航栏的数值

在导航栏设计中,一般LOGO放在顶部,使用 28-64 之间的高度,然后下方才放导航选项。

只要项目不太复杂,那么就建议为导航提供统一的高度,从32-48px 之间选择。即使是二级标题,也可以使用相同的高度而不用特地缩小,通过变更文字的色彩、缩进的方式来表现层级的区别,这样在交互中更具整体性。

如果使用缩略型导航,则宽度控制在 32-64 即可。



开关控件作为用来控制功能启停的元素,包含开启、关闭、禁用三个基本状态。B端开关设计受到移动端系统的影响,所以和我们手机上使用的开关控件样式几乎一致。

但是,并不是所有启停场景下都适用这种开关,如果启用和关闭的逻辑比较复杂,那么就可以使用表单的两个单选项控件并添加文字提示,或者使用勾选完成开启关闭。



在B端的分页器中,设计的规格和移动端是不同的,移动端应为屏幕窄,经常将 2、3 个分页标签进行均分来实现布局。

而在 B 端分页控件,也优先确定设计的高度,小分页控件在 24-36 之间,大的在 36-64 之间。如果文字字数不太多,就使用等宽的设计,如果文字数量比较捉摸不定,就采取等内边距自适应设计。



最后,就是提醒类控件的设计了。提醒类控件一般包含两个类型,弱提醒和强提醒。

弱提醒是直接悬浮在画面中,不会对遮挡以外区域有太大影响,并会自己消失的提示,也可以称为 Toast 气泡框。这个框的设计,是确定四周内边距的宽,然后再根据文字内容来展示。

而强提示弹窗,则是一个正常的弹窗。我们会在这个弹窗中置入标题、文本、按钮三种要素。并且,为了体现 “强”,会对窗口下方的界面使用黑色遮罩,让用户注意力集中到窗口中!

这类黑色遮罩通常使用透明度为 40-60% 的黑色,太浅和太深都不好。



今天的分享就到这边,对于控件组件的说明,我会在后面单开更全更更细节的干货分享出来。

掌握这两篇内容中设计的逻辑,就可以拓展到其它类似组件和元素中去。主要掌握的是设计的方式,而不要硬背具体的数值。


下篇再贱~





本文原创,未经作者允许不可转载!

更多内容,欢迎关注作者微信公众号:超人的电话亭!


0条评论
别默默看啦~登录/注册一起参与讨论吧~

暂无评论

请选择举报理由

违反法律法规

侵犯个人权益

有害网站环境

更多训练营>>

为你推荐 · 训练营(全勤打卡报名费全额返累计全额返用户133,481人)

【4月】趣味MG动画制作训练营
距离开班仅剩11天33人已报名
【4月】零基础手绘插画训练营
距离开班仅剩11天61人已报名
电商海报设计训练营
距离开班仅剩39天23人已报名
特惠
充值
7折购
今日还在继续学习的你,太棒了!
7
折扣券可用于
年费无限VIP
立 即
使 用
此活动优惠不可与其他活动叠加使用
有效期:000000
消息
登录即可查看消息记录
建议
意见
官方
客服
在线咨询客服热线

您可以与在线客服进行沟通获得帮助

工作日:9:00~22:00节假日:9:00~18:00

联系在线客服

您可以电话联系客服进行沟通获得帮助

工作日:9:30~18:30

400-862-9191
虎课
积分
免费学习89000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了46,688
并提交了341份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
登录虎课网,每天免费学课程全站 89000+ 视频会员教程 | 每日可免费学 1
为确保账户信息安全
请先进行真实姓名验证后进行充值付款
立即验证