在UI界面的规划傍边，有许多“小元素”发挥着十分重要的效果。有些元素咱们现已习以为常；有些被规划师们玩儿出了新花样。在运用了一些产品后，我对这些“小元素”进行了收拾总结。期望其间的一些好的、风趣的规划能对咱们有所协助。
关于“小元素”的这个说法仍是有些太抽象，我又把它们分为大致三个部分：
提示类元素功用类元素视觉类元素一、提示类
“提示类”望文生义，关于咱们有提示效果的或是有引导协助效果的都能够归为此类。那么我最早想到的，应该便是让人又爱又恨的“小红点”了。
1. 徽标
徽标浅显的叫法便是“小红点”，一般固定在图标或是标签等右上角的方位。它具有十分强的提示效果。强壮到有时不想让它呈现。
说起小红点就不得不提“红点逼迫症”这个词。它是现代人的交际网络依赖症之一，表现为看到它就不自觉的或是逼迫性地点击它，让它消失。
QQ一键铲除“小红点”
导致人们看到“小红点”就像点开的原因，是由于它的忽然呈现，破坏了周围的布局，打破了排版平衡，使某一块内容变得反常“夺目”。假如想让“小红点”在规划中不那么夺目，咱们能够经过色彩来淡化它的存在。
淘宝 / QQ邮箱
徽标的色彩多为赤色，由于赤色满意夺目且让用户能够警醒。
常见的款式有“小红点”、“红点内嵌数字”、“红点内嵌字符”等款式。
徽标的尺度并没有一个严厉的标准。“小红点”在一些主流产品中，尺度从16px到30px不等。填充字符内容的徽标详细尺度需视情况而定，最小字号为20px。
显现的数字最高到“99”。超过了则显现“99+”或“…”。一些信息或是谈论方位的徽标，显现能够到达四位数的千位乃至更高。
今天头条
徽标能够呈现在多个方位上——标签栏、导航栏、金刚区、文字标题、头像等等，均能够发现它的存在。
2. 标签
标签的呈现几率也十分高，常呈现在电商、金融、日子文娱类等产品中。它的首要效果是进行分类或杰出要点。比方界面中需求咱们区分隔产品的特色；或是对要点产品、新品进行侧重提示等，都需求用到标签。
标签的款式十分丰厚——底色、边框、图标组合；矩形、圆角矩形、异形、标题款式等等。
一同，标签能够呈现在任何当地——主页、我的页面、产品详情页、查找页、客服咨询页等等。咱们翻开淘宝、美团等APP，就能够发现多种款式的标签。
美团 /淘宝 / 飞猪
色彩方面，仍是要以主色和中性色为主。加剧提示可选用赤色；杰出生机和时尚感可用渐变色。所以这就需求咱们依据详细需求和产品特色来调配。但运用色彩不行过多，一同还要坚持页面全体配色的平衡。
3. 图标
这儿我会说到四种首要图标类型：
“主页”或“我的页面”标题前的提示性icon新闻或公示模块左边的标题图标页面加载图标动态提示icon
①现在，越来越的主流产品现已抛弃了标题前加图标这样的规划方式了。取而代之的是简略粗犷的将标题加粗加大。
在“我的页面”中仍是有许多产品保留了标题前添加提示性icon的规划方式。
京东金融 / 支付宝 / 饿了么
而之前呈现过的在标题前加竖杠的规划方式在APP端现已根本见不到了，在网页端仍是会时常碰到。
个人认为竖杠的规划不只过期，并且没有什么实际含义，有点为了装修而规划的感觉，在手机端页面这种寸土寸金的当地，这种含义不大的装修直接去掉反而会更好。
腾讯电脑管家 / 360
这或许也是为什么越来越多的产品不再标题前加icon的原因吧。究竟，满意夺意图标题就现已很好的起到提示效果，大标题这种规划方式也是iOS11要点晋级点之一。
当然，像一些动漫类或是文娱类、直播类的产品，添加icon反而会让页面更有生机，更风趣味性。仍是要依据详细产品而定。
斗鱼 / 腾讯动漫
②新闻/公示模块，在电商、招聘、日子类等产品中经常呈现。为了更好地让用户注意到，一般的做法是将左边标题进行从头规划。一同，此类标题图标能够融入产品的品牌基因元素，更好的杰出产品特色。
拉勾招聘
③加载图标是当网络速度受限，或页面内容加载过多等要素呈现时的提示性icon。多以小菊花图标为主。
微信
④动效规划在现在越来越遭到人们的注重，这种流通的表现方式和超卓的视觉吸引力遭到了许多人们的追捧。咱们会发现许多的产品由开端的呆板单调，变得生动丰厚起来。这儿面动效规划功不行没。
饿了么
马蜂窝
4. 气泡弹窗
气泡呈现的场景大致有两种：
一种是新用户第一次登录或是更新结束时。首要起到引导和教育的效果。
陌陌
第二种是新功用、新产品或新论题推出时，首要效果是提示和宣扬。
知乎
气泡的款式并不丰厚，大都仍是惯例的矩形或圆角矩形。配色多是以主色或其他辅佐色为主。不过，经过动效的融入，能够使气泡变得愈加吸睛，发生不错的吸引力。
除此之外还有一种气泡弹窗是Toast。也便是吐司弹窗。它开端呈现在安卓标准傍边，是提示弹窗的一种。初始形状是在页面底部显现的黑色提示窗。经过演化，即使是在iOS的产品中也呈现了相似的规划。方式现在演化成了下拉改写从上弹出提示，并且有可封闭的款式。
豆瓣
5. 页面指示器
页面指示器便是在banner下方排布的小圆点，会跟着banner进行同步轮播，轮播到当时页面时，对应的小圆点会有特别显现。
拉勾招聘
页面指示器的方式不只局限于小圆点。其他的方式包含矩形、异形、数字、延展图形等等。
网易考拉
一同，页面指示器还能够和进展条相结合，会让用户愈加清楚轮播一张图所耗费的时刻。
爱彼迎
抱负状况下，最多轮播四到五张banner图。也便是说页面指示器的小圆点也最多显现四到五个。电商类的产品轮播图会更多一些。
6. 导航栏
安卓导航栏最本来归于安卓标准傍边。现在，许多iOS产品傍边也开端运用这种导航栏款式来进行规划，而本来归于iOS标准傍边的分段挑选器变得不那么常见了。
这种导航栏的长处是除了点击外，还能够左右滑动进行切换，并且并没有对导航栏中的选项有过多的数量约束。
导航栏常见的款式包含文字加线条、底色或品牌图形等，款式丰厚。
荔枝FM / AcFun / 众安稳妥 / 飞猪 / 他趣
7. 音量条
现在许多产品都将本来弹窗方式的音量显现，改为固定在顶部的条状方式。意图是为了不影响用户的运用体会，能够更沉溺的运用产品。
8. 按钮
这儿的按钮以uber为例：
在登录时，输入完结手机号下一步的时分，按钮会变成等候状况。按钮与等候演示动效相结合，用流通的动画消除了用户等候时发生的负面心情，让全体简练的页面变得充溢生机。
因而，咱们在规划按钮的时分，结合场景，能够添加构思，让呆板的按钮变得风趣起来。
Uber
9. 提示性文字
咱们常能够看到在产品中的“我的”页面中，标题右侧会有一行文字提示。有些是单纯的提示性文字，而有些则会显现重要的数据，便利用户在不点开二级页面的情况下进行检查。
不只如此，规划师还能够对这类字体进行规划，或是添加图标来丰厚它的规划款式。
荔枝FM
二、功用类1. 标签栏
作为一个根底控件，坐落底部区域的标签栏现已演化出多种丰厚的款式。
①改写/回来顶部
瀑布流类的主页方式，为了便利用户更新内容，在刷到必定方位后本来的主页按钮都会变为改写状况。一些产品也将回来顶部一同做到了页面中。例如马蜂窝，就将回来顶部按钮放到了顶部右上角的方位，改写、回来两不误。
淘宝
马蜂窝
②添加按钮
除此之外，一些具有添加或是上传功用的按钮常常被固定在标签栏中心方位，能够让用户第一时刻发觉。
小红书
穷游
这些奇妙的规划不占用过多空间，又能很好的处理用户遇到的问题，十分便利。
2. 悬浮按钮
悬浮按钮最开端归于安卓标准傍边，之后在iOS产品中也被保留了下来。尽管在官方标准中并没有此类按钮，但由于他运用起来十分便利，并且国内许多软件安卓端和iOS端都是运用一套页面。因而，包含悬浮按钮等一些共性规划就都被保留了下来，在两个渠道均可得到运用。
马蜂窝
荔枝fm
马蜂窝
悬浮按钮不只仅能够完结点击等惯例操作，还能够作为保藏容器将更多地功用结合在一同。并且坐落屏幕右下角，便利用户运用。
3. 顶部扩展内容
扩展区域是我个人对它的命名，这部分区域在页面的顶部。由于空间满意大，所以许多产品能够添加更多的规划主意在里边。比方添加日期或许气候等。
像一些特定的产品会在顶部的区域放置一些特有的功用。比方蚂蚁金服的智能帮手等。
蚂蚁财富
UC浏览器
看抱负
4. 功用性按钮
此类按钮也是十分多见的。比方，导航栏右侧或标题栏右侧的更多按钮，它的方式多以三点为主，也有文字、阵列点灯款式。
三道杠icon多是抽屉导航代表图形；箭头根本都是下一页或回来的固定图标方式。以上图标均被广泛运用，现已成为了用户的一种固有知道。
因而，咱们在规划时能够在此根底上进行晋级或构思性优化。切不行过火推翻他们，否则会添加用户的学习本钱。
5. 下拉/上划
①下拉改写功用现已成为了一种默许操作。依据产品的特色定位，咱们会见到各种不同风格或是规划元素的下拉动效。规划师能够依据品牌延展元素，融入更多的主意，让页面变得更风趣。
马铃薯视频
②拿点融出资来举例，上划到页面底部会呈现宝箱图画。跟着咱们上划的起伏，宝箱会翻开呈现宝藏和品牌形象。上划究竟则直接跳转到另一页面。这种规划让我对页面底部的空间有了更多的主意。
点融出资
6. 视频进展条
视频进展条放置在视频底部，是视频类产品不行或缺的重要控件。当视频播映时会自动隐藏。除此之外，进展条方位上还能够集成其他功用。比方全屏、点赞、保藏、弹幕开关等。
哔哩哔哩的视频进展条：当拖拽操控按钮时，小电视icon会跟着咱们拖拽的方向而改动。尽管看似是很不起眼的规划，但在视频区域也能够左右滑动调整进展时，进展条的小icon就能很好的展现出来，充分体现其趣味性。
哔哩哔哩
三、视觉类
尽管说是视觉类的规划，但仍是要尽量防止参加过多无用元素，不能为了装修而规划。要结合本身产品，满意视觉平衡，要到达情感染规划的意图。
1. 缺省页
一般状况是，当时页面没有内容或无网络状况下呈现的页面。由于此页面没有内容，规划师发挥的空间就变得很大。依据产品特色和品牌延展图形，结合动效或插画等情感染规划，能够很好的丰厚页面内容。
点融出资
我想应该没有人喜爱看到短少内容的页面，这会给用户心思形成很大的落差。十分影响体会。因而，缺省页就变得分外重要。假如规划妥当，非但不会影响体会，反而会让用户喜爱上它。
除了视觉方面的规划，缺省页也能够添加改写按钮，在功用层面进行完善。
饿了吗
2. 头像
现在，许多的产品现已抛弃了呆板的默许头像，给用户更多的挑选。比方京东和小赢理财，就提供给用户多种头像挑选。
京东金融
小赢理财
这种添加默许头像的做法尽管是如虎添翼，但这种情感染的规划不只在视觉上充溢新意；一同，也让产品愈加风趣。
3. 辅佐元素
移动端UI都是遵照相对应的标准来进行规划的，因而大部分产品都不太会在这种寸土寸金的当地放置一些硬核的纯装修性元素。不过，规划师能够在卡片或是瓷片区域上参加自己的主意。
卡片/瓷片的布局大都是左字右图，而此类辅佐元素并不只仅是为了杰出视觉上的规划。更首要的是坚持卡片/瓷片的结构平衡，或是填充多于的留白。让全体页面在视觉上愈加丰满吸睛。
乐刻运动/ 众安稳妥
4. 切换动效
①标签栏动效
经过动效的运用，标签栏切换变得不再呆板。用户在频频切换页面时，不再觉得单调。
马铃薯视频
②导航栏动效
虾米音乐
四、总结
以上，便是我个人对手机移动端上关于“小元素”的总结。在收拾期间我还发现了其他有意思的规划，只不过它们并不归于“小”的这个特色，因而没有放进文章中。在体会产品的进程里，一些风趣的不错的规划主意，会对我之后的著作、作业项目带来很大的启示。我也期望能够有更多的朋友能够开端收拾并共享出来。
参阅文章
①这个控件叫：Badge/徽标/小红点
https://www.jianshu.com/p/292dab3898e9
②iOS和安卓他们的导航栏、分段器、Tabs究竟什么关系？！
https://www.jianshu.com/p/43553df6be3d
作者：FLYXMF，微信大众号：Fly Lab
上一年今天运营文章2023:万字揭秘：网红直播带货背面的挣钱隐秘！巨子、玩家、套路……(0)2023:深度揭秘“私域流量”挣钱公式！90后微信年赚8000万的隐秘！(0)2023:都在说GPT，这些ChatGPT相关常识你知道几个？(0)2023:《100个思想模型系列》019.诺依曼思想模型(0)2021:怎么编撰一份成功的商业计划书xmind(0)
微信扫一扫 
支付宝扫一扫 
