技術(shù)資訊

價目表:實例和最佳策略

2009-01-05 11:10:00

作者：Gy?rgy Fekete
原文鏈接：Pricing Tables: Examples And Best Practices
譯者：UCD翻譯小組, Lanx
Gy?rgy Fekete 版權(quán)所有(Article copyright by Gy?rgy Fekete)

對于任何提供產(chǎn)品或者服務(wù)的公司來說價目表都扮演著重要的角色。不論從它的設(shè)計還是可用性角度來講，實現(xiàn)起來都是個挑戰(zhàn)。價目表必須在力求簡明的同時體現(xiàn)出不同產(chǎn)品或服務(wù)間特性的差異。價目表必須有助于用戶做出自己的最佳選擇。公司應(yīng)該精心考量他們的系列商品，挑選商品中最具競爭力的特性展現(xiàn)在價目表上。我們應(yīng)該只給用戶呈現(xiàn)他們會感興趣的東西：可選的特性、項目和價格。展示的原則就是:為了避免用戶在比對商品和從中選出最優(yōu)方案的過程中遇到困難，務(wù)必去掉價目表上任何的非必要元素，從而減少流失潛在顧客的機率。

一旦你確定了商品的最主要特點,繼續(xù)深入為那些關(guān)注某項特定指標的用戶創(chuàng)建一個更為詳細的功能列表。用戶需要知道自己把錢花在什么樣的商品上，而這個商品到底包含哪些重要的標準。

為了給如何設(shè)計和展現(xiàn)價目表打下一個良好的基礎(chǔ)，讓我們一起來看看別的設(shè)計師的一些作品，然后按照下列標準來分析它們：

設(shè)計：色彩、風(fēng)格、字體、圖標。
可用性：在CSS和JavaScript無法成功加載的情況下它是否還可用?

最佳策略和方針

設(shè)計價目表是個講究技巧的工作。它要求設(shè)計師將信息清晰準確地傳達出來。盡可能地將產(chǎn)品的特性直觀地展現(xiàn)給用戶以使他作出最滿意的選擇。

1.傳達的恰到好處

我們想當(dāng)然的會以為特性描述面面俱到的列表能夠為潛在用戶構(gòu)建起良好的商品印象。而實際上，你給出的信息越多，要求用戶消化吸收的也就越多。

TypePad (如下截屏)為用戶提供了冗長的價目表。盡管它提供了詳盡的信息使得用戶能夠?qū)Ρ瘸錾唐分g的差異，但是用戶根本無法一目了然，他們不得不記住哪一列對應(yīng) 到哪一個商品。此外，盡管商品名稱在列表底部尚有顯示，但價格卻只在列表開頭出現(xiàn)。因此用戶在瀏覽到表格下方的時候不得已還得重新滾動到列表開頭查看商品價格。

相比之下 ConceptShare 就是個簡明易用的典型。注意：列表第四行合并了兩項(用戶和評審者)，從而避免不必要的第五行出現(xiàn)。這是個美觀且信息充足的價目表。

重復(fù)一遍,關(guān)鍵在于你的用戶能清楚的知道各個商品之間的差異。傳達的信息不多不少，恰到好處。假設(shè)一個潛在用戶來到你的商店并希望知道兩個商品間的差異，你肯定不會首先向他介紹它們彼此類似的特性，不是嗎？告訴用戶他們想知道的，他們會感謝你的。同時也引出了我想說的第二點。

#p#

2.傳遞不同點,而不是相似點

不要關(guān)注于展現(xiàn)備選商品的相似點,而要傳達出它們之間的不用。在視覺效果上區(qū)分出備選商品的相同特性和不同特性是個好辦法。為了做到這點，你可以將區(qū)別較大的特性放在列表的頂部而相同特性放在底部。

看看 eTribes.com 的價目表(以下截屏)。這樣的設(shè)計有效地傳達了商品的不同點及共同點。所選的圖標也在符合整體設(shè)計風(fēng)格的同時有助于用戶理解商品的各項特性，有效且友好。

3.突出商品價格

當(dāng)用戶訪問產(chǎn)品或服務(wù)網(wǎng)站時，他們最先想了解的就是價格問題。而忽視對價格信息的設(shè)計是B2B和B2C網(wǎng)站存在的首要通病。要盡量確保你們所顯示的商品價格能迅速和清晰地被用戶看到。

字體的選擇往往取決于所提供的產(chǎn)品或服務(wù)的類型，同時還要遵循整個設(shè)計的風(fēng)格一致性。在很多價目表中商品的價格，名稱，特點會被設(shè)計的更大以使其突出。作為設(shè)計師，你要確保價格在視覺上和邏輯上都有適當(dāng)?shù)闹匾浴?/p>

以價格對商品進行排序也是個好辦法，從高到低或從低到高。因為用戶會以"F"形視線瀏覽網(wǎng)站，一些設(shè)計者將最廉價的商品放在列表左側(cè)，以使用戶第一眼就能看到。設(shè)計者最關(guān)注的應(yīng)該就是確保用戶看到最吸引人的信息。

#p#

4.精簡視覺元素

很遺憾，在我們展示的大多數(shù)案例中都存在一個同樣的缺點：他們過于頻繁和不恰當(dāng)?shù)氖褂眠^分鮮艷的視覺元素。設(shè)計師希望價目表盡可能的吸引人一些，看起來，大量綠勾勾和紅叉叉似乎有一些幫助。

可一旦這些圖標布滿整個列表，就很容易將用戶的目光吸引到圖標上來，從而阻礙用戶閱讀商品之間的具體差異。Beanstalk 在避開視覺元素干擾的情況下有效地傳達了他們的信息。用淺色的圓點表示這一產(chǎn)品支持某項特性，不過分搶眼又能傳達好信息。

Planhq.com 只用了綠色的勾選框而沒用紅叉號。實際上，紅叉號的確不是必須的，既然如此，就該果斷的將它排除在外。

Goodbarry.com 用顏色來強調(diào)列表中的關(guān)鍵細節(jié)。同時，請注意他們是如何運用字號大小來凸顯推薦商品的。此外他們還很好的應(yīng)用了綠色按鈕來吸引用戶體驗他們的產(chǎn)品。

精簡視覺元素，避免視覺噪音。如果你確信那些圖標不至于太過花哨，而且的確能給用戶傳達出有用的信息，那么就盡管使用它們。如果它只是個擺設(shè)那你還是不用為妙。

每一個圖標或縮略圖的存在都必須有其明確的理由。例如，價目表比對的是一些實物產(chǎn)品，那么就有理由將它們的縮略圖展示出來。

Almost all of the pricing tables we’ve examined use different background colors to differentiate pricing plans. Designers use color theory and vivid colors to keep the visitor’s focus on the specific plan that the company wants the most sales on.

我們列舉的所有價目表幾乎都利用了不用的背景色來區(qū)分各個商品。設(shè)計者遵循色彩理論借助鮮亮的色彩將用戶視線吸引到商家期望其熱銷的商品上。

#p#

5.生動地圖解差異

一些設(shè)計師利用插畫和生動的圖像來清晰地展現(xiàn)商品的差異，諸如卡通形象之類的比擬手段經(jīng)常被應(yīng)用。例如，一個公司提供不同檔次的問卷調(diào)查服務(wù)，你就可以用一個“輕薄的”工具箱代表精簡版，用更大、更厚實的工具箱代表企業(yè)版。事實上，這是設(shè)計師的常用手法。

6.保持設(shè)計的一致性

網(wǎng)站上包括價目表在內(nèi)的所有元素，都要保持統(tǒng)一的風(fēng)格。BigFilebox.com 就在這點上犯了個錯誤。

第二個價目表的設(shè)計并沒有遵循網(wǎng)站整體的設(shè)計風(fēng)格。

7.謹防你的用戶流失

對于任何提供產(chǎn)品或者服務(wù)的公司來說價目表都是影響銷售業(yè)績的關(guān)鍵。價目表就是展示商品的窗口，因此，要確保對于每個人來說它都是可使用，可訪問的。

價目表不應(yīng)該只支持新版的瀏覽器,而是所有版本的瀏覽器和顯示屏。公司可以創(chuàng)建包含各種特效的價目表，但是他們要確保在CSS和JavaScript無法被加載的情況下用戶仍能夠看明白價目表。以下是個符合上述情況的例子:

以下是個過度應(yīng)用JavaScript的案例，:

看到這個價目表時你要再點擊一個“查看詳細信息...”的鏈接才能用JavaScript展開那些隱藏在下面的信息。如果我們禁用瀏覽器上的 JavaScript，那這個鏈接就無法打開了。解決的辦法之一就是在JavaScript被禁用的時候讓這些信息顯示出來。（譯注：我倒是覺得會禁用 JS的人自然知道如何打開，難道他們不用任何的動態(tài)頁面嗎？GMail？Facebook？恐龍自己喜歡滅絕就不要阻止他們吧。）

#p#

價目表案例庫

橫向排列還是縱向布局？作為設(shè)計師到底應(yīng)該怎么選擇？盡管當(dāng)前主流的設(shè)計還是縱向分欄布局。但其實不管怎么顯示，其目的都是為了清楚地傳達出商品特色。

ActionThis