9個成功的網(wǎng)頁設(shè)計用戶界面UI的重要特征

9個成功的網(wǎng)頁設(shè)計用戶界面UI的重要特征一個好的用戶界面（UI）的主要功能是為用戶在用戶意圖和應(yīng)用程序功能之間提供一個直觀的映射，為用戶既定任務(wù)的完成提供一個解決方案?；旧蟻碚f，用戶界面。1）描述了用戶和網(wǎng)站之間交互以及用戶訪問其功能的方式。事實上，可用性是一個良好的用戶界面的雙積，它決定了用戶是否可以輕松地執(zhí)行網(wǎng)站提供的所有功能?？捎眯允敲恳粋€設(shè)計的重要組成部分，特別是在擁有大量功能和用戶的網(wǎng)站上。這篇文章我們來說說社會化媒體和社交網(wǎng)絡(luò)的用戶界面的一些至關(guān)重要的特征。文章討論那些設(shè)計背后的重要特征，技術(shù)和概念，并通過一些優(yōu)秀網(wǎng)站作為例子來解釋這些特征為什么是重要的。這些簡單的和通用的可用性策略幾乎適用于任何地方和任何類型的用戶界面。1.簡潔的界面是關(guān)鍵在深入用戶界面的細節(jié)之前，必須指出的一點事實是：簡潔的用戶界面是社會化媒體和社交網(wǎng)絡(luò)的共同特征。社會化媒體網(wǎng)站在色調(diào)和圖形方面更加簡潔。色調(diào)方面通常包括少數(shù)幾種伴隨著單色變化的顏色；背景一般為白色，更新（如狀態(tài)更新）往往都是淺色以及（通常是綠色或黃色突出；警示通常用紅色背景突出）此外，你會發(fā)現(xiàn)圖形往往也是非常簡單的，并且運用地相當謹慎。這是由多種原因造成的。最重要的原因是一個簡單的事實：生動形象的設(shè)計并非是真正有用的社交網(wǎng)站。社會化應(yīng)用被認為是向用戶提供了一個內(nèi)容可以很容易地創(chuàng)造以及會話可以很容易地產(chǎn)生的共享環(huán)境，而強烈的視覺設(shè)計會造成不必要的干擾，使用戶很難專注于他們的會話。例如，Twitter可能是最簡約的社會化用戶界面之一。其UI非常的簡潔，使用了極少的顏色，并把其服務(wù)的主要特征——文本輸入框——放在前面。換言之，由于信息流相當大一部分是為了大多數(shù)用戶的，這自然就要求界面設(shè)計的越簡單越好。如果界面上的圖形元素用地太多，用戶就會感到不舒服和混亂，因為這樣用戶就很難關(guān)注到特定的任務(wù)或區(qū)域。盡管簡單的界面不只意味著只是一個簡單的視覺設(shè)計。更重要的是，這意味著有用的界面選項的設(shè)計、安排以及展現(xiàn)都要以直觀的方式。社會媒體和社會網(wǎng)絡(luò)站點的顏色往往是平淡和讓人愉悅的，而不是鮮亮和讓人不舒服的。一些功能不爭取關(guān)注；其中許多大部分時間是無形的。事實上，絕大多數(shù)社會化媒體的界面是上下文相關(guān)的，很多功能只“按需”顯示。擁有大量的數(shù)據(jù)和功能的網(wǎng)站，明亮的色彩只會讓用戶感到混亂并且會分散用戶注意力。2.顯著和實用的搜索良好的搜索功能無疑是可用性和好的用戶界面的頂峰。社會化媒體的搜索功能是必需的一一因為社會化媒體有著大量的信息。社會化媒體的搜索功能，除了擁有傳統(tǒng)搜索的多個層面的內(nèi)容以外，社會化應(yīng)用還提供了一個社交圖聯(lián)系中的高級搜索一一無論是在小組，社區(qū)還是在興趣上。網(wǎng)站頂部右上角是搜索框最合適的位置。用戶期望在那里看到：搜索輸入框和清晰可見的搜索按鈕。社會化應(yīng)用的一個共同特征是使用即時搜索結(jié)果和過濾。當你往輸入框輸入文字的時候，搜索結(jié)果以下拉的形式被過濾。該過濾幫助用戶快速找到他們尋找的內(nèi)容，并剔除那些不相關(guān)的內(nèi)容。搜索結(jié)果頁面比一個友好的搜索輸入框設(shè)計顯得更為重要。Digg最近更新了他們的搜索引擎，現(xiàn)在是一個非常實用和友好的搜索例子。您可以通過一些選項來組織搜索結(jié)果，這些選項如最佳匹配，MostDiggs，以及最新的。在左邊你會發(fā)現(xiàn)時間范圍列表，Digg范圍，熱門話題和熱門分類。此外，您還可以按內(nèi)容的來源來組織搜索結(jié)果。在搜索結(jié)果頁的頂部還有一個巨大的搜索框，方便用戶搜索其他關(guān)鍵字。3.顯著的召喚行動（Call-To-Action）按鈕當然，社會化應(yīng)用包含多種需要以某種方式交流的功能。因此，一些按鈕和鏈接幾乎需要置于在每一頁上（注冊可能是唯一合理的除外）。一些涉及到導(dǎo)航鏈接，另外一些讓用戶調(diào)整具體應(yīng)用功能。按鈕通常用于激勵用戶操作，而鏈接往往是被動的且更微妙。按鈕往往更大，更生動，更令人難忘。不管是執(zhí)行那個功能的按鈕，都應(yīng)該顯著且可點。通常，社交網(wǎng)站只有少數(shù)幾個召喚行動的按鈕，這些按鈕，都應(yīng)該鼓勵用戶采取行動（見WebDesignTrends:CallToActionButtons,ButtonsDesignShowcaseandGoodCall-To-ActionButtonsforgoodguidelinesforthedesignofcall-to-action-buttons）。這些按鈕通常設(shè)計和放在突出的位置，而其他設(shè)計元素仍然非常微妙和簡單（見下面的截圖）。一般來說，在用戶界面設(shè)計中現(xiàn)實生活的比喻用法是非?？扇〉?。因此，一個好主意不僅可以使使一個按鈕更像一個按鈕（例如，使用下拉陰影），更能確保一一活躍的一一和重點突出的設(shè)計，和按鈕交流是實際上“按”的，在這種情況下，最好是添加壓花效果而不是僅僅改變按鈕或其邊框的顏色。按鈕應(yīng)該足夠大，讓用戶能輕易注意到和選擇。然而，形狀大小并不是唯一一個可點擊的按鈕或鏈接的特征。另一個重要因素是內(nèi)邊距。如果你有一個鏈接線緊緊擠在一起，就不可能點擊一個你其實想點擊的那個。您可以考慮為您的鏈接或按鈕的提供一些視覺支持。在使用鏈接的時候，使用一些圖標或者小插圖有時是有用的，但這并不總是可行的，特別是在鏈接對于絕大部分用戶不是很重要的時候。如果您需要強調(diào)一些重要鏈接，你應(yīng)該考慮給鏈接加一些間距，使用突出的背景，使之成為一個大型點擊塊或只是取代一個突出的按鈕。使用突出的背景，但不能太復(fù)雜。同樣重要的是要提到光標效果的重要性。光標效果讓用戶知道按鈕實際上是可以點擊的，并確認該用戶的行為是被系統(tǒng)理解的。溫和的分隔元素各種信息塊的有意義組織和展示可能是社會化用戶界面設(shè)計師需要面對的高級設(shè)計問題之一。為了使內(nèi)容可讀，可瀏覽和容易被覺察到，內(nèi)容塊需要在視覺上被分隔開。換句話說，每個元素都需要以某種方式被定義且被顯示為單獨的元素。事實上，在布局里各個元素的分隔是最簡單的使用戶界面更加簡潔的方式之一，用戶可以輕松地與之交互。但是，如果許多元素在視覺上被分隔開，界面上則會產(chǎn)生更多的信息塊，布局也會因此變得更加復(fù)雜。因此，為了確保布局仍然可瀏覽，視覺上的分隔需要進行微妙的處理。在大多數(shù)情況下，橫向和縱向線條運用中性平淡的顏色（例如灰色）。一個強有力的鮮艷的色彩——這往往是難以忽視的——將會分散用戶的注意力。相反，“平靜”的線條更容易被忽略，從而提供可視化的支持。在一個頁面布局中分隔元素究竟意味著什么呢？Twitter的使用視覺分隔來構(gòu)造頁面布局。你可以看到每兩條tweet之間有一條虛線。如果沒有這個分界線，幾乎不可能快速掃描多行文本。像這樣的小細節(jié)可明顯改善用戶界面，方便使用。Delicious使用細小的1px灰色線來分隔其用戶的熱門書簽。您還可以看到元素之間的分隔在M上也在使用。就像Twitter，單一的灰色像素線分隔大量的文本，使得頁面更容易瀏覽。相反，Reddit在每條文本之間沒有使用分隔，使得界面更加混亂，因此更難以掃描。有時候，一個大幅度活躍的白色空間也可能有助于在布局里分隔元素，但這種方法的缺點是，可能會使得網(wǎng)頁拉得太長，以至于用戶要使用垂直滾動條。在Reddit上，運用高亮標題的方法來提高可瀏覽性，這樣關(guān)注的重點完全落在了標題上，也不失是一個好的設(shè)計方法。另一個分隔元素的技術(shù)是使用適當?shù)牟季纸Y(jié)構(gòu)，在視覺上分隔內(nèi)容塊/使用空白用以同樣的目的。例如：Slashdot把每個內(nèi)容塊放在易于識別的框中，并使用背景圖片來突出標題。StumbleUpon采用的基于網(wǎng)格的結(jié)構(gòu)，其中的每個內(nèi)容項目有著相同的高度和寬度。這是另外一種有效的溫和的分隔方式。把文本當成用戶界面在Nineskillsthatseparategoodandgreatdesigners演講中，CameronMoll提到：好的設(shè)計師把文本看作內(nèi)容，而偉大的設(shè)計師把文本看作用戶界面。內(nèi)容基本上是一個巨大的文本塊，用戶界面則需要采用微妙差別的文字顏色、背景、字體、大小和鏈接演示來使得內(nèi)容更容易瀏覽。事實上，社會化媒體網(wǎng)站上良好的用戶界面是采用不同大小和顏色的元素來創(chuàng)建一個清晰的視覺和結(jié)構(gòu)層次。這是類似于前面的技巧，因為這種技術(shù)有助于提供分離和定義因素，以及使界面簡潔。除了改善可用性，處理用戶界面的文字，有助于提高可讀性，因為它明確排列了設(shè)計元素之間的關(guān)系，這也意味這它們在布局中重要性。結(jié)果是：這樣的網(wǎng)頁更容易被瀏覽。關(guān)于這個概念的例子，看下Digg的用戶界面（見下圖）。當你瀏覽digg的時候，你會發(fā)現(xiàn)文本內(nèi)容以一種非常一致的方式，在字體大小、字體顏色和其他元素間有著各種不同的變化。還要注意這種設(shè)計是如何有效地為用戶提供一個清晰的導(dǎo)航路徑的；主要的鏈接以下劃線和藍色予以突出，而“更多...”鏈接是灰色的，其他鏈接沒有下劃線，另外的一些文字內(nèi)容是則是紅色或者是灰色的。每個內(nèi)容塊有7個不同的設(shè)計元素（標題、來源、描述、更多鏈接、類別、時間、以及描述下面的其他鏈接），不過，這樣的設(shè)計是行之有效的，因為每個元素的視覺重量是非常獨特并且溝通也很清楚。這是一個良好的設(shè)計。此外，您可以看到Twitter這個更為簡單的例子。首先是顯示帖子，下面是更小，更微妙的文本顯示一一當你需要尋找的時候可以很容易地找到。另外一個例子是Propeller。主要內(nèi)容塊的背景是灰白相間的。每塊的要素有不同的色調(diào)，主要內(nèi)容有一個清晰可見的邊界。這些顏色的變化，使界面看起來更漂亮。簡潔可用的表單Web表單可能是社會化媒體和社交站點最重要的設(shè)計元素。從注冊到搜索任何內(nèi)容，登錄回復(fù)或增加一些內(nèi)容都會用到表單和輸入。由于表單是非常重要的，必須使用。尤其是注冊表單，因為沒有一個“行之有效的”注冊表單，就可能很難增加大量至關(guān)重要的用戶來讓社會化媒體網(wǎng)站運行下去。有一些方法將有助于保持表單的可用性。最簡單的方法是保持表單盡可能的簡短。許多社會化媒體網(wǎng)站只要求填寫最主要的內(nèi)容（僅電子郵件和密碼），把一些額外的信息留給用戶在在賬戶創(chuàng)建之后去編輯（如個人介紹，地點，以及其他相關(guān)信息）。如果可能的話不需要任何電子郵件或密碼確認以及不使用驗證碼。一些服務(wù)需要郵件確認和郵件激活，這就需要用戶花費時間而無助于用戶馬上就開始就使用系統(tǒng)。普遍認同的規(guī)則是：你的web表單越簡單，對你的用戶就越有用；需要填寫的內(nèi)容移除的越多，注冊的用戶就會越多。你可以參考下這篇關(guān)于注冊表單的文章WebFormDesignPatterns:Sign-UpForms（seepart2aswell）.Reddit的注冊表單非常簡短，只需幾秒鐘就可以完成注冊。沒有e-mail確認或者是email激活。整個表單非常的干凈整潔。Twitter的注冊表單也很干凈整潔，且不要求密碼確認。一旦光標移到輸入框中，右邊就會顯示提示信息。最簡單的注冊表單的例子是Tumblr。整個注冊只需要填寫三項：email，密碼和用戶名，就這么簡單。即時更新在過去幾年，為什么微博客服務(wù)能蓬勃發(fā)展的原因之一就是為社會化界面帶來了新的，“實時”的元素。和即時通訊用戶大多集中在雙向交談不同，Twitter等提供了多種和web交談的方式?，F(xiàn)在的用戶希望看到即時的傳入消息或盡快把消息發(fā)布出來，并觀察他的社交圈子中正在發(fā)生什么。對于社會化用戶界面的設(shè)計是來說，這意味用戶應(yīng)該擁有一個實時更新的功能，在一個應(yīng)用程序中即時地更新內(nèi)容。自動和引人注目的（但不顯眼）更新有助于用戶停留在一個“信息流”中，例如，關(guān)注他的重點任務(wù)以及即時獲取也可能很重要的信息。Twittersearch用高亮的方式即時顯示用戶的最新更新。這也許是將來搜索和新聞流的樣子。Facebook在頁面的頂部顯示更新，這些更新用戶可以按需顯示——運用ajax，當然無需刷新?？诒畯V告和個性化也許，一個有效的口碑廣告的最佳策略是提供良好的服務(wù)和用戶體驗。用戶在一個社會化網(wǎng)絡(luò)上感動越舒適，他就越有可能在這個網(wǎng)站上改善其社會資本，擴大他的社交圈子。要做到這點，一個社會化網(wǎng)絡(luò)站點需要提供有吸引力的功能，不管是在線的還是離線的。因此，社交網(wǎng)站往往利用個性化，提供更靈活，更適用的用戶界面是完全可以理解的。在社會化應(yīng)用中，個性化是一項非常強有力的技術(shù)，用來給用戶分發(fā)相關(guān)的內(nèi)容。推薦系統(tǒng)經(jīng)常被用來向用戶提供用戶感興趣或用戶期望的信息。不過這樣的推薦系統(tǒng)的建成需要很長的時間，因為一開始系統(tǒng)掌握的用戶及其喜好的信息非常少，以至于系統(tǒng)不能有效地向用戶推薦有用的信息。不斷地掌握用戶的信息，基于用戶的行為、興趣、搜索和其他一些用戶行為，從而使得推薦系統(tǒng)能給用戶推薦個性化的內(nèi)容。此外，didg運用digg推薦引擎向用戶推薦個性化的信息，你可以看到和你一樣digg過同樣信息的人的其他digg過的信息。該推薦系統(tǒng)也會給你推薦一些和你有相同偏好的用戶。重要的是要明白，社會化網(wǎng)絡(luò)應(yīng)用的大多數(shù)用戶不只是設(shè)法聯(lián)絡(luò)已經(jīng)認識的人，（盡管JoshuaPorter在“DesigningfortheSocialWeb”，一書中提到，用戶要做的第一件事是聯(lián)絡(luò)那些他們認識的人）還用來發(fā)現(xiàn)新的，志同道合的朋友。在社會化應(yīng)用中個性化推薦系統(tǒng)往往很受歡迎，因為它們提高了用戶的社會存在，有助于建立新的聯(lián)系。此外，大多數(shù)社交網(wǎng)站還使用戶能方便地邀請他們的朋友和傳播信息（“分享這條消息”，“共享此鏈接”等）。Facebook的“聯(lián)絡(luò)更多的朋友”功能是這一策略的典范。這背后的原因是經(jīng)典的網(wǎng)絡(luò)效應(yīng)——越多人使用facebook，facebook給每個用戶的價值就越大。這就產(chǎn)生了積極的作用，因為用戶登錄Facebook并不打算為其他用戶創(chuàng)造價值，但實際上情況是為其他用戶創(chuàng)造了價值。小型的“網(wǎng)絡(luò)貢獻積累”導(dǎo)致了一個有用的和流行的應(yīng)用 無疑造就了Facebook的今天。Facebook更進一步使得用戶可以把聯(lián)系人從其他服務(wù)（例如，從gmail）上整合進來，邀請他們自動使用其他社會化服務(wù)提供者的開放的API。沒有哪個用戶愿意花時間來手動邀請他的朋友們每