一个好的网站，有好看的图片只是加分项之一，排版、配色、交互等因素还要相得益彰，这样才能给用户在视觉与使用上完美的体验。今天，我们一同来看看【源来花艺】是如何搭建出高颜值的官网。

官网担当着向外展示企业品牌与产品的作用，不少企业为了多向用户传递信息，往往会在官网特别是首页上尽可能地多放置图文内容。然而内容的繁多容易适得其反，造成用户视觉 “失焦”，反而忽略重点的内容。

所以在网站设计中，“留白”是很重要的运用。适当的留白能让整个页面看起来整洁有序，提供了视觉上的缓解作用，有助于引导用户的注意力。

以【源来花艺】官网首页banner图为例，整个横版的图片两边留出空间，引导用户聚焦于中部，底部通过半透明的背影与图片形成视觉上的层级结构，从而突出品牌要呈现的重点内容：荣誉&实力。

除了banner图，【源来花艺】官网整体遵循着留白的风格设计，营造出网站空间感。空间是内容与设计的空间，是页面呼吸感很重要的要素。当然，留白也意味着呈现在用户眼前的内容并不多，这就必须考验 品牌的“取舍”。

这里遵循着另一个设计原则“希克定律”，就是可供选择的刺激越多，用户决定与哪一个进行交互的时间就越长。因此为了让用户能更快速地决策浏览哪方面的内容，【源来花艺】选择在首页只呈现主打的项目，以此减少用户的决策时长。

同时，留白的运用除了让网站在PC端呈现得更加简洁具有空间感，当自适应到移动端时，也能让网站在小屏上不显得拥挤，更加高效地展示品牌的信息，便于浏览。

色彩是设计的三大构成之一。色彩最直观也是用户最能感受到的，而一个网站给人的留下的第一印象就是扑面而来的色彩氛围。

当然，并不是所有的品牌色都可以作为主色，星空黑作为【源来花艺】的品牌主色调，具有稳定、高端、深邃的感觉，但官网呈现的是与花艺有关的项目，要给人多彩、温暖、恬静的气息。因此星空黑不宜作为网站的主色大面积使用，只是将品牌黑色用在了各种按钮上。

除此之外，因为网站图片往往与花相关比较多彩，暖色调非常充足，所以网站整体以中性色中的白色为背景以此突出项目与产品。

当然，品牌主色调运用的克制并不意味着整个网站就要素妆淡颜，通过产品图片色系的归类与搭配，也能营造出浓烈的感觉。如【源来花艺】以自身产品的特性，通过产品图片多彩的特点进行搭配，在不借用品牌色调的情况下，给用户一种色彩的沉浸感。这种通过将同色系的产品和图片搭配在一起，能更好地实现统一协调、突出主题的作用。

由于网站背景使用的是无彩色系的白色与灰色搭配，不仅没有增加界面的信息负担，反而更利于内容的层次和区域划分，让无论是主界面还是小板块，都显得更加有序，内容更加清晰。非常值得我们在搭建网站过程中借鉴。

排版是视觉组织内容的方式，是引导用户阅读信息的手段。网站设计中图文的排版对用户的阅读体验影响非常大。如何保持图文的和谐，吸引用户有进一步访问？

【源来花艺】在这方面也做得比较出色，以其中的子页面“魔法气球课”的banner图为例，通过斜向的气球拱门装饰将用户的视线引导到课程介绍的文字上，既突出了文字，同时也提升了用户的阅读体验。

对于少量的文字处理可以通过配图小技巧来引导视线关注，但多图文的处理如产品介绍、案例，就必须以其他方式来呈现。

如在展示多产品或卖点时，通过卡片式呈现，除了可以承载以图片为主的内容，层级结构清晰的文字内容也可以灵活使用卡片式设计，简单清晰地展示信息。为了更加美观，【源来花艺】甚至还通过不同色系对卡片进行区分，凸显特色。

对于卡片式，其实在设计形式上也能通过变化来呈现不同的视觉效果。像【源来花艺】对案例的呈现，将图片做成大小不同的尺寸进行拼接，字和图形交错出来，形成一种流动感。

无论是单列卡片式，还是多图拼接卡片，两者其实可以相互联系、相互搭配使用，就像【源来花艺】的页面上，将两者形式放在一起穿插使用，这样运用能让用户在长时间的阅读中不容易疲倦，产生1+1>2的效果。

最后，总结【源来花艺】官网的设计要点

1、 运用留白，降低用户的视觉压力，信息适量，减少信息压迫感

2、 大量运用自身产品图，将其搭配，给客户带来沉浸感

3、 注重排版形式的运用提升用户的阅读体验

网站设计是一个不断打磨细节的过程，只有注重细节的处理，才能给予用户更好的体验。