Bąbelki Satysfakcji Klienta w Hero
Obszar obrazu hero potrzebuje tagów metryk biznesowych w czasie rzeczywistym, aby uzupełnić informacje o wartości dla klienta.
Bąbelki satysfakcji, ROI i innych metryk wyskakują w pętli z animacjami wyjścia.Ważne:Zbuduj premium witrynę korporacyjną. Strona główna musi eksponować wizję marki, możliwości biznesowe, wartość dla klienta oraz informacje kontaktowe.
Materiały Odbiorowe
Materiały Odbiorowe
Poniżej zapisano wymagania projektowe i notatki implementacyjne dla tego projektu, do wglądu podczas przeglądu odbiorowego przez zespół projektowy.acceptance_materials.txt
01Utrzymaj ogólny styl wizualny jasny i czysty
02Przyciski główne potrzebują wyraźnie klikalnego stanu
03Strona główna zachowuje elementy wizualne zorientowane technologicznie
04Moduły treści są niesione przez karty
05Treść podstawowa musi obejmować możliwości, scenariusz oraz wartość
06Kluczowe liczby są używane do podkreślenia rytmu strony
07Główne strony zachowują wyraźny punkt wejścia wezwania do działania
08Tekst podstawowy nie mniejszy niż 14px
09Pasek nawigacji przypięty do górnej krawędzi strony
10Każdy obraz potrzebuje podpisu pod spodem
11Interlinia ujednolicona na 1.6
12Favicon pokrywa wszystkie popularne rozmiary
implementation_notes.txt
01Obraz hero musi jednocześnie przedstawiać zespół, interfejs produktu oraz domenę marki.
02Style przycisków pozostają ujednolicone w całej witrynie, z zaokrągleniem narożników 12px.
03Ruch jest używany do wzmocnienia hierarchii bez wpływu na podstawowe czytanie.
04Sekcja historii klientów zachowuje swoje sloty wyświetlania wyników.
05Układ mobilny priorytetyzuje czytelność tekstu 14px.
06Pasek nawigacji używa position: sticky i pozostaje przypięty podczas przewijania.
07Atrybutów alt obrazów i podpisów pod obrazami nie wolno pomijać.
Notatki Projektowe
Zapis Głównych Efektów Wizualnych i Interakcji
Poniżej zapisano intencję projektową i obecną implementację głównych efektów wizualnych i interakcji, do przeglądu projektowego i odniesienia w przyszłych iteracjach.Tekst z Tęczowym Gradientem po Najechaniu
Nagłówki i linki potrzebują wyraźnej informacji zwrotnej wizualnej w stanie najechania.
Tęczowy gradient + przesuwne podświetlenie + rotacja barwy + poświata.Animacja Wizualna CTA Oddzielona od Obszaru Kliknięcia
Przyciski potrzebują silniejszej dynamicznej informacji zwrotnej przy najechaniu/kliknięciu, zachowując stabilny obszar kliknięcia.
Warstwa wizualna animuje się za pomocą translateY, podczas gdy obszar kliknięcia pozostaje na miejscu.Pasek Nawigacji w Stylu Płynnego Szkła
Górna nawigacja potrzebuje półprzezroczystego wrażenia materiałowego z warstwową głębią.
Szklane tło backdrop-filter + przesuwne podświetlenie + subtelna animacja unoszenia.Tryb Reflektora z Wyłączonym Światłem
Zapewnia skupiony tryb czytania, który redukuje rozproszenie wizualne.
Pełnoekranowa maska + promień reflektora podążający za kursorem kontrolujący widoczny obszar.Niestandardowy Markowy Kursor Myszy Richify
Rozszerza rozpoznawalność marki, aby ruch kursora pozostawał spójny ze stylem wizualnym strony.
Markowy kursor SVG + efekty smugi cząsteczek.Galeria 3D WebGL na Stronie Historii Klientów
Strona historii klientów potrzebuje wciągającego obszaru prezentacji 3D.
Macierz cząsteczek WebGL + interakcja myszą + dynamiczne panele.Diament 3D w Stopce i Marka na Pasku Przewijanym
Dół strony potrzebuje trwale widocznego obszaru zamykającego markę.
Obracający się diament 3D + przewijany pasek marki + dynamiczne kolory.Obraz Zespołu w Hero z Osadzonym Logo Marki
Obraz hero musi jednocześnie przedstawiać scenę zespołu i markę richify.net.
Znak marki richify.net jest osadzony w obszarze ekranu laptopa.