上一期分享了三種基本的交互模型，雙面板選擇、畫(huà)布工具條、向?qū)В╳izard），本期討論的交互模型并不局限在一個(gè)頁(yè)面上的信息結(jié)構(gòu)，它們分別是：響應(yīng)式出現(xiàn)和嵌入式連接。

1.響應(yīng)式出現(xiàn)

一個(gè)頁(yè)面要顯示很多內(nèi)容，但是其中一部分內(nèi)容不太重要，我們希望用戶界面變得簡(jiǎn)單，但又不得不把內(nèi)容放到界面當(dāng)中，在這樣的情況下，可以把重要的內(nèi)容顯示出來(lái),并把其他內(nèi)容隱藏，用戶可以通過(guò)一個(gè)簡(jiǎn)單的操作訪問(wèn)隱藏內(nèi)容，這樣的頁(yè)面不僅在一個(gè)頁(yè)面上具備了信息結(jié)構(gòu)，同時(shí)具有了垂直的層次結(jié)構(gòu)，不是一股腦的丟給用戶，而是在用戶需要時(shí)顯示。

[用法]

1）將主要和次要內(nèi)容分開(kāi)，默認(rèn)顯示主要內(nèi)容，把次要內(nèi)容放到事先隱藏的區(qū)域里；

2）在默認(rèn)顯示的界面上放置醒目的按鈕或連接，讓用戶能夠找到那些隱藏的內(nèi)容。?例如“更多”，或是使用向右或向下的箭頭作為連接或按鈕標(biāo)簽的一個(gè)部分。

3）打開(kāi)隱藏區(qū)域后，設(shè)置另一個(gè)按鈕或某種方式能夠讓用戶關(guān)閉它。隱藏區(qū)域的內(nèi)容應(yīng)該是用戶大部分時(shí)間都不會(huì)需要它的，因此要進(jìn)入和退出這個(gè)額外區(qū)域的操作醒目就可以了。

[形式]

1） 頁(yè)面內(nèi)展開(kāi)：在主要界面上提供按鈕或連接，用戶點(diǎn)擊以后，在頁(yè)面內(nèi)展開(kāi)一個(gè)區(qū)域，顯示進(jìn)一步內(nèi)容，這種形式能夠即時(shí)的反饋用戶的操作，同時(shí)容易給用戶帶來(lái)自然過(guò)度的體驗(yàn)，這種形式適合用在對(duì)主要內(nèi)容的擴(kuò)充，更詳細(xì)的、更近一步的內(nèi)容，當(dāng)用戶沒(méi)有看到這些內(nèi)容并不會(huì)影響使用，而打開(kāi)這些內(nèi)容，用戶可以看到更多、或是得到更豐富的功能。

例如：

在QQ聊天窗口中當(dāng)用戶點(diǎn)擊“聊天記錄”時(shí)，頁(yè)面展開(kāi)一個(gè)區(qū)域，用戶可以看到更多聊天的記錄。

在QQ空間的個(gè)人中心中，頁(yè)面將好友更新的日志標(biāo)題列出來(lái)，當(dāng)用戶點(diǎn)擊“展開(kāi)”按鈕時(shí)可以看到文章開(kāi)頭部分的段落，同時(shí)按鈕轉(zhuǎn)換為“收起”，用戶可以選擇把內(nèi)容再次隱藏起來(lái)。

2）彈出層

用戶點(diǎn)擊按鈕后，在頁(yè)面上浮出一個(gè)層來(lái)顯示進(jìn)一步的內(nèi)容，與頁(yè)面內(nèi)展開(kāi)的形式不同的是，彈出層更適用于區(qū)域內(nèi)的內(nèi)容較為重要的時(shí)候使用，比如彈出層內(nèi)包含一些操作、或重要提示。彈出層一般包含以下部分：標(biāo)題欄 （與內(nèi)容區(qū)分隔較明顯，有標(biāo)題和關(guān)閉操作）；內(nèi)容區(qū)（彈出層的主要內(nèi)容區(qū)）；操作區(qū)（ 彈出層的主要操作區(qū)，確定/保存等按鈕）。彈出層有兩種類型，模式化的和非模式化的，對(duì)于模式化的窗口，彈出層可以移動(dòng)，彈出層以外的頁(yè)面為鎖定狀態(tài)，不可操作；對(duì)于非模式化窗口，該層仍然可以移動(dòng)，彈出層以外的頁(yè)面可操作，操作時(shí)彈出層可以消失也可以一直出現(xiàn)，根據(jù)具體情況而定。

舉例：

在秀世界的應(yīng)用中，用戶點(diǎn)擊“我的儲(chǔ)物箱”彈出一個(gè)展示我已經(jīng)購(gòu)買的物品的層，這是一個(gè)模式化的例子，彈出這個(gè)層以后，原來(lái)界面處于灰度顯示狀態(tài)，其他按鈕不能點(diǎn)擊。

在繪圖工具當(dāng)中，對(duì)于一些擴(kuò)充的工具面板也采用了彈出層的模式，這是一個(gè)非模式化的例子，當(dāng)彈出層出現(xiàn)時(shí)，原來(lái)的頁(yè)面工具仍然可以使用。

2． 嵌入式連接

嵌入式連接已經(jīng)是web上廣泛應(yīng)用的模式，當(dāng)用戶沿著某種線性路徑進(jìn)行瀏覽，如一段文本、一個(gè)操作流程，而在用戶瀏覽的過(guò)程當(dāng)中，我們希望在用戶主要注意力之外提供一些額外的內(nèi)容，它可能是一個(gè)故事的附加信息，或是一個(gè)對(duì)某個(gè)概念的解釋、或是幫助文本。這樣的形式可以讓希望快速完成任務(wù)的人快速前進(jìn)，而對(duì)于希望了解更多的人看到額外的信息，滿足用戶的好奇心和對(duì)未知內(nèi)容的探索。

[用法]

1）為可能吸引用戶的附加內(nèi)容創(chuàng)建入口，

2）這些入口可能是帶下劃線的連接、大的標(biāo)題、按鈕、菜單項(xiàng)、圖標(biāo)及一些可以點(diǎn)擊的圖形區(qū)域。對(duì)于不容易理解的圖標(biāo)或是連接，可以添加簡(jiǎn)短的描述進(jìn)行提示。

3）提供返回的途徑，在用戶閱讀這些分支的內(nèi)容以后能夠回到他們的主要任務(wù)上。

[舉例]

1）在網(wǎng)頁(yè)新聞當(dāng)中，對(duì)一段文字當(dāng)中提到熱門詞匯加上鏈接，當(dāng)用戶對(duì)這個(gè)詞匯感興趣的時(shí)候看?到能夠看到與這個(gè)詞匯相關(guān)的新聞：

2）網(wǎng)上書(shū)店在顯示某本書(shū)的詳細(xì)信息時(shí)，根據(jù)其它用戶在該網(wǎng)站上的購(gòu)買情況列舉出一個(gè)書(shū)籍列表，在頁(yè)面上的某個(gè)位置顯示：“購(gòu)買本書(shū)的顧客還買過(guò)”，以及“瀏覽本書(shū)的顧客還看過(guò)”列表，這些精確的推薦列表為用戶提供了更多的同類書(shū)籍信息，它預(yù)測(cè)關(guān)注某一圖書(shū)的用戶可能會(huì)對(duì)某一類圖書(shū)同樣感興趣。

源地址：http://isd.tencent.com/?p=2067