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

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

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

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

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

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

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

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

　　但是這樣又引入了新的問(wèn)題：

　　無(wú)端增加視覺(jué)元素并不是用戶(hù)需要的

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

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

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

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

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

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

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

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

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

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

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

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

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

　　左上角這個(gè)基點(diǎn)，對(duì)于“形式追隨內(nèi)容”至關(guān)重要，如下圖所示。因?yàn)檫@個(gè)基點(diǎn)周?chē)鷧^(qū)域的內(nèi)容是不會(huì)隨界面的改變而產(chǎn)生位移的。

　　Win7計(jì)算器的標(biāo)題和菜單的位置就不會(huì)因?yàn)榻缑娉叽绲淖兓a(chǎn)生位移，從而保持了界面變化過(guò)程中的穩(wěn)定感。美中不足的是最小化/最大化/關(guān)閉按鈕的位置會(huì)改變。（所以蘋(píng)果把紅綠燈放在界面的左上角？）

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

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

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

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

　　原文：http://cdc.tencent.com/?p=2291