10個(gè)“以人為本”的網(wǎng)頁(yè)設(shè)計(jì)準(zhǔn)則

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

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

　　1.了解您的用戶

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

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

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

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

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

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

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

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

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

　　直接互動(dòng)的例子

　　輕按一個(gè)按鈕

　　刷卡

　　用指尖拖放項(xiàng)目

　　間接互動(dòng)的例子

　　用鼠標(biāo)指向和單擊

　　使用按鍵命令/快捷方式

　　鍵入表單字段

　　在平板電腦上繪圖

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

　　3.設(shè)定期望

　　與網(wǎng)站或應(yīng)用程序的許多交互都會(huì)產(chǎn)生后果：?jiǎn)螕舭粹o可能意味著花錢(qián)，刪除網(wǎng)站或?qū)δ棠痰纳盏案獍l(fā)表貶低的評(píng)論。每當(dāng)有后果時(shí)，都會(huì)有焦慮。

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

　　通過(guò)設(shè)計(jì)設(shè)定期望

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

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

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

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

　　編寫(xiě)清除按鈕副本

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

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

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

　　4.預(yù)期錯(cuò)誤

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

　　防止錯(cuò)誤發(fā)生

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

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

　　預(yù)測(cè)錯(cuò)誤通常比嘗試事后解決錯(cuò)誤要容易得多。這是因?yàn)樗鼈儼l(fā)生在單擊“下一步”或“提交”按鈕可以帶來(lái)令人滿意的完成感之前。

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

　　在編寫(xiě)錯(cuò)誤消息時(shí)，請(qǐng)確保它們執(zhí)行以下兩項(xiàng)操作：

　　解釋問(wèn)題。例如，“您說(shuō)您是在火星上出生的，但人類還無(wú)法到達(dá)火星?！?/p>

　　說(shuō)明如何解決。例如，“請(qǐng)?jiān)诘厍蛏线x擇出生地?！?/p>

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

　　5.快速提供反饋

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

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

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

　　6.仔細(xì)考慮元素的放置和大小

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

　　獲取目標(biāo)的時(shí)間取決于目標(biāo)的距離和大小。

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

　　將按鈕和其他“點(diǎn)擊目標(biāo)”(例如圖標(biāo)和文本鏈接)設(shè)置得足夠大，以方便查看和點(diǎn)擊。這對(duì)于排版，菜單和其他鏈接列表尤為重要，因?yàn)榭臻g不足將使人們一次又一次地點(diǎn)擊錯(cuò)誤的鏈接。

　　將最常見(jiàn)操作的按鈕放大并突出顯示。

　　將導(dǎo)航(以及其他常見(jiàn)的交互式視覺(jué)元素，如搜索欄)放在屏幕的邊緣或角落。最后一個(gè)看上去似乎違反直覺(jué)，但它之所以有效，是因?yàn)樗鼫p少了對(duì)準(zhǔn)確性的需求：用戶無(wú)需擔(dān)心過(guò)高的點(diǎn)擊目標(biāo)。

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

　　7.不要忽視標(biāo)準(zhǔn)

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

　　為什么?因?yàn)槭煜さ慕换セ蚪缑娴母倪M(jìn)版本增加了“認(rèn)知負(fù)擔(dān)”：它使人們重新考慮他們已經(jīng)學(xué)習(xí)的過(guò)程。顯然，您可以重新發(fā)明所有想要的輪子，但前提是要切實(shí)改進(jìn)設(shè)計(jì)。

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

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

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

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

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

　　大多數(shù)人在Word中只做一些事情(例如鍵入)，而其他人則可以使用它來(lái)做各種功能強(qiáng)大的事情。但是在世界各地，每個(gè)人都使用相同的UI打開(kāi)相同版本的Word，而普通的Joe(不是超級(jí)用戶)會(huì)被他們可能永遠(yuǎn)不會(huì)使用的各種選項(xiàng)所淹沒(méi)。

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

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

　　9.簡(jiǎn)化決策

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

　　有時(shí)候，我們渴望一個(gè)凈化的互聯(lián)網(wǎng)，而?？怂苟山o了我們所有人建立一個(gè)網(wǎng)絡(luò)的理由。這個(gè)想法就像最終結(jié)果一樣簡(jiǎn)單：向用戶展示的用戶界面選項(xiàng)越多，他們做出決定的難度就越大。

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

　　整體布局

　　導(dǎo)航菜單

　　定價(jià)頁(yè)面

　　文章索引

　　內(nèi)容提要

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

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

　　10.聆聽(tīng)數(shù)據(jù)

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

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

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