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

看標(biāo)題你也許覺得有些囧，它和上一篇《形式追隨內(nèi)容？》看起來相反，而且好像從交互設(shè)計(jì)的角度看也是很不專業(yè)的一個(gè)觀點(diǎn)，這有點(diǎn)像是我搬起石頭砸自己的腳或是死貓的腳……

不過不幸我是一只友愛并且怕疼的企鵝，所以事實(shí)上是這樣的：

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

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

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

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

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

Microsoft Fluent/Ribbon UI

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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