作为互联网产品，如何平衡艺术与商业，网站设计应该掌握哪些思路？

网站作为一种互联网产品，发挥着重要的作用。既要满足用户的视觉艺术体验，又不能忽视通过它传递给用户的正确商业价值。因此，在网站视觉设计中如何平衡艺术价值和商业价值？需要掌握哪些商业网站的设计思路？本文作者就这两个问题进行了详细的论述，并推荐设计伙伴阅读学习~

相信大家都应该知道网站视觉设计的重要性。对于访问者来说，网站的框架和交互逻辑是其次。访问者首先感受到的是网站的视觉设计，同时也能通过视觉直观地表达我们想要传达的价值。所以我们在建网站的时候，一方面需要保证网站的视觉效果足够优秀，另一方面需要保证视觉能够传达正确的商业价值。

网站视觉设计需要平衡艺术和商业。

其实艺术和商业的本质就是感性和理性。两者没有绝对的好坏之分，取长补短才是发挥其价值的关键。

企业的网站以盈利为目的，不可避免地带有商业属性，甚至网站本身也是为了商业目的而创建的，其商业价值占的比重更重。然而，作为视觉动物，人类的视觉体验对游客来说尤为重要。与网站的其他内容相比，视觉演绎会更影响网站的可信度。所以网站的视觉至少需要保证符合受众的基本审美。

多年来，我们接触了上千家大大小小的企业和企业官网。经过深入探索，我们发现了一些规律。事实上，网站视觉设计的关键在于：

我们常见的企业网站存在一个严重的问题，缺乏品牌认可度。如果把左上角的品牌LOGO盖住，可能根本看不出这是那家公司的官网，或者把左上角的品牌LOGO换掉，就会变成另一家公司的官网。这是由于网站上品牌视觉识别严重缺乏造成的。这种网站无法让访问者记住它的品牌，更别说在访问者心中占据一席之地了。

基础VI设计的应用是最基础也是最容易被忽视的细节。它不仅存在于最初的网站建设中，也是企业网站在网站迭代中保持差异化的关键。

如何设计一个高辨识度的网站？

视觉识别系统是品牌的视觉象征，是品牌识别中最具传播性和吸引力的部分。它可以将品牌识别系统的非视觉内容转化为静态的视觉识别符号，包括品牌LOGO、标准颜色、符号图形、标准字体等。此外，还包括品牌的核心价值和个性。不同品牌VI是品牌之间产生差异化的根本原因之一。

所以可以结合品牌VI进行设计。品牌VI可以有非常丰富多样的应用形式，直接在广泛的层面上传播，可以应用在不同的场景中，让人们快速识别品牌。

品牌LOGO是最具辨识度的视觉符号。通过提取LOGO中的基因并扩展到我们的网站，更有助于提升品牌识别度。我们可以从两个维度进行提取：

首先，我们可以在网站的视觉设计中提取标志的形状作为“视觉符号”，或者参考VI手册中的“符号图形”进行延伸，提取标志的形状结构制作相应的图标或动画，这是标志元素的直观体现。

例如，over the rainbow的logo是带有一点橙色的极简彩虹形状，over the rainbow公司简介的Banner和每个页面的底部导航都有图形设计，扩展了Logo的这一特性。

彩虹之上[企业介绍]页面显示在开头和结尾(由成长超人制作)

这种方法需要我们很好地提取logo中的部分结构，或者将其转化为动态效果、图标等。根据形状，使网页中的整合感非常令人印象深刻。

提取logo中的标准色或代表色来呼应网页元素也是常用的方法。通过网站中的文字、页面样式和图标设计来表达Logo颜色是一种很好的方式。

例如，绿色是绿色皮革的象征性颜色。打开绿皮官网，可以清晰直观的看到绿皮将logo中的两个绿色元素融入到网站界面的UI中，需要突出的文案也会用这两个绿色元素来表达和强调。

绿色皮革LOGO

绿色官网首页显示

在网站设计中，我们可以将标准颜色更改为标题文本、图标和控件。访问者在打开网站时很容易被这些颜色吸引，不会觉得突兀。合理使用logo颜色可以统一网站的整体视觉，突出重点，更有效地传达信息。

品牌VI在网站设计中应该如何应用？

品牌VI可以应用于网站设计的三个维度，以增强网站的认可度：

应用品牌VI的常见方式是图标的设计。图标作为网站的关键图形，可以让访问者感受到品牌。精美的图标可以让表达更简单高效。打造一套精美的图标，可以从可识别性、标准化、完整性、品牌感四个方面入手。

识别：图标的作用是帮助访问者了解网站信息，特别是在没有文字说明的情况下，图标的设计需要有很高的识别度让访问者快速识别，并且不能让访问者感到迷惑。常态：每个图标都要保持视觉大小、颜色等细节的一致性，比如画风是否一致，使用的圆角或直角是否统一等等。整体性：除了图标本身的设计，整体的设计风格要与网站的基调一致。不同的网站有不同的定位，目标访问者群体自然不同，所以整个网站的图标设计也不同。品牌感：品牌感对于提升品牌认可度不可或缺。图标设计要与品牌调性和理念相一致，并传达访客一致的感受。比如提取品牌色彩，将品牌图形作为图标设计的视觉元素，可以加深访客对品牌色彩的感知。图标设计中的品牌感是品牌VI应用于网站的关键。例如，顶部的图标集增加了

长超人根据英威腾本身的品牌色彩和品牌调性进行设计，应用于官网是这样的：

　　另外，icon是网站中不可或缺的元素，充当路标，让访客能知道点击后下一步是什么，也就有明确的心理预期。如果icon按钮不够明确，访客可能会不知道下一步是要购买产品或者注册用户的步骤，并且可能直接浏览网站后就直接离开。

　　版式的如何融入品牌调性是很多设计师会忽略的一点，访客来浏览网站时，首先感受到的第一点是色彩，第二则是版式，也就是整体给访客的感觉。

　　符合品牌定位且具有辨识度的网页版式设计应该怎么做，它更需要从品牌特性中提取，无法像icon一样从品牌logo和标准色中提取元素就可以做到的，更多是一个风格化的设计。

　　举个例子，这是一家高端的共享办公室服务企业，从他们的品牌VI中可以感受到高端、轻奢、个性等关键词，在其官网中，我们可以看到其与众不同的板式设计，一眼就能感受出其品牌调性。

　　除了静态的图形设计，品牌VI也可以融入网站动效，利用品牌LOGO的设计元素和结构，进行设计的动效，可以让整个网站更有品牌风格。一个好的动效是能够满足网站功能的表达，强化品牌特质，而不是只追求表面炫酷花哨的效果。

　　在网站视觉设计中，品牌VI的应用不仅能够形成区别于同行的差异化，为品牌赋能，还能通过规范化的VI应用，提高访客对其品牌的信任度。

　　品牌的基础VI设计应用于网站是我们的常规操作，但要注意细节，别忽视了其作为网站基础的重要性，对于网站视觉设计，我们在保证基础设计无误的情况下，需要深入到思维上，一个网站的设计看似简单，像是色调、排版，都是设计师的基础功夫，但是要真正做到一个优质的网站，其实并没有想象中那么容易。

　　开头我们有提到：视觉设计如何平衡艺术与商业？大多数设计师在初入职场时，都不具备商业思维，首先会经历一段自我怀疑的过程：完成一个稿件后，反反复复被要求改稿，始终无法达到上级的要求，个人价值开始逐渐模糊，沦为一介改稿工具人。

　　在我们看来，企业网站的视觉设计必须具备商业思维，也就是视觉设计需要体现其想表达商业价值，因此，在建设企业网站时，我们需要记住一下几点。

　　不为设计而设计不是将艺术“一棒敲死”，也并非抛弃创新创意，而是应该更注重于强化产品，给满足需求的产品力加持。市面上有很多花里胡哨的网站，第一眼可能能够惊艳到你，但是再深入只是空洞，事实上，能够让访客长时间记住你的并非第一眼，而是其内在，也是我们一直坚持的长期主义价值。

　　过于强调设计、艺术、创意，不仅会给网站带来开发难度，更是给访客浏览带来沉重的负担。

　　商业环境下，视觉设计的本质应该是强化产品，升华价值，实际上，设计同样需要具备产品思维，增长超人建站更是将产品思维全流程化，这种模式下，每一环都串联起来，不管是用户体验，还是价值传递都非常有利。

　　产品思维全流程化

　　设计需要理解功能目的，为什么策划这个功能？如何通过设计让访客使用更顺畅？如何让访客爱上这个功能？这都是设计需要不断探讨和思考的问题。这时设计与产品之间通过产品思维进行联动，能够确保核心目标一致、步调一致，真正创造出一个有价值网站。

　　我们一直在讲视觉设计，视觉设计不仅是静态形式，还可以是动态形式，也就是网站上的交互动效，交互不可避免涉及到的领域就是「用户体验」。08年苹果推出AppStore，App兴起至今，用户体验就广为人知，在App的设计领域更是奉为“宗旨”，当然，在网站设计上同样如此，“以用户为本”本就是产品的关键价值，这是我们不可忽视的方面。

　　我们可以参考以下提高用户体验的关键因素：

　　有用：内容能够满足需求。可用：网站的内容应该很容易被找到。可取：设计元素应该贴合情感且具备可欣赏性。可发现：网站内容容易被定位、被找到且可导航。无障碍：为有障碍的用户提供帮助。可信：网站内容应该有权威性，且值得被相信。网站的视觉设计一方面需要服务于内部，另一方面则服务于用户，内部指的是内部需求，比如上级、老板等他们的视觉审美，这是不可避免的，其中平衡的技巧在这里就不过多讲解了。

　　重点还是在于用户身上，也就访客，先前通过市场调研分析出访客画像，可以掌握对访客的审美基础和交互逻辑认知，结合起来进行设计，当然我们也提倡尽可能简化交互，并且让网站贴合访客喜好，内容一目了然。

　　举个例子，儿童教育服务的品牌网站，在惯性思维中，大多数人会将其设计得更偏向儿童向，迎合儿童的喜好，但是，真正浏览这个网站的访客其实是父母，因此，从偏向儿童向的思路开始就是错误的，这也是很多企业建设网站的时候会掉入的误区，了解用户是设计不可缺少的一步。

　　增长思维作为增长超人网站建设三大思维之一，也是三大思维中最能激发网站商用价值的思维。在视觉设计当中，运用增长思维能够有效强化网站，加强网站价值。

　　我们需要先探讨“网站内容中哪些信息最重要？”，“传递这些信息的目的是什么？”例如，一个促销活动版块的营销点是免费领取资料，我们需要理解：最打动访客的是资料还是“免费”，是资料的图片需要更突出还是“免费”相关文案。在商业之下，设计也需要理解营销，也需要懂增长。

　　理解了基础逻辑，就需要进行下一步——强化它们，有效传递价值，实际落地可以参考两个基础理论：

　　视觉动线是指人们在阅读时，视觉移动时所形成的方向路径。早在十多年前，用户体验专家雅各布·尼尔森博士提到“人们很少逐字阅读网页，相反，他们扫描页面，挑选单个单词和句子”。正是如此，人们在阅读的时候才会形成几种常见的视觉动线规律。

　　Z型

　　F型

　　基于这两种常见的视觉动线，我们在做网站的板式设计时，可以更合理地策划视觉动线。其好处不仅能够帮助访客快速阅读，快速获取信息，提升用户体验，还可以帮助我们引导访客阅读预设的信息，高效传递高价值信息，提高营销效率。

　　视觉层次应该很好理解，即人们在阅读时，能从视觉中感受到信息的层次，优秀的视觉层次能够非常高效地引导.访客阅读更多内容，并且通过信息的优先级设计能更直观地帮助我们传网站达成相应的数据指标。

　　比如下面两个示例：

　　视觉动线可以作为网站整体的板式设计思路，而视觉层次则是单个版块的设计方向，版块的视觉层级设计应分为三层：

　　第一层：访客扫一眼就能理解整个版块的主要内容；

　　第二层：访客通过仔细浏览能够获取关键内容；

　　第三层：访客想深入了解可以查看更多，引导深入。

　　通过上述三层，即能有效实现我们增长的目的，常见的设计技巧为：通过「大小」、「色彩」、「重量」形成信息之间的层级对比，建立信息优先级。

　　除此之外，我们在策划一些网站转化路径时，还涉及到了「 CTA 行动号召按钮」的设计，这在网站的增长思维中常见的应用，我们必须确保CTA足够显眼、突出、目标清晰，常规技巧包括：颜色对比、放置显眼位置、层级引导、文案简洁清晰。

　　通过这两个基础的设计理论以及增长思维的结合，我们可以延伸出很多合理的设计思路，形成有理有据的设计语言，有了方法论才是真正的有效设计，而非“摸瞎过河”。

　　网站的视觉设计可以被视作一种艺术形式，但与纯艺术截然不同，网站的视觉设计需要建立在牢固的科学基础之上，以理性客观去审视一下这样设计是否真的能有效传递价值。

　　视觉设计的本质是什么？很多人认为只是单纯的美，或者无非就是关于审美的答案。其实，这种理解是十分表象的，大多数人并没有理解视觉设计的根本价值。

　　视觉设计是网站的一个重要层面，网站作为互联网产品，则其视觉设计的本质是价值传递，我们一直以增长思维和产品思维与视觉设计相融合，就是为了实现高效传递高价值信息。

　　访客通过对视觉信息的感知，来决定自己行为。当我们从信息的角度去理解视觉设计时，可以打破惯性思维对我们的限制，因为视觉设计是一个由抽象信息转换为图像信息的过程，理解这层道理才能真正打造出一个具有高颜值和高价值的网站。