这个原型设计逻辑如下:

(1)最下一排是月饼选项,当鼠标移入哪一项,哪一项就会显示红色的外框。

(2)当鼠标选中哪一项的时候,上面的展示区就会显示对应的图片。

实战案例6——商品图片变大

(3)当鼠标移入展示区图片时,展示区有一个矩形的遮挡部分,该部分以鼠标为中心并且随着鼠标移动。

(4)当鼠标在展示区图片上随意移动时,右侧放大区域会显示遮挡区的图片部分。

实战案例6——商品图片变大

难点:

(1)如何设计遮挡区,并且随鼠标移动?

(2)放大区域如何设计?

实战案例6——商品图片变大

如上图所示,遮挡区用了一个动态面板,在遮挡区上面还用了一个热区。热区一方面可以限制鼠标活动范围,另一方面可以让鼠标不被遮挡区遮挡。

随着鼠标移动并且设置放大区可以这样设计交互:

实战案例6——商品图片变大

 

 

相关文章:

  • 2021-12-15
  • 2021-09-17
  • 2021-12-12
  • 2022-01-14
  • 2022-12-23
  • 2021-07-05
  • 2021-05-26
猜你喜欢
  • 2021-12-31
  • 2022-12-23
  • 2021-11-04
  • 2021-08-19
  • 2022-12-23
  • 2021-06-08
  • 2022-12-23
相关资源
相似解决方案