|
再縮小的話(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è)原則，推薦給大家：
- 按照使用頻度對(duì)元素進(jìn)行隱藏，如隱藏樣式區(qū)域的順序。
- 按照特定尺寸范圍下的可能場(chǎng)景對(duì)界面元素進(jìn)行隱藏，如在小尺寸下隱藏菜單欄與工具欄。
- 已經(jīng)約定俗成的圖形元素可以減少輔助文字，如“剪切”等功能使用圖標(biāo)。
- 利用下拉菜單、展開(kāi)或可滾動(dòng)的元素組來(lái)壓縮空間，如壓縮功能區(qū)域與滾動(dòng)菜單欄。
- 合理地重排布局，如文字、段落區(qū)域行數(shù)的變化�！�
另外再給出三個(gè)細(xì)節(jié)建議：
- 在界面邊界與操作區(qū)重疊之前就進(jìn)行變化，給用戶(hù)更多的緩沖時(shí)間，并且會(huì)顯得界面更聰明。
- 永遠(yuǎn)不要忘了鼠標(biāo)響應(yīng)與鼠標(biāo)tips。
- 保證減少的東西能通過(guò)某種方法再找出來(lái)。
把一個(gè)界面變成一個(gè)聰明的Transformer是一件很有挑戰(zhàn)和有意義的事，當(dāng)然，這也會(huì)是非常有意思的，今天這里只拿出了Word2010來(lái)看，有興趣的同學(xué)可以去玩一下Outlook2010，它比Word更加好玩，適應(yīng)性方面更加有花樣。
讓我們歡呼一次，適應(yīng)性萬(wàn)歲！
原文：http://cdc.tencent.com/?p=2337
本文鏈接：http://www.95time.cn/design/doc/2010/7446.asp 
出處：Tencent CDC Blog
責(zé)任編輯：moby
上一頁(yè) 內(nèi)容適應(yīng)形式 [3] 下一頁(yè)
|
第 1 頁(yè) 
第 4 頁(yè) 內(nèi)容適應(yīng)形式 [4]
