联系我们

Email:wanzhanqun@163.com

电话:155-7782-2416

QQ:663486249

地址:北京市朝阳区广渠路38号院411号楼

有时,我们可能误会了原型设计

发布时间:2020-09-02

三个常见的弹出窗口原型,分别是提示信息弹出窗口、二次确认弹出窗口、Toast窗口,以下,本文将从这三方面分别进行介绍。

经常看到一些原型页面,只是一些静态页面罗列,每一个页面里没有任何的交互行为,交互原型所说的“交互”体现在哪里?我们只是点开每个页面向别人介绍我们的业务流程吗?不排除一些画的非常好的原型,页面布局合理,界面整洁干净,然而找不到半点“可交互”的行为。

有时,我们可能误会了原型设计。

当然,一个静态的原型、页面流程也没有什么问题,也没什么对错之分,别人似乎也能理解,特别是一些原型两边加了满满标注的,看起来非常的专业。

然而这并不是我期望看到的原型,窃以为这是一个没有“灵魂”的原型,没有体现出原型的真正价值,如果进一步能配合交互行为,就更好了。

说了这些,这里以简单的弹出窗口为例,说明如何设计一个更好的,具备交互性的原型,借以抛砖引玉。

好了,正式进入主题。

下面会设计三个常见的弹出窗口原型,分别是

提示信息弹出窗口 二次确认弹出窗口 Toast窗口

点击查看在线演示

一、提示信息弹出窗口

提示信息是指有一个确定按钮,一段提示文字,用于告之用户一些信息,例如表单提交成功后的提示。

1. 界面元件说明

背景,350*200,圆角大小6,背景颜色为白色,添加了阴影效果(X=0,Y=0,模糊=5) 标题栏,和背景一样的形状,灰色背景,调整一下高度,圆角可见性里只保留上方两个,这样上边缘和背景能无缝重合,文字内容为“提示信息” 提示文字内容是文字段,示例文字为“您已成功开启消息通知服务!” 确定按钮,是一个矩形框,大小300*45,绿色白字 选中所有元件,转成动态面板,命名为“提示信息”

2. 交互设计

动态面板固定到浏览器,水平居中和垂直居中。 点击按钮显示弹出框口,显示效果为灯箱效果,配合淡入动画。 点击确定后关闭弹出窗口。

二、二次确认弹出窗口

二次确认窗口是在类似购买商品、订阅业务等之前的提示,需要用户选择确定或取消。

1. 界面元件说明

复制提示信息弹出窗口,再复制确定按钮,修改标题和样式,动态面板名称改为“二次确认”。

2. 交互设计

同提示信息弹出窗口。 点击确定后关闭弹出窗口,按钮内容显示当前选择结果 点击取消后关闭弹出窗口,按钮内容显示当前选择结果

三、Toast 窗口

Toast是一个短暂的提示性窗口,一般是一行文字,并且在几秒种后自动消失。

1. 界面元件说明

添加一个矩形框,黑色半透明背景,圆角 文字颜色为白色

2. 交互设计

点击按钮显示Toast 2秒后自动消失

弹出窗口在应用里几乎到处都是,交互行为也多种多样,例如微信的从屏幕下方弹出,微博APP上方的新消息数提示等,弹出、按钮的样式也千变万化。

小结

这里想要说的是,在设计原型时,如果页面流程有交互,尽量在页面上要能体现出交互的流程,而不是完全的静态页面,或者静态页面加一堆的标注。

 

本文由 @Axure原型设计工场 原创发布于人人都是产品经理。未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

热门地区

孝义 河源 大石桥 松滋 河南 阆中 启东 湖南 霸州 松原 讷河 兰州 明光 东莞 乐陵 亳州 胶南 唐山 侯马 扬中 喀什 自贡 攀枝花 苏州 定西 安国 泉州 固原 河津 秦皇岛 赤壁 阜新 龙井 汕头