Jak zaplanować aranżację treści dla projektowania responsywnego
W ostatnim poście omówiłem jak treści wizualne odnosi się do projekt układu. Temat ten jest jednak bardzo szczegółowy i dzieli się na wiele podtematów, z których jeden jest organizacja wizualna dla responsywnych układów.
W tym poście chciałbym zagłębić się w treść responsywną, aby przyjrzeć się najlepszym praktykom przestawianie treści na mniejsze ekrany. W projektowaniu UI i UX nie ma jednej poprawnej odpowiedzi dla każdego projektu, ale są trendy, które działają dobrze, z tych trendów możesz budować własne pomysły.
Zmień układ siatek na listy
Każda strona internetowa używa jakiegoś rodzaju siatki, czy jest widoczna, czy nie. Zawartość w solidnej siatce często grupuje się poziomo na szerszych monitorach, ale nie ma to sensu w przypadku mniejszych urządzeń. Najlepszym rozwiązaniem jest rozbicie tych siatek na mniejsze ekrany i konwertować elementy na listy.
Przykład 1: Rada Miasta Wellington
Spójrz na stronę internetową Rady Miasta Wellington, która korzysta z wielu sekcje w stylu siatki na stronie głównej.
Jest mały pokaz slajdów z kwadratowymi linkami zmniejsza się gdy zmienia się okno przeglądarki. Sekcja stopki również staje się mniejszy, i ostatecznie konwertuje na pionową listę linków.
W przypadku bardzo małych telefonów o szerokości 320px należy zaprojektować rozmiar urządzenia. W przypadku iPhone'a urządzenie jest wyższe niż szersze, więc sensowne jest zorganizowanie treści w ten sposób.
Przykład 2: Burgery Mooyah
Spójrz na stronę główną Mooyah i spróbuj zmienić rozmiar układu. Jest mały obszar pokazu slajdów, który zawiera trzy elementy na ekranie pulpitu, ale to kurczy się aby wyświetlić tylko jeden element na telefonie komórkowym (dodając więcej ukrytych slajdów do widżetu).
Dwa pudełka reklamowe reklamujące aplikację i menu Mooyah pozostają niezmienne obok siebie aż ekran stanie się wystarczająco mały zmienić ich położenie w pionie.
The “Połącz się z nami!” Sekcja zmienia także treść, aby każdy post społecznościowy dostaje jak najwięcej miejsca. Ogólnie rzecz biorąc, monitory szerokoekranowe są najszersze, a ekrany smartfonów są najwyższe.
Przykład 3: Rynek tematyczny
Podczas projektowania układu z siatką należy rozważyć zarówno szeroki, jak i wysoki styl układu przed napisaniem pojedynczej linii kodu. W ten sposób będziesz przygotowany buduj punkty przerwania, które mają sens.
Powinna być strona z pełnym układem siatki zmniejszyć rozmiar pudełek przed rozbiciem na nową linię. Na przykład, Theme Market ma stała maksymalna szerokość 1240, a siatka zawiera cztery bloki na rząd.
Gdy ekran staje się mniejszy, te bloki zmniejszyć szerokość, ale ewentualnie awaria do zostaw trzy pola na rząd. W najmniejszym rozmiarze otrzymujesz jedno pudełko na rząd i to ma dużo miejsca aby tekst i zdjęcia świeciły.
Zawsze jest równowaga utrzymywanie jak największej ilości informacji w połączeniu z potrzebą uczynić tekst czytelnym. Im bardziej budujesz układy siatki, tym łatwiej będzie to znaleźć równowaga układu treści.
Ukryj lub usuń kolumny
Szersze monitory i więcej wsparcia przeglądarki Pozwól programistom na tworzenie niezwykle złożonych układów. Często widzę blogi z trzy lub nawet cztery kolumny zajmują dużą część ekranu.
Jednak mniejsze urządzenia wymagają przepływu treści ma sens w pionie. Znalazłem dwie opcje obsługa nadmiernych pasów bocznych:
- Upuść je pod główną treścią
- Ukryj je całkowicie
Przykład 1: Zatrzymaj naciśnij
Spójrz na stronę Stop Press. To ma cztery pionowe kolumny na moim monitorze komputera.
Lewa kolumna to pionowe menu nawigacyjne, następna kolumna to główna kolumna treści z najnowszymi artykułami. Następnie mamy dwie różne kolumny paska bocznego przepełnione dodatkowymi “na bok” zawartość.
Gdy zmienia się okno przeglądarki, te kolumny powoli zmniejszać rozmiar. Pierwszą z nich jest lewa nawigacja, która zostaje ukryta za ikoną menu hamburgera.
Następny punkt przerwania ukrywa środkową kolumnę wraz z górnymi przyciskami udostępniania społecznościowego. W końcu na najmniejszych ekranach skrajny prawy pasek boczny całkowicie znika pozostawiając tylko główną kolumnę środkową treści.
Żadna zawartość paska bocznego nie pojawia się pod główną treścią. Jego całkowicie ukryty, i jest to całkowicie akceptowalny wybór zmniejszyć obciążenie strony i utrzymywać wysokość paska przewijania w przyzwoitym rozmiarze.
Z drugiej strony wiele blogów przenieś pasek boczny poniżej głównej zawartości jak w Concept Art Empire, które w końcu zawiera powiązane posty na pasku bocznym upuść poniżej zawartości.
Przykład 2: Blog Wishpond
Blog Wishpond również całkowicie usuwa pasek boczny z ekranu na mniejszych rzutniach. Ten obszar paska bocznego zazwyczaj zawiera reklamy, formularze rejestracji i powiązane linki do postów. Żadna z tych treści nie jest istotna, ale może zwiększyć wartość dla odwiedzających.
Lubię śledzić podejście hybrydowe gdzie przesuwam pasek boczny pod treścią, ale także ukryję kilka elementów na pasku bocznym za pewnym punktem przerwania.
Na przykład, jeśli mam trzy bloki reklamowe w pełnym układzie, mogę ukryć dwie z tych przestrzeni reklamowych na komórce. To udostępnia zawartość paska bocznego ale nie zaśmieca strony z nadmierną zawartością.
Przykład 3: Madame Gautier
Podoba mi się także to, jak Madame Gautier używa ich “Najnowsze wiadomości” pasek boczny na stronie głównej. To w końcu spada poniżej zawartości, i zajmuje pełną pozycję widoku na stronie.
Prawie każda strona internetowa będzie miała przynajmniej jeden pasek boczny w projekcie. Niezależnie od tego, czy jest to pasek boczny w całej witrynie, czy po prostu coś, co pojawia się na szablonie strony, styl projektowania obok siebie jest popularny, ponieważ to pasuje do większej ilości treści na ekranie.
To Twój wybór jak obsługiwać zawartość. Możesz upuścić pasek boczny niżej, ukryć go całkowicie lub użyć hybrydy tych dwóch technik. Ale powinieneś dokonać wyboru na podstawie trafności paska bocznego, i jego konieczność do strony.
Dostosuj i ściśnij marginesy
Zawsze będzie punkt, w którym treści nie można wycisnąć dalej, a jedna sekcja musi spadać poniżej drugiego.
Przez dostosowywanie marginesów Przed obniżeniem zawartości strony dajesz czytelnikom szerszy wybór treści do wyboru.
Przykład 1: Jeden świat
Stopka w One World jest doskonałym przykładem. To ma linki stopki na całej stronie płynęły dobrze z formularz rejestracji e-mail po lewej.
W miarę zmiany układu marginesy i odstępy między tymi elementami zmniejszają się. Kolumny linków zbliżyć się do siebie, i formularz rejestracji robi się trochę mniejszy, zbyt.
W pewnym momencie ma to sens upuść linki pod formularzem rejestracji, i daj stopkę dużo miejsca do oddychania.
Tak, strona wydłuża się i tak, przewijanie w dół wymaga więcej wysiłku, ale w tych mniejszych punktach przerwania można założyć, że użytkownicy są na urządzeniach zorientowanych pionowo.
Przykład 2: Złote wyspy
Innym przykładem, który kocham, jest strona główna Golden Isles unikalny styl nawigacji. Po zmianie rozmiaru okna przeglądarki łącza nawigacji ściśnij razem. W końcu oni zerwać z jednej linii w dwa rzędy, a następnie w kolumny w najmniejszym rozmiarze.
Inne elementy na stronie postępuj według tego samego wzoru. Ten przykład demonstruje moc zmiana rozmiaru marginesów przed całkowitą zmianą układu.
Pionowy przepływ na mniejszych ekranach
Zawartość strony powinna płynąć naturalnie, i wyrównanie pionowe ma sens na telefonie komórkowym. Oznacza to, że należy wziąć pod uwagę bloki treści na stronie do odpowiednio zaktualizuj styl zawartości. Obejmuje to akapity, nagłówki, cytaty blokowe, listy nieuporządkowane, a także niestandardowe pola zawartości.
Przykład 1: BodyBuilding.com Single Post
Weźmy na przykład ten wpis BodyBuilding, który używa małych pudełek pokazać różne treningi glute.
Te pola zawierają miniatury po prawej stronie zademonstrować ćwiczenie. Na mniejszych ekranach te miniatury rozbić się na nową linię, i ostatecznie układać jeden na drugim.
Twój responsywny CSS powinien brać pod uwagę te małe drobiazgi dla każdej strony witryny.
Przykład 2: Targi próżności
Aby uzyskać większy przykład, zajrzyj na stronę domową Vanity Fair całkowicie przestawia opisywany suwak historii. Na pulpicie pełnoekranowym historie zawierają nagłówki z jednym polecanym obrazem pokazanym z boku. W miarę zmiany rozmiaru przeglądarki, ta sekcja najlepszych artykułów staje się przesuwną karuzelą.
Sam interfejs całkowicie się zmienia dodając nawigację punktową, strzałki i polecane obrazy dla każdej historii na liście. Ich pełnoekranowa lista artykułów to więcej “pionowy”, ale ten układ jest trudniejszy w obsłudze na ekranie mobilnym, więc zmiana na przesuwną karuzelę jest lepszą opcją.
Myśleć więcej o przepływie użytkownika zamiast przepływu treści. Zawartość nie zawsze musi być zmuszany do pionowego układu na małym ekranie. Zastanów się, w jaki sposób zorganizować zawartość w taki sposób, aby obsługuje przeglądanie w pionie.
Zamykanie myśli
Elastyczne projektowanie jest obecnie niezbędne, a każdy projektant stron internetowych i deweloper powinien zrozumieć, jak to działa. Goście oczekują, że wszystkie witryny będą przyjazny dla urządzeń mobilnych. Ilekroć natknę się na nieodpowiednią stronę internetową, kulę się na widok tego poziomego paska przewijania.
Postępuj zgodnie ze wskazówkami w tym poście dla planowanie strategii projektowania w celu zmiany zawartości dla najlepszego możliwego doświadczenia użytkownika na wszystkich urządzeniach.
