“网站正在建设中”的页面设计案例

“网站正在建设中”的页面设计案例

有时候网站需要一点装饰。

维护一个网站需要大量时间和耐心，你需要更新内容，刷新设计，甚至全部删除重新设计。这时候我们就需要制作“网站正在建设中”的页面。

虽然“网站正在建设中”的页面是暂时的，但仍需将它设计得好看、井井有条，这对品牌形象很重要。所以，戴上工具包背上工具箱，和我们一起来看看20个“网站正在建设中”页面的精彩案例。

01.使用清晰的阴影和干净的渐变

George Vasyagin使用了一个图案元素搭配光滑的长阴影，和干净的字体、冷色调渐变背景为我们呈现了一个整洁、优雅、炫酷的“网站正在建设中”页面，用户会很乐意等待网站建设完成。

尝试用干净的无衬线字体搭配温和渐变背景打造锐利、专业的效果。

02.使用粗体字和柔和的颜色

Themetide 用全屏照片搭配粗体字设计了一个简约、有效的“网站正在建设中”页面，用时尚的图片作为背景是一个简单、有效地利用空间的方法。做案例这种页面需要降低背景图片的对比度，如果背景图片中有太多明亮色调就把背景图片调暗点，以突出文案。

03.使用纯色和锐利的线条

想设计一个锐利、简约的页面？看看Inat Studio的设计，使用纯色和色块、纤细锐利的线条达到了这个效果，呈现了一个时尚、现代、专业的设计。

如果你想设计类似的网页，记住选一个和白色产生强烈对比的颜色以确保文案的易读性。举个例子，如果在这个案例中使用的是灰色而不是红色，我们将会很难看清文案，这点是需要避免的。

04.使用细微的文案和高对比色

Benaissa 的设计展现了“网站正在建设中”的场景，他使用黄色、黑色两个对比强烈的颜色，在背景和字体添加了微小的纹理，模仿了现实生活中的“正在建设”施工牌，并给其增加了时尚感。

考虑通用使用微小的纹理和黄黑配色，将“建设”的场景应用到“网站正在建设中”的页面。

05.使用动画和干净的几何图形

UkieWatch设计了一个建筑工人们在一个简单的倒计时时钟上工作的小动画，以提醒用户网站维护所剩时间。作者使用锐利、干净的几何图形呈现了一个时尚、美观的 “网站正在建设中”页面。

动画或者简单的插图会给你的设计增色不少。

06.干净的背景和雅致的字体

不想用纯色作为背景吗？也不喜欢用细节丰富的图片做背景？尝试给一张图片应用高斯模糊作为背景，创造一个温和的效果，就像Tony Bogdanov制作的案例一样。

将你的新背景搭配简约的字体，以增强模糊的图片与无衬线字体的尖锐线条之间的对比。

07.使用具有冲击力的色彩和留白

留白的空间并一定是白色，以Karma Pilots的作品为例，他使用了黄色的“留白”。留白可以让每个元素都有“呼吸的空间”，避免混乱和局促。此案例设计以右下角的字体为焦点，剩余的空间作为留白空间存在。

08.使用简约的图片和粗体字

Andrew Droog设计了一个非常简约的网站页面，他用纯色白色背景，简单的无衬线字体，对齐元素和醒目、明亮的不对齐几何元素呈现了一个令人惊叹的效果。

黄色带子的使用赋予了这个“网站正在建设中”页面被包裹、封锁的感觉，直到网站被建设好就可以被“拆封”了。尝试给你的页面添加有趣的东西。

09.使用3D字体和点状色彩

Tian Boon Siang将字体以3D的形式呈现出来，给我们展示了另一种表现字体的方式，赋予网页深度和可触感。搭配其他的3D图形和点状色彩，呈现了一个独特的“网站正在建设中”的页面。

玩转字体，记住它不一定要是平面的，你可以给它添加3D效果，或者加点阴影和倾斜效果。多多尝试不同的花样，看看各有什么效果。

10.使用强烈的纹理和集群的图形

想制作有机设计?以Archetype It.的设计为案例，他利用纹理、狂野的图片、集群的图形呈现了一个粗犷、硬汉的风格。

尝试将你的设计元素融合在一起，就像这个案例一样，再添加引导线和几何图形吸引观众的注意。

11.使用几何图形和饱和色

像Sean Ball这样，增加图片的饱和度，再用蓝色和红色的几何图形衬托高饱和度图片，呈现了一个效果尖锐的“网站正在建设中”页面。

如果你正在设计“网站正在建设中”页面，尝试调整照片的亮度、饱和度和对比度，以增强或减弱照片的色调。

12.使用拷贝和充满活力的图形

ChkChkBoom的设计使用了活泼的图形和粗体字，并将错综复杂的图形和文案集合在一起，使读者的眼球从左边浏览到右边再浏览回来。

如果你使用的是复杂的图形，参照ChkChkBoom摆放图案，引导读者的阅读方向，同时也能创造美观的设计。

13.极简设计搭配象征性的图片

使用象征性的图片给你的“网站正在建设中”页面增加内涵。蓝鸟（Bluebird）App设计界面仅用了一个破壳的鸟蛋图片，象征着蓝鸟APP即将破壳而出。

从这个案例我们学到尽可能地简化设计，案例中将所有的关注集中到仅有的图片中，毕竟当图片能够完整传达信息时，再添加其他元素就画蛇添足了。

14.使用单色滤镜和引导线

W3 Layouts使用了一张精美的照片叠加单色滤镜，搭配简单的倒计时图片，呈现了一个布局简单但有效的“网站正在建设中”页面。

从这个案例中我们学到，尝试选择可以充当引导线的图片，正如案例图片中的马路指向设计的焦点——倒计时。

15.极简设计搭配“暴露的”代码

Aaron Cavano保持了设计的极简性，同时将读者的目光吸引到左上角“墙纸”被掀开后露出的代码。

不要认为极简设计是枯燥的，正如Aaron Cavano的设计，你可以用独特的视觉手段展示信息，达到和复杂的设计一样的效果。尝试用极简设计搭配独特的视觉信息创造一个令人难忘的“网站正在建设中”页面吧。

16.使用柔和的色调搭配醒目的特征颜色

ThemeWizz使用了灰色色调的图片，具有很强的沉重感和肃静感，但是右上角橙色的按钮打破了这份肃静，给画面注入了活力。

尝试使用颜色来吸引用户的目光朝向（或远离）设计中的某个元素，记住选择与其他元素有足够对比度的特征颜色。

17.使用居中的logo和有纹理的图像

你的网站有商标或者品牌标志吗? 为什么不把它放在页面的中心呢，就像Nattywp设计的这份作品一样，他在全屏图像上放置了一个纯白色logo和粗体白色字体。在“网站正在建设中”页面使用品牌Logo是个不错的选择，让用户知道他们没有来错网站，只是网站正在维护中。

注意，案例中的带纹理的背景图片做了调暗处理，以突出白色字体和logo。设计网页时要确保文字的可读性。

18.使用粗线条和强烈的对比

ThemeBridge在这份设计中使用了粗线条、粗体字和少量色散，打破了单色主题的沉闷感。同时，Logo、社交媒体图标、导航栏周围的几何图案和颜色醒目的标点给设计增添了现代时尚感。

ThemeBridge的这份设计是现代设计的好例子。无衬线字体，几何形状和强烈的对比往往是现代设计常用的元素。

19.使用优雅的图片和醒目的倒计时

你有设计网站完成建设的日期吗？那么就用醒目的倒计时来展现竣工日期吧。CLAASTHORE通过使用干净、时尚的字体将焦点放在了倒计时上，搭配优雅的背景图片呈现了一个时尚的设计。

在任何设计中，特别是“网站正在建设中”页面，放大缩小是有效的设计手段。找到你想突出的设计元素，并将其当大，就可立即吸引观众的注意。

20.使用粗体字搭配醒目的边界线

FuelLimax使用了美丽的冷色调图片作为背景，搭配白色粗体字、锐利的几何原色和醒目的变色边框，呈现了一个干净、时尚的“网站正在建设中”页面。该设计的背景图片使用了不同的循环播放，这是一个很棒的技巧，可以为即将建设好的网页内容做些预告。

如果你想用不同类型的图片做循环播放，确保这些图片都有一致性，同属于一个品牌。你可以用同样的方式处理图片，比如用相同的滤镜或是剪裁，或者使用来自同一个照片中的不同部分作为图片。

轮到你了！

在设计界，没有任何一个设计的严格公式，即使我们列出了许多建议，你仍然可以随心搭配、尝试。当你设计“网站正在建设中”页面时，参考客户网站和品牌的风格，以及他们展示给读者的基调。

关于作者：Canva是全球最大的在线设计平台，提供海量免费中文模板，涵盖海报，传单，演示文稿，Banner，简历等多种设计场景，还有百种中文字体和百万张版权图片素材，供你免费使用。无需掌握设计技巧，就能做出精彩设计。