图片裁切思维导图
充分了解互联网中产品经理关于交互规范的内容（图片裁切），记住关键知识点。
树图思维导图提供 图片裁切思维导图 在线思维导图免费制作，点击“编辑”按钮，可对 图片裁切思维导图 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：a2171425e89423625b204addb4f9a99a
思维导图大纲
图片裁切思维导图模板大纲
固定尺寸
【设计意图】
可以进行简单图片裁切处理，而不需要使用其它的图片处理软件
快捷方便的裁切出用户想要的图片
【应用条件】
上传的图片限制固定尺寸时
系统对图片大小的约束严格，在200k以内时
【模式描述】
组成
预览区 + 裁切框 + 放大缩小提示标 + 滑杆 + 图片上传区域 + 清空按钮 + 数据约束
应用规范
滑杆、缩放图标、清空按钮默认处于不可用状态
浏览上传图片后，滑杆、缩放图标、清空按钮高亮显示
浏览上传一张图片后，图片全部显示在预览区内
当上传的图片尺寸小于裁切区尺寸时，系统自动按照裁切区的尺寸成比例的放大图片后显示在裁切区内
鼠标向左拖动滑块缩小图片，当图片缩小到即将小于裁切区尺寸时，图片将停止缩小
鼠标向右拖动滑块放大图片，当图片缩放到原尺寸的1.5倍时，停止放大，此时图标状态要相应转变为不可用状态
点击放大或缩小图标，预览区中的图片相应放大缩小，直至无法缩小或放大，此时图标状态要相应转变为不可用状态
图片裁切区的尺寸与上传后的大小尺寸相一致
图片裁切区的尺寸可以根据具体产品的需要，设定固定尺寸
鼠标可以在预览区内任意移动裁切区的位置，但图片必须填充整个裁切区，不能为空，或部分为空
鼠标指针在裁切区内时要变为移动指针形状
当上传的图片格式或大小不符合要求时，系统给出提示如：您上传的图片格式错误！请重新上传！或您上传的图片大小超过200k！请重新上传！
自定义尺寸
【设计意图】
减少用户的工作量和学习时间，并充分考虑到使用者的电脑水平，通过简单的图片裁切处理，用户将不需要打开其他的图片处理软件
快捷方便的裁切处理出用户想要的图片
【应用条件】
用户可以自定义上传或插入的图片尺寸时
系统对图片大小的约束比较宽泛，在1M以内时
【模式描述】
组成
图片上传区域 + 图片裁切区域 + 操作按钮
应用规范
浏览上传一张图片后，图片全部显示在预览区内；图片较大时根据窗口尺寸自动成比例压缩适应窗口大小
默认裁切框最大化显示在预览区内；同时鼠标经过裁切框有明确的指针反馈
裁切框的上下左右均可以随意拖拽裁切
图片裁切区的尺寸可以根据用户的需要，随意拖动裁切
图片裁切区的尺寸大小就是最终图片上传后的实际尺寸大小
鼠标可以在窗口内任意拖拽裁切框的位置，但不能超出图片自身显示区
当上传的图片格式或大小不符合要求时，系统给出提示如：您上传的图片格式错误！请重新上传！或您上传的图片大小超过1M！请重新上传！
图片的最大尺寸，可以根据具体的产品需要来设定
沪公网安备 31011502019485号
上海工商