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

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

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

[用法]

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

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

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

[形式]

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

例如：

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

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

2）彈出層

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

舉例：

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

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

2． 嵌入式連接

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

[用法]

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

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

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

[舉例]

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

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

原文：http://isd.tencent.com/?p=2067