无论是作为UI设计师还是交互设计师，我们日常工作最大的输出就是设计稿，而大部分同学更多的是负责移动端界面的设计，无论是APP、小程序又或者是移动端网页，我们通常都会使用各种熟悉的组件进行设计，而今天我想跟大家分享一些常用的移动端组件以及它们作用，希望大家有所收获~

前言：元件与组件的区别

在文章分享之前我希望先跟大家讲讲元件与组件的区别，我看到很多人甚至网上大部分的文章都会把元件与组件的概念混淆，所以这里我先给大家理清两者的区别。

元件：元件是页面布局中最小的元素，就例如在前端中标题标签<h1>是一个元件，<a>连接是一个元件，下拉框是一个元件，分割线也是一个元件等等..

组件：组件则不一样，组件是多个元件的组合则称作组件，像导航栏、标签栏、搜索栏等多个元件组合在一起使用那就叫组件。因此你们很难在网上找到一些关于“最全的移动端组件”之类的文章介绍，因为元件本身的种类就非常的多（文本、连接、分割线、选择框、单选框、复选框等数不胜数），而它们的组合更是无穷无尽，但好在并不是所有的组件都能产生好的用户体验，因此便有了一些常用的组件。

因此在文章下面的内容你们不会看到一些按钮、分割线、下拉框之类简单、单一元件的介绍（我相信你们也不需要），而是一些关于我们常用组件以及它们究竟有什么作用，希望大家能从中学习到知识。

1. 一、导航栏

导航栏的作用在于实现APP内各功能的快速切换，它就好比如书本或者文档的目录，能让你随意切换到你想要的功能上，而目前移动端上流行的主要几种：1、标签式导航；2、舵式导航；3、抽屉式导航；4、顶部导航（分段式导航）。下面我会给大家一一介绍它们的区别与用法。

（1）标签式导航（最常见的导航栏）

标签式导航是目前移动端中最常用的导航方式，它的特点是占据页面空间较大，用户可以通过点击操作轻松在各功能上进行切换，并且数量一般不会超过5个（为啥不会超过5个？回顾一下7±2法则），操作便捷。

而它一般都会以icon+文字的形式进行呈现，偶尔也会以纯icon的形式呈现（但这种形式对于中老年或者理解能力不强的用户来说，体验非常糟糕，所以用得比较少），例子随处都能找到，例如微信、饿了么、美团等..

（2）舵式导航（短视频等发布类产品）

舵式导航跟标签式导航相似，但形状类似于船舵，一般是中间的功能标签相对于左右两边标签来说会明显突出，经常以颜色及大小来展示核心，提高用户点击欲。

既然舵式导航与标签式导航相似，那为什么还演变出了舵式导航？答案是功能模块的权重问题，在标签式导航中，无论是多少个导航（3、4、5个）它们的权重都是一样的，没有那个比较重要，而舵式导航则不一样，中间功能模块的权重明显比其他功能的要大，例如皮皮虾APP中首页、发现、发布、消息、我的这5个功能模块中，发布这个功能权重明显比其他功能要大，因为作为短视频产品，它们更重视用户的作品分享，就好像站酷一样只要有了好的内容才能不断吸引用户流量，因此发布作品是整个产品的核心功能。例子也特别常见，如站酷APP、皮皮虾、抖音等发布类产品。

（3）抽屉式导航

抽屉式导航的用处其实就跟抽屉一样，专注于一个字“藏”，把一些次要功能整合在一个图标中藏起来，让用户更专注于核心功能，大大降低了导航栏在页面中的面积占比，使得界面简洁易用。

说到抽屉式导航大家第一时间会想到什么应用？是的，最经典的就是以前的打车软件，以前的打车软件因为功能单一，除了打车以外，其他钱包、历史记录、使用指南、我的订单等功能用户使用频率非常的低，因此使用抽屉式导航既能让用户专注于打车业务，又能把那些低频而又必要的功能藏起来，从而受到一致打车软件的热爱。

但有细心的同学发现，我刚刚说的是以前的打车软件，而现在越来越多的打车软件逐渐放弃了抽屉式导航而选择其他的导航方式。原因很简单，一是因为现在的打车软件提供的业务功能逐渐多样化，不再像以前一样单一了，你们打开滴滴看看（什么？滴滴居然还能用？），里面除了打车服务以外还有骑行、搬运、加油、福利等等功能，如果继续使用抽屉式导航根本承载不了如此多的信息。第二点也是最重要的一点，就是在抽屉中的功能模块转化率极低，意思就是那些打车软件公司发现，用户使用过程中压根就没有发现居然还有抽屉导航又或者是发现了也没有去点击，而导致其他的功能做了跟没做差不多（这难道不是它本来的优点吗？怎么现在变成缺点了？对不起，时代变了大人），因此随着这些软件业务功能不断的扩展，逐渐的也放弃了抽屉式导航。

例子：目前花小猪、T3出行还在采用抽屉式导航，其他的我看了好几个都已经没有在用了。

这里留你们一个小思考：你们觉得标签式导航与抽屉式导航可以同时存在吗？如果有请找一个例子在评论区告诉我。（给你们一个提示，腾讯的产品）

（4）顶部导航（分段式导航）

很多人会把顶部导航与分段式导航分开，但是我觉得这两个组件特点其实差不多，它们普遍都是作为二级导航使用，占用空间少，都是以纯文字的形式出现。

顶部导航使用场景也到处可见，例如酷狗音乐首页、QQ音乐首页以及iPhone的通话记录页面等。它的用处一般都是一级导航下面有两个以上相对重要的二级导航，这时候顶部导航就发挥着它的作用。

2. 二、滑动标签栏

随着开发技术的越来越成熟、移动端功能模块越来越多，滑动标签栏也开始火了起来。滑动标签栏一般分为两种，横排标签与列排标签，它们的优缺点我在下面展示给大家。

（1）横排标签

随着产品功能模块的越来越多，而页面承载的信息却相对固定，产品设计师发现难以在页面上进行排版，因此设计出了可滑动标签。

那么横排标签主要的特点就是占据空间少，却能承载大量的功能模块信息，好比如腾讯视频顶部的滑动标签，它虽然只占据了10%不到的空间，但用户可以通过左滑选择跳转到其他功能模块中。

相应的它的缺点就是功能模块越多，越到后面的功能转化率就会越低，达到一定的数量后，转化率几乎为零。还是腾讯视频的例子，你们打开应用后滑动标签栏看看，除了订阅、精选、发现、电影、动漫等功能外，其实后面还有音乐、娱乐、世冠、游戏、生活等.但这些功能我相信你们几乎就没有用过，更过分的是，你们肯定不知道滑动到最后居然是个草场地？草场地是个啥？别问我，估计腾讯视频的设计师自己都纳闷。

（2）竖排标签

相对于横排标签，竖排标签更多使用在商品的分类选择上，刚刚说了横排标签随着功能模块越多，越到后面的功能转化率就会越低，而这种设计通常适用于对功能权重大小不一的设计，但是针对于商品类产品，例如在叮咚买菜上购买水果时，西瓜、热带水果、提子、榴莲、桃李等，它们之间是没有权重关系但标签却非常的多，如果这时候还选择横排标签的话排到最后的果盘、柑橘就会因为找不到而无人会购买。

因此竖排标签的优点就是极大的提高后面功能模块的转化率，用户可以快速切换到目标功能模块当中，操作简单方便。缺点就是占据页面空间比较大，虽然提高了后面功能模块的转化率，但是如果功能模块还是比较多的话，转化率问题依然还会存在。

这里留给你们第二个思考的问题：竖排标签与横排标签会同时存在吗，如果会，那在什么场景下出现？

3. 三、搜索

搜索功能几乎可以说每一个应用产品都不可或缺，也是用户常用的功能，用户可以通过搜索功能在庞大的内容数据中精准找到自己需要的信息。但大家有没有发现一个细节，就是市面上的产品无论是点击搜索框还是搜索图标进行搜索，超过99%它们都是另外跳页面进行搜索的，不知道大家做设计的时候有没有留意，仅仅停留在直接抄的阶段。

为了探讨是否程序本身就设置好了自动跳转还是后期设计的，我抱着严谨的态度分别咨询了IOS童鞋与Andriod童鞋，得出了同样的答案就是“不一定需要另外跳转页面，并且还能实时模糊搜索”，因此可以得知并非一定需要跳页面，并且还能在原页面进行快速的模糊搜索。

但是为什么它们还要另外跳页面进行搜索呢，两位童鞋也给出了合理的答案，就是大多数的搜索结果排版与原页面并不一致，因此搜索结果页面往往都需要跳转页面，既然本来就需要跳转页面，那么最好就是刚开始搜索的时候就跳页面进行搜索，这样还能展示搜索记录以及推荐内容等，极大提高用户体验与产品内容分发。

行，既然知道了为什么大部分的搜索都需要跳新页面，那我引出第二个问题，就是既然结果都一样，为什么市面上还会区分搜索框搜索和搜索图标搜索呢？搜索框搜索还那么占据页面空间并且没有实际意义，直接放一个搜索图标他不香吗？答案是搜索功能的权重大小问题，你们只要信心观察就可以知道，像淘宝、淘宝等电商类面对巨大的商品信息，用户第一时间点开的就是搜索（淘宝曾经公开过90%的淘宝用户行为都从搜索框开始），因此搜索功能的权重非常的大，而对比与一些像想BOSS、拉钩等推送内容相对固定的产品，搜索功能则可以弱化一些。

但其实到最后，我相信很多人都功能权重很难去判断，也没有一个明显的界限，因此交互设计师就更需要对搜索功能进行数据收集、分析，像淘宝一样用数据说话。

4. 四、筛选

曾经有人说过，筛选功能是用户体验更高的搜索，同样也是对搜索功能的一个补充。这句话的理解是，筛选与搜索的用处都是对目标内容的精准查找，而筛选功能可以做到对内容特征的更精准查找。举个例子：目前市场上使用筛选功能的产品不算多，但是有一类产品非常典型—求职类产品，例如我要找交互设计师岗位，除了搜索交互设计师以外，我更希望针对薪资（20K以上）、上班距离（5KM以内）、公司规模（世界五百强）等要求进行信息的筛选，因此筛选功能更多用于搜索后的进一步查找。

那么对于筛选功能使用户体验是更高级的搜索的理解是，你们会发现移动端的筛选大部分都是条件的点击选择或者是滑动选择，很少是条件的输入，这样用户在使用的过程中就能够清晰明白自己的目标是啥，而不像搜索一样漫无目的。

但筛选与搜索有着不同的用法。筛选常在条件固定并且能够进行组合的情况下进行使用，例如我想买一条裤子，我不能搜索凡凡同款（明星同款）20块钱以下（价钱）黑色（颜色）超短裤（长短），这些搜索条件都是用户经常使用的，而对于这些固定信息的搭配查找，筛选功能恰好能满足用户体验。

目前市场上的筛选形式也有很多：抽屉式筛选、垂直下拉筛选、全屏筛选，但其实功能都是大同小异，不一一介绍了，例子就是典型的求职软件（BOSS、拉钩、51等..）

5. 五、弹窗

弹窗，它的功能意义在于中断用户当前的操作并对其做出补充（模态弹窗）或中断用户当前操作并对其做出反馈（非模态弹窗），它更像是用户的【即时任务】或【即时反馈】，它的形式就两种，模态弹窗与非模态弹窗。

模态弹窗它的特征就是当它出现在页面中时，用户可以对其做出反馈操作，最常见的就是我们经常进入APP时的广告弹窗、活动弹窗等，我们是可以通过点击对其关闭的。一般模态弹窗层级比较高，用户需要完成弹窗任务才能继续页面操作，所以很多时候用来发送一些权重比较高的活动信息。

非模态弹窗常见的就是操作后的【操作成功/操作失败】提示，这些就是非模态弹窗，相对于模态弹窗，非模态弹窗层级较低，不会打断用户操作，停留的时间也很短，所以用来做提示反馈用非常合适。例如BOSS上下拉刷新信息时，软件就会出现【推荐职位已刷新】提示。

但是，今天弹窗的重点并不是模态弹窗与非模态弹窗，因为网上关于弹窗设计的文章一大把，不想给大家再重复，我想给大家讲解一个大家非常熟悉但是大家又不知道叫什么名字的组件—底部弹窗。

底部弹窗

底部弹窗顾名思义就是出现在页面底部的弹窗，它属于模态弹窗的一种，近几年来受到众多设计师的追捧。我想问问大家，你们知道首次使用底部弹窗的应用是啥吗？或者是你们第一次见到底部弹窗是在什么应用上？其实底部弹窗很早出现在淘宝购买商品时输入密码页面中，当时淘宝的产品经理通过数据分析发现，大部分用户点击【提交订单】接着到【输入密码】的过程中，很多人在【输入密码】这个步骤中犹豫或者放弃了，导致商品购买率偏低，而导致这个原因是因为当时点击【提交订单】按钮后需要跳转页面才能输入密码，而这个过程要是网络不好或者手机卡顿，用户购买欲望就会降低，因此自从使用了底部弹窗之后，淘宝购买商品的转化力一下提高了十几个百分点。（这里补充一个小知识，现在淘宝支付不仅仅做了底部弹窗，还提供了100元以下免密支付，也就是说你稍微动一下手指，钱包的钱就会流到别人的手上，你别看这小小的100元，未来肯定会随着经济增长调成到500、1000甚至更高，同理，今天你小小的成长也会为未来强大的你打好基础）

因此，底部弹窗的优点就是为页面提供更多的操作空间，提高业务功能的转化率。例子也特别的多，淘宝、咸鱼的商品支付、夸克的设置等...

最后总结

好啦，本来还有写了很多组件知识与大家分享，但是作为交互设计师应该明白，用户在长时间阅读文字的时候会产生疲倦感，因此越到后面的内容阅读转化率就会不断下降，我的老师曾经跟我说过，交互设计是一门善于发现细节与积累知识的职业，没有人能一蹴而就，所以如果这篇文章能你们学习到知识，那就赶紧评论告诉我上面两个思考题的答案，如果大家喜欢，我会把后续知识分享给大家，希望与大家共同进步，共勉~~

Powered by Froala Editor