搞UI设计尺寸规范，别光看教程，这几点坑我踩过才懂

做这行七年了，真没少跟前端兄弟吵架。不是那种撕破脸的吵，是那种“你这间距不对啊”、“这字号看着怎么这么别扭”的无奈。很多刚入行的兄弟，或者甚至是一些老手，对ui设计尺寸规范这块，总觉得有个标准答案，拿着尺子量就行。其实吧，真不是那么回事。

记得前年接了个电商小程序的活，甲方要那种高大上的“全屏沉浸感”。我按着750px的宽度去画，心想这没问题吧？结果前端一接，说在iPhone 6/7/8和Plus上显示完全不一样，有的地方被裁了，有的地方留白太大。我当时就懵了，明明是按规范来的啊？后来折腾了一周，才发现问题出在“安全区域”和“刘海屏”的适配上。那时候我就明白，所谓的规范，不是死板的数字，而是对屏幕多样性的尊重。

咱们聊聊最头疼的移动端。现在谁还只盯着一个尺寸看？你得考虑iPhone的刘海、灵动岛，还得考虑安卓那一堆奇奇怪怪的屏幕比例。我现在的做法，不再死磕某一个具体的像素值，而是建立一套相对值的思维。比如，基础字号用14px或16px，行高设为字号的1.5倍，这样在大多数屏幕上看着都舒服。间距嘛，8px的倍数是个好习惯，但别迷信它。有时候为了视觉平衡，故意打破一下规律，反而更灵动。

说到桌面端，很多做B端后台的兄弟容易犯一个毛病，就是觉得屏幕大，内容就能随便塞。大错特错！用户的视线是有焦点的。我有个客户做数据大屏，一开始恨不得把每个数据指标都放最大，结果用户进去一看，眼花缭乱，根本找不到重点。后来我们调整了布局，把核心数据放在视觉中心，次要信息弱化，转化率反而提升了20%。这就是ui设计尺寸规范里没写，但至关重要的“视觉层级”。

还有那个切图的问题。以前我总抱怨前端切图不准，后来我自己试着用代码写写样式，才发现很多所谓的“不准”，其实是设计稿没给清楚状态。比如按钮的hover态、active态，还有不同分辨率下的图片清晰度。我现在给前端的标注，除了尺寸，还会加上字体粗细、颜色值，甚至动效的时长。这样他们做的时候心里有底，不用反复问我“这个圆角是4还是6”。

再说说那个让人头大的响应式。很多设计师觉得响应式是前端的事，跟我没关系。其实不然。你在画设计稿的时候，就得想好断点在哪里。比如，平板横屏和竖屏怎么切换？大屏显示器上，内容是拉伸还是居中？我现在的习惯是，先画一个最窄的移动端，再画一个最宽的桌面端，中间的过渡状态，用网格系统去约束。这样不管屏幕怎么变，内容都不会乱飞。

别总想着一次搞定所有尺寸。现在的趋势是“流体设计”，让内容自己适应容器。你给一个固定的宽度，反而限制了可能性。比如图片，别总想着裁剪成固定比例，试试object-fit: cover，让图片自动填充，保持比例，虽然可能会裁掉一点边角，但整体观感更好。

最后说点掏心窝子的话。规范是死的，人是活的。别被那些条条框框束缚住手脚。多看看优秀的案例，多跟前端沟通，多测试真机。有时候，一个小小的间距调整，就能让整体质感提升好几个档次。别怕犯错，错了就改，改多了你就有自己的感觉了。

如果你还在为适配问题头疼，或者想优化现有的设计规范，不妨聊聊。我这儿有些实战中的小技巧和模板，或许能帮你省点头发。毕竟，咱们这行，头发比代码值钱。