做独立博客这七年，从最早用 WordPress 瞎改模板，到后来自己写代码搭框架，中间踩过太多坑。特别是做后台管理或者复杂 H5 的时候，最头疼的就是 UI 页面设计规范这东西。很多新手设计师一上来就搞大场面，颜色要炫酷，动效要丝滑，结果上线后用户根本找不到按钮在哪，加载慢得像蜗牛。

说实话，我也曾为了追求所谓的“高级感”，把间距调得乱七八糟。记得有次给客户做电商活动页，没按 ui 页面设计规范来，导致在不同手机上显示完全错位。安卓机上一看挺正常，到了 iPhone 13 Pro Max 上，那个导航栏直接盖住了搜索框。客户当场发火，说这页面没法用。那天晚上我熬夜重做，才深刻体会到，规范不是束缚，是保命符。

咱们聊聊真正的 ui 页面设计规范该咋整。别整那些虚头巴脑的理论，直接上实操。首先是栅格系统。很多教程都讲什么 12 列栅格，但在实际项目中，你得根据内容灵活调整。比如我做博客首页时，发现 8 像素的基准单位最舒服。所有间距、边距都必须是 8 的倍数。这样不仅开发写 CSS 方便，而且视觉上看着整齐。别觉得 8px 太死板，有时候 10px 或者 14px 这种奇数反而更自然，但前提是你得统一标准。

再说说字体和字号。这是最容易出问题的地方。以前我总喜欢用细字体，觉得显得精致。结果在户外强光下，用户根本看不清。后来我调整了策略，正文至少保证 16px，行高设为 1.6 倍左右。这样阅读起来不累。对于关键的操作按钮，字号要大，颜色对比度要足够。这里有个小细节，很多人容易忽略，就是深色模式下的文字灰度。不能直接用纯白，稍微加点灰，不然眼睛会刺得慌。

还有交互反馈。ui 页面设计规范里，这点往往被写得模棱两可。其实很简单，只要用户点击了，就得有反应。哪怕是微小的变色，或者震动一下。不要让用户猜这个按钮能不能点。我见过不少设计稿，按钮是灰色的，看起来像禁用了，但实际上点上去能跳转。这种反人类的设计，必须杜绝。

说到响应式，现在手机型号多如牛毛。做 ui 页面设计规范时，一定要覆盖主流分辨率。从 375px 的小屏到 4k 的大屏，都得测一遍。特别是横竖屏切换的时候，布局会不会崩？图片会不会拉伸变形？这些细节决定了产品的生死。有一次我偷懒，只测了竖屏，结果用户横着拿手机看文章，图片直接被切了一半，评论区全是吐槽。从那以后，我每次交付前都会拿着真机狂刷测试。

最后提一嘴，设计系统。如果你团队超过两个人，千万别各自为战。建一套统一的设计系统，把常用的组件、颜色、图标都存好。这样不仅效率高，还能保证风格一致。虽然前期搭建麻烦点，但后期维护能省一半力气。

总之，好的 ui 页面设计规范，不是写在纸上的条文，而是藏在每一个像素里的体贴。它能让用户无意识地顺畅操作，而不是被各种别扭的体验劝退。希望我的这点经验，能帮正在纠结的你少走点弯路。毕竟，做设计就是为了让人用得爽，不是为了炫技。

对了，最近我在整理一套新的组件库，发现有些旧规范确实过时了。比如现在的圆角半径，以前流行 4px，现在 8px 甚至 12px 更受欢迎，看起来更柔和。技术更新快，规范也得跟着变，不能刻舟求剑。

好了，今天就聊到这。要是你觉得有用，记得收藏备用。下次遇到具体的布局问题，欢迎留言讨论，咱们一起折腾。