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