Podstawowe porady dotyczące konwersji witryny na komputery stacjonarne na urządzenia mobilne
Jako że popularność urządzeń mobilnych przewyższa popularność komputerów stacjonarnych, projektanci muszą mieć na uwadze mobilność. Mobilne-pierwsze jest popularne jako technika, ponieważ łatwiej jest skalować mobilne, niż skalować pulpit.
Czasami jednak wybór jest usuwany z twoich rąk. Zazwyczaj projektanci dostosowują istniejące projekty komputerów stacjonarnych do urządzeń mobilnych. A ponieważ niektóre elementy nie tłumaczą się dobrze, najważniejsi projektanci rozumieją, jakie konkretne dostosowania należy wprowadzić podczas projektowania małego ekranu. Oto jak…
Obejmują minimalizm
Minimalizm jest popularny w projektowaniu stron internetowych od lat, po prostu dlatego, że często ułatwia użyteczność i ładnie wygląda. Jeśli chodzi o urządzenia mobilne, minimalizm jest mniej estetycznym wyborem, ponieważ jest oparty wyłącznie na użyteczności.
Według Nielsen Norman Group, cechy cięcia są koniecznością w projektowaniu mobilnym. Co to oznacza dla projektantów, którzy próbują zbudować witrynę mobilną z już istniejącego pulpitu?
Oznacza to rezygnację z tego, co nie jest istotne dla użytkowników mobilnych. Na przykład, jeśli przenosisz sklep e-commerce z komputera na telefon komórkowy, przechowuj taką samą liczbę produktów w witrynie mobilnej; Ma to sens tylko dlatego, że kupujący chcą znaleźć wszystko, co ma do zaoferowania sklep internetowy, tak jak sklep internetowy chce pokazać wszystko, co ma do sprzedania użytkownikom witryny. Jednak duża karuzela reklamowa z najnowszymi ofertami może być rozsądnie obniżona.
Ukryj nawigację
Jedną z najczęstszych funkcji na ekranach mobilnych jest menu hamburgerów, czyli prawie wszechobecna mała ikonka z trzema poziomymi liniami ułożonymi jeden na drugim. Jest to kolejny doskonały przypadek, w którym mniejszy rozmiar ekranu mobilnego zmusza projektantów do zmiany elementów, które mają wyglądać w określony sposób na komputerach.
Pomimo podzielonej opinii na temat obecności menu hamburgerów, jest on dość powszechny na ekranach urządzeń mobilnych, ponieważ jest to najlepsze rozwiązanie, które znaleźli projektanci do zmniejszania zakresu menu nawigacyjnego z komputerów stacjonarnych na urządzenia mobilne.
Zajrzyj na stronę słynnego szefa kuchni Bobby'ego Flay'a do swojej sieci restauracji Bobby's Burger Palace. Zgodnie z oczekiwaniami menu nawigacyjne jest ułożone poziomo u góry strony głównej, ale po przejściu na wersję mobilną witryny menu horyzontalne zniknęło. Na jego miejscu znajduje się schludne i uporządkowane menu hamburgera, w tym samym miejscu ekranu, w którym na pulpicie pojawi się dłuższe menu poziome.
Walmart korzysta również z menu hamburgera w procesie przejścia z projektowania na komputer stacjonarny.
W swojej witrynie na komputery Walmart wyświetla rozwijaną nawigację "Wszystkie działy", która otwiera drugą warstwę opcji nawigacyjnych na tej samej stronie. W witrynie mobilnej funkcja ta nie jest jednak możliwa ze względu na mały rozmiar ekranu, dlatego zaprojektowano zamiennik: druga warstwa opcji nawigacyjnych znajduje się w menu hamburgera, a te otwierają coraz więcej opcji nawigacyjnych przy każdym wyborze - prawie jak przerzucanie stron książki od lewej do prawej.
Przejdź do pojedynczej kolumny
Biorąc pod uwagę fakt, że prostsze jest po prostu lepsze, jeśli chodzi o projektowanie mobilne, dobrze zrobisz dla swoich klientów, jeśli zauważysz, że układ jednokolumnowy jest czystszy i łatwiejszy w obsłudze dla użytkowników na mniejszym ekranie. Dużą zaletą układu z jedną kolumną jest to, że pozbywasz się przewijania w poziomie, tak jakbyś miał dużo tekstu na stronie i chciał, aby czytelnicy przesuwają ekran od lewej do prawej strony, aby czytać dalej.
Po wprowadzeniu układu jednokolumnowego usprawniasz obsługę, zachęcając użytkowników do przewijania w dół, aby przeczytać lub kliknąć link, który chcą zobaczyć na nowej stronie. To uderzenia zmuszają ich do przesuwania od lewej do prawej, co jest trudniejsze do zrobienia niż po prostu przewijanie w dół, zwłaszcza gdy weźmiesz pod uwagę położenie kciuka użytkownika względem tego, jak trzyma urządzenie mobilne.
Strona internetowa gazety The New York Times zawiera wiele kolumn. Jest łatwy w użyciu na pulpicie, kiedy użytkownicy klienta mogą po prostu przesuwać kursor z lewej do prawej, bez problemów na gładziku lub myszy.
Oczywiście strona mobilna New York Timesa rozumie, jak to wszystko musi się zmienić na mniejszych ekranach, dlatego wprowadza czystą i wydajną konstrukcję z jedną kolumną, która zwiększa wygodę użytkownika, ponieważ czytelnicy mogą bez wysiłku przewijać w dół, aby uzyskać więcej treści za pomocą swoich kciuków. .
Względy mobilne
Ze względu na wpływ urządzeń przenośnych na dzisiejszych użytkowników, projektanci muszą zawsze projektować urządzenia mobilne. Nie wystarczy zaprojektować stronę mobilną wraz ze stroną na komputery i nazwać to projektowaniem na urządzenia mobilne!
Projektowanie na urządzenia mobilne oznacza w rzeczywistości uwzględnienie konkretnych dostosowań, które musisz wprowadzić w witrynie swojego klienta podczas projektowania małego ekranu. Obejmuje to wszystko, o czym rozmawialiśmy powyżej, od minimalizmu w projektowaniu do ukrywania paska nawigacyjnego po przejście do układu z jedną kolumną.
Przyjmując te najlepsze praktyki w swoim zestawie umiejętności, utworzysz witryny, które idealnie pasują do urządzeń mobilnych.