在UI设计这件事上，很多人都会卡在一个阶段：界面看起来好像没问题，但就是不够统一、不够专业。按钮大小不一致、字体层级混乱、间距全靠感觉，最后只能靠反复微调来补救。所以这篇文章不讲抽象的设计理念，只专注一件事：把 UI 设计中最常用的尺寸规范，整理成一套能直接用的参考标准。这些数值来自很多UI设计师的实际经验，也参考了大量墨刀素材广场中成熟项目的组件规范和真实页面落地效果。你可以直接照着用，也可以在此基础上，根据自己项目的定位和用户群体做适当调整。
1.文字与图标：决定界面专业度的基础规范
在 UI 里，文字和图标是出现频率最高的元素，也是最容易拉开“新手感”和“成熟感”的地方。很多设计一眼看着不高级，问题往往不在配色，而在字体层级混乱、图标大小不统一。
1.1 字体层级推荐区间
常见 UI 文本可以分为四类：
标题文字：16px – 24px
副标题文字：14px – 18px
正文内容：14px – 16px
辅助说明 / 次要信息：12px – 14px
实际使用中，重点不是具体选哪个数，而是层级之间要有明显区分，不要所有文字都挤在 14px 附近。在墨刀设计中，你可以直接用文字样式组件统一管理，比如设置「H1 / H2 / Body / Caption」样式，后面改一次，全局跟着变，新手也不容易翻车。
1.2 行高与字距建议
行高：字号的 1.5 – 1.8 倍
字距：字号的 0.1 – 0.2 倍
行高太小会显得压抑，太大又会显空；字距也是同理，建议在设计时多看整体阅读感，而不是死抠数值。
1.3 图标尺寸常用规范
常规功能图标：16 × 16px
主要操作或导航图标：24 × 24px
在墨刀设计里，直接使用组件或图标库可以避免尺寸不统一的问题，对新手非常友好。
2.按钮设计：不只是好不好看
按钮是 UI 中最重要的交互入口，尺寸不合理，用户点着都会别扭。推荐区间如下：
按钮高度：30px – 40px
左右内边距：10px – 20px
圆角：4px – 8px
按钮不是越大越好，而是要看着能点、点着不费劲。在墨刀中，按钮组件本身就带有默认规范，你只需要改文字、换颜色、调状态（默认 / 悬停 / 禁用），不用从0开始画，能省大量时间。点击免费注册墨刀，开启UI设计新体验！
3.输入框尺寸：影响填写效率的关键细节
输入框的设计目标只有一个：让用户愿意填、不抗拒填。建议尺寸：
输入框高度：30px – 40px
内边距：10px – 15px
圆角：4px – 8px
如果是表单密集型页面（如后台系统），建议统一高度，整体会干净很多。
4.导航栏规范：决定整体结构是否清晰
不管是 Web 端还是后台系统，导航栏设计都是信息架构的骨架。常见推荐值：
导航栏高度：60px – 80px
导航图标尺寸：24 × 24px
导航项间距：20px – 30px
在墨刀素材广场，很多后台原型模板已经帮你把这些基础规范做好了，直接复用效率非常高。
5.卡片组件：模块化设计的核心
卡片是现在 UI 里最常见的承载形式之一，用得好，界面会非常清爽。推荐范围：
卡片宽度：200px – 400px
高度：根据内容自适应，建议不超过 400px
内外边距：10px – 20px
圆角：4px – 8px
卡片设计的重点不是多好看，而是信息是否一眼能扫完。
6.图片与插画：清晰永远比花哨重要
图片尺寸没有绝对标准，但有两个原则：第一，尽量使用2x / 3x图，保证高清屏显示效果；第二，宽高比例与页面布局统一，避免拉伸变形。
如果你在设计中经常缺插画、缺配图，墨刀里也有大量现成素材和模板，直接用在原型或 UI 中，不需要额外找资源。点击免费注册墨刀，一键套用模板，快速开启在线设计！
这套 UI 设计规范，更多是从尺寸和落地可行性出发做的总结。至于排版原则、布局逻辑、交互习惯这些内容，相信真正做过 UI 的人，都会在项目中慢慢形成自己的判断。很多设计师在实际工作中，习惯使用墨刀来完成从原型到设计规范的整理。一方面是组件和模板齐全，另一方面是在线协作非常方便，和产品、开发对齐效率很高。如果你也想更高效地整理 UI 规范、搭原型、做设计稿，不妨注册体验一下墨刀设计，很多时候工具顺手了，设计本身就已经成功了一半。
