UI设计中，“小元素”有大用处！

在UI界面的设计当中，有很多“小元素”发挥着十分重要的作用。有些元素我们已经司空见惯；有些被设计师们玩儿出了新花样。在使用了一些产品后，我对这些“小元素”进行了梳理总结。希望其中的一些好的、有趣的设计能对大家有所帮助。

对于“小元素”的这个说法还是有些太笼统，我又把它们分为大致三个部分：

1. 提示类元素
2. 功能类元素
3. 视觉类元素

一、提示类

“提示类”顾名思义，对于我们有提示作用的或是有引导帮助作用的都可以归为此类。那么我最先想到的，应该就是让人又爱又恨的“小红点”了。

1. 徽标

徽标通俗的叫法就是“小红点”，一般固定在图标或是标签等右上角的位置。它具有非常强的提示作用。强大到有时不想让它出现。

说起小红点就不得不提“红点强迫症”这个词。它是现代人的社交网络依赖症之一，表现为看到它就不自觉的或是强迫性地点击它，让它消失。

QQ一键清除“小红点”

导致人们看到“小红点”就像点开的原因，是因为它的突然出现，破坏了周围的布局，打破了排版平衡，使某一块内容变得异常“醒目”。如果想让“小红点”在设计中不那么醒目，我们可以通过颜色来淡化它的存在。

淘宝 / QQ邮箱

徽标的颜色多为红色，因为红色足够醒目且让用户能够警醒。

常见的样式有“小红点”、“红点内嵌数字”、“红点内嵌字符”等样式。

徽标的尺寸并没有一个严格的规范。“小红点”在一些主流产品中，尺寸从16px到30px不等。填充字符内容的徽标具体尺寸需视情况而定，最小字号为20px。

显示的数字最高到“99”。超过了则显示“99+”或“…”。一些信息或是评论位置的徽标，显示可以达到四位数的千位甚至更高。

今日头条

徽标可以出现在多个位置上——标签栏、导航栏、金刚区、文字标题、头像等等，均可以发现它的存在。

2. 标签

标签的出现几率也非常高，常出现在电商、金融、生活娱乐类等产品中。它的主要作用是进行分类或突出重点。比如界面中需要我们区分开商品的属性；或是对重点商品、新品进行着重提示等，都需要用到标签。

标签的样式非常丰富——底色、边框、图标组合；矩形、圆角矩形、异形、标题样式等等。

同时，标签可以出现在任何地方——首页、我的页面、商品详情页、搜索页、客服咨询页等等。我们打开淘宝、美团等APP，就可以发现多种样式的标签。

美团 /淘宝 / 飞猪

颜色方面，还是要以主色和中性色为主。加重提示可选用红色；突出活力和时尚感可用渐变色。所以这就需要我们根据具体需求和产品属性来搭配。但使用颜色不可过多，同时还要保持页面整体配色的平衡。

3. 图标

这里我会提到四种主要图标类型：

1. “首页”或“我的页面”标题前的提示性icon
2. 新闻或公示模块左侧的标题图标
3. 页面加载图标
4. 动态提示icon

①目前，越来越的主流产品已经放弃了标题前加图标这样的设计形式了。取而代之的是简单粗暴的将标题加粗加大。

在“我的页面”中还是有很多产品保留了标题前添加提示性icon的设计形式。

京东金融 / 支付宝 / 饿了么

而之前出现过的在标题前加竖杠的设计形式在APP端已经基本见不到了，在网页端还是会时常碰到。

个人认为竖杠的设计不仅过时，而且没有什么实际意义，有点为了装饰而设计的感觉，在手机端页面这种寸土寸金的地方，这种意义不大的装饰直接去掉反而会更好。

腾讯电脑管家 / 360

这可能也是为什么越来越多的产品不再标题前加icon的原因吧。毕竟，足够醒目的标题就已经很好的起到提示作用，大标题这种设计形式也是iOS11重点升级点之一。

当然，像一些动漫类或是娱乐类、直播类的产品，增加icon反而会让页面更有活力，更有趣味性。还是要根据具体产品而定。

斗鱼 / 腾讯动漫

②新闻/公示模块，在电商、招聘、生活类等产品中经常出现。为了更好地让用户注意到，通常的做法是将左侧标题进行重新设计。同时，此类标题图标可以融入产品的品牌基因元素，更好的突出产品特点。

拉勾招聘

③加载图标是当网络速度受限，或页面内容加载过多等因素出现时的提示性icon。多以小菊花图标为主。

微信

④动效设计在目前越来越受到人们的重视，这种流畅的表现形式和出色的视觉吸引力受到了很多人们的追捧。我们会发现很多的产品由开始的死板单调，变得活泼丰富起来。这里面动效设计功不可没。

饿了么

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!