🚶🏻 🤘🏾 ♓️ 関税表：例と最良の解決策 💊 ☝🏼 🖖🏿

私から：今では、この記事で直接取り上げられているタスクがあるので、勉強に加えて、記事を翻訳することを決めました。 また、翻訳に関するコメントを取得したかったため、言語も改善する必要があります。 願いは受け入れられます。

料金プラン表は、製品またはサービスを提供するすべての企業にとって重要です。設計と使いやすさの両方を組み合わせる必要があります。それらは単純なものである必要がありますが、同時に商品またはサービス間の機会と価格に明確な違いを与えます。

料金表は、ユーザーが自分に最適な料金プランを選択するのに役立ちます 。会社は製品を慎重に分析し、料金プランの主な特徴と相違点を示す必要があります。訪問者は、関税オプション、機能、コストなど、本当に必要な情報のみを取得する必要があります。主なルールは、テーブル内のすべての不要なセルが潜在的な顧客を失う可能性を高めることです。情報が多ければ多いほど、異なる関税を比較し、それらの中から最適な関税を選択することは難しくなります。

最も重要な機能を決定したら、戻って詳細に興味のあるユーザー向けに機能の詳細なリストを作成します。ユーザーは、なぜお金を払っているのかを知る権利があり、製品の特徴をすべて見ることができます。
このようなテーブルを最適に設計および表示する方法を理解するには、他のデザイナーがこのタスクをどのように処理したかを検討してください。

何を覚えておく必要がありますか？

私たちは困難な課題に直面しています。設計者は、情報を正確かつ明確に提示し、一方で十分な情報を提示し、他方でユーザーが最適な選択を行えるようにする必要があります。これを行うために、基本原則を策定します。

1.少なからず少なめ

ユーザーに提供する情報が多いほど、ユーザーに対してより良い印象を与えるように思われます。ただし、ユーザーにこのデータをロードすると、ユーザーは一度にそれらを記憶します。

TypePadはかなり長いテーブルを使用します。情報内容と関税計画の違いを完全に説明する能力にもかかわらず、理解するのは非常に困難です。訪問者は各列がどの関税を表すかを覚えておく必要があります。さらに、表の下に関税の名前を複製することにより、著者はそれらの横に価格を下げることを忘れていました。価格情報を取得するには、表の中央を学習しているユーザーは表の上部に戻る必要があります。

良い例はConceptShareで見ることができます。表の4行目では、著者が2つの同様のパラメーターを組み合わせて、余分な行を削除できることに注意してください。非常に良い解決策。

訪問者が料金プランの違いを見ることができるのは非常に良いことです。情報はそれほど多くなく、少なくありません。バイヤーがあなたの店に来たら、あなたは主に2つの製品の類似性について話さないので、それは合理的ですか？ :-)ユーザーが探している情報を提供します。これが2番目の原則です。

2.類似点ではなく相違点を表示する

製品の違いを強調します。優れたアイデアは、主な特性（すべての料金表で利用可能）とこの料金表の機能の異なる設計と考えることができます。それらを強調するために、主要な特性に最も重要な機能を追加できます。

etribes.comの表を見てみましょう。私たちは何に注意を払うべきか、関税の違いは何かを見ています。選択されたアイコンはサイトの全体的なスタイルによく合い、気を散らすことなく訪問者を助けます。これは効果的で成功したソリューションです。

3.価格を選択します

価格は、ユーザーが製品またはサービスのサイトにアクセスしたときに最初に見たいものです。ユーザーができるだけ迅速かつ明確に価格を確認できることを確認してください。

通常、フォントの使用は製品の種類によって異なり、デザインの他の部分と組み合わせる必要があります。ほとんどの場合、この情報を強調するために、価格、名前、重要な見出しのフォントを増やします。デザイナーとして、価格がページ上でその場所を占めることを確認する必要があります。

また、価格で降順で関税を分類する価値があります。 F-viewing（ Jacob Nielsenの記事を見ることができるトピックについて）を使用してWebサイトを閲覧するため、一部のデザイナーはユーザーが最初に注意を引くように最も単純な文を左側に配置します。しかし、最も魅力的なオファーを表示することはデザイナーの利益になります。

4.視覚的な違いを使用する

検討中の例の多くには重大な欠点があります。視覚的な違いがあまりにも頻繁に使用され、多くの場合間違っています。デザイナーは関税計画をより魅力的にしようとしていますが、明らかにこのために、多くの緑のチェックマークと赤十字を使用しています。

そして、これらのアイコンがテーブル全体に散らばっている場合、次のユーザーごとに、情報を認識し、関税のすべての違いを覚えるのが難しくなります。

Beanstalk Webサイトでこの問題を解決しました。サポートされている機能は中立的な灰色の円で示され、注意をそらすことはありません。この機能がない関税の場合、セルは空のままになります。

Planhq.comは緑のチェックマークを使用しますが、赤十字を放棄しました。確かに、彼らはなぜですか？不要な要素を拒否できる場合、これを行う必要がありますか？

Goodbarry.comは、メインテーブルに注意を引くために色を使用します。以下のフォントサイズに注意を払って、料金プランの違いを強調し、訪問者が製品を試してみるのを促すために緑色をどのように使用するかを検討する価値があります。

したがって、視覚的な区別を使用する必要があり、視覚ノイズの使用は避ける必要があります。邪魔にならず、ユーザーを助けたり、情報を伝えたりしない場合は、アイコンを使用します。

また、アイコンと画像は非常に有用であり、実際に有用であることを忘れないでください。たとえば、商品の比較表では、写真で商品を見ることができます。

検討したほとんどすべての例では、異なる背景色を使用して料金プランを区別しています。デザイナーは、色彩理論と鮮やかな色を使用して、ユーザーが会社があなたに売りたい関税計画に注意を引くようにします。

5.ページを再現する

一部のデザイナーは、イラストとカラー画像を使用して関税計画を視覚的に区別しています。比phorは非常に頻繁に使用されます。たとえば、企業が複数の調査サービス料金を提供している場合、ライトバージョンに小さなボックスを使用し、企業バージョンに大きなボックスを使用することは異なります。これは多くのデザイナーが行うことです。

6.一貫性を保つ

このルールは、すべての設計要素に適用されます。同様のエラーがBigFilebox.comで発生しました：

2番目の表は、サイトの全体的な設計から外れています。

7.顧客を失うな

関税計画表は、販売の成功に重要な役割を果たします。関税表-製品の表面。常に利用可能であることが重要です。

このテーブルは、最新のブラウザだけでなく、あらゆる種類のブラウザやその他のデバイスでも機能するはずです。さまざまな効果を使用してテーブルを作成できますが、最終的には、CSSまたはJavaScriptが無効になっている場合でも、テーブルを使用する機能は常に維持する必要があります。

CSSとJSを無効にした場合のテーブルの表示例：