原型设计

如何绘制可以校验的输入框?

如何才能解决原型设计中输入框校验的问题?本篇文章里,作者就对如何绘制可以校验的输入框的相应流程进行了梳理,一起来看一下吧,也许会对你有所帮助。在原型设计中,输入框校验效果设计是一件令人头疼的事情,但是可以通过使用bootstrap元件库中的输入框设置,可以轻松解决输入框校验的问题。一、效果预览预览地址:http://atomstudio.cn/demos/boot

Axure实战规范分享:后台web网站

后台web网站是互联网人工作中经常会用到的,本文作者分享如何用Axure做后台web网站,一起来看一下吧。以下规范数值仅为参考,具体请根据自身产品灵活运用。一、框架尺寸设计目前 PC 端用户屏幕分辨率主要为:1920*1080、1600*900、1440*900、1366*768、1280*720等。那么我们的原型设计稿应该参考哪个尺寸设计呢?这需要我们根据具体情

【Axure教程】多角色登录原型

多角色登录是很多系统都需要具备的功能,例如在招聘网站里,登录的角色包括、求职者、招聘企业的hr、猎头、内部员工等等。本文作者分享了如何在Axure里面制作多角色登录的原型模板,希望对你有帮助。多角色登录是很多系统都需要具备的功能,例如在招聘网站里,登录的角色包括、求职者、招聘企业的hr、猎头、内部员工等等。所以今天我们就来学习怎么样在Axure里面制作多角色登录的

Axure高保真教程:中继器版视频播放列表

在日常使用软件的过程中,视频列表是一个十分常见的功能模块,那么,你知道如何利用中继器来设计出视频播放列表吗?本篇文章里,作者就如何利用Axure中继器实现视频播放列表一事做了总结,一起来看一下。视频列表是平台、系统里面的常用功能,所以作者今天就教大家在Axure里面怎么用中继器制作一个视频列表的原型模板。一、制作完成后应具备以下效果移入效果,移入对应的视频,视频封

【原型元件】下拉菜单事件动作——设置详解

下拉菜单是产品的一个基础功能,能够给用户提供多种选项。本文作者介绍了如何设计构建一个下拉菜单的动作,希望对你有帮助。一、效果预览原型预览地址:http://www.atomstudio.cn/demos/elementui_dropdownmenu/二、准备工作已安装xstar组件库2021.12.24版(或更高版本)。三、详细教程1. 功能说明鼠标经过按钮时,显

Axure9 教程:滑动拼图验证登录效果

很多网站都会设置登录验证以防止机器人登录,滑块拼图验证是比较常见的一种形式。本文作者用Axure9来制作一个带拼图验证的完整登录效果,希望对你有帮助。一、交互效果说明1.在账户密码输入界面点击登录,进行拼图验证,拖动滑块,上方拼图块随滑块同步移动,拼图失败显示文字提示,滑块及拼图返回初始位置;2.拼图验证成功后返回账户密码输入界面,并通过上方文字提示账户密码输入的验证

管理后台自适应框架一(顶部导航)

用户进入一个新产品之后,导航栏是最先看到的功能之一,也是最常用的功能之一。本文作者介绍了如何Axure构建顶部导航,希望对你有帮助。后台管理自适应原型框架搭建将分为顶部导航、侧导航及顶部+侧导航几篇文章来介绍,原则上只提供实现思路及案例,不提供源文件。下面我们先来介绍顶部导航的自适应原型框架Axure实现思路:创建新页面,命名“管理后台自适应框架一”,页面尺寸设置

Axure实现动态进度条效果

动态进度条是产品的一个基础功能,如何用Axure实现动态进度条效果?本文作者对此进行了分析,希望对你有帮助。界面原型想要用动态进度条,原本想在网上找一个现成的用,没想到都是坑,索性自己做了一个,分享给大家(附详细步骤)。一、不带动文字的进度条①创建矩形,命名“bg”,作为进度条的整体背景,设置width=600,hight=20,圆角=4,背景色“#f2f2f2”

【Axure教程】中继器日期筛选

我们经常需要用到表格日期筛选这个功能,但你了解它的运行逻辑吗,在中继器表格中的日期筛选模型该怎么制作呢?本文作者十分详细的给我们讲述了在axure中时间筛选的步骤,一起来看看吧!时间筛选是系统里常用的功能,用户可以根据不同的时间段,快速的筛选所需要的数据。所以我们今天来学习在axure中如何进行时间筛选呢?制作完成后的模板效果如下图所示:一、材料准备1. 日期选择

Axure高保真原型:扫码登录、加载中

我们在很多软件登录方式里面都可以看到扫码登录这个选项,那么它是如何实现的呢?本文作者通过扫码登录这一案例,详细讲述了Axure高保真原型的核心逻辑,推荐正在做交互设计的童鞋阅读。首先来看看我们要实现的效果:看过效果之后我们再确认一下我们要实现的几个功能二维码有个失效的时间;当二维码失效的时候,扫码不成功会有个错误提示;当二维码没有失效的时候,扫码成功,需要移动端上

Axure之中继器上下移动

本文仔细介绍了在Axure RP9 中如何通过中继器来制作上下移动的效果的步骤和注意事项,希望对小白产品经理有所帮助。1、 前期准备:上下移图标、中继器、文本框一个(做全局变量使用、隐藏)2、 配置中继器的数据表备注:row_id是为了实现上下移动的排序3、 添加事件,上移下移基本类似,已下移为例进行展示4、 先给中继器配置每项加载的交互事件每项加载主要是每次更新

Axure之折叠窗效果

折叠窗效果是产品的一个基础功能,那么如何用Axure制作呢?本文仔细介绍了通过Axure RP9实现折叠窗效果的详细步骤和注意事项,希望对读者有所帮助。1、 假设做三个标题和三个标题的子内容2、 先做三个标题的面板,三个子内容面板三个标题面板:A1,B1,C1三个子内容面板:a1,b1,c13、 设置标题面板和子内容面板的尺寸标题面板:700,50子内容面板:70

【Axure高保真组件】极验-按住滑块,拖动到最右边

滑块验证是一种极验类型,用于用户登录时人机识别。该方式相比较于图形验证码、滑动拼图验证、点选验证等验证方式,操作成本较低。一、要实现的效果1、默认显示滑块、背景及提示文案。2、滑块仅允许向右水平拖动,切不能超过背景区域。3、滑块移动过程中,左侧区域跟随变绿,右侧区域保持默认颜色。4、滑块为未拖动到最右侧时释放,自动回到初始位置。5、滑块拖动到最右侧时,无论是否释放,自

原型图真正的核心是什么,怎么做好原型图设计?

当一个企业想开发一款产品时,原型图可以帮助企业提前看到,产品的界面样式,每个按钮的功能和效果,也可以看到产品的基本框架和运作机制,获得比较真实的感受。那么原型图对企业的核心意义是什么?又如何做好原型图呢?本文围绕原型图展开讲述,推荐对此感兴趣的伙伴阅读。在通过市场调研、数据分析,我们深入地了解行业情况、明确了建站需求,经过项目讨论会确立网站初步的整体构思以及策划,

【Axure教程】智能家居原型

智能家居是以住宅为平台,利用综合技术管理家居设施与家庭日程事务,从而提高提升家居生活的便利性。本文作者以智能电视为模板,做了智能家居的原型,一起来看看吧。我们今天来学习,在Axure里面做一个智能家居的原型,本案例以智能电视为模板,制作完成后效果如下图所示:原型地址:https://r5fhmp.axshare.com/#g=1一、材料准备1. 边框我们用黑色矩形

搞事情!存下这波原型素材,我能五分钟画三个

产品人每天的工作不是在做原型就是在做原型的路上,一些原型素材的使用能够帮助我们提高效率,更快完成工作。本文作者列举了一些原型素材,一起来看看吧。做产品如逆水行舟,不进则退。所以,我们产品人永恒的主旋律就是学习,什么摸鱼、看剧,通通都不存在的。好巧不巧,今天又有一份新的学习资料到了,快跟我一起学习吧!01消防备案系统属性:原型作者:杨新宇作品链接:https://m

Axure入门案例系列:页面模块水平左右滑动

左右滑动的交互方式在APP中非常常用,可以在有限的区间内可以放置更多的内容。本文作者分析如何用Axure制作页面模块水平左右滑动,希望对你有帮助。在APP端中左右滑动的交互方式十分常见,在有限的区间内可以放置更多的内容。一、准备Axure 9(或Axure 8、10)软件已安装。掌握基本的软件使用。二、本教程知识点初级的动态面板使用。拖动触发的移动的交互事件。移动

Axure高保真教程:中继器表格自动合计模板

合计作为日常使用频率比较高的一个功能,但在Axure里面传统的表格如果做合计是很麻烦的,遇到数据多的时候很耗费时间,那么该如何优化,提高工作效率?本文以中继器表格为核心,教大家如何制作一个自动合计的原型模板,希望对你有所帮助。合计一个是很常用的功能,例如财务报表、统计图表等内容就经常需要合计。但是在Axure里面传统的表格如果做合计是很麻烦的,如果数据多的话,需要

【Axure教程】随机抽奖原型

随着商业的发展,在ToC系统中,抽奖是必备的一项功能。那么,对于这么高频使用的功能,如何用Axure做一个既美观且复用性又强的抽奖原型?作者分享了相关步骤,希望对你有所帮助。随着商业的进步与发展,在To C的系统里面,抽奖可以说是必备的功能。所以我们今天来学习,在Axure里面做一个最一个既美观,而且复用性又强的抽奖原型,完成后效果如下图所示:原型地址:https

Axure入门案例系列——Axure制作气泡闪动图

闪动的气泡在产品中是很常见的功能,用以动态的提示。本文作者用Axure进行案例演示,分析如何用Axure制作气泡闪动图,希望对你有帮助。在一些常见的大屏可视化中,均会以闪动的气泡作为一些提示符,进行动态的提示。一、准备Axure 9(或Axure 8、10)软件已安装。掌握基本的软件使用。二、本教程知识点交互动效延时填充的渐变样式连续动态的交互实现三、详细教程1.