由于主要目的是参考 Pixiv 等插画网站设计制作一类似的插画交流网站,因此这个网站会具备一些用户之间沟通互动的属性,并且主要形式是以用户为单位,沟通形式以用户主动转载、分享插画为主。
# 用户功能
关于用户的功能可以大致分为:
-
登录注册
登录注册是用户进入站点解锁全部功能所必须的,否则将无法进行用户之间的互动操作,比如评论、点赞、收藏等。只有登录之后用户才能够进行用户的互动操作。
主要考虑的注册方式是 邮箱 + 验证码注册 ,主要考虑的登录方式是 邮箱 + 密码登录 。
-
个人中心
个人中心是用户管理自己作品、管理个人信息的主要空间。主要功能如下:
- 查看个人资料
- 查看发布作品
- 查看喜欢作品
- 查看收藏夹及其中包含作品
- 查看关注、粉丝列表
- 查看历史记录
- 管理个人数据(个人资料、发布作品、喜欢作品、收藏夹及收藏作品、关注 / 粉丝)
只有在自己的个人中心才能够对信息进行管理。
-
关注 / 被关注
对于一个偏论坛性质的插画分享平台来说,关注是获取自己喜欢风格的作品最佳的途径,被关注则可以激发用户上传作品的动力。在 Picals 中,关注用户后可以在 “我关注的用户” 中浏览到发布的相关作品。
-
评论发表
在插画详情页的浏览中,用户可以发布相应的评论来与大家进行和谐、友善的交流,也可以回复他人的评论。
-
点赞功能
点赞主要分为两块内容:
- 插画
- 评论
对应的部分需要处理不同的逻辑。
-
收藏功能
用户可以在作品详情页面对收藏内容进行管理,包括但不限于:
- 对收藏夹进行排序;
- 对收藏夹信息进行修改;
- 对收藏夹内部作品进行移除、赋值、移动。
# 插画上传功能
就现阶段(V0)而言,该平台主要以 转载作品 的形式为主来上传作品。
一幅完整的插画上传主要的内容包括:
-
插画名称(可选)
-
插画简介(可选)
-
插画的标签(tags)
当用户上传了全新的标签的时候会自动将新标签添加到数据库,并支持标签搜索快速选择。
-
插画的原文件列表
当图片上传到图床后,可以拿到返回的 url 地址,并全部罗列在上传界面中。并且图片 item 可以支持拖曳排序,以满足上传顺序的需求。
-
是否是 AI 作品
-
是否开启作品评论功能
插画上传分两种主要形式:
-
转载作品
转载作品是目前的默认选项。
转载他人的作品需要标明 作品原来的访问网址 url 、 原作者的名称 以及 这个作者的发布插画的主要个人主页 。支持快速通过作者名称搜索作者,如果搜索不到原作者的名称,可以尝试添加新作者的信息。
-
原创作品
对于原创作品而言,则无需补充附加信息,只用补充插画的基本信息即可。
-
合集作品
合集作品是特殊的转载作品,是针对于某一个作者所发布的作品合集,可能包含很多的图片。
这种情况下无需填写转载的原作地址,只需要填写作者信息即可。
对于 图片,后端进行了特殊的处理。
- 当用户上传本地图片到图床之后,后端返回图片 url 地址给前端,存放到前端表单的 imgList 中(保持上传时的 顺序 )。
- 当用户将表单信息全部填写完毕后进行提交,后端拿到 imgList 中的图片地址。
- 将第一个图片使用
sharpjs
压缩至400X400
的缩略图,作为每个作品 item 的封面图片; - 将所有图片都进行压缩至最长边为 800px 的粗略图,用以进入作品详情页时进行初步展示。
- 将图片原图、粗略图及其各自所对应的尺寸全部存入 Image 表当中。
- 将第一个图片使用
注:插画的上传必须遵守相关的发布规定,否则将予以剔除。
# 插画推荐功能
插画的推荐功能主要分为 首页推荐 和 作品底下推荐 。
-
首页推荐
用户刚打开网站后,进入的就是网站的主页。主页需要提供插画推荐功能,自动推送用户感兴趣的插画。
如何体现感兴趣? 主要是通过统计这个用户最近收藏的插画的标签。 用户最近收藏的插画的哪个标签数越多,包含有那个标签的插画就会被推送的越多。 已经被用户加到收藏的插画不会再在首页的推荐中出现。
-
作品底下推荐
在 Pixiv 的插画详情界面,如果用户划到最底下,会自动弹出来 与当前插画的标签类似或者相拟合的插画 。当然也不全是必须都符合,用户不断的往下划会有一个分页的形式,与当前插画相类似的只会推荐一两页,之后还是会按照首页推荐的逻辑进行。
由于项目正处于初期阶段,相应的数据较少,因此这个功能短期内无法实现。V0 阶段的替换实现方案如下:
采用 随机 + 分页 获取作品的方式。
- 针对已登录用户,将每次从数据库当中随机获取 30 个作品,并且每次确保不会获取到重复的作品。直到将数据库中的作品全部查询完毕为止。
- 针对未登录用户,每次从数据库中按时间顺序获取最新发布的 30 个作品。直到将数据库中的作品全部查询完毕为止。
对于首页的推荐作品栏,一次只获取 30 个作品,并且可以点击右下角的刷新按钮进行作品栏的刷新。
# 插画作者推荐功能
作者推荐功能和插画推荐功能是类似的,不过是根据 对这个作者本身投稿的作品包含的全部 tag 统计 和 用户自身最近浏览的作品的 tags 的拟合程度来进行的,放在首页插画推荐的下方。
这个具体的拟合算法还有待商榷,考虑一些烂大街的拟合算法。
由于项目正处于初期阶段,相应的数据较少,因此这个功能短期内无法实现。V0 阶段的替换实现方案如下:
采用 随机 + 分页 获取作品的方式。
- 针对已登录用户,将每次从数据库当中随机获取 6 个用户,并且每次确保不会获取到重复的用户。直到将数据库中的用户全部查询完毕为止。
- 针对未登录用户,每次从数据库中按注册时间顺序获取最新发布的 6 个用户。直到将数据库中的用户全部查询完毕为止。
# 详细作品浏览功能
用户可以以各种不同的方式进入到作品详情页。在作品详情页,用户能够浏览高清图片及其相关表单信息,并且能够浏览作者发布的其他作品列表。
同时需引入一款基于 React 的大图查看器,用户点击图片后,在大图查看器中展示原图的信息,并支持缩放、旋转、下载图片等功能。
# 搜索功能
推荐不可能会把我们想找的作品直接推到我们眼前,这时候就需要搜索功能。
参考 Pixiv 的搜索功能,可以将插画网站的搜索主要分为二种类型:
- 作品标签搜索
- 作者名称搜索
默认在输入框中输入关键字的搜索就是基于作品标签的搜索。在搜索结果页需要展示携带这个标签的作品数、这个标签的图标(初步拟定为随便取一个这个 tag 比较火的作品作为 logo)以体现这个标签的火爆程度。下面也是接着展示作品的列表,以每页 30 个的篇幅来获取。
对于作者名称搜索,直接切换至作者搜索的 tag 然后键入作者名进行搜索即可。搜索结果页展示的是跟推荐作者展示的 item 一样的作者信息,以每页 6 个的篇幅来获取。
# 作品浏览队列维护功能
在 Pixiv 当中,无论你是从哪里点开的作品,当你按下左右键盘按键进行切换时, 永远只会在对应作者发布的作品列表中进行切换 ,这也就意味着我们如果是从 “关注的作者” 的队列点击进入的时候,我们想切换到关注的作者的作品队列进行无缝浏览,只能退出之后重新点击作品。
初步设想,能够在点击一个作品进入其详情页的时候 维护一个作品列表,这个列表就是刚才点击进入的作品的所属列表,并且能够自动定位至作品所在的位置。同时也支持在 现列表和作者发布作品列表 之间进行无缝的切换,能够让用户保持浏览的连续性。
并且在浏览结束后,支持点击按钮一键跳回到最开始进入作品列表的页面。