网站设计_如何平衡网站作为互联网产品的艺术和商业？网站设计需要掌握哪些思维？

网站作为一种互联网产品，起着重要的作用。它不仅需要满足用户的视觉艺术体验，而且还需要通过它传达给用户的正确商业价值。因此，如何平衡网站视觉设计的艺术和商业价值？你需要掌握哪些商业网站的设计思维？作者在本文中详细讨论了这两个问题，并建议设计合作伙伴阅读和学习~


我相信我们都应该知道网站视觉设计的重要性。对于访问者来说，网站的框架和交互逻辑是第二位的。访问者首先感受到的是网站的视觉设计，我们也可以通过视觉直观地表达我们想要传达的价值。因此，在建立网站时，一方面要确保网站的视觉效果足够好，另一方面要确保视觉能够传达正确的商业价值。

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

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


企业以盈利为目的，其网站不可避免地具有商业属性，甚至网站本身也是为商业创造的，其商业价值所占比例也更重。然而，作为一种视觉动物，视觉感觉对访问者尤为重要。与网站的其他内容相比，视觉解释会影响网站的可信度。因此，网站的视觉至少需要确保它符合观众的基本审美观。

近年来，我们接触了数千家企业和企业的官方网站。经过深入探索，我们发现了一些规则。网站视觉设计的关键在于：



我们常见的企业网站存在严重的问题，缺乏品牌知名度。如果你把品牌放在左上角LOGO遮住，你可能根本看不出这是那家公司的官网，也可能看不到左上角的品牌LOGO更换后，它成为其他公司的官方网站，这是由于网站严重缺乏品牌视觉识别造成的。这个网站不能让游客记住它的品牌，更不用说在游客心中占据一席之地了。

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


如何设计高识别网站？

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

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

品牌LOGO通过提取最具辨识度的视觉符号LOGO将基因延伸到我们的网站上，更有利于提高品牌知名度。可从两个维度提取：



首先，我们可以提取它logo网站视觉设计中的形状「视觉符号」，也可以参考VI手册中的「象征图形」延伸，提取logo相应的形状结构icon或动效等，是的logo元素的直观体现。

比如天虹logo天虹企业简介了橙色极简主义的彩虹形状Banner以及每个页面的底部导航Logo这一特征延伸的图形设计。



【企业介绍】页面头尾显示(增长超人产品)

我们需要很好地提取这种方法logo部分结构，或根据形状转化为动态效果，icon等等，所以在网页上的融合感是非常可观的。



提取logo与网页元素相呼应的标准色或代表色也是一种常见的方式。Logo通过网站中的文字、页面板式、icon这是一种很好的呼应方法。

比如绿色是绿革的标志性颜色。打开绿革官网，可以清晰直观地看到绿革将要进行。logo两种绿色元素融入网站界面UI需要突出的文案也会用这两种绿色来表达和强调。


绿革LOGO


绿革官网首页显示

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

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

品牌VI可应用于三个维度网站设计，提高网站识别度：



品牌VI常见的应用方式是icon在设计图标时，icon作为网站的关键图形，游客可以感知品牌，精致icon它可以使表达更简单、更高效，创造一套精致的icon，我们可以从识别、规范、完整性和品牌感四个方面入手。


识别性
规范性
整体性
品牌感：
icon设计中的品牌感是品牌VI应用到网站的关键，比如上面的那套icon，根据英威腾自身的品牌色彩和品牌调性，由增长超人设计，应用于官网：


另外，icon它是网站中不可或缺的元素，作为路标，让访问者知道点击后的下一步是什么，并有明确的心理期望。icon按钮不够清晰，访问者可能不知道下一步是购买产品或注册用户，并可能在浏览网站后直接离开。



如何将布局融入品牌色调是许多设计师会忽略的一点。当访问者浏览网站时，他们首先感受到的是颜色，第二个是布局，这是对访问者的整体感觉。

如何设计符合品牌定位和识别的网页布局？它需要从品牌特征中提取，而不是像icon一样从品牌logo从标准色中提取元素，更多的是一种风格化的设计。

例如，从他们的品牌来看，这是一家高端共享办公服务企业VI您可以感受到高端、轻奢华、个性等关键词，在其官网上，我们可以看到其独特的板式设计，一眼就能感受到其品牌调性。




除静态图形设计外，品牌VI也可以融入网站动效，利用品牌LOGO设计元素和结构，设计动态效果，可以使整个网站更具品牌风格。良好的动态效果是满足网站功能的表达，加强品牌特点，而不仅仅是追求表面酷和花哨的效果。


在网站视觉设计中，品牌VI应用不仅可以形成与同行不同的差异化，赋予品牌权力，还可以通过标准化VI应用程序，提高访问者对其品牌的信任。

品牌的基础VI设计应用于网站是我们的日常操作，但要注意细节，不要忽视网站基础的重要性，对于网站视觉设计，我们需要深入思考，网站设计看似简单，如色调、排版，是设计师的基本技能，但真正做一个高质量的网站，不像想象的那么容易。



一开始我们提到:艺术与商业如何平衡视觉设计？当大多数设计师第一次进入工作场所时，他们没有商业思维。首先，他们会经历一个自我怀疑的过程：完成手稿后，他们被要求反复更改手稿，这始终不能满足上级的要求，他们的个人价值开始逐渐模糊，成为一个更改手稿的工具人。

在我们看来，企业网站的视觉设计必须有商业思维，即视觉设计需要反映其表达商业价值的愿望。因此，在建立企业网站时，我们需要记住几点。



设计不是为了设计而不是为了敲死艺术，也不是为了放弃创新创意，而是为了更加注重加强产品，满足产品力量的需求。市场上有很多华丽的网站，乍一看可能会让你惊讶，但深入只是空的。事实上，能让游客长期记住你的不是第一眼，而是它的内在价值，这也是我们一直坚持的长期价值。

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

在商业环境中，视觉设计的本质应该是加强产品，升华价值。事实上，设计也需要产品思维，增加超人站是产品思维的整个过程。在这种模式下，每个链接都是连接的，无论是用户体验还是价值传递都非常有利。


全过程的产品思维

设计需要理解功能的目的。为什么要计划这个功能？如何通过设计使访客使用更顺畅？如何让访客爱上这个功能？这些都是设计需要不断讨论和思考的问题。此时，通过产品思维将设计与产品联系起来，确保核心目标和步骤一致，真正创建有价值的网站。



我们一直在谈论视觉设计，视觉设计不仅是静态的，也是动态的，也就是说，网站上的互动效果不可避免地涉及到互动的领域「用户体验」。08年苹果推出AppStore，App用户体验自兴起以来就广为人知App设计领域被视为宗旨网站设计同样，以用户为本是产品的关键价值，这是我们不能忽视的。

提高用户体验的关键因素如下：

有用
可用
可取
可发现
无障碍
可信
一方面，网站的视觉设计需要为内部服务，另一方面，它为用户服务。内部指的是内部需求，如上级和老板的视觉美学，这是不可避免的。这里只解释平衡技巧。

关键在于用户，即访客，通过市场研究分析访客肖像，可以掌握访客的审美基础和交互逻辑认知，结合设计，当然，我们也提倡尽可能简化交互，让网站适合访客偏好，内容清晰。

例如，对于儿童教育服务的品牌网站，在惯性思维中，大多数人会设计更倾向于儿童，以满足儿童的偏好。然而，真正浏览这个网站的访问者实际上是父母。因此，从偏向儿童的想法出发是错误的，这也是许多企业在建立网站时会陷入的误解。理解用户是设计不可或缺的一步。



增长思维作为增长超人网站建设的三种思维之一，也是激发网站商业价值的三种思维之一。在视觉设计中，使用增长思维可以有效地加强网站，增强网站的价值。

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

理解基本逻辑需要下一步——加强它们，有效地传递价值，实际落地可参考两个基本理论：



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

Z型


F型


基于这两种常见的视觉移动线，我们可以更合理地规划网站的板设计。其优点不仅可以帮助访问者快速阅读、快速获取信息、改善用户体验，还可以帮助我们引导访问者阅读预设信息，有效地传递高价值信息，提高营销效率。



视觉层次应该很容易理解，即人们在阅读时能够阅读从视觉中感受到信息的层次，优秀的视觉水平可以有效地引导.通过信息的优先设计，访问者可以阅读更多内容，更直观地帮助我们通过网站实现相应的数据指标。

例如，以下两个示例：



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

第一层：访客一眼就能理解整个部分的主要内容；

第二层:访客可以通过仔细浏览获得关键内容；

第三层:如果游客想深入了解，可以多看看，多引导。

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


此外，我们还涉及到规划一些网站转换路径「 CTA 行动号召按钮」我们必须确保设计在网站成长思维中的常见应用CTA足够突出，突出，目标清晰，常规技能包括：色彩对比，放置突出位置，层次引导，文案简洁清晰。


通过这两种基本的设计理论和成长思维的结合，我们可以延伸许多合理的设计理念，形成合理的设计语言。方法论是真正有效的设计，而不是盲目过河。



网站的视觉设计可以被视为一种艺术形式，但与纯粹的艺术完全不同，网站的视觉设计需要建立在坚实的科学基础上，合理客观地审视这种设计是否真的能有效地传达价值。

视觉设计的本质是什么？许多人认为这只是一种简单的美，或者只不过是审美的答案。事实上，这种理解是非常生动的，大多数人不理解视觉设计的基本价值。

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

访问者通过感知视觉信息来决定他们的行为。当我们从信息的角度理解视觉设计时，我们可以打破惯性思维对我们的限制，因为视觉设计是一个从抽象信息到图像信息的过程。只有理解这个真理，我们才能真正创建一个具有高外观和高价值的网站。