UI 不只是好看：我设计博客界面时做的 7 个决定

设计目标先于装饰#

博客的核心任务是阅读和发现内容，所以视觉设计不能抢走文章本身的注意力。我把目标定为：信息层级清楚、长文阅读舒适、移动端操作自然，同时保留足够鲜明的个人气质。

七个具体决定#

1. 限制正文宽度和行长，降低长时间阅读的视线移动成本。
2. 用字体大小、字重和留白建立层级，而不是依赖大量边框。
3. 同时设计浅色与深色主题，并确保颜色语义在两种主题中一致。
4. 把按钮的 hover、focus、disabled 和 loading 当作完整组件状态处理。
5. 移动端优先保留主要动作，把次要操作收进菜单或折叠区域。
6. 为空数据、加载、失败和成功分别设计明确反馈。
7. 使用统一的设计 token 管理颜色、圆角、阴影和间距，避免页面各自发挥。

功能性如何被验证#

审美判断之外，我会检查键盘导航、焦点可见性、文字对比度、点击区域和不同宽度下的布局。真实浏览器测试能发现只看代码看不到的问题，例如标题换行、弹层遮挡、滚动位置和触摸设备上的交互冲突。

设计与开发一体化的优势#

当同一个人理解产品目标、设计约束和实现成本时，可以更快找到兼顾效果与维护性的方案。组件不是截图的翻译，而是可复用、可扩展、能覆盖真实状态的产品单元。