bąbel czatu z 2014
Spędziłeś weekend nad typografią swojej strony. A potem wkleiłeś w róg okrągły bąbel, który wygląda, jakby przyjechał z cudzej strony z 2014. Ten rant jest o najbardziej olewanym elemencie designu na twojej stronie, o tym, czemu tak wychodzi, i o tym, jak wygląda czat, który naprawdę pasuje.
wiesz, o który chodzi
Okrągły. W jakimś odcieniu domyślnego niebieskiego. Ikonka dymka. Mała czerwona plakietka z „1”, za wiadomość, której nikt ci nie wysłał. Pięć sekund po załadowaniu strony wysuwa się powitanie z machającą ręką i pyta, w czym może pomóc, kiedy ty jeszcze próbujesz przeczytać nagłówek.
Otwierasz panel i to już inna strona. Inny font, inne rogi, inne cienie, nagłówek z czyimś wyobrażeniem o byciu miłym. Siedzi w rogu twojej starannej, wyrazistej strony jak naklejka na obrazie.
czemu tak jest
Większość widgetów czatu jest projektowana tak, żeby wyglądała jak dostawca czatu. Z ich perspektywy to ma sens. Bąbel to ich marka i pojawia się za darmo na tysiącach stron.
Dla ciebie znaczy to, że cała personalizacja to color picker i może przełącznik pozycji. Wybierasz kolor marki, bąbel zmienia kolor i dalej jest tym samym bąblem. Tyle że teraz w twoim kolorze.
vibe koderzy, widzimy was
Twoja strona ma swój styl. Nawet jeśli myślisz, że nie ma.
Może to domyślny shadcn z gray-200 na wszystkim. Może fioletowy gradient i nagłówek, który obiecuje zmienić całą branżę. Ciemna strona dev-toola, która chwali się szybkością fontem 72 punkty. Kremowe tło, zaokrąglone rogi i maskotka w kształcie glutka. Szeryfowa kursywa i „starannie dopracowane”. Helvetica i jedna czerwona kropka.
Nie oceniamy. Nasza strona to brutal: grube czarne ramki, kwasowa zieleń, wszystko małymi literami. Pastelowego bąbla na niej nienawidzilibyśmy tak samo. Tyle że każdy z tych stylów ma swoje zasady, a bąbel z 2014 łamie je wszystkie naraz.
co naprawdę znaczy „pasuje”
Kolor nie sprawi, że widget pasuje. Te rzeczy tak.
Font. Czat powinien używać twojego fontu albo chociaż bliskiego krewnego. Spookat ma 17 fontów hostowanych u nas plus systemowy font odwiedzającego i żaden nie przychodzi z zewnętrznego serwera fontów.
Kształt. Rogi, ramki, cienie i odstępy należą do stylu. Spookat ma ich 8: clean, glass, soft, terminal, paper, retro, swiss i brutal. Każdy udaje jakiś rodzaj stron, które ludzie naprawdę robią, w tym te wymienione wyżej.
Głos. Strona w stylu paper nie wita ludzi „hejką” z dwoma wykrzyknikami. Każdy styl Spookata ma własne powitanie i własny placeholder. Paper mówi „Drogi zespole…”. Terminal mówi „pisz i wciśnij enter”. Swiss mówi „Twoje pytanie”. Ten sam widget, inne maniery.
Kolor. Dowolny akcent. Tekst na nim sam wybiera czarny albo biały, zależnie od tego, co daje większy kontrast, więc twój neonowo limonkowy przycisk da się przeczytać.
Launcher. Ikonka, jeśli lubisz minimalizm, albo pigułka z twoim własnym tekstem. Lewo albo prawo, żebyś mógł trzymać go z dala od własnych przycisków.
Twoje logo. Siedzi w nagłówku panelu, wbudowane w sam widget, więc odwiedzający nie płaci za nie żadnym dodatkowym requestem.
telefony istnieją
Połowa zbrodni designerskich dzieje się na telefonie. Bąbel zasłania „dodaj do koszyka”. Panel otwiera się w małym pływającym okienku, w którym nie da się pisać, kiedy wyjedzie klawiatura.
Na małym ekranie panel Spookata idzie na pełny ekran i szanuje notcha oraz pasek home. Na telefonie w poziomie też idzie na pełny ekran, bo inaczej nikt by nic nie napisał. Na desktopie panel wyrasta z launchera. Na telefonie wjeżdża od dołu jak arkusz. Jeśli odwiedzający poprosił system o ograniczenie animacji, panel po prostu się pojawia z lekkim fade’em.
i nic nie waży
Standardowa wymówka dla brzydkiego widgetu to „to tylko narzędzie do supportu”. Spoko, ale w takim razie nie powinno też być ciężkie. Nasz ma poniżej 4 kb przed kliknięciem, robi 0 requestów do naszego API, dopóki ktoś go nie otworzy, a CSS każdego stylu ładuje się dopiero z panelem.
nie musisz nawet klikać
Styl, font, akcent, strona i powitanie mieszczą się w jednej linijce window.Spookat w twoim kodzie, więc agent edytuje je jak wszystko inne. Albo powiedz agentowi, żeby dopasował czat do twojej strony. Ma narzędzia do ustawienia stylu, fontu i akcentu i do publikacji, a człowiek może ją cofnąć w logu aktywności w dashboardzie.
Chcesz najpierw zobaczyć wszystkie 8 obok siebie? Są w przeglądzie stylów.
test
Zrób screena swojej strony z otwartym czatem. Zasłoń kciukiem logo. Czy czat wygląda, jakby był częścią designu od początku?
Jeśli wygląda jak reklama czyjegoś produktu, to jest bąbel z 2014. Twoja strona zasługuje na więcej.