久久久久久久av_日韩在线中文_看一级毛片视频_日本精品二区_成人深夜福利视频_武道仙尊动漫在线观看

10個提高網(wǎng)站可用性的經(jīng)驗(yàn)指南

   一、善用人物配圖,使用戶專注于你想呈現(xiàn)的

  當(dāng)進(jìn)入你的網(wǎng)站,我們會本能地關(guān)注網(wǎng)站上人物圖片中的臉和眼睛,這倒是為我們提供了一個想法,是不是可以用人物配圖吸引小伙伴的注意力呢?當(dāng)然,但這僅是第一步,我們還可以這樣做,你瞧,是不是大不相同!(見下圖)

  這是第一步:

10個提高網(wǎng)站可用性的經(jīng)驗(yàn)指南 三聯(lián)

  「根據(jù)眼球追蹤的研究,我們先會關(guān)注這個直望著我們的小萌孩」

20090316 ppjuax3s371pecmbt9cuakwanh You look where they look

  「現(xiàn)在,小萌孩是仰望著右邊文字的,與此同時,你是不是也把注意力轉(zhuǎn)移到右邊的內(nèi)容呢?」

  這里是原始的研究報(bào)告 → usableworld.com,實(shí)踐證明,如果其他人往某個方向望,那么人們也會跟著望同一個方向(參照腦筋急轉(zhuǎn)彎:大街上有,有一個人仰著頭站著。旁邊的人以為天空中有什么好看的東西,都跟著往天上看,可天空中什么都沒有。你猜那人怎么說?答案附最后..)基于這個特點(diǎn),我們可以利用人物配圖來呈現(xiàn)你想要讓用戶關(guān)注的內(nèi)容。

  二、表格的最理想位置

  一個來自UX Matters 的研究發(fā)現(xiàn),最理想的表格置放應(yīng)該是由上至下,因?yàn)槿藗兺ǔm應(yīng)垂直的表格,這樣通常易于閱讀與填寫。

  三、人們對網(wǎng)站的信任度取決于設(shè)計(jì)質(zhì)量

  第一印象很重要!栗子:

Fever

  這是一個展示手機(jī)應(yīng)用的網(wǎng)站,可能我們不知道這個名為”fever”的APP究竟怎么樣,可是看到一個這么干凈圓潤的用戶界面,對它的好感理應(yīng)大大提升了。

  一個有趣的研究發(fā)現(xiàn),人們判斷一本書的根據(jù)往往是它的封面…同樣的,一個網(wǎng)站的布局、一致性、配色、排版等都在影響你的用戶,他們會以此判斷你將提供的東西。因此,你要確切保證網(wǎng)站的風(fēng)格不僅要干凈漂亮,更要適合你的受眾用戶。

  除了網(wǎng)站設(shè)計(jì),其他影響用戶對你的網(wǎng)站信任度的還有:網(wǎng)站內(nèi)容的質(zhì)量、出錯的次數(shù)、更新的頻率、操作的便捷性和網(wǎng)站站住的人品。

  四、大多數(shù)用戶不會滾動瀏覽

  一份來自Jakob Nielsen的研究顯示(研究在此 → nngroup)僅僅有23%的用戶第一次進(jìn)入網(wǎng)站時會滾動瀏覽,這意味著有77%的用戶只會看那個區(qū)域(無須滾動的可見頁面),更重要的是,只有16%的用戶會在第二次訪問時繼續(xù)滾動瀏覽。該數(shù)據(jù)突顯出,將關(guān)鍵的內(nèi)容放在首頁的突出位置是多么的重要!

  不過,這并不意味著你要填滿頁面的上部區(qū)域,全部塞在那兒只會讓內(nèi)容難懂,當(dāng)用戶看到太多的信息時,他們不知道該從哪里開始看。

  讓我們看看優(yōu)秀范例:

basecamp

  basecamp 在這折疊線以上(768px高),網(wǎng)站顯示了一個巨大的截圖,標(biāo)語、價值主張、呼吁行動、客戶列表、視頻以及顯示特點(diǎn)的小圖。

  這些內(nèi)容對于網(wǎng)站主頁是至關(guān)重要的,所以我們需要提供的核心要點(diǎn)有:

  網(wǎng)站的名稱

  網(wǎng)站的價值主張(即用戶能得到什么,有什么好處,如何使用它)

  與用戶相關(guān)的導(dǎo)航設(shè)計(jì)

  然而,自那時以來,用戶習(xí)慣發(fā)生了很大的改變,最近的研究證明用戶很喜歡視差滾動的效果,他們寧愿滾動到頁面底部而不是翻頁,對很多用戶來說,最重要的信息也不須置放在首頁,所以有個好主意,我們可以利用留白空間的方式將頁面分成幾段。

  五、可以獨(dú)特,但不要難懂

  有一個獨(dú)特設(shè)計(jì)的網(wǎng)站當(dāng)然是好樣的,但當(dāng)你需要提高網(wǎng)站的可用性時,建議你最好遵守大多數(shù)網(wǎng)站采取的方式。因?yàn)楫?dāng)人們?yōu)g覽一個新網(wǎng)站時,他們會啟動自身的「經(jīng)驗(yàn)?zāi)J健谷ダ斫膺@個網(wǎng)站的使用,例如:藍(lán)色是鏈接的顏色,網(wǎng)站LOGO的位置、導(dǎo)航標(biāo)簽的下拉行為等。

Google

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

  鏈接該選什么顏色?

  顏色夠深/淺,能夠與背景色有強(qiáng)烈地對比,易于區(qū)分

  不能與文字顏色相同,所以你可以看到,沒有鏈接是黑色的

  研究證明,選用藍(lán)色的鏈接是最好的,因?yàn)闉g覽器默認(rèn)的鏈接是藍(lán)色的。選擇其他顏色也沒問題,但可能會影響用戶找到它

  六、理想的搜索框?qū)挾仁?7個英語字符

  什么是理想的搜索框?有的,Jakob Nielsen針對可用性進(jìn)行了一個搜索框?qū)挾鹊难芯浚l(fā)現(xiàn)大多數(shù)搜索框都太短了,搜索框太短帶來的問題是盡管你可以輸入足夠長的字符,但只有一部分文本字符可見,這導(dǎo)致你很難檢查或者編輯。

  這項(xiàng)研究發(fā)現(xiàn)搜索框的平均長度是18個字符,27個字符的搜索框可能會太長而很難適應(yīng),不過,它能滿足90%的搜索。記住,你可以用像素和點(diǎn)設(shè)置寬度,而不僅僅是em。小技巧,一em的寬與高對應(yīng)一個英文字符”m”,所以你可以以此來檢測搜索框是否有27個英文字符的寬度。

Google search

  谷歌的搜索框?qū)挾染b綽有余

Apple search

  相對而言,蘋果就力不從心了。

  通常來說,搜索框稍長比稍短好,因?yàn)橛脩艨梢噪S時查看、核實(shí)、修改。這條經(jīng)驗(yàn)非常簡單,但是很不幸的是經(jīng)常被人們忽略。其實(shí)在輸入?yún)^(qū)域的一點(diǎn)改進(jìn)也會帶來更好地用戶體驗(yàn)

  七、留白設(shè)計(jì)帶來更好的閱讀

  大多數(shù)設(shè)計(jì)師都知道白色空間在段落、圖片、按鈕以及其他項(xiàng)目中的價值,白色空間可以讓各個項(xiàng)目自由地呼吸。當(dāng)然,我們也可以通過空間的排列(組合、減少)來制造白色空間。對于在頁面展示內(nèi)容間的聯(lián)系、建立層級關(guān)系非常重要。

The Netsetter

  注意:文本的邊緣,段落的間隔這些細(xì)節(jié)都給閱讀帶來了舒適的感受。

  白色空間讓頁面內(nèi)容的可讀性相應(yīng)提高。一個04年的研究表明,如果在段落與左右邊緣間能夠卓越地地利用留白,至少提高20%的閱讀舒適感。讀者可以更加容易地專注于閱讀。

  八、不必進(jìn)行廣泛的用戶測試

  Jakob Nielsen的研究顯示僅需要5個用戶就可以發(fā)現(xiàn)你的網(wǎng)站85%的問題,如果有15人就能找出接近全部的問題。

User tests

  第一或第二個用戶會發(fā)現(xiàn)最大的問題,其他人會確認(rèn)這些問題并且發(fā)現(xiàn)其他小問題,只有2個用戶能找到你網(wǎng)站50%的問題,這意味著其實(shí)你不需花很多錢去得到一個好的結(jié)果。當(dāng)你開始測試時,你已經(jīng)有巨大的收獲了。任何小小的測試都比沒有好

  九、有多少信息,就有多少青睞。

  大多數(shù)介紹產(chǎn)品的頁面總是缺少足夠多的信息,有些僅僅能讓用戶掃一眼。這是個必須正視的問題,因?yàn)楫a(chǎn)品的信息將幫助人們忖度購買的決定。在可用性的研究中,貧乏的產(chǎn)品信息這個失敗的案例占據(jù)了8%甚至10%的網(wǎng)站。

iPod marketing page

  Apple提供了詳細(xì)的產(chǎn)品介紹頁面,包括產(chǎn)品特點(diǎn)及規(guī)格等。請注意,不要讓一點(diǎn)難懂的技術(shù)細(xì)節(jié)停留在介紹頁面,給消費(fèi)者看的懂的。

  提供關(guān)鍵的信息,而不要臃腫,讓你的文案易于吸收。通過段落間隔和副標(biāo)題使介紹能夠一掃明了,給你的添加足夠的圖片,且不要使用行話,否則你的用戶看不懂。

  十、大多數(shù)用戶會無視廣告

  Jakob Nielsen的研究表明大多數(shù)用戶會直接無視廣告的存在,如果他們在全神貫注地閱讀文章,他們不會被廣告轉(zhuǎn)移注意力。

  這條經(jīng)驗(yàn)要告訴你的是,人們會無視廣告,并且與任何看起來與廣告類似的東西,即使它不是廣告。一些顏色風(fēng)格強(qiáng)烈的導(dǎo)航會讓他們誤以為是廣告,所以請仔細(xì)注意這個經(jīng)驗(yàn)。

flashden

  在左側(cè)的方塊圖其實(shí)不是廣告,但是看起來與廣告很類似,所以可能會被一些用戶誤解。

  所以,廣告看起來最好能像文章,那樣人們才會去點(diǎn)擊它,也能給你帶來更多的收入,但無疑這將會損失你的用戶信任度,當(dāng)他們點(diǎn)擊廣告時他們以為會是文章,結(jié)果被你欺騙。因此當(dāng)你決定這樣做之前,考慮下這個交易:短期的利益與長期的信任。

  干貨福利:

  在這些年,我們的雜志組為了確定最佳地設(shè)計(jì)方案,研究了很多案例。到目前為止,我們已經(jīng)發(fā)現(xiàn)了很多有趣的模式,是的,它們可以作為你的下個設(shè)計(jì)項(xiàng)目的指導(dǎo)方針,希望這些標(biāo)準(zhǔn)能予你方便。

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

  1.5通常被認(rèn)為是最經(jīng)典的排字方式,我們的研究決心為這個方式點(diǎn)個贊。幾乎沒有網(wǎng)站使用低于它的,那些高于這個標(biāo)準(zhǔn)的也會越來越少,特別是當(dāng)你看完這篇文章后。

  行長(px)÷行高(px)=27.8

  行的平均長度是538.64px(排除邊緣),對于大多數(shù)還采用12px到13px大小字體的網(wǎng)站來說,這是最完美的安排。

  最佳的字/行是55——75

  根據(jù)經(jīng)典的排版書籍,最佳的字/行應(yīng)該是55到75,但現(xiàn)在流行的75——85,童鞋們自由斟酌(英文字符)

  注冊頁面通常很簡單,是為了避免人們分心

【網(wǎng)站聲明】本站除付費(fèi)源碼經(jīng)過測試外,其他素材未做測試,不保證完整性,網(wǎng)站上部分源碼僅限學(xué)習(xí)交流,請勿用于商業(yè)用途。如損害你的權(quán)益請聯(lián)系客服QQ:2655101040 給予處理,謝謝支持。

相關(guān)文檔推薦

這篇文章給大家詳細(xì)介紹了HTML頁面跳轉(zhuǎn)及參數(shù)傳遞問題,需要的朋友參考下吧
這篇文章主要介紹了純css實(shí)現(xiàn)照片墻3D效果的示例代碼,可以實(shí)現(xiàn)鼠標(biāo)經(jīng)過圖片實(shí)現(xiàn)改變,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本篇文章主要介紹了純 Css 繪制扇形的方法示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
本篇文章主要介紹了一份純CSS loading效果代碼示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
這篇文章主要介紹了css 實(shí)現(xiàn)文字過長自動隱藏功能,需要的朋友可以參考下
本篇文章主要介紹了詳解CSS3 rem(設(shè)置字體大小) 教程,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
主站蜘蛛池模板: 国产在线二区 | 欧美在线网站 | 成人国产精品久久久 | 欧美国产视频 | 久久久国产一区 | 国产成人精品一区二区在线 | 999久久久| 午夜影院 | 久久中文一区二区 | 亚洲精品电影网在线观看 | 久久999 | 一区二区三区精品视频 | 国产激情自拍视频 | 成人精品毛片国产亚洲av十九禁 | 欧美日韩综合精品 | 免费国产视频在线观看 | a免费视频 | 国产精品久久久久久久久久久免费看 | 中国大陆高清aⅴ毛片 | 日日摸日日碰夜夜爽亚洲精品蜜乳 | 久久99精品久久久久久狂牛 | 夜夜草| 午夜伊人| 精品国产91乱码一区二区三区 | 在线观看国产wwwa级羞羞视频 | 毛片99| 国产色 | 黄色大全免费看 | 一区二区三区日韩精品 | 成人久久久久 | 国产精品国产亚洲精品看不卡15 | 午夜成人在线视频 | av在线电影网 | 欧美一区免费 | 亚洲精品久久久蜜桃 | 日韩视频一区在线观看 | 99爱视频 | 免费中文字幕 | 亚洲精品在线免费 | 欧美日韩国产一区二区三区 | 毛片1|