網(wǎng)站建設(shè)中10個(gè)進(jìn)步網(wǎng)站可用性的經(jīng)歷攻略

我想每個(gè)人都會(huì)擁護(hù)，網(wǎng)站的可用性是它能否受歡迎的一個(gè)重要方面，不管你進(jìn)行的是公司網(wǎng)站、在線(xiàn)商鋪仍是其他，讓你的界面變得簡(jiǎn)略控制，運(yùn)用時(shí)令人舒暢是要害，近幾年現(xiàn)已有許多針對(duì)網(wǎng)站界面優(yōu)化的研討，而且這些研討的作用關(guān)于進(jìn)步網(wǎng)站可用性對(duì)錯(cuò)常有價(jià)值的�，F(xiàn)在這里有10個(gè)超有用的經(jīng)歷共享，相信我，這些主張會(huì)極大地進(jìn)步你那個(gè)網(wǎng)站的用戶(hù)體會(huì)，讓用戶(hù)愛(ài)上你的網(wǎng)站!

這是一篇09年的老文章咯，可是這些技巧和經(jīng)歷并沒(méi)有過(guò)期，所以我們?nèi)匀环�譯出來(lái)，引薦您細(xì)心閱覽。

一、善用人物配圖，運(yùn)用戶(hù)專(zhuān)心于你想出現(xiàn)的

當(dāng)進(jìn)入你的網(wǎng)站，我們會(huì)天性地重視網(wǎng)站上人物圖片中的臉和眼睛，這卻是為我們供給了一個(gè)主意，是不是能夠用人物配圖吸引小伙伴的留意力呢?當(dāng)然，但這僅是榜首步，我們還能夠這樣做，你瞧，是不是大不相同!

這是榜首步：

10個(gè)進(jìn)步網(wǎng)站可用性的經(jīng)歷攻略

「依據(jù)眼球追尋的研討，我們先會(huì)重視這個(gè)直望著我們的小萌孩」

10個(gè)進(jìn)步網(wǎng)站可用性的經(jīng)歷攻略

「現(xiàn)在，小萌孩是仰望著右邊文字的，與此同時(shí)，你是不是也把留意力搬運(yùn)到右邊的內(nèi)容呢?」

這里是原始的研討報(bào)告 → usableworld.com，實(shí)踐證明，如果其他人往某個(gè)方向望，那么人們也會(huì)跟著望同一個(gè)方向(參照腦筋急轉(zhuǎn)彎：大街上有，有一個(gè)人仰著頭站著。周?chē)�的人認(rèn)為天空中有什么美觀的東西，都跟著往天上看，可天空中什么都沒(méi)有。你猜那人怎么說(shuō)?答案附最后..)依據(jù)這個(gè)特色，我們能夠運(yùn)用人物配圖來(lái)出現(xiàn)你想要讓用戶(hù)重視的內(nèi)容。

二、表格的最抱負(fù)方位

一個(gè)來(lái)自UX Matters 的研討發(fā)現(xiàn)，最抱負(fù)的表格置放應(yīng)該是由上至下，由于人們一般會(huì)習(xí)氣筆直的表格，這樣一般易于閱覽與填寫(xiě)。

三、人們對(duì)網(wǎng)站的信賴(lài)度取決于規(guī)劃質(zhì)量

榜首印象很重要!栗子：

10個(gè)進(jìn)步網(wǎng)站可用性的經(jīng)歷攻略

這是一個(gè)展現(xiàn)手機(jī)運(yùn)用的網(wǎng)站，可能我們不知道這個(gè)名為”fever”的APP終究怎么樣，可是看到一個(gè)這么潔凈圓潤(rùn)的用戶(hù)界面，對(duì)它的好感理應(yīng)大大提升了。

一個(gè)風(fēng)趣的研討發(fā)現(xiàn)，人們判別一本書(shū)的依據(jù)往往是它的封面…相同的，一個(gè)網(wǎng)站的布局、一致性、配色、排版等都在影響你的用戶(hù)，他們會(huì)以此判別你將供給的東西。因而，你要切當(dāng)保證網(wǎng)站的風(fēng)格不僅要潔凈美麗，更要合適你的受眾用戶(hù)。

除了網(wǎng)站規(guī)劃，其他影響用戶(hù)對(duì)你的網(wǎng)站信賴(lài)度的還有：網(wǎng)站內(nèi)容的質(zhì)量、犯錯(cuò)的次數(shù)、更新的頻率、操作的快捷性和網(wǎng)站站住的人品。

四、大多數(shù)用戶(hù)不會(huì)翻滾閱覽

一份來(lái)自Jakob Nielsen的研討顯現(xiàn)(研討在此 → nngroup)僅僅有23%的用戶(hù)榜首次進(jìn)入網(wǎng)站時(shí)會(huì)翻滾閱覽，這意味著有77%的用戶(hù)只會(huì)看那個(gè)區(qū)域(無(wú)須翻滾的可見(jiàn)頁(yè)面)，更重要的是，只要16%的用戶(hù)會(huì)在第2次訪(fǎng)問(wèn)時(shí)繼續(xù)翻滾閱覽。該數(shù)據(jù)突顯出，將要害的內(nèi)容放在主頁(yè)的突出方位是多么的重要!

不過(guò)，這并不意味著你要填滿(mǎn)頁(yè)面的上部區(qū)域，悉數(shù)塞在那兒只會(huì)讓內(nèi)容難明，當(dāng)用戶(hù)看到太多的信息時(shí)，他們不知道該從哪里開(kāi)端看。

讓我們看看優(yōu)異典范：

10個(gè)進(jìn)步網(wǎng)站可用性的經(jīng)歷攻略

basecamp 在這折疊線(xiàn)以上(768px高)，網(wǎng)站顯現(xiàn)了一個(gè)巨大的截圖，標(biāo)語(yǔ)、價(jià)值主張、呼吁舉動(dòng)、客戶(hù)列表、視頻以及顯現(xiàn)特色的小圖。

這些內(nèi)容關(guān)于網(wǎng)站主頁(yè)是至關(guān)重要的，所以我們需求供給的中心要害有：

網(wǎng)站的稱(chēng)號(hào)

網(wǎng)站的價(jià)值主張(即用戶(hù)能得到什么，有什么優(yōu)點(diǎn)，如何運(yùn)用它)

與用戶(hù)相關(guān)的導(dǎo)航規(guī)劃

然而，自那時(shí)以來(lái)，用戶(hù)習(xí)氣發(fā)生了很大的改動(dòng)，最近的研討證明用戶(hù)很喜歡視差翻滾的作用，他們寧愿翻滾到頁(yè)面底部而不是翻頁(yè)，對(duì)許多用戶(hù)來(lái)說(shuō)，最重要的信息也不須置放在主頁(yè)，所以有個(gè)好主意，我們能夠運(yùn)用留白空間的方法將頁(yè)面分成幾段。

五、能夠共同，但不要難明

有一個(gè)共同規(guī)劃的網(wǎng)站當(dāng)然是好樣的，但當(dāng)你需求進(jìn)步網(wǎng)站的可用性時(shí)，主張你最好恪守大多數(shù)網(wǎng)站采納的方法。由于當(dāng)人們閱覽一個(gè)新網(wǎng)站時(shí)，他們會(huì)發(fā)動(dòng)自身的「經(jīng)歷形式」去了解這個(gè)網(wǎng)站的運(yùn)用，例如：藍(lán)色是鏈接的色彩，網(wǎng)站LOGO的方位、導(dǎo)航標(biāo)簽的下拉行為等。

10個(gè)進(jìn)步網(wǎng)站可用性的經(jīng)歷攻略

谷歌之所以一切的鏈接都是藍(lán)色是由緣由的，這個(gè)色彩合適大多數(shù)用戶(hù)，也便于辨認(rèn)。

鏈接該選什么色彩?

色彩夠深/淺，能夠與背景色有激烈地比照，易于區(qū)別

不能與文字色彩相同，所以你能夠看到，沒(méi)有鏈接是黑色的

研討證明，選用藍(lán)色的鏈接是最好的，由于閱覽器默認(rèn)的鏈接是藍(lán)色的。挑選其他色彩也沒(méi)問(wèn)題，但可能會(huì)影響用戶(hù)找到它

六、抱負(fù)的查找框?qū)挾仁?7個(gè)英語(yǔ)字符

什么是抱負(fù)的查找框?有的，Jakob Nielsen針對(duì)可用性進(jìn)行了一個(gè)查找框?qū)挾鹊难杏�，發(fā)現(xiàn)大多數(shù)查找框都太短了，查找框太短帶來(lái)的問(wèn)題是雖然你能夠輸入滿(mǎn)意長(zhǎng)的字符，但只要一部分文本字符可見(jiàn)，這導(dǎo)致你很難檢查或許修改。

這項(xiàng)研討發(fā)現(xiàn)查找框的均勻長(zhǎng)度是18個(gè)字符，27個(gè)字符的查找框可能會(huì)太長(zhǎng)而很難習(xí)氣，不過(guò)，它能滿(mǎn)意90%的查找。記住，你能夠用像素和點(diǎn)設(shè)置寬度，而不僅僅是em。小技巧，一em的寬與高對(duì)應(yīng)一個(gè)英文字符”m”，所以你能夠以此來(lái)檢測(cè)查找框是否有27個(gè)英文字符的寬度。

10個(gè)進(jìn)步網(wǎng)站可用性的經(jīng)歷攻略

谷歌的查找框?qū)挾茸浇笠?jiàn)肘

10個(gè)進(jìn)步網(wǎng)站可用性的經(jīng)歷攻略

相對(duì)而言，蘋(píng)果就無(wú)能為力了。

一般來(lái)說(shuō)，查找框稍長(zhǎng)比稍短好，由于用戶(hù)能夠隨時(shí)檢查、核實(shí)、修改。這條經(jīng)歷十分簡(jiǎn)略，可是很不幸的是常常被人們疏忽。其實(shí)在輸入?yún)^(qū)域的一點(diǎn)改善也會(huì)帶來(lái)更好地用戶(hù)體會(huì)

七、留白規(guī)劃帶來(lái)更好的閱覽

大多數(shù)規(guī)劃師都知道白色空間在階段、圖片、按鈕以及其他項(xiàng)目中的價(jià)值，白色空間能夠讓各個(gè)項(xiàng)目自在地呼吸。當(dāng)然，我們也能夠經(jīng)過(guò)空間的擺放(組合、減少)來(lái)制作白色空間。關(guān)于在頁(yè)面展現(xiàn)內(nèi)容間的聯(lián)絡(luò)、樹(shù)立層級(jí)聯(lián)系十分重要。

10個(gè)進(jìn)步網(wǎng)站可用性的經(jīng)歷攻略

留意：文本的邊際，階段的距離這些細(xì)節(jié)都給閱覽帶來(lái)了舒適的感受。

白色空間讓頁(yè)面內(nèi)容的可讀性相應(yīng)進(jìn)步。一個(gè)04年的研討表明，如果在階段與左右邊際間能夠杰出地地運(yùn)用留白，至少進(jìn)步20%的閱覽舒適感。讀者能夠愈加簡(jiǎn)略地專(zhuān)心于閱覽。

八、不用進(jìn)行廣泛的用戶(hù)測(cè)驗(yàn)

Jakob Nielsen的研討顯現(xiàn)僅需求5個(gè)用戶(hù)就能夠發(fā)現(xiàn)你的網(wǎng)站85%的問(wèn)題，如果有15人就能找出挨近悉數(shù)的問(wèn)題。

10個(gè)進(jìn)步網(wǎng)站可用性的經(jīng)歷攻略

榜首或第二個(gè)用戶(hù)會(huì)發(fā)現(xiàn)最大的問(wèn)題，其他人會(huì)承認(rèn)這些問(wèn)題而且發(fā)現(xiàn)其他小問(wèn)題，只要2個(gè)用戶(hù)能找到你網(wǎng)站50%的問(wèn)題，這意味著其實(shí)你不需花許多錢(qián)去得到一個(gè)好的成果。當(dāng)你開(kāi)端測(cè)驗(yàn)時(shí)，你現(xiàn)已有巨大的收獲了。任何小小的測(cè)驗(yàn)都比沒(méi)有好

九、有多少信息，就有多少喜愛(ài)。

大多數(shù)介紹產(chǎn)品的頁(yè)面總是缺少滿(mǎn)意多的信息，有些僅僅能讓用戶(hù)掃一眼。這是個(gè)有必要正視的問(wèn)題，由于產(chǎn)品的信息將協(xié)助人們忖度購(gòu)買(mǎi)的決議。在可用性的研討中，匱乏的產(chǎn)品信息這個(gè)失利的事例占有了8%甚至10%的網(wǎng)站。

10個(gè)進(jìn)步網(wǎng)站可用性的經(jīng)歷攻略

Apple供給了具體的產(chǎn)品介紹頁(yè)面，包含產(chǎn)品特色及規(guī)范等。請(qǐng)留意，不要讓一點(diǎn)難明的技術(shù)細(xì)節(jié)停留在介紹頁(yè)面，給消費(fèi)者看的懂的。

參照：如何寫(xiě)新聞?lì)惖能浳?/p>

供給要害的信息，而不要臃腫，讓你的案牘易于吸收。經(jīng)過(guò)階段距離和副標(biāo)題使介紹能夠一掃明晰，給你的增加滿(mǎn)意的圖片，且不要運(yùn)用行話(huà)，不然你的用戶(hù)看不懂。

十、大多數(shù)用戶(hù)會(huì)無(wú)視廣告

Jakob Nielsen的研討表明大多數(shù)用戶(hù)會(huì)直接無(wú)視廣告的存在，如果他們?cè)诰劬珪?huì)神地閱覽文章，他們不會(huì)被廣告搬運(yùn)留意力。

這條經(jīng)歷要通知你的是，人們會(huì)無(wú)視廣告，而且與任何看起來(lái)與廣告相似的東西，即便它不是廣告。一些色彩風(fēng)格激烈的導(dǎo)航會(huì)讓他們誤認(rèn)為是廣告，所以請(qǐng)細(xì)心留意這個(gè)經(jīng)歷。

10個(gè)進(jìn)步網(wǎng)站可用性的經(jīng)歷攻略

在左邊的方塊圖其實(shí)不是廣告，可是看起來(lái)與廣告很相似，所以可能會(huì)被一些用戶(hù)誤解。

所以，廣告看起來(lái)最好能像文章，那樣人們才會(huì)去點(diǎn)擊它，也能給你帶來(lái)更多的收入，但無(wú)疑這將會(huì)損失你的用戶(hù)信賴(lài)度，當(dāng)他們點(diǎn)擊廣告時(shí)他們認(rèn)為會(huì)是文章，成果被你詐騙。因而當(dāng)你決議這樣做之前，考慮下這個(gè)買(mǎi)賣(mài)：短期的利益與長(zhǎng)時(shí)間的信賴(lài)。

干貨福利：

在這些年，我們的雜志組為了確定最佳地規(guī)劃方案，研討了許多事例。到目前為止，我們現(xiàn)已發(fā)現(xiàn)了許多風(fēng)趣的形式，是的，它們能夠作為你的下個(gè)規(guī)劃項(xiàng)目的指導(dǎo)方針，希望這些規(guī)范能予你便利。

行高(px)÷ 英文字符大(px)=1.48

1.5一般被認(rèn)為是最經(jīng)典的排字方法，我們的研討決計(jì)為這個(gè)方法點(diǎn)個(gè)贊。幾乎沒(méi)有網(wǎng)站運(yùn)用低于它的，那些高于這個(gè)規(guī)范的也會(huì)越來(lái)越少，特別是當(dāng)你看完這篇文章后。

行長(zhǎng)(px)÷行高(px)=27.8

行的均勻長(zhǎng)度是538.64px(掃除邊際)，關(guān)于大多數(shù)還選用12px到13px巨細(xì)字體的網(wǎng)站來(lái)說(shuō)，這是最完美的組織。

最佳的字/行是55——75

依據(jù)經(jīng)典的排版書(shū)本，最佳的字/行應(yīng)該是55到75，但現(xiàn)在盛行的75——85，童鞋們自在酌量(英文字符)

注冊(cè)頁(yè)面一般很簡(jiǎn)略，是為了防止人們分神