Każdy produkt SaaS i witryna subskrypcji wymaga doskonałej tabeli cen. To najprostszy sposób na dzielenie się informacjami z potencjalnymi nabywcami i wyjaśnienie różnic w swoich planach.

Ale przy tak wielu stronach internetowych z tabelami cenowymi mogą one nieco się zestarzeć.

Te projekty to jedne z najlepszych, jakie udało mi się znaleźć ze świeżymi trendami, schematami kolorów i czystym doświadczeniem, które zachęcają do interakcji z użytkownikiem. Jeśli projektujesz niestandardową tabelę cenową, te projekty z pewnością dadzą Ci kilka fajnych pomysłów.

1. Algolia

Wyszukiwany produkt SaaS Algolia jest czysty strona cenowa z materialnym stylem i kolorowymi ikonami.

Każda kolumna używa innego koloru w nagłówku, aby wyróżnić się i stworzyć kontrast. Tabele są dość proste, więc informacje są łatwe do skonsumowania na pierwszy rzut oka.

Zazwyczaj znajdziesz przyciski rejestracji u dołu każdej kolumny, ale Algolia używa jednego dużego wezwania do działania pod tabelą. Dzięki temu jest czystszy i zmniejsza potrzebę duplikowania przycisków w wielu kolumnach.

01-algolia-search-saas-cennik-stół

2. Zwolnienie

The Slack price page jest również dość unikalny z kolumną funkcji po lewej stronie dla etykiet. Możesz znaleźć to w wielu innych tabelach cenowych, ale nie zawsze z tak gładkim wzorem.

Każdy wiersz używa znaczników wyboru, aby pokazać, które funkcje są uwzględnione w każdym planie. Te rzędy są bardzo obszerne, a nagłówki używają nawet jasnoszarego tła, aby stworzyć kontrast dla łatwego skimmingu.

Nie wspominając już o tym, że czcionki, których używają, wyglądają fantastycznie i naprawdę sprawiają, że zawartość jest łatwa w użyciu.

02-slack-app-pricing-table

3. Symu

Nigdy nie widziałem wyszarzonych funkcji w tabeli cenowej, ale Symu sprawia, że ​​to działa. Każda kolumna ma mały pasek postępu umieszczony tuż nad listą funkcji, pokazującą, ile masz przy każdym planie.

To przyciąga twoją uwagę szybko, a wyszarzone cechy również przyciągają wzrok.

Mój problem z jasnoszarą czcionką polega na tym, że trudno ją odczytać. Potencjalni kupujący mogą nie wiedzieć, co tracą dzięki darmowemu abonamentowi, więc będą musieli przeczytać kolumnę "Zespół", aby wyraźnie zobaczyć wszystkie funkcje na jednej liście.

Ale wizualne usunięcie tych funkcji za pomocą lżejszej czcionki sugeruje niedobór , doskonałe narzędzie do sprzedaży i marketingu.

03-symu-pricing-table-greyed-text

4. Ocean cyfrowy

Usługa VPS Digital Ocean ma swoją własną obrotowy stół cenowy ponieważ oferują tak wiele różnych planów.

Większość nowych użytkowników rozpocznie od tańszych planów, więc warto mieć je w zasięgu wzroku. Możesz jednak kliknąć lub przeciągnąć listę, aby przeglądać plany o wyższej cenie z większą mocą i przestrzenią dyskową.

Inną funkcją, którą lubię, jest przycisk "Utwórz konto", który pojawia się tylko dla wybranego planu. To zwraca twoją uwagę na ten jeden plan, abyś mógł porównać to z sąsiadami i zobaczyć, co działa najlepiej dla ciebie.

04-standardowy-stół z cenami kropelek

5. UżytecznośćHub

Tabela cen w dniu UsabilityHub ma ładny design z szczegółami zawisu dla każdej funkcji. Różne konta umożliwiają uruchamianie różnych testów, ale nowi użytkownicy mogą nie rozumieć wartości tych testów.

Jeśli umieścisz ikonę informacji obok każdej funkcji, uzyskasz więcej informacji o tym, co to znaczy i dlaczego jest przydatna. Niektóre to tylko funkcje, takie jak testy A / B, podczas gdy inne to ustawienia kont, takie jak wsparcie dla zespołu lub niestandardowe oznaczanie marki.

W przypadku większej kolumny zespołu zauważysz także, że miesięczny koszt wzrasta automatycznie po dodaniu większej liczby osób do planu. Jest to świetne rozwiązanie dla zespołów, które chcą oszacować koszty i uzyskać szybkie prognozy dotyczące oprogramowania.

05-usability-hub-tools-pricing

6. Optymalny warsztat

Optymalny warsztat używa dużej ilości brandingu i niestandardowej grafiki na swojej stronie cenowej. To może nie dodawać bezpośrednio do samej tabeli, ale dodaje do atmosfery strony.

Główną cechą, którą podoba mi się w tym projekcie, jest wbudowana miesięczna / roczna zmiana ceny. Często widzisz je na stronach cenowych, ale zazwyczaj są one o wiele za małe. Daje to odwiedzającym fałszywe poczucie wyceny, ponieważ początkowe ceny można obniżyć taniej, zakładając, że użytkownik potrzebuje rocznego planu.

Dzięki tej tabeli cenowej możesz wyraźnie zobaczyć, co otrzymujesz miesięcznie i jak porównać miesięczne i roczne koszty.

06-optymalne wyceny warsztatowe

7. Zgodny z prawem

Oto inny projekt, który wykorzystuje jasne kolory, aby przyciągnąć uwagę. The Strona z cenami dozwolonymi zachowuje prostotę i stara się natychmiast zwrócić twoją uwagę na ceny.

Jeśli spojrzysz bezpośrednio nad tabelą, zobaczysz ten sam przełącznik miesięczny / roczny. Zobacz, jak to jest na tyle małe, aby całkowicie przegapić na pierwszy rzut oka? To fajna sztuczka dla sprzedaży, ale nie jest świetna z punktu widzenia UX.

Najlepszą częścią tej tabeli jest efekt zawieszki dodany do każdego wiersza. Możesz dowiedzieć się o każdej funkcji po prostu przez najechanie kursorem, aby dowiedzieć się, który plan oferuje dokładnie to, czego potrzebujesz.

07-stolik z cenami powietrza

8. Odliczanie

Kolejny projekt tabeli z informacjami o najechaniu jest Lookback . W każdym rzędzie nie znajdziesz podpowiedzi hover, ale jest ona widoczna na najbardziej złożonych elementach.

Innym niewielkim wyborem projektu, który podoba mi się, jest to, jak każda kolumna funkcji dodaje do poprzedniej. Kolumna dla planu "Pro" zauważa, że ​​oferuje wszystko w standardowym planie wraz z kilkoma dodatkowymi funkcjami.

Czasami może to zrzucić odwiedzających, którzy nie czytają uważnie, ponieważ mogą glosować nad tym tekstem. Ale to świetny sposób, aby zaoszczędzić miejsce i utrzymać swoje stoły w czystości.

08-cennik-tabela-powrót

9. BuzzSumo

Chociaż projekt jest nieco podstawowy, muszę powiedzieć Tabela cen BuzzSumo robi wiele rzeczy w porządku. Przełącznik rozliczeń miesięcznych / rocznych jest przejrzysty, a Ty możesz nawet zobaczyć, ile zaoszczędzisz, przechodząc na roczny rachunek.

Lista ich funkcji jest troszkę zatłoczona, ale jest dość łatwa do przeczytania. W każdym wierszu jest używana funkcja informacji o najeździe z etykietami narzędzi, które wyjaśniają znaczenie poszczególnych funkcji.

Moją jedyną skargą tutaj jest estetyka strony. Byłoby ładniej, gdyby funkcje łączyły się bardziej w większy stół z większą ilością obramowań lub być może z paskiem zebry. Ale UX jest wspaniały i to jest najważniejsze na stronie cenowej.

09-buzzsumo-tabela-ceny

10. Lakmus

Pakiet testowy e-mail Litmus istnieje od lat i jest to de facto wybór dla biuletynów e-mail. Ich strona cenowa nie jest zbyt szczegółowy, ale oferuje wystarczająco dużo dla potencjalnych nabywców.

Korzystają z trendu etykietowania "najbardziej popularnego", podkreślając jeden konkretny plan, który wyróżnia się na tle pozostałych. Jest to wybór, który działa dobrze i zachęca do większej liczby rejestracji w przypadku planów pośrednich niż tańszych.

Ale bardzo podoba mi się ilość miejsca, jaką otrzymujesz w każdym rzędzie. Funkcje są wyjaśnione bezpośrednio na stronie, a niektóre funkcje mają nawet wewnętrzne strony z większą ilością szczegółów.

Z czystym tekstem, pełnymi ramkami i mnóstwo białych znaków , ta tabela cen jest jednym z najbardziej pragmatycznych projektów na mojej liście.

10-litmowy-e-cennik-tabeli

11. Pasek

Strona z cenami pasków jest niezwykle prosty i ciężko jest nawet nazwać to tabelą pełnych cen. Ale jest tak dobrze zaprojektowany, że musiałem go tutaj zawrzeć.

Celem każdej tabeli cenowej jest dzielenie się informacjami z potencjalnymi klientami i przekształcanie tych osób w płatnych klientów. Projekt Stripe oferuje dwa bardzo przejrzyste plany płatności: płatności bezpośrednie lub większe konfiguracje przedsiębiorstw.

Ludzie spoglądający na Stripe nie wpadną analiza paraliżu próbując wybrać spośród pięciu różnych planów. Tabela jest szybka do odczytania i oferuje łatwy sposób obliczania kosztów.

Ale jeśli podoba Ci się ten projekt stołu, możesz stworzyć podobną tabelę cenową i dodać do niej jeszcze jeden lub dwa plany.

Strona 11-stripe-pricing