xaoxuu / hexo-theme-stellar

内置文档系统的简约商务风Hexo主题,支持大量的标签组件和动态数据组件。
https://xaoxuu.com/wiki/stellar/
MIT License
1.34k stars 329 forks source link

分页器样式改进建议:保持灰度值会更协调些 #266

Closed Tikas closed 10 months ago

Tikas commented 1 year ago

发现前的 BB

刚刷完 css ,就着手开发的我,对 css 完全懵了,看起来,好像都知道是什么,用起来直接发愣了。

刚好想起来,怎么处理图片懒加载,又想到了占位图,然后就又双叒叕想起来,在大大这里提问过占位图的提问,哈哈,就来看看答案,顺便访问一下大大的个人网站。

整体的访问是非常享受的,起快的加载,优雅的版面,瞬间吸引了我阅读的注意力。

当返回首页看起分页器时,我懵逼了,按照高亮是激活理解,我到底是在那一页呢?

由此,我陷入了思考。

查阅参考

参考了如下几个网站,都是非常容易理解:

异次元

image

异次元,主要是强化上一页和下一页,让用户更直观的注意在这两个按钮上,弱化了具体的分页,但是,依旧会框选描边,以突显当前页面。

参考链接:异次元第二页

github issues

image

github issues 是我在提问 issues ,留意的,也是让我一眼就能明白当前所在。

思考

我们是否有必要弱化当前页面,来突显出其他页面的需求?

个人答案:

这是一个视觉的挑战,异次元的做法是在突出上下页,弱化其他分页时,还是会加强了当前页面,这无疑会比较符合一直以来深入网民的分页设计。

毕竟,访客的第一眼读取的信息就是高亮代表了当前页面。

而看整体的其他视觉,也是符合这点设计,为此,我认为分页器理应保持整体的一致性。

其他部分设计参考:

image

修改前后的对比

由于 css 实在是只刷完教程,动手能力比较弱,这里只在 F12 里简单修改

修改前:

image

修改后:

image

题外

另外觉得以前的设计确实适合更多分页的显示 #260

更多的分页,主要还是受到大大的网站只有三个分页,限制了我的感观判断,以前的设计是否更适合,还要看具体的实际情况。这里的 “确实适合” 会有很大的误判行为

xaoxuu commented 1 year ago

很好的的建议👍 我确实是为了区分可点击与不可点击做成这样的,你讲的有道理,不过修改后的1和3看起来不像按钮,如果保留原来的链接颜色呢?(也就是只去掉1和3的背景) 或者1和3保持原样,强化2的效果,改成蓝色背景白色文字呢?

Tikas commented 1 year ago

哈哈,之前有尝试过,保留 1 和 3 的蓝色,还是会抢焦点,如果把 2 的样式改成类化 github issues 的分页,这种情况下才能协调些。

然而,看整个页面都是中性灰比较多,个人还是比较接受灰色的分页器,当然,使用更突出的蓝色也是可以的,这样能更让人注意到这分页器

xaoxuu commented 1 year ago

那就这个吧,你可以提个PR吗

Tikas commented 1 year ago

哈哈,不会哇,我现在全心在到处抄,逻辑都在自己动手的第一个主题里,css 刚刚好还不怎么会,很乱,我得想想怎么更科学去分配 class 等。

可以来看看 复制出来的首个项目,顺便想听听大大是怎么规划 css 部分的

Tikas commented 1 year ago

主要还是对 css 掌握不够,现在我复制别人的 css 都改大半天,很多都不知其作用,得看看文档,太难了,刷教程式学习,动手能力真的太差了。

如果我来提交 pr, 我需要看一遍结构,改的时候还要测试半天,太慢了,大大自己来改这个,应该一会的事。

当然,这是一个不错的动手机会,可惜的是,我现在刚刚好处于动手的时刻。

对了,pug 真不错,非常适合我这个有过电脑破程序小软件开发的业余人,简单的一个判断,就能让首页开启了轮播时,首页按需加载 swiper 的 js 和 css. 而其他页面不会出现这些资源的引用,大爱这编程化的结构语言。

if (is_home()) && theme.banner.enable
  script(src=url_for(theme.banner.js))
github-actions[bot] commented 1 year ago

:wave: Hello, Your suggestion is great, we will add this feature in subsequent versions, thank you very much!

:wave: 您好, 您的建议很棒,我们将会在后续版本中加入这个功能,非常感谢!

xaoxuu commented 10 months ago

已经改好啦

github-actions[bot] commented 10 months ago

:wave: Hello, This issue has been marked as resolved. If there are other issues, please contact us with a new issue.

:wave: 您好, 此 issue 已经被标记为已解决,如果还有其它问题,请提出新的 issue 联系我们。

Tikas commented 10 months ago

现在才看到信息,主要年底太忙了,加上自己想转 astro , 由于 js 没学,只能暂时放下。

我看看年后回来能不能开个工作室,减少自己的工作量,这样才能有时间进一步学习建站知识,以壮大社区,不过,我好像要抛弃 hexo 了,好喜欢 astro

xaoxuu commented 10 months ago

加油,你可以先研究一下 👍