在做 landing page 的网页设计时,我看到使用最频繁的排版就是左右对称、居中对齐,虽然这个没有错,但用多了,就可能会觉得沉闷、没创新,所以偶尔换一换排版方式,能让你的页面视觉更有吸引力。
今天向大家展示 3 种新的着陆页风格设计案例,这类设计的表现形式算是比较新颖,还没到满大街都是的程度,所以大家可以尝试一下,并不会很难,不仅适合 landing page 上使用,其它平面设计、海报设计等项目都可以运用这种版式设计。
一、对角线布局
比起左右对称,对角线布局的视觉则表现得更有冲击力,但有一个难点就是,倾斜的图片、素材会比较能处理。
![](https://img.haomeiwen.com/i294184/f18ec283e8e75192.png)
Enterprise Grid
![](https://img.haomeiwen.com/i294184/98bbe185c7b15b78.png)
Baianat
![](https://img.haomeiwen.com/i294184/df5ed5c7d9890d63.png)
Perspective
![](https://img.haomeiwen.com/i294184/9dfd355fb3bfa98d.png)
Scaphold | GraphQL Backend as a Service
![](https://img.haomeiwen.com/i294184/d93c137c1dcb6e8e.png)
Webflow Interactions 2.0
![](https://img.haomeiwen.com/i294184/c8b53f94988b1c9f.png)
Scale
![](https://img.haomeiwen.com/i294184/3f3e4f66512da765.png)
stripe
二、波浪式
线条的运用有很多种,而如此大区域的使用波浪线条,能使得画面有跳跃、灵动的传达感觉,这样一来,左右对称布局就不会显得过于死板咯。
![](https://img.haomeiwen.com/i294184/88c1f76c8ce7f7f1.png)
Search that scales with your SaaS business | Algolia | Algolia
![](https://img.haomeiwen.com/i294184/1c80e98bc00fde68.png)
Freelance Management Platform — Bonsai
![](https://img.haomeiwen.com/i294184/2bb0c1c90663bccb.png)
Recruitz.io | Next-gen job advertising
![](https://img.haomeiwen.com/i294184/261e79b681d69571.png)
Jelly — Google Home
![](https://img.haomeiwen.com/i294184/0389746f5777e0a8.png)
Mimo — Learn how to code on your phone
![](https://img.haomeiwen.com/i294184/a6cb037f63be372a.png)
Scale — API For Human Labor
![](https://img.haomeiwen.com/i294184/d3f223d75fc83c95.png)
Gasket — Connect your Sheets
三、不明显的块分离
我想大家经常看到很多着陆页,都是区分很多屏,每一屏可以明显看出来,这个「屏」你可以理解为是一块区域,而下面的案例当中,它们没有显示的一块一块的划分,整个空间就像连接在一起。
![](https://img.haomeiwen.com/i294184/b7657eb26a4d8374.png)
WWDC — Apple Developer
![](https://img.haomeiwen.com/i294184/0a7dbe7a5b6957a1.png)
Mirror Conf 2017: a design and front-end development conference
![](https://img.haomeiwen.com/i294184/298e8ba79eb18a77.png)
Enterprise Grid
![](https://img.haomeiwen.com/i294184/84172ac75bb761e4.png)
Glyph — Super simple resumes
![](https://img.haomeiwen.com/i294184/8087b2159a9b0da8.png)
Intercom on Customer Support book
![](https://img.haomeiwen.com/i294184/8145349e7c79ce9c.png)
Intercom | Message Your Customers
![](https://img.haomeiwen.com/i294184/aa7c84380cb86a00.png)
WeDo: Make life easy
![](https://img.haomeiwen.com/i294184/f5e865af757bc242.png)
Dropbox
![](https://img.haomeiwen.com/i294184/609212d88b1a83fa.png)
Pocket Penguins
![](https://img.haomeiwen.com/i294184/79a9d321da497df5.png)
Seedlip
看懂了吗?没灵感的时候,就想想这 3 种着陆页设计手法,设计达人认为这是非常有效的布局形式,值得一用。
网友评论