Day 7 - 原型 (6): 预览主页

前言

今天利用之前所建的主页, 建立一个可让使用者互动的原型｡

预览

利用Figma的预览功能, 即右上角的三角形(如下图红色标示), 可以帮助我们修正原型｡

打开後, 你可以以纯浏览器的角度预览｡

主页修正

打开滚动条来处理溢出的帖子

先预览主页, 发觉不能够滚动溢出的帖子｡

解决方案是先对住包含帖子的frame, 启用clip content来隐藏溢出的帖子｡

再打开Prototype中的Vertical scrolling来打开滚动条｡

效果展示:

按了READ MORE应该要进入帖子页

先点击READ MORE的按钮, 在右边的interactions中, 点击+号来增加一个Click的interaction, 之後设定navigation至帖子页, 如下图｡

设定好了, 便会看到一个蓝箭头从READ MORE, 指向帖子页｡

效果展示:

搜索跟筛选帖子

使用者按了搜索跟筛选後, 应该分别进入搜索了或是筛选了的主页, 如下图

搜索後的主页:

筛选後的主页:

这两页是由主页中复制出来的, 只是多加了一个信息框来提示搜索或筛选的信息, 用家也可以按右上的x号来返回主页｡

效果展示:

後语

明天再预览修正帖子页, 原型就大致上完成, 可以开始coding｡