作為互聯網產品，網站扮演著舉足輕重的角色。它既需要滿足用戶視覺上的藝術體驗，又不可忽略通過其所傳遞給用戶的正確商業價值。因此，網站視覺設計該如何平衡藝術與商業價值？又需要掌握哪些商業網站的設計思維？作者在本文中詳細論述了這兩大問題，推薦設計小伙伴們閱讀學習～
　　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.