浅谈UI设计系统-培养系统化设计思维

发布时间：2026-02-03 热度：

UI设计中系统化的设计思维是非常重要的，它关系到个人能否理解和把控项目的全局、团队合作时项目能否高效推进以及后续能否全局统一性地进行迭代优化。

站在公司的角度来看，当有新的设计师加入公司时，项目的设计系统文档便是新任设计师的“字典”，可以帮助新任设计师快速了解产品的设计体系并进入工作状态。

01 单位

互联网设计的基础单位是像素，单位px。分辨率=像素/英寸，常见的分辨率72ppi的意思是一英寸的长度下包含72个像素，300ppi即是一英寸的长度下包含300个像素。

我们都知道一英寸的物理长度是固定的，而一英寸可以包含不同的像素数量，因此像素是没有固定的物理大小的，一个像素可以有宇宙那么大，也可以像针尖一样小。

既然像素没有实际大小，那么用来作为工作中的尺寸单位就会发生很多问题。

案例：你的领导说做一个40像素的图标，你画完之后却发现画得太大了，这就是因为领导指的其实是在2倍图的尺寸（750*1334px）下的40px，而你却在375*667px的1倍图画板上画得这个40px的图标，图标的尺寸自然就大了一倍。

那么如何避免发生这类问题呢？这里就要引出我们的重点单位——逻辑像素，单位pt。逻辑像素的大小等于一倍图下物理像素大小，即在一倍图的中，1pt=1px；而二倍图的中，1pt=2px；三倍图的中，1pt=3px。

此处用iPhone11和iPhone11pro max举例，iPhone11的倍率是2倍，尺寸是1792 x 828px；iPhone11pro max的倍率是3倍，尺寸是2688 x 1242px。由此可见他们的逻辑像素都是414 x 896pt，因此我们只需要在一倍图414 x 896pt的尺寸中进行设计，再乘以相应的倍率即可。

02 尺寸适配

为了保证最终的成品与设计稿的UI相符，实现精准的落地效果，设计师还需要考虑各机型尺寸的适配问题。项目初期考虑到时间和人力成本，通常需要一稿适配多个终端，所以在设计前选择一个合适的画板尺寸就显得尤为关键了。

选择设计尺寸需要分析主流机型的尺寸分布情况，应当选择使用人群居多、尺寸大小居中的尺寸设计，再用这一尺寸去适配其他机型。

苹果目前的屏幕尺寸数量相较于安卓较少，目前iOS居中的屏幕尺寸依然是750*1334px，向下可以适配640x1136px，向上可以适配1242x2208px和828x1792px／1125x2436px；该尺寸的画板同样可以适配安卓阵营，常见的安卓手机屏幕尺寸有720*1280px，1080*1920px，1440*2560px等。

综上可以得出在设计时选择逻辑像素为375*667pt的画板进行设计，可向上向下适配iOS和安卓的多种机型，实现一稿适配多平台。

注意：在适配iPhoneX一类全面屏机型时需要注意屏幕安全区域，需在上方预留44pt，下方预留34pt；对于单屏显示的界面（引导页，启动页闪屏等）需要重新布局设计。

03 布局

在界面设计前需要先确定全局的左右边距，确保产品所有页面的内容区域一致；建立全局的页面栅格系统，使界面的布局更有逻辑性，页面更加条理，画面更加平衡。

1.全局左右边距：指页面内容到屏幕边缘的距离，整个产品的界面都应该以相同的边距进行规范以达到页面整体视觉效果的统一，可根据实际的产品气质采用不同的全局页边距。

2.栅格系统：一种规范的页面布局方法，在界面元素众多时使用栅格系统可以使界面更有调理和秩序。其中网页端通常使用12列栅格，移动端通常使用6列栅格。每个栅格包含“列”和“水槽”，列用来承载内容，水槽则不能填充内容，栅格中的列越多灵活性就越大，但同时复杂性也更高，所以列数并不是越多越好。很多时候需要将多个栅格合并成一个组合区域使用，组合区域内的水槽可以承载信息。

公式：内容宽度=（列+水槽）X栅格数-水槽

3.常用模度：下图出自Ant design的一组可以用于UI布局空间决策的数组，他们都保持了 8 倍数的原则、具备动态的韵律感。经过验证，可以在一定程度上帮助我们更快更好的实现布局空间上的设计决策。