今天想说的是内容和容器的关系，顺便把之前设计中碰到的问题和大家一同讨论下。我们从软件的设置说起。（这里以QQ的设置举例）
一个软件的设置（常称为系统设置）普通承载了软件一切的可配置选项。经过导航，把内容放置在不同的选项卡下面。
由于内容的划分是依据产品功用的逻辑划分，所以设计中常常碰到的问题就是：不同选项卡下面的内容多少不确定，对排版会带来很大费事。
正常状况如下图，“启动和登录”内容填充了大局部版面，设置界面看上去很空虚。
一个软件的设置（常称为系统设置）普通承载了软件一切的可配置选项。经过导航，把内容放置在不同的选项卡下面。
由于内容的划分是依据产品功用的逻辑划分，所以设计中常常碰到的问题就是：不同选项卡下面的内容多少不确定，对排版会带来很大费事。
正常状况如下图，“启动和登录”内容填充了大局部版面，设置界面看上去很空虚。
但有的选项卡下面的内容很少，整个界面就一两行字，大片都是空白。由于内容和留白的比例失衡而招致一定的视觉问题（下图是我本人P的：）
又或许，有的选项卡下面的内容超出了界面的高度… 即便短时间内没发作这个问题，随着产品功用的调整，可配置项越来越多，就会产生问题。
下图音讯提示的设置，假如我再想加一行内容，就必需在已有内容上减少一行。
之前做排版的时分，不断对这个问题很头痛。内容过少时，会设法添加内容或许视觉元素，以求视觉上的均衡；内容过多时，会调整目录构造，把一个菜单项拆成两项，或许反复排版，把内容尽可能压缩在一页里排下。
但是这样又引入了新的问题：
无故添加视觉元素并不是用户需求的
为了把多出来的内容放到设置界面里，有时分不得不依据内容的多寡来划分菜单项，而不是单纯的依据逻辑关系
不可继续（产品需求的变卦很有可能招致之前做好的排版又要改）
然后我想到了工业设计中常常被提到的一句话：方式跟随功用(form follows function)。这句话对学设计的同窗来说应该不生疏了，最早由修建师沙利文提出，后来成为包豪斯最重要的主张之一。说这句话对整个设计界都产生了深远的影响也不为过。由于它是如此的知名，并且容易引发“终究是方式重要还是功用重要”的争议，所以这里只以“方式跟随内容”为题，不敢把话题扯得这么大。
其实已经有设计把我上面提到的这个问题处理了。对，答案就是苹果的系统设置界面。
Windows环境的同窗可以装safari for PC，看它的偏好设置。这里我截了“通用”和“自动填充”两个界面，如下图
Safari每个选项卡下面内容都不一样，最多的十几行，最少的只要3行，而界面的高度会自顺应内容的高度！
在不同tab下切换时，Safari的偏好设置会平滑地切换界面高度，完满的处理了我方才提出的问题。我想这就是方式跟随内容了。
这样在界面设计进程中，设计师可以不必思索内容能否放得下，界面能否美观这些问题，把内容以最合理的方式展示出来。
我一直以为，一个好的设计，在设计之外，应该可以同时把设计师束缚出来，不再做反复的设计。
其实苹果界面的设计思想，从没有最大化就可见一斑了。窗口的左上角的红绿灯，红色是封闭；黄色是最小化；至于绿色的+号，只是把窗口调成最适宜的大小（有时分适宜的大小就是最大化）。Safari for PC把这种设计思想也带到了PC上来，设计出了高度随内容而变化的偏好设置界面。
之前提出的问题是处理了，不过假如真的是方式跟随内容的话，那界面的宽度呢？宽度是不是也能（应该）跟随内容？
高度和宽度同时变化以顺应内容，会不会让用户失掉对界面的掌控感？
仍然是PC平台上的例子。装了win7的同窗可以试试系统自带的计算器，有4种形式可以选择，“规范型”，“科学型”，“顺序员”，“统计信息”。4个形式下，界面的高度和宽度都是不同的。在切换形式时，计算器界面以左上角为基点在不时地切换大小，没有发现分明的体验问题。
左上角这个基点，关于“方式跟随内容”至关重要，如下图所示。由于这个基点四周区域的内容是不会随界面的改动而产生位移的。
Win7计算器的标题和菜单的位置就不会由于界面尺寸的变化而产生位移，从而坚持了界面变化进程中的波动感。十全十美的是最小化/最大化/封闭按钮的位置会改动。（所以苹果把红绿灯放在界面的左上角？）
而safari的偏好设置由于导航占据了顶行，所以没有做宽度变化顺应内容。
想说的大约就这些，感兴趣的同窗可以再比照下win7的系统设置，有些细节的地方设计得很有意思。
不只是客户端，在web顺序中，我们的思想是不是可以不要局限在在以后页面或许新tab翻开？弹出新窗口，让窗口顺应内容大小会不会更好？
这篇文章不想就方式和功用孰轻孰重展开讨论，只是把本人实践在工作中碰到的问题和一些思绪和大家讨论。最后给各位耐烦看完的同窗拜个暮年！
原文链接：http://cdc.tencent.com/?p=2291
