網(wǎng)站和網(wǎng)頁應(yīng)用程序正在變得越來越富有交互性。網(wǎng)站上的內(nèi)容比印刷的副本好處在于如果我們希望的話，我們可以讓用戶與它們交互。

我們已經(jīng)討論過網(wǎng)站導(dǎo)航模式與及流行的網(wǎng)頁內(nèi)容表述模式?，F(xiàn)在讓我們探索一些我們有交互性網(wǎng)站內(nèi)容的UI模式。

就地編輯

就地編輯對于Web應(yīng)用來說是一種有價(jià)值的UI，它允許用戶創(chuàng)建或編輯內(nèi)容。就地編輯意思是用戶可以就在當(dāng)前頁面內(nèi)容所處的地方直接編輯該內(nèi)容，而無須轉(zhuǎn)到使用另一種界面的新頁面去編輯。
就地編輯常見于所見即所得編輯器以及關(guān)注數(shù)據(jù)項(xiàng)或組織的應(yīng)用程序（例如像思維腦圖程序）中。

何時(shí)使用

只要你的web應(yīng)用是實(shí)用主義的，就可以使用就地編輯作為UI設(shè)計(jì)模式。它使用起來更加直接并且不會(huì)引起用戶的那么多迷惑。

例子

這里有兩個(gè)就地編輯的例子。
Flickr
在這個(gè)非常流行的照片分享網(wǎng)站，用戶可以就地編輯照片標(biāo)題和其它特定信息。

Lovely Charts
這個(gè)腦圖應(yīng)用帶有一個(gè)就地編輯編輯器，使得它超級容易使用。

拷貝框

拷貝框?qū)τ谀阆胂蚰愕脑L客分享格式化的文本或代碼的任何情況非常有用?？截惪蛳蛴脩籼峁┖苋菀妆粡?fù)制到剪貼板的格式化的文本。
一些網(wǎng)站具有自動(dòng)拷貝特性，所以當(dāng)用戶在框內(nèi)點(diǎn)擊時(shí)文本就復(fù)制到剪貼板了。這節(jié)約了時(shí)間，并且使得一些更不會(huì)復(fù)制操作的用戶使用起來更容易。在大多數(shù)情況下，復(fù)制成功后會(huì)在框邊上彈出一個(gè)提示告訴用戶文本已經(jīng)自動(dòng)復(fù)制到剪貼板。
其它時(shí)候，可能會(huì)提供一個(gè)復(fù)制按鈕或鍵盤快捷鍵。

何時(shí)使用

在任何你希望訪客從你的網(wǎng)站復(fù)制格式化文本或代碼的地方使用拷貝框。

例子

下面是三個(gè)在網(wǎng)站界面使用拷貝框的例子。

Snook.ca

這個(gè)博客在代碼片斷顯示的地方使用拷貝框。

Web Designer Wall
這個(gè)流行的網(wǎng)頁設(shè)計(jì)博客在代碼片斷處使用拷貝框。

Mozilla Ubiquity
拷貝框在這個(gè)網(wǎng)站的使用形式有一點(diǎn)不同，代碼平行于它的解釋而不是在下方。

輸入建議和口語化格式輸入

可以輸入各種各樣數(shù)據(jù)的搜索框和其它輸入域變得越來越普遍。例如，地圖應(yīng)用允許用戶在同一個(gè)輸入框中輸入郵編，坐標(biāo)或者城市，可以建議一個(gè)糾錯(cuò)后的輸入，還可以就讓用戶直接輸入有誤的內(nèi)容并在服務(wù)器端代碼里處理和糾正輸入的數(shù)據(jù)。
這減少了迷惑并且使訪客更容易找到他們需要的信息。此外這種方式比起提供多個(gè)輸入框來說也更加合理，布局更加整潔。

何時(shí)使用

在輸入框可能有各種各樣的輸入的時(shí)候，使用輸入建議并且允許多種類型的口語化輸入是非常有意義的。

例子

下面是三個(gè)使用輸入建議和口語化格式輸入的例子。

American Airlines
這個(gè)Dustin Curtis重新設(shè)計(jì)的原型使用口語化格式輸入來預(yù)定旅程，允許用戶以他們想要的方式輸入搜索項(xiàng)。

Google Calendar
Google日歷里的快速添加功能使用自動(dòng)建議和口語化格式輸入。

Bing Maps
當(dāng)你查找方向時(shí)，Bing地圖提供了口語化格式輸入。

多步式

當(dāng)你有一個(gè)很長的表單需要與訪客交互時(shí)（如結(jié)賬，問卷，注冊表單等），如果你把它拆成多個(gè)步驟可能可以減少用戶的畏懼感。
多步式的一個(gè)通用做法是告訴用戶當(dāng)前他們在第幾步以及還剩下多少步。
注意多步式并不否定你的網(wǎng)頁表單應(yīng)該總是盡可能的短的觀點(diǎn)。

何時(shí)使用

當(dāng)你的表單或其它流程具有6個(gè)以上的問題的時(shí)候，將流程分為幾步對用戶來說是非常有用的。然而，記住如果步驟太多的話同樣會(huì)很糟糕，所以要視情況而定。
同時(shí)要確保用戶在每一步的信息都被記住，以防用戶出現(xiàn)什么問題。
此外，確保用戶可以確認(rèn)并返回前面的步驟更改所填寫的內(nèi)容。

例子

下面是4個(gè)多步式表單的例子

Statement Stacker
這個(gè)網(wǎng)站在注冊中使用三個(gè)步驟。

Livestream
這個(gè)現(xiàn)場直播的網(wǎng)站也用了三步注冊流程。

Autobutler.dk
這個(gè)網(wǎng)站使用了5步注冊流程，但是每一個(gè)步驟都很短。

Onbile
Onbile提供一個(gè)4步過程來創(chuàng)建移動(dòng)網(wǎng)站。

內(nèi)容懸停控件

針對內(nèi)容片斷的UI控件可以使得它更容易交互。這些控件通常在你懸停在目標(biāo)內(nèi)容上時(shí)出現(xiàn)。
比如Facebook，在新鮮事中大量使用懸?？丶彝Ｔ谛迈r事中某個(gè)人的狀態(tài)上時(shí)，你可以看到屏蔽或移除他們的更新的選項(xiàng)。懸停在你自己的Facebook狀態(tài)或評論，你會(huì)看到刪除選項(xiàng)。這樣做對用戶非常友好并且減小用戶界面的混亂。

何時(shí)使用

當(dāng)你的一些功能很容易被訪問但是并不常用時(shí)，懸?？丶赡苁峭昝赖姆桨?。

例子

下面是2個(gè)內(nèi)容懸?？丶睦印?/p>

Facebook
在Facebook中，懸?？丶试S管理員編輯一個(gè)Facebook頁面信息。

Twitter
Twitter使用懸?？丶盹@示回復(fù)推文的選項(xiàng)，還有回復(fù)選項(xiàng)和其它控件。

查看英文源文

來源：http://rockux.com