Zmiany w projekcie Apple.Com
Apple.com w zeszłym tygodniu poddano go pewnym korektom, zmianom, które, jeśli nie zwracałeś wystarczającej uwagi, być może nawet nie zauważyłeś.
Chociaż wiele raportów odnosi się do tego jako "przeprojektowanie", uważam, że trudno jest go sklasyfikować jako taki. Na pewno są pewne znaczące zmiany, ale zmiany nie są dokładnie całkowitą zmianą tak jak miało to miejsce w przypadku CNN.com pod koniec 2009 r.
Niemniej jednak zmiany są znaczące dla projektantów stron internetowych, więc krótko ich przyjrzę tutaj. Jeśli w zmianach, o których zapomniałem wspomnieć, jest cokolwiek, nie krępuj się komentować.
Przeprojektowany pasek nawigacyjny
Najważniejszą zmianą (choć wciąż nieco subtelną) jest wygląd paska nawigacyjnego. Apple ma jeden z tych pasków nawigacyjnych, które, pod względem wzornictwa, wszyscy kochają i zazdroszczą. Wydaje się niemożliwe, aby można go było poprawić. Cóż, w jakiś sposób znaleźli sposoby, aby uczynić go jeszcze lepszym i bardziej intuicyjnym.
Oto stary pasek nawigacyjny:
Oto nowy:
Zmiany zawierają:
- Jest ciemniej
- Gradient został zastąpiony przez odważniejszy błyszczący wygląd
- Wygląd logo jest uproszczony
- Pole wyszukiwania jest mniejsze (więcej informacji poniżej)
Myślę, że naprawdę potrzeba świetnego zespołu projektantów, aby wprowadzić naprawdę istotne zmiany w wyglądzie bardzo ważnego elementu interfejsu użytkownika, jednocześnie sprawiając wrażenie, że nic się nie zmieniło. Po prostu pokazuje, że szczegóły wizualne często nie są tak ważne, jak ogólna charakterystyka projektu.
Elastyczne okno wyszukiwania (tylko WebKit)
Będąc oczywiście stronnikiem WebKit, zespół projektowy Apple uwzględnił kilka ulepszeń związanych z WebKit, z których jedno jest powiązane z polem wyszukiwania.
W większości przeglądarek kliknięcie w polu wyszukiwania rozjaśni tło, aby uzyskać bardziej czytelną biel. W przeglądarce Chrome lub Safari pole wyszukiwania animuje używanie przejść CSS3, aby stać się szerszym i prawdopodobnie nieco bardziej użytecznym. Poniższy zrzut ekranu pokazuje pole wyszukiwania w Chrome po animacji, aby stać się szerszym:
Aby dopasować rozmiar pola wyszukiwania, inne elementy nawigacji i logo zmieniają rozmiar.
Podoba mi się ta funkcja; dodaje poczucie intuicyjności. Ale ma ona, moim zdaniem, niewielką wadę: po usunięciu fokusu nie wraca do stanu początkowego. Oczywiście, jeśli coś zostało wpisane w polu wyszukiwania, to nie chciałbyś, aby rozmiar się zmienił, ale myślę, że powinien powrócić do normalnego stanu, jeśli straci fokus i pozostanie pusty.
Oczywiście, ponieważ jest bardzo mało prawdopodobne, aby ktokolwiek kliknął w pole wyszukiwania i nie wpisał niczego, przypuszczam, że jest to niewielkie zaniedbanie.
Animowane wejście paska nawigacji (tylko WebKit)
Kolejną małą funkcją WebKit-only jest animowany wpis paska nawigacji. Nie pamiętam już wcześniej tego efektu na swojej stronie, więc zakładam, że to kolejna nowa funkcja. Animowany wpis pojawia się tylko na stronie głównej i tylko raz na sesję przeglądarki. Jest to dobra praktyka i dobra lekcja dla programistów dodających animowane efekty do ich interfejsów.
Jak pokazano na powyższym ekranie, pasek nawigacyjny wchodzi z poza ekranem, prawdopodobnie za pomocą animacji klatki kluczowej CSS3, wraz z JavaScriptem, aby kontrolować, kiedy animacja powinna lub nie powinna wystąpić.
Animowane przeglądarki produktów (tylko WebKit)
Innym ostatnim dodatkiem jest użycie animacji na niektórych stronach produktów. Animacje oparte na CSS3 są używane na Prochowiec i iPod przeglądarki produktów, z których jedna jest pokazana poniżej:
Produkty pojawiają się w momencie pierwszego pojawienia się na stronie, a jeśli przełączasz się między podkategoriami, widoczne produkty znikają, a nowe wskakują na swoje miejsce. Odbywa się to za pomocą kodu opartego na klatce kluczowej CSS3, niektóre z nich pokazano poniżej:
W przeglądarkach innych niż WebKit animacja przeglądarki produktu przełącza się na blaknięcie oparte na języku JavaScript. Mimo że tego typu rzeczy nie są idealne w każdych okolicznościach (ponieważ zasadniczo jest to "rozwidlenie kodu"), jest to realistyczna opcja dla programistów i projektantów, którzy chcą kodować najlepsze przeglądarki i oferować mniej rozszerzoną funkcjonalność dla reszty .
Pole wyszukiwania Automatycznie sugeruj
[AKTUALIZACJA] Jak zauważyło wiele osób w komentarzach, autosugestia nie jest nową funkcją. Włączenie tego jako "nowej funkcji" zostało oparte na innym artykule, który stwierdził, że autosugestia była nowa. Niemniej jednak zachowamy tę sekcję, ponieważ jest to dobra funkcja, która może sprawić, że strona internetowa będzie bardziej użyteczna i będzie dobrym przykładem dla innych programistów i projektantów, jeśli pasuje ona do ich projektu.
Podczas wpisywania zapytania pojawia się menu rozwijane z automatyczną propozycją Ajax:
Jak pokazano na powyższym zrzucie ekranu, nie tylko rozwijane wyniki wyszukiwania są zgodne z wpisanymi znakami, ale wyniki są uzupełnione zdjęciami i opisami produktów. Sądzę, że zdjęcia są bardziej wartościowe w tym miejscu niż opisy, ale ogólnie może to usprawnić wyszukiwanie produktów i konwersje.
Coś jeszcze?
Wydaje się, że dotyczy to poważnych zmian w ostatnim przeprojektowaniu projektu Apple.com. Czy są jakieś inne znaczące zmiany w projekcie lub kodzie, o których tu nie wspomniałem?
Ten post został napisany wyłącznie dla Webdesigner Depot przez Louisa Lazarisa, niezależnego pisarza i programistę. Louis ucieka Imponujące sieci gdzie publikuje artykuły i samouczki dotyczące projektowania stron internetowych. Możesz śledź Louisa na Twitterze lub skontaktuj się z nim za pośrednictwem swojej strony internetowej.
Co sądzisz o zmianach w projekcie Apple.com? Czy są jakieś zmiany, o których tu nie wspomnieliśmy?