纠结于博客中的链接样式

我对原来的主题样式有些不满意, 于是决定自己做修改. 最近重点在改的是链接的样式, 包括链接默认颜色, 鼠标悬停(hover)及点击时(active)时的颜色, 还有就是阅读全文以及分页按钮的样式, 因为他们本质上仍是a标签. 但在自定义的过程中, 我遇到了很纠结的问题, 就是我想到了两个方案, 却不知道哪一个更好…

过程

先来看看原来的链接样式是红色的, 可以点击这里

我觉得红色太突兀了, 于是参考GitHub, 把链接的颜色修改成蓝色的

这个时候就开始纠结”阅读全文”的样式了. 主题原本设计是按钮形状, 默认灰色, hover及active时高亮. 我把链接改成蓝色后, 则”阅读全文”按钮高亮时是蓝色, 我觉得好像蓝色太多了, 在一段文章里突然来这么多蓝色, 有点不和谐.

于是我尝试改成黑白的, 我觉得这个与文章看起来和谐一点. 但这样的话, 又与”链接是蓝色的”这个设计不统一了. 真是纠结呀. 此时我的不知如何是好.

我先暂且把这个问题放一边. 因为默认的分页按钮更难看, 那个一定要改掉.

于是我去hexo的主题页, 一个个地去查看里面的主题, 看看它们的分页按钮是怎么样的, 顺便也看看”阅读全文”的样式, 期望一石二鸟.

在浏览各种主题的过程中, 我逐渐认识到一个问题, 那就是局部是离不开整体的. 也许某个主题的分页按钮很好看, 但放到我这里来很可能就不和谐了. 是的, 和谐, 这是一个很重要的点. 既然是链接的颜色是参考GitHub的, 那我分页按钮也参考GitHub就好啦.

综合参考GitHub(最后的”contact a human”的按钮)以及这个博客的风格, 最终”阅读全文”及分页按钮我设计成这样:

理由是:

• 超链接的样式, 一定要醒目, 与普通文本区分开来, 不然别人不知道可以点击
• 无论”阅读全文”还是分页按钮,它们本质上都属于超链接, 因此要注意保持它们样式的一致性
• “阅读全文” 是存在于一段文本中的. 如我之前所说, 一段文本里突然来一个大按钮, 有点突兀; 并且这个按钮也很醒目, 分散了看文章的注意力. 因此我觉得它就做成普通超链接就好
• 分页按钮 是脱离文本段落单独存在的, 因此它可以做成按钮, 起提醒作用. 因而它在hover及active时整个背景变蓝, 不会有突兀的感觉. 至于去掉分页数字, 是因为我觉得看文章的人不会在意你有多少页的, 而且如果要显示分页数字, 样式要多花一些时间去调整, 我就偷了个懒~

结论

我觉得我之所以会纠结, 是因为我缺少相关的UI知识.

如果说给我一张PSD, 我把他实现html, 那很顺利, 也许我还能指出其中的设计不合理(没有考虑到网页里的一些限制). 但如果说要我自己来设计页面, 我就不知所措, 无从下手了.

是时候补一波UI知识啦~

后记

以整体保持风格保持一致的的观点来看, 我觉得某网站为案例, 看看有没地方可以优化的.

先上图

页面一中, 鼠标悬停到Github上时, 文字变成了绿色, 且出现了下划线.

综合两张图, 可以初步得出结论, 该网站链接的色调是绿色的. 如果有链接不是绿色, 说明未激活, 或未得到鼠标焦点.

可是下面的例子却出乎意料

“稍后阅读”本来是绿色的, 表示是链接, 但鼠标悬停时, 反而变成黑色的, 表现得与页面一不一致. 这是不和谐的地方, 可以优化成: 鼠标悬停时, 出现下划线, 颜色不用改变.