作为一名专业的 UI 设计师，难免会有一点强迫症，时常因无法平均的像素而苦恼，恨不得所有的元素都达到完美统一。
本文由矢量人生出品，转载请注明原作者，侵权必究。
设计细节的重要性在这里就不多阐述了，有大量文章说明了这个问题。此文主要针对 UI 设计中经常出现的细节情形，主要分享以下 6 点：
- 给元素添加方形容器
- 尽可能还原真实场景
- 以实际效果为准
- 1PX 的临近平均原则
- 对齐与分布
- 图层管理
每一个界面设计都是由文字、图片、线条、图标等组成，我们称这些为元素。很多元素本身的尺寸大小是不规则的，例如一个透明背景的 icon，它的像素有效区是 38×22，切图时四周要留有空隙，导出的大小可以是 48×48。因此，在这个 icon 底部增加一个导出大小的方形容器（前端定义 block）很有必要。给文字增加容器同样重要，尤其是标题性文字。我们之所以这样做，是为了让每个元素之间的位置相对固定并具有标准的参考，从而使开发能更好地还原效果。
Sketch 可以直接设置文字长度来固定尺寸从而充当容器
设计界面要尽可能还原真实场景，其中包括但不限于文字、图、字节数等。
当字节不固定时，设计固定的区域，当字节超出此区域时，通常有三种解决方式：
- 设置最长不超过固定区域的字节，这种方式最简单但有些粗暴。
- 用 “...” 表示超出固定区域的字节。
- 在字节尾处添加一个渐隐蒙版，这种方式也适用于其他元素的设计，比如 tab 的滑动菜单、内容的更多显示。
除了第一种已经在页面完整显示了所有的文字，其他两种的更多文字是隐藏的，因此鼠标经过的时候可以设计一个 tips 窗显示所有的文字。还有些特殊情况下还可以使用走马灯的形式显示剩余字节。
多行文字并不适用走马灯形式
静态的模块在文字描述上可以主观上进行控制，使得每个模块都相对统一。然而有些文字是动态数据，不能很好地控制文字的字节长度，甚至会出现有的模块有字节，有的模块没有字节。在这种情况，就要思考为空字节的情况加上固定的字节，还是让其空置，这取决于产品需求和使用场景。
我们时常会遇到这种情况，例如画一个按钮，里面有文字，一般来说文字都是水平垂直居中对齐这个按钮，于是我们会使用对齐工具。然而有时从效果上看，文字并没有垂直居中对齐，那是因为文字在未被转曲或者删格化时，它的字体存在间隙。但总不能为了对齐就把文字栅格 / 转曲，因此还需要用移动工具去调整位置。
工具始终是工具，UI 界面设计更遵从的是视觉效果，要以实际效果为准。
作为一名专业的 UI 设计师，难免会有一些强迫症，恨不得所有的元素都达到完美的统一，于是会特别在意细节问题。专业的前端观察力也是很强的，他们也会尽可能地去还原设计图，但很多情况下他们可能无视你在乎的那些细节，这时你应该有方法使得他们按照描述 / 标注去做好细节问题。
元素的尺寸在很多情况下是无法平均分配的，就算使用百分比，也有除不尽的情况。例如在两个模块之间添加一条 1px 的横线，又或者在 1000px 宽度设计三个模块等等。因为像素的移动无法允许小数，为了尽量地减少误差，我们将其分成 334、333、333，我们称之为误差为 1px 的临近平均原则，任何情况下我们都应遵守这个原则。
界面布局时经常遇到这种情况：如果想要模块的尺寸统一，那么间距就无法统一；如果想要间距统一，那么模块的尺寸就无法统一。为了界面的适配性，间距统一才是优先考虑的。正因为如此，有的设计师就会使用调整的分布工具，然而固定的宽度大部分情况下都无法平均分布，使得间距并没有统一。因此界面布局使用分布工具并不能达到预期的效果，不符合我们死抠细节的态度，于是心里开始不平衡，强迫采取更完美的方式。
有的九宫格布局没有明显的间距，通常会用 1px 的线条隔开。以宽度 750px 为例，如何设计模块之间的间隔线并遵守 1px 的临近平均原则？方法很简单，先画 250px 宽度的模块，然后画一条 1px 的竖线左对齐模块，再画一条 1px 的横线底对齐模块，即它的左内边框和底内边框。
然后将其整体复制并调整位置（如果模块尺寸不统一则需要手动调整其中模块的大小，如 1000 分成 334、333、333），为了提高效率，做好一个完整的模块再进行复制。最后将贴边的线条隐藏。不要删除多余的线条，防止后续可能会出现模块数量的变更。
这种方式同样适用于 2px 甚至更粗的间隔线，但并不是在一个模块上画更粗的内边框，而是将分割线平均分配在临近的模块上。为了方便预览，将其放大并用颜色区分，如 2px 的间隔线平均分配 1px 在两个模块上。
这种方法不单适用在九宫格布局设计，也适用在其它需要用到间隔线的地方，比如列表。假设每一列的高度是 100px，用 1px 的间隔线将其隔开，按照上面的方法，1px 的间隔线属于元素的底边框（border-bottom），因此整体高度是 400px 而不是 400px+3px。
特别提示：不要因间隔线使得原本尺寸额外增加，如果模块已经有固定尺寸，那间隔线必须是在这固定尺寸的范围内。
有时候间隔线实在令人苦恼，如上图中，加了一条横线以后，程序会误判断 icon 与底部的间距比上面的间距 - 1px，因为它的出现经常被迫允许出现误差。我们只需记住这一点，设计图的间隔线不是 line，而是模块的 border（前端未必会用 border 的形式去实现），细微的误差是无法避免的。
在设计一个按钮时，经常会在旁边增加一个图标 / 元素，原本垂直水平居中对齐的文字，因增加图标后不得不作调整，将其群组并水平居中对齐。但也有例外，增加的元素不是固定元素，比如新消息提醒、新功能提示，我们将其称为悬浮元素。
即使我们做的设计图已经达到预期效果，但是文字的对齐方式还是要取决于文字原本的对齐方式。如一个按钮中的文字是居中对齐，那么就选择居中对齐的方式，而不要选择其他方式的对齐然后调整为居中对齐，这样做的目的是当你更改文字的字节时，就不需要再去调整它了。
在设计一个水平的导航菜单时，若导航的字节没有统一，而每一个导航菜单的宽度是固定的，这种情况采用对齐的方式，也就是里面的文字居中对齐菜单的宽度。
另一种采用分布的方式，使得菜单的间距相对统一，这种方式经常用于列表设计（文章《网页后台设计》有详细讲解）。
采用何种方式取决于设计方式及需求
同类元素 / 模块使用调整工具使其对齐或者平均分布能让画面看起来很协调，但这仍然不够。对界面进行布局分析，模块里面的元素水平居中对齐，假设贴边模块里面的元素距离边为 1A，那么模块与模块之间的距离即为 2A。这样的设计并没有犯逻辑错误，但是如果每个模块的背景颜色一样，整体视觉却无法达到视觉平衡。因此，我们可以给整个模块添加一个 “内边距”，即给贴边的两个模块一定的宽度。
与原来的对比，增加内边距后达到了视觉平衡，画面比之前更加协调。
事实上两边的模块尺寸并没有偏大，每个模块的尺寸始终保持 1px 的临近平均原则，多出来的部分只是整体模块的内边距而已。如果你没有描述清楚，那前端可能误认为是旁边的模块尺寸偏大，那他们必定会吐槽了。
支付宝首页的功能按钮也采用了这种设计方式，你可以打开支付宝首页测试一下，长按最后一排的按钮不放，可以看到点击的热区下面仍然有间距。
我们可以用肉眼来判断是否需要添加边距，设计应该具备灵活性，以实际效果为准。
已经有诸多文章表明这一问题的重要性，没有良好的图层管理习惯，直接影响了与你对接的成员甚至整个团队。如果你接手的文件，图层没有分组，大模块随便命名，图层的顺序也很乱，那你要对着这个文件去做调整 / 优化是非常烦躁的，原本以为做好的设计只是修改应该很快可以完成，但实际上花的时间更多，甚至不如新建画布重新设计。
正如开发也有代码规范，尽量用简洁的代码去实现可行的功能，维护起来才更有效率。对于设计，能用一个图层解决的问题就不要有第二个图层，前提是要方便后续的更新和维护，例如用 PS 画 icon 时，很多形状工具完全可以用一个图层（没有鼓励大家将所有图层使用 ctl+e）。
关于图层命名，如果你了解前端，你就会站在前端的角度去给图层命名。现在，已经有很多其他辅助工具来跟前端对接，如蓝湖、SK 的超级标注等直接查看尺寸和标注，懂 PS 的一部分前端可能还需要源文件。对于图层，应按照界面的层级关系对应好分层与排序，让其他设计师产生共识，使其容易地找到界面上的任何元素。
给图层命名真的花不了多少时间，你甚至可以从标题文字直接复制，没有规定每个图层都命名，但至少应给大模块命名。图层管理是决定源文件质量好坏的最基本条件，我们应该养成良好的习惯，按界面元素的层级关系进行分组与排序，按元素的类型进行命名，这也是作为一名专业设计师的最基本的要求。
一个好的界面设计，除了视觉层面，更多的是体现在设计上的各个细节。有质量的设计文件更能提高工作效率，死抠细节，是每一位设计师最基本的工作态度。不管将来 UI 设计的趋势如何，只要我们还从事着这份职业，就应该拥有最起码的专业素养。UI 已经逐渐形成系统化，如果不在细节上做好，那还拿什么优势来与其他类型的设计做竞争？更多细节问题欢迎大家共同探索。
在我内心深处，永远有一块地方为细节而保留。我认为细节比蓝图更重要，没有细节，一切皆空谈。细节是本质，是评价质量的标准。
—— 德国著名工业设计师 Dieter Rams
