写在最开始
说到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语言的同学一定知道：这就是经典的盒式模型。今天我们先不过多纠结具体的技术细节，因为接下来的很长一段时间，我会在更多的分享中慢慢帮助大家去了解。
应用到设计流程中
关于应用，不仅需要我们慢慢的学习盒式模型的技术细节，逐步地把握骨骼的构造方法，还需要我们花费很多的时间去研究已有的成熟经验。现在让我们来看看Android Material Design 设计规范里的一些截图。
如果大家注意观察，会发现第一张图里少了一些关键尺寸，比如三个导航按钮的宽度值。宽度的值其实不需要给程序员，因为这里应用了“屏幕等分原则”，单个按钮的宽度=屏幕宽度/3。那有人又要问了：“为什么横屏情况下，却没有等分？”，这是一个设计问题，当屏幕超级宽的极端情况下（别以为没有这样的设备，有人见过智能车机的后视镜界面吗？），“设计美观性”和“操作区域集中带来的更小移动距离”都需要我们为UI元素设置“最大值，当元素大于某数值，那么就不再变大。UI骨骼的设计也需要我们经常考虑这些极限值。
再看一下iOS的AppStore的界面设计，与刚才的情况是一致的。
讲到这里，大家是否能够get此话题的中心思想了呢？UI设计，不是一个静态的图画，她是一个能够适应各种环境，能伸能屈的血肉之躯，我们作为设计师，应该从一开始就考虑到这个产品的使用场景，在设计流程中就考虑UI骨骼的搭建，所以UI设计应该是：皮肉（视觉效果）+ 内骨骼（适配逻辑）+ 血脉（设计NDA）。
进行一下对比
下面我使用一个经典的“宫格界面”来简述如何采用UI骨骼来进行设计。
有些设计师会采用左侧的方式行进标注，思考这样一个问题：如果到了屏幕点数更少的机器上（比如480X800的hdpi机器），这个界面怎么适配？有人可能不知道480的机器少了多少点而无法回答；有些人会花费很多时间描述这些数值在更小的屏幕时如何变化。其实，一个完整的UI设计会自行进行适配，右侧是一个应用了骨骼的对比方案（实际工作的标注要复杂一些，会针对极限情况做优化），不需要太多言语就说明了适配逻辑。再一次证明：血肉与骨骼是共生共存的，而不需要一份尺寸标注+一份适配逻辑说明。
UI骨骼常用的布局属性
在Android的开发平台中，提供了几种布局模式，比如线性模式，相对模式等，每种模式中有相当多的属性，用他们可以搭建各种各样的布局。下面是我用设计的语言翻译的一些属性名称。暂时不要纠结太多的技术细节，针对开发模式的知识，我会慢慢在后续的文章中进行讲解。
讲讲我的设计习惯
我一般在设计的初期就会根据已经成型的界面进行骨骼的搭建。一边设计视觉效果，一边完善骨骼的结构，因为开发实现会有一些特殊需要：比如6倍关系，骨骼作为一个非常好的参考系帮我减少了标注过程调整设计尺寸和间距的冗余工作量。最重要的是，一开始就考虑骨骼，就不会需要在开发无法实现或者实现成本过高的情况下对布局进行过大改动。这是一种“磨刀不误砍柴功”的好方法，真心地推荐给每个UI设计者。
上面是我自己写的一个小手电筒的APP（工作太忙了，设置页面还未开发完，囧）。我首先把整个界面按照一定比例分成了上下两部分，上部分水平/垂直居中放置logo；下部分包括一个power按钮和一个switch开关，两个控件组垂直保持固定间距，然后两个控件整体在下部分水平/垂直居中放置。
结尾
我始终坚信，“UI设计”是一门“科学”，所以我想和大家聊更多的科学话题，比如Android开发平台里的设计规则、比如程序员如何进行UI的控件化、再比如PS的字号跟开发使用的数值是什么关系，最后我还会教给大家一点Android开发的知识。更多文章会陆陆续续更新，希望越来越多的的设计师跟我一起关注“UI设计中的科学性问题"。
