做独立博客这十年，我见过太多人死磕 ui 网页设计尺寸。刚入行那会儿，我也以为把画布设成 1920 像素宽就万事大吉了，结果上线后才发现，手机上看全是留白，电脑端又挤成一团。那种看着设计稿和实际效果对不上的挫败感，真不是谁都能体会的。特别是现在移动端流量这么大，你还抱着旧那一套死板尺寸，迟早得翻车。

其实 ui 网页设计尺寸这事儿，根本没有什么万能公式。以前我也总纠结要不要切图切成 3 倍图，后来发现那是给高分屏准备的，普通用户根本不需要那么精细，反而拖慢了加载速度。我现在做项目，第一件事就是先搞清楚你的目标用户是用啥设备上网。是那些还在用老款安卓机的中老年群体，还是喜欢折腾最新 iPhone 的年轻人？这点想不清楚，后面所有的 ui 网页设计尺寸规划都是瞎忙活。

第一步，别急着打开 Figma 或者 Sketch。先去查查你网站后台的数据，看看访客的主要分辨率是多少。我有个朋友，他那个电商站数据跑出来，75% 的人都在用手机浏览，结果他首页横幅还做了 1200 像素宽，手机端直接裁掉了一半，用户点都点不到按钮，转化率能好才怪。

第二步，确定一个基础栅格系统。很多新手喜欢随便画个线，其实建议从 12 列栅格开始，这是目前最稳妥的方案。对于 ui 网页设计尺寸来说，宽度通常设定在 1440px 左右作为桌面端基准，但一定要记得设置断点（Breakpoints）。比如当屏幕小于 1024px 时，布局自动变成两列；小于 768px 时，变成单列流式布局。这样不管用户拿什么设备看，体验都不会崩。

第三步，留白要舍得。以前我觉得页面空着可惜，恨不得塞满信息。现在才明白，适当的留白才是高级感的来源。特别是在处理 ui 网页设计尺寸的时候，内容区域不要顶满屏幕，左右各留 20-30px 的边距，视觉上会舒服很多。而且这个边距在不同设备上要自适应，不能写死死数值。

第四步，测试！测试！还是测试！别信预览图，直接把链接发到不同手机上试。我有一次就因为没测小米的老机型，导致导航栏图标被遮挡，用户体验极差，后来花了一周时间才改回来。这种教训太痛了，希望大家别重蹈覆辙。

最后说句心里话，技术更新太快了，今天的最佳实践明天可能就不适用了。所以与其死记硬背一堆 ui 网页设计尺寸参数，不如多培养自己的响应式思维。记住，设计的核心是人，不是像素。只要你能站在用户的角度去思考，哪怕偶尔算错几个数字，也不会影响整体效果。毕竟，没人会因为少了一个像素点就给你差评，但要是操作起来别扭，大家可是会立马关掉页面的。

希望这篇啰嗦的碎碎念能帮到正在为尺寸头疼的你。咱们做设计的，初衷不就是为了让别人用得爽嘛。