現在網頁設計師除了把頁面做的漂亮以外,越來越注重用戶體驗,就是要做別讓用戶思考的網頁,使網站真正做到“可用性”。望望結合幾年的工作經驗,粗談這方面的一些問題,和大家共勉!
人們如何瀏覽網頁
首先本書說明了上網的人是如何流覽網頁的,這似乎跟我們想像有很大的差距,因為我們覺得用戶會盯著每個Web Design,仔細閱讀我們精心製作的文字,領會我們頁面的組織方式,事實上大部分時間用戶看網頁就象高速公路看看板一樣,沒時間仔細閱讀,當然也不會用心思考。因而,我們必須為掃描而設計。做到這點須注意以下幾點:
1、儘量符合用戶習慣的設計,讓人接受陌生的東西需要代價,除非我們覺得這個代價是必須的。
2、在頁面把越重要的東西越突出,建立清楚的視覺層次。
3、可以點擊的地方必須突出,讓人明顯知道可以點擊。
4、把頁面劃分成明確定義的區域
5、省略多餘的文字
關於導航的設計
導航顯然是網站建設最重要的部分,如果在網站上找不到方向,人們就不會使用你的網站。現在WEB導航的習慣用法基本形成了,雖然還會繼續演化下去,但基本元素以產生:網站LOGO、網站欄目、返回主頁、搜索、實用工具或幫助。
網站LOGO,通常是頁面左上角,出現在頁面可視層級的首要位置,可以採取兩種方式:讓它成為本頁最顯眼的內容,或者讓它涵蓋頁面所有其他元素,當然網站LOGO設計的好壞對人產生心理影響就不用說了。
網站欄目,也稱導航條,站點層級結構的最頂層。導航條很多時候可以包容二級導航(下拉功能表的方式)。很多時候標籤的設計是導航採用的很好表現方式,Amazon.com幾乎把它發展到完美的狀態。用標籤的方式設計導航時要注意幾點:
1、進入網站時,有一個標籤已經選中;
2、正確繪製,啟動的標籤頁要位於其他標籤頁之前;
3、顏色區分,可以讓每個欄目使用一種不用的標籤顏色,並把這種顏色用在頁面其他導航元素上,讓它們渾然一體;
搜索功能,如果有提供搜索功能的網站,要記住一個簡單的公式:一個輸入框、一個按鈕、還有Search(搜索)兩個字,不要弄的太複雜。比如把 搜索 換成查找、快速查找、快速搜索、關鍵字搜索都會讓用戶產生思考。如果必須為搜索框提供選項(縮小搜索範圍)一定要三思,謹慎提供選項,以便以何種方式提供最為合理,還有就是要保證這些選項的確有用,否則會挫傷用戶心理 SEO。
值得注意的是,很多網站到了二級頁面以下,導航便會變了支離破碎,隨意發揮。這個問題非常普遍,以至於很難找到良好的三級導航的例子。事實上,用戶在底層頁面上花的時間通常和花在頂層頁面上的時間相同。除非我們一開始就自頂向下進行導航設計,否則以後很難添加,也很難保持一致性。這就意味著我們在討論主頁的顏色方案之前,擁有顯示網站所有潛在級別的導航的 DEMO設計非常重要。要做到這點,必須設計師和相關策劃人員緊密結合,設計師必須提前知道整個站的概貌和細節內容。
有一點,設計師常常忽略,就是記得為每個頁面加個名稱。好像每個拐角處有一個路牌一樣,隨時讓駕駛者知道在哪里,無需思考。頁面的名稱應該出現在涵蓋該頁內容的位置,要引人注目,在大多數情況下,它應該是該頁面最大的文字。
總之,一個擁有良好導航系統的網頁設計模板,一眼就能告訴用戶這些資訊:
這是什麼網站?(網站LOGO)
我在哪個網頁上?(網頁名稱)
這個站主要欄目有哪些?(導航欄目清單)
在這個層次上我有哪些選擇?(頁面導航)
我在導航系統的什麼位置?(頁面裏的“你在這裏”的指示符號)
我怎麼搜索?
關於主頁設計
首先要承認,主頁不由我們控制。因為每個人都有個一個看法,如果要使每個人都滿意,那麼就算最優秀的主頁設計也無法達到。因此設計主頁時不可避免地要做一些折衷。但有一件事情不要忘記——傳達整體形象,即一眼可以讓人感受到這個站是幹什麼的。越快越好,越清楚越好。所以當流覽者進入主頁時,我們好不費力 (幾秒鐘讓人瞭解)地告訴他四個問題:
這是什麼網站?
網站上有些什麼?
你能在這裏做什麼?
為什麼你在這裏,而不是在其別地方?
那麼如何傳達這些資訊呢:
1、口號,即靠近網站LOGO的地方。一條精煉、個性、生動的口號可以讓人立即聯想網站的內容。但也有例外,如果某個公司的品牌已達到家喻戶曉的地步,可以省略口號。
2、歡迎廣告,即對網站的簡要描述,在主頁首要的位置顯示,不需要滾動螢幕就能看到。
3、應從哪里開始?當進入一個新站後,流覽者快速掃描主頁之後,應該明白無誤地知道:
如果想搜索,可以從這裏開始。
如果想掃描,可以從這裏開始。
如果想掃描本站最精彩的內容,可以從這裏開始網上推廣。
人們如何瀏覽網頁
首先本書說明了上網的人是如何流覽網頁的,這似乎跟我們想像有很大的差距,因為我們覺得用戶會盯著每個Web Design,仔細閱讀我們精心製作的文字,領會我們頁面的組織方式,事實上大部分時間用戶看網頁就象高速公路看看板一樣,沒時間仔細閱讀,當然也不會用心思考。因而,我們必須為掃描而設計。做到這點須注意以下幾點:
1、儘量符合用戶習慣的設計,讓人接受陌生的東西需要代價,除非我們覺得這個代價是必須的。
2、在頁面把越重要的東西越突出,建立清楚的視覺層次。
3、可以點擊的地方必須突出,讓人明顯知道可以點擊。
4、把頁面劃分成明確定義的區域
5、省略多餘的文字
關於導航的設計
導航顯然是網站建設最重要的部分,如果在網站上找不到方向,人們就不會使用你的網站。現在WEB導航的習慣用法基本形成了,雖然還會繼續演化下去,但基本元素以產生:網站LOGO、網站欄目、返回主頁、搜索、實用工具或幫助。
網站LOGO,通常是頁面左上角,出現在頁面可視層級的首要位置,可以採取兩種方式:讓它成為本頁最顯眼的內容,或者讓它涵蓋頁面所有其他元素,當然網站LOGO設計的好壞對人產生心理影響就不用說了。
網站欄目,也稱導航條,站點層級結構的最頂層。導航條很多時候可以包容二級導航(下拉功能表的方式)。很多時候標籤的設計是導航採用的很好表現方式,Amazon.com幾乎把它發展到完美的狀態。用標籤的方式設計導航時要注意幾點:
1、進入網站時,有一個標籤已經選中;
2、正確繪製,啟動的標籤頁要位於其他標籤頁之前;
3、顏色區分,可以讓每個欄目使用一種不用的標籤顏色,並把這種顏色用在頁面其他導航元素上,讓它們渾然一體;
搜索功能,如果有提供搜索功能的網站,要記住一個簡單的公式:一個輸入框、一個按鈕、還有Search(搜索)兩個字,不要弄的太複雜。比如把 搜索 換成查找、快速查找、快速搜索、關鍵字搜索都會讓用戶產生思考。如果必須為搜索框提供選項(縮小搜索範圍)一定要三思,謹慎提供選項,以便以何種方式提供最為合理,還有就是要保證這些選項的確有用,否則會挫傷用戶心理 SEO。
值得注意的是,很多網站到了二級頁面以下,導航便會變了支離破碎,隨意發揮。這個問題非常普遍,以至於很難找到良好的三級導航的例子。事實上,用戶在底層頁面上花的時間通常和花在頂層頁面上的時間相同。除非我們一開始就自頂向下進行導航設計,否則以後很難添加,也很難保持一致性。這就意味著我們在討論主頁的顏色方案之前,擁有顯示網站所有潛在級別的導航的 DEMO設計非常重要。要做到這點,必須設計師和相關策劃人員緊密結合,設計師必須提前知道整個站的概貌和細節內容。
有一點,設計師常常忽略,就是記得為每個頁面加個名稱。好像每個拐角處有一個路牌一樣,隨時讓駕駛者知道在哪里,無需思考。頁面的名稱應該出現在涵蓋該頁內容的位置,要引人注目,在大多數情況下,它應該是該頁面最大的文字。
總之,一個擁有良好導航系統的網頁設計模板,一眼就能告訴用戶這些資訊:
這是什麼網站?(網站LOGO)
我在哪個網頁上?(網頁名稱)
這個站主要欄目有哪些?(導航欄目清單)
在這個層次上我有哪些選擇?(頁面導航)
我在導航系統的什麼位置?(頁面裏的“你在這裏”的指示符號)
我怎麼搜索?
關於主頁設計
首先要承認,主頁不由我們控制。因為每個人都有個一個看法,如果要使每個人都滿意,那麼就算最優秀的主頁設計也無法達到。因此設計主頁時不可避免地要做一些折衷。但有一件事情不要忘記——傳達整體形象,即一眼可以讓人感受到這個站是幹什麼的。越快越好,越清楚越好。所以當流覽者進入主頁時,我們好不費力 (幾秒鐘讓人瞭解)地告訴他四個問題:
這是什麼網站?
網站上有些什麼?
你能在這裏做什麼?
為什麼你在這裏,而不是在其別地方?
那麼如何傳達這些資訊呢:
1、口號,即靠近網站LOGO的地方。一條精煉、個性、生動的口號可以讓人立即聯想網站的內容。但也有例外,如果某個公司的品牌已達到家喻戶曉的地步,可以省略口號。
2、歡迎廣告,即對網站的簡要描述,在主頁首要的位置顯示,不需要滾動螢幕就能看到。
3、應從哪里開始?當進入一個新站後,流覽者快速掃描主頁之後,應該明白無誤地知道:
如果想搜索,可以從這裏開始。
如果想掃描,可以從這裏開始。
如果想掃描本站最精彩的內容,可以從這裏開始網上推廣。
沒有留言:
張貼留言