由于主要目的是参考 Pixiv 等插画网站设计制作一类似的插画交流网站,因此这个网站会具备一些用户之间沟通互动的属性,并且主要形式是以用户为单位,沟通形式以用户主动转载、分享插画为主。

# 用户功能

关于用户的功能可以大致分为:

  1. 登录注册

    登录注册是用户进入站点解锁全部功能所必须的,否则将无法进行用户之间的互动操作,比如评论、点赞、收藏等。只有登录之后用户才能够进行用户的互动操作。

    主要考虑的注册方式是 邮箱 + 验证码注册 ,主要考虑的登录方式是 邮箱 + 密码登录

  2. 个人中心

    个人中心是用户管理自己作品、管理个人信息的主要空间。主要功能如下:

    1. 查看个人资料
    2. 查看发布作品
    3. 查看喜欢作品
    4. 查看收藏夹及其中包含作品
    5. 查看关注、粉丝列表
    6. 查看历史记录
    7. 管理个人数据(个人资料、发布作品、喜欢作品、收藏夹及收藏作品、关注 / 粉丝)

    只有在自己的个人中心才能够对信息进行管理。

  3. 关注 / 被关注

    对于一个偏论坛性质的插画分享平台来说,关注是获取自己喜欢风格的作品最佳的途径,被关注则可以激发用户上传作品的动力。在 Picals 中,关注用户后可以在 “我关注的用户” 中浏览到发布的相关作品。

  4. 评论发表

    在插画详情页的浏览中,用户可以发布相应的评论来与大家进行和谐、友善的交流,也可以回复他人的评论。

  5. 点赞功能

    点赞主要分为两块内容:

    1. 插画
    2. 评论

    对应的部分需要处理不同的逻辑。

  6. 收藏功能

    用户可以在作品详情页面对收藏内容进行管理,包括但不限于:

    1. 对收藏夹进行排序;
    2. 对收藏夹信息进行修改;
    3. 对收藏夹内部作品进行移除、赋值、移动。

# 插画上传功能

就现阶段(V0)而言,该平台主要以 转载作品 的形式为主来上传作品。

一幅完整的插画上传主要的内容包括:

  1. 插画名称(可选)

  2. 插画简介(可选)

  3. 插画的标签(tags)

    当用户上传了全新的标签的时候会自动将新标签添加到数据库,并支持标签搜索快速选择。

  4. 插画的原文件列表

    当图片上传到图床后,可以拿到返回的 url 地址,并全部罗列在上传界面中。并且图片 item 可以支持拖曳排序,以满足上传顺序的需求。

  5. 是否是 AI 作品

  6. 是否开启作品评论功能

插画上传分两种主要形式:

  1. 转载作品

    转载作品是目前的默认选项。

    转载他人的作品需要标明 作品原来的访问网址 url原作者的名称 以及 这个作者的发布插画的主要个人主页 。支持快速通过作者名称搜索作者,如果搜索不到原作者的名称,可以尝试添加新作者的信息。

  2. 原创作品

    对于原创作品而言,则无需补充附加信息,只用补充插画的基本信息即可。

  3. 合集作品

    合集作品是特殊的转载作品,是针对于某一个作者所发布的作品合集,可能包含很多的图片。

    这种情况下无需填写转载的原作地址,只需要填写作者信息即可。

对于 图片,后端进行了特殊的处理。

  1. 当用户上传本地图片到图床之后,后端返回图片 url 地址给前端,存放到前端表单的 imgList 中(保持上传时的 顺序 )。
  2. 当用户将表单信息全部填写完毕后进行提交,后端拿到 imgList 中的图片地址。
    1. 将第一个图片使用 sharpjs 压缩至 400X400 的缩略图,作为每个作品 item 的封面图片;
    2. 将所有图片都进行压缩至最长边为 800px 的粗略图,用以进入作品详情页时进行初步展示。
    3. 将图片原图、粗略图及其各自所对应的尺寸全部存入 Image 表当中。

注:插画的上传必须遵守相关的发布规定,否则将予以剔除。

# 插画推荐功能

插画的推荐功能主要分为 首页推荐作品底下推荐

  1. 首页推荐

    用户刚打开网站后,进入的就是网站的主页。主页需要提供插画推荐功能,自动推送用户感兴趣的插画。

    如何体现感兴趣? 主要是通过统计这个用户最近收藏的插画的标签。 用户最近收藏的插画的哪个标签数越多,包含有那个标签的插画就会被推送的越多。 已经被用户加到收藏的插画不会再在首页的推荐中出现。

  2. 作品底下推荐

    在 Pixiv 的插画详情界面,如果用户划到最底下,会自动弹出来 与当前插画的标签类似或者相拟合的插画 。当然也不全是必须都符合,用户不断的往下划会有一个分页的形式,与当前插画相类似的只会推荐一两页,之后还是会按照首页推荐的逻辑进行。

由于项目正处于初期阶段,相应的数据较少,因此这个功能短期内无法实现。V0 阶段的替换实现方案如下:

采用 随机 + 分页 获取作品的方式。

  • 针对已登录用户,将每次从数据库当中随机获取 30 个作品,并且每次确保不会获取到重复的作品。直到将数据库中的作品全部查询完毕为止。
  • 针对未登录用户,每次从数据库中按时间顺序获取最新发布的 30 个作品。直到将数据库中的作品全部查询完毕为止。

对于首页的推荐作品栏,一次只获取 30 个作品,并且可以点击右下角的刷新按钮进行作品栏的刷新。

# 插画作者推荐功能

作者推荐功能和插画推荐功能是类似的,不过是根据 对这个作者本身投稿的作品包含的全部 tag 统计用户自身最近浏览的作品的 tags 的拟合程度来进行的,放在首页插画推荐的下方。

这个具体的拟合算法还有待商榷,考虑一些烂大街的拟合算法。

由于项目正处于初期阶段,相应的数据较少,因此这个功能短期内无法实现。V0 阶段的替换实现方案如下:

采用 随机 + 分页 获取作品的方式。

  • 针对已登录用户,将每次从数据库当中随机获取 6 个用户,并且每次确保不会获取到重复的用户。直到将数据库中的用户全部查询完毕为止。
  • 针对未登录用户,每次从数据库中按注册时间顺序获取最新发布的 6 个用户。直到将数据库中的用户全部查询完毕为止。

# 详细作品浏览功能

用户可以以各种不同的方式进入到作品详情页。在作品详情页,用户能够浏览高清图片及其相关表单信息,并且能够浏览作者发布的其他作品列表。

同时需引入一款基于 React 的大图查看器,用户点击图片后,在大图查看器中展示原图的信息,并支持缩放、旋转、下载图片等功能。

# 搜索功能

推荐不可能会把我们想找的作品直接推到我们眼前,这时候就需要搜索功能。

参考 Pixiv 的搜索功能,可以将插画网站的搜索主要分为二种类型:

  1. 作品标签搜索
  2. 作者名称搜索

默认在输入框中输入关键字的搜索就是基于作品标签的搜索。在搜索结果页需要展示携带这个标签的作品数、这个标签的图标(初步拟定为随便取一个这个 tag 比较火的作品作为 logo)以体现这个标签的火爆程度。下面也是接着展示作品的列表,以每页 30 个的篇幅来获取。

对于作者名称搜索,直接切换至作者搜索的 tag 然后键入作者名进行搜索即可。搜索结果页展示的是跟推荐作者展示的 item 一样的作者信息,以每页 6 个的篇幅来获取。

# 作品浏览队列维护功能

在 Pixiv 当中,无论你是从哪里点开的作品,当你按下左右键盘按键进行切换时, 永远只会在对应作者发布的作品列表中进行切换 ,这也就意味着我们如果是从 “关注的作者” 的队列点击进入的时候,我们想切换到关注的作者的作品队列进行无缝浏览,只能退出之后重新点击作品。

初步设想,能够在点击一个作品进入其详情页的时候 维护一个作品列表,这个列表就是刚才点击进入的作品的所属列表,并且能够自动定位至作品所在的位置。同时也支持在 现列表和作者发布作品列表 之间进行无缝的切换,能够让用户保持浏览的连续性。

并且在浏览结束后,支持点击按钮一键跳回到最开始进入作品列表的页面。