新的博客页面很适合小屏幕,但卡片文字继承了浏览器默认的蓝色和下划线。结构没错,视觉效果却破坏了整个设计。
修复后的状态 / 手机
白色文字,清晰平静的层级。
无论链接是否曾被访问,整张卡片都保持统一外观。
修复了什么
现在卡片明确指定文字颜色,取消默认下划线,并单独定义已访问链接样式。我还加了轻微的悬停效果,只加强边框,不改变布局。
界面设计不止于首次渲染。已访问链接、焦点、触控和窄屏状态也都需要设计。
为什么写这件事
这就是一个典型例子:代码里只改几条声明,屏幕上的效果却完全不同。现代设计由这些细节组成,尤其在手机上,错误更没有地方藏。
修复已经公开上线,卡片现在在手机和电脑上都保持相同的字体表现与对比度。