歡迎訪(fǎng)問(wèn)世紀網(wǎng)絡(luò )官網(wǎng),寶雞網(wǎng)站建設SEO優(yōu)化已累計服務(wù)超過(guò)900家企業(yè)!     咨詢(xún)熱線(xiàn):13619273150

15年網(wǎng)站建設優(yōu)化經(jīng)驗,900家客戶(hù)的選擇,值得信賴(lài)!


寶雞網(wǎng)站建設:網(wǎng)頁(yè)設計黃金技巧匯總

作者:寶雞網(wǎng)絡(luò )公司      發(fā)布時(shí)間:2014-10-31      瀏覽:2396

62.9K


1. 別讓用戶(hù)費腦筋

根據Krug關(guān)于網(wǎng)站可用性“第一原則”的說(shuō)法,好的網(wǎng)頁(yè)應該是“一望即知,不言自明”的。當設計師設計一個(gè)網(wǎng)頁(yè)時(shí),他的工作應該是消除問(wèn)號--即需要用戶(hù)自己思索,權衡,選擇和決定的項目。

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

讓我們來(lái)看個(gè)例子。Beyondis.co.uk聲稱(chēng)他們“超越渠道,超越產(chǎn)品,超越銷(xiāo)售”。但他們究竟想說(shuō)什么呢?由于用戶(hù)傾向于以“F”形模式瀏覽網(wǎng)站,網(wǎng)頁(yè)完全打開(kāi)后,這三句話(huà)很可能是用戶(hù)最先留意到的網(wǎng)頁(yè)元素。

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

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

降低網(wǎng)站的認知難度能讓用戶(hù)更好地理解如何使用網(wǎng)站。如果你能做到這一點(diǎn),用戶(hù)便能體會(huì )到你所設計的網(wǎng)站的易用性和由此帶來(lái)的便利。如果一個(gè)網(wǎng)站讓用戶(hù)覺(jué)得很迷惑的話(huà),用戶(hù)自然也不會(huì )使用它。

2. 別考驗用戶(hù)的耐心

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

正如37Signals團隊的程序員Ryan Singerstates所說(shuō),如果用戶(hù)在使用過(guò)你提供的服務(wù)之后,你再要求他們提供郵箱地址,他們沒(méi)準兒會(huì )積極配合,因為這時(shí)用戶(hù)已經(jīng)對你的服務(wù)有了了解,也期待得到更多回饋。

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

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

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

3. 調動(dòng)用戶(hù)的注意力

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

人眼觀(guān)察世界的方式是高度非線(xiàn)性的,這也為什么網(wǎng)頁(yè)中的線(xiàn)條,圖案和動(dòng)態(tài)畫(huà)面能立即被用戶(hù)所注意。頁(yè)面中的動(dòng)態(tài)廣告之所以如此煩人且分散我們的注意力也是這個(gè)原理,但是從市場(chǎng)營(yíng)銷(xiāo)的角度來(lái)看,在吸引用戶(hù)關(guān)注上,視頻彈窗確實(shí)是一種非常有效的手段。

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

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

4. 力求突出特色

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

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

5. 注意文字風(fēng)格

網(wǎng)頁(yè)文字與印刷文字的行文方式有所不同,所以網(wǎng)頁(yè)中的文字內容一定要考慮到網(wǎng)站用戶(hù)的偏好和瀏覽習慣。促銷(xiāo)推廣類(lèi)的內容一般不會(huì )被認真閱讀。沒(méi)有配圖的長(cháng)篇大論,加黑加粗的主題詞和斜體字常被用戶(hù)略過(guò)。浮夸花哨的文字內容很難引起用戶(hù)的興趣。

最好平實(shí)一點(diǎn)。請盡量避免使用油腔滑調的名詞,充滿(mǎn)營(yíng)銷(xiāo)氣息的名詞和技術(shù)性太強的名詞。舉個(gè)例子,如果你介紹一項服務(wù)時(shí),希望用戶(hù)能注冊一個(gè)賬號,那么簡(jiǎn)單的“注冊”就比“即刻開(kāi)始!”好一些,而“即刻開(kāi)始!”又比“請體驗我們的服務(wù)”之類(lèi)的詞更好一些。

Eleven2.com網(wǎng)站便深諳此道。沒(méi)有輕佻的宣傳,沒(méi)有花哨的噱頭。只有用戶(hù)最想知道的內容:一個(gè)明確的價(jià)格。

一些可行的策略:

• 盡可能使用簡(jiǎn)短,明白的語(yǔ)句(越能點(diǎn)明重點(diǎn)越好)。

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

• 語(yǔ)言的風(fēng)格盡量平實(shí),客觀(guān)(促銷(xiāo)信息沒(méi)必要渲染得像廣告一樣??陀^(guān)扼要地列出用戶(hù)應選擇你的產(chǎn)品,網(wǎng)站或服務(wù)的原因即可)。

6. 簡(jiǎn)約而純粹

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

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

從網(wǎng)站用戶(hù)的角度看,最好的網(wǎng)站在內容上應該極為純粹,除了他正在使用或尋找的內容外,不應該再有任何廣告或無(wú)關(guān)內容。這也是為什么一個(gè)文字內容設計良好的網(wǎng)頁(yè)常能帶來(lái)優(yōu)越的用戶(hù)體驗的原因。

Finch網(wǎng)站在清楚地傳達信息的同時(shí),也為用戶(hù)提供了多種選擇,并且沒(méi)有添加任何無(wú)關(guān)的多余內容。

7. 別怕負空間

負空間的重要性怎么強調都不過(guò)分。負空間不僅能簡(jiǎn)化用戶(hù)對網(wǎng)站的認知過(guò)程,更有利于用戶(hù)讀取呈現于屏幕上的信息。當一個(gè)新用戶(hù)打開(kāi)一個(gè)網(wǎng)頁(yè)時(shí),他或她要做的第一件事就是瀏覽網(wǎng)頁(yè)并把網(wǎng)頁(yè)上的內容劃分為自己能夠理解的,不同的信息段。

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

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

8. 發(fā)揮“視覺(jué)語(yǔ)言”的魔力

Aaron Marcus在他一篇以視覺(jué)傳達為主題的論文中,就所謂的“視覺(jué)語(yǔ)言”--也就是用戶(hù)看到網(wǎng)站內容---的應用問(wèn)題提出了三個(gè)關(guān)鍵原則:

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

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

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

9. 與慣例為友

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

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

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

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

10. 測試應從早從多

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

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

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

• 測試是個(gè)不斷重復的過(guò)程。這意味著(zhù)你需要不斷設計,不斷測試,不斷修正,再重新測試。在這個(gè)過(guò)程中,你很可能會(huì )發(fā)現第一輪測試中被忽視的問(wèn)題,你沒(méi)發(fā)現這些問(wèn)題可能是因為用戶(hù)在第一輪測試中被遇到的其他問(wèn)題纏住了。

• 網(wǎng)站易用性方面的測試永遠會(huì )為你提供有益的幫助。因為測試的結果,要么是你發(fā)現了設計中存在的問(wèn)題,要么是你發(fā)現沒(méi)有什么大問(wèn)題,這兩種結果都是你繼續展開(kāi)項目的依據。

• 按照溫伯格的說(shuō)法,讓一個(gè)程序員測試自己編寫(xiě)的程序并不合適。這句話(huà)同樣也適用于設計領(lǐng)域。當一個(gè)設計師一連幾周都花在同一個(gè)網(wǎng)站項目的設計上時(shí),他已經(jīng)無(wú)法再用最初的眼光來(lái)評價(jià)自己的項目了。因為這時(shí)他已經(jīng)熟悉了這個(gè)網(wǎng)站的建設和運行方式--他已經(jīng)對這個(gè)項目有了自己的見(jiàn)解,而獨立的測試者或用戶(hù)卻沒(méi)有這種成見(jiàn)。



0