编辑导语：跟着5G的成长，在app上的ui越来越精美，图片打点页成为了app原型设计中不行或缺的一部门，出格对付内容分享型app（譬喻微博、qq空间、伴侣圈）、电商（ *** 、京东）、谈天型app（微信、qq）、社交型app（探探、珍爱网）等。所以本日本文作者就为各人科普一下图片打点包括哪些内容以及应用案例和设计思路，但愿看后可以或许对你有所辅佐。

首先，什么是图片打点呢？

简朴来说，就是用户可以对图片举办打点，包罗上传导入、分享发送、保藏删除图片等操纵，下面将会以案例的 *** 给各人展开。

一、上传导入图片

上传图片的一版分为单图上传和多图上传：

1. 单图上传的应用

单图上传一般应用于各类软件上传头像、可能上传身份证、银行卡等资料举办身份认证，如下图所示就是单图上图头像的一个案例原型：

2. 多图上传的应用

多图上传应用的场景就较量多了，商品先容的图片、微博、伴侣圈分享的内容、文章的插图等等。

下图是微博、伴侣圈的分享案例，一般而言多图分享都有分享图片限制，个中以9张居多。

二、图片打点——分享发送、保藏删除图片

分享发送图片和上传导入图片的区别：上传导入图片一般上传到本软件的靠山，靠山需要生存图片；可是分享发送图片本平台是不需要生存图片的，只是简朴的将它发送出去。

图片打点同样也是可以分为单图打点和批量打点，虽然此刻更多的是两种形式的团结。

1. 单图打点——分享发送、保藏删除

单图打点 *** 是：直接阁下滑动查察大图，看到喜欢的点击保藏，系统生存到对应的文件夹，利便下次快速找到；假如看到不喜欢的可以直接删除图片；需要分享时，选择分享 *** 既可举办分享。

这种一般用于雷同相册可能记录，可以一张张图仔细欣赏。

2. 批量打点——分享发送、保藏删除

批量打点的利益是可以快速选择多张图片，并对其举办操纵，给用户一个快捷便利的操纵体验，一般应用于谈天时批量发图。

3. 图片打点——团结单图和批量打点

如下图所示，此刻一般的图片打点原型会做成可单选查察大图，也可以多选举办批量操纵，同时满意用户两种需求。

三、设计思路 1. 建造质料

图片打点的原型，我们选择利用中继器来建造，为什么利用中继器呢？

因为中继器建造完成之后，维护简朴，只需要像填写excel表格那样，填写中继器表格即可，交互自动实现，复用性高，维护本钱低，今后项目也可以用到。

中继器内原件及摆放：图片+复选按钮（假如建造单图的就不需要复选按钮），如下图所示：

    大图页原件摆放

只需要图片原件即可，配景致可用矩形建造，如下图所示：

2. 中继器表格

中继器表格如下图所示：

picture：代表图片，鼠标右键单击导入图片即可，可能ctrl+ c、ctrl+v复制黏贴也可以。

name：图片的名字，非须要，大图显示时可以配置显示，也可以不显示。

其他内容：如图片巨细、日期等等内容可以自行添加。

3. 交互事件

1）配置图片事件

中继器加载时，配置中继器内图片=item.picture。

2）鼠标单击图片查察大图

配置大图=item.picture。

3）删除事件

点击删除按钮，删除中继器行内容。

4）保藏事件

这里我们需要用到心型的矩形，我们直接用矩形建造既可以，点击右上角可直接切换成心形

然后，我们要配置选中时酿成赤色。

最后，配置点击时切换选中状态即可。