學(xué)習(xí)了死貓的文章，我今天也來(lái)說(shuō)說(shuō)有關(guān)內(nèi)容和容器的關(guān)系。

看標(biāo)題你也許覺(jué)得有些囧，它和上一篇《形式追隨內(nèi)容？》看起來(lái)相反，而且好像從交互設(shè)計(jì)的角度看也是很不專(zhuān)業(yè)的一個(gè)觀點(diǎn)，這有點(diǎn)像是我搬起石頭砸自己的腳或是死貓的腳……不過(guò)不幸我是一只友愛(ài)并且怕疼的企鵝，所以事實(shí)上是這樣的：

我們可以把形式追隨內(nèi)容定義為一個(gè)對(duì)默認(rèn)界面的可用性建議，它可以適用于當(dāng)用戶(hù)進(jìn)入一個(gè)界面時(shí)所看到的情況。不過(guò)，我們也知道，用戶(hù)不是木頭人，他們所處的環(huán)境也不總是某個(gè)理想狀態(tài)，QQ在線(xiàn)用戶(hù)數(shù)已經(jīng)超過(guò)了一個(gè)億，而那個(gè)誰(shuí)誰(shuí)誰(shuí)也曾經(jīng)說(shuō)過(guò)：“一千個(gè)人就有一千個(gè)哈姆雷特?！蹦敲匆粌|個(gè)人屏幕上的同一個(gè)軟件會(huì)有或者會(huì)被有多少種狀態(tài)誰(shuí)又能說(shuō)得清？我的QQ藏在屏幕頂端，你的QQ卻占據(jù)整個(gè)屏幕，他的QQ又是什么樣子我們都猜不出。但是一千個(gè)哈姆雷特也還是哈姆雷特，軟件能夠做的事情還是要保持不變。

所以，一個(gè)界面需要在用戶(hù)主動(dòng)改變軟件形式的時(shí)候適當(dāng)?shù)恼{(diào)整內(nèi)容去適應(yīng)變化，這就是在特定情況下的內(nèi)容適應(yīng)形式。

感覺(jué)很熟悉嗎？了解Web前端工作的同學(xué)們應(yīng)該會(huì)立刻想到“流式布局”方面的技術(shù)和技巧！恭喜你們可以來(lái)CDC找我領(lǐng)一個(gè)二等獎(jiǎng)……

對(duì)于web設(shè)計(jì)來(lái)說(shuō)，軟件設(shè)計(jì)的自由度是更大的，但是很久以來(lái)都很少看到優(yōu)秀的能夠適應(yīng)用戶(hù)的軟件，也許是正是由于軟件不能簡(jiǎn)單流式，而導(dǎo)致進(jìn)行適應(yīng)布局的時(shí)候設(shè)計(jì)和開(kāi)發(fā)成本會(huì)變得很大，所以就很少能夠找到比較良好的適應(yīng)形式的軟件例子。從最常見(jiàn)的情況來(lái)說(shuō)，不同的用戶(hù)在使用同一個(gè)軟件的時(shí)候，并不一定都會(huì)使用相同尺寸的界面，全屏、半屏、四分之一屏或者什么奇怪的大小全都有可能出現(xiàn)，同樣尺寸的時(shí)候分辨率或者界面元素定義也常常會(huì)有不同，理想的來(lái)說(shuō)，一個(gè)軟件的界面應(yīng)該能對(duì)這些不同的變化有一些自動(dòng)的調(diào)整，以便用戶(hù)能夠比較像正常狀況的時(shí)候去使用，或者比正常狀況擁有更多的擴(kuò)展性。

這其實(shí)是個(gè)有趣又復(fù)雜的問(wèn)題，之前DJ、小蟲(chóng)和我聊到過(guò)這個(gè)話(huà)題，一直苦于沒(méi)有比較好的學(xué)習(xí)和研究對(duì)象，后來(lái)在日常工作中反而發(fā)現(xiàn)了一個(gè)近在眼前卻一直沒(méi)有注意到的家伙：

Microsoft Fluent/Ribbon UI

我以前好像說(shuō)過(guò)我對(duì)微軟談不上有什么好感，但是自從Win7和Office2010后我的意見(jiàn)些許有了一些改觀，從Win7開(kāi)始，微軟準(zhǔn)備全面開(kāi)始使用在Office2007中開(kāi)始嘗試的Fluent/Ribbon界面，就好像它的名字一樣，這個(gè)界面結(jié)構(gòu)是流式和平滑的，不過(guò)大部分用戶(hù)注意到的是它的層級(jí)扁平化特性，而漏掉了它的流動(dòng)性，這里就先拿出若干Word2010精美小圖和大家一同分享。

首先放一張?jiān)?280×800分辨率下全屏的Word2010作為參照物：

這是我們所熟悉的Word界面——還沒(méi)有嘗試過(guò)Fluent/Ribbon的同學(xué)請(qǐng)自行一百遍啊一百遍——我們可以看到我們熟悉的各種功能都很均勻舒適合理（基本上）地以我們希望的方式出現(xiàn)在我們希望的位置。接下來(lái)，我要開(kāi)始減小它的尺寸，然后我們可以注意一下界面是怎樣變化的：

脫離了全屏狀態(tài)的第一個(gè)變化發(fā)生了，在左上角的剪貼板工具區(qū)，“剪切”、“復(fù)制”和“格式刷”三個(gè)功能只剩下了圖標(biāo)。對(duì)于Office系列來(lái)說(shuō)，這三個(gè)功能實(shí)在是深入人心，要節(jié)省空間，就先調(diào)整它們吧。

繼續(xù)縮小界面，接下來(lái)發(fā)生的變化是樣式區(qū)域，快速樣式的顯示數(shù)量從5個(gè)減少到4個(gè)，然后又減少到了3個(gè)?？焖贅邮竭@樣的功能嘛，在空間比較拮據(jù)的時(shí)候是可以犧牲一個(gè)兩個(gè)位置的，畢竟還有3個(gè)被顯示出來(lái)，其他的，點(diǎn)開(kāi)下拉列表選擇也可以，畢竟圖文列表還是比較快速的。

當(dāng)我繼續(xù)減小窗口大小時(shí)，Word做了一件有趣的事情，它把編輯區(qū)域的東西都收起來(lái)了，變成了一個(gè)帶查找圖標(biāo)的下拉菜單告訴用戶(hù)“至少查找在這里”，看來(lái)這部分并不是常用的功能，除了查找。不過(guò)我比較好奇為什么沒(méi)有把收起后的這個(gè)下拉菜單做成和它旁邊“更改樣式”一樣擁有各種鼠標(biāo)響應(yīng)效果。

我本以為接下來(lái)的事情很簡(jiǎn)單，就是收起收起收起，但事實(shí)上卻又是另一個(gè)好玩不過(guò)有些拙劣的方法，字體和段落區(qū)域的圖標(biāo)們從兩行被壓縮到了三行，首先被壓縮的是段落區(qū)，當(dāng)繼續(xù)縮小窗口時(shí)就輪到了字體區(qū)，我承認(rèn)我沒(méi)想到，因?yàn)槿械倪@么一大堆圖標(biāo)看起來(lái)很凌亂，辨識(shí)率和點(diǎn)擊性都很受影響，換作是我可能不會(huì)這樣做，不過(guò)在不損失這些幾乎全是常用功能的情況下，重排位置是個(gè)沒(méi)有辦法的辦法。這是多么驚喜，我實(shí)在沒(méi)有想通它們是怎么擠在這么小的面積里……

接下來(lái)的事情比較容易被理解，繼續(xù)減小界面尺寸后，樣式區(qū)的“快速樣式”被收起變成了下拉菜單。

繼續(xù)變小，整個(gè)樣式區(qū)域就被收了起來(lái)，然后段落區(qū)域也終于被收起了。

這張圖有些大，因?yàn)檫@次縮小的變動(dòng)不僅僅是上面的工具欄部分，左下角也有相應(yīng)的適應(yīng)調(diào)整，還是先看上面，字體區(qū)域終于被收起來(lái)了，除藍(lán)色的“文件”菜單外，菜單欄其它文字的間距也均勻變小了，左下角“插入/改寫(xiě)”的切換首先消失，接下來(lái)是“語(yǔ)言”、“校對(duì)”和“字?jǐn)?shù)”依次被隱藏了起來(lái)，右下角的功能沒(méi)有變化。

再縮小的話(huà)，菜單欄就完全寫(xiě)不下了，于是在兩側(cè)出現(xiàn)了箭頭，可以左右滾動(dòng)，并且窗口頂部快捷區(qū)也出現(xiàn)了展開(kāi)的圖標(biāo)，同時(shí)右下角的“顯示比例”滑塊也被隱藏了，只留下了顯示比例的百分比標(biāo)識(shí)用來(lái)操作和反饋。

終于可以放一張沒(méi)有經(jīng)過(guò)縮小的圖了……當(dāng)界面寬度小于約284像素的時(shí)候，窗口頂部的快捷定義區(qū)、菜單欄、工具欄一概消失的干干凈凈，界面底部的顯示比例也完全被隱藏，這個(gè)變化還是可以預(yù)見(jiàn)的，能在如此小型的界面中進(jìn)行的才做，大概不會(huì)是什么編輯行為吧。最后放一張比較搞笑的圖，可以從側(cè)面說(shuō)明Fluent/Ribbon UI的自由性，雖然我不知道在這樣的情況下我們還能在這個(gè)程序里做些什么……

從上面這些圖我們可以看出來(lái)，在不斷變化界面尺寸的時(shí)候，Word能夠根據(jù)尺寸的不同有選擇的針對(duì)部分界面元素進(jìn)行調(diào)整，以求在各種非常規(guī)尺寸下能夠獲得盡可能良好的易用性和視覺(jué)體驗(yàn)，從這次的例子來(lái)看，基本上來(lái)看還是比較成功的，雖然根據(jù)情況的不同，層級(jí)扁平化會(huì)有一定的損失，但對(duì)于用戶(hù)對(duì)不同界面形式的要求，界面內(nèi)容主動(dòng)如果能夠適應(yīng)形式的變化，這對(duì)用戶(hù)的個(gè)性化需求會(huì)是很好的滿(mǎn)足。當(dāng)然界面內(nèi)容對(duì)于界面形式的適應(yīng)性還是要建立在可用的基礎(chǔ)上的。

在這次實(shí)驗(yàn)里，基本上這樣的變化是基于以下幾個(gè)原則，推薦給大家：

1. 按照使用頻度對(duì)元素進(jìn)行隱藏，如隱藏樣式區(qū)域的順序。
2. 按照特定尺寸范圍下的可能場(chǎng)景對(duì)界面元素進(jìn)行隱藏，如在小尺寸下隱藏菜單欄與工具欄。
3. 已經(jīng)約定俗成的圖形元素可以減少輔助文字，如“剪切”等功能使用圖標(biāo)。
4. 利用下拉菜單、展開(kāi)或可滾動(dòng)的元素組來(lái)壓縮空間，如壓縮功能區(qū)域與滾動(dòng)菜單欄。
5. 合理地重排布局，如文字、段落區(qū)域行數(shù)的變化。

另外再給出三個(gè)細(xì)節(jié)建議：

1. 在界面邊界與操作區(qū)重疊之前就進(jìn)行變化，給用戶(hù)更多的緩沖時(shí)間，并且會(huì)顯得界面更聰明。
2. 永遠(yuǎn)不要忘了鼠標(biāo)響應(yīng)與鼠標(biāo)tips。
3. 保證減少的東西能通過(guò)某種方法再找出來(lái)。

把一個(gè)界面變成一個(gè)聰明的Transformer是一件很有挑戰(zhàn)和有意義的事，當(dāng)然，這也會(huì)是非常有意思的，今天這里只拿出了Word2010來(lái)看，有興趣的同學(xué)可以去玩一下Outlook2010，它比Word更加好玩，適應(yīng)性方面更加有花樣。

讓我們歡呼一次，適應(yīng)性萬(wàn)歲！

來(lái)源：http://cdc.tencent.com/?p=2337