Układ strony internetowej jest tak samo ważny, jak informacje na stronie internetowej. Jeśli chcesz, aby strona była przyjazna dla użytkownika, wybierz układ ułatwiający nawigację. Prawdopodobnie odkryliście, że niektóre układy są łatwe do zrozumienia i szybkie w użyciu, podczas gdy inne są czasochłonne i nie są warte wysiłku, który trzeba wykonać, aby je wykorzystać..
Łatwiejsze w użyciu strony internetowe są częściej odwiedzane i zwracane. A układy, które są prostsze w użyciu, są łatwiejsze do utworzenia.
Strona ma wiele aspektów do jej układu ... Początkowo jesteśmy zainteresowani projektem. Czy Twoja strona zawiera wszystkie potrzebne rzeczy? Czy wiesz, jak to jest ustawione i gdzie znajduje się wszystko, czego potrzebujesz? Pamiętaj, że możesz używać różnych układów dla każdej strony. Bycie częścią tej samej strony internetowej nie oznacza, że muszą mieć ten sam wygląd i styl. Jednorodność pomaga, ale nie jest konieczna, a ludzie korzystają z szerokiej gamy układów i szablonów na swoich stronach internetowych.
Jak utworzyć układ strony z Photoshopem z modelu szkieletowego [Część 2]
Witryna jest podobna do podręcznika, a każda strona odpowiada unikatowemu rozdziałowi, na przykład tematowi lub wydarzeniu. Wybór jednolitości lub wybór różnych szablonów i układów zależy od tego, czego szukasz i ile pracy chcesz umieścić na stronie. Warto sprawdzić i ocenić, czy budowniczy witryny, który wykorzystujesz, będzie obsługiwał wiele układów. Niektóre są oparte na jednym układzie.
Będziesz chciał, aby układ, który nie jest zbyt zajęty, pomniejsza cel witryny, która jest zawartością. Treść jest oczywiście najważniejszym elementem Twojej witryny. Twoi goście przychodzą oglądać zawartość, więc nie przestawaj się skupiać.
Układ jest również oparty na tym, co prezentujesz. Wybierz układ zależnie od ilości tekstu wymagającego miejsca w porównaniu do ilości zdjęć wymagających miejsca. Będziesz także potrzebował układu, który zapewni ci link i wybory strony, których potrzebujesz. Jeśli użyjesz odpowiedniego szablonu do dodania dodatkowych stron, możesz znacznie zmniejszyć pracę.
Tła strony internetowej będą bardziej atrakcyjne i atrakcyjne, jeśli kolory są jasne, ale nie rażące. Jeśli jednak nie możesz odczytać tekstu ze względu na kolor lub trudno jest na oczy szanse na to, że stracisz odwiedzających.
Po wybraniu rodzaju szablonu, kolorów i wzoru, jeśli to konieczne, należy upewnić się, że wszystko, czego potrzebujesz, odnośnik i przyciski strony, banery i menu są umieszczone we właściwym miejscu. Istnieje wiele opcji szablonów, które umożliwią wybór lokalizacji dla różnych części. Wybierz te opcje, aby uzupełnić układ witryny. Jak stworzyć layout strony internetowej Przez ostatnie 10 lat w świecie projektowania stron internetowych pojawiała się kwestia, czy używać układów stałych, czy płynnych podczas projektowania witryny internetowej, z dużymi projektantami po obu stronach przysłowiowego ogrodzenia. Ostatnio jednak, gdy rozdzielczości ekranu wzrosły dramatycznie, ustalone układy prawie całkowicie zastąpiły płyn, ale nadal istnieją duże zalety płynnego układu, jeśli zostały odpowiednio zaprojektowane..
Czynności wstępne
Kiedy używam terminu? Zawierając? elementy, mam na myśli kolumny lub pola zawierające tekst, obrazy i inne treści. Elementy zawierające elementy mogą zawierać ramki i obrazy tła, ale zazwyczaj są to tylko wizualne pojemniki na ważne treści na ekranie.
Naprawiono rozkład szerokości
W ustalonym układzie, rozmiar każdego? Zawierający? element na stronie jest dokładnie określony. Strona nie zmieni się po zmianie rozmiaru okna przeglądarki. Zasadniczo wygląda tak samo na dowolnej przeglądarce lub komputerze.
Płynny układ
W układzie płynnym rozmiar elementów zawierających zmienia się w zależności od rozmiaru przeglądarki i preferencji użytkownika. Rozmiar kontenera zwiększa się przy oglądaniu w większych rozdzielczościach ekranu i zmniejsza się po zmianie rozmiaru przeglądarki.
Zalety i wady (plusy i minusy):
Naprawiono rozkład szerokości
Plusy
* Gwarantuje łatwą do odczytania długość linii
* Pozwól, aby obrazy były umieszczane dokładnie w stosunku do innych elementów i rozmiarów czcionek
* Pozwala projektantowi w pełni kontrolować sposób wyświetlania strony (w przeciwieństwie do użytkownika)
* Pozwala na przewidywalne domyślne zachowanie drukowania.
Cons
* Może tworzyć typ, który nie jest optymalny
* Kontroluje rozmiar strony i rozmiar tekstu od użytkownika.
* Nie korzysta z ekranu nieruchomości i może produkować duże niewykorzystane części przestrzeni okna, które mogłyby potencjalnie zwiększyć liczbę przewijanych użytkowników (jest to szczególnie ważne w wyższych rozdzielczościach)
Płynny układ:
Plusy
* Pozwala na maksymalne wykorzystanie powierzchni lub ekranu nieruchomości. Pozwala również na największą kontrolę nad wielkością przez użytkownika, ponieważ użytkownik może zmienić rozmiar strony na swoje preferencje.
* Umożliwia zmianę rozmiaru tekstu według preferencji użytkownika, dzięki czemu osoby z problemami ze wzrokiem mogą łatwo zwiększyć lub zmniejszyć rozmiar tekstu na stronie, a układ automatycznie dostosowuje się do powiększonego rozmiaru.
* Po prawidłowym zaprojektowaniu witryna wygląda nieco inaczej niż konkurentów, ponieważ większość witryn korzysta ze stałego układu.
Cons
* Jeśli rozmiar ekranu staje się zbyt duży lub zbyt mały, może on generować nieczytelny tekst lub trudno odczytać / zeskanować długości linii
* Może powodować problemy z * domyślnym drukowaniem strony. (Można użyć oddzielnego arkusza stylów wydruku, który pozwala na doskonałe drukowanie z dowolnej strony, pomimo płynnego układu, ale jeśli nie ma osobnego arkusza stylów do drukowania, ten kon jest ważny)
* Wraz ze zmianą rozmiaru witryny rozmiar obrazu do proporcji tekstu może powodować mniej pożądany wygląd.
Współczesne rozdzielczości ekranu i częstość występowania układów o stałej szerokości
Problemem związanym z projektowaniem layoutu we współczesnym projektowaniu stron internetowych jest ogromna różnorodność typowych rozdzielczości ekranu wśród potencjalnych odwiedzających witrynę. Najmniejsza akceptowalna i wciąż powszechna nowoczesna rozdzielczość ma 800 pikseli szerokości i 600 pikseli wysokości. Wraz z niedawnym wzrostem rozdzielczości panoramicznych i dużych monitorów bardzo często występuje również szerokość ekranu wynosząca 1280 pikseli.
P: Jak więc zaprojektować stronę, która wygląda dobrze zarówno w szerokości 800 pikseli, jak i szerokości 1280 pikseli?
Większość projektantów stron internetowych nie używa stałego układu o szerokości 800 pikseli i nazywa go dobrym. Powiedziawszy to, osobiście zaprojektowałem i widziałem piękne układy, które wyglądają dobrze i są czytelne zarówno w skrajnych rozdzielczościach. Szczegóły tych układów wykraczają poza zakres tego artykułu, ale większość projektów, które widziałem lub stworzyłem, które pomyślnie wykonują to zadanie, używa wielu kolumn treści w połączeniu z :dopełnieniem: zdefiniowanym jako procent ekranu. Gdy więc ekran jest mały, wiele kolumn jest bardzo blisko siebie, ale gdy ekran jest duży, dopełnienie zwiększa się proporcjonalnie, a kolumny są oddalone od siebie.
Zalecenia i analiza
Większość stron internetowych powinna być prawdopodobnie zaprojektowana z ustalonym lub :pół: stałym układem. Gwarantuje czytelność i doskonałą prezentację treści. Jeśli powiesz, że Twoja witryna zawiera dużą ilość treści tekstowych (więcej niż 3-5 akapitów na stronę) lub jeśli witryna bardzo skorzysta z niestandardowego schematu projektowania, użyj płynu.
Jeśli nadal nie jesteś pewien, wybierz stały. Ustalony układ jest łatwy w utrzymaniu i zapewnia czytelność dla wszystkich użytkowników, a projektant stron internetowych może go idealnie kodować. Słabo wykonany ciekły układ spowoduje więcej problemów, a następnie rozwiąże i zirytuje potencjalnych użytkowników. Na przykład, jednym z moich osobistych zachcianek domowych jest, gdy projektant używa układu ciekłokrystalicznego z jedną kolumną. Moja komputerowa stacja robocza składa się z dwóch monitorów o przekątnej 19 cali i 17 cali. Kiedy witryna jest zaprojektowana z pojedynczą kolumną z płynem, szerokość strony jest zwykle zbyt szeroka, aby ułatwić czytanie, dlatego muszę ręcznie dostosować rozmiar okna.