一個好的用戶界面（UI）的主要功能是為用戶在用戶意圖和應用程序功能之間提供一個直觀的映射，為用戶既定任務的完成提供一個解決方案。基本上來說，用戶界面（UI）描述了用戶和網站之間交互以及用戶訪問其功能的方式。事實上，可用性是一個良好的用戶界面的雙積，它決定了用戶是否可以輕松地執行網站提供的所有功能。可用性是每一個設計的重要組成部分，特別是在擁有大量功能和用戶的網站上。

這篇文章我們來說說社會化媒體和社交網絡的用戶界面的一些至關重要的特征。文章討論那些設計背后的重要特征，技術和概念，并通過一些優秀網站作為例子來解釋這些特征為什么是重要的。這些簡單的和通用的可用性策略幾乎適用于任何地方和任何類型的用戶界面。

1. 簡潔的界面是關鍵
在深入用戶界面的細節之前，必須指出的一點事實是：簡潔的用戶界面是社會化媒體和社交網絡的共同特征。社會化媒體網站在色調和圖形方面更加簡潔。色調方面通常包括少數幾種伴隨著單色變化的顏色；背景一般為白色，更新（如狀態更新）往往都是淺色以及（通常是綠色或黃色突出；警示通常用紅色背景突出）

此外，你會發現圖形往往也是非常簡單的，并且運用地相當謹慎。這是由多種原因造成的。最重要的原因是一個簡單的事實：生動形象的設計并非是真正有用的社交網站。社會化應用被認為是向用戶提供了一個內容可以很容易地創造以及會話可以很容易地產生的共享環境，而強烈的視覺設計會造成不必要的干擾，使用戶很難專注于他們的會話。

例如，Twitter可能是最簡約的社會化用戶界面之一。其UI非常的簡潔，使用了極少的顏色，并把其服務的主要特征——文本輸入框——放在前面。

換言之，由于信息流相當大一部分是為了大多數用戶的，這自然就要求界面設計的越簡單越好。如果界面上的圖形元素用地太多，用戶就會感到不舒服和混亂，因為這樣用戶就很難關注到特定的任務或區域。盡管簡單的界面不只意味著只是一個簡單的視覺設計。更重要的是，這意味著有用的界面選項的設計、安排以及展現都要以直觀的方式。

社會媒體和社會網絡站點的顏色往往是平淡和讓人愉悅的，而不是鮮亮和讓人不舒服的。一些功能不爭取關注；其中許多大部分時間是無形的。事實上，絕大多數社會化媒體的界面是上下文相關的，很多功能只 “按需” 顯示。擁有大量的數據和功能的網站，明亮的色彩只會讓用戶感到混亂并且會分散用戶注意力。

2. 顯著和實用的搜索
良好的搜索功能無疑是可用性和好的用戶界面的頂峰。社會化媒體的搜索功能是必需的——因為社會化媒體有著大量的信息。社會化媒體的搜索功能，除了擁有傳統搜索的多個層面的內容以外，社會化應用還提供了一個社交圖聯系中的高級搜索——無論是在小組，社區還是在興趣上。網站頂部右上角是搜索框最合適的位置。用戶期望在那里看到：搜索輸入框和清晰可見的搜索按鈕。

社會化應用的一個共同特征是使用即時搜索結果和過濾。當你往輸入框輸入文字的時候，搜索結果以下拉的形式被過濾。該過濾幫助用戶快速找到他們尋找的內容，并剔除那些不相關的內容。

搜索結果頁面比一個友好的搜索輸入框設計顯得更為重要。Digg最近更新了他們的搜索引擎，現在是一個非常實用和友好的搜索例子。您可以通過一些選項來組織搜索結果，這些選項如最佳匹配，Most Diggs，以及最新的。在左邊你會發現時間范圍列表，Digg范圍，熱門話題和熱門分類。此外，您還可以按內容的來源來組織搜索結果。在搜索結果頁的頂部還有一個巨大的搜索框，方便用戶搜索其他關鍵字。

3.顯著的召喚行動（Call-To-Action）按鈕
當然，社會化應用包含多種需要以某種方式交流的功能。因此，一些按鈕和鏈接幾乎需要置于在每一頁上（注冊可能是唯一合理的除外）。一些涉及到導航鏈接，另外一些讓用戶調整具體應用功能。按鈕通常用于激勵用戶操作，而鏈接往往是被動的且更微妙。按鈕往往更大，更生動，更令人難忘。不管是執行那個功能的按鈕，都應該顯著且可點。

通常，社交網站只有少數幾個召喚行動的按鈕，這些按鈕，都應該鼓勵用戶采取行動（見Web Design Trends: Call To Action Buttons, Buttons Design Showcase and Good Call-To-Action Buttons for good guidelines for the design of call-to-action-buttons）。這些按鈕通常設計和放在突出的位置，而其他設計元素仍然非常微妙和簡單（見下面的截圖）。

一般來說，在用戶界面設計中現實生活的比喻用法是非常可取的。因此，一個好主意不僅可以使使一個按鈕更像一個按鈕（例如，使用下拉陰影），更能確保——活躍的——和重點突出的設計，和按鈕交流是實際上“按”的，在這種情況下，最好是添加壓花效果而不是僅僅改變按鈕或其邊框的顏色。

按鈕應該足夠大，讓用戶能輕易注意到和選擇。然而，形狀大小并不是唯一一個可點擊的按鈕或鏈接的特征。另一個重要因素是內邊距。如果你有一個鏈接線緊緊擠在一起，就不可能點擊一個你其實想點擊的那個。您可以考慮為您的鏈接或按鈕的提供一些視覺支持。

在使用鏈接的時候，使用一些圖標或者小插圖有時是有用的，但這并不總是可行的，特別是在鏈接對于絕大部分用戶不是很重要的時候。如果您需要強調一些重要鏈接，你應該考慮給鏈接加一些間距，使用突出的背景，使之成為一個大型點擊塊或只是取代一個突出的按鈕。使用突出的背景，但不能太復雜。

同樣重要的是要提到光標效果的重要性。光標效果讓用戶知道按鈕實際上是可以點擊的，并確認該用戶的行為是被系統理解的。

4. 溫和的分隔元素
各種信息塊的有意義組織和展示可能是社會化用戶界面設計師需要面對的高級設計問題之一。為了使內容可讀，可瀏覽和容易被覺察到，內容塊需要在視覺上被分隔開。換句話說，每個元素都需要以某種方式被定義且被顯示為單獨的元素。事實上，在布局里各個元素的分隔是最簡單的使用戶界面更加簡潔的方式之一，用戶可以輕松地與之交互。

但是，如果許多元素在視覺上被分隔開，界面上則會產生更多的信息塊，布局也會因此變得更加復雜。因此，為了確保布局仍然可瀏覽，視覺上的分隔需要進行微妙的處理。在大多數情況下，橫向和縱向線條運用中性平淡的顏色（例如灰色）。一個強有力的鮮艷的色彩——這往往是難以忽視的——將會分散用戶的注意力。相反，“平靜”的線條更容易被忽略，從而提供可視化的支持。

在一個頁面布局中分隔元素究竟意味著什么呢？ Twitter的使用視覺分隔來構造頁面布局。你可以看到每兩條tweet之間有一條虛線。如果沒有這個分界線，幾乎不可能快速掃描多行文本。像這樣的小細節可明顯改善用戶界面，方便使用。

Delicious使用細小的1px灰色線來分隔其用戶的熱門書簽。

您還可以看到元素之間的分隔在Mixx.com上也在使用。就像Twitter，單一的灰色像素線分隔大量的文本，使得頁面更容易瀏覽。

相反，Reddit在每條文本之間沒有使用分隔，使得界面更加混亂，因此更難以掃描。有時候，一個大幅度活躍的白色空間也可能有助于在布局里分隔元素，但這種方法的缺點是，可能會使得網頁拉得太長，以至于用戶要使用垂直滾動條。

在Reddit上，運用高亮標題的方法來提高可瀏覽性，這樣關注的重點完全落在了標題上，也不失是一個好的設計方法。

另一個分隔元素的技術是使用適當的布局結構，在視覺上分隔內容塊/使用空白用以同樣的目的。例如：Slashdot把每個內容塊放在易于識別的框中，并使用背景圖片來突出標題。

StumbleUpon采用的基于網格的結構，其中的每個內容項目有著相同的高度和寬度。這是另外一種有效的溫和的分隔方式。