写在最开始

说到UI，大家肯定都不陌生，User Interface 的缩写，她是一个产品或者一个APP的外表，或者说外壳。作为一名UI设计师，我会把自己的每一个设计当成自己的“孩子”，因为她有皮肉（模样），有血脉（设计DNA），但是随着越来越多的孩子降生于世，我发现她们还需要一样东西才能真正的“Run”起来，这就是我今天想聊的主题：UI的骨骼。

写给身为UI设计者的你

这是一个陌生的词汇，但是我相信，很多设计者已经注意到了“骨骼”的存在并且开始为自己的“孩子”创建骨骼。有了“骨骼”，我们的设计就会变得“健壮”，她能够适应不同类型的设备和不同的使用场景（大屏幕或者小屏幕、竖屏或者横屏以及需要动态调整的界面）。简单说，“UI骨骼”就是设计UI的适配，但是我将要从“开发者”的角度”用“设计者”能懂的语言去探讨这一话题，帮助尚未应用骨骼进行设计的同学了解它，也帮助正在应用骨骼的同学更加系统化地学习它。

也许会有人说，这些难道不应该是程序员该考虑的事情吗？但是自己的孩子自己最清楚她的性格和气质，作为爹妈应该既关心她是不是漂亮又要关心她是不是健康，如果她只是存在于设计软件里的仙女，一到了用户手里就变成丑女，这可不是爹妈想看到的结果。

所以希望将来我们在设计或评价一个UI设计的时候，不仅仅包括视觉效果、创意、情感化、统一性、独特性、易用性和交互层面的创新，还包括UI设计的“健壮性”。废话少说，直接进入正题。

揭开骨骼的面纱

因为我更擅长Android开发，故文章中的例子一般用Android系统或者Android APP来展示，但是“骨骼”本身与开发平台是无关的，即便是传统的windows桌面程序也适用，当然如果你曾经学习过Html和Css这样的前端开发语言，也会帮助理解“骨骼”概念。

在开启【开发者模式】中的【显示布局边界】后，屏幕上就会显示出每个界面的布局结构，这就是“骨骼”。从下图中，我们很容易看出这个设置列表中每个UI元素的关系和适配的逻辑。骨骼和血肉是共生共存的，完整的视觉设计是不需要与程序员沟通适配逻辑的，一份标注即可。我将在后面通过例子为大家进行讲解如何做到这一点。

可以发现这样一个规律，我们设计的UI控件周围都有一个“框框”，这就是骨骼的“单位”-盒子（box），首先让我们先来聊聊“盒子（box）”，然后你会对“骨骼”有更加清晰的了解。

刚才简单地介绍了box的一些基本的属性，学过Html语言的同学一定知道：这就是经典的盒式模型。今天我们先不过多纠结具体的技术细节，因为接下来的很长一段时间，我会在更多的分享中慢慢帮助大家去了解。

应用到设计流程中

应用UI骨骼，不仅需要我们学习盒式模型的技术细节，逐步把握骨骼的构造方法，还需要我们花费一些时间去研究已有的成熟经验。现在让我们来看看Android Material Design设计规范里的一些截图。

注意观察，会发现第一张图里少了一些关键尺寸，比如三个导航按钮的宽度值。这里应用了“屏幕等分原则”，单个按钮的宽度=屏幕宽度/3。那有人又要问了：“为什么横屏情况下，却没有等分？”这是一个设计问题，在屏幕比例较宽的极端情况下（别以为没有这样的设备，有人见过智能车机的后视镜界面吗？）。“设计美观性”和“移动距离更小的交互体验”都需要我们为UI元素设置最大值，当元素大于某数值，那么就不再变大。UI骨骼的设计也需要我们经常考虑这些极限值。

再看一下iOS的appStore的界面设计，与刚才的情况是一致的。

讲到这里，大家是否能够get到此话题的中心思想了呢？UI设计，并不是一个静态的图画，而是一个能够适应各种环境，能伸能屈的血肉之躯，我们作为设计师，应该从一开始就考虑到这个产品的使用环境，在设计流程中就考虑UI骨骼的搭建，所以UI设计应该是：皮肉（视觉效果）+ 内骨骼（适配逻辑）+ 血脉（设计DNA）。

进行一下对比

下面我使用一个经典的“宫格界面”来简述如何采用UI骨骼来进行设计。

有些设计师会采用左侧的方式行进标注，思考这样一个问题：如果到了屏幕点数更少的机器上（比如480X800的hdpi机器），这个界面怎么适配？有人可能不知道480的机器少了多少点而无法回答；有人会花费很多时间描述这些数值在更小的屏幕时如何变化。其实，一个完整的UI设计会自行适配，右侧是一个应用了骨骼的对比方案（实际工作的标注要复杂一些，会针对极限情况做优化），不需要太多言语就说明了适配逻辑。再一次证明：血肉与骨骼是共生共存的，而不需要一份尺寸标注+一份适配逻辑说明。

UI骨骼常用的布局属性

在Android的开发平台中，提供了几种布局模式，比如线性布局、相对位置布局等，每种模式都有相当多的属性，用他们可以搭建各种各样的布局。下面是我用设计的语言翻译的一些属性名称。暂时不要纠结太多的技术细节，针对开发模式的知识，我会慢慢在后续的文章中进行讲解。

讲讲我的设计习惯

我一般在设计的初期就会根据已经成型的界面进行骨骼的搭建。一边设计视觉效果，一边完善骨骼的结构，因为开发实现会有一些特殊需要：比如6倍关系，骨骼作为一个非常好的参考系帮我减少了标注过程调整元素尺寸和间距的冗余工作量。最重要的是，一开始就考虑骨骼的结构，就不会在开发无法实现或者实现成本过高的情况下对布局进行过大改动。这是一种“磨刀不误砍柴功”的好方法，推荐给每个UI设计者。

上面是我写的一个手电筒APP（工作太忙了，设置页面还未开发完，囧）。我首先把整个界面按照一定比例分成了上下两部分，上部分水平/垂直居中放置logo；下部分包括一个power按钮和一个switch开关，两个控件组垂直保持固定间距，然后两个控件整体水平/垂直居中放置在下部分。

关于我自己

我叫边洪冰，网名bingxueling，06年进入大学，学习“计算机科学与技术”专业， 本来毕业就是搞C++、Java或者.net的程序员。然而，07年开始接触“软件美化”，09年与iconfans（UI中国前身）中国队一起征战“GUIC”大赛并得了一个小奖，10年初进入eico开始工作，后来还供职过360、百度和搜狗。我始终坚信，“UI设计”是一门“科学”，所以我想和大家聊更多的科学话题，比如Android开发平台里的设计规则、比如程序员如何进行UI的控件化、再比如PS的字号跟开发使用的数值是什么关系，最后我还会教给大家一点Android开发的知识。

好啦，今天的分享就这么多，若对UI的骨骼有疑问，欢迎大家在UI设计科学派订阅号或UI中国给我留言，也可以把你们在UI设计过程中遇到的开发问题反馈给我。今天只是引出话题，希望将来能把更多UI骨骼的知识分享给中国的每一位UI设计师。

求关注以及相关资料

关注UI设计科学派微信订阅号（微信搜索“UIDesignScience”），提前了解下期内容。希望有越来越多的UI设计师跟我一起研究“UI设计中的科学性问题”，发现UI设计的科学之美与逻辑之美。

相关资料
字体的研究•上篇：同一字号，PS和开发效果是否一样？如何获取文字的真实高度和宽度？
字体的研究•下篇：如何标注设计稿中的行间距？设计中常用的字号有哪些？