超详细Axure交互原型移动端元件库,APP高保真UI组件(手机移动端交互素材)

这篇具有很好参考价值的文章主要介绍了超详细Axure交互原型移动端元件库,APP高保真UI组件(手机移动端交互素材)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

原型组件对于产品经理或者UI设计师来说事半功倍,现整理了一批新款原型图 Axure 8 组件库、高保真UI手机移动端交互素材。帮助产品经理更高效地制作高保原型。(如需 Axure 9 组件请详见文末)

文末可下载完整原型组件包~包括常用组件、微信原生元件库、微信/支付宝小程序常用页面等,现分享完整的组件库,大家一起学习。以下为部分截图页面,组件库中均有交互,使用起来便捷,动态效果清晰。

axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析

axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析

axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析

axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析

axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析

01 动态图表控件

动态图表控件 ,通过Group内data和config中继器可更改数据及配置。

折线图、柱状图

条形图、饼图

环形图、面积图

漏斗图、堆叠柱状图

堆叠条形图、散点图

02 综合系列

表单界面

登录、注册、找回密码

通讯录列表、城市选择列表

列表左滑/右滑操作

滑屏插件、公告弹层、上拉/下拉刷新

动态组件详见文末原型组件包!

03 常用组件

色彩

使用以下的配色方案,可以让页面风格更加统一、清爽。
axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析
axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析

图标

页面中常用图标元素,下列图标为响应式图标,可调整尺寸及颜色。axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析

按纽

点击后会触发一个操作,同个页面只有一个主按钮。
axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析
axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析

常用元素

页面中常用的文字、图片等基础元素。
axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析

卡片

用于组织信息和操作,通常也作为详细信息的入口。

axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析

列表

单个连续模块垂直排列,显示当前的内容、状态和可进行的操作。一般由主要信息、主要操作、次要信息、次要操作组成。
axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析

九宫格

在水平和垂直方向,将布局切分成若干等大的区块。
​​​​axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析

状态栏

本元件为IOS状态栏样式,可根据需要定义状态栏的背景颜色,在设计原型时可根据需要选择是否使用状态栏。
axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析

导航栏

位于 app 内容区的上方,系统状态栏的下方,并且提供在一系列页面中的导航能力。
axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析

标签栏

位于 APP 底部,方便用户在不同功能模块之间进行快速切换。用作 APP 的一级分类,数量控制在 3-5 个之间。
axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析

气泡

在点击控件或者某个区域后,浮出一个气泡区域来放置更多的操作或者信息。
axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析

分段器

由至少 2 个分段控件组成,用作显示不同视图的显示;是 iOS 的推荐组件。
axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析

标签页

用于让用户在不同的视图中进行切换。标签数量,一般 2-4 个;其中,标签中的文案需要精简,一般 2-4 个字。
axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析

菜单

在一个临时的面板上显示一组操作。至少包含 2 个以上的菜单项。不应该被当做主要导航方式。
axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析

侧栏

可以从左侧或者右侧滑出的面板,可以用作用户资料页等。

​​​​​​​axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析

抽屉

用于在屏幕边缘显示应用导航等内容的面板。
axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析

分页器

分隔长列表,每次只加载一个页面。当加载/渲染所有数据将花费很多时间或者流量时使用。
axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析

轮播banner

每个APP基本都会用到的轮播banner。这边提供2种样式。一个是纯图片的,一种是带文字的banner。
axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析

04 信息输入

复选框

通常用于某选项的打开或关闭。
axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析

单选框

当用户点击一个单选按钮时,该按钮会变为选中状态,其他所有按钮会变为非选中状态。
axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析

文本输入

文本输入用于接受单行文本,支持通过键盘或者剪切板输入文本,通过光标可以在水平方向进行移动。axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析

滑动开关

在两种状态间切换时用到的开关选择器,一般只在列表中使用,可调整开关元件的主体来满足 APP 的视觉风格。
axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析

滑动选择条

允许用户在一个区间中选择特定值,例如:控制屏幕的显示亮度。默认状态下,左边为最小值,右边为最大值。
axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析

日期选择器

文本输入用于接受单行文本,支持通过键盘或者剪切板输入文本,通过光标可以在水平方向进行移动。
axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析

常用选择器

在一组预设值中进行选择。尽量使用选择器来帮助用户完成输入,避免用户通过键盘直接输入。
axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析

步进器

用作增加或者减少当前数值,可根据需要调整数字区间范围和每次增加的数值。
axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析

信息输出

徽标数

图标右上角的红点、数字或者文字。用于告知用户,该区域的状态变化或者待处理任务的数量。
axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析

axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析

步骤条

显示一个任务的进度;或者引导用户完成某个复杂任务。当任务复杂或者存在先后关系时,将其分解成一系列步骤。
axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析

时间轴

垂直展示的时间流信息。axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析

结果页

在整张页面中组织插画、图标、文字等内容,向用户反馈操作结果。用作非常重要的操作反馈,对于错误类型的结果页,页面中需要提供明确的行动点,例如:重新加载。axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析

手风琴、标签、走马灯、通知栏、提示条、异常页、表格、布局元素、视频播放器

动态组件详见文末原型组件包!

手风琴:可以折叠和展开的内容区域,对复杂区域进行分组和隐藏。

标签:进行标记和分类的小标签,用于标记事物的属性和维度,以及进行分类。标签文字必须显示完全。

走马灯:旋转木马,一组轮播的区域,常用于一组图片或卡片轮播。

通知栏:在导航栏下方,一般用作系统提醒、活动提醒等通知。需要引起用户关注时使用,重要级别低于对话框 ,高于吐司提示。

提示条:提示条用于展现需要关注的信息,当某个页面需要向用户显示警告的信息时显示。

异常页:在整张页面中组织插画、图标、文字等内容,向用户反馈异常提示。用作非常重要的操作反馈,对于错误类型的结果页,页面中需要提供明确的行动点,例如:重新加载。

详见文末原型组件包!

表格:绝大多数情况下、不要使用表格,移动端常见的列表数据、或类似表格的数据展示需求,使用列表组件代替。

布局元素:常见的图片布局元素,包含单图展示、两图展示、四图展示、五图展示等,另提供一个应用示例参考。

视频播放器:适用APP或wap页面中视频播放模块

05 信息反馈

进度条

需要准确告知当前进度时使用,表明某个任务的当前进度。如不需要准确告知当前进度时使用加载中组件。
axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析

加载状态

表明某个任务正在进行中。在某些特定场景下,提供有意义的文案,帮助用户明白哪个任务正在进行中。
axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析

模态框

用作显示系统的重要信息,并请求用户进行操作反馈,例如:删除某个重要内容时,弹出对话框进行二次确认。
axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析

吐司提示、动作面板、弹出层

动态组件详见文末原型组件包!

吐司提示:一种轻量级反馈/提示,可以用来显示不会打断用户操作的内容,适合用于页面转场、数据交互的等场景中。

动作面板:从底部浮出的模态,提供和当前场景相关的 2 个以上操作或者更多描述内容。

弹出层:从顶部或底部浮出的模态,提供标题和关闭按钮,展示和当前内容相关的信息或提供相关操作。

06 移动端常用页面

启动页、首页示例

常见的APP首页界面模板,由标签栏、轮播、宫格、卡片列表等元件组成。点击顶部登录可以跳转至登录界面获取登录状态。在手机模型区域内上下滚动鼠标滚轮可切换界面显示位置。
axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析

日历选择器、引导交互

日历选择器静态示例,可根据需要进行扩展,更多日历选择器示例请查看对应元件页面。
axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析

各类列表和功能页

包括:分类列表、发现列表、聊天列表、对话界面、用户中心、登录界面、注册页面、用户协议、找回密码、设置新密码、评价页面、意见反馈、粉丝列表、排行列表、动态图表、表单界面、吐司提示示例、侧栏交互示例等。动态组件详见文末原型组件包!

分类列表:常见的标签式TAB的交互示例,点击左侧标签可切换右侧区域内容;

发现列表:常见的内容列表界面示例,顶部区域标签支持滑动操作,可根据需要定义顶部元素;

用户中心:用户中心界面示例,相关功能入口为列表方式展示,点击底部“退出登录”按纽可以查看动作面板交互示例;

登录界面:常见的登录界面示例,可根据需要进行扩展,点击登录按纽可切换相关提示状态示例;

注册页面:常见的注册界面示例,点击发送验证码和注册按纽可切换相关提示状态示例;

找回密码:常见的找回密码流程及界面示例,点击发送验证码和下一步按纽可切换相关提示状态示例;

设置新密码:常见的找回密码流程及界面示例,点击提交按纽可切换相关提示状态示例;

评价页面:常见的服务评价界面示例,包含了标签、评分等元件,点击提交按纽可切换相关提示状态示例;

意见反馈:常见的意见反馈界面示例,包含了常见的选择器示例,点击提交按纽可切换相关提示状态示例;

表单界面:该表单界面左右有留白区域,其中包含了输入框、单选、复选、滑动选择、开头、标签选择等各类移动端常用表单组件;

吐司提示示例:吐司提示交互示例,在提示动态面板事件中设置了显示3秒后自动隐藏,可根据需要进行调整;

侧栏交互示例:常见的侧栏交互示例,可根据需要进行扩展,点击顶部的汉堡菜单图标可展开左侧侧栏;

抽屉交互示例:常见的抽屉交互示例,可根据需要进行扩展,点击顶部的汉堡菜单图标可展开左侧抽屉面板,点击筛选图标可展开右侧抽屉面板;

表单预览页:常见的表单预览页示例,常用于表单字段的列表展示,可根据需要进行扩展;

表格页示例:常见的表格页示例,主要用于展示结构化数据,绝大多数情况下、不要在移动端使用表格‘’

结果页示例:结果页向用户反馈操作结果,用作非常重要的操作反馈,更多示例请查看对应元件页面;

异常页示例:异常页向用户反馈异常提示,用作非常重要的操作反馈,更多示例请查看对应元件页面。

通讯录列表:常见的通讯录列表示例,可根据需要进行扩展,点击顶部搜索栏可切换对应状态;

城市选择列表:常见的城市选择列表示例,可根据需要进行扩展,点击顶部搜索栏可切换对应状态;

滑屏交互滑动:常见的滑屏交互示例,左右拖动时可切换内容区域;

滑屏交互翻转:常见的滑屏交互示例,左右拖动时可切换内容区域,该交互使用了动态面板的翻转切换效果;

列表滑动交互:列表滑动交互示例,左右拖动列表元素时,可切勿对应的操作方式;

下拉刷新交互:模似实际环境中向下拖动列表时刷新列表数据,按住鼠标左键向下拖动时触发交互效果;

上拉加载交互:模似实际环境中列表向上滑动时加载更多数据,按住鼠标左键向上拖动时触发交互效果。

07 微信原生元件库

WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。

包块:表单、基础组件、操作反馈、导航相关、搜索相关、层级规范。动态组件详见文末原型组件包!

axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析

08 微信小程序模版

首页、列表示例

首页:微信小程序导航栏右上角为小程序默认菜单,不可对其内容自定义,但可选择深浅两种基本配色以适应页面设计风格。

列表示例:可根据自身功能设计需要在页面内添加自有导航。并保持不同页面间导航一致,指向清晰,有路可退。受限于手机屏幕尺寸的限制,小程序页面的导航应尽量简单。
axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析axure手机原型模板,数据可视化,axure,信息可视化,数据可视化,小程序,ui,数据分析

09 支付宝小程序

宫格、卡片、面板、布局、结果页、异常页

-------------------------------------------------------------------------------------------------------------------------------

本文 RP8 资料获取方法:

链接:https://pan.baidu.com/s/1pjKls47liBnN0nTDRqvpOw?pwd=bv5u
提取码:bv5u

-------------------------------------------------------------------------------------------------------------------------------

需要 RP9 组件库的小伙伴可以阅读以下链接进行获取
Axure原型组件库,数据可视化动态元件库(超详细Axure9可视化素材)https://blog.csdn.net/qq_41790573/article/details/134730969文章来源地址https://www.toymoban.com/news/detail-756899.html

到了这里,关于超详细Axure交互原型移动端元件库,APP高保真UI组件(手机移动端交互素材)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • UI设计大作业 Axure原型 “美食分享制作”app高保真原型设计

    “美食分享制作”app是一款记录美食制作、分享美食、寻找美食制作教程为一体的美食应用。 ①厨艺爱好者:能够分享自己的经验、收集他人的创意并反馈。 ②对美食有高品质要求的人群:能通过搜寻功能获取最佳的食材、配方、制作方式等信息,并与他人互动进行讨论。

    2024年02月11日
    浏览(48)
  • 90套Axure原型模板源文件Rp高保真ui产品经理app web 网站案例模板(Axure9制作)

    素材信息名称:90+套Axure原型图设计源文件 格式:RP格式(Axure软件) 产品经理全套文档模板Axure8可以打开8、7版本制作 Axure9可以全部打开9、8、7版本制作 点此下载全部资源 后面还有很多 ——网站 阿里云网站.rp车辆违章处理.rp城市介绍网站.rp城市旅游网站.rp城市网站.rp城市

    2024年02月11日
    浏览(54)
  • 【Axure高保真原型】日历日期原型模板

    今天和大家分享日历日期的原型模板,包括月计划、周计划、日计划的原型案例,以及日期、时间、月份、区间选择器……具体效果可以点击下方视频观看 【原型预览及下载地址】 Axure 原型 备用地址:Untitled Document 【原型效果】 【原型效果】 【Axure高保真原型】日期日历原

    2024年02月09日
    浏览(56)
  • 【Axure高保真原型】日期时间选择器

    今天和大家分享日期时间下拉列表选择器的原型模板,该模板用中继器结合时间函数制作,所以可以获取真实的日历效果,具体包括哪一年二月份有29天,几号对应星期几,都是真实的。这个原型用Axure原生元件组成,所以样式以及后续的交互都可以根据需要修改 【原型预览

    2024年02月12日
    浏览(61)
  • 【Axure高保真原型】物理架构图模板

    今天和粉丝们免费分享物理架构图模板的原型模板~~~ 物理架构图是指在计算机系统、网络、软件应用等领域中,用于表示物理组件、设备、连接方式以及它们之间关系的图示。它以图形化的方式展示了系统的实际物理结构,常见的物理架构图元素包括: 1、服务器:表示物理

    2024年02月13日
    浏览(45)
  • 【Axure高保真原型】树控制内联框架

    今天和大家分享树控制内联框架的原型模板,点击树的箭头可以打开或者收起子节点,点击最后一级人物节点,可以切换右侧内联框到对应的页面,左侧的树是通过中继器制作的,使用简单,只需要按要求填写中继器表格即可,案例中最高6级树,具体效果可以观看下方视频或

    2024年02月01日
    浏览(52)
  • 【Axure高保真原型】多图表动态切换

    今天和大家分享多图表动态切换的原型模板,点击不同的图标可以动态切换对应的表,包括柱状图、条形图、饼图、环形图、折线图、曲线图、面积图、阶梯图、雷达图;而且图表数据可以在左侧表格中动态维护,包括增加修改和删除,维护表格信息后对应图表也会动态更新

    2024年02月10日
    浏览(46)
  • 【Axure高保真原型】卡片_拖动摆放换位效果

    今天和大家分享卡片_拖动摆放换位效果的原型模板,可以通过鼠标拖动任意卡片,对应卡片可以跟随鼠标移动,其他卡片会自动让出位置,松开鼠标后全部卡片自动对齐摆放。那这个原型模板是用中继器制作的,所以使用也很简单,只需要维护中继器表格的内容即可,具体效

    2024年01月24日
    浏览(49)
  • 【Axure高保真原型】中继器网格图片拖动摆放

    今天和大家分享中继器网格图片拖动摆放的原型模板,我们可以通过鼠标拖动来移动图片,拖动过程其他图标会根据图片拖动自动排列,松开鼠标是图片停放在指定位置,其他图标自动排列。那这个模板是用中继器制作的,所以使用也很方便,我们只需维护中继器表格的信息

    2024年02月10日
    浏览(52)
  • 【Axure高保真原型】中继器表格合并单元格

    今天和大家分享合并单元格的原型模板,包括两种模式的合并方式,转置和从下往上合并,两种方式都可以实现合并的效果,都是用中继器制作的,维护时只需要修改中继器表格即可生成对应效果,如果需要增加列(转置表格对应的是行),也可以参考原型,自行增加元件和

    2024年02月09日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包