作为互联网产品，网站起着举足轻重的作用。它不仅要满足用户的视觉艺术体验，更不能忽视它向用户传达的正确的商业价值。因此，如何平衡网站视觉设计的艺术性和商业价值？需要掌握哪些商务网站设计思维？本文作者对这两个问题进行了详细的论述，推荐设计朋友们阅读学习~
相信大家都应该知道网站视觉设计的重要性。对于访问者来说，网站的框架，交互逻辑等。都是次要的。访问者首先感受到的是网站的视觉设计，同时也能通过视觉直观地表达出我们想要传达的价值。所以我们在建设网站的时候，一方面需要保证网站的视觉效果足够优秀，另一方面需要保证视觉能够传达正确的商业价值。
网站的视觉设计需要平衡艺术和商业。
艺术和商业的本质其实是感性和理性。它们之间没有绝对的好坏，它们价值的关键是相辅相成。
出于企业盈利的目的，其网站不可避免地带有商业属性，甚至网站本身就是为商业而创建的，其商业价值占的比重更重。但人类作为视觉动物，视觉感受对于访问者来说尤为重要，视觉演绎会比网站其他内容更影响网站的可信度。所以网站的视觉至少要符合受众的基本审美。
这些年来，我们接触了大大小小上千家企业，以及企业官网。经过深入探索，我们发现了一些规律。事实上，网站视觉设计的关键是:
一、品牌基础VI设计的应用我们常见的企业网站都存在一个严重的问题，缺乏品牌认知度。如果把左上角的品牌LOGO遮住，你可能根本看不出来这是那个公司的官网，或者把左上角的品牌LOGO换掉，你就变成另一个公司的官网了。这是网站严重缺乏品牌视觉识别造成的，不能让访问者记住自己的品牌，更不能在访问者心中占据一席之地。
基础品牌VI设计的应用是最基础也是最容易被忽视的细节。它不仅存在于网站建立初期，也是企业网站在网站迭代中保持差异化的关键。
如何设计一个辨识度很高的网站？
VI(视觉识别系统)是品牌的视觉符号，是品牌识别中最具影响力的部分。它可以将品牌识别系统的非视觉内容转化为静态的视觉识别符号，包括品牌标志、标准颜色、符号图形、标准字体等。此外，还包括品牌的核心价值和个性。不同的品牌VI是品牌之间产生差异的根本原因之一。
所以可以结合品牌VI进行设计。品牌VI可以有非常丰富多样的应用形式，直接在广泛的层面上传播，可以应用在不同的场景中，让人们快速识别品牌。
品牌标志是最容易识别的视觉符号。通过提取LOGO中的基因，延伸到我们的网站上，更有助于提升品牌的辨识度。我们可以从两个维度提取:
1.标志的“形状”。首先，我们可以提取logo的形状作为网站视觉设计中的“视觉符号”，或者参照VI手册中的“符号图形”进行延伸，提取logo的形状结构，做出相应的图标或动态效果，这是logo元素的直观体现。
例如，彩虹的标志上方是一条带有橙色极简主义色彩的彩虹。彩虹之上的企业简介的横幅和每个页面的底部导航都有图形设计，扩展了徽标的这一功能。
越过彩虹【企业介绍】页面展示(成长超人出品)
这种方法需要我们很好地提取logo中的部分结构，或者将其转化为动态效果、图标等。根据形状，所以在网页中的融合感非常可观。
2.标志的“颜色”。从logo中提取标准色或代表色来呼应网页元素也是一种常见的方式。通过网站中的文字、页面板、图标设计来表现Logo色彩是一个很好的方法。
例如，绿色是绿色皮革的标志性颜色。打开绿皮官网，可以清晰直观的看到绿皮将logo中的两个绿色元素融入到网站的UI中，需要突出的文案也会用这两个绿色元素来表达和强调。
绿色皮革标志
绿皮官网首页展示
在网站设计中，我们可以改变标题文本、图标和控件的标准颜色。访问者在打开网站时很容易被这些颜色吸引，也不会感到尴尬。合理使用logo色彩可以统一网站的整体视觉，突出重点，更有效地传达信息。
品牌VI在网站设计中应该如何应用？
品牌VI可应用于网站设计的三个维度，以提高网站的识别度:
1.图标图标设计应用品牌VI的常见方式是在图标的设计上。图标作为网站的关键图形，可以让访问者感知品牌。精致的图标可以让表达更简单高效。打造一套精美的图标，可以从识别性、规范性、完整性、品牌感四个方面入手。
识别:图标的作用是帮助访问者理解网站信息，尤其是在没有文字说明的情况下。图标的设计需要有很高的辨识度，让访客快速识别，不能让访客混淆。常态:每个图标要保持视觉大小、颜色等的一致性。，而图标饱满度的细节也要遵循同样的规律，比如画图风格是否一致，使用的圆角或直角是否统一等。完整性:除了图标本身的设计，整体设计风格要和网站的基调保持一致。不同的网站定位不同，目标受众自然不同，所以整个网站的图标设计也不同。品牌感:没有品牌感就无法提高品牌认知度。图标设计要符合品牌调性和理念，向访客传达同样的感受。比如提取品牌色彩，以品牌图形为图标设计视觉元素，可以加深访客对品牌色彩的感知。图标设计中的品牌感是将品牌VI应用于网站的关键。比如最上面的那组图标，就是成长超人根据英飞凌本身的品牌色彩和品牌调性设计的。在官网的应用如下:
另外，图标是网站中不可或缺的元素，起到路标的作用，让访问者点击后知道下一步是什么，有一个明确的心理预期。如果图标按钮不够清晰，访问者可能不知道下一步购买产品或注册用户，可能直接浏览网站然后离开。
2.版面设计如何将版面融入品牌调性，是很多设计师都会忽略的一点。访客来浏览网站，第一感觉是颜色，第二是布局，也就是给访客的整体感觉。
符合品牌定位，有辨识度的网页版面设计应该怎么做？需要从品牌特征中提取，这不是像icon一样从品牌logo和标准色中提取元素就能做到的，更多的是一种风格化的设计。
比如这是一家高端共享办公服务企业。从他们的品牌VI中，我们可以感受到高端、奢华、个性的关键词。在其官网，我们可以看到其与众不同的面板设计，一眼就能感受到其品牌调性。
3.动态设计除了静态的平面设计，品牌VI还可以融入网站动态效果。利用品牌LOGO的设计元素和结构进行动态设计，可以让整个网站更加品牌化。好的动态效果是能够满足网站功能的表达，强化品牌特色，而不是仅仅追求表面的炫酷花哨的效果。
在网站的视觉设计中，品牌VI的应用不仅可以与同行区分开来，为品牌赋能，还可以通过标准化的VI应用提高访问者对其品牌的信任度。
把品牌基础VI设计运用到网站上是我们的常规操作，但是要注意细节，不要忽视它作为网站基础的重要性。对于网站视觉设计，需要在保证基础设计正确性的同时，深入思考。一个网站的设计看似简单，比如色调、排版，这些都是设计师的基本努力，但实际上并没有我们想象的那么容易。
二、兼顾艺术与商业的网站设计思路。一开始我们提到:视觉设计如何平衡艺术和商业？大多数设计师初入职场时，并没有商业思维。首先，他们会经历一个自我怀疑的过程:写完一篇稿子后，被反复要求修改，却达不到上级的要求。他们的个人价值观开始逐渐模糊，他们成了一个稿件修改工具。
在我们看来，企业网站的视觉设计一定要有商业思维，也就是视觉设计需要体现它想要表达的商业价值。所以我们在建设企业网站的时候需要记住几点。
1.为设计而设计，不为设计而设计，并不是要“把艺术打死”，也不是要放弃创新的想法。而是更注重强化产品，加持符合需求的产品。市面上有很多花里胡哨的网站，第一眼可能会让你大吃一惊，但再往深里看也不过是空个洞而已。其实能让访客长久记住你的不是第一眼，而是内在，这也是我们一直坚持的长久价值。
过于强调设计、艺术和创意，不仅会给网站的发展带来困难，也会给访问者带来沉重的负担。
在商业环境中，视觉设计的本质应该是强化产品，升华价值。其实设计也需要有产品思维。成长超人的网站是产品思考的全过程。在这种模式下，每一个环节都是串联起来的，无论是用户体验还是价值传递都非常有利。
产品思考的全过程
设计需要理解功能的目的。为什么计划这个功能？如何通过设计让参观者使用起来更加流畅？如何让访客爱上这个功能？这些都是设计中需要不断讨论和考虑的问题。这时候通过产品思维实现设计与产品的联动，才能保证核心目标一致，步调一致，真正打造出有价值的网站。
2.关注UX用户体验。我们一直在谈论视觉设计。视觉设计不仅是静态形式，也是动态形式，即网站上的交互效果。交互的必然领域是“用户体验”。苹果在2008年推出了AppStore。自App兴起以来，用户体验就广为人知，被视为App设计领域的“宗旨”。当然，网站设计也是如此。“以用户为导向”是产品的关键价值，我们不能忽视。
我们可以参考以下关键因素来改善用户体验:
有用:内容能满足需求。可用:网站的内容应该容易找到。可取的:设计元素应该是感性的和欣赏性的。可查找:网站内容易于定位、查找和导航。可访问性:为残疾用户提供帮助。可信度:网站内容要权威可信。网站的视觉设计一方面需要服务于内部，另一方面也要服务于用户。内是指内在需求，比如上级、老板以及他们的视觉审美。这是必然的，平衡的技巧这里就不解释了。
重点是用户，也就是访客。之前通过市场调研和访客画像分析，可以把握访客的审美基础和交互逻辑认知，并结合起来进行设计。当然，我们也提倡尽量简化交互，让网站贴合访客喜好，让内容一目了然。
比如儿童教育服务的品牌网站，在惯性思维中，大部分人会设计得更以孩子为中心，迎合孩子的喜好。但是真正访问这个网站的访问者其实是父母，所以以孩子为本的想法是错误的，这也是很多企业在建设网站时会陷入的误区。了解用户是设计中不可或缺的一步。
3.成长思维保证商业价值。成长思维是成长超人网站建设的三大思维方式之一，也是三大思维方式中最能激发网站商业价值的一种。在视觉设计中，运用成长思维可以有效强化网站，强化其价值。
我们需要讨论“网站内容中哪些信息最重要？”，“传递这些信息的目的是什么？”比如某促销活动版块的营销点就是免费领取资料。我们需要明白:最打动访客的是素材还是“免费”，是素材的图片需要更突出还是“免费”相关文案。在商业下，设计也要懂营销，懂成长。
理解了基本逻辑之后，我们需要采取下一步——强化它们，有效地传递价值。我们可以参考两个基本理论进行实际实施:
1.视觉动线视觉动线是指人在视觉阅读和运动时形成的有方向性的路径。早在十几年前，用户体验专家雅各布·纳尔逊博士就提到“人们很少逐字阅读网页。取而代之的是，他们浏览页面，挑出单个的单词和句子。就像这样，人在阅读的时候，会形成几条常见的视觉动线。
z型
f型
基于这两条常见的视觉动线，我们在做网站的版块设计时，可以更合理的规划视觉动线。其好处不仅可以帮助访客快速阅读、快速获取信息、提升用户体验，还可以帮助我们引导访客阅读预设信息，高效传递高价值信息，提高营销效率。
2.视觉层次视觉层次应该很好理解，就是人们在阅读的时候，能够直观地感受到信息层次，一个优秀的视觉层次能够非常高效地引导他们。访客可以阅读更多的内容，通过信息的优先级设计，可以帮助我们更直观的触达相应的数据指标。
例如，下面两个例子:
视觉动线可以作为整个网站的版块设计思路，而视觉层面则是单个版块的设计方向。剖面的视觉层次设计应分为三层:
一楼:参观者一眼就能了解全板块的主要内容；
第二层:访问者可以通过仔细浏览获得关键内容；
三级:想了解更多的游客可以多查看，深入引导。
通过以上三层，可以有效的达到我们成长的目的。常见的设计技巧有:通过“大小”、“颜色”、“重量”形成信息之间的层次对比，确立信息优先级。
除此之外，在规划一些网站转型路径时，我们还涉及到了“CTA号召行动按钮”的设计，这是网站成长思维中常见的应用。我们必须确保CTA的目标足够明显、突出和清晰。常规技巧包括:色彩对比、显眼位置摆放、分层引导、简洁明了的文案。
通过这两种基本的设计理论和成长思维的结合，我们可以延伸出很多合理的设计思路，形成一种有理有据的设计语言。只有有了方法论，才能真正有效地设计，而不是“盲目过河”。
三。总结网站的视觉设计可以算是一种艺术形式，但与纯粹的艺术完全不同，网站的视觉设计需要建立在坚实的科学基础之上，理性客观地审视这种设计是否能真正有效地传递价值。
视觉设计的本质是什么？很多人认为这只是纯粹的美，或者说无非是一种审美的回答。其实这种认识是很肤浅的，大多数人都没有理解视觉设计的根本价值。
视觉设计是网站的一个重要方面。作为互联网产品，网站视觉设计的本质是价值传递。我们一直在将成长思维和产品思维与视觉设计融合，实现高价值信息的高效传递。
游客通过对视觉信息的感知来决定自己的行为。当我们从信息的角度去理解视觉设计，就可以打破惯性思维的束缚，因为视觉设计是一个将抽象信息转化为图像信息的过程。只有明白这个道理，才能真正打造出一个高价值、高价值的网站。
