在UI设计中，有很多“小元素”发挥着非常重要的作用，有些元素已经是司空见惯；有些设计师又玩出了新花样，在使用一些产品之后怎么删除抖音搜索推荐关键词★64xl.com霸屏下拉词，抖音手机下拉，我对这些“小元素”有了不少体会，整理总结了一下，希望其中的一些好的、有趣的设计能对大家有所帮助。

“小元素”这个说法还是有点太笼统了，所以我把它们分为三个部分：

1. 提示元素

2. 功能元素

3.视觉元素

顾名思义，“提示”就是任何可以提示我们、指引我们的东西。我首先想到的就是让人又爱又恨的“小红点”。

1. 标志

标识俗称“小红点”，通常固定在图标或标签的右上角。它的提醒作用非常强，强到有时你都不想让它出现。

说到小红点，就不得不提到“红点强迫症”这个词，它是现代人的社交网络成瘾症之一，看到它就会无意识或者强迫性地点击它，让它消失。

QQ一键清除“小红点”

人们之所以想点击“小红点”，是因为它的突然出现扰乱了周围的布局，打破了布局平衡，让某部分内容变得异常“抢眼”。而“红点”在设计中并不那么抢眼，我们可以通过色彩淡化它的存在感。

淘宝/QQ邮箱

标志的颜色以红色为主，因为红色足够醒目，能引起用户的警觉。常见的样式有“小红点”、“红点内嵌数字”、“红点内嵌文字”等。

Logo的大小没有严格的标准，部分主流产品上的“小红点”大小在16px~30px之间，填充文字内容的Logo具体大小视情况而定，最小字号为20px。

最大显示数为“99”，超过此数则显示“99+”或“…”，部分信息或评论地点标识可能以四位数显示千位甚至更高。

今日头条

Logo可以出现在很多地方，比如标签栏、导航栏、金刚区、文字标题、头像等。

2. 标签

标签也是很常见的，经常出现在电商、金融、生活娱乐等产品中，主要作用是分类或者突出重点，比如我们需要在界面上区分产品的属性；或者突出重点产品；新品发布时需要标签来突出等等。

标签的样式非常丰富。背景颜色、边框、图标组合；矩形、圆角矩形、特殊形状、标题样式等。同时标签可以出现在任何地方。首页、我的页面、商品详情页、搜索页、客服咨询页等。当我们打开淘宝、美团等APP时，就能发现各种样式的标签。

美团/淘宝/飞猪

在色彩方面，应以主色调和中性色为主。红色可以用来强调提示；渐变色可以用来凸显活力和时尚。所以这需要我们根据具体需求和产品属性来搭配。但不要使用过多的颜色，同时保持页面整体配色的平衡。

3. 图标

这里我主要提到四种类型的图标： ①“首页”或者“我的页面”标题前的提示性图标； ②新闻或者公告模块左侧的标题图标； ③页面加载图标； ④动态提示图标。

①目前，越来越多的主流产品已经放弃了在标题前添加图标的设计形式，而是简单粗暴地将标题加粗、放大。

在“我的页面”中，仍有不少产品保留了在标题前添加提示性图标的设计。

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

之前在标题前加竖条的设计，在APP端基本已经见不到了，在网页端还是经常看到，个人认为竖条的设计不仅过时，也没什么实际意义，有点为了装饰而装饰的感觉。在每一寸空间都很宝贵的移动端页面，还不如直接把这种没意义的装饰去掉。

腾讯电脑管家/360

这或许也是越来越多产品不再在标题前添加图标的原因，毕竟一个足够醒目的标题已经能起到很好的提醒作用，大标题的设计形式也是重点升级点之一。

当然，对于一些动画类、娱乐类、直播类的产品，添加图标会让页面更加动感、有趣，还是要看具体产品。

斗鱼/腾讯动画

②新闻/公告模块，这类模块经常出现在电商、招聘、生活等产品中，为了更好的吸引用户的注意力，通常的做法是对左侧的标题进行重新设计，同时这类标题图标可以融入产品品牌基因元素，更好地凸显产品特色。

拉勾招聘

③加载图标是网速受限或者页面内容加载过多时的提醒图标，多为小雏菊图标。

微信

④ 动效设计越来越受到人们的重视，这种流畅的表现形式和极佳的视觉吸引力受到很多人的追捧，我们会发现很多产品从呆板单调变得生动丰富，动效设计在这里发挥着重要作用。

你饿了吗？

马蜂窝

4.气泡弹窗

气泡出现的场景有两种：一是新用户首次登录时，二是更新完成时，主要起到引导和教导的作用。

莫莫

第二就是在有新功能、新产品或者新专题推出的时候，它的主要作用是提醒和推广。

知乎

气泡的样式不算丰富，大多为规则的矩形或者圆角矩形，配色多以原色为主或者其他辅助色，但通过融入动效，可以让气泡更加醒目，产生很好的吸引力。

此外，还有另外一种气泡弹窗。也就是弹窗。它开始出现在规范中，是提示弹窗的一种。最初的形式是显示在页面底部的黑色提示窗。经过演变，甚至在iOS产品中也出现了类似的设计。形式从上方演变为下拉刷新弹窗提示，并且有可关闭的样式。

豆瓣

5. 页面指示器

页面指示器是排列在底部的小点，会随着页面同步旋转，当页面旋转到当前页面时，对应的小点会有特殊显示。

拉勾招聘

页面指示符的形式不仅限于小点。其他形式包括矩形、特殊形状、数字、扩展图形等。

网易考拉

同时，页面指示器还可以和进度条结合起来，这样会让用户更加清楚某一张图片轮播所消耗的时间。

理想情况下，轮播中的图像不会超过四五张。这意味着页面指示点也不会显示超过四五张图像。电子商务产品轮播将包含更多图像。

6.导航栏

导航栏原本属于规范京东下拉词，目前不少iOS产品都开始沿用此导航栏样式进行设计，原本属于iOS规范的段选择器已经变得不那么常见了。

这种导航栏的优点是除了点击之外，还可以左右滑动进行切换。并且导航栏的选项数量没有过多的限制。

常见的导航栏样式有文字加线条、背景色或者品牌图形等，风格丰富。

荔枝FM//众安保险/飞猪/他趣

7. 音量条

目前很多产品已经把音量显示由原来的弹窗改为固定在顶部的条形显示，这样做的目的是为了不影响用户体验，能够更加沉浸地使用产品。

8. 按钮

这里我们以Uber为例，在登录时，输入电话号码后，按钮会变为等待状态，按钮结合等待演示效果，使用流畅的动画来消除用户在等待时的负面情绪。使整体简洁的页面充满活力。

因此在设计按钮的时候，我们可以结合场景来增加创意，让呆板的按钮变得有趣起来。

优步

9. 提示文字

我们经常会在产品的“我的”页面看到标题右侧有一行文字，有的是简单的提示，有的是展示重要数据，方便用户浏览而不需要点击二级页面。不仅如此，设计师还可以设计这一类的字体，或者加入图标，丰富它的设计风格。

荔枝FM

1. 标签栏

作为基础控件，位于底部区域的标签栏已经演化出了多种丰富的样式。

①刷新/返回顶部

瀑布流式的首页形式是为了方便用户更新内容，滑动到某个位置后，原有的首页按钮会变为刷新状态，部分产品还将返回顶部按钮集成到页面中，比如马蜂窝就将返回顶部按钮放在了右上角，可以同时刷新或者返回。

淘宝

马蜂窝

②添加按钮

此外，一些带有添加或者上传功能的按钮往往固定在标签栏的中间，方便用户第一时间找到。

小红书

经济旅行

这些巧妙的设计，并不会占用太多的空间，又能很好的解决用户遇到的问题，非常方便。

2. 浮动按钮

悬浮按钮原本是包含在规范中的，后来在iOS产品中也保留了下来，虽然官方规范中没有这个按钮，但是使用起来非常方便，而且国内很多软件和iOS版本都有一套使用页面。因此包括悬浮按钮在内的一些常用设计都被保留了下来，可以在两个平台上使用。

马蜂窝

荔枝FM

马蜂窝

悬浮按钮不仅可以完成点击等常规操作，还可以作为集合容器来组合更多功能。并且位于屏幕右下角，方便用户使用。

3. 顶部扩展内容

扩展区是我个人给它起的称呼，这个区域在页面最顶部，因为空间足够大，很多产品可以往里面添加更多的设计创意京东下拉词，比如添加日期或者天气，比如有些特定的产品会把顶部区域用来放置一些独特的功能，比如蚂蚁金服的智能助手。

蚂蚁财富

UC浏览器

看到理想

4. 功能按钮

这种按钮也很常见，比如导航栏右侧的更多按钮，或者标题栏右侧的更多按钮，多为三个点的形式，也有文字、数组灯样式。

三条杠图标多为抽屉导航的表现形式；箭头基本是下一页或者返回的固定图标。以上图标被广泛使用，已经成为用户的固有认知。

因此我们在设计的时候可以在此基础上进行升级或者创造性的优化，一定不要过度颠覆，否则会增加用户的学习成本。

5. 下拉/向上滑动

①下拉刷新已经成为默认操作，根据产品的属性和定位，我们会看到各种风格或设计元素的下拉动画，设计师可以延伸品牌元素，融入更多创意，让页面变得更加有趣。

土豆视频

②以点融投资为例，当你向上滑动到页面底部时，会出现一个宝箱，随着我们向上滑动，宝箱会打开，出现宝物和品牌图片。滑动到底部，你会直接跳转到另一个页面。这让我对页面底部的空间有了更多的思考。

点融投资

6. 视频进度条

视频进度条放置在视频底部，是视频产品不可或缺的重要控件，在视频播放时会自动隐藏，此外进度条还可以集成其他功能，比如全屏、点赞、收藏、弹幕开关等。

的视频进度条：拖动控制按钮时，小电视图标会随着拖动的方向变化。虽然看似很不起眼的设计，但你也可以在视频区域左右滑动来调整进度。进度条进行中时，小图标可以很好的显示出来，充分体现了它的趣味性。

比利比利

虽然是视觉设计，但是也要尽量避免加入过多无用的元素，不是为了装饰而设计，要结合自身的产品，达到视觉上的平衡，达到情感化设计的目的。

1. 默认页面

通常当前页面是没有内容的，或者是没有网络连接的情况下出现的，由于这种页面没有内容，设计师的发挥空间就很大，根据产品属性、品牌进行图形的延伸，结合情感化效果或者插画设计，都可以很好的丰富页面内容。

点融投资

我想没有人喜欢看到一个没有内容的页面，这会给用户造成很大的心理落差，会非常影响体验，所以默认页面就变得尤为重要，如果设计得当，不但不会影响体验，反而会让用户喜欢。

除了视觉设计之外，还可以在默认页面添加刷新按钮，以在功能层面进行改进。

你饿了吗？

2. 个人资料图片

如今，很多产品已经抛弃了死板的默认头像，给予用户更多的选择，比如京东、小赢金融等就为用户提供了多种头像选择。

京东金融

小赢理财

虽然添加默认头像只是锦上添花，但这种情感化的设计不仅在视觉上具有创新性，也让产品变得更加有趣。

3. 辅助元素

移动端UI都是按照相应的规范来设计的，所以大部分产品不会在如此珍贵的地方放置一些硬核的纯装饰元素。不过设计师可以使用卡片或者在磁贴区域加入自己的想法。

卡片/图块的布局多为左文右图，而这样的辅助元素并非只是为了凸显视觉设计，更主要的目的是为了保持卡片/图块的结构平衡，或是填补多余的留白，让整体页面在视觉上更加饱满、醒目。

乐客体育/众安保险

4.切换动画

①标签栏动画

通过动态效果的运用，标签栏的切换不再呆板，用户在频繁切换页面时不再感到单调。

土豆视频

②导航栏动画

虾米音乐

总结

以上是我个人对手机上“小元素”的总结，整理期间还发现了其他有趣的设计，但不属于“小”的属性，所以就不收录到文章中了。在体验产品的过程中，一些有趣、不错的设计思路会给我以后的作品、工作项目带来很大的启发，也希望更多的朋友能够开始整理分享。