认识达内从这里开始

认真做教育专心促就业

太原达内UI培训标签设计的常见类型都有哪些

发布：太原达内教育官网
来源：互联网
时间：2022-07-20 08:47

标签是UI设计师在设计网页或者app界面的时候会经常用到的一个设计功能，下面我们就通过案例分析来简单了解一下，标签设计的常见类型都有哪些。

<a style='color:blue' href='http://ty.tedu.cn/'>太原达内</a>UI培训标签设计的常见类型都有哪些

1、左标签

左标签在目前来说是常见的一种标签样式，但是这并不意味着我们可以无所顾虑地使用它。以手机端为例，手机端的屏幕尺寸(宽度)有限，左标签会占据屏幕较大的空间，此时右边的输入框就可能无法展示完整的信息。

例如，如果用户输入的地址过长，就会造成信息的展示不完全，这对用户体验来说是致命的。因为用户在进行下一步操作之前都会对输入的内容进行审核确认，如果连完整的内容都无法获知或者获知的难度较大，则用户根本不会进行下一步操作，这就造成了操作流程的中断。所以，我们在使用左标签的时候，一定要考虑对多行文本的展示。

2、顶部标签

顶部标签是指位于输入框上方的标签，这样输入框就可以独占整个页面，信息可以得到更完全的展示。

与左标签相比，顶部标签可以给输入框的内容腾出足够的空间。在界面设计中，更多的空间还意味着具有更高的信息层级。同一个表单中会有很多的输入项，有些输入项的优先级很高，我们可以考虑使用顶部标签的样式来进行凸显。

但是这种布局方式也有缺点：会占据更多的纵向空间，之前一屏就可以展示的内容，现在用户需要滑动页面才可以看完。

3、行内标签

行内标签又可以被看成是输入提示，其样式看起来很适合手机端的表单设计，因为它可以极大地节省页面空间。但是一旦用户点击切换到输入状态以后，就看不到这些标签了。如果操作提示字数很多，例如密码规范，那么用户会记得很辛苦。我们可以在调起的键盘顶部加上提示，减少用户的记忆成本。

但是，如果表单项目过多，则用户在填写的时候很容易串行，可能会出现把家庭住址填到毕业院校一栏中的情况。更严重的是，用户因为无法看到标签，这类错误是无法被检查出来的。为了解决这个问题，我们可以在行内标签前加一个图标来标识这个列表项，图标所占据的空间不会太大，而且会提高页面的美观性。

【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。更多内容请加danei0707学习了解。欢迎关注“达内在线”参与分销，赚更多好礼。

< 上一篇：太原达内Java培训MySQL数据库优化常用方法

下一篇：太原达内Java培训合页负载均衡应用与优势分析 >