Každý produkt SaaS a předplacené webové stránky potřebují skvělou cenovou tabulku. Je to nejjednodušší způsob, jak sdílet informace s potenciálními kupujícími a vysvětlit rozdíly ve vašich plánech.

Ale s tolika webovými stránkami, které používají cenové tabulky, mohou být trochu zastaralé.

Tyto návrhy jsou některé z nejlepších, které jsem našel s novými trendy, barevnými schématy a čistým zážitkem, který podporuje interakce uživatelů. Pokud navrhujete vlastní tabulku cenových tabulek, pak vám tyto návrhy jistě dávají několik skvělých nápadů.

1. Algolia

Hostený vyhledávací produkt SaaS Algolia je čistý cenová stránka s materiálním designem a barevnými ikonami.

Každý sloupec používá odlišnou barvu v záhlaví, aby vynikla a vytvořila kontrast. Tabulky jsou poměrně jednoduché, takže je snadné konzumovat informace na první pohled.

Typicky najdete registrační tlačítka ve spodní části každého sloupce, ale Algolia používá jednu velkou CTA pod tabulkou. Tím se udržuje čistší a snižuje se potřeba duplikování tlačítek na více sloupcích.

01-algolia-search-saas-cenová tabulka

2. Uvolněte

The Stránka s cenou za uvolnění je také docela unikátní s levým sloupcem funkcí pro štítky. Najdete ji v mnoha dalších cenových tabulkách, ale ne vždy s tak hladkým designem.

Každý řádek používá kontrolní značky, které ukazují, které funkce jsou zahrnuty v každém plánu. Tyto řádky jsou velmi prostorné a záhlaví dokonce používají světle šedé pozadí pro vytváření kontrastu pro snadné skimming.

Nemluvě o fontech, které používají, vypadají fantasticky a skutečně učiní obsah snadné konzumovat.

02-tabulka s cenou za aplikaci

3. Symu

Nikdy jsem neviděl rysy v cenovém stolu, ale Symu dělá tuto práci. Každý sloupec má malý pokrok umístěný těsně nad seznamem funkcí, který ukazuje, jakou míru dostanete s každým plánem.

To vám rychle uchopí vaši pozornost a zašedlé rysy také zaujmou vaše oko.

Můj problém se světle šedým písmem je, že je těžké číst. Potenciální kupci možná nebudou vědět, na co chybějí s volným plánem, takže by si museli přečíst sloupec "Tým", aby jasně viděli všechny funkce v jednom seznamu.

Ale vizuální odstranění těchto funkcí se světlejším písmem znamená nedostatek , skvělý nástroj pro prodej a marketing.

03-symu-ceník-tabulka-greyed-text

4. Digitální oceán

Služba VPS Digital Ocean má své vlastní rotující cenovou tabulku protože nabízejí tolik různých plánů.

Většina nových návštěvníků začne s levnějšími plány, takže má smysl udržet je v pořádku. Můžete však kliknout nebo přejet přes seznam a procházet plány s vyššími cenami s větším výkonem a úložným prostorem.

Dalším rysem, které se mi líbí, je tlačítko "Vytvořit účet", které se zobrazí pouze pro vybraný plán. To vás upoutá vaší pozornost na jeden plán, abyste jej mohli porovnat s jeho sousedy a zjistit, co vám nejlépe vyhovuje.

04-standardní-kvapky-cenové tabulky

5. UsabilityHub

Tabulka cen UsabilityHub má šikovný design s podrobnostmi o pohybu nad každým prvkem. Různé účty vám umožňují provádět různé testy, ale novější uživatelé nemusí pochopit hodnotu těchto testů.

Pokud umístíte na ikonu informací vedle každé funkce, získáte další informace o tom, co to znamená a proč je to užitečné. Některé jsou jen funkce, jako je testování A / B, zatímco jiné jsou nastavení účtu, jako je týmová podpora nebo vlastní značka.

V případě většího sloupce týmu také zjistíte, že měsíční kotace se automaticky zvyšuje, když do plánu přidáte další osoby. To je skvělé pro týmy, které chtějí odhadnout náklady a získat rychlé odhady softwaru.

05-použitelnost-hub-tools-ceník

6. Optimální workshop

Optimální workshop používá na své cenové stránce spoustu značky a vlastní grafiku. Toto nemusí být přidáno přímo k tabulce samotné, ale přidává do prostředí stránky.

Hlavním rysem, který se mi líbí v tomto designu, je vestavěný měsíční / roční cenový přepínač. Často je uvidíte na cenových stránkách, ale obvykle jsou příliš malé. To dává návštěvníkům falešný smysl pro tvorbu cen, protože počáteční ceny mohou být nabízeny levněji za předpokladu, že uživatel chce roční plán.

Pomocí této cenové tabulky můžete jasně vidět, co získáte za měsíc, a jak porovnávat měsíční a roční náklady.

06-optimální ceny-díla

7. Vzduchový tanier

Zde je další design, který používá jasné barvy, aby získal pozornost. The Stránka pro stanovení ceny letecké přepravy udrží věci jednoduché a snaží se okamžitě upozornit na ceny.

Pokud se podíváte přímo nad stolem, uvidíte stejný měsíční / roční přepínač. Podívej, jak je to dost miniaturní, abyste na první pohled úplně chyběli? To je pěkný trik pro prodej, ale není to skvělé z pohledu UX.

Nejlepší částí této tabulky je efekt vznášení na každý řádek. Můžete se o každé funkci dozvědět pouze tím, že zjistíte, který plán nabízí přesně to, co potřebujete.

07-tabulka cenových tabulek

8. Pohled

Další návrh tabulky s informací o vznášení je Podívej se zpátky . Na každém řádku nenajdete popisovací prvek, ale je viditelný na nejsložitějších prvcích.

Další drobná volba návrhu, která se mi líbí, je, jak každý sloupec funkcí přidává na předchozí. Ve sloupci plánu "Pro" se uvádí, že nabízí vše v standardním plánu spolu s několika dalšími funkcemi.

Někdy to může odhodit návštěvníky, kteří nečtou pečlivě, protože mohou tento text lesknout. Ale je to skvělý způsob, jak šetřit místo a udržet tabulky čisté.

08-cenová tabulka-lookback

9. BuzzSumo

I když návrh je poněkud základní, musím říct Tabulka cen BuzzSumo má spoustu věcí správné. Měsíční / roční fakturační přepínač je jasný a dokonce můžete přesně vidět, kolik ušetříte tím, že přepnete na roční fakturaci.

Jejich seznam funkcí se zdá být přeplněný, ale je to docela jednoduché číst. A každý řádek používá funkci "Hover info" s popisky, které vysvětlují, co každá funkce znamená.

Moje jediná stížnost tady je estetika stránky. Bylo by to hezčí, kdyby se funkce připojily více do většího stolu s více ohraničeními nebo snad zebra. Ale UX je vynikající a to je to, co je nejdůležitější na cenové stránce.

09-buzzsumo-cenové tabulky

10. Litmus

E-mailový testovací sada Litmus je již po celá léta a je to de facto volba pro e-mailové zpravodaje. Jejich cenová stránka není příliš podrobná, ale pro potenciální zákazníky nabízí dost.

Používají trend označování "nejpopulárnějších" tím, že zdůrazňují jeden specifický plán, který se vymyká ostatním. Je to designová volba, která funguje dobře a podporuje více přihlášek pro středně pokročilé plány na levnějších.

Ale opravdu se mi líbí množství místa, které dostanete s každým řádkem. Funkce jsou vysvětleny přímo na stránce a některé funkce mají dokonce interní stránky s více detaily.

S čistým textem, pevnými hranicemi a spousta prázdných míst , tato cenová tabulka je jedním z nejvíce pragmatických návrhů v mém seznamu.

10-litmus-email-cenové tabulky

11. Stripe

Stripeova cenová stránka je neuvěřitelně jednoduché a je těžké ho dokonce nazvat tabulkou plných cen. Ale je to tak dobře navrženo, že jsem to musel jen zahrnout.

Cílem jakékoliv cenové tabulky je sdílet informace s potenciálními zákazníky a převést je na zákazníky placené. Návrh Stripe nabízí dva velmi jasné platební plány: Přímé platby nebo větší podnikové uspořádání.

Lidé, kteří hledí do Stripe, se nedostanou analýza paralýzy snaží se vybrat mezi pěti různými plány. Tabulka je snadno čitelná a nabízí snadný způsob výpočtu nákladů.

Ale pokud se vám líbí tento návrh stolu, můžete sestavit podobný cenový stůl a hodit jeden nebo dva další plány do mixu.

11-páska-cenová stránka