• 新鲜事

  • 极简风提升Hugo博客文章列表页面的用户体验

最近又开始在业余时间鼓捣 Hugo/blogdown 主题……

以前一直没有想通的一个问题就是博客列表页面的布局，看起来是这样的：

这个布局不是很理想，因为标题长短不一，视觉上很不规整。我的理想布局如下：

  1. 表格式布局，意味着元素需要贴合网格。
  2. 标题挪到日期左侧显示，因为注意力一般集中在左侧。
  3. 每一行的列表元素都可以整体点击，无需对准标题元素。
  4. 鼠标指针划过每个列表元素应有更明显的视觉提示。
  5. 在桌面端和手机端都能正常显示。

更具体一点，体验应该类似于 Apple Music 的曲目列表。原来我觉得这件事情很困难，上手做了以后发现其实加一个 div 再修几行 CSS 规则就可以实现 (Bootstrap 5)。中间参考了 Zeno Rocha 的布局。结果如下：

更新：修改了几处 CSS 的细节：使用了更深一些的 hover 背景色，上下各增加 1px 的 bleeding 以覆盖水平分割线，去掉了 0.3 秒的淡入淡出动画来增加流畅度。😂

当标题很长导致跨行的时候，将行间距缩小替代文章之间的浅色横线怎么样？

    Cloud2016 当然可以了，具体细节自己把握即可。个人感觉使用横线比较容易做出规整的效果……

    Apple Music 为了区分列表中的不同行在桌面端有两种显示模式，第一种是 striped rows，第二种是使用横线。手机端采用的是横线。对于换行这个细节，首先他们的字号设置比较小，不容易出现需要换行的问题。其次即使有长标题，会使用 ... 直接隐藏多出的文字。当然，不显示完整标题对于一个音乐应用来说是可以的，对于文字媒体类就不太适用。

      9 天 后

      wglaive Cloud2016 原来的风格确实就很好…… 可以展开说一下我的出发点：

      原来的简单列表布局简单又好用，特别在标题都较短无需换行的情况下。问题就出在各种拥有长标题的文章，比如正好有一两个词需要换行的情况（寡行和孤行）。由于换行会在页面中间发生，且各行行高较低，会打破视觉上的规律感。用新的表格布局把标题挪到左边，增加行高，加上水平分割线的视觉提示，就缓解了这个问题。同时，也重点突出了标题内容，降低了不那么重要的日期信息的优先级。

          我的主观感受是，如果把这些标题当成 list 的一个个的 item 的话，日期就像 bullet，可以起到某种抓手的作用，视觉上有个着眼点，每个标题都是分开的。换句话说，虽然日期的信息有抢占注意资源的风险，但它在形式上同时也帮助了我更好地加工标题。