hello,今天和大家分享移动端高保真元件库。共17个常用模块，近200个原件，包括输入框、搜索框、选择器、图片上传、分享、轮播、通知提醒、人机识别校验、菜单、标签引导页、登录页、中部内容列表、统计图表、地图、对话、评论、分享、视频播放器……非常的实用，能节省很多时间，希望你们喜欢哈。
效果介绍
01 单行内容文本框
单行内容文本框是最简单的一个文本框，对输入的内容没有任何的限制，和web端文本框不同的地方只是，在文本框获取焦点时，弹出键盘，键盘按键按下时，在文本框光标位置添加按键文本即可。
虽然单行文本框逻辑简单，但是后续的文本框都是以单行文本框的基础上变形或增加条件。
02 多行内容文本框
多行内容文本框主要是用于写文章、发博客等需要输入较长文字的地方，其原理是在单行文本框的基础上增加了行数，所以这里注意，在点击enter按钮时，要添加换行的逻辑，其他和单行文本框逻辑一致。
03 手机号码文本框
由于各国的手机号码格式都不一样，所以我以中国大陆的手机号码输入框为案例，讲解手机号码输入框的逻辑，首先手机号码是纯数字的，不能出现汉子、字母或者特殊符号。
所以，我们要对手机键盘进行控制，即只能输入数字，如果用户点击其他按钮如字母、特殊字符，则无需进行交互，其次需要判断手机号码的位数是否为11位，如果不为11位，则手机号码填写错误，提示客户重新填写，如果手机号码为11位，再进行下一步判断，判断收位数是否为1，如果不为1，则手机号码填写错误，提示客户重新填写，如果为1，则手机号码填写正确。
04 电子邮箱文本框
email输入框同样是在单行内容文本框的基础上添加判断条件。
首先我们需要判断@的个数，正确的电子邮箱有且仅有1个@，所以我们要判断电子邮箱文本框是否仅有1个@，如果不是的话，则输入的电子邮箱的格式有误，需要提示用户重新输入；
如果是的话，我们在判断是否有“.”，如果没有“.”，则输入的电子邮箱的格式有误，需要提示用户重新输入；如果有“.”，我们在判断“.”的位置，在@的后面必须由至少一个“.”，如果没有则输入的电子邮箱的格式有误，需要提示用户重新输入，如果以上全部条件符合，我们没有理由拒绝电子邮箱是正确的原假设。
05 身份证输入文本框
身份证号码输入框，需要在单行内容输入框的前提先加入限制条件和判断条件。
限制条件：只能输入数字和英文字母X（由于有些用户习惯输入小写x，所以同样可以输入x）
判断条件：首先判断输入内容是否为18位字符，如果不符合条件，提醒用户身份证号码输入错误；如果符合条件，在判断是否有英文字母x和X，如果有，那继续判断x和X是否仅在第18位，如果不是，提醒用户身份证号码输入错误；如果是，则简单的判断身份证号码正确。
为什么说简单的判断呢，因为身份证的组成是有不同的意义：
- 1-6位是出生地址编码，如果要复杂的做还要校验地址编码是否正确
- 7-14位是出生年月日，如果要复杂的做还要校验出生日期的格式是否正确
- 15-16位是出生顺序号，无需校验
- 17位是性别编号，无需校验
- 18位是身份证校验吗，也无需校验
但是就算将全部规则写进去，也有可能出现身份证号码和姓名不对，现实一般会连公安局联网核查系统，由系统告知我们输入的身份证号码是否正确，因为我们没有借口，所以就简单的做了。
06 密码文本框
密码文本框就是在单行内容文本框的基础上，加一个切换可视状态的效果，这个是最简单的密码输入框。一般的话还要根据安全性需求添加一些特定的条件，例如8-20位字符、需要同时具备数字、大小写字母、特殊符号等等，大家可以按照实际需求添加限制条件。
07 验证码文本框
这里的验证码指的是手机短信验证码，也是在单行内容文本框的基础上添加限定的条件，只能输入数字，然后位数有些是4位，有些是6位，可以根据实际需求来添加条件。一般的为了验证码输入框更新美观，我们都话把输入框样式改成如下如所示。
一、普通搜索原型
普通的搜索原型是最常用的搜索元件，也是其他搜索原型的基础，后面的搜索原型案例也是在改基础上拓展展开的，一般搜索搜索元件包含输入框+搜索按钮，移动端的搜索元件。
我们要注意设计交互，当输入框获取焦点时，显示键盘，失去焦点时，隐藏键盘即可。
二、分类搜索原型
分类搜索原型是在普通搜索原型的基础上添加了不同的分类，可以搜索指定的内容，这样的好处是在较多内容的时候，搜索的结果能比较精确。
详细设计可以参考下图微信搜索的案例，该案例可按朋友圈、文章、公众号、小程序、音乐、表情分类搜索指定内容，你们设计的时候按实际的需求添加类别即可。
三、标签推荐搜索原型
标签推荐搜索是在普通搜索的基础上，加了一个引导推荐的内容，主要是为了引导客户去查看某些内容，从而起到营销、引流的作用。
标签内容由系统管理员统一维护和更新，标签推荐搜索原型常用于电商平台、外卖平台等。
四、热搜推荐搜索原型
热搜推荐搜索和标签推荐搜索很像，都是引导客户去查看某些内容，但是热搜推荐是根据用户群的喜欢，给用户推荐最多人查看的内容。
而且与标签推荐搜索不同的是，热搜推荐的内容不是由后台写死的，而是由所有用户决定的，是实时更新和变化的，常用于微博、新闻等平台。
五、历史记录搜索原型
历史记录搜索是在普通搜索原型的基础上，由系统记住用户的搜索记录，用户下次搜索时，能够查看之前的搜索记录.可以对过去搜索过的内容实现快速搜索，用户也可以输入新的内容进行搜索，新内容通用被系统记录，历史记录按照时间的倒叙排列。
除此之后，用户还能管理历史搜索记录，删除单条或全部的历史记录。历史记录搜索原型常用语搜索引擎，例如百度、搜狗、谷歌等。
六、中继器表格内容模糊搜索原型
中继器表格搜索原型，主要是通过模糊搜索的方法，对中继器表格进行模糊搜索，让用户能够快速的找到对应的内容。
我们做原型设计的时候，只需要在普通搜索案例中加入中继器表格，并对对应的字段增加模糊搜索条件即可，这种搜索原型常用语通讯录、商品搜索等案例。
01 单选选择器
单选选择器按效果又可以分为，点击选择器、滑动选择器、多级选择器、具有搜索效果的选择器、开关选择器……
点击选择器：一般以底部弹窗的形式出现，如下图所示，通过手机点击选中选项，返回选择内容，具体选项内容可以在中继器表格中填写。
滑动选择器：滑动选择器的效果和点击选择器效果非常接近，区别主要在于，滑动选择器是将需要选中的内容活动至中部，然后点击确认按钮确认选中后返回选中内容。现在很多app使用这种效果，会比点击选择器炫酷，但是原理都是通过中继器制作选择内容，只不过是交互的方式不一样，所谓咸鱼白菜各有所爱。
分级选择器：在滑动选择器的基础上在加一级，比较适用于省份-城市或者品牌-产品这种类似的选择。这种选择器是由两个或两个以上的中继器制作而成，第一个中继器选择后，一般会对第二个中继器进行筛选，例如选择了广东省，那么2级内容就应该筛选掉广东省以外的城市。
当然了，也有些情况是不需要进行筛选的，例如时间，因为没个小时都是60分钟，所以这里的二级内容分钟就不需要筛选的操作了。
在日期选择器里面，又有一些不同，他的2级选择器是月份，因为每年都是12个月，所以这里的2级就不需要筛选，但是他的三级是天，因为每个月的天数都不同，而且闰年的二月有29日，所以这里的三级内容需要根据一级和二级选择的内容进行显示。所以具体情况还是要具体分析。
可搜索选择器：这种选择器一般用于选择项较多，例如全国的城市有几百个，一个个找很麻烦，所以这时就需要用都可搜索的选择器，根据用户输入的内容，对中继器进行模糊的搜索，让用户快速找到并选择内容。
开关选择器：这种选择器是单选选择器里最特别的一种，因为他只有两种选项，true or false，不适用于弹窗这么复杂，所以可以直接用开关按钮代替，常见按钮是授权或者性别选择等等。
02 多选选择器
多选选择器主要应用于类似爱好、特长、技能的选择，用户可以选择多个选项，所以多选选择器就不适用用滑动选择器和开关选择器来做。一般常用的多选选择器都是点击选择器，当然也有搜索效果的多选选择器
点击多选选择器：如果选项较少，一般也是以底部弹窗的形式出现，如下图所示，通过手机点击选中选中或取消选中该选项，返回选中内容，具体选项内容可以在中继器表格中填写。
可搜索的多选选择器：如果选项太多，就不太适合用上面的选择器，这是我们需要给他增加一个搜索的功能，根据用户输入的内容，对中继器进行模糊的搜索，让用户快速找到并选择内容。
一、上传导入图片
上传图片的一版分为单图上传和多图上传：
1. 单图上传的应用
单图上传一般应用于各种软件上传头像、或者上传身份证、银行卡等资料进行身份认证，如下图所示就是单图上图头像的一个案例原型：
2. 多图上传的应用
多图上传应用的场景就比较多了，商品介绍的图片、微博、朋友圈分享的内容、文章的插图等等。
下图是微博、朋友圈的分享案例，一般而言多图分享都有分享图片限制，其中以9张居多。
二、图片管理——分享发送、收藏删除图片
分享发送图片和上传导入图片的区别：上传导入图片一般上传到本软件的后台，后台需要保存图片；但是分享发送图片本平台是不需要保存图片的，只是简单的将它发送出去。
图片管理同样也是可以分为单图管理和批量管理，当然现在更多的是两种形式的结合。
1. 单图管理——分享发送、收藏删除
单图管理方式是：直接左右滑动查看大图，看到喜欢的点击收藏，系统保存到对应的文件夹，方便下次快速找到；如果看到不喜欢的可以直接删除图片；需要分享时，选择分享方式既可进行分享。
这种一般用于类似相册或者记录，可以一张张图仔细浏览。
2. 批量管理——分享发送、收藏删除
批量管理的优点是可以快速选择多张图片，并对其进行操作，给用户一个快捷便利的操作体验，一般应用于聊天时批量发图。
3. 图片管理——结合单图和批量管理
如下图所示，现在一般的图片管理原型会做成可单选查看大图，也可以多选进行批量操作，同时满足用户两种需求。
1. 顶端banner轮播图元件
这种是最常见最简单的轮播图了，一般会放在界面的顶端，或者有多个类别时，放在内容的最上面，将最精彩的内容，或者是广告推送给客户，一般应用于线上商城、外面平台、文章阅读平台等等。
这种图片轮播元件有两个交互，一各是自动轮播，间隔2-3秒自动切换下一张图；第二个是手动轮播，就是用户可以通过左右滑动切换图片。
2. 大小轮播图元件
大小图轮播元件其实就是在banner轮播元件的基础上加了图片放大缩小的效果，以及点击左右小图时移动的效果。
大小图轮播图更多的是应用于类似产品的选择上，比如同一款型号手机的不同颜色，这样能够让用户看到多种颜色，如果对某个颜色感兴趣，就可以直接点击查看大图。
另一种是相识产品的展示，例如不同款的手表、汽车等，让用户知道有多款产品可以查看。
当然了，根据需要还可以制作为横屏的大小图轮播元件。
3. 全屏轮播图元件
全屏轮播图元件一般用于软件启动的启动页，可以用于广告展示，告知用户新版信息及使用提示、介绍软件和公司的solgan和logo等等。
全屏轮播图元件和banner轮播元件基本一致，只不过改变了图片的大小，变成了全屏显示。
4. 上下滑动轮播图元件
上下滑动轮播图元件一般会应用于直播app、视频app等，不需要太多文字内容，让用户过目即可。如果用户手指停留在屏幕上时，停止滑动，松开继续滑动，用户也可以上下滑动查看内容。
5. 心形轮播图元件
心形轮播软件是就近很流行的图片动画，一般用于像珍爱网、世纪佳联、百合网等一些相亲app。
当然了在特殊节日如父亲节、母亲节、情人节也会用的上，该元件的交互主要是移动图片和放大缩小。
1. 顶部弹窗
顶部弹窗常用于消息提示，例如像微信新消息，或者其他软件推送的新消息，又或者向手机短信验证码这种也是属于顶部弹窗。那我们在设计的时候，要注意顶部弹窗显示时有一个向下滑动的动作，隐藏时有一个向上滑动的动作，除此之外，像短信验证码这种，还需要有复制按钮。
2. 中部弹窗
中部弹窗是消息提醒弹窗的重点，因为中部内容是用户注意力最集中的地方，所以重要的提示信息都会放在中部。所以中部提示也分了多种情况
- 确认取消提示：需要用户确认或者取消某个操作，例如转账支付的时候，一般系统都会让用户再次确认是否支付。
- 确认提示：这个的提示只有确认按钮，目的是强调某件事情，例如人脸识别失败时，提示用户正对镜头等等，起到一个强提示的效果。
- 多选确认取消提示：这个是在确认取消提示的基础上，可以让用户选择记住某项操作，例如退出某项软件时，是否要清楚历史记录等等信息，用户可以一键勾选。
- 自动隐藏提示：这个属于轻提示，也是经常用到的，作用是告知用户某件事情，用户不需要任何操作，提示在几秒内自动消失。例如密码输入错误时，系统提示用户名或密码错误，请重新输入，这种情况就比较适用轻提示。
设计思路：中部弹窗由图标（可省略，有会更美观）、提醒标题（可省略）、提示内容、按钮（由确认、取消、选择按钮，可根据实际情况选择）组成，制作时选择需要的内容后转为动态面板放置在手机中部位置即可，自动隐藏提示弹窗还需要设置自动隐藏时间。
3. 底部弹窗
底部弹窗一般用于app的授权、安装等情况比较多，它和中部确认取消弹窗性质相识，只是位置处于手机底部。
上面介绍的3种弹窗都是属于提示类型的弹窗，下载介绍一下等待弹窗。
4. 等待弹窗
等待弹窗一般是用于加载、上传等需要用户等待的情况，一般有以下几种分类：
有进度条的等待页面（下图左1）：这种一般适用于上传文件，或者需要等待时间较长，这是需要给用户一个返回，知道大概需要多久，避免用户关闭，刷新等。
没有进度条的等待页面（下图234）：这种是一般需要切换到新的页面，并且加载时间不会太长，一般适用动态效果让用户不容易不耐烦，一般可以使用卡通（下图2）、炫酷（下图4）的加载效果，如果想用户记住您们的品牌也可以使用下图三的加载效果，包括了app名称和solgan，能够让用户加印象。
等待小弹窗（下图5），这种加载弹窗一般适用于不离开本页面，但需要用户等待很多一段时间，例如像输入身份证号码和姓名后，系统需要联网核查确认信息是否正确，在等待公安局系统返回信息的时候，就可以使用这种等待小弹窗了。
01 普通的滑动验证
这种是验证是滑动验证里面最简单的验证方式的，只需要滑动滑块到最右端就能完成，这种验证方法的优势是操作简单，正是因为他简单，所以容易被破译。
02 拼图滑动验证
拼图滑动验证是在普通滑动验证的基础上加工行程的，原理和普通滑动验证类似，增加了拼图图片，而且每次拼图位置随机，这样可以增大破译的难度，同时增加用户验证的趣味性。
03 旋转图片验证
拼图滑动验证同样是在普通滑动验证的基础上加工行程的，原理和普通滑动验证类似，增加了图片随滑动旋转，摆正图片后验证成功，而且每次图片旋转角度随机，这样同样可以增大破译的难度，同时增加用户验证的趣味性。
04 手势验证
手势验证是跟着图片绘制手势即可，图片和手势是随机的。
05 随机码验证
这种是最常见的验证方式，随机生成字符，输入同样字符验证成功，对用户而言，操作会有点麻烦，而且现在ai自学习技术要破解这种验证方式也不难。
06 文字排序验证
这种验证是上面随机码验证的进化版，省去了用户输入的操作，直接按顺序点击即可，所以更受用户的欢迎。
07 短信验证
短信验证，通过系统向用户手机发送随机验证短信，用户输入验证码和短信一致才能通过验证。这种验证方式的安全系数高，但是用户操作难度大，需要等待短信时间，而且容易输错。一般向银行转账，或者手机注册登录时才需要用到该验证。
08 九宫格验证
九宫格验证一般是用户事先设置好手势密码，需要校验是正确画出手势即可通过验证。这种验证方式的安全系数高，而且操作难度不大。
09 指纹验证
通过验证用户的指纹的方式进行验证，安全系数极高，而且操作简单，但是要获取用户指纹的权限。
10 人脸验证
通过对面人脸特征的信息进行验证，这种验证方式安全系数最高，但是操作难度大，而且需要获取人脸的信息。
一、页面菜单
现在一些综合型的app（微信、qq等）由于功能太多，都会有专门的菜单页面，方面展示不同的内容，使用页面菜单页方便用户快速寻找到需要的内容。
我们在画这种页面菜单的时候，一般是使用中继器制作，由图标+文字的方式展示，点击菜单内容时跳转至对应的动态面板或对应的页面。
使用中继器制作的优点维护简单，不需要重新设置交互，新增菜单列的时候，只需要更新中继器表格即可。
二、侧栏菜单
侧栏菜单和页面菜单很像，只不过是把页面菜单变成在左侧弹出的菜单，可以自由显示和隐藏菜单，菜单显示时不会离开原来的页面，这种菜单即实用又美观。
同样的侧栏菜单同样是用中继器制作，所以维护成为也低。
三、弹窗菜单
弹窗菜单和前两者最大的区别是：弹窗菜单的菜单内容少，他不会像前两个菜单一样把大多数或者全部的内容页面展示出来，弹窗菜单只是对当前页面内容的补充或者是放一些常用的功能（例如扫码、搜索等），一般菜单行数为3-6行。
我们设计的时候，也是使用中继器来制作，方便维护。
四、锚点菜单
锚点菜单和上面3个菜单不同，上面三种菜单，点击菜单内容后都是跳转到对应的页面，但是锚点菜单点击后不跳转至其他页面，只是滑动至页面的对应位置，可以说是对本页内容的快速搜索。锚点菜单经常应用于购物、外卖等app。
我们使用Axure设计的时候，一般会用锚点或者移动的事件，点击菜单不同的内容移动到对应位置，由于每个菜单移动的位置不一致，所以用中继器制作反而不太方便，我们就用形状文字添加移动的交互即可。
五、顶部标签菜单
顶部标签菜单，这种标签菜单的优点是不暂用很多位置，不需要专门的页面，也不需要弹窗，只需要在顶部预留一行文字的位置即可，用户通过点击不同标签切换内容，方便快捷。我们同样用中继器制作，维护时更改表格文字即可。
六、底部标签菜单
底部标签菜单，和顶部标签菜单不一样，顶部标签菜单会把所有的页面标签显示出来。
但是底部的标签菜单一般只显示重要或者用户常用的页面，一般而言是4-5个标签。
底部标签菜单的好处就是方便用户使用，用户能够很快速的切换到常用的页面。我们设计底部标签菜单时，一般是由图标和文字组成，点击后会有个选中效果，并跳转至对应的页面。
1. 推广类引导页
推广类引导页，主要放的是广告，用户可以观看，广告或者选择跳过，具有以下几个功能
自动播放功能：
跳过广告功能：
点击广告查看详情功能：
左右滑动翻页：
2. 功能介绍类引导页
功能介绍类引导页，主要是向用户介绍此app的亮点，所以同样具备自动播放、左右滑动查看的功能，此外鼠标点击时，会进入下一张引导页。
3. 使用说明类引导页
使用说明类引导页，主要是向用户介绍如何使用该app，所以可以不会自动跳转，通过鼠标单击代表用户已明白，才会进入下一页。
1. 本机号码登录页
登录首页为本机号码登录页，里面有交互如下：
- 本机号码一件登录，鼠标单击时，设置动态面板跳转到首页；
- 其他手机登录：鼠标单击其他手机登录时，设置动态面板跳转到其他手机号登录页面；
- 注册：鼠标单击注册按钮时，和上面其他手机登录一致，登录和注册页面一致，方便客户注册；
- 账密登录：鼠标单击账密登录时，设置动态面板跳转到账号密码登录页；
- 三方登录：鼠标单击不同图标（支付宝、微博、微信、QQ），设置动态面板跳转至对应页面。
2. 其他手机号码登录页面
其他手机号码登录页面，也是注册的页面，里面有交互如下：
- 获取短信验证码按钮默认禁用，当验证到手机号无误时，启用，启用后，鼠标单击时设置动态面板跳转至短信验证码页面。
- 手机号码判断方式，我们判断国内的手机号码，做了一个简单的验证，第一，输入必须是数字，第二，字符长度为11，第三，首位数是1。
- 刷脸登录：点击刷脸登录按钮，设置动态面板跳转至，刷脸登录页面。
- 三方登录：鼠标单击不同图标（支付宝、微博、微信、QQ），设置动态面板跳转至对应页面。
- 账密登录：鼠标单击账密登录时，设置动态面板跳转到账号密码登录页。
- 返回：鼠标单击返回按钮时，设置动态面板回到之前的页面。
3. 短信登录页面
短信登录页面，里面有交互如下：
（1）模拟生成短信验证码，利用random函数生成6为随机验证码，具体公式：[[Math.floor(Math.random()*10),1]][[Math.floor(Math.random()*10),1]][[Math.floor(Math.random()*10),1]][[Math.floor(Math.random()*10),1]][[Math.floor(Math.random()*10),1]][[Math.floor(Math.random()*10),1]]
（2）设置动态面板状态改变时事件，即动态面板进入该页是，弹出显示短信验证码，5秒后自动隐藏短信验证码。鼠标下滑时，弹出显示。
（3）通过键盘输入验证码，原理和上面手机号码输入一致，输入框一定要是数字框，然后控制6位数字，输入6位数之后，需要进行判断，输入的6位数和验证码一致，则登录成功，设置动态面板跳转至首页；如果输入的6位数和验证码不一致，则清空输入的验证码，弹出提示，验证码错误。
（4）重新获取验证码，每次获取验证码之后，有60秒倒计时，60秒后，显示重新获取验证码按钮，点后后，重新发送并显示验证码。倒计时用动态面板做，设置2个state不断循环，循环间隔为1s，状态改变时，设置文本，target.text=target.text-1，if target.text>0。
（5）复制：点击复制按钮：设置输入的6位数=验证码。
（6）返回：鼠标单击返回按钮时，设置动态面板回到之前的页面。
短信验证码输入错误时：
短信验证码输入正确时：
短信验证码复制黏贴功能：
短信验证码60秒后重新发送：
4. 人脸登录页面
这里做了一个简单的模拟页面，交互如下：
- 在其他手机登录页面通过点击人脸登录，如果手机号码输入正确，设置动态面板跳转到人脸登录页；如果输入不正确，提示重新输入。
- 进入页面后会有动态提示文字，例如，没有识别到人脸等。设置文字多少秒后显示即可。
- 识别失败：等待n秒后，会弹出提示，识别失败。点击再来一次按钮，设置动态面板重新进入该页面即可，点击退出，设置动态面板回到之前的页面
- 返回：鼠标单击返回按钮时，设置动态面板回到之前的页面。
没有输入手机号码或者手机号码不正确时：
5. 账密登录页面
账密登录页面，交互如下：
- 账号和密码输入框获取焦点时，弹出密码键盘，密码键盘制作方式可以参考我之前的文章《axure教程：手机键盘》
- 密码输入框设置2个，可转为动态面板。一个可见，一个可见，点击右边的显示、隐藏密码的按钮时，分别显示对应的输入框即可。这里需要注意，任意一个输入框文本变化时，需要设置另外一个输入框与该输入框的文本一致。
- 账号和密码验证：设置一个中继器，里面有两列，一列账户名、一列为密码。点击登录按钮后，进行账号的帅选，如果中继器可见数据条数为0，显示错误弹窗；如果不为0，对比中继器密码和输入密码是否一致，如不一致，显示错误弹窗，如果一致，设置动态面板跳转至首页。
- 登录按钮：默认禁用、如果账户输入框和密码输入框均不为空，则启用。
- 验证码登录：鼠标单击验证登录码时，设置动态面板跳转到其他手机号登录页面。
- 注册：鼠标单击注册按钮时，和上面验证码登录一致，登录和注册页面一致，方便客户注册。
- 返回：鼠标单击返回按钮时，设置动态面板回到之前的页面。
账号密码错误时：
账号密码正确时：
6. 三方登录页面
支付宝登录页面，交互如下：
- 点击支付宝图标时，设置动态面板跳转至支付宝登录页面。这里需要做一个相识的页面。
- 点击授权按钮，设置动态面板跳转至首页。
- 点击用户协议，设置动态面板跳转至支付宝用户协议。
- 返回：鼠标单击返回或暂不授权按钮时，设置动态面板回到之前的页面。
微博登录页面
逻辑和支付宝登录页面一致：
微信登录页面
逻辑和支付宝登录页面一致：
QQ登录页面
逻辑和支付宝登录页面一致：
7. 用户协议和隐私条款
鼠标单击用户协议按钮时：设置动态面板跳转至用户协议页。
鼠标单击隐私条款按钮时：设置动态面板跳转至隐私条款页。
返回：鼠标单击返回按钮时，设置动态面板回到之前的页面
1.1.1投资产品类中继器列表
1.2文章类列表
1.3视频类列表
1.4服务应用类列表
1.5商品商品类列表
1.6消息好友类列表
1.7音乐类列表
1.8其他列表
1. 运动健康案例
2. 资产理财案例
3. 用户画像案例
4. 游戏评分案例
通过上面的案例，我们能明显的体会到可视化视图的好处。随着5G技术的发展，人们使用手机的时间越来越多，所以手机版的可视化视图成了app软件里必不可少的一部分。所以，在我们做原型设计的时候，需要我们灵活的运用可视化视图。
可视化视图看起来好像很高大上的东西，实际上就是由多种统计图表来组成，例如柱状图、条形图、散点图、折线图、饼图、雷达图、漏斗金子塔图，热力图，水泡图……下面我就和大家介绍一下不同图表的作用，以及在什么情况下用什么样的图标更为恰当。
1）柱状图类图表
从下图可以看出，柱状图的图标有很多，包括单柱状图、组合柱状图、堆叠柱状图、百分比柱状图、瀑布图、阶梯图、直方图等等。
单柱状图：
单是一种以长方形的长度为变量的统计图表，通过长方形的高度来衡量变量的值。例如某一商品不同月份的销售额。
组合柱状图：
组合柱状图是在单柱状图的基础上，用不同颜色的长方形显示两个或两个以上变量的值，能更加直观的将变量进行对比。例如不同商品的销售额。
堆叠柱状图：
和组合柱状图很像，只不过是将多个变量的值堆在一起，能够清楚的看到总量的对比。
百分比堆叠柱状图：
百分比堆叠柱状图，在堆叠柱状图的基础上转化为百分比，不能看出总量的对比，但是更清楚的看到多个商品的占比，原理和饼图类似，可以说是多个饼图组成了宝粉笔堆叠柱状图。
瀑布图：
瀑布图能够显示正负值，适用于收入支出的案例。
阶梯图：
阶梯图普遍用于在不同的数值范围内的变量取不同的值，例如阶梯水费、电费，个人所得税率图。
直方图：
直方图比较适合研究分布状况，例如正太分布等。
2）条形图
条形图分成单条形图、多条形图、堆叠条形图、百分比堆叠条形图、甘特图。
其实条形图就是横过来的柱状图，大部分应用一直，但是条形图更适合做排行图和甘特图。
排名图：
排名图由高到低降序排列，更直观的各个变量的占比和排名。
甘特图：
适合用于项目排期等计划图标。
3）散点图
散点图就是把各个值在对应的坐标上显示出来，常用于做模型分析，例如回归分析等。
4）折线图
折线图主要是体现变量的变化规律的，例如基金的历史收益等等。
5）饼图
饼图、环形图主要是对比各个变量的占比。
6）雷达图
雷达图更适合做一个综合的分析，例如说学生是否全面发展，或者说是游戏的评分等等。
7）漏斗图和金字塔图
漏斗图：
漏斗图主要是用来衡量策略是否有用的，例如投放广告有10000人观看，从观看广告、浏览网站、加入购物车、生成订单、支付订单、到最终完成交易的各个阶段的人数。
金字塔图：
金字塔图更实用与类似人体所需营养的分布，这样的案例，或者说是一个企业的架构图，高层、中层、底层的人数和占比。
8）水波图
水波图多数用于反馈实时数据，例如实时的销售量。
查看聊天记录
2. 发送对话内容
1. 播放视频
2. 上下滑动切换视频
3. 关注
4. 点赞
双击屏幕或点红心点赞：
5. 查看评论
每一个有自己对应的评论，也是用中继器可编辑评论内容。
6. 发表评论
7. 转发分享
1、分享效果
分享之后，分享数也会自动加一，细节处理很得当。
2、评论效果
可以点赞评论，也可以添加评论，不同的文章有各自不同的评论，不是写死的，你们可以试试。
3、点赞效果
可以点赞或者取消点赞，点赞数会自动变化
4、上下滑动查看更多
收藏的用户（3）
X
正在加载信息~
最新回复 (0)
