當前位置: 首頁 > 設計資訊 > 理論文摘 > 正文

高效網(wǎng)頁設計的五種原則

2009-11-17 12063 0

  網(wǎng)頁設計在過去的幾年中得到l了很大的提高。它現(xiàn)在使用戶更加容易掌握,而且更具有吸引力。而其中有一個很好的原因就是,在過去的幾年中,我們發(fā)現(xiàn)將設計更多的投入在可用性和使用者的經(jīng)驗上會更加高效?,F(xiàn)代的割邊設計并不是滿是招搖的快樂談話和閃亮的廣告。我們學會了以與訪問者的對話開頭,讓他們參與到討論中,通過提出他們的需求和誠實直接地和他們談話來取得他們的信任。

  幾個星期以前,我們發(fā)表了“有效網(wǎng)頁設計的10條原則”——一篇關于有效網(wǎng)頁設計的全面的文章,給你們提供了一些關于用戶想法的見解和一些如何有效設計網(wǎng)頁的例子。

  這篇文章強調(diào)另外五條關于有效網(wǎng)頁設計的原則、啟發(fā)和方法,而這些方法如果恰當?shù)剡\用就可以在得出更加復雜的設計作品同時簡化取得這樣的效果的過程。

  請注意,你可能會對下面關于可用性的文章感興趣:

  10個可用性的噩夢:展示了你應該在設計功能型和可用型網(wǎng)站時避免的可用性噩夢,

  30個可用性的議題:解釋了重要的但通常被遺忘、忽略或誤解的議題,條款,規(guī)則和原則。

1.使用一個有效的銷售原則

    為了出售一件產(chǎn)品或一項服務,你需要有效地與任何一個你網(wǎng)頁的訪問者展開對話。因為訪問者現(xiàn)在來到了你的網(wǎng)頁,他們希望能聽你的談話,并從中有所收獲。因此你應該如何接近這個潛在的委托人以在月末最大程度地增加你的收入呢?

    Strong在1925年提出的AIDA是高效的銷售模式,這個模式描述了一個人在出售一件產(chǎn)品或一項服務時通常經(jīng)歷的一系列的事件。

 A-注意(意識):吸引顧客的注意

 I-興趣:通過展示特征,優(yōu)勢和益處來激起顧客的興趣

 D-期望:使顧客相信他們想要甚至期望這個能滿足他們需求的產(chǎn)品或服務

 A-行動:引導顧客采取行動和/或購買

 現(xiàn)在有人在其后增加了另一個字母構成了AIDA(S)的模式:S-滿意-滿足顧客,那樣他們會成為???,并且能為產(chǎn)品提供轉(zhuǎn)介

    在上下文中,顧客應該注意AIDA通常是讓潛在的顧客購買他們實際上不需要的產(chǎn)品或服務的方法。為了取得用戶的信任,設計者需要確定該網(wǎng)站提供真誠的信息,而且不存在使內(nèi)容在不同方式下出現(xiàn)不同理解的隱藏信息。

    更有效的方法就是為訪問者提供關于產(chǎn)品或服務使用方法的實在的論據(jù),環(huán)境和看法,而不是用招搖的空話來轟擊他們。

Traffik

     參看上面的例子。traffik 遵循了AIDA原則。如果訪問者想要了解關于網(wǎng)站內(nèi)容管理系統(tǒng)的信息,他們馬上就能從網(wǎng)站頂端簡明的介紹中獲得。這樣,潛在的顧客就能被吸引從而繼續(xù)瀏覽網(wǎng)站(吸引,a)。他們的興趣就會被展示的產(chǎn)品的特征和益處而激起(興趣,i)。

     為了從交流中獲得滿足顧客需求的信息,他們運用了網(wǎng)站底端右手方向的棕色信息塊(期望,d)。最后,用戶在“開始巡游”和“30天免費試用”這些按鈕的引導下開始購買(行動,a)。

     還有一些其他的有名的銷售模式,例如,BOSCH公式(由Peter Hubert研發(fā)):

 B要有好奇心,詢問開放式的問題

 O提出解決方法,談論顧客最終結果的獲益

 S刺激感官,讓顧客檢測你的產(chǎn)品

 C采取交叉銷售,考慮所有必要的附屬設備

 H切入要點,當顧客有需要的時候才出售

[Page: ]

2.用盡量少的幾種顏色

     深色的字體點擊右鍵觸發(fā)白色背景而淺色觸發(fā)黑色背景是消極的。鮮明的顏色能夠幫助你強調(diào)想要讓顧客注意到的特定元素。

     然而,你沒有必要運用顏色鮮明的調(diào)色板來創(chuàng)造高效的網(wǎng)站設計。有時候,采用適當數(shù)量的顏色并有效地運用它們將會很有幫助。這樣來訪者就會很快看到更為重要的部分。這樣也更容易將它們的注意力集中到網(wǎng)站中最重要的區(qū)域。

Sidebar

     Sidebarecreative.com只運用了一種主要鮮明色--藍色表示鏈接,按鈕和可點擊的元件。白色表示能概括當前網(wǎng)頁內(nèi)容的重要信息。剩下的內(nèi)容有淡青色的懸浮效果。運用卓越,適中和富有表現(xiàn)力的顏色,那樣就很高效。

     Wilson Miner 運用了綠色,藍色和粉色。主導的綠色看起來淡雅而宜人。藍色表示鏈接,而粉色表示懸浮效果。要注意網(wǎng)站的布局。雖然只運用了很少幾種顏色,你能很快看到可以點擊的區(qū)域和識別出該網(wǎng)站與眾不同的區(qū)域。

[Page: ]

3.力求平衡

     在網(wǎng)頁設計中,平衡很重要,因為給用戶一種封閉意識,讓人覺得恒久和安定。平衡的設計更容易領會和理解,因為他們營造出一種視覺的層級命令面板,清楚地展示出往網(wǎng)站中最重要和次要的部分。

Apple

  來源:運用于網(wǎng)頁設計中的元素

     蘋果的設計大概是對稱的(或者正規(guī)的)平衡最好的一個例子。同一個設計元素有很獨具特色的(上面)或很相似的(下面)分量。他們都被放置在用戶屏幕中間一條虛構垂直線的兩端。這樣的設計相當?shù)暮憔煤蛯庫o,讓來訪者更容易的理解展示在其中的信息。結果就是:平衡營造了一種樸素的視覺和諧。

     為什么蘋果的設計如此的高效呢?因為它是以用戶和產(chǎn)品為中心的。蘋果網(wǎng)站的設計就象是一個劇院的舞臺,在其中來訪者是觀眾,而產(chǎn)品是舞臺上的表演者。你可以發(fā)現(xiàn)該網(wǎng)站除產(chǎn)品本身外沒有任何其他的內(nèi)容。蘋果成功地以提供最重要的選項發(fā)起了對話。

Signalfeuer

     Signalfeuer.info運用了一種不對稱的(非正式的)平衡來留出了更多的空白區(qū)域的動態(tài)使用(這大概也是不對稱平衡的主要優(yōu)勢)。左面的版塊比右邊的小,然而該網(wǎng)站通過運用令人印象深刻的均衡網(wǎng)格給人一種強烈的平衡感。同時顏色的選擇也很獨具一格。

     據(jù)設計的原則該文章所言,“不對稱的平衡可能會在位置和集中程度上不平衡。為了營造不對稱的平衡,必須要增加集中程度來彌補位置上的改變。集中程度可以通過改變大小,形狀和風格來增加。對一個特定的設計,設計者可能會選擇將內(nèi)容放在顯像面的同一邊。這樣,相對的空白區(qū)域就會充當一種均衡的力量。”

Avalonstar

     Avalonstar.com就采用了這種方式。注意不同模塊的迥異的形狀和懸標題。白色的區(qū)域充當呈現(xiàn)在右邊的內(nèi)容的平衡力。

     基于網(wǎng)格的做法對達到均衡的設計布局很有幫助或者甚至很有必要。

[Page: ]

4.力求清楚明確

     獨立于設計方法,布局和展示內(nèi)容的清楚明確在網(wǎng)頁設計過程中應該給與高度的重視。如果標題中有錯誤或者存在歧義,一定要確保去除或者明確地詳述其真正的含義。較為明確總是比含糊不清好的多。

     為了達到清楚明確,你也沒有必要使用“標準”設計布局或者基本模板。如果你想的話也可以冒險采用實驗性設計,但要時刻記住網(wǎng)站內(nèi)容清楚明確的視覺層級命令面板和網(wǎng)站結構。你的類別的組織越是有序,你的訪問者就越容易在你的網(wǎng)站中找到自己的道路。

Hovie

     Hovie.com展示了一種新奇但很清楚明確的設計思路。該網(wǎng)站包含額五個模塊;第一塊表示當?shù)顷懢W(wǎng)站是展示的主要菜單。當選擇了主要菜單中的一些部分時就會出現(xiàn)下級菜單。

     當前位置是由箭頭展示的導航菜單中的選項。在內(nèi)容區(qū)域中的是對上面的圖片的一個簡要描述和標題。這個設計從頭到尾都很一致和連貫。你有可能誤解這個設計嗎?不太可能把。它很簡潔,清晰和有效。

Astheria

     另一個例子:Astheria.com 聚焦于白色區(qū)域,采取了一種平衡的給予網(wǎng)格的設計思路。雖然這個設計很難以捉摸而且只使用了一種吸引人的顏色,你依然可以很快弄清楚身處何處,也很明確可獲得的選擇。印刷術的力量在這里得到了極致發(fā)揮。遺憾地是,該網(wǎng)站沒有顯示哪些鏈接已經(jīng)訪問過了。

[Page: ]

5.說清用戶的需求

     作為網(wǎng)頁開發(fā)者,你有為來訪者提供舒適服務的首要任務,說清楚他們的需求,為他們提供充足的線索以滿足準確無誤且直觀的導航。然而,為了取得這些,你需要的不僅僅是了解你用戶的基本的概況和忠于他/她樂于的決定。

     為了最大化你的曝光量,你必須考慮來訪者的不同的類型和資料。你需要識別主要群體并且提供各個群體會喜歡的機能。但這并不意味著你需要創(chuàng)造多重版本的網(wǎng)站;這在一定程度上指你可以將不同層面的用戶交流融合與同一個設計布局中。

     比如,根據(jù)Shneiderman的使用界面設計的原則,讓??褪褂媒輳绞呛苤匾?-為了增加互動的步伐,可以使用縮略語,特殊鍵,隱藏的命令等等。

Fffound.com

     Ffffound.com提供了普通的導航和基于JAVA的鍵盤導航。這項機能對采用普通方式瀏覽網(wǎng)頁的新成員是不可見的。然而,高級的用戶可以更高效地導航。當然,你需要明確地說明怎樣使用高級的機能和這項技能能帶來的益處。

     另一個可能項可能是書簽,工具條或者一些類似閃爍上傳的特定的工具。提供了這些工具,你就給你的用戶提供了更容易的方法來使用你的服務,這樣他們就沒有必要尋找替代物了。

結論

     高效的網(wǎng)頁設計不一定要色彩鮮艷和漂亮,它需要清楚和直觀。確定你幫助你的訪問者了解了你網(wǎng)頁的益處,并且為他們提供了一種簡單的方法來瀏覽和使用你的網(wǎng)站。

     對稱和不對稱的平衡都能幫助你取得一種實在和清楚的設計思路以提供豐富的用戶互動的基礎。為了最大化你的曝光量,考慮不同類型的用戶,然后為他們提供不同層面的用戶互動以把他們拉回你的網(wǎng)站。


136
評論區(qū)(0)
正在加載評論...