首页Picals相关文档

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

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

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

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

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

  1. 左侧页面切换菜单栏

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

  2. 右侧主要内容区域

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

# 登录、注册页

# 登录、注册弹窗

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

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

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

# 背景轮播图

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

轮播图考虑采用压缩过的缩略图进行，对整个界面进行平铺（为了优化首页的加载性能），并且左下角展示插画的一些最基本的信息，比如上传这个作品的作者、插画的原 url（仅限转载作品）等。

# 首页

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

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

排布顺序：

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

# 关注作者新作页

在这个页面主要获取到自己已关注的作者的最新发布作品。后端返回一个自己已经关注的作者的最新发布的作品的列表，按照时间顺序进行排序。采用分页的形式，如果用户滚动到网页最低端会触发获取更多的作品。当滚动到用户上次浏览的 item 前面之后，在那个 item 前面加上一句 “上次看到的是这里” 的提醒。

# 探索页

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

# 作品推荐

就是单独把首页部分的作品推荐在这里拆了一份出来，也是采用划到底部进行分页获取的形式进行展示，作品 item 也是复用的。

# 作者推荐

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

# 搜索结果页

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

# 作品名

如果用户按照作品名进行搜索，那么搜索结果也按照分页的形式进行展示，item 也保持不变。

不过分页的方式不再是滚动到底部进行分页，而是 最下方会直接提供一个分页器，点击对应的页数进行页面的跳转 。

# 作品 tag

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

# 作者名

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

# 作品详情页

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

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

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

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

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

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

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

  1. 作者头像
  2. 作者名称
  3. 作者签名
  4. 作者的各个社交媒体的连接
  5. 作者代表作（选两个点赞 + 收藏最高的）

上面已经将作品本身的信息展现完毕，如果用户接着往下滑动，则会触发与这个作品相似作品的获取。具体的逻辑采用前面滚动底部分页的形式。

# 个人中心页

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

  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. 喜欢的作者（填写插画作者的主页 URL，以 markdown 的 []() 超链接形式进行填写）
  6. 头像
  7. 背景图
  8. 当前职业

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

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

# 我的数据查看

在我的数据页面汇总了几乎所有用户在这个网站活动的记录数据。

  1. 作品数据

    投稿了多少份作品，其中原创和转载的占比和数量分别为多少，总共收获多少次的点赞、收藏、评论与浏览量。

    相较于昨天 ，作品的浏览量、收藏量、点赞量、评论数量又多了多少。

    分别显示点赞、浏览、收藏、评论数量的变化趋势折线图。

  2. 活动数据

    1. 浏览、点赞、收藏作品的标签总数统计
    2. 用户自己发布过的评论列表