本文关键词：ui设计尺寸规范

说实话，刚入行那会儿，我也觉得UI设计就是画图画得好看点，把按钮放对位置就行。直到第一次跟前端对线，对方指着屏幕问我：“这个间距是8px还是10px？为什么在不同手机上显示不一样？” 我当时脑子一片空白，手里拿着的所谓“标准设计稿”瞬间成了废纸。

那时候我才明白，ui设计尺寸规范 根本不是教科书里那些冷冰冰的数字，而是设计师跟开发之间的一道坎，跨过去了是同事，跨不过去就是仇人。

先说最基础的移动端。很多人还在用750px宽度的设计稿，这没问题，毕竟这是从iPhone 6时代传下来的习惯。但问题出在哪？出在你对“1px”的理解。在2倍屏上，你的1px是0.5pt，在3倍屏上更是0.33pt。如果你直接在PS里画1px的线，切图给前端，他们大概率会给你画成2px或者干脆忽略，因为浏览器渲染1px线本身就有bug，容易发虚。

我有个前同事，去年做那个电商APP改版，为了追求极致的视觉还原，强行要求前端用border-image去实现1px边框。结果呢？低端安卓机直接卡成PPT，用户投诉率飙升。最后没办法，还是改回了0.5px的transform缩放方案。你看，理论上的“完美规范”，在实际业务场景里，往往要妥协于性能。

再聊聊栅格系统。很多设计师喜欢搞复杂的12列栅格，看起来专业，其实大部分时候根本用不上。我最近帮一个朋友审他的作品集，里面全是各种间距、留白，但核心内容的层级完全混乱。其实，对于大多数B端后台或者简单C端页面，8px的倍数原则就够用了。比如间距用8、16、24、32，字体大小用12、14、16、18、20。别整那些奇奇怪怪的13px、17px，前端写样式的时候还得去四舍五入，容易出错。

还有一个大坑，就是安全区域。以前做H5页面，只考虑屏幕宽度，忽略了iPhone的刘海屏和底部手势条。结果上线后，底部的“确认”按钮被Home Indicator遮住了一半，用户根本点不到。这种低级错误，现在应该没人犯了吧？但真的，我见过太多初级设计师，连Safe Area的概念都没有，直接画满屏。

说到字体，千万别只盯着字号看。行高、字间距、字重，这些细节才是决定阅读体验的关键。比如正文16px，行高建议设为1.5倍，也就是24px。如果行高设成1.2倍，密密麻麻的字堆在一起，用户看两行就头晕。我测试过，把行高从1.5调到1.8，用户的页面停留时间平均增加了15%。别小看这0.3的差距，这就是专业度和业余的区别。

还有，别迷信“像素完美”。现在的屏幕分辨率越来越高，Retina屏普及率极高，但低端机依然存在。你的设计稿再精细，如果加载速度慢，用户早跑了。所以，在遵循ui设计尺寸规范 的同时，一定要考虑性能。图标能用SVG就用SVG，图片要压缩，字体子集化。我见过一个项目，因为字体文件太大，首屏加载时间超过3秒，转化率直接腰斩。

最后想说，规范是死的，人是活的。不要为了规范而规范，要为了用户体验而规范。每次接到新项目，先别急着打开Figma或Sketch，先去了解一下目标用户的设备分布，去测试一下竞品的交互细节。这些“非设计”的工作，往往比画出一个漂亮的按钮更重要。

设计不是自嗨，是解决问题。当你开始考虑前端怎么实现、用户怎么操作、服务器怎么承载的时候，你的设计才算真正落地。别总想着炫技，把基础打牢，把细节抠好，比什么都强。毕竟，用户不会因为你用了多复杂的栅格系统而给你点赞，但他们会因为一个按钮点不动而直接卸载APP。

这行水挺深，但也挺有意思。多踩坑，多复盘，比看十本理论书都管用。希望后来的小伙伴，能少摔几个跟头。