快好知 kuaihz订阅观点

 

APP吐司功能,如何用Axure画出来?

吐司用来反馈信息或临时提醒用户,俗称提示条。

典型应用场景

原型画法(无交互)

吐司通常包含背景、文案、图标,位于页面中间。

1、先画背景。从默认元件库拖动“矩形3”到工作区合适位置,修改尺寸为195*195,修改圆角半径为20,修改填充色为#000000,不透明为50。

2、再画文案。从默认元件库拖动“三级标题”到背景中合适位置,然后双击输入文字“吐司文案”,修改字体颜色为#FFFFFF。

3、再画图标。从默认元件库拖动“图片”到背景中合适位置,修改尺寸为60*60。

4、生成原型HTML并在浏览器中查看效果。

原型画法(有交互)

吐司的常见交互效果:

触发一定条件,显示吐司

等待了几秒后,隐藏吐司

以“进入新页面都会检测网络。如果网络不好,就提示用户。”来讲解吐司的交互如何画出来。

5、在之前步骤的基础上,双击吐司文案,修改为“网络不稳定”。

6、选择以上元件,然后右键进行组合。

7、点击该组合元件,设置为隐藏。这样查看原型的时候默认看不到它。

8、点击工作区空白区域,然后设置“页面加载时”事件,添加动作“等待”,组织动作“1000ms”,代表刚进入页面。

9、继续添加动作“显示”,组织动作“勾选该组合元件”。代表网络不好告诉用户,建议提前命名该组合元件方便找到它。

10、继续添加动作“等待”,配置动作“等待时间2000毫秒”,代表该提示显示一段时间。

11、最后添加动作“隐藏”,配置动作“勾选该组合元件“。

12、生成原型HTML并在浏览器中查看效果。

添加到Axure元件

不同场景下的吐司功能,标题不一样,样式相对固定。

作者根据多年PM经验,总结出3种常用的“吐司”,添加到Axure元件库。

吐司(文字)

吐司(图文)

吐司(图标)

注意事项

吐司可以只用文字表示,也可以文字加图片。

吐司的样式一般是圆角矩形,也可以是直角矩形。

吐司通常位于页面中间,也可挪动位置到屏幕底部或者紧贴导航栏。

提供源文件下载学习https://pan.baidu.com/s/1lOysRY59IOQN7Hhl7jrI3g

相关阅读

APP分段控件功能如何用Axure画出来

APP工具栏如何用Axure画出来

APP单选功能如何用Axure画出来

APP开关功能怎么用Axure画出来

APP九宫格如何用Axure画出来

APP上导航如何用Axure画出来

APP下导航如何通过Axure画出来

常见的列表页如何用Axure画出来

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:吐司  吐司词条  何用  何用词条  出来  出来词条  功能  功能词条  Axure  Axure词条  
原型

 Axure教程:让中继器像数据库...

如何让中继器也可以像数据库一样,实现数据查询、修改、判断等功能呢?文章为你解读。在用Axure制作原型的过程中,大部分人都将中继器当做数据存储的工具,可以快速格...(展开)

原型

 Axure 原型 | 关于中继器...

中继器N早做的Demo,现在拿出来和大家分享这个是第一次接触中继器的时候写的Demo,后续的产品设计中几乎未使用到Axure的这个元件,现在开始教程:【先睹为快...(展开)

原型

 Axure教程:后台产品导航栏

本次设计以bilibili创作中心为例,主要给大家介绍二级和三级导航栏。产品经理在做一个完整产品的原型设计时,都需要一个导航菜单栏。这种菜单栏看着简单,但对于初...(展开)