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

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

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

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

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

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

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

好了,正式进入主题。

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

  1. 提示信息弹出窗口
  2. 二次确认弹出窗口
  3. 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协议