10個“以人為本”的網(wǎng)頁設(shè)計準則

　　網(wǎng)站不僅僅是通過鏈接連接的一組頁面。它是一個界面，一個空間，不同的事物(公司或個人的網(wǎng)站)彼此相遇，交流并相互影響。這種互動為訪問者創(chuàng)造了一種體驗，作為南京網(wǎng)站建設(shè)專家，確保體驗盡可能好是我們的工作。

　　關(guān)鍵是始終和永遠考慮您的用戶。盡管網(wǎng)頁設(shè)計是一門相對較新的學(xué)科，只要我們在設(shè)計網(wǎng)站和應(yīng)用程序時專注于用戶即可。 界面設(shè)計著重于界面功能的布局，是用戶體驗設(shè)計的子集，用戶體驗設(shè)計著眼于更大的圖景：即整個體驗，而不僅僅是界面。

　　1.了解您的用戶

　　最重要的是，您必須了解內(nèi)部和外部用戶的身份。這意味著知道您的分析應(yīng)用程序可以提取的所有人口統(tǒng)計數(shù)據(jù)。但更重要的是，這意味著知道他們的需求，以及阻礙他們實現(xiàn)目標的方式。

　　要達到同理水平，不僅需要仔細分析統(tǒng)計數(shù)據(jù)。它需要了解使用您網(wǎng)站的人。這意味著與他們面對面交談，看著他們使用您的產(chǎn)品(也許還有其他產(chǎn)品)，并向他們提出比“您如何看待這種設(shè)計?”更深入的問題。

　　他們的目標是什么?他們實現(xiàn)這些目標的方式是什么?網(wǎng)站如何幫助他們克服或應(yīng)對這些挑戰(zhàn)?

　　不要停止了解您的用戶想要什么。深入挖掘，找出他們需要什么。畢竟，欲望只是需求的產(chǎn)物。如果您可以解決用戶的根深蒂固的需求，那么您將在滿足他們最基本需求的同時滿足他們的需求。

　　您將從分析數(shù)據(jù)和與用戶交談中發(fā)現(xiàn)的見解將指導(dǎo)您做出的每個決定，從人們?nèi)绾问褂媚慕缑娴侥鷮⒃谠摻缑嬷型怀鲲@示哪些類型的內(nèi)容。

　　2.定義人們?nèi)绾问褂媚慕缑?/p>

　　在設(shè)計界面之前，您需要定義人們將如何使用它。隨著基于觸摸的設(shè)備的普及，這是您可能想到的更為關(guān)鍵的問題。看看

　　火種：該應(yīng)用程序的用戶體驗實際上是由簡單的滑動即可輕松實現(xiàn)的。

　　人們以兩種方式使用網(wǎng)站和應(yīng)用程序：直接(通過與產(chǎn)品的界面元素進行交互)和間接(通過與產(chǎn)品外部的ui元素進行交互)。

　　直接互動的例子

　　輕按一個按鈕

　　刷卡

　　用指尖拖放項目

　　間接互動的例子

　　用鼠標指向和單擊

　　使用按鍵命令/快捷方式

　　鍵入表單字段

　　在平板電腦上繪圖

　　您的用戶是誰，以及他們使用的設(shè)備應(yīng)在這里深深地影響您的決定。如果您是為老年人或其他手腳靈活性有限的人設(shè)計的，則您不希望依靠刷卡。如果您是為主要通過鍵盤與應(yīng)用程序交互的作家或編碼者設(shè)計的，則需要支持所有常見的鍵盤快捷鍵，以最大程度地減少使用鼠標的時間。

　　3.設(shè)定期望

　　與網(wǎng)站或應(yīng)用程序的許多交互都會產(chǎn)生后果：單擊按鈕可能意味著花錢，刪除網(wǎng)站或?qū)δ棠痰纳盏案獍l(fā)表貶低的評論。每當有后果時，都會有焦慮。

　　因此，請務(wù)必讓用戶知道在單擊該按鈕之后將要發(fā)生的事情。您可以通過設(shè)計和/或復(fù)制來做到這一點。

　　通過設(shè)計設(shè)定期望

　　突出顯示與所需操作對應(yīng)的按鈕

　　結(jié)合使用廣泛使用的符號(例如用于刪除按鈕的垃圾桶，用于添加內(nèi)容的加號或用于搜索的放大鏡)與復(fù)制結(jié)合使用

　　選擇具有相關(guān)含義的顏色(綠色表示“開始”按鈕，紅色表示“停止”)

　　用復(fù)制設(shè)定期望

　　編寫清除按鈕副本

　　在空狀態(tài)下提供定向/鼓勵性副本

　　發(fā)出警告并要求確認

　　對于具有不可逆轉(zhuǎn)后果的操作，例如永久刪除某項，最好問人們是否確定。

　　4.預(yù)期錯誤

　　人們會犯錯誤，但他們(永遠)不必承受后果。有兩種方法可以減少人為錯誤的影響：

　　防止錯誤發(fā)生

　　提供在它們發(fā)生后修復(fù)它們的方法

　　您會在電子商務(wù)和表單設(shè)計中看到很多防止錯誤的技術(shù)。在填寫所有字段之前，按鈕將保持不活動狀態(tài)。表單檢測到電子郵件地址輸入不正確。彈出窗口會詢問您是否真的要放棄購物車。

　　預(yù)測錯誤通常比嘗試事后解決錯誤要容易得多。這是因為它們發(fā)生在單擊“下一步”或“提交”按鈕可以帶來令人滿意的完成感之前。

　　也就是說，有時您只需要讓事故發(fā)生即可。那是真正的詳細錯誤消息出現(xiàn)的時候。

　　在編寫錯誤消息時，請確保它們執(zhí)行以下兩項操作：

　　解釋問題。例如，“您說您是在火星上出生的，但人類還無法到達火星?！?/p>

　　說明如何解決。例如，“請在地球上選擇出生地。”

　　請注意，對于非錯誤情況，您可以從同一本書中摘錄。例如，如果我刪除了某些內(nèi)容，但可以還原它，請告知我，例如“您始終可以通過移至回收站并單擊還原刪除的項目。”

　　5.快速提供反饋

　　在現(xiàn)實世界中，環(huán)境為我們提供反饋。我們說話，而其他人則回應(yīng)(通常)。我們抓撓貓，貓會發(fā)出嘶嘶聲或嘶嘶聲(取決于貓的喜怒無常以及貓抓撓時的吸吮程度)。

　　通常，網(wǎng)站無法提供太多回報，這使我們想知道是否應(yīng)該重新加載頁面，或者只是將其彈出最近的可用窗口。

　　所以如果加載過慢請?zhí)峁┘虞d動畫。當我點擊該按鈕時，使其彈出提示用戶，但不要過多。如果頁面將在5秒鐘內(nèi)加載，請不要顯示進度條，因為它實際上會使加載時間看起來更長。相反，請使用不暗示進度的可視化效果，例如Mac臭名昭著的“死亡風(fēng)車”。但這不是。如果確實在網(wǎng)站上使用進度條，請考慮嘗試一些視覺技巧以使加載看起來更快。

　　6.仔細考慮元素的放置和大小

　　菲茨定律是人機交互(HCI)的基本原理，它指出：

　　獲取目標的時間取決于目標的距離和大小。

　　換句話說：物體越近和/或越大，將光標(或手指)放在上面的速度就越快。顯然，這對交互和用戶界面設(shè)計技術(shù)具有各種含義，但是最重要的三個是：

　　將按鈕和其他“點擊目標”(例如圖標和文本鏈接)設(shè)置得足夠大，以方便查看和點擊。這對于排版，菜單和其他鏈接列表尤為重要，因為空間不足將使人們一次又一次地點擊錯誤的鏈接。

　　將最常見操作的按鈕放大并突出顯示。

　　將導(dǎo)航(以及其他常見的交互式視覺元素，如搜索欄)放在屏幕的邊緣或角落。最后一個看上去似乎違反直覺，但它之所以有效，是因為它減少了對準確性的需求：用戶無需擔(dān)心過高的點擊目標。

　　在考慮元素放置和大小時，請始終牢記交互模型。如果您的網(wǎng)站需要水平滾動而不是垂直滾動，則需要考慮在何處以及如何引導(dǎo)用戶使用這種異常的交互類型。

　　7.不要忽視標準

　　作為具有高度創(chuàng)造力的網(wǎng)站設(shè)計，設(shè)計師傾向于喜歡重塑事物，但這并不總是最好的主意。

　　為什么?因為熟悉的交互或界面的改進版本增加了“認知負擔(dān)”：它使人們重新考慮他們已經(jīng)學(xué)習(xí)的過程。顯然，您可以重新發(fā)明所有想要的輪子，但前提是要切實改進設(shè)計。

　　此經(jīng)驗法則解釋了為什么谷歌文檔的菜單欄幾乎具有與Microsoft Word的相同。

　　8.使您的界面易于學(xué)習(xí)

　　說到簡單性，人們經(jīng)常引用哈佛心理學(xué)家喬治·米勒(George Miller)發(fā)表的一篇論文，題為“神奇的數(shù)字7，正負2：我們處理信息能力的某些限制。”該文章建議人們只能容納5到9事物在其短期記憶中具有任何可靠性。米勒本人稱這是一個巧合，但這似乎并沒有阻止任何人引用他。

　　也就是說，事情越簡單，在短期內(nèi)記住起來就越容易。因此，只要有可能，就限制一個人有效地使用您的界面需要記住的事物數(shù)量。您可以通過對信息進行分塊來簡化此過程，即將其分成可消化的小塊。

　　這個想法與Tesler的“復(fù)雜性守恒定律”相吻合，該定律指出UI設(shè)計人員應(yīng)使其界面盡可能簡單。這可能意味著只要有可能，就可以在簡化的界面后掩蓋應(yīng)用程序的復(fù)雜性。Microsoft Word是產(chǎn)品不遵守該法律的流行示例。

　　大多數(shù)人在Word中只做一些事情(例如鍵入)，而其他人則可以使用它來做各種功能強大的事情。但是在世界各地，每個人都使用相同的UI打開相同版本的Word，而普通的Joe(不是超級用戶)會被他們可能永遠不會使用的各種選項所淹沒。

　　這導(dǎo)致了一個稱為漸進公開的概念，其中高級功能隱藏在輔助接口上。您經(jīng)常會在網(wǎng)站的首頁上看到此信息，其中短篇幅的副本介紹了產(chǎn)品或功能，然后鏈接到用戶可以了解更多信息的頁面。(這也是移動設(shè)計的最佳實踐，在該設(shè)計中，強大的導(dǎo)航始終是一個挑戰(zhàn)。)

　　專家提示：避免在鏈接和按鈕中使用“了解更多”以及類似的非特定文本。為什么?因為它不會告訴用戶他們將“了解更多”的知識。通常，人們只是掃描頁面以尋找將他們帶到想要去的地方的鏈接，而“學(xué)習(xí)更多”(重復(fù)15次)無濟于事。對于屏幕閱讀器的用戶來說尤其如此。

　　9.簡化決策

　　太多的廣告折磨著我們：“橫幅廣告”突然改變?yōu)槿翉V告彈出，迫使我們聚焦廣告。視頻插頁式廣告將我們擋在了頁面上，迫使我們觀看。

　　有時候，我們渴望一個凈化的互聯(lián)網(wǎng)，而希克斯定律給了我們所有人建立一個網(wǎng)絡(luò)的理由。這個想法就像最終結(jié)果一樣簡單：向用戶展示的用戶界面選項越多，他們做出決定的難度就越大。

　　這幾乎影響了我們構(gòu)建的所有內(nèi)容：

　　整體布局

　　導(dǎo)航菜單

　　定價頁面

　　文章索引

　　內(nèi)容提要

　　我們進行的設(shè)計越簡單，用戶做出我們希望他們做出的決定的速度就越容易。這就是為什么登陸頁面只應(yīng)號召采取行動的原因。

　　專家提示：有時候，您實際上確實希望用戶放慢腳步并考慮他們的選擇。這就是為什么Pinterest，Dribbble的平鋪設(shè)計效果不錯的原因。畢竟，您的選項越多，找到適合您的選項的可能性就越大。

　　10.聆聽數(shù)據(jù)

　　我們都希望我們的設(shè)計純粹是根據(jù)其藝術(shù)價值進行評估，但現(xiàn)實是，優(yōu)化設(shè)計以實現(xiàn)其目標同樣重要。盡管用戶研究和測試在指導(dǎo)設(shè)計決策以實現(xiàn)站點目標方面非常有用，但啟動后收集的數(shù)據(jù)仍然非常寶貴。

　　因此，請為您的網(wǎng)站定期進行分析。這里有很多不同的分析工具，但我們建議根據(jù)項目類型使用百度統(tǒng)計或友盟統(tǒng)計。

　　友盟專注于事件，因此它根據(jù)訪問者在您的網(wǎng)站上執(zhí)行的操作來收集數(shù)據(jù)，而百度統(tǒng)計具有更多的行為習(xí)慣，可以為您提供會話時間，流量來源等。盡管這兩種工具都可以提供兩種形式的數(shù)據(jù)，但它們的確注重不同方面，因此請選擇最適合您的需求。