做爰三级在线播放_又大又粗又猛又舒服又爽_暖暖www免费高清视频最新期_午夜精品aaa国产福利

提高網站可用性的經驗指南

2014-2-20    藍藍設計的小編

轉載藍藍設計(   91whvog3.cn  )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供有效的   BS界面設計 、 cs界面設計 、  ipad界面設計   、  包裝設計 、  圖標定制 、  用戶體驗 、交互設計、   網站建設 平面設計服務

來源:http://www.uisdc.com/100-things-you-should-know-about-design

如果您想訂閱本博客內容,每天自動發到您的郵箱中,   請點這里 

我想每個人都會贊成,網站設計的可用性是它能否受歡迎的一個重要方面,無論你進行的是公司網站、在線商店還是其他,讓你的界面變得容易操控,使用時令人舒服是關鍵,近幾年已經有很多針對網站界面設計優化的研究,而且這些研究的成果對于提高網站可用性是非常有價值的。現在這里有10個超實用的經驗分享,相信藍藍設計,這些建議會極大地提高你那個網站的用戶體驗,讓用戶愛上你的網站界面設計! 

一、善用人物配圖,使用戶專注于你想呈現的

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

這是第一步:

20090316 dmwcj8wqr8egihdihssm4xm517 You look where they look

「根據眼球追蹤的研究,我們先會關注這個直望著我們的小萌孩」


20090316 ppjuax3s371pecmbt9cuakwanh You look where they look

「現在,小萌孩是仰望著右邊文字的,與此同時,你是不是也把注意力轉移到右邊的內容呢?」

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

二、表格的最理想位置

一個來自UX Matters 的研究發現,最理想的表格置放應該是由上至下,因為人們通常會適應垂直的表格,這樣通常易于閱讀與填寫。

三、人們對網站的信任度取決于設計質量

第一印象很重要!栗子:

Fever

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

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

除了網站設計,其他影響用戶對你的網站信任度的還有:網站內容的質量、出錯的次數、更新的頻率、操作的便捷性和網站站住的人品。

四、大多數用戶不會滾動瀏覽

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

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

讓我們看看優秀范例:

basecamp

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

這些內容對于網站主頁是至關重要的,所以我們需要提供的核心要點有:

  • 網站的名稱
  • 網站的價值主張(即用戶能得到什么,有什么好處,如何使用它)
  • 與用戶相關的導航設計

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

五、可以獨特,但不要難懂

有一個獨特設計的網站當然是好樣的,但當你需要提高網站的可用性時,建議你最好遵守大多數網站采取的方式。因為當人們瀏覽一個新網站時,他們會啟動自身的「經驗模式」去理解這個網站的使用,例如:藍色是鏈接的顏色,網站LOGO的位置、導航標簽的下拉行為等。

Google

谷歌之所以所有的鏈接都是藍色是由緣由的,這個顏色適合大多數用戶,也便于辨認。

鏈接該選什么顏色?

  • 顏色夠深/淺,能夠與背景色有強烈地對比,易于區分
  • 不能與文字顏色相同,所以你可以看到,沒有鏈接是黑色的
  • 研究證明,選用藍色的鏈接是最好的,因為瀏覽器默認的鏈接是藍色的。選擇其他顏色也沒問題,但可能會影響用戶找到它

六、理想的搜索框寬度是27個英語字符

什么是理想的搜索框?有的,Jakob Nielsen針對可用性進行了一個搜索框寬度的研究,發現大多數搜索框都太短了,搜索框太短帶來的問題是盡管你可以輸入足夠長的字符,但只有一部分文本字符可見,這導致你很難檢查或者編輯。

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

Google search

谷歌的搜索框寬度綽綽有余


Apple search

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

通常來說,搜索框稍長比稍短好,因為用戶可以隨時查看、核實、修改。這條經驗非常簡單,但是很不幸的是經常被人們忽略。其實在輸入區域的一點改進也會帶來更好地用戶體驗

七、留白設計帶來更好的閱讀

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

參照:我們為何要在設計中重視”留白”

The Netsetter

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

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

八、不必進行廣泛的用戶測試

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

User tests

第一或第二個用戶會發現最大的問題,其他人會確認這些問題并且發現其他小問題,只有2個用戶能找到你網站50%的問題,這意味著其實你不需花很多錢去得到一個好的結果。當你開始測試時,你已經有巨大的收獲了。任何小小的測試都比沒有好

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

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

iPod marketing page

Apple提供了詳細的產品介紹頁面,包括產品特點及規格等。請注意,不要讓一點難懂的技術細節停留在介紹頁面,給消費者看的懂的。

參照:推薦!令人為之動容的互聯網文案

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

十、大多數用戶會無視廣告

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

這條經驗要告訴你的是,人們會無視廣告,并且與任何看起來與廣告類似的東西,即使它不是廣告。一些顏色風格強烈的導航會讓他們誤以為是廣告,所以請仔細注意這個經驗。

flashden

 

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

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

干貨福利:

在這些年,我們的雜志組為了確定最佳地設計方案,研究了很多案例。到目前為止,我們已經發現了很多有趣的模式,是的,它們可以作為你的下個設計項目的指導方針,希望這些標準能予你方便。

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

1.5通常被認為是最經典的排字方式,我們的研究決心為這個方式點個贊。幾乎沒有網站使用低于它的,那些高于這個標準的也會越來越少,特別是當你看完這篇文章后。

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

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

  • 最佳的字/行是55——75

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

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

日歷

鏈接

個人資料

藍藍設計的小編 http://91whvog3.cn

存檔