今天想說的是內(nèi)容和容器的關(guān)系，順便把之前設(shè)計中碰到的問題和大家一起探討下。我們從軟件的設(shè)置說起。（這里以QQ的設(shè)置舉例）

一個軟件的設(shè)置（常稱為系統(tǒng)設(shè)置）一般承載了軟件所有的可配置選項。通過導(dǎo)航，把內(nèi)容放置在不同的選項卡下面。

由于內(nèi)容的劃分是根據(jù)產(chǎn)品功能的邏輯劃分，所以設(shè)計中經(jīng)常碰到的問題就是：不同選項卡下面的內(nèi)容多少不確定，對排版會帶來很大麻煩。

正常情況如下圖，“啟動和登錄”內(nèi)容填充了大部分版面，設(shè)置界面看上去很充實。

但有的選項卡下面的內(nèi)容很少，整個界面就一兩行字，大片都是空白。由于內(nèi)容和留白的比例失衡而導(dǎo)致一定的視覺問題（下圖是我自己P的：）

又或者，有的選項卡下面的內(nèi)容超出了界面的高度… 即使短時間內(nèi)沒發(fā)生這個問題，隨著產(chǎn)品功能的調(diào)整，可配置項越來越多，就會產(chǎn)生問題。

下圖消息提醒的設(shè)置，如果我再想加一行內(nèi)容，就必須在已有內(nèi)容上減少一行。

之前做排版的時候，一直對這個問題很頭痛。內(nèi)容過少時，會設(shè)法增加內(nèi)容或者視覺元素，以求視覺上的平衡；內(nèi)容過多時，會調(diào)整目錄結(jié)構(gòu)，把一個菜單項拆成兩項，或者反復(fù)排版，把內(nèi)容盡可能壓縮在一頁里排下。

但是這樣又引入了新的問題：

無端增加視覺元素并不是用戶需要的

為了把多出來的內(nèi)容放到設(shè)置界面里，有時候不得不根據(jù)內(nèi)容的多寡來劃分菜單項，而不是單純的根據(jù)邏輯關(guān)系

不可持續(xù)（產(chǎn)品需求的變更很有可能導(dǎo)致之前做好的排版又要改）

然后我想到了工業(yè)設(shè)計中經(jīng)常被提到的一句話：形式追隨功能(form follows function)。這句話對學(xué)設(shè)計的同學(xué)來說應(yīng)該不陌生了，最早由建筑師沙利文提出，后來成為包豪斯最重要的主張之一。說這句話對整個設(shè)計界都產(chǎn)生了深遠(yuǎn)的影響也不為過。因為它是如此的出名，并且容易引發(fā)“究竟是形式重要還是功能重要”的爭議，所以這里只以“形式追隨內(nèi)容”為題，不敢把話題扯得這么大。

其實已經(jīng)有設(shè)計把我上面提到的這個問題解決了。對，答案就是蘋果的系統(tǒng)設(shè)置界面。

Windows環(huán)境的同學(xué)可以裝safari for PC，看它的偏好設(shè)置。這里我截了“通用”和“自動填充”兩個界面，如下圖

Safari每個選項卡下面內(nèi)容都不一樣，最多的十幾行，最少的只有3行，而界面的高度會自適應(yīng)內(nèi)容的高度！

在不同tab下切換時，Safari的偏好設(shè)置會平滑地切換界面高度，完美的解決了我剛才提出的問題。我想這就是形式追隨內(nèi)容了。

這樣在界面設(shè)計過程中，設(shè)計師可以不用考慮內(nèi)容是否放得下，界面是否美觀這些問題，把內(nèi)容以最合理的方式展現(xiàn)出來。

我始終認(rèn)為，一個好的設(shè)計，在設(shè)計之外，應(yīng)該能夠同時把設(shè)計師解放出來，不再做重復(fù)的設(shè)計。

其實蘋果界面的設(shè)計思想，從沒有最大化就可見一斑了。窗口的左上角的紅綠燈，紅色是關(guān)閉；黃色是最小化；至于綠色的+號，只是把窗口調(diào)成最合適的大小（有時候合適的大小就是最大化）。Safari for PC把這種設(shè)計思想也帶到了PC上來，設(shè)計出了高度隨內(nèi)容而變化的偏好設(shè)置界面。

之前提出的問題是解決了，不過如果真的是形式追隨內(nèi)容的話，那界面的寬度呢？寬度是不是也能（應(yīng)該）追隨內(nèi)容？

高度和寬度同時變化以適應(yīng)內(nèi)容，會不會讓用戶失去對界面的掌控感？

依然是PC平臺上的例子。裝了win7的同學(xué)可以試試系統(tǒng)自帶的計算器，有4種模式可以選擇，“標(biāo)準(zhǔn)型”，“科學(xué)型”，“程序員”，“統(tǒng)計信息”。4個模式下，界面的高度和寬度都是不同的。在切換模式時，計算器界面以左上角為基點在不斷地切換大小，沒有發(fā)現(xiàn)明顯的體驗問題。

左上角這個基點，對于“形式追隨內(nèi)容”至關(guān)重要，如下圖所示。因為這個基點周圍區(qū)域的內(nèi)容是不會隨界面的改變而產(chǎn)生位移的。

Win7計算器的標(biāo)題和菜單的位置就不會因為界面尺寸的變化而產(chǎn)生位移，從而保持了界面變化過程中的穩(wěn)定感。美中不足的是最小化/最大化/關(guān)閉按鈕的位置會改變。（所以蘋果把紅綠燈放在界面的左上角？）

而safari的偏好設(shè)置因為導(dǎo)航占據(jù)了頂行，所以沒有做寬度變化適應(yīng)內(nèi)容。

想說的大概就這些，感興趣的同學(xué)可以再對比下win7的系統(tǒng)設(shè)置，有些細(xì)節(jié)的地方設(shè)計得很有意思。

不只是客戶端，在web程序中，我們的思維是不是可以不要局限在在當(dāng)前頁面或者新tab打開？彈出新窗口，讓窗口適應(yīng)內(nèi)容大小會不會更好？

這篇文章不想就形式和功能孰輕孰重展開討論，只是把自己實際在工作中碰到的問題和一些思路和大家探討。最后給各位耐心看完的同學(xué)拜個晚年！

• (本文出自Tencent CDC Blog，轉(zhuǎn)載時請注明出處)