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

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

  提示类元素、功能类元素、视觉类元素

  一、提示类

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

  1.徽标

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

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

  QQ一键清除“小红点”

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

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

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

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

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

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

  2.标签

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

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

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

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

  3.图标

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

  “首页”或“我的页面”标题前的提示性icon

  新闻或公示模块左侧的标题图标

  页面加载图标

  动态提示icon

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

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

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

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

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

  腾讯电脑管家/360

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

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

  斗鱼/腾讯动漫

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

  拉勾招聘

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

  微信

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

  4.气泡弹窗

  气泡出现的场景大致有两种：

  一种是新用户第一次登录或是更新完毕时。主要起到引导和教学的作用。

  第二种是新功能、新产品或新话题推出时，主要作用是提醒和宣传。

  气泡的样式并不丰富，多数还是常规的矩形或圆角矩形。配色多是以主色或其他辅助色为主。不过，通过动效的融入，可以使气泡变得更加吸睛，产生不错的吸引力。

  除此之外还有一种气泡弹窗是Toast。也就是吐司弹窗。它开始出现在安卓规范当中，是提示弹窗的一种。初始形态是在页面底部显示的黑色提示窗。经过演变，即使是在iOS的产品中也出现了类似的设计。形式目前演变成了下拉刷新从上弹出提示，并且有可关闭的样式。

  以上就是优漫教育小编为大家介绍的“【UI设计培训】：UI设计中，“小元素”有大用处”相关内容，学习ui设计培训，可以参考优漫教育提供的ui学习路线，该学习路线内容包含ps软件入门、AI与品牌设计、视觉表达技法、web视觉设计、图标设计、产品交互、移动端设计等，根据优漫提供的ui学习路线图，可以让你对学好ui需要掌握的知识有个清晰的了解 ！