作为互联网产品，网站扮演着举足轻重的角色。它既需要满足用户视觉上的艺术体验，又不可忽略通过其所传递给用户的正确商业价值。因此，网站视觉设计该如何平衡艺术与商业价值？又需要掌握哪些商业网站的设计思维？作者在本文中详细论述了这两大问题，推荐设计小伙伴们阅读学习～
　　As an Internet product, websites play an important role. It needs to satisfy users' visual artistic experience while not neglecting the correct commercial value conveyed to them through it. Therefore, how should website visual design balance artistic and commercial value? What business website design thinking do we need to master? The author elaborates on these two major issues in detail in this article and recommends that design colleagues read and learn about them
　　相信网站视觉设计的重要性大家应该都清楚，对于访客来说，网站的框架、交互逻辑等这些都是其次的，访客首先感受到的是网站的视觉设计，同时通过视觉也能够直观地表达出我们所要传递的价值。因此，我们在建设网站时，一方面需要确保网站的视觉效果足够优秀，另一方面需要保证视觉能够传递正确的商业价值。
　　I believe everyone is aware of the importance of website visual design. For visitors, the website's framework, interactive logic, and so on are secondary. Visitors first feel the visual design of the website, and through it, we can intuitively express the value we want to convey. Therefore, when building a website, on the one hand, we need to ensure that the visual effect of the website is excellent enough, and on the other hand, we need to ensure that the visuals can convey the correct commercial value.
　　网站视觉设计需要平衡艺术与商业。
　　Website visual design needs to balance art and commerce.
　　艺术与商业的本质其实是感性与理性，两者之间没有绝对的好与坏，相辅相成才是发挥价值的关键。
　　The essence of art and commerce is actually sensibility and rationality, and there is no absolute good or bad between the two. The key to realizing value is to complement each other.
　　企业以盈利为目的，其网站不可避免也附带了商业属性，甚至是网站本身就是为了商业而创造出来的，其商业价值占比也更重。但人类作为视觉动物，视觉感受对于访客来说尤为重要，视觉上的演绎比起网站其他内容，更会影响网站的可信度，因此，网站的视觉起码需要保证符合受众群体的基础审美。
　　Enterprises aim to make profits, and their websites inevitably come with commercial attributes. Even if the website itself is created for commercial purposes, its commercial value accounts for a greater proportion. However, as visual animals, visual perception is particularly important for visitors. Visual interpretation has a greater impact on the credibility of a website than other content. Therefore, the visual appeal of a website must at least meet the basic aesthetic standards of the audience.
　　我们这些年接触了大大小小几千家企业及企业官网，深入探究之后我们找到了一些规律，网站的视觉设计其实关键在于：
　　We have been in contact with thousands of companies and their official websites over the years, and after in-depth exploration, we have found some patterns. The key to website visual design is actually:
　　我们常见的企业网站存在着一个严重的问题，缺乏品牌辨识度，假如你把左上角的品牌LOGO遮住，你可能完全看不出这是那家公司的官网，又或者把左上角的品牌LOGO替换一下，就成了别家公司的企业官网，这是网站严重缺乏品牌视觉识别所导致，这种网站无法让访客记住其品牌，更无法在访客心里占领一席之地。
　　Our common corporate websites have a serious problem of lacking brand recognition. If you cover up the brand logo in the upper left corner, you may not be able to see which company's official website it is. Alternatively, if you replace the brand logo in the upper left corner, it may become another company's official website. This is due to the serious lack of brand visual recognition on the website, which makes it difficult for visitors to remember its brand and occupy a place in their hearts.
　　品牌基础VI设计的应用是最基础也是最容易忽视的细节，它不仅是存在于初期建站，更是在网站迭代中，持续保持企业网站差异化的关键。
　　The application of brand basic VI design is the most fundamental and easily overlooked detail, which not only exists in the early stage of website construction, but also in website iteration, and is the key to continuously maintaining the differentiation of enterprise websites.
　　如何设计一个高辨识度的网站？
　　How to design a highly recognizable website?
　　VI（视觉识别系统）是品牌的视觉符号化，是品牌识别中最具传播力和感染力的部分，它可以将品牌识别系统的非可视化内容，转化为静态的视觉识别符号，它包含了品牌LOGO、标准色、象征图形、标准字体等等。另外还会包含品牌核心价值和个性，不同的品牌VI是各个品牌之间形成差异化的根本原因之一。
　　VI (Visual Identity System) is the visual symbolization of a brand, which is the most communicative and infectious part of brand identity. It can transform the non visual content of the brand identity system into static visual identity symbols, including brand logos, standard colors, symbolic graphics, standard fonts, and so on. In addition, it will also include the core values and personality of the brand, and different brand VI is one of the fundamental reasons for the differentiation between different brands.
　　因此，我们可以通过与品牌VI相结合的方式进行设计，品牌VI可以有非常丰富多样的应用形式，在广泛的层面上进行直接的传播，能够在不同场景中的进行应用，让人们快速辨认出该品牌。
　　Therefore, we can design by combining with brand VI, which can have a wide variety of application forms and be directly spread on a wide range of levels. It can be applied in different scenarios, allowing people to quickly identify the brand.
　　品牌LOGO则是最具辨识度的视觉符号，通过提取LOGO中的基因，延用到我们网站中，更有助于提升品牌辨识度。我们可以从两个维度来提取：
　　The brand logo is the most recognizable visual symbol, and by extracting the genes from the logo and extending it to our website, it can help enhance brand recognition. We can extract from two dimensions:
　　首先，我们可以通过提取logo的形状作为网站视觉设计中的「视觉符号」，也可以参考VI手册中的「象征图形」进行延展，提取logo外形结构做成相应的icon或是动效等，是logo元素的直观体现。
　　Firstly, we can use the shape of the logo as a "visual symbol" in website visual design, or we can refer to the "symbolic graphics" in the VI manual to extend it and extract the logo's external structure to create corresponding icons or animations, which are a visual representation of the logo elements.
　　在网站设计中，我们可以将标准色换到标题文字、icon、控件。访客打开网站时会很容易被这些颜色吸引，也不会感到突兀，合理运用logo颜色，可以统一网站的整体视觉，且做到突出重点与更有效地传达信息。
　　In website design, we can replace standard colors with title text icon、 Control. When visitors open a website, they are easily attracted by these colors without feeling abrupt. Reasonable use of logo colors can unify the overall visual of the website, highlight key points, and convey information more effectively.
　　品牌VI在网站设计中的应该如何应用？
　　How should brand VI be applied in website design?
　　品牌VI可以在三个维度应用到网站设计，来提升网站的辨识度：
　　Brand VI can be applied to website design in three dimensions to enhance website recognition:
　　品牌VI的应用常见的方式就是在icon图标的设计上，icon作为网站的重点图形，能够让访客感知品牌，精致的icon可以让表达更简单高效，要打造一套精致的icon，我们可以从识别性、规范性、整体性和品牌感四个方面着手。
　　The common way to apply brand VI is in the design of icon icons. As the key graphic of a website, icons can help visitors perceive the brand. Exquisite icons can make expression simpler and more efficient. To create a set of exquisite icons, we can start from four aspects: recognition, standardization, integrity, and brand sense.
　　icon设计中的品牌感是将品牌VI应用到网站的关键，比如上方的那套icon，是由增长超人根据英威腾本身的品牌色彩和品牌调性进行设计，应用于官网是这样的：
　　The brand sense in icon design is the key to applying brand VI to a website. For example, the set of icons above is designed by Growth Superman based on the brand color and tone of the Envision itself. The application on the official website is as follows:
　　另外，icon是网站中不可或缺的元素，充当路标，让访客能知道点击后下一步是什么，也就有明确的心理预期。如果icon按钮不够明确，访客可能会不知道下一步是要购买产品或者注册用户的步骤，并且可能直接浏览网站后就直接离开。
　　In addition, icons are an indispensable element in websites, serving as landmarks that allow visitors to know what the next step is after clicking, and thus have clear psychological expectations. If the icon button is not clear enough, visitors may not know the next steps to purchase the product or register as a user, and may simply browse the website before leaving.
　　版式的如何融入品牌调性是很多设计师会忽略的一点，访客来浏览网站时，首先感受到的第一点是色彩，第二则是版式，也就是整体给访客的感觉。
　　How to integrate the brand tone into the layout is a point that many designers overlook. When visitors browse a website, the first thing they feel is the color, and the second is the layout, which is the overall feeling given to visitors.
　　符合品牌定位且具有辨识度的网页版式设计应该怎么做，它更需要从品牌特性中提取，无法像icon一样从品牌logo和标准色中提取元素就可以做到的，更多是一个风格化的设计。
　　What should be done for a webpage layout design that conforms to the brand positioning and has recognition? It needs to be extracted from the brand characteristics more, and cannot be achieved by extracting elements from the brand logo and standard colors like icons. It is more of a stylized design.
　　除了静态的图形设计，品牌VI也可以融入网站动效，利用品牌LOGO的设计元素和结构，进行设计的动效，可以让整个网站更有品牌风格。一个好的动效是能够满足网站功能的表达，强化品牌特质，而不是只追求表面炫酷花哨的效果。
　　In addition to static graphic design, brand VI can also incorporate dynamic effects into the website. By utilizing the design elements and structure of the brand logo to create dynamic effects, the entire website can have a more branded style. A good animation effect is one that can satisfy the expression of website functions and strengthen brand characteristics, rather than just pursuing superficial cool and fancy effects.
　　在网站视觉设计中，品牌VI的应用不仅能够形成区别于同行的差异化，为品牌赋能，还能通过规范化的VI应用，提高访客对其品牌的信任度。
　　In website visual design, the application of brand VI can not only create differentiation from peers and empower the brand, but also improve visitors' trust in their brand through standardized VI applications.
　　品牌的基础VI设计应用于网站是我们的常规操作，但要注意细节，别忽视了其作为网站基础的重要性，对于网站视觉设计，我们在保证基础设计无误的情况下，需要深入到思维上，一个网站的设计看似简单，像是色调、排版，都是设计师的基础功夫，但是要真正做到一个优质的网站，其实并没有想象中那么容易。
　　The basic VI design of a brand applied to a website is our routine operation, but we need to pay attention to details and not overlook its importance as the foundation of the website. For website visual design, while ensuring the correctness of the basic design, we need to delve into our thinking. A website design may seem simple, such as color tone and layout, which are the basic skills of designers, but it is not as easy as imagined to truly achieve a high-quality website.
　　开头我们有提到：视觉设计如何平衡艺术与商业？大多数设计师在初入职场时，都不具备商业思维，首先会经历一段自我怀疑的过程：完成一个稿件后，反反复复被要求改稿，始终无法达到上级的要求，个人价值开始逐渐模糊，沦为一介改稿工具人。
　　At the beginning, we mentioned: How can visual design balance art and commerce? Most designers do not have business thinking when they first enter the workplace. They first go through a process of self doubt: after completing a manuscript, they are repeatedly asked to revise it, but they still cannot meet the requirements of their superiors. Their personal value gradually becomes blurred and they become mere revision tools.
　　在我们看来，企业网站的视觉设计必须具备商业思维，也就是视觉设计需要体现其想表达商业价值，因此，在建设企业网站时，我们需要记住一下几点。
　　In our opinion, the visual design of a corporate website must have business thinking, which means that the visual design needs to reflect its intended commercial value. Therefore, when building a corporate website, we need to remember a few points.
　　不为设计而设计不是将艺术“一棒敲死”，也并非抛弃创新创意，而是应该更注重于强化产品，给满足需求的产品力加持。市面上有很多花里胡哨的网站，第一眼可能能够惊艳到你，但是再深入只是空洞，事实上，能够让访客长时间记住你的并非第一眼，而是其内在，也是我们一直坚持的长期主义价值。
　　Not designing for the sake of design is not about killing art with a stick, nor is it about abandoning innovative creativity. Instead, we should focus more on strengthening products and giving them the power to meet our needs. There are many fancy websites on the market that may impress you at first glance, but delving deeper is just empty. In fact, what can make visitors remember you for a long time is not the first glance, but its essence, which is also the long-term value we have always adhered to.
　　过于强调设计、艺术、创意，不仅会给网站带来开发难度，更是给访客浏览带来沉重的负担。
　　Overemphasizing design, art, and creativity not only makes website development difficult, but also imposes a heavy burden on visitors' browsing.
　　商业环境下，视觉设计的本质应该是强化产品，升华价值，实际上，设计同样需要具备产品思维，增长超人建站更是将产品思维全流程化，这种模式下，每一环都串联起来，不管是用户体验，还是价值传递都非常有利。
　　In the business environment, the essence of visual design should be to enhance products and elevate value. In fact, design also needs to have product thinking. Building a website for growth superheroes requires the full process of product thinking. In this model, every link is connected, whether it is user experience or value transmission, which is very advantageous.
　　产品思维全流程化
　　Fully process product thinking
　　设计需要理解功能目的，为什么策划这个功能？如何通过设计让访客使用更顺畅？如何让访客爱上这个功能？这都是设计需要不断探讨和思考的问题。这时设计与产品之间通过产品思维进行联动，能够确保核心目标一致、步调一致，真正创造出一个有价值网站。
　　Design needs to understand the purpose of the function, why plan this function? How to make visitors use it more smoothly through design? How to make visitors fall in love with this feature? These are all issues that design needs to constantly explore and think about. At this point, the linkage between design and product through product thinking can ensure consistency in core goals and steps, truly creating a valuable website.
　　我们一直在讲视觉设计，视觉设计不仅是静态形式，还可以是动态形式，也就是网站上的交互动效，交互不可避免涉及到的领域就是「用户体验」。08年苹果推出AppStore，App兴起至今，用户体验就广为人知，在App的设计领域更是奉为“宗旨”，当然，在网站设计上同样如此，“以用户为本”本就是产品的关键价值，这是我们不可忽视的方面。
　　We have been talking about visual design, which is not only a static form, but also a dynamic form, that is, the interactive effects on websites. The field that interaction inevitably involves is "user experience". In 2008, Apple launched the AppStore, and since the rise of apps, user experience has been widely known. In the field of app design, it is regarded as the "purpose". Of course, the same is true in website design. "Putting users first" is the key value of products, which cannot be ignored.
　　我们可以参考以下提高用户体验的关键因素：
　　We can refer to the following key factors to improve user experience:
　　网站的视觉设计一方面需要服务于内部，另一方面则服务于用户，内部指的是内部需求，比如上级、老板等他们的视觉审美，这是不可避免的，其中平衡的技巧在这里就不过多讲解了。
　　The visual design of a website needs to serve both internal needs and users. Internal needs refer to internal requirements, such as the visual aesthetics of superiors, bosses, and others. This is inevitable, and the technique of balance will not be explained in detail here.
　　重点还是在于用户身上，也就访客，先前通过市场调研分析出访客画像，可以掌握对访客的审美基础和交互逻辑认知，结合起来进行设计，当然我们也提倡尽可能简化交互，并且让网站贴合访客喜好，内容一目了然。
　　The focus is still on the users, that is, the visitors. Previously, by analyzing the visitor profile through market research, we can grasp the aesthetic foundation and interactive logic cognition of the visitors, and combine them for design. Of course, we also advocate simplifying the interaction as much as possible and making the website fit the preferences of the visitors, and the content is clear at a glance.
　　举个例子，儿童教育服务的品牌网站，在惯性思维中，大多数人会将其设计得更偏向儿童向，迎合儿童的喜好，但是，真正浏览这个网站的访客其实是父母，因此，从偏向儿童向的思路开始就是错误的，这也是很多企业建设网站的时候会掉入的误区，了解用户是设计不可缺少的一步。
　　For example, in the inertia thinking of brand websites for children's education services, most people tend to design them more child oriented and cater to children's preferences. However, the actual visitors to this website are actually parents. Therefore, starting from a child oriented mindset is a mistake, which is also a common mistake that many companies fall into when building websites. Understanding users is an indispensable step in design.
　　增长思维作为增长超人网站建设三大思维之一，也是三大思维中最能激发网站商用价值的思维。在视觉设计当中，运用增长思维能够有效强化网站，加强网站价值。
　　Growth mindset, as one of the three major mindsets for building a growth oriented website, is also the most effective way to stimulate the commercial value of a website. In visual design, using growth thinking can effectively strengthen a website and enhance its value.
　　我们需要先探讨“网站内容中哪些信息最重要？”，“传递这些信息的目的是什么？”例如，一个促销活动版块的营销点是免费领取资料，我们需要理解：最打动访客的是资料还是“免费”，是资料的图片需要更突出还是“免费”相关文案。在商业之下，设计也需要理解营销，也需要懂增长。
　　We need to first explore "which information is most important in website content?" and "what is the purpose of conveying this information?" For example, if the marketing point of a promotional activity section is to receive materials for free, we need to understand: what impresses visitors the most is the materials or "free", whether the pictures of the materials need to be more prominent or the relevant copy is "free". In business, design also needs to understand marketing and growth.
　　理解了基础逻辑，就需要进行下一步--强化它们，有效传递价值，实际落地可以参考两个基础理论：
　　Once the basic logic is understood, the next step is to strengthen them and effectively convey value. Two fundamental theories can be referenced for practical implementation:
　　视觉动线是指人们在阅读时，视觉移动时所形成的方向路径。早在十多年前，用户体验专家雅各布·尼尔森博士提到“人们很少逐字阅读网页，相反，他们扫描页面，挑选单个单词和句子”。正是如此，人们在阅读的时候才会形成几种常见的视觉动线规律。
　　Visual flow refers to the directional path formed by people's visual movement while reading. More than a decade ago, user experience expert Dr. Jacob Nielsen mentioned that "people rarely read web pages word for word. Instead, they scan pages and select individual words and sentences. That's why people form several common visual flow patterns while reading.
　　基于这两种常见的视觉动线，我们在做网站的板式设计时，可以更合理地策划视觉动线。其好处不仅能够帮助访客快速阅读，快速获取信息，提升用户体验，还可以帮助我们引导访客阅读预设的信息，高效传递高价值信息，提高营销效率。
　　Based on these two common visual flow lines, we can plan the visual flow lines more reasonably when designing website layouts. Its benefits not only help visitors read quickly, obtain information quickly, and improve user experience, but also help us guide visitors to read pre-set information, efficiently convey high-value information, and improve marketing efficiency.
　　视觉层次应该很好理解，即人们在阅读时，能从视觉中感受到信息的层次，优秀的视觉层次能够非常高效地引导.访客阅读更多内容，并且通过信息的优先级设计能更直观地帮助我们传网站达成相应的数据指标。
　　The visual hierarchy should be easy to understand, that is, the level of information that people can perceive from the visual perception when reading, and excellent visual hierarchy can guide very efficiently Visitors can read more content and achieve corresponding data metrics for our website more intuitively through the prioritization design of information.
　　视觉动线可以作为网站整体的板式设计思路，而视觉层次则是单个版块的设计方向，版块的视觉层级设计应分为三层：
　　Visual flow can serve as the overall board design concept for a website, while visual hierarchy is the design direction for individual sections. The visual hierarchy design of sections should be divided into three layers:
　　第一层：访客扫一眼就能理解整个版块的主要内容；
　　First layer: Visitors can understand the main content of the entire section at a glance;
　　第二层：访客通过仔细浏览能够获取关键内容；
　　Second layer: Visitors can obtain key content by carefully browsing;
　　第三层：访客想深入了解可以查看更多，引导深入。
　　Level 3: Visitors who want to delve deeper can view more and be guided to do so.
　　通过上述三层，即能有效实现我们增长的目的，常见的设计技巧为：通过「大小」、「色彩」、「重量」形成信息之间的层级对比，建立信息优先级。
　　Through the above three layers, we can effectively achieve our goal of growth. A common design technique is to create a hierarchical contrast between information through "size", "color", and "weight", and establish information priority.
　　除此之外，我们在策划一些网站转化路径时，还涉及到了「 CTA 行动号召按钮」的设计，这在网站的增长思维中常见的应用，我们必须确保CTA足够显眼、突出、目标清晰，常规技巧包括：颜色对比、放置显眼位置、层级引导、文案简洁清晰。
　　In addition, when planning some website conversion paths, we also involved the design of the "CTA Call to Action Button", which is a common application in website growth thinking. We must ensure that the CTA is sufficiently prominent, prominent, and has clear goals. Conventional techniques include color contrast, placing prominent positions, hierarchical guidance, and concise and clear copy.
　　通过这两个基础的设计理论以及增长思维的结合，我们可以延伸出很多合理的设计思路，形成有理有据的设计语言，有了方法论才是真正的有效设计，而非“摸瞎过河”。
　　By combining these two fundamental design theories with growth thinking, we can extend many reasonable design ideas and form a well founded design language. With methodology, effective design is truly achieved, rather than blindly crossing the river.
　　网站的视觉设计可以被视作一种艺术形式，但与纯艺术截然不同，网站的视觉设计需要建立在牢固的科学基础之上，以理性客观去审视一下这样设计是否真的能有效传递价值。
　　The visual design of a website can be seen as an art form, but it is completely different from pure art. The visual design of a website needs to be built on a solid scientific foundation, and examined rationally and objectively to see if this design can truly effectively convey value.
　　视觉设计的本质是什么？很多人认为只是单纯的美，或者无非就是关于审美的答案。其实，这种理解是十分表象的，大多数人并没有理解视觉设计的根本价值。
　　What is the essence of visual design? Many people believe that it is simply beauty or nothing more than an answer about aesthetics. In fact, this understanding is very superficial, and most people do not understand the fundamental value of visual design.
　　视觉设计是网站的一个重要层面，网站作为互联网产品，则其视觉设计的本质是价值传递，我们一直以增长思维和产品思维与视觉设计相融合，就是为了实现高效传递高价值信息。
　　Visual design is an important aspect of websites. As an Internet product, the essence of visual design of websites is value transmission. We have always integrated growth thinking and product thinking with visual design to achieve efficient transmission of high-value information.
　　访客通过对视觉信息的感知，来决定自己行为。当我们从信息的角度去理解视觉设计时，可以打破惯性思维对我们的限制，因为视觉设计是一个由抽象信息转换为图像信息的过程，理解这层道理才能真正打造出一个具有高颜值和高价值的网站。
　　Visitors determine their behavior based on their perception of visual information. When we understand visual design from the perspective of information, we can break through the limitations of habitual thinking, because visual design is a process of transforming abstract information into image information. Only by understanding this principle can we truly create a website with high aesthetics and value.
　　本文由 济南网站设计 友情奉献.更多有关的知识请点击 https://www.xinnuoshang.cn/ 真诚的态度.为您提供为全面的服务.更多有关的知识我们将会陆续向大家奉献.敬请期待.
　　This article is a friendly contribution from Jinan website design For more related knowledge, please click https://www.xinnuoshang.cn/ Sincere attitude To provide you with comprehensive services We will gradually contribute more relevant knowledge to everyone Coming soon.