网站视觉设计需建立在牢固的科学基础之上，以理性客观去审视这样设计是否真的能有效传递价值。

近年来，“增长”一直被提及和广泛应用，我们一直认为增长不是嘴上说说，而是需要在思维层面、执行层面贯彻落实才有可能实现真正意义上的增长，并且不仅是在营销、数据、技术等方向上，在视觉设计也同样需要具备增长思维和执行能力。

可能有人会认为设计和视觉设计关系并不大，其实不然，甚至是恰恰相反，我们认为整个网站的项目人员都应该了解增长，设计则需要了解关于增长设计的相关知识。

设计是促进访客从认真浏览到认可产品再到做出行动决策的过程，是实现网站转化数据增长的必要手段和能力。众所周知，产品是为满足用户需求而生，属于创造价值，而设计则是将产品价值最大化，运用在网站建设中即是为网站实现价值最大化，让更多的人认可我们网站所传递的价值。 

在设计中有几个要点是值得我们深入研究的：

01 以用户为中心 

我们需要站在用户的角度去思考网站设计，更有利于我们从本质上发现网站问题，抓住真正的痛点，从而影响网站转化数据增长。以用户为中心的增长设计是一种不局限于界面设计或设计技巧的设计方法，其核心思想并不复杂，即是在设计网站的每一环节，都会充分考虑到用户，常会关注这些要素：用户特征、应用场景、用户目的和用户心理等。

首先，我们需理解以用户为中心的设计，可让我们的网站具备高实用性，所有功能体验都围绕用户需求、用户感知而展开，因而能够很好地提升用户满意度，转化率的提升自然也会水到渠成。

设计时所要思考的是，设计内容如何做到简单易懂，如何提升访客在浏览过程中的流畅感，如何缩短路径，让用户能方便留资、成交。因此，我们设计师的增长观一定是在产品现有的基础上，提升用户的体验，尽量让用户有良好的体验下来提升用户的数据增长。

总而言之，我们的设计就是从吸引访客的注意力开始，再到网站能够为访客提供价值，最后促使访客认可我们产品的过程。 

02 不为设计而设计 

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

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

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

03 设计师要了解网站关键数据 

无论是对于个人、企业、网站产品经理而言，或是从哪个维度来说，数据都是我们做出某一决策时，最科学且靠谱的依据之一，做网站设计也是如此。

我们每个设计都是为了使网站产生价值，解决用户的实际问题，网站设计如果仅停留在美观层面，很大程度上会脱离用户的真实需求，导致无法让用户满意。

设计可以以多项数据分析结果作为支撑，我们在设计过程中，数据分析结果可有效指导设计决策。因此，不仅仅是产品经理需要关注数据指标，作为设计师同样需要掌握这方面的技能来帮助我们产出更贴近用户行为的设计。

同时，设计师监测网站数据还有这两个重要作用： 

1.用户行为数据的反馈可帮助我们验证发现、假设和测试的结果，让我们更了解目标用户，发现用户痛点，确保我们设计方向的准确性； 

2.在后续进行网站迭代时，网站数据能帮助我们把一些抽象的问题具体化，更好地度量我们的设计，为网站迭代方向提供参考。 

用户数据的表现是我们对网站优化的关键要素。我们可以观察一些常见的网站数据指标，比如用户在某一时间段内，浏览或逗留我们的网站或某一页面的平均访问时长数据；网页点击率、采集页面热力点击图，可以直观观察访客进到我们网站开始，访客对网站功能板块、页面内容的喜好。 

04 提升网站转化数据的增长设计 

设计师了解了数据能够更好的理解影响增长的关键因素在哪，更重要的是通过增长设计实现网站转化数据提升。 

根据访客在网站访问中的行为逻辑和思考习惯，首先访客进入到网站，开始浏览网站，会被他所感兴趣的内容所吸引，接着在浏览过程中，逐步认同网站呈现出来的产品价值，接着通过一些端口，做出行为决策，比如点击咨询按钮、提交表单等等。

也就是用户从吸引→认同→决策的过程：

1）把控访客注意力 

在Alibaba Design Ucan 2020中有这么一个公式：用户的注意力＝心理需求*视线所及。访客的注意力是由访客在网站中所希望看到的内容和访客在浏览中的视线交汇而成，其中心理需求不仅包含了文案信息、图片信息，还包括了色彩搭配、排版等基础设计。

我们在以往项目中做A/B测试时，发现完全相同的网页信息和内容，在经过不同排版、间距差异、色彩搭配、形状对比后，用户在进行视觉处理时的注意力和对信息理解的效率，甚至是对信息的理解上都会有所不同，这正是我们常说的“心随眼动”。

网站作为互联网产品都是通过视觉而被访客感知，不仅仅是在审美及交互层面引导访客，更重要的还包括对信息的传达和感知，实际落地可以参考两个基础理论：

1.视觉动线 

2.视觉层级 

视觉动线 

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

Z 型

F型

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

视觉层次 

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

比如下面两个示例：

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

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

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

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

通过上述三层，能有效实现我们增长的目的。  

（2）激发访客认同感 

访客通过网站浏览我们的产品信息时，要想让访客完全认同我们的产品几乎是不可能的事情，但只要能够100%甚至120%传递好产品价值，访客对我们的认同感必然会很高，而多样化的产品呈现是目前市场环境的关键所在。

在产品呈现上，大多数企业网站的产品呈现都是平面的枯燥的，单一的图文展示已经难以把产品特点突出表现，且无法引起访客的兴趣 , 单向的信息传播已经无法和访客产生交流。我们可以赋予产品展示更多的可能性，像 3D 模型、产品动画、交互动效等生动的呈现方式结合于网页中，能够更好传递产品价值，提升用户认同感。

还是以那家做智能变色玻璃的企业为例，对于大众来说，智能变色玻璃并非是一项常见的技术和产品，如果仅通过图文结合的形式展示，除了会感到枯燥，也必然无法向访客直观地传达产品价值。

所以，我们为此构建了一辆汽车3D模型，将访客所关系的信息，通过3D模型在各个应用场景中清晰呈现，突出重点信息，访客可以通过互动选择相应的场景类型和玻璃的变化形态，这就能用够有效地和同类产品区分开来甚至是让访客过目不忘，且访客可以通过这个创意了解到产品的价值，最终认同这个产品。

在整个创意产生的过程中，我们一直围绕着三个比较关键的因素“使用者（人）”、“使用场景”、“用户行为”去思考和探究，从而达成访客高度认同的效果，这是增长设计的不同之处。 

（3）促进访客行动 

在访客认同产品的情况下，最核心的一步在于如何促使/促进访客做出行动。这里我们引用一个模型福格行为模型 

（BJ Fogg’sbehaviormodel）来探寻：一个行为的发生一定会同时具备动机、能力和提示三要素。

网站访客期望获得某种回报而有相应的行动，这就是动机，比如访客在我们网站留资/领取资料，就是期待能为自己带来更多专业知识。那我们如何让访客马上行动起来呢？我们常说的要洞察用户需求，挖掘访客痛点就是在寻找用户动机。

给访客提供了动机后，访客不一定会做出行动，这就涉及到能力，因此我们还要降低行动门槛，告诉访客很轻松就能做到，并让他们能感知。

接着还剩下一个促使访客立马行动的诱因，也就是需要一个行动触发器，对访客的「需求」、「痛点」和「兴趣」进一步激发，提示访客现在去行动。我们做增长设计的目的就是进一步激发访客做出行动的可能性，如果访客在网站中迟迟未作出行动，不如多从这三个角度去思考，并着手给网站转化组件指导出更好的设计思路： 

表单 

表单作为网站中重要的留资渠道之一，在设计表单时需明确好设计目标：为了让访客轻松、易懂地获取表单信息，进而快速完成表单信息录入。

当我们采取某个动作行为时，常规路径首先是通过视觉输入信息到大脑，大脑消化信息，产生认知后采取行动。因此，要做到有效提升表单的用户体验，我们应该在设计表单时，充分考虑降低用户行为负担。 

降低视觉及认知负担的技巧点：让用户减少思考，信息设计得易读易懂尤为重要，文案尽量简洁且符合用户认知；信息录入先简后繁，理清前后逻辑关系；信息尽可能单列展示，符合同一个规律的视觉层次。 

降低行动负担的技巧点：输入信息方式越简单也就越容易完成整个表单填写，能给默认值就不让用户选择、能给选项就不让用户输入；优先选项时，平铺单选优于下拉单选。 

访客心理负担在特定场景中也同样影响着行为发生，其中的因素包括隐私、财务、安全等，因此我们在设计的时候，可以在不妨碍访客提交信息的前提下，让隐私安全相关的提示更加显眼。 

CTA行动号召按钮 

网站中的每个设计点都在努力争取用户们有限的注意力，其中某个单一的要素就能发挥完全不同的作用。

行动召唤（CTA）是一种营销术语，在网站中是指我们希望访客采取的下一行动。而「 CTA 行动号召按钮」的目的即是用户的引导和转化，当一个按钮足以引起潜在用户的注意时，它才可以吸引用户点击并进入下一个流程。

「 CTA 行动号召按钮」的设计，这在网站的增长思维中是常见的应用，我们必须确保 CTA 足够显眼、突出、目标清晰，常规技巧包括：颜色对比、放置显眼位置、层级引导、 文案简洁清晰。

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

弹窗 

弹窗作为一种干扰信息的存在，有时候会影响访客体验，但是在网站转化方面有时非常有效，这种强烈的提示如何设计得更让访客认可，是我们在做增长设计时值得持续探究的问题，尽量减轻视觉和交互两方面的负担。

视觉层面：与网站的设计调性一致非常关键，我们见过很多网站的弹窗，非常丑陋并且与其网站的设计完全不符，就像是脱落网站之外的另一个“物种”，设计一致是最为基础的。另外，就是简洁易懂，这对文案是否能清晰传达信息、按钮层级关系的设计就要十分注重。文案能用一句话说清楚就不要啰嗦，在有限的时间和空间内表达核心内容即可。

交互层面：做到可控可操作，弹窗内容及操作入口清晰可操作，基于网站的转化目的，我们更希望用户能进行下一步操作，而非返回上一步。用户自然有来去自由的权利，我们能做的只有通过弱化次要操作以突出主要引导操作。 

05 总结 

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

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

设计永远没有最优解，因为设计影响着用户心理模型，从而达成目标的过程。网站和设计本身都是围绕着商业变现为最终目标，所以数据和用户的增长伴随着产品的生命周期，以数据为导向，用户增长作为目标所进行的设计，可以更好让我们把控设计目标，以及设计可用性和优先级，同时能更好地客观的校正设计方向。

设计需要精准的界定访客的痛点，这是网站转化数据增长的重要基础，理解这层道理才能真正打造出一个具有高颜值和高价值的网站。

品牌文化建设  |  展厅设计施工  |  党建文化建设  |  科技展厅交互  |  标识标牌设计制作  |  商业美陈设计制作  |  网站设计开发  400-888-0672