作者：Gyorgy Fekete
原文鏈接：
Pricing Tables: Examples And Best Practices
Gyorgy Fekete 版權所有(Article copyright by Gyorgy Fekete)
對於任何提供產品或者服務的公司來說價目表都扮演著重要的角色。不論從它的設計還是可用性角度來講，實現起來都是個挑戰。價目表必須在力求簡明的同時體現出不同產品或服務間特性的差異。 價目表必須有助於用戶做出自己的最佳選擇。公司應該精心考量他們的系列商品，挑選商品中最具競爭力的特性展現在價目表上。我們應該只 給用戶呈現他們會感興趣的東西：可選的特性、項目和價格。展示的原則就是:為了避免用戶在比對商品和從中選出最優方案的過程中遇到困難，務必去掉價目表上 任何的非必要元素，從而減少流失潛在顧客的機率。
一旦你確定了商品的最主要特點,繼續深入為那些關注某項特定指標的用戶創建一個更為詳細的功能列表。用戶需要知道自己把錢花在什麼樣的商品上，而這個商品到底包含哪些重要的標準。
為了給如何設計和展現價目表打下一個良好的基礎，讓我們一起來看看別的設計師的一些作品，然後按照下列標準來分析它們：
- 設計：色彩、風格、字體、圖標。
- 可用性：在CSS和JavaScript無法成功加載的情況下它是否還可用?
最佳策略和方針
設計價目表是個講究技巧的工作。它要求設計師將信息清晰準確地傳達出來。盡可能地將產品的特性直觀地展現給用戶以使他作出最滿意的選擇。
1.傳達的恰到好處
我們想當然的會以為特性描述面面俱到的列表能夠為潛在用戶構建起良好的商品印象。而實際上，你給出的信息越多，要求用戶消化吸收的也就越多。
TypePad (如下截屏)為用戶提供了冗長的價目表。儘管它提供了詳盡的信息使得用戶能夠對比出商品之間的差異，但是用戶根本無法一目瞭然，他們不得不記住哪一列對應 到哪一個商品。此外，儘管商品名稱在列表底部尚有顯示，但價格卻只在列表開頭出現。因此用戶在瀏覽到表格下方的時候不得已還得重新滾動到列表開頭查看商品 價格。
相比之下
ConceptShare 就是個簡明易用的典型。注意：列表第四行合併了兩項(用戶和評審者)，從而避免不必要的第五行出現。這是個美觀且信息充足的價目表。
重複一遍,關鍵在於你的用戶能清楚的知道各個商品之間的差異。傳達的信息不多不少，恰到好處。 假設一個潛在用戶來到你的商店並希望知道兩個商品間的差異，你肯定不會首先向他介紹它們彼此類似的特性，不是嗎？告訴用戶他們想知道的，他們會感謝你的。 同時也引出了我想說的第二點。
2.傳遞不同點,而不是相似點
不要關注於展現備選商品的相似點,而要傳達出它們之間的不用。在視覺效果上區分出備選商品的相同特性和不同特性是個好辦法。為了做到這點，你可以將區別較大的特性放在列表的頂部而相同特性放在底部。
看看
eTribes.com 的價目表(以下截屏)。這樣的設計有效地傳達了商品的不同點及共同點。所選的圖標也在符合整體設計風格的同時有助於用戶理解商品的各項特性，有效且友好。
3.突出商品價格
當用戶訪問產品或服務網站時，他們最先想瞭解的就是價格問題。而忽視對價格信息的設計是B2B和B2C網站存在的首要通病。要盡量確保你們所顯示的商品價格能迅速和清晰地被用戶看到。
字體的選擇往往取決於所提供的產品或服務的類型，同時還要遵循整個設計的風格一致性。在很多價目表中商品的價格，名稱，特點會被設計的更大以使其突出。作為設計師，你要確保價格在視覺上和邏輯上都有適當的重要性。
以價格對商品進行排序也是個好辦法，從高到低或從低到高。因為用戶會以"F"形視線瀏覽網站，一些設計者將最廉價的商品放在列表左側，以使用戶第一眼就能看到。設計者最關注的應該就是確保用戶看到最吸引人的信息。
4.精簡視覺元素
很遺憾，在我們展示的大多數案例中都存在一個同樣的缺點：他們過於頻繁和不恰當的使用過分鮮艷的視覺元素。設計師希望價目表盡可能的吸引人一些，看起來，大量綠勾勾和紅叉叉似乎有一些幫助。
可一旦這些圖標佈滿整個列表，就很容易將用戶的目光吸引到圖標上來，從而阻礙用戶閱讀商品之間的具體差異。
Beanstalk 在避開視覺元素干擾的情況下有效地傳達了他們的信息。用淺色的圓點表示這一產品支持某項特性，不過分搶眼又能傳達好信息。
Planhq.com 只用了綠色的勾選框而沒用紅叉號。實際上，紅叉號的確不是必須的，既然如此，就該果斷的將它排除在外。
Goodbarry.com 用顏色來強調列表中的關鍵細節。同時，請注意他們是如何運用字號大小來凸顯推薦商品的。此外他們還很好的應用了綠色按鈕來吸引用戶體驗他們的產品。
精簡視覺元素，避免視覺噪音。如果你確信那些圖標不至於太過花哨，而且的確能給用戶傳達出有用的信息，那麼就儘管使用它們。如果它只是個擺設那你還是不用為妙。
每一個圖標或縮略圖的存在都必須有其明確的理由。例如，價目表比對的是一些實物產品，那麼就有理由將它們的縮略圖展示出來。
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.
我們列舉的所有價目表幾乎都利用了不用的背景色來區分各個商品。設計者遵循色彩理論借助鮮亮的色彩將用戶視線吸引到商家期望其熱銷的商品上。
5.生動地圖解差異
一些設計師利用插畫和生動的圖像來清晰地展現商品的差異，諸如卡通形象之類的比擬手段經常被應用。例如，一個公司提供不同檔次的問卷調查服務，你就可以用一個「輕薄的」工具箱代表精簡版，用更大、更厚實的工具箱代表企業版。事實上，這是設計師的常用手法。
6.保持設計的一致性
網站上包括價目表在內的所有元素，都要保持統一的風格。
BigFilebox.com 就在這點上犯了個錯誤。
第二個價目表的設計並沒有遵循網站整體的設計風格。
7.謹防你的用戶流失
對於任何提供產品或者服務的公司來說價目表都是影響銷售業績的關鍵。價目表就是展示商品的窗口，因此，要確保對於每個人來說它都是可使用，可訪問的。
價目表不應該只支持新版的瀏覽器,而是所有版本的瀏覽器和顯示屏。公司可以創建包含各種特效的價目表，但是他們要確保在CSS和JavaScript無法被加載的情況下用戶仍能夠看明白價目表。以下是個符合上述情況的例子:
以下是個過度應用JavaScript的案例，
mailchimp.com:
看到這個價目表時你要再點擊一個「查看詳細信息...」的鏈接才能用JavaScript展開那些隱藏在下面的信息。如果我們禁用瀏覽器上的 JavaScript，那這個鏈接就無法打開了。解決的辦法之一就是在JavaScript被禁用的時候讓這些信息顯示出來。（譯註：我倒是覺得會禁用 JS的人自然知道如何打開，難道他們不用任何的動態頁面嗎？GMail？Facebook？恐龍自己喜歡滅絕就不要阻止他們吧。）
價目表案例庫
橫向排列還是縱向佈局？作為設計師到底應該怎麼選擇？儘管當前主流的設計還是縱向分欄佈局。但其實不管怎麼顯示，其目的都是為了清楚地傳達出商品特色。
ActionThis
Squarespace
Tickspot
Litmusapp.com
Goodbarry.com
Bigcartel.com
Blinksale.com
Polldaddy.com
iPhone T-Mobile
Fluxiom.com
Dropsend.com
Brightbox.com
Spokeo.com/hr
Movabletype (the pricing table is no longer available)
Zendesk (the pricing table is no longer available)
iPhone
Harvest
Github.com
FetchApp.com
RescueTime
Shutterstock
Intervals
Jigsaw
DabbleDB
activeCollab
Zoho Projects
TiVo
Apple MobileMe
Analysis-one
ProofHQ
Backboard
ExpressionEngine
你還可以從Christian Watson』s 的案例庫裡找到更多的
價目表。
最佳策略：總結
- 包括價目表在內的所有元素,都要與網站的整體設計風格保持統一。
- 有節制地應用不同的背景顏色來區分不同的商品。
- 就像攝影師會將焦點聚集在他想表達的對象上,在價目表中也要盡可能地突出你想讓別人關注的部分。
- 用不同的色彩和字號來區分主次商品。
- 遵循用戶瀏覽網頁的"F"形視線模式,將主要特性置於列表左上方。
- 在設計價目表時有節制地使用CSS和JavaScript。
- 商品的價格要始終可見。
- 假使你的產品特性太多以至於無法在一屏顯示完,最好將商品的名稱,價格和主要特點分別在列表的頂部和底部都顯示出來。
- 必須明確表述商品價格所屬的幣種,因為像"$"這樣的標誌既可以代表美元,也可以代表加幣和澳元。
關於作者
Gyorgy Fekete 是一位有五年web設計和開發經驗的web開發人員。是羅馬尼亞一家名為 Primal Skill Ltd. 的Web設計開發工作室的創辦人。他還會在博客上發表一些關於創業，商業，設計和開發等方面的文章：
blog.primalskill.com..
國外的設計還是夠強！反觀台灣呢？還是繼續抄吧！抄是沒關係的，太多人是照抄(COPY)！所以會進步嗎？應該是很難的！不抄的人更慘，做出來的東西四不像，自己以為很棒！別人(客戶)看了不喜歡(不滿意)，然後會說：『客戶不懂設計！』這就是台灣的 小白 設計師！不求長進，動不動把老闆裁掉，創業開工作室，低價搶案子，搞到台灣設計市場都是價格戰，最後，誰倒楣？大家都倒楣，最慘的呢？應該是小白 設計師(爛腳找爛腳，付不起錢才會選價格)！想當設計師 要努力些！不是學校剛畢業(設計學系)後就會設計師了(大部分的學生，少部份天份夠的很快出頭天)！小白 設計師 別再出來亂了！
