网站建设中页面的 20 个精彩案例，打造整洁优雅炫酷的品牌形象

hwyzw

    有时网站需要稍微修饰一下。

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

    尽管“网站正在建设”页面是临时的，但它仍然需要设计得美观且有条理，这对于品牌形象很重要。因此，带上您的工具箱，拿起您的工具箱，加入我们，一起看看 20 个“正在建设的网站”页面的精彩示例。

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

    使用流畅的长阴影、干净的字体和炫酷的渐变背景的图案元素，为我们呈现了一个整洁、优雅、炫酷的“网站建设中”页面，用户会很高兴地等待网站完成。

    尝试使用干净的无衬线字体搭配柔和的渐变背景，打造锐利、专业的外观。

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

    使用全屏照片搭配粗体文本，并使用时尚的图像作为背景，设计一个简单、有效的“网站正在建设”页面，是一种简单、有效的空间利用方式。制作这样的页面时，需要降低背景图片的对比度。如果背景图像中有太多亮色调，请将背景图像调暗以突出显示副本。

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

    想要设计一个清晰、简约的页面吗？看看Inat的设计，它利用纯色和色块以及细而锐利的线条来实现这种效果，呈现出时尚、现代和专业的设计。

    如果您想设计类似的页面，请记住选择与白色形成强烈对比的颜色，以确保副本清晰易读。例如，如果在这种情况下使用灰色而不是红色，则很难看到副本，应该避免这种情况。

    04.使用微妙的复制和高对比度的颜色

    设计展现了“网站正在建设中”的场景。他使用了黄色和黑色两种对比色，并在背景和字体上添加了微小的纹理，模仿了现实生活中“正在建设”的建筑标志，给它增添了一种风格感。

    考虑一般使用微小的纹理和黄色和黑色来将“施工”场景应用到“正在施工的站点”页面。

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

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

    动画或简单的插图将为您的设计增添很多色彩。

    06.干净的背景和有品味的字体

    不想使用纯色作为背景？不喜欢使用详细的图片作为背景？尝试将高斯模糊应用于图像作为背景以创建温和的效果，就像托尼制作的示例一样。

    将新背景与极简字体配对，以增强模糊图像和无衬线字体的锐利线条之间的对比度。

    07.使用有影响力的颜色和空白

   

    空白区域不一定必须是白色的。以Karma的作品为例，他使用了黄色的“空白”。留白给每个元素“呼吸的空间”，避免混乱和拥挤。本案例设计以右下角的字体为焦点，剩余空间作为空白存在。

    08.使用简单的图像和粗体文本

    Droog 设计了一个非常简约的网站，使用纯白色背景、简单的无衬线字体、对齐元素和大胆、明亮的未对齐几何元素，达到令人惊叹的效果。

    黄色胶带的使用，让“网站正在建设”页面有一种被包裹、封锁的感觉，直到网站建成后才能“拆包”。尝试向您的页面添加一些有趣的内容。

    09.使用3D字体和虚线颜色

    田文祥以3D方式呈现字体，向我们展示了另一种表达字体的方式，赋予网页深度和触感。结合其他3D图形和虚线颜色，呈现出独特的“网站建设中”页面。

    使用字体并记住它不必是平坦的，您可以为其添加 3D 效果，或添加投影和倾斜效果。尝试很多不同的技巧，看看每种技巧有什么效果。

    10.使用强烈的纹理和簇状图形

    想要进行有机设计吗？以It.的设计为例。他用纹理、狂野的画面、簇拥的图形来呈现粗犷、硬汉的风格。

    尝试将您的设计元素融合在一起，就像本示例中所示，并添加引导线和几何形状以吸引观看者的注意力。

    11.使用几何形状和饱和颜色

    像Sean Ball一样，增加图像的饱和度，然后用蓝色和红色的几何图形来衬托高饱和度的图像，呈现出一个锐利的“正在建设的网站”页面。

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

    12.使用文案和生动的图形

    该设计使用生动的图形和粗体字体，并将复杂的图形和文案结合在一起，使读者的眼睛从左到右扫视。

    如果使用复杂的图形，请参考放置图案来引导读者的阅读方向，同时也创造出美观的设计。

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

    使用符号图像为您的“网站建设中”页面添加含义。蓝鸟（）App的设计界面仅使用了一张破碎的鸟蛋的图片，象征着蓝鸟APP即将破壳而出。

    从这个案例中，我们学会了尽可能简化设计。在这种情况下，所有注意力都集中在唯一的图片上。毕竟，当图片能够充分传达信息时，添加其他元素就是多余的。

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

    W3使用一张漂亮的照片叠加单色滤镜，搭配简单的倒计时图片，呈现出一个简单但有效的“网站建设中”页面。

   

    从这个案例中我们学到的是尽量选择可以作为引导线的图片，就像案例图片中的道路指向设计的焦点——倒计时一样。

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

    Aaron 保持了最小化的设计，同时将读者的注意力吸引到当左上角的“壁纸”被抬起时所显示的代码上。

    不要认为极简设计很无聊。就像Aaron的设计一样，你可以利用独特的视觉手段来展示信息，达到与复杂设计一样的效果。尝试使用简约的设计和独特的视觉信息来创建令人难忘的“网站正在建设”页面。

    16.使用柔和的色调和大胆的特征色

    画面采用灰色调，厚重感和庄重感较强，但右上角的橙色按钮打破了沉静，为画面注入了活力。

    尝试使用颜色将用户的注意力吸引到（或远离）设计中的某个元素，记住选择与其他元素有足够对比度的特征颜色。

    17.使用居中的标志和纹理图像

    您的网站有徽标或品牌标识吗？为什么不把它放在页面的中央，就像这件作品的设计者在全屏图像上放置了纯白色徽标和粗体白色字体一样。在“网站建设中”页面上使用您的品牌标志是一个不错的选择，让用户知道他们没有来到错误的网站，而是网站正在维护中。

    请注意，案例中的纹理背景图像变暗，以突出显示白色字体和徽标。设计网页时，请确保文本可读。

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

    本次设计采用粗线条、加粗的字体、少量的色散，打破了单色主题的沉闷感。同时，标志、社交媒体图标和导航栏周围的几何图案和彩色标点符号为设计增添了现代时尚的感觉。

    这个设计是现代设计的一个很好的例子。无衬线字体、几何形状和强烈的对比往往是现代设计的常见元素。

    19.使用优雅的图像和引人注目的倒计时

    您有完成设计网站的日期吗？然后使用醒目的倒计时来显示完成日期。重点放在倒计时，采用干净、时尚的字体，搭配优雅的背景图片，呈现出时尚的设计。

    放大和缩小在任何设计中都是一种有效的设计工具，尤其是“正在建设的网站”页面。找到您想要突出显示的设计元素并将其放大以立即吸引观众的注意力。

    20.使用带有粗体边框的粗体字体

    以精美的冷色调图片为背景，搭配白色粗体字体、锐利的几何原色、醒目的变色边框，呈现出一个干净、时尚的“网站建设中”页面。此设计对背景图像使用不同的循环，这是预览即将构建的内容的绝佳技术。

    如果您想循环使用不同类型的图像，请确保它们全部一致并且属于同一品牌。您可以以相同的方式处理图像，例如使用相同的滤镜或裁剪，或使用同一张照片的不同部分作为图像。

    现在轮到你！

    在设计界，设计没有严格的公式。尽管我们列出了很多建议，您仍然可以根据自己的喜好进行混合搭配。当您设计“网站建设中”页面时，请考虑客户网站和品牌的风格以及它们向读者呈现的基调。

    作者简介：Canva是全球最大的在线设计平台，为您提供大量免费中文模板，涵盖海报、传单、演示文稿、简历等设计场景，以及数百种中文字体和数百万种版权图片素材使用 免费使用。您不需要掌握设计技能来创造出色的设计。