學習了死貓的文章,我今天也來說說有關內容和容器的關系。

看標題你也許覺得有些囧,它和上一篇《形式追隨內容?》看起來相反,而且好像從交互設計的角度看也是很不專業的一個觀點,這有點像是我搬起石頭砸自己的腳或是死貓的腳……

不過不幸我是一只友愛并且怕疼的企鵝,所以事實上是這樣的:

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

所以,一個界面需要在用戶主動改變軟件形式的時候適當的調整內容去適應變化,這就是在特定情況下的內容適應形式。

感覺很熟悉嗎?了解Web前端工作的同學們應該會立刻想到“流式布局”方面的技術和技巧!恭喜你們可以來CDC找我領一個二等獎……

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

這其實是個有趣又復雜的問題,之前DJ、小蟲和我聊到過這個話題,一直苦于沒有比較好的學習和研究對象,后來在日常工作中反而發現了一個近在眼前卻一直沒有注意到的家伙:

Microsoft Fluent/Ribbon UI

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

首先放一張在1280×800分辨率下全屏的Word2010作為參照物:

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

脫離了全屏狀態的第一個變化發生了,在左上角的剪貼板工具區,“剪切”、“復制”和“格式刷”三個功能只剩下了圖標。對于Office系列來說,這三個功能實在是深入人心,要節省空間,就先調整它們吧。

繼續縮小界面,接下來發生的變化是樣式區域,快速樣式的顯示數量從5個減少到4個,然后又減少到了3個。快速樣式這樣的功能嘛,在空間比較拮據的時候是可以犧牲一個兩個位置的,畢竟還有3個被顯示出來,其他的,點開下拉列表選擇也可以,畢竟圖文列表還是比較快速的。