歡迎訪問世紀網絡官網,寶雞網站建設SEO優化已累計服務超過900家企業!     咨詢熱線:13619273150

15年網站建設優化經驗,900家客戶的選擇,值得信賴!


寶雞網站建設:網頁設計黃金技巧匯總

作者:寶雞網絡公司      發布時間:2014-10-31      瀏覽:2400

62.9K


1. 別讓用戶費腦筋

根據Krug關于網站可用性“第一原則”的說法,好的網頁應該是“一望即知,不言自明”的。當設計師設計一個網頁時,他的工作應該是消除問號--即需要用戶自己思索,權衡,選擇和決定的項目。

如果一個網站的導航和網站結構設置不合理,導致網站的可用性不高,那么就會留下很多問號,用戶在使用時,就容易被被網站的運行方式弄糊涂,甚至從A點轉到B點都成問題。而清晰的網站架構,簡潔的視覺引導方式,辨識度強的導航鏈接都在用戶搜尋目標內容時提供極大的幫助。

讓我們來看個例子。Beyondis.co.uk聲稱他們“超越渠道,超越產品,超越銷售”。但他們究竟想說什么呢?由于用戶傾向于以“F”形模式瀏覽網站,網頁完全打開后,這三句話很可能是用戶最先留意到的網頁元素。

雖然這個網站本身還算簡潔易用,但如果用戶想理解這三句話,就得進一步搜索信息。這種情況就是一個非必要的問號。網頁設計師的任務之一就是將問號的數量降低至0.對于這三句話的意思,該網站在主頁的右側以視圖的方式給出了解釋。如果能把這兩部分內容調換一下位置的話,可用性就會增強很多。

ExpressionEngine網站的布局方式與 Beyondi很接近,但卻沒有留下“不必要的問號”。而且這個網頁中的宣傳性文字也有其功能:當用戶試用該網站的服務或下載免費版本時,這些文字為他們提供了相應的選擇。

降低網站的認知難度能讓用戶更好地理解如何使用網站。如果你能做到這一點,用戶便能體會到你所設計的網站的易用性和由此帶來的便利。如果一個網站讓用戶覺得很迷惑的話,用戶自然也不會使用它。

2. 別考驗用戶的耐心

如果你想在任何設計項目中為用戶提供服務或工具,請力求把對用戶的要求降到最低。一個測試或服務對用戶要求的條件越少,它被用戶使用的幾率也就越高。新用戶尤其如此。他們通常只想體驗一下你提供的服務,而不愿為了獲得一個他們也許永遠用不著的賬號去填寫一連串的表格。盡量讓用戶自行瀏覽和了解你的服務,別強迫他們提供個人信息。為了體驗一下網站的服務,用戶就得留下自己的郵箱地址,這種做法并不合理。

正如37Signals團隊的程序員Ryan Singerstates所說,如果用戶在使用過你提供的服務之后,你再要求他們提供郵箱地址,他們沒準兒會積極配合,因為這時用戶已經對你的服務有了了解,也期待得到更多回饋。

Stikkit網站的用戶體驗就做的非常好,它幾乎不要求用戶提供任何信息,給用戶一種寬松愉悅的感覺。 這不正是網頁設計師希望用戶體驗的感覺嗎?

當然,設計師也想從用戶那里獲得信息。所以該網站的用戶三十秒內就能完成注冊--注冊步驟是以水平并列的方式展開的,用戶連下拉網頁的步驟都省了。

理想的網頁應該是沒有任何障礙的,它不會強迫用戶先訂閱或注冊才能體驗網站的服務。即使只是注冊一下也足以使用戶感到不便,這會降低他們對網頁的興趣,從而拉低網站的瀏覽量。

3. 調動用戶的注意力

通常網站的內容有靜態的,也有動態的,某些互動元素比另一些更能吸引用戶的注意力。我們都了解,圖象比文字更能吸引目光,正如在文字中,加粗加黑的字體比普通字體更引人注意一樣。

人眼觀察世界的方式是高度非線性的,這也為什么網頁中的線條,圖案和動態畫面能立即被用戶所注意。頁面中的動態廣告之所以如此煩人且分散我們的注意力也是這個原理,但是從市場營銷的角度來看,在吸引用戶關注上,視頻彈窗確實是一種非常有效的手段。

Humanized.com網站近乎完美地運用了注意力法則。 這個頁面中用戶唯一立即可見的內容是“免費”(FREE)的大字,它以一種迷人且漂亮的方式呈現,但本身也是一種非常有用的信息。下面的文字則為用戶如何獲得“免費”的產品提供了足夠詳細的說明。

巧妙地在網頁中使用簡潔的視覺元素,能有效地把用戶的目光引向網頁中的特定區域,用戶的注意力從A點轉向B點,而他們很可能對此還毫無察覺呢。用戶心中的問號越少,他們對網站的認同度就越強,對網頁所宣傳的公司的信任度也就越高。換句話說:用戶對網站的內容認知越容易,用戶體驗就越好,而用戶體驗正是網站可用性的第一要素。

4. 力求突出特色

當代設計常因為過度使用視覺圖象和大圖標按鈕而飽受批評。但是純粹從設計的角度來看,這并不全是壞事。事實上,這些視覺元素能夠以非常簡單而友好的方式來呈現網站內容,也是極為有效的導航手段。

Dibusoft.com網站是將高效的視覺元素與清晰的網站架構相結合的極佳范例。該網站有9個主要的導航選項,網頁布局也非常簡潔明了。只是顏色搭配上有點偏淡。在UI設計中,讓用戶能清楚地理解網站提供的各種功能是非常重要的一個設計原則。至于如何去實現這一點,可以有很多不同的方法。最重要的是設法讓用戶更好地理解網站的內容,并能在使用網站時獲得輕松愉悅的用戶體驗。

5. 注意文字風格

網頁文字與印刷文字的行文方式有所不同,所以網頁中的文字內容一定要考慮到網站用戶的偏好和瀏覽習慣。促銷推廣類的內容一般不會被認真閱讀。沒有配圖的長篇大論,加黑加粗的主題詞和斜體字常被用戶略過。浮夸花哨的文字內容很難引起用戶的興趣。

最好平實一點。請盡量避免使用油腔滑調的名詞,充滿營銷氣息的名詞和技術性太強的名詞。舉個例子,如果你介紹一項服務時,希望用戶能注冊一個賬號,那么簡單的“注冊”就比“即刻開始!”好一些,而“即刻開始!”又比“請體驗我們的服務”之類的詞更好一些。

Eleven2.com網站便深諳此道。沒有輕佻的宣傳,沒有花哨的噱頭。只有用戶最想知道的內容:一個明確的價格。

一些可行的策略:

• 盡可能使用簡短,明白的語句(越能點明重點越好)。

• 布局要一眼就能看清楚(可適當為內容分類或使用多級標題,視覺元素或編號格式等手段來打破大段文字可能造成的枯燥感)。

• 語言的風格盡量平實,客觀(促銷信息沒必要渲染得像廣告一樣??陀^扼要地列出用戶應選擇你的產品,網站或服務的原因即可)。

6. 簡約而純粹

設計師應該把“保持簡單”當成網頁設計的主要原則和目標。普通用戶訪問一個網站很少是為了欣賞網站的設計,多數情況下他們是為了尋找有效的信息,設計只是一個載體。因此設計師應該力求簡潔而不是復雜。

Crcbus網站就很好地體現了簡潔的原則。 你可能不認識網頁中的意大利文,但你一定能清楚地認出導航按鈕,標題,內容區和腳注。甚至網頁中的圖標都能傳遞出信息。當你把鼠標置于圖標之上時,旁邊會出現相應的提示文字。

從網站用戶的角度看,最好的網站在內容上應該極為純粹,除了他正在使用或尋找的內容外,不應該再有任何廣告或無關內容。這也是為什么一個文字內容設計良好的網頁常能帶來優越的用戶體驗的原因。

Finch網站在清楚地傳達信息的同時,也為用戶提供了多種選擇,并且沒有添加任何無關的多余內容。

7. 別怕負空間

負空間的重要性怎么強調都不過分。負空間不僅能簡化用戶對網站的認知過程,更有利于用戶讀取呈現于屏幕上的信息。當一個新用戶打開一個網頁時,他或她要做的第一件事就是瀏覽網頁并把網頁上的內容劃分為自己能夠理解的,不同的信息段。

如果一個網站的布局很復雜的話,用戶瀏覽,分析,使用這個網站的過程就會相當困難。在為網頁中不同的設計元素劃分區域時,你可以使用明顯的分隔線,也可以利用負空間,通常負空間的效果要更好一些。分層式設計也可以有效地降低網站的復雜程度(所謂的“西蒙法則”):設計師給用戶造成的視覺層次感越強,用戶就越容易理解網站的內容。

負空間值得好好利用。Cameron.io網站的設計就是把負空間原理作為主要設計準則的。網站內容被放在了應有的突出位置,網站的整體布局看起來也非常均衡。

8. 發揮“視覺語言”的魔力

Aaron Marcus在他一篇以視覺傳達為主題的論文中,就所謂的“視覺語言”--也就是用戶看到網站內容---的應用問題提出了三個關鍵原則:

• 組織:盡量為用戶提供清晰而一致的網站架構。內容的一致性,網站在屏幕上呈現的布局,網站內容之間的銜接,導航的易用性等都是與組織有關的重要概念。設計師在設計一個網站時遵循的原則應適用于這個網站的所有元素。

• 節儉:指的是盡量以最少的視覺元素傳達出最多的信息量。這個原則包含四個要點:簡潔,清晰,顯著,強調。簡潔的意思是視覺傳達中應該只采用最重要的元素。清晰的意思是要保證所有元素都意義明確,沒有歧義。顯著的意思是所有視覺元素的重要特性都應該十分鮮明。強調的意思是用于視覺傳達的一切重要元素都有很高的辨識度。

• 傳達:根據用戶的感受和理解能力來決定網站的呈現方式。為了取得理想的視覺傳達效果,設計師在考慮UI時,必須把握網頁的穩定性,易用性,字體和顏色等不同元素之間的平衡關系。遵循最大化法則:任何3種字體的總大小不得超過3磅---意即每行文字最多只能使用18個單詞或50-80個字符。

9. 與慣例為友

按常規的方式來安排設計元素并不意味著你設計的網站一定會平庸無聊。事實上,遵循常規常常是最有效的方式,因為它降低了用戶對網站的認知難度。舉例來說,如果所有網站的RSS的視覺呈現方式都各不相同,那對于追求網站可用性的設計師來說將是一個噩夢。無論是組織數據(如整理文件夾)還是從事銷售活動(如商品的擺放),我們遵循的其實都是在日常生活中早已習慣的一些原則。

遵循常規原則行事反倒能更容易贏得用戶的信賴,同時也能建立自己的信譽。一定要尊重用戶的期望---站在用戶的角度去思考,什么樣的導航設計,內容結構或搜索方式等等才是他們想要的。(更多這方面的建議可以參考Nielsen的Usability Alertbox)。

讓我們來做個測試:如果你用Babelfish之類的翻譯軟件將圖中的亞馬遜頁面翻譯成日文(假定你的目標用戶不懂日文),并且要求用戶試著在這個日文網頁中尋找某樣東西,如果你很好地遵循了常規的設計原則,而沒有對網頁做太大改動,那么接受測試的用戶哪怕不懂日文,大概也能找到這樣東西。

Steve Krug也建議說,除非你真正確信你的創意足夠好時再去創新,否則按常規行事才是上策。

10. 測試應從早從多

“測試從早從多”的原則應貫徹于每個網站設計項目之中,因為網站易用性測試常常能暴露出設計和網站布局等方面存在的重大問題。

不要在設計后期才開始測試,也不要僅針對一些無關痛癢的細節測試,更不要為了錯誤的目的而測試。拿“從早測試”來說吧,你需要理解設計師的大多數決定都是“片面”的,他無法斷言說某些網頁布局方案就一定比另一些好,因為他要從特定的角度去分析這些設計方案(如客戶的要求,其他利益相關者及項目預算等因素)。 請仔細考慮以下建議:

• 根據Steve Krug的說法,哪怕測試一個用戶也百分之百比不做測試強,寧可在早期測試一個用戶,也不要等到晚期去測試五十個用戶。根據玻姆第一定律,在制定設計方案和早期設計活動中錯誤出現的頻率最高,而設計越接近后期,修正的代價也就越大。

• 測試是個不斷重復的過程。這意味著你需要不斷設計,不斷測試,不斷修正,再重新測試。在這個過程中,你很可能會發現第一輪測試中被忽視的問題,你沒發現這些問題可能是因為用戶在第一輪測試中被遇到的其他問題纏住了。

• 網站易用性方面的測試永遠會為你提供有益的幫助。因為測試的結果,要么是你發現了設計中存在的問題,要么是你發現沒有什么大問題,這兩種結果都是你繼續展開項目的依據。

• 按照溫伯格的說法,讓一個程序員測試自己編寫的程序并不合適。這句話同樣也適用于設計領域。當一個設計師一連幾周都花在同一個網站項目的設計上時,他已經無法再用最初的眼光來評價自己的項目了。因為這時他已經熟悉了這個網站的建設和運行方式--他已經對這個項目有了自己的見解,而獨立的測試者或用戶卻沒有這種成見。



0