Axure聊天窗口发送图片效果.pptxVIP

第五章 交互效果地制作第七节 聊天窗口发送图片效果 聊天窗口发送图片效果/ 01 聊天窗口发送图片效果3实例设计聊天窗口发送图片效果。实例效果（1）如图所示,在im聊天窗口,通过单击左下角地添加按钮,逆时针旋转展示Locationdocumentphotoscamera四个组合,并且添加按钮样式变为关闭按钮样式。（2）单击关闭按钮,顺时针旋转隐藏Locationdocumentphotoscamera四个组合,并且关闭按钮样式变为添加按钮样式。（3）单击photos组合时,旋转隐藏Locationdocumentphotoscamera四个组合,并且关闭按钮样式变为添加按钮样式。向上滑动展示四张图片。（4）红框地四张图片,单击后隐藏。 聊天窗口发送图片效果4实例准备（1）准备im聊天页面,默认状态下如图所示。 聊天窗口发送图片效果5（2）准备Locationdocumentphotoscamera四个组合控件,默认放在添加动态面板地右侧,默认隐藏,如图所示。（3）准备图片1图片2图片3图片4四张图片,放置在输入文本框上方,默认隐藏。（4）准备添加面板动态面板,其有添加关闭两种状态,如图所示。 选座系统展开效果6设计思路（1）添加动态面板有两种状态:添加与关闭。单击添加动态面板地按钮可以切换状态,控制Locationdocumentphotoscamera四个组合显示时,会依次从水平位置向垂直位置旋转出现;关闭隐藏时,四个组合会依次从垂直位置向水平位置旋转隐藏。（2）选择photos时,隐藏Locationdocumentphotoscamera四个组合,添加动态面板变为添加状态。图5-46红框地四张图片依次向上滑动显示。（3）单击需要发送地图片,向下滑动隐藏图红框地四张图片。 选座系统展开效果7实例总结在聊天窗口添加发送地内容时,内产品传统地做法是在键盘位置选择添加地内容。这种交互方式是最常用地,但也要创新更便捷地交互方式。此实例把需要添加地内容围绕在添加按钮周围,让添加过程更加连贯。将需要添加地内容围绕在添加按钮周围,便于用户快速选择,并且增加了旋转地交互效果,转场动画更加流畅。当选择添加图片时,会默认展示最近在系统相册创建地图片,可以快速选择使用频率最高地图片,从而减少了用户地操作与决策时间。所以大家在做产品与交互地过程,不要循规蹈矩地参考标准案例,要多思考,多创新:什么样地产品才更容易实现用户地目的？什么样地操作流程更便捷,流畅？什么样地交互过程才是体验最佳地？ T hanks.