对于很多产品来说,图片模块已经是必不可少的的需求了。在这方面,或可分为以下部分:
1、图片上传
1.1 图片宽高边界问题
设上传的图片最大尺寸为 1280*1280 px。当图片宽高超过此限度时,上传需进行本地尺寸压缩处理。压缩规则如下:
1)宽高均小于 1280px 时,不压缩处理。
2)宽高均大于 1280 px 时,若宽高比大于等于 2,则较小者压缩到 1280,较大者按图片比例压缩;若宽高比小于 2,则较大者压缩到 1280,较小者按图片比例压缩。
3)宽大于 1280 而高小于 1280 时,若宽高比大于等于 2,则不压缩;若宽高比小于 2,则较大者压缩,较小者按图片比例压缩。
4)宽小于 1280px 而高大于 1280px 时,若宽高比小于 2,则较大者压缩,较小者按图片比例压缩。
1.2 图片大小问题
设上传的图片大小最大值 1000kb 。当图片超过质量此限度时,上传需进行本地大小压缩处理。压缩规则如下:
1)当图片大小小于等于 1000kb 时,不压缩。
2)当图片大小大于 1000kb 时,压缩至原大小的 70%。
2、图片展示
2.1 图片缩略图展示
设缩略图尺寸为 150*150 px:
1)宽高均小于 150 px 时,或者图片居中显示,外部用黑色填充;或者使短边放大为缩略图边长,长边按图片比例放大,缩略图展示图片中间区域。
2)宽高均大于 150 px 时,或者直接展示图片中间区域;或者使短边缩小为缩略图边长,长边按图片比例缩小,缩略图展示图片中间区域。
3)宽大于 150 px 而高小于 150 px 时,或者直接展示图片中间区域,外部用黑色填充;或者使短边放大为缩略图边长,长边按图片比例放大,缩略图展示图片中间区域。
4)宽小于 150 px 而高大于 150 px 时,或者直接展示图片中间区域,外部用黑色填充;或者使短边放大为缩略图边长,长边按图片比例放大,缩略图展示图片中间区域。
注:直接展示可能降低信息传达效率,放大/缩小展示可能使信息传达缺失,须根据实际情况作出决策。
2.1 图片全屏展示
设手机屏幕宽为750 px:
1)宽高均小于 750 px 时,图片居中显示,外部用黑色填充
2)宽高均大于 750 px 时, 使宽缩小为屏幕宽,高按比例缩小,图片居中,从顶部开始显示
3)宽大于 750 px 而高小于 750 px 时, 使宽缩小为屏幕宽,高按比例缩小,外部用黑色填充,图片居中,从顶部开始显示
4)宽小于 750 px 而高大于 750 px 时,外部用黑色填充,图片居中,从顶部开始显示
3、其他
3.1 加载失败:图片加载失败时显示默认图片或提示
3.2 滑动查看:全屏图片为长图或宽图时,可上下或左右滑动查看
3.3 加载图片:单击缩略图加载全屏图,单击全屏图加载缩略图;加载过程可先加载 80%的清晰度的大图,再加载全部。在加载过程中用进度条提示;加载失败提示
3.4 放大缩小:双击全屏图可放大一倍图片,可上下左右滑动查看图片,放大后再次双击缩小为原全屏图
3.5 其他:图片数量、下载按钮等