axure移动端高保真元件库 售价99金币 原型

vigo 普通用户 2020-8-6 2242


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. 本机号码登录页

登录首页为本机号码登录页,里面有交互如下:
  1. 本机号码一件登录,鼠标单击时,设置动态面板跳转到首页;
  2. 其他手机登录:鼠标单击其他手机登录时,设置动态面板跳转到其他手机号登录页面;
  3. 注册:鼠标单击注册按钮时,和上面其他手机登录一致,登录和注册页面一致,方便客户注册;
  4. 账密登录:鼠标单击账密登录时,设置动态面板跳转到账号密码登录页;
  5. 三方登录:鼠标单击不同图标(支付宝、微博、微信、QQ),设置动态面板跳转至对应页面。


2. 其他手机号码登录页面

其他手机号码登录页面,也是注册的页面,里面有交互如下:
  1. 手机号码输入框获取焦点时,弹出密码键盘,密码键盘制作方式可以参考我之前的文章《axure教程:手机键盘》
  2. 获取短信验证码按钮默认禁用,当验证到手机号无误时,启用,启用后,鼠标单击时设置动态面板跳转至短信验证码页面。
  3. 手机号码判断方式,我们判断国内的手机号码,做了一个简单的验证,第一,输入必须是数字,第二,字符长度为11,第三,首位数是1。
  4. 刷脸登录:点击刷脸登录按钮,设置动态面板跳转至,刷脸登录页面。
  5. 三方登录:鼠标单击不同图标(支付宝、微博、微信、QQ),设置动态面板跳转至对应页面。
  6. 账密登录:鼠标单击账密登录时,设置动态面板跳转到账号密码登录页。
  7. 返回:鼠标单击返回按钮时,设置动态面板回到之前的页面。




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. 人脸登录页面

这里做了一个简单的模拟页面,交互如下:
  1. 在其他手机登录页面通过点击人脸登录,如果手机号码输入正确,设置动态面板跳转到人脸登录页;如果输入不正确,提示重新输入。
  2. 进入页面后会有动态提示文字,例如,没有识别到人脸等。设置文字多少秒后显示即可。
  3. 识别失败:等待n秒后,会弹出提示,识别失败。点击再来一次按钮,设置动态面板重新进入该页面即可,点击退出,设置动态面板回到之前的页面
  4. 返回:鼠标单击返回按钮时,设置动态面板回到之前的页面。


没有输入手机号码或者手机号码不正确时:


5. 账密登录页面

账密登录页面,交互如下:
  1. 账号和密码输入框获取焦点时,弹出密码键盘,密码键盘制作方式可以参考我之前的文章《axure教程:手机键盘》
  2. 密码输入框设置2个,可转为动态面板。一个可见,一个可见,点击右边的显示、隐藏密码的按钮时,分别显示对应的输入框即可。这里需要注意,任意一个输入框文本变化时,需要设置另外一个输入框与该输入框的文本一致。
  3. 账号和密码验证:设置一个中继器,里面有两列,一列账户名、一列为密码。点击登录按钮后,进行账号的帅选,如果中继器可见数据条数为0,显示错误弹窗;如果不为0,对比中继器密码和输入密码是否一致,如不一致,显示错误弹窗,如果一致,设置动态面板跳转至首页。
  4. 登录按钮:默认禁用、如果账户输入框和密码输入框均不为空,则启用。
  5. 验证码登录:鼠标单击验证登录码时,设置动态面板跳转到其他手机号登录页面。
  6. 注册:鼠标单击注册按钮时,和上面验证码登录一致,登录和注册页面一致,方便客户注册。
  7. 返回:鼠标单击返回按钮时,设置动态面板回到之前的页面。


账号密码错误时:


账号密码正确时:


6. 三方登录页面

支付宝登录页面,交互如下:
  1. 点击支付宝图标时,设置动态面板跳转至支付宝登录页面。这里需要做一个相识的页面。
  2. 点击授权按钮,设置动态面板跳转至首页。
  3. 点击用户协议,设置动态面板跳转至支付宝用户协议。
  4. 返回:鼠标单击返回或暂不授权按钮时,设置动态面板回到之前的页面。


微博登录页面
逻辑和支付宝登录页面一致:


微信登录页面
逻辑和支付宝登录页面一致:


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、上下滑动查看更多




登录后回复
最新回复 (0)
返回