美文网首页@产品产品交互设计
常用低保真原型交互示例

常用低保真原型交互示例

作者: 黑子Y | 来源:发表于2019-11-12 11:02 被阅读0次

在输出低保真原型的时候,配合动效的演示及说明能使团队成员更直观的了解最终需要实现的效果,整理了近期项目中比较通用简单的原型,在不同的项目原型中如何展示和说明自己的交互需求,还需要配合项目需求和团队的风格求同存异。

整理几个常用的低保真交互说明及演示效果

【左右滑动类别】

1、左右滑动查看类别

2、向左滑动到显示“查看更多课程”继续向左滑动,自动跳转“更多”列表页

3、左滑自动跳转列表页时。列表页从左侧滑动进入

【签到日历】

显示内容:

1、显示从活动开启月份共12月时间,默认显示当前月日历,历史日期置灰显示

2、当前月份已签到>=1,显示已签到xx天,未签到或签到天数为0 ,不显示

3、标记已签到日期

上下滑动效果:

1、点击【累计获得分值】,页面中间弹出签到日历,点击关闭/日历其他区域关闭弹窗

2、上下滑动查看签到日期,月份和签到天数吸附顶部,滑动到下一月时切换吸顶日期

【表单输入框】

1、显示标题+提示语 ,必填项/选填项

2、用户获取焦点,输入内容后隐藏默认文案,显示清除图标

3、用户已输入内容,重新获取焦点,修改,显示清除图标,不自动清除已输入内容

4、用户已输入内容,失去焦点,隐藏清除图标,校验输入框内容,校验失败,显示对应的提示语,提示语显示在文本框下方,自动调整文本框上下间距。

5、清空文本框,显示默认文案,隐藏清除图标

6、已校验失败情况,文本框再次获取焦点输入任意内容,隐藏提示语,失去焦点再次校验(同4)

7、获取焦点,弹出输入键盘遮挡了输入框内容,页面内容自动上移

【选择地址区域】

弹窗显示内容:所在区域、关闭按钮、请选择tab、省、市、区内容

1、省、市、区tab,点击左右切换查看,tab最多显示6个字,超过显示…tab类别间距自适应

2、已选择某一级,自动跳转选择下一级内容

3、已选择区/县,自动关闭弹窗,“所在区域”显示已选中的区域

4、已选择区域,当前页再此点击所在区域,保留已选择的区域,可重新选择区域,重新选择少于三级,选择无效,关闭弹窗,仍显示之前已选择区域

5、点击关闭和弹窗其他区域,关闭弹窗

6、仅选中省、或省/市,关闭弹窗,选择无效,关闭弹窗,再次点击显示弹窗,已选择不保留

【页面右下角悬浮导航】

1、点击导航按钮,旋转同时向上弹出菜单图标,导航选择变成关闭按钮

2、点击关闭收起菜单,显示导航图标

3、按钮显示规则:

当前有音频在播放队列中显示播放按钮,无则不显示

关闭网页清除播放队列

主页与个人中心页仅显示播放按钮(若有)

其他页:显示导航按钮,点击显示关闭、主页、账号、播放图标按钮

音频播放时,用户另外点击播放视频,音频自动暂停,播放按钮显示为“暂停”态,视频播放停止或关闭,音频会自动播放,播放按钮显示播放态

【所有分类】

1、显示一级分类名称,点击切换

2、点击一级分类,对应右侧显示当前一级分类下二级分类信息及商品信息

3、当前二级分类滑动到底部,显示“进入xxx模块”点击跳转当前一级分类全部类别模块

【滚动列表】

1、显示内容:用户头像、昵称、引导词、**状态

2、向上滚动消失,最多同时显示3条数据

3、进入当前页自动加载数据,2s循环滚动

相关文章

网友评论

    本文标题:常用低保真原型交互示例

    本文链接:https://www.haomeiwen.com/subject/mswtictx.html