首页Picals About

目前的第一版原型设计图已经基本绘制完毕，想要查看详情的同学可以通过链接 Picals 原型图设计 进行详情查看。

上述的基础功能基本分析完毕，以下进行基础的界面设计描述。

很大部分参考了 Pixiv 和 ant-design，收藏夹及历史记录界面参考了 b 站。

主要的页面设计大致可以分为：

基础的页面布局主要分为两个部分：

  1. 左侧页面切换菜单栏

    菜单栏主要根据主要页面的分类进行 item 的遍历，主要就是上方黑体的部分。并且菜单栏需要根据具体的页面不同进行隐藏或否。

  2. 右侧主要内容区域

    主要内容区域则按照下方的页面设计来进行展示即可。

# 登录、注册页

# 登录、注册弹窗

在登录、注册页，需要展示一个登录、注册弹窗，这个弹窗可以复用一些比较经典的网站，复用我自己做的也可以。

这个弹窗的上方展示 Picals 的 Logo，下方就是两个老生常谈的 input 框，用以输入邮箱 / 用户名 + 密码。在 input 框下面展示切换登录与注册。如果切换到了注册，那么 input 框会变成四个，多了一个发送验证码 + 填验证码的 input 框和重复输入一遍密码的确认框。最下方的按钮字样也会随着登录 / 注册的状态切换而变化。

并且为了用户体验更加好，有些用户想要查看整个轮播的大图，提供了一个隐藏的按钮将登录框隐藏。隐藏后顶部对应会出现下拉按钮，点击后重新展示登录框。

# 背景轮播图

参考 Pixiv，登录页的背景都是用户自行上传的作品组成的轮播图，能够给刚准备进入的用户以一个比较良好的视觉体验。

轮播图考虑采用压缩过的缩略图进行，对整个界面进行平铺（为了优化首页的加载性能）。

# 首页

首页是用户进来所浏览到的第一个页面，同时也是左侧页面选择菜单的第一个默认选项。

首页汇总展示了用户关注的作者的新作、作品推荐以及作者推荐。

排布顺序：

  1. 最上方展示已关注作者的新作，按照横向 item 排布的方式展示， 展示不下的通过点击左右按钮进行窗口滑动浏览 。每个作品 item 展示这个作品的名称以及其缩略图，提供一个心性的点赞按钮。
  2. 中间展示系统推荐给用户的作品列表，以 item flex 排布并且可以换行的形式进行展示。固定推荐为 30 个作品，并且右下角提供了刷新按钮，用户可以点击进行列表的重新获取。

# 关注作者新作页

在这个页面主要获取到自己已关注的作者的最新发布作品。以分页的形式，和前端的分页器相结合，后端返回一个自己已经关注的作者的最新发布的作品的列表，按照时间顺序进行排序。

# 探索页

探索页分为 作品推荐 以及 作者推荐 两个部分。

# 作品推荐

就是单独把首页部分的作品推荐在这里拆了一份出来，也是采用划到底部进行分页获取的形式进行展示，作品 item 也是复用的。并且滚动到底部，提供骨架屏提示目前正在获取数据。当获取数据完毕后移除骨架屏。

# 作者推荐

和作品推荐的逻辑一样，也是单独从首页的功能拆出来的，采用的 item 也是一样，使用滚动底部的分页获取方式。

# 搜索结果页

搜索结果页分为 作品 tag 、 作者名 两种情况的展示。

# 作品 tag

如果用户按照作品名进行搜索，那么搜索结果也按照分页的形式进行展示，item 也保持不变。不过分页的方式不再是滚动到底部进行分页，而是 最下方会直接提供一个分页器，点击对应的页数进行页面的跳转 。

基本布局和通常的 item 布局差不多，最上面要展示目前带有这个 tag 的作品的个数以及这个 tag 对应的 logo。

# 作者名

作者名的搜索结果页整体框架也是复用前两个的，不过是把 item 换成了作者的 item。

# 上传作品页

在上传作品页，主要显示相关的作品表单信息。最上方使用 antd 提供的上传器，图片上传完成后将图片 item 以 flex 的形式罗列至上传器下方。并且在上传的过程中需要弹窗 + 进度条提示上传的进度。

图片上传模块的下方是表单填写，对于新增插画家这一操作需要提供一个额外的弹窗来处理。

# 作品详情页

作品详情页是展示某个作品详细信息的地方，需要把关于这个作品的所有信息无一例外的全部展示出来。

作品的高清大图（用户上传的原图）放在左上角的部分，并且图片下方提供了与用户进行交互的按钮列表：点赞、收藏。

作品按钮栏下方是作品信息栏，展示的内容包括：

  1. 是否转载标识
  2. 作品名
  3. 作品简介
  4. 作品的 tags
  5. 作品的发布时间
  6. 作品原 url（转载）
  7. 作品原作者（转载）
  8. 作品的收藏数
  9. 作品的点赞数
  10. 作品的浏览数

作品信息栏下面是这个作者发布的其他作品的列表，展示的方式就是首页的关注用户新作一样滚动获取数据的形式。

作品列表下方是评论区，可以考虑复用 littlesharing 项目的评论区。

右侧则展示作者的相关信息，包括：

  1. 作者头像
  2. 作者名称
  3. 作者签名

作者信息下方，展示目前的作品列表。用户能够点击进行列表之间的切换，并且也可以基于列表进行作品的切换。

# 原作者作品列表页

原作者作品列表页采用瀑布流 + 分页布局，一次性获取 10 个作品。当用户滑动到底部后，自动触发作品获取，将新作品以瀑布流的形式添加到作品列表下方。

# 个人中心页

个人中心页集中了用户在这个网站所产生的全部活动与数据，并且提供了管理的措施。总共可以分为如下几个页面：

  1. 我投稿的作品
  2. 我喜欢的作品
  3. 我收藏的作品
  4. 我关注的用户列表
  5. 我的粉丝用户列表
  6. 我的个人信息
  7. 浏览记录查看

# 我投稿的作品

第一页是展示用户投稿的作品。内部采用 tab 切换的模式，分为原创作品与转载作品。

每个 tab 页面都以作品 item + 分页器分页的形式进行展示，并且每个 tab 页面提供了两种作品的排序方式： 按热度 、 按时间 。

# 我喜欢的作品

采用 底部分页器 的分页浏览模式，采用的 item 还是老一个。具体每页展示多少个有待商榷，先进行实际的代码编写后再视情况而定。每个 item 也提供了取消喜欢的按钮，点击并通过弹窗确认后即可取消喜欢。

# 我收藏的作品

引入了 收藏夹 的机制，用户能够管理收藏夹以及收藏的作品的归类。

这个页面展示的就是用户自己的收藏夹列表，不采用分页的形式，一次性获取全部的收藏夹。默认收藏夹放在最前面，下面都是用户自己创建的收藏夹。

每个收藏夹 item 展示：

  1. 封面
  2. 名称
  3. 插画数量
  4. 编辑按钮

点击除了编辑按钮之外的地方，直接跳转进入收藏夹内部页。这个内部页展示的是插画的 item，原本的喜欢按钮替换为收藏按钮，点击会取消收藏。

点击编辑按钮之后，会弹出一个对话框，里面是原本收藏夹的名称、封面信息，用户可以重新上传新的封面、移除封面、更改名称，然后点击下方的保存按钮进行保存。

在最上方提供了收藏夹的管理栏：新增、编辑。

  • 点击新增后，会出现弹窗，弹窗会要求用户填写收藏夹名称、上传收藏夹封面。如果不上传封面，无作品的时候会展示默认的收藏夹图片，有作品的时候会把最后收藏的作品当作封面。

  • 点击编辑后进入编辑模式：

    • 收藏夹的管理栏会发生变化。从 新增 、 编辑 变为 删除 、 取消编辑 、 全选 / 取消全选 。

      删除配合下方的选中 item 进行批量删除；取消编辑点击后退出编辑模式；点击全选就把所有的收藏夹全部选上，如果已经全选了那么就会变成取消全选，点击取消全部的选择。

    • 收藏夹的 item 会发生变化。最前面提供了一个拖曳按钮，用户鼠标按住之后能够上下移动对这个收藏夹进行排序（默认收藏夹固定是排第一）；拖曳按钮右边是一个 checkbox，用户可以点击进行选中，主要是配合上方的删除按钮做批量删除。

# 我关注的用户列表

把用户自己关注的用户的 item 以分页的形式进行展示。

# 我的粉丝用户列表

把用户的粉丝用户的 item 以分页的形式进行展示。

# 我的个人信息

个人信息的查看主要有通过他人的个人主页进行查看和在自己的个人主页进行编辑两种情况。

主要展示的信息有：

  1. 用户名
  2. 用户 id（不可编辑）
  3. 用户个性签名
  4. 用户性别
  5. 头像
  6. 背景图

当在他人的主页进行查看时，出现包含上述信息的弹窗，并且可以选择是否进行关注 / 取消关注。

在自己的主页进行查看时，直接就是以编辑模式的形式出现弹窗，可以选择保存、取消保存。

# 历史记录页

历史记录页面记录了用户每天浏览的作品列表，以时间顺序倒叙排列作品。

左上角提供了当前查看的历史记录的日期，右上角提供了一个搜索框，支持用户输入作品名快速的搜索自己浏览过的作品。在搜索框下方提供了按钮，点击可以对当前日期进行前进、后退的操作，以浏览不同日期的浏览记录。