Vier aufkommende Trends im Weblayout im Jahr 2015: Split-Bildschirm, Container-freie Layout-, Block-Gitter- und Single-Screen-Websites

Schlüsselpunkte:

• Der Artikel zeigt auf die vier wichtigsten Weblayout-Trends, die 2015 entstanden sind: geteilte Bildschirm-, Container-Layout-, Block-Gitter- und Einzelbild-Websites.
• Split Screen-Layout wird verwendet, um zwei gleich wichtige Funktionen oder Konzepte der Dualit?t hervorzuheben, w?hrend sich das Container-freie Layout auf Inhalt konzentriert, wobei Farbe und Typografie verwendet werden, um Hierarchien und nicht selbst Strukturen zu erstellen.
• Block Grid ist ein vielseitiges Tool zum Erstellen von reaktionsschnellen Websites mit Modulen, die entsprechend der Bildschirmgr??e angepasst werden k?nnen. Die Verwendung dieses Layouts zur Unterscheidung von Inhalten kann jedoch eine Herausforderung sein.
• einzelne Bildschirmwebsites sind haupts?chlich an das Hintergrundbild des Bildschirms angepasst, normalerweise mit minimalistischem Design und ohne Scroll-Balken. Aufgrund des begrenzten Platzes erfordert dieses Layout eine klare Inhaltshierarchie.

Jedes Jahr erscheinen

neue Webdesignkonzepte, w?hrend einige alte Trends allm?hlich verschwinden. In den n?chsten Monaten werden wir zweifellos eine vorübergehende Erh?hung der Popularit?t von Videogründen, Fliesen und animierten Storybooks sehen, um nur einige zu nennen.

Auf der anderen Seite ist es fast sicher, dass reaktionsschnelles Webdesign, das bereits 2010 entstanden ist, noch einige Zeit im Mittelpunkt unseres Designs bleibt.

Dies bedeutet natürlich nicht, dass sich alle Webseiten einer gemeinsamen standardisierten Struktur zuwenden müssen. Im Gegenteil, es gibt m?glicherweise mehr Raum für Differenzierung, Flexibilit?t und Experimentieren als zuvor.

Wir haben vier Trends oder Gesamtpl?ne identifiziert, von denen wir glauben, dass sie das Layout -Design im kommenden Jahr dominieren werden. Sie k?nnen sich von diesen Modellen inspirieren lassen, aber das beste Design wird normalerweise produziert, wenn Sie Inspiration als Ausgangspunkt für Ihre Kreativit?t verwenden.

Folgende sind diese Trends.

Split -Bildschirm -Layout

Wenn wir "Split Screen" nennen, ist eine Website, auf der Bildschirme normalerweise in zwei Teile unterteilt sind (normalerweise die gleiche Gr??e).

Es gibt zwei Hauptgründe für die Aufteilung der Seiten wie folgt:

Zeigen Sie zwei wichtige Funktionen.
drücken Sie das Konzept der Dualit?t aus.

Die erste Situation tritt normalerweise auf, wenn ein Unternehmen ein Produkt oder eine Dienstleistung mit zwei gleich wichtigen Merkmalen oder Varianten f?rdern muss. Da Websites h?ufig Elemente in Bezug auf Wichtigkeit stapeln, ist in diesem Fall ein traditionelleres Layout m?glicherweise nicht angemessen.

Andererseits kann das Teilen des Bildschirms in zwei Spalten der beste Weg sein, um zwei verschiedene Aspekte desselben Systems zu pr?sentieren (z. B. ein Publishing -System, das sowohl Verlage als auch Lesern von Vorteil ist).

Auf diese Weise besteht keine Notwendigkeit, zwischen wichtigen und geringfügigen Merkmalen zu unterscheiden, und die Leser werden sofort auf wichtige Inhalte achten.

Der zweite Grund beruht auf der Tatsache, dass Designer manchmal das Konzept der Dualit?t vermitteln müssen. In diesem Fall erzeugt das Teilen des Bildschirms in zwei Teile zwei R?ume, in denen Sie sich auf verschiedene Themen oder sogar zwei verschiedene Produkte konzentrieren k?nnen.此外，這種風(fēng)格使您能夠突出某種現(xiàn)實(shí)的相反特征。

DeskTime http://www.miracleart.cn/link/d45b6d92e35ff59d3f5a1861e431d581

Das erste Beispiel, das wir sehen werden, ist die Homepage of DeskTime, ein Unternehmen, das im Bereich der Bürofreigabe t?tig ist. Sie teilen die Seite in zwei Teile, um den Bedürfnissen sowohl derjenigen zu erfüllen, die das Büro bereits besitzen, als auch diejenigen, die danach suchen.

Daher verwenden sie "vertikale Segmentierung", um die gleiche Zeit wie zwei gleich wichtige Merkmale in ihrem Dienst zu erhalten. Der Stil, den sie anwenden, ist effektiv und praktisch und sehr pr?gnant und klar. gut gemacht!

acht und vier http://www.miracleart.cn/link/AD100897c6f809081d942836af421f86

Das zweite Beispiel stammt von acht und vier, einem digitalen Marketingunternehmen. Ihre Homepage ist auch in zwei Teile unterteilt, wobei das Design auf dem Kontrast zwischen wei?en und flachen Farben basiert. Die Abteilung hier wird verwendet, um all die verschiedenen Funktionen des Unternehmens auszudrücken.

Der Stil "vertikaler Segmentierung" h?ngt auch von der Existenz von "&" ab, wodurch der Segmentierungseffekt schw?cht.

Containerloses Layout

Fast seit Beginn des Designs verwenden Designer Elemente wie Kisten, Formen und Linien, um Inhalte in das Design zu teilen und aufzunehmen. überlegen Sie sich beispielsweise, wie der Titel oder die Fu?zeile immer so ausgelegt ist, dass sie visuell vom Rest des Inhalts getrennt sind.

Es entsteht ein neuer Trend mit der Kernidee, um eine grafische Struktur zu beseitigen und sich einem freieren und offeneren Stil zuzuwenden.

Dieser Trend hat eine gewisse Gemeinsamkeit mit Minimalismus, geht aber noch einen Schritt weiter. In der Tat verwendet Minimalismus normalerweise immer noch einfache, lineare Strukturen, und dieser neue "Containerless" -Stil streift jede visuelle Verpackung vollst?ndig durch.

Der Inhalt selbst wird zum Mittelpunkt der Aufmerksamkeit, und die Hierarchie der Informationen wird durch Farbauswahl, Ort und nachdenkliche Typografie und nicht durch Rahmen und Struktur bestimmt.

Vorwort http://www.miracleart.cn/link/93bb49ede783ed9c09b650c9234be21a

Wie Sie auf der Homepage sehen k?nnen, ist Forewort eine interaktive Agentur mit Sitz in New York und Paris. Auf ihrer Website werden alle Elemente enthalten, und die Aufmerksamkeit des Benutzers wird hier auf Farben und Schriftarten konzentriert.

Insbesondere

nutzen sie eine Typografie gekonnt, um die wichtigsten Unternehmensinformationen bereitzustellen. Farben werden haupts?chlich verwendet, um andere klickbare Kl?nge hervorzuheben.很明顯，這個(gè)網(wǎng)站除了在各個(gè)方面都具有響應(yīng)性之外，還極其簡潔。

塊狀網(wǎng)格

Wir müssen hier nicht darauf hinweisen, dass Gitterstrukturen ein sehr effektiver Weg sein k?nnen, um reaktionsschnelle Websites zu erstellen. In diesem Fall enth?lt jedes Modul spezifische Inhalte, z. B. einen Titel, ein Bild oder einen Text.

Module werden normalerweise auf der Startseite einer Website verwendet, k?nnen jedoch auf anderen Seiten entwickelt werden, um den Anforderungen zu erfüllen.

Jedes Modul ist so konzipiert, dass es flexibel ist und sich an die Bildschirmgr??e anpasst. Dies macht ein leistungsstarkes "Gitterlayout" zu einem sehr vielseitigen Tool, das auf Websites und mobilen Anwendungen gleicherma?en effizient verwendet werden kann.

Eine der Herausforderungen bei diesem Ansatz besteht jedoch darin, dass es schwierig sein kann, zwischen den interessantesten Inhalten ?lterer, weniger wichtiger Projekte zu unterscheiden, wenn Sie viele Module derselben Gr??e erstellen.

Wenn viele Bl?cke gleich gro? sind, wird die Aufmerksamkeit des Benutzers m?glicherweise nicht von einem bestimmten Element angezogen. Um dieses Problem zu vermeiden, besteht ein neuer Ansatz darin, Module unterschiedlicher Gr??en zu erstellen, basierend auf dem, was das Modul enth?lt.

Gr??en http://www.miracleart.cn/link/2fe37bd25993870f5a38563dd25b1d05

Gr??en ist ein in New York ans?ssiges Unternehmen, das Herrenschuhe haupts?chlich über seine Website verkauft. Ihre Website ist ihr Anzeigefenster, daher wurde jedes Detail sorgf?ltig untersucht und in Betracht gezogen.

"Gr??en" w?hlt die Praktikabilit?t des Netzlayouts. Sie stapeln ihre Heimseiten in Modulreihen, die jeweils ein Paar Schuhe enthalten. Alle Module sind ?hnlich und ihre Formen sind implizit und nicht streng markiert. Tats?chlich werden Benutzer ermutigt, etwas anderes als Schuhdisplays zu ignorieren.

Single-Screen-Website

Der letzte Trend, den wir in den letzten 6 Monaten gesehen haben, sind die Websites, die sich auf Reaktionsabschnitte konzentrieren und sich immer an das Hintergrundbild des Bildschirms anpassen. Oft sind diese Standorte sehr pr?zise und tendieren sicherlich zu einem minimalistischen Designgefühl.

ist jedoch das ikonische Merkmal dieses Entwurfstrends, dass sie an Scrollbars mangeln: Mit anderen Worten, diese Websites verfolgen fast immer einen "einseitigen Anwendungsansatz" für ihre Benutzeroberfl?che.

Aufgrund des begrenzten verfügbaren Inhaltsraums sollten Designer eine sehr klare Inhaltshierarchie berücksichtigen und besonders anspruchsvoll sein, wenn weniger relevante Informationen aufgenommen werden.

In den meisten F?llen dominieren Bilder (oder sogar Videos) das Design und lassen nur sehr begrenzte Platz für andere Designideen. Es kann Produkte pr?sentieren oder einfach verwendet werden, um eine emotionale, filmische Atmosph?re hervorzurufen. Shamballa Jewels

http://www.miracleart.cn/link/885ca3d99fd35f509a2aa0130e8bf64f

"Shamballa Jewels" ist ein Unternehmen, das eine Reihe von Schmuck verkauft. Die Website verfügt über eine Startseite, die aus einer einzigartigen Seite besteht, auf der einige ihrer Arbeiten angezeigt werden. Es gibt keine Scroll -Bars, und die Navigation der Website wird vom Menü oben auf dem Bildschirm bereitgestellt.

Was ich an dieser Website wirklich mag, ist, dass sich der Hintergrund st?ndig ?ndert. Tats?chlich erscheinen Bilder, die für den gesamten Raum geeignet sind, abwechselnd mit vertikalen geteilten Bildschirmen.

Das obige Beispiel zeigt, dass ein gro?es, effektives Design nicht an die 4 oder 5 h?ufigsten Layoutmuster gebunden sein muss, die wir sehen. Jeder widersetzt sich dem Drang, mit der Vertrautheit und Sicherheit des beliebten Netzes/der von uns sehenen Rahmen zu beginnen - und erzielt als Ergebnis gro?artige Ergebnisse.

Bedeutet dies, dass h?ufigere Weblayouts nicht funktionieren?

natürlich nicht. Aber wie Mark Twain sagte: ?Für die Person, die den Hammer h?lt, sieht alles aus wie ein Nagel.“

Stellen Sie sicher, dass Sie N?gel sehen.

(Folgendes ist ein Pseudo-Original-Werk im ursprünglichen FAQ

H?ufig gestellte Fragen zum Web -Layout -Design

F: Was sind die Trends im modernen Web -Layout -Design?

a: Der Trend des modernen Web -Layout -Designs entwickelt sich st?ndig und ver?ndert sich. Einige beliebte Trends sind minimalistisches Design, asymmetrisches Layout, Split-Screen-Layout und Mobilfunk-Design. Diese Trends konzentrieren sich darauf, benutzerfreundliche Erfahrungen zu erstellen, die einfache Navigation und ansprechende Inhalte bieten. Sie betonen auch die visuelle Anziehungskraft und verwenden mutige Farben, einzigartige Typografie und hochwertige Bilder und Videos.

F: Wie kann mein Website -Layout attraktiver werden?

A: Um Ihr Website -Layout attraktiver zu machen, achten Sie bitte auf die Benutzererfahrung. Dies kann durch sichergestellt werden, dass Ihre Website leicht zu navigieren ist und klare Menüs und Links enth?lt. Verwenden Sie hochwertige Bilder und Videos, um die Aufmerksamkeit der Benutzer zu erregen. Stellen Sie au?erdem sicher, dass Ihre Inhalte für Ihre Zielgruppe relevant und unterhaltsam sind. Das Einbeziehen interaktiver Elemente wie Tests oder Abstimmung kann auch das Engagement erh?hen.

F: Welche Bedeutung hat das mobile Design im Weblayout?

A: Mobile-First-Design ist eine Designstrategie, die das Design für mobile Ger?te und dann für Desktop oder andere Ger?te priorisiert. Dies ist wichtig, da immer mehr Menschen ihre mobilen Ger?te verwenden, um auf das Internet zuzugreifen. Mobile-First Design stellt sicher, dass Ihre Website gut aussieht und auf allen Ger?ten gut funktioniert und eine bessere Benutzererfahrung bietet.

F: Wie kann man Farben im Web -Layout -Design effektiv verwenden?

A: Die Farbe spielt eine entscheidende Rolle im Web -Layout -Design. Es kann Emotionen festlegen, Emotionen vermitteln und sogar das Benutzerverhalten beeinflussen. Um farben effektiv zu verwenden, berücksichtigen Sie Ihre Markenidentit?t und Zielgruppe. W?hlen Sie eine Palette, die Ihre Marke widerspiegelt und Ihr Publikum einbezieht. Verwenden Sie kontrastierende Farben als Text und Hintergrund, um die Lesbarkeit zu gew?hrleisten. Verwenden Sie au?erdem Farben, um wichtige Elemente oder Informationen auf der Website hervorzuheben.

F: Welche Rolle spielt das Typensatz im Web -Layout -Design?

a: Das Typensatz ist ein wesentliches Element im Weblayout -Design. Es vermittelt nicht nur Informationen, sondern legt auch den Ton und die Pers?nlichkeit der Website fest. W?hlen Sie Schriftarten, die leicht zu lesen sind und Ihren Markenstil widerspiegeln. Verwenden Sie verschiedene Schriftgr??en und Dicken, um Hierarchien zu erstellen und die Aufmerksamkeit der Benutzer zu lenken. Stellen Sie au?erdem sicher, dass zwischen Text und Hintergrund genügend Kontrast besteht, um die Lesbarkeit zu gew?hrleisten.

F: Wie füge ich dem Web -Layout -Design Multimedia -Elemente hinzu?

A: Multimedia -Elemente wie Bilder, Videos und Audio k?nnen die Benutzererfahrung verbessern und Ihre Website attraktiver machen. Verwenden Sie Qualit?tsbilder und Videos, die sich auf Ihren Inhalt beziehen. Erw?gen Sie, Hintergrundvideos oder Animationen zu verwenden, um das visuelle Interesse zu erh?hen. Verwenden Sie au?erdem Audio mit Vorsicht und stellen Sie den Benutzern Kontrollfunktionen wie Wiedergabe, Pause oder Anpassungsvolumen zur Verfügung.

F: Was sind einige h?ufige Fehler im Web -Layout -Design, die vermieden werden sollten?

A: Einige h?ufige Fehler, die im Web -Layout -Design vermieden werden sollten, sind chaotische Layouts, schlechte Navigation, überm??ige Schriftarten oder Farben und nicht für mobile Ger?te optimiert. Vermeiden Sie auch Bilder oder Videos mit geringer Qualit?t und stellen Sie sicher, dass Ihr Interieur leicht zu lesen und zu verstehen ist.

F: Wie verbessert ich die Benutzerfreundlichkeit meines Website -Layouts?

A: Um die Benutzerfreundlichkeit Ihres Website -Layouts zu verbessern, stellen Sie sicher, dass Ihre Website leicht zu navigieren ist und klare Menüs und Links enth?lt. Verwenden Sie konsistente Layout- und Designelemente auf der gesamten Website. Stellen Sie au?erdem sicher, dass Ihre Website schnell geladen wird und für mobile Ger?te optimiert ist. Bietet Zug?nglichkeitsfunktionen für Benutzer mit Behinderungen, z. B. alternativer Text für Bilder und Untertitel für Videos.

F: Welche Rolle spielt der White -Space im Web -Layout -Design?

a: Wei?er Raum oder negativer Raum ist der Raum zwischen Elementen im Design. Es kann verwendet werden, um Gleichgewicht zu erzeugen, die Aufmerksamkeit der Benutzer zu leiten und die Lesbarkeit zu verbessern. Das Verlassen des leeren Platzes kann auch Ihr Design einfach und modern aussehen lassen. Verwenden Sie jedoch unbedingt die Whitespace strategisch und lassen Sie nicht zu viel Platz, um zu vermeiden, dass Ihr Design unvollst?ndig aussieht.

F: Wie kann ich meinen Web-Layout-Design neuartig und aktuell halten?

A: Um Ihr Webseiten-Layout-Design neuartig und aktuell zu halten, bleiben Sie über die neuesten Designtrends und Technologien auf dem Laufenden. Aktualisieren Sie Ihre Inhalte regelm??ig, um Ihr Publikum relevant und lustig zu machen. Erw?gen Sie auch, Ihre Website alle paar Jahre neu zu gestalten, um sie modern und attraktiv zu halten.

Das obige ist der detaillierte Inhalt vonNeue Weblayout -Ideen für 2015. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!