UI设计没有一套适用于所有设备的固定尺寸。可以先按目标平台建立字体、按钮、输入框和间距的参考值，再用真实内容检查。尤其要区分图标的视觉大小与可点击热区，不能把桌面后台的小控件直接照搬到手机。
在墨刀设计中，可先整理一页组件尺寸样张，再用于具体页面。下面的px数值是Web设计的试排起点，不是平台强制规范；涉及iOS等原生应用时，要使用对应平台的逻辑单位和规范。
先分清px、pt与图片像素
Web标注通常围绕CSS像素讨论；屏幕截图的物理像素不是CSS像素。iOS设计中的pt与Android常见的dp、sp也不能直接当成同一单位。交付时应明确画板采用什么逻辑尺寸，资源导出采用几倍图，开发需要实现多大的热区。
WCAG 2.2的目标尺寸条目讨论至少24×24 CSS像素的目标及间距等例外；这不是“所有手机按钮做成24px就足够”。Apple按钮指南对一般按钮提出至少44×44pt的命中区域建议。两者的对象和单位不同，不应合并成一条通用数值。
文字与图标的常用尺寸
在 UI 里，文字和图标是出现频率最高的元素，也是最容易拉开“新手感”和“成熟感”的地方。很多设计一眼看着不高级，问题往往不在配色，而在字体层级混乱、图标大小不统一。
字体层级参考
常见 UI 文本可以分为四类：
标题文字：16px – 24px
副标题文字：14px – 18px
正文内容：14px – 16px
辅助说明 / 次要信息：12px – 14px
实际使用中，重点不是具体选哪个数，而是层级之间要有明显区分，不要所有文字都挤在 14px 附近。在墨刀设计中，你可以直接用文字样式组件统一管理，比如设置「H1 / H2 / Body / Caption」样式，后面改一次，全局跟着变，新手也不容易翻车。
行高与字距
行高：字号的 1.5 – 1.8 倍
字距：中文正文优先使用默认字距。不要统一设置为字号的0.1–0.2倍，否则短标签和中文段落可能过于松散。
行高太小会显得压抑，太大又会显空；字距也是同理，建议在设计时多看整体阅读感，而不是死抠数值。
图标尺寸
常规功能图标：16 × 16px
主要操作或导航图标：24 × 24px
在墨刀设计里，直接使用组件或图标库可以避免尺寸不统一的问题，对新手非常友好。
按钮尺寸与点击热区
按钮是 UI 中最重要的交互入口，尺寸不合理，用户点着都会别扭。推荐区间如下：
桌面Web普通按钮可从32–40px高度试排；紧凑工具栏与移动触控入口应分别设计，不共用一条最低高度规则。
左右内边距：10px – 20px
圆角：4px – 8px
按钮的可见轮廓不等于点击范围。图标即使只有24px，可操作区域仍应留出足够空间。按钮样张还应包含默认、按下、聚焦、禁用和加载状态；不是所有模板都已经为你的业务配置好全部状态。
如果一个删除图标只有16×16px，可通过按钮容器扩展热区，而不是把图标画到和主按钮一样大。相邻危险操作还应拉开距离，防止误触。按钮内文变长时，先增加容器宽度或换行空间，不要不断缩小字号。
输入框高度与错误提示
输入框的设计目标只有一个：让用户愿意填、不抗拒填。建议尺寸：
桌面Web单行输入框可从32–40px试排，移动表单应另按触控体验确定。多行输入框随内容增长，不使用单行高度限制文字。
内边距：10px – 15px
圆角：4px – 8px
如果是表单密集型页面（如后台系统），建议统一高度，整体会干净很多。
用三行表单检查尺寸是否真的够用
拿“姓名、邮箱、备注”三行练习。先统一标签与输入框的对齐方式，再给邮箱放入一个长地址，给姓名加上两行错误提示，给备注输入多行文字。此时下方按钮不应遮挡提示，标签也不应被挤出画板。若容器只能容纳理想文案，这组尺寸还不适合复用。
字体的具体搭配可参考UI字体与行高指南；横向空间不够时怎样重排，可参考响应式UI布局。
导航栏高度与安全区域
不管是 Web 端还是后台系统，导航栏设计都是网站页面结构的骨架。常见推荐值：
导航栏高度：60px – 80px
导航图标尺寸：24 × 24px
导航项间距：20px – 30px
在墨刀素材广场，很多后台原型模板已经帮你把这些基础规范做好了，直接复用效率非常高。
卡片宽度与内容高度
卡片是现在 UI 里最常见的承载形式之一，用得好，界面会非常清爽。推荐范围：
卡片宽度由容器与列数决定，200–400px只能作为部分桌面卡片的试排范围，不能当作跨端标准。
卡片高度随内容增长，不设置统一的400px上限。确需固定高度时，应明确摘要截断规则及查看完整内容的入口。
内外边距：10px – 20px
圆角：4px – 8px
卡片设计的重点不是多好看，而是信息是否一眼能扫完。
图片比例与导出尺寸
图片先确定显示比例，再按实际显示尺寸和设备像素密度准备资源。2x或3x只是部分场景的导出选择，不是越大越好；网页应兼顾清晰度与体积。人物、Logo和截图不要强行拉伸，裁切图片时应保留需要传达的主体。
使用墨刀素材时，可先查看模板中的图片比例和组件结构，再替换为自己有权使用的内容。模板的价格、使用限制与可编辑范围以对应详情页为准，不能仅凭预览图认定可免费复用。
尺寸规范最终应写清四件事：适用平台、组件状态、内容变化时的处理方式，以及例外场景。把这些说明和组件一起放入设计文件，产品、设计与开发才不会把同一个“40”理解成不同含义。
