|
一個好的用戶界面（UI）的主要功能是為用戶在用戶意圖和應(yīng)用程序功能之間提供一個直觀的映射，為用戶既定任務(wù)的完成提供一個解決方案。基本上來說，用戶界面（UI）描述了用戶和網(wǎng)站之間交互以及用戶訪問其功能的方式。事實(shí)上，可用性是一個良好的用戶界面的雙積，它決定了用戶是否可以輕松地執(zhí)行網(wǎng)站提供的所有功能?？捎眯允敲恳粋€設(shè)計(jì)的重要組成部分，特別是在擁有大量功能和用戶的網(wǎng)站上。
這篇文章我們來說說社會化媒體和社交網(wǎng)絡(luò)的用戶界面的一些至關(guān)重要的特征。文章討論那些設(shè)計(jì)背后的重要特征，技術(shù)和概念，并通過一些優(yōu)秀網(wǎng)站作為例子來解釋這些特征為什么是重要的。這些簡單的和通用的可用性策略幾乎適用于任何地方和任何類型的用戶界面。
1.簡潔的界面是關(guān)鍵在深入用戶界面的細(xì)節(jié)之前，必須指出的一點(diǎn)事實(shí)是：簡潔的用戶界面是社會化媒體和社交網(wǎng)絡(luò)的共同特征。社會化媒體網(wǎng)站在色調(diào)和圖形方面更加簡潔。色調(diào)方面通常包括少數(shù)幾種伴隨著單色變化的顏色；背景一般為白色，更新（如狀態(tài)更新）往往都是淺色以及（通常是綠色或黃色突出；警示通常用紅色背景突出）
此外，你會發(fā)現(xiàn)圖形往往也是非常簡單的，并且運(yùn)用地相當(dāng)謹(jǐn)慎。這是由多種原因造成的。最重要的原因是一個簡單的事實(shí)：生動形象的設(shè)計(jì)并非是真正有用的社交網(wǎng)站。社會化應(yīng)用被認(rèn)為是向用戶提供了一個內(nèi)容可以很容易地創(chuàng)造以及會話可以很容易地產(chǎn)生的共享環(huán)境，而強(qiáng)烈的視覺設(shè)計(jì)會造成不必要的干擾，使用戶很難專注于他們的會話。
例如，Twitter可能是最簡約的社會化用戶界面之一。其UI非常的簡潔，使用了極少的顏色，并把其服務(wù)的主要特征——文本輸入框——放在前面。
換言之，由于信息流相當(dāng)大一部分是為了大多數(shù)用戶的，這自然就要求界面設(shè)計(jì)的越簡單越好。如果界面上的圖形元素用地太多，用戶就會感到不舒服和混亂，因?yàn)檫@樣用戶就很難關(guān)注到特定的任務(wù)或區(qū)域。盡管簡單的界面不只意味著只是一個簡單的視覺設(shè)計(jì)。更重要的是，這意味著有用的界面選項(xiàng)的設(shè)計(jì)、安排以及展現(xiàn)都要以直觀的方式。
社會媒體和社會網(wǎng)絡(luò)站點(diǎn)的顏色往往是平淡和讓人愉悅的，而不是鮮亮和讓人不舒服的。一些功能不爭取關(guān)注；其中許多大部分時間是無形的。事實(shí)上，絕大多數(shù)社會化媒體的界面是上下文相關(guān)的，很多功能只“按需”顯示。擁有大量的數(shù)據(jù)和功能的網(wǎng)站，明亮的色彩只會讓用戶感到混亂并且會分散用戶注意力。
2.顯著和實(shí)用的搜索良好的搜索功能無疑是可用性和好的用戶界面的頂峰。社會化媒體的搜索功能是必需的——因?yàn)樯鐣襟w有著大量的信息。社會化媒體的搜索功能，除了擁有傳統(tǒng)搜索的多個層面的內(nèi)容以外，社會化應(yīng)用還提供了一個社交圖聯(lián)系中的高級搜索——無論是在小組，社區(qū)還是在興趣上。網(wǎng)站頂部右上角是搜索框最合適的位置。用戶期望在那里看到：搜索輸入框和清晰可見的搜索按鈕。
社會化應(yīng)用的一個共同特征是使用即時搜索結(jié)果和過濾。當(dāng)你往輸入框輸入文字的時候，搜索結(jié)果以下拉的形式被過濾。該過濾幫助用戶快速找到他們尋找的內(nèi)容，并剔除那些不相關(guān)的內(nèi)容。
搜索結(jié)果頁面比一個友好的搜索輸入框設(shè)計(jì)顯得更為重要。Digg最近更新了他們的搜索引擎，現(xiàn)在是一個非常實(shí)用和友好的搜索例子。您可以通過一些選項(xiàng)來組織搜索結(jié)果，這些選項(xiàng)如最佳匹配，MostDiggs，以及最新的。在左邊你會發(fā)現(xiàn)時間范圍列表，Digg范圍，熱門話題和熱門分類。此外，您還可以按內(nèi)容的來源來組織搜索結(jié)果。在搜索結(jié)果頁的頂部還有一個巨大的搜索框，方便用戶搜索其他關(guān)鍵字。
3.顯著的召喚行動（Call-To-Action）按鈕當(dāng)然，社會化應(yīng)用包含多種需要以某種方式交流的功能。因此，一些按鈕和鏈接幾乎需要置于在每一頁上（注冊可能是唯一合理的除外）。一些涉及到導(dǎo)航鏈接，另外一些讓用戶調(diào)整具體應(yīng)用功能。按鈕通常用于激勵用戶操作，而鏈接往往是被動的且更微妙。按鈕往往更大，更生動，更令人難忘。不管是執(zhí)行那個功能的按鈕，都應(yīng)該顯著且可點(diǎn)。
通常，社交網(wǎng)站只有少數(shù)幾個召喚行動的按鈕，這些按鈕，都應(yīng)該鼓勵用戶采取行動（見WebDesignTrends:CallToActionButtons,ButtonsDesignShowcaseandGoodCall-To-ActionButtonsforgoodguidelinesforthedesignofcall-to-action-buttons）。這些按鈕通常設(shè)計(jì)和放在突出的位置，而其他設(shè)計(jì)元素仍然非常微妙和簡單（見下面的截圖）。
一般來說，在用戶界面設(shè)計(jì)中現(xiàn)實(shí)生活的比喻用法是非?？扇〉?。因此，一個好主意不僅可以使使一個按鈕更像一個按鈕（例如，使用下拉陰影），更能確?！钴S的——和重點(diǎn)突出的設(shè)計(jì)，和按鈕交流是實(shí)際上“按”的，在這種情況下，最好是添加壓花效果而不是僅僅改變按鈕或其邊框的顏色。
按鈕應(yīng)該足夠大，讓用戶能輕易注意到和選擇。然而，形狀大小并不是唯一一個可點(diǎn)擊的按鈕或鏈接的特征。另一個重要因素是內(nèi)邊距。如果你有一個鏈接線緊緊擠在一起，就不可能點(diǎn)擊一個你其實(shí)想點(diǎn)擊的那個。您可以考慮為您的鏈接或按鈕的提供一些視覺支持。
在使用鏈接的時候，使用一些圖標(biāo)或者小插圖有時是有用的，但這并不總是可行的，特別是在鏈接對于絕大部分用戶不是很重要的時候。如果您需要強(qiáng)調(diào)一些重要鏈接，你應(yīng)該考慮給鏈接加一些間距，使用突出的背景，使之成為一個大型點(diǎn)擊塊或只是取代一個突出的按鈕。使用突出的背景，但不能太復(fù)雜。
同樣重要的是要提到光標(biāo)效果的重要性。光標(biāo)效果讓用戶知道按鈕實(shí)際上是可以點(diǎn)擊的，并確認(rèn)該用戶的行為是被系統(tǒng)理解的。
4.溫和的分隔元素各種信息塊的有意義組織和展示可能是社會化用戶界面設(shè)計(jì)師需要面對的高級設(shè)計(jì)問題之一。為了使內(nèi)容可讀，可瀏覽和容易被覺察到，內(nèi)容塊需要在視覺上被分隔開。換句話說，每個元素都需要以某種方式被定義且被顯示為單獨(dú)的元素。事實(shí)上，在布局里各個元素的分隔是最簡單的使用戶界面更加簡潔的方式之一，用戶可以輕松地與之交互。
但是，如果許多元素在視覺上被分隔開，界面上則會產(chǎn)生更多的信息塊，布局也會因此變得更加復(fù)雜。因此，為了確保布局仍然可瀏覽，視覺上的分隔需要進(jìn)行微妙的處理。在大多數(shù)情況下，橫向和縱向線條運(yùn)用中性平淡的顏色（例如灰色）。一個強(qiáng)有力的鮮艷的色彩——這往往是難以忽視的——將會分散用戶的注意力。相反，“平靜”的線條更容易被忽略，從而提供可視化的支持。
在一個頁面布局中分隔元素究竟意味著什么呢？Twitter的使用視覺分隔來構(gòu)造頁面布局。你可以看到每兩條tweet之間有一條虛線。如果沒有這個分界線，幾乎不可能快速掃描多行文本。像這樣的小細(xì)節(jié)可明顯改善用戶界面，方便使用。
Delicious使用細(xì)小的1px灰色線來分隔其用戶的熱門書簽。
您還可以看到元素之間的分隔在yuhou.cn上也在使用。就像Twitter，單一的灰色像素線分隔大量的文本，使得頁面更容易瀏覽。
相反，Reddit在每條文本之間沒有使用分隔，使得界面更加混亂，因此更難以掃描。有時候，一個大幅度活躍的白色空間也可能有助于在布局里分隔元素，但這種方法的缺點(diǎn)是，可能會使得網(wǎng)頁拉得太長，以至于用戶要使用垂直滾動條。
在Reddit上，運(yùn)用高亮標(biāo)題的方法來提高可瀏覽性，這樣關(guān)注的重點(diǎn)完全落在了標(biāo)題上，也不失是一個好的設(shè)計(jì)方法。
另一個分隔元素的技術(shù)是使用適當(dāng)?shù)牟季纸Y(jié)構(gòu)，在視覺上分隔內(nèi)容塊/使用空白用以同樣的目的。例如：Slashdot把每個內(nèi)容塊放在易于識別的框中，并使用背景圖片來突出標(biāo)題。
StumbleUpon采用的基于網(wǎng)格的結(jié)構(gòu)，其中的每個內(nèi)容項(xiàng)目有著相同的高度和寬度。這是另外一種有效的溫和的分隔方式。
|