Matters 设计日志 Mar 20
Hello,之前在一篇作品的评论里介绍了自己,我是负责 Matters 产品的设计师,在此接受大家的吐槽和建议,也想借此机会复盘一些设计的思路。
![](https://assets.matters.news/embed/a11821f4-79fe-43a8-ad66-a56be941e6d1.png)
简单前情提要一下,最近更新的 Matters 3.0 以 Mobile First 为宗旨重新梳理了页面逻辑。之前 Matters 团队观察到移动设备的访问量在某个节点已经超越了桌面端,同时我也对旧版本的修修补补失去了耐心,于是促成了这次改版,至于界面的更新只是顺便的事情。
可能对很多习惯使用桌面端的朋友来说会有点不适应,不过我们一直在改进,毕竟只在设计稿里捣腾或者内部评审并不能发现所有问题,Matters 团队也没有庞大的 QA 人员,只有发布出来让更多人用到,才能捕捉更极端的情况。
先说一下 3.0 最大的改动,就是在目前没有原生 app 的阶段,使用 PWA 让读者获得足够好的使用体验。之前的版本是杂志型布局,需要大量的编辑力量才能让页面「好看」,在新版里我们放弃了这一点,让时间轴真正流动起来,让「追踪」变得重要,甚至成为浏览 Matters 内容的主要方式。同时我们也强化了之前的「标签」,让不喜欢单一讨论氛围的读者可以找到站上更丰富的内容。
说完了整体的思路(只是展开了一点点,还有更多的设计思路准备以后慢慢补充),我想介绍一下即将上线的两个新的改动。
屏效
大前提是,我对图片是持欢迎态度的。没错,图片会吸引阅读的注意力、有心机的人会利用这点、首页里质量低下的截图太多…… 但是不能因此就抹杀图片的各种好处,当然了,创作者也应该努力提高自己配图的水平。
在之前的一条回复里我提到,在设计之初我们就考虑到了大图在桌面端的表现,也在设置里预留了更改视图的选项,不过在未来的设计里,我们更进一步,把这个选项放在了首页。
![](https://assets.matters.news/embed/bc13212a-2118-468f-bf62-7428a0f4b609.png)
这样你可以更直观地体验到不同视图的特点,如果喜欢用图片作为视觉的分割,请继续选用默认的大图视图;如果更习惯之前 Matters 图文混排的时间轴,可以选择标准视图;如果你一目十行,以标题作为视觉重点,也有适合你的紧凑模式。同时,这个选项也会影响你在其他有时间轴的页面(比如作者主页等)的呈现。
赞赏
赞赏是 Matters 与其他平台最大的区别,尤其是与 LikeCoin 合作之后。在改版之后,为了节省移动版底栏的操作空间,我们顺便把桌面版的拍手按钮也一起简化了。不过这显然不是一个好的决定,在新的设计里,可以更直观地看到自己的赞赏数、总体的赞赏数以及赞赏的人数。
![](https://assets.matters.news/embed/056c437d-3dbc-451c-ad6b-0319ff8544dc.png)
不过需要跟旧版文章底部的赞赏按钮区分的是,绿色的「22 赞赏」显示的是赞赏个数,而不像之前是赞赏人数,现在的人数会显示在小头像旁边。我们会持续跟踪这个按钮的表现并作出持续改进,欢迎大家的反馈。
希望大家能喜欢这些新的改进 🤗
喜欢我的作品吗?别忘了给予支持与赞赏,让我知道在创作的路上有你陪伴,一起延续这份热忱!
![](https://imagedelivery.net/kDRCweMmqLnTPNlbum-pYA/prod/avatar/19b36f6e-6311-4cd6-b703-c143a4a49113.png/public)
![](https://imagedelivery.net/kDRCweMmqLnTPNlbum-pYA/prod/avatar/19b36f6e-6311-4cd6-b703-c143a4a49113.png/public)