DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 討論交互模型:響應式出現和嵌入式連接
討論交互模型:響應式出現和嵌入式連接
編輯:關於網頁技巧     

本期討論的交互模型並不局限在一個頁面上的信息結構,它們分別是:響應式出現和嵌入式連接。一個頁面要顯示很多內容,但是其中一部分內容不太重要,我們希望用戶界面變得簡單

上一期分享了三種基本的交互模型,雙面板選擇、畫布工具條、向導(wizard),本期討論的交互模型並不局限在一個頁面上的信息結構,它們分別是:響應式出現和嵌入式連接。

1. 響應式出現

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

[用法]

1)將主要和次要內容分開,默認顯示主要內容,把次要內容放到事先隱藏的區域裡;

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

3)打開隱藏區域後,設置另一個按鈕或某種方式能夠讓用戶關閉它。隱藏區域的內容應該是用戶大部分時間都不會需要它的,因此要進入和退出這個額外區域的操作醒目就可以了。

[形式]

1) 頁面內展開:在主要界面上提供按鈕或連接,用戶點擊以後,在頁面內展開一個區域,顯示進一步內容,這種形式能夠即時的反饋用戶的操作,同時容易給用戶帶來自然過度的體驗,這種形式適合用在對主要內容的擴充,更詳細的、更近一步的內容,當用戶沒有看到這些內容並不會影響使用,而打開這些內容,用戶可以看到更多、或是得到更豐富的功能。

例如:

在QQ聊天窗口中當用戶點擊“聊天記錄”時,頁面展開一個區域,用戶可以看到更多聊天的記錄。

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

2)彈出層

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

舉例:

在秀世界的應用中,用戶點擊“我的儲物箱”彈出一個展示我已經購買的物品的層,這是一個模式化的例子,彈出這個層以後,原來界面處於灰度顯示狀態,其他按鈕不能點擊。

在繪圖工具當中,對於一些擴充的工具面板也采用了彈出層的模式,這是一個非模式化的例子,當彈出層出現時,原來的頁面工具仍然可以使用。

2. 嵌入式連接

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

[用法]

1)為可能吸引用戶的附加內容創建入口,

2)這些入口可能是帶下劃線的連接、大的標題、按鈕、菜單項、圖標及一些可以點擊的圖形區域。對於不容易理解的圖標或是連接,可以添加簡短的描述進行提示。

3)提供返回的途徑,在用戶閱讀這些分支的內容以後能夠回到他們的主要任務上。

[舉例]

1)在網頁新聞當中,對一段文字當中提到熱門詞匯加上鏈接,當用戶對這個詞匯感興趣的時候看 到能夠看到與這個詞匯相關的新聞:

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved