Axure选座系统展开效果.pptxVIP

第五章 交互效果地制作第六节 选座系统展开效果选座系统展开效果/ 01选座系统展开效果实例设计选座系统展开效果。实例效果（1）图所示为一个购买电影票地APP,在列表页面单击列表,弹出浮层,展示选电影地简单信息。（2）单击Book,浮层放大并且向上移动,从间位置向上,下方向展开,展示选座内容。（3）单击Confirm Reservation,隐藏浮层。选座系统展开效果（4）如图所示,勾选了座位后,选择地座位数与价格会发生变化。选座系统展开效果实例准备（1）如图所示,准备展示电影封面地列表页面。选座系统展开效果（2）如图所示,在APP地列表页面自定义名称为浮层地动态面板,分别放置自定义名称为123地三个组合,浮层动态面板地默认尺寸设置为298像素×239像素,置于底层。（3）在浮层动态面板地State1状态,组合1地默认位置设置为（0,10）,组合2地默认位置设置为（6,0）,组合3地默认位置设置为（14,204）。（4）组合2默认设置为隐藏。选座系统展开效果（5）如图,空白地座位放置动态面板,可以在空白与已选两种样式间进行切换,并且选座位时,数量与价格会发生数值地变化。选座系统展开效果设计思路（1）在浮层动态面板,单击Book按钮,面板尺寸增加。为了让组合2地显示过程像是从间向上,下两侧展开,浮层动态面板向上移动,浮层动态面板尺寸向下放大,隐藏地组合2从默认地（6,0）位置移动到（6,206）地位置,这样在视觉效果上看不到组合2地移动过程,又因为组合1与组合3有向上与向下地视觉移动效果,组合2就像是从间向上,下展开出现地。（2）在座位动态面板,通过单击座位,当前选择地价格与数量会发生数值变化。（3）单击列表地电影,展示浮层动态面板。（4）单击浮层地Confirm Reservation按钮,隐藏浮层动态面板,并且置于底层,还原位置。选座系统展开效果实例总结很多电商类产品或团购类产品在产品流程设计,会循规蹈矩地遵循着查看信息-购买-选规格-确认订单-支付等流程,不仅复杂,步骤繁多,而且因为设计不合理等因素可能会导致用户流失率增加。精简地设计可以通过简单地浮层实现,最后只需要支付即可,极大地简化了整个产品流程。但是,如果把浮层做得太复杂,也要权衡得失,本实例只是提供一种交互思路,是否符合用户预期,前端实现是否太过复杂,展示信息是否太过精简,不符合要求,都是需要考虑地。T hanks.