- 1、本文档共8页,可阅读全部内容。
- 2、有哪些信誉好的足球投注网站(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 5、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 6、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
第五章 交互效果的制作
第一节 弹窗中筛选时间效果
弹窗中筛选时间效果
/ 01
弹窗中筛选时间效果
3
【实例】设计弹窗中筛选时间效果。
【实例效果】
(1)如图所示,在移动端的提醒APP中,单击右上角的“闹钟”按钮,从界面下方自下向上弹出选择日期对话框,并且伴有遮罩效果,可以选择日期和位置属性。
(2)单击日期对话框之外的遮罩位置,对话框自上向下收起。
(3)如果要修改某一天的时间,则单击需要修改的时间,会直接出现蓝色背景的时间调整浮层。这时可以水平拖动调整时间,最中间的时间为当前选中时间,颜色为白色。
(4)单击“CANCEL”“OK”按钮执行取消或确定操作,并且隐藏时间调整浮层。
弹窗中筛选时间效果
4
【实例准备】
(1)图所示为移动端APP的内容。
(2)准备灰色透明的矩形,自定义名称为“遮罩”,默认置于底层,“遮罩”矩形的大小与APP尺寸保持一致,如图所示。
弹窗中筛选时间效果
5
(3)准备可以自下向上弹出的动态面板,自定义名称为“日期对话框”,其中设置需要提醒的日期和位置。“日期对话框”动态面板默认置于底层,设为隐藏,下边界位置与APP页面的下边界位置相同,大小设置为478像素×420像素。
(4)在“日期对话框”动态面板的“State1”状态中,放置自定义名称为“时间浮层1”的动态面板,如图所示。动态面板默认设置为隐藏,置于底层,大小设置为476像素×139像素。
(5)在“时间浮层1”的“State1”状态中,进行如下设置:
①包含自定义名称为“时间浮层2”的动态面板,尺寸设置为476像素×70像素;
②包含两个遮罩的矩形,矩形取背景颜色,并且设置不透明度为50,置于顶层;
③包含可以单击的热区。
(6)在“时间浮层2”的“State1”状态中,如图所示,放置自定义名称为“时间浮层3”的动态面板,尺寸设置为862像素×28像素,展示时间为全部时间,背景为白色,文字颜色设置为白色。
弹窗中筛选时间效果
6
【设计思路】
(1)单击APP中右上角的“闹钟”按钮,向上滑动显示“日期对话框”,并且置于顶层。
(2)单击“日期对话框”中的时间进行选择,显示并且置顶“时间浮层1”动态面板。
(3)在“时间浮层1”动态面板中,使用蓝色、不透明度为50的矩形遮盖住左右两侧的非选中时间内容,放置可以拖动的“时间浮层2”动态面板。
(4)拖动“时间浮层2”动态面板,移动“时间浮层3”动态面板,可以实现时间内容的左右拖动过程。
(5)单击“CANCEL”“OK”按钮,隐藏“时间浮层1”动态面板。
弹窗中筛选时间效果
7
【实例总结】
多个功能项需要选择时,在我们见过的产品设计中,比较多的是将各个选项排列展示,通过入口进入下一页面进行选择。这种设计增加了页面跳转次数与操作步骤和门槛,并且让整个产品流程不流畅。
如果通过对话框、浮层、内容的展开等操作进行设计,则可减少页面跳转次数,可以让整个操作流程更简洁、高效。
本实例中的交互设计只是一种思路,也有更好的交互设计方法,如将需要筛选的内容在当前筛选项下方展开显示,会让整个流程更加流畅,并且减少了对话框和浮层的操作,体验更佳。所以我们在做产品设计的过程中,首要原则是保证交互设计是为产品功能服务的,再采用体验最佳、操作更流畅的交互效果。
T hanks.
文档评论(0)