前段时间频繁（相对之前）地设计官网，于是在设计过程中，我总结归纳了一些网站设计的准则和方法。分享给各位~

　　Recently, I frequently (compared to before) designed official websites, so during the design process, I summarized and summarized some guidelines and methods for website design. Share with everyone~

　　01什么是网站设计？

　　What is website design?

　　网站设计是每个企业营销策略中关重要的一部分。它决定了有多少人会访问网站，以及用户在网站上的互动方式。

　　Website design is a crucial part of every enterprise's marketing strategy. It determines how many people will visit the website and how users interact on the website.

　　如果网站不友好或无法真实反映品牌形象，它对公司就毫无益处。网站实际上是品牌的名片，潜在客户在访问时会对品牌和服务产生印象。

　　If the website is unfriendly or cannot truly reflect the brand image, it is of no benefit to the company. A website is actually a brand's business card, and potential customers will have a first impression of the brand and services when they visit.

　　为了改善用户体验并吸引更多访客，网站设计需要采取战略性的方法。

　　In order to improve user experience and attract more visitors, website design needs to adopt a strategic approach.

　　无论经营的是哪种类型的业务或面向哪个细分市场，遵循一些基本的网站设计原则将帮助我们创建现代且对用户友好的设计，从而迅速吸引用户的注意力。

　　Regardless of the type of business or market segment we operate in, following some basic website design principles will help us create modern and user-friendly designs that quickly capture users' attention.

　　02网站设计的5要素

　　5 elements of website design for 02

　　1、  网站内容

　　1. Website Content

　　内容始终是网站设计的首要考虑因素。它代表着产品的核心价值，必须有效地传达给用户。

　　Content is always the primary consideration in website design. It represents the core value of the product and must be effectively conveyed to users.

　　在很多情况下，网站设计主要集中在内容的维护和展示上。无论内容类型如何，内容的结构、设计和展示都是设计中必须充分考虑的方面。

　　In many cases, website design mainly focuses on content maintenance and display. Regardless of the type of content, the structure, design, and presentation of the content are all aspects that must be fully considered in design.

　　设计师学会熟悉并运用设计样式（设计组件）之后，很容易找到展示内容的方式。但仅仅展示内容远远不够，还需传递内容的性质和作用。

　　After becoming familiar with and applying design styles (design components), designers can easily find the best way to showcase their content. However, simply displaying the content is far from enough, it is also necessary to convey the nature and purpose of the content.

　　结构、设计、内容显示、界面样式

　　Structure, design, content display, interface style

　　2、  布局设计

　　2. Layout Design

　　始终牢记产品的主要目标：通过良好的布局、精美的视觉效果、采用的方式展现内容。

　　Always keep in mind the main goal of the product: to present content in the best possible way through good layout, exquisite visual effects.

　　布局设计涉及内容结构、视觉层次、邻近原则、界面样式等。

　　Layout design involves content structure, visual hierarchy, proximity principle, interface style, etc.

　　内容结构、视觉层次、邻近原则、界面样式

　　Content structure, visual hierarchy, proximity principle, interface style

　　3、  颜色选择

　　3. Color selection

　　通过运用合适的对比度和配色方案，确保网站视觉和谐。无论是单色、同一色系的不同色调，还是四种颜色（两种互补色方案，其中一种为主导色），都需要保持平衡，关注冷暖色的搭配，确保足够的对比度。

　　By using appropriate contrast and color schemes, ensure visual harmony on the website. Whether it's monochrome, different tones in the same color scheme, or four colors (two complementary color schemes, one of which is the main guiding color), balance needs to be maintained, paying attention to the combination of cool and warm colors to ensure sufficient contrast.

　　颜色对用户有强大的心理影响，能够传递品牌形象并激发情感，而激发何种情感则取决于产品的终目标。

　　Colors have a strong psychological impact on users, as they can convey brand image and evoke emotions, and the emotions they evoke depend on the ultimate goal of the product.

　　此外，并非所有用户都能看到颜色的本来面目，因此网站的可访问性尤为重要。

　　In addition, not all users can see the true colors, so website accessibility is particularly important.

　　4、  平面设计

　　4. Graphic Design

　　图形是网站设计的重要组成部分，选择的图形不仅要美观，还需展现产品的主要特点，确保可用性、可访问性和性能，满足业务需求，并考虑用户心理。

　　Graphics are an important component of website design, and the selected graphics should not only be aesthetically pleasing, but also showcase the main features of the product, ensuring usability, accessibility, and performance, meeting business needs, and considering user psychology.

　　网页设计中的平面设计：

　　Graphic design in web design:

　　展现产品的主要特点

　　Showcase the main features of the product

　　满足可用性和性能

　　Meet availability and performance requirements

　　符合业务目标

　　Meets business objectives

　　了解用户心理

　　Understand user psychology

　　满足可访问性标准

　　Meet accessibility standards

　　5、  字体和排版

　　5. Font and layout

　　排版在网站设计中起着重要作用。字体对用户的视觉冲击和整体可用性影响深远。

　　Layout plays an important role in website design. Fonts have a profound impact on users' visual impact and overall usability.

　　无论是可读性强的长文本，还是引人注目的标题，设计师都可以通过字体营造独特且有效的设计。

　　Whether it's readable long text or eye-catching titles, designers can create unique and effective designs through fonts.

　　因此，排版是网站设计的关键元素，能够强化视觉识别、激发用户情感并有效传达信息。与颜色一样，排版也能创造全新的用户体验。

　　Therefore, layout is a key element in website design, which can enhance visual recognition, stimulate user emotions, and effectively convey information. Like color, layout can also create a completely new user experience.

　　可读性、可用性、加强视觉识别、视觉和谐

　　Readability, usability, enhanced visual recognition, visual harmony

　　03什么是一个好网站？

　　What is a good website?

　　一个好的网站是为用户而设计的，而不是为设计师。

　　A good website is designed for users, not for designers.

　　设计应该易于导航、快速加载、外观良好，并且直观，符合品牌形象并与之保持一致。所有这些因素对于良好的用户体验关重要。

　　The design should be easy to navigate, fast to load, visually appealing, and intuitive, in line with the brand image and consistent with it. All these factors are crucial for a good user experience.

　　注意，设计不仅仅是美学问题。良好的网站设计使用户能轻松找到所需内容，并在不迷失方向的情况下浏览网站。

　　Note that design is not just an aesthetic issue. Good website design enables users to easily find the content they need and browse the website without getting lost.

　　为此，需要考虑以下关键因素：

　　For this, the following key factors need to be considered:

　　? 设计目标是什么？

　　What is the design objective?

　　? 用户是谁，他们在寻找什么？

　　Who are the users and what are they looking for?

　　? 用户可能如何与网站互动？

　　How may users interact with the website?

　　? 用户想要或需要采取什么行动？

　　What actions do users want or need to take?

　　虽然网站的目的各不相同，但几乎所有网站都共享一致的核心目标：

　　Although the purpose of each website is different, almost all websites share the same core goal:

　　1、  描述并展示业务

　　1. Describe and showcase professional business

　　2、  建立品牌声誉

　　2. Establish brand reputation

　　3、  产生潜在客户

　　3. Generate potential customers

　　4、  促进销售和售后服务

　　4. Promote sales and after-sales service

　　设计网站并不容易，尤其是对于需要吸引购物者和潜在客户的商业网站。但不用担心，本文将为您提供解决方案！

　　Designing a website is not easy, especially for commercial websites that need to attract shoppers and potential customers. But don't worry, this article will provide you with a solution!

　　04一个好网站，应符合8个设计原则

　　A good website should adhere to 8 design principles

　　无论是重新设计现有网站还是推出新网站，牢记这些网页设计原则对于规划新网站关重要。

　　Whether redesigning an existing website or launching a new one, it is crucial to remember these web design principles when planning a new website.

　　这些原则有助于设计出一个现代化、直观且易于导航的网站。

　　These principles help design a modern, intuitive, and easy to navigate website.

　　1. 简单

　　1. Simple

　　简洁上。确保用户能轻松找到所需内容，避免复杂元素使用户感到困惑。

　　Simplicity is paramount. Ensure that users can easily find the desired content and avoid confusion caused by complex elements.

　　2. 一致性

　　2. Consistency

　　设计在各个方面都应保持一致。使用相同的设计方案、字体和功能，确保体验。

　　The design should be consistent in all aspects. Use the same design scheme, font, and functionality to ensure the best experience.

　　3. 配色和图像

　　3. Color matching and images

　　颜色影响用户对网站的反应和情感。建议保持配色简约且符合品牌形象。

　　Color affects users' reactions and emotions towards the website. Suggest keeping the color scheme simple and in line with the brand image.

　　4. 排版和可读性

　　4. Layout and readability

　　排版对用户体验有显著影响，确保内容的可读性，尽量避免使用超过三种不同的字体。

　　Typography has a significant impact on user experience, ensuring the readability of content and avoiding the use of more than three different fonts as much as possible.

　　5. 有效沟通

　　5. Effective communication

　　使用简练、明确的语言与受众进行沟通，通过内容传递信息并产生影响力。

　　Communicate with the audience using concise and clear language, convey information through content, and generate influence.

　　6. 轻松导航

　　6. Easy navigation

　　确保访问者能够明显找到所需内容，简单的导航和逻辑清晰的层级结构关重要。

　　Ensuring that visitors can clearly find the content they need, simple navigation and a logically clear hierarchical structure are crucial.

　　7. 响应式设计

　　7. Responsive design

　　随着移动设备的普及，确保网站具有响应式设计，以适应不同设备。

　　With the popularity of mobile devices, ensure that websites have responsive design to adapt to different devices.

　　8. 快速加载

　　8. Quick loading

　　网站的加载速度关重要，确保页面加载快速，以提高用户体验。

　　The loading speed of a website is crucial to ensure fast page loading and improve user experience.

　　1、  简单

　　1. Simple

　　“简单”原则是网站设计的重要组成部分，对网站的可读性和可用性关重要。

　　The principle of simplicity is an important component of excellent website design, and is crucial for the readability and usability of the website.

　　的设计趋势并不总是选择。

　　The latest design trends are not always the best choice.

　　很多网站使用了复杂的元素和难以导航的模板。为了脱颖而出，设计应保持简洁，使其清晰易用。避免不必要的细节，保持网站的整洁，重要的是要知道何时减少视觉元素以增强设计的整体效果，让用户更好地聚焦于关键信息。

　　Many websites use complex elements and difficult to navigate templates. In order to stand out, the design should remain concise and make it clear and easy to use. Avoiding unnecessary details and keeping the website clean is important. It is important to know when to reduce visual elements to enhance the overall design effect and allow users to better focus on key information.

　　并不一定要追求极简主义，但所有信息和元素都应与网站相关并增加价值。当网站简单易用时，内容便能充分展示。

　　It is not necessary to pursue minimalism, but all information and elements should be relevant to the website and add value. When a website is simple and easy to use, the content can be fully displayed.

　　简单设计也意味着降低认知负担，真正的网站设计应是直观且毫不费力的。如果某个操作带来的认知负担过重，用户可能会感到不知所措、沮丧和疲惫。

　　Simple design also means reducing cognitive burden, and truly excellent website design should be intuitive and effortless. If a certain operation brings excessive cognitive burden, users may feel lost, frustrated, and exhausted.

　　如何减少认知负担呢？

　　How to reduce cognitive burden?

　　常见策略包括：视觉层次、留白和细节设计。

　　Common strategies include visual hierarchy, white space, and detail design.

　　视觉层次：层次化的内容结构可以帮助用户迅速理解所见之物，从而促进操作。层次结构明确表明哪些元素相互关联，哪些互不关联，并突出重要的区域，使用户一目了然地知道可点击的地方。这样的视觉和内容结构可以有效引导用户，从“认知”到“兴趣”，再到“参与”的旅程。

　　Visual hierarchy: A hierarchical content structure can help users quickly understand what they are seeing, thereby facilitating operations. The hierarchical structure clearly indicates which elements are interrelated and which are not, and highlights the most important areas, making it easy for users to know where to click. This visual and content structure can effectively guide users on a journey from "cognition" to "interest" and then to "participation".

　　留白：适当的留白可以缓解视觉疲劳，并有助于用户的浏览体验。

　　Blank space: Proper blank space can alleviate visual fatigue and contribute to the user's browsing experience.

　　细节：设计中的细节要贴心到位，例如：清晰的标签、易读的文案和字体、明确的表单提示以及能够引导用户解决问题的错误提示等

　　Details: The details in the design should be thoughtful and in place, such as clear labels, easy to read text and fonts, clear form prompts, and error prompts that can guide users to solve problems

　　2、 一致性

　　2. Consistency

　　的设计在各个方面都应保持一致。

　　Excellent design should be consistent in all aspects.

　　确保设计在各个渠道之间的一致性，有助于建立与目标受众的信任和信誉。

　　Ensuring consistency in design across various channels helps establish trust and credibility with the target audience.

　　网站应确保线上线下的印刷材料使用相同的视觉风格。在多个渠道中看到一致的信息、颜色和标识，有助于强化品牌形象并传达性，从而增加用户的熟悉感和信任感。

　　The website should ensure that both online and offline printing materials use the same visual style. Seeing consistent information, colors, and logos across multiple channels helps strengthen brand image and convey professionalism, thereby increasing user familiarity and trust.

　　如果使用多个平台推广业务，也要确保风格和视觉设计在所有平台上保持一致。

　　If using multiple platforms to promote business, it is also important to ensure consistency in style and visual design across all platforms.

　　3、配色和图像

　　3. Color matching and images

　　在网站设计中，可以使用各种颜色进行组合，但应避免颜色范围过宽或使用过多颜色。建议保持配色简洁，使用三到五种颜色。

　　In website design, various colors can be combined, but it is important to avoid a wide range of colors or using too many colors. Suggest keeping the color scheme simple and using three to five colors.

　　同样，不要使用过多的图像，务必选择能够代表品牌、服务和产品的图像，避免使用无关或无法体现内容的图像。

　　Similarly, do not use too many images, be sure to choose images that represent the brand, service, and product, and avoid using images that are irrelevant or cannot reflect the content.

　　在设计网站时，考虑视觉风格和设计基调关重要。同时，保持设计的简洁和清爽，便于用户导航。无需使用复杂的设计元素，简单、干净且现代的设计足以满足需求。

　　When designing a website, it is crucial to consider visual style and design tone. At the same time, keep the design simple and refreshing, making it easy for users to navigate. No need to use complex design elements, simple, clean, and modern designs are sufficient to meet the needs.

　　4、排版和可读性

　　4. Layout and readability

　　用户不会阅读不吸引人的内容，因此选择与网站内容契合的字体显得尤为重要。

　　Users will not read unappealing content, so choosing a font that matches the website content is particularly important.

　　避免使用过于花哨的字体，应该坚持使用清晰且的易读字体。

　　Avoid using overly fancy fonts and insist on using clear and professional easy to read fonts.

　　将重要的词语和短语加粗或大写也很有帮助，可以使用不同的字体大小来提高内容的吸引力和可读性。

　　Bold or capitalized important words and phrases can also be helpful, as different font sizes can be used to enhance the attractiveness and readability of the content.

　　例如，与其在整个页面使用一种大字号，不如使用多个较小的字体，并通过不同的字号划分页面，使用户更清晰地识别各部分内容。

　　For example, instead of using a single large font size on the entire page, it is better to use multiple smaller fonts and divide the page by different font sizes, allowing users to more clearly identify each part of the content.

　　此外，字体的大小也要适中，以便在电脑或移动设备上都能轻松阅读。

　　In addition, the font size should be moderate so that it can be easily read on both computers and mobile devices.

　　5、有效沟通

　　5. Effective communication

　　网站设计的核心在于沟通。

　　The core of website design lies in communication.

　　确保设计能够有效传达信息，让潜在客户轻松理解您想要表达的内容。网站的设计和内容如同歌曲的歌词和旋律，当二者不符时，用户会感到不和谐和脱节。

　　Ensure that the design effectively conveys information and makes it easy for potential customers to understand what you want to express. The design and content of a website are like the lyrics and melody of a song. When the two do not match, users will feel discordant and disconnected.

　　设计师应通过使用图像、配色、图标、字体和其他视觉元素的组合，传递品牌价值，营造独特且有效的视觉语言，建立企业的品牌身份。

　　Designers should use a combination of images, color schemes, icons, fonts, and other visual elements to convey brand value, create a unique and effective visual language, and establish the brand identity of the enterprise.

　　同时，确保视觉设计不仅易于导航，还能快速加载。

　　At the same time, ensure that the visual design is not only easy to navigate, but also loads quickly.

　　6、轻松导航

　　6. Easy navigation

　　现代网站设计的关键在于简单的导航。

　　The key to modern website design lies in simple navigation.

　　通过清晰的逻辑层次结构，确保用户可以轻松地从网站的一个部分导航到另一个部分。

　　Ensure that users can easily navigate from one part of the website to another through a clear logical hierarchy.

　　可以使用导航菜单、结构导航或导航栏等多种方式实现这一目标。

　　This goal can be achieved through various methods such as navigation menus, structured navigation, or navigation bars.

　　7、响应式设计

　　7. Responsive design

　　随着移动设备使用的增长，创建一个移动友好且响应迅速的网站变得关重要。您知道吗，几乎60%的网站流量来自移动设备？

　　With the increasing use of mobile devices, creating a mobile friendly and responsive website has become crucial. Did you know that almost 60% of website traffic comes from mobile devices?

　　用户希望能快速浏览网站，因此在设计时需考虑移动用户的体验。

　　Users hope to browse websites quickly, so the design needs to consider the mobile user experience.

　　使用响应式设计可以使布局根据不用的设备（如电脑、平板、手机）进行调整。

　　Using responsive design allows the layout to be adjusted according to different devices such as computers, tablets, and phones.

　　8、快速加载

　　8. Quick loading

　　在这个即时满足的时代，确保网站加载速度快关重要。加载时间越长，用户离开的可能性就越大。不要让用户在寻找信息或进行购买时在网站上花费过多时间。

　　In this era of instant gratification, ensuring fast website loading speed is crucial. The longer the loading time, the greater the likelihood of users leaving. Do not let users spend too much time on the website searching for information or making purchases.

　　为了确保网站快速加载，建议使用加载速度快的内容管理系统（CMS)，如WordPress。

　　To ensure fast website loading, it is recommended to use a content management system (CMS) with fast loading speed, such as WordPress.

　　WordPress的Astra主题在PageSpeed Insights上的得分为满分100，加载时间不到一秒。

　　The Astra theme for WordPress has a perfect score of 100 on PageSpeed Insights, with a loading time of less than one second.

　　印象关重要。若网站加载缓慢，大多数人不会再次访问。这也可能导致用户在找到所需信息之前离开网站。

　　The first impression is crucial. If the website loads slowly, most people will not visit it again. This may also cause users to leave the website before finding the information they need.

　　05

　　05

　　该如何设计?

　　How should it be designed?

　　无论是重新设计现有网站还是推出新网站，牢记这些网页设计原则对于规划新网站关重要。

　　Whether redesigning an existing website or launching a new one, it is crucial to remember these web design principles when planning a new website.

　　网站设计布局

　　Website design layout

　　布局可以成就或毁掉一个网，是任何网站设计中的基石。

　　Layout can create or destroy a website and is the cornerstone of any website design.

　　布局是分配空间的框架，确保整个产品的功能性和可用性。如果布局设计不当，整个网站可能会陷入灾难，就像将房子的地基完全打错，终无法经受时间的考验。

　　Layout is the framework for allocating space, ensuring the functionality and usability of the entire product. If the layout design is not appropriate, the entire website may fall into disaster, just like building a house on the wrong foundation and ultimately unable to withstand the test of time.

　　在设计中，需要为重要内容分配更多空间，以确保展示的内容能够充分发挥作用。内容的排列方式取决于多个因素，例如内容的性质、显示设备、预期用户及项目的主要目标。

　　In design, it is necessary to allocate more space for important content to ensure that the displayed content can fully play its role. The arrangement of content depends on multiple factors, such as the nature of the content, display devices, expected users, and the main objectives of the project.

　　无论产品和内容类型如何，布局都需要合理利用空间，创造视觉平衡，并设置元素的重要性和层次。这是网站设计中的关键一步，对终产品的影响巨大。

　　Regardless of the product and content type, the layout needs to make reasonable use of space, create visual balance, and set the importance and hierarchy of elements. This is a crucial step in website design and has a huge impact on the final product.

　　网站设计布局的重要因素

　　Important factors in website design layout

　　1、内容结构

　　1. Content Structure

　　了解产品目标和展示内容，才能确定。内容的呈现方式应美观、有说服力、且易于理解。

　　Understanding the product objectives and presentation content is necessary to determine the focus. The presentation of content should be aesthetically pleasing, persuasive, efficient, and easy to understand.

　　内容结构与信息架构和视觉层次密切相关。

　　Content structure is closely related to information architecture and visual hierarchy.

　　一方面，信息架构确定关键内容并定义各部分之间的关联；另一方面，视觉层次通过层次结构使页面易于阅读和理解，指引用户关注。如果所有元素几乎相同，页面会显得混乱。

　　On the one hand, information architecture identifies key content and defines the relationships between various parts; On the other hand, visual hierarchy makes the page easy to read and understand through a hierarchical structure, guiding users to focus on key points. If all elements are almost identical, the page will appear cluttered.

　　如果所有元素几乎相同，页面会显得混乱。设计师应利用层次结构引导用户视线，确保关键内容成为焦点。

　　If all elements are almost identical, the page will appear cluttered. Designers should use hierarchical structures to guide users' gaze and ensure that key content becomes the focus.

　　网站设计布局不仅仅关乎视觉愉悦。也涉及人眼和用户对内容的反应。希望用户关注重要部分，顺利浏览其他内容，从而使用户体验流畅自然，理想情况下，用户甚不会察觉到内容结构的精心设计。

　　Website design and layout are not just about visual pleasure. It also involves the reactions of the human eye and users to the content. We hope that users will first focus on the important parts and smoothly browse other content, so that the user experience is smooth and natural. Ideally, users may not even notice the carefully designed content structure.

　　2、视觉平衡

　　2. Visual balance

　　视觉平衡在网站设计中关重要。合理分配页面上各元素的视觉权重，使页面既易于阅读，又不于过分繁杂，给用户带来不适。就像布置房间中的家具或装饰花园中的植物一样，需要注意元素之间的分布，创造和谐的感觉。

　　Visual balance is crucial in website design. Reasonably allocate the visual weight of each element on the page, making the page easy to read without being overly complicated and causing discomfort to users. Just like decorating furniture in a room or plants in a garden, it is important to pay attention to the distribution of elements and create a harmonious feeling.

　　，对齐是关键。这指的是元素在布局中的位置，设计师可以通过放置重要元素来实现平衡。例如，多个小元素对齐，向用户传达它们之间的联系。

　　Firstly, alignment is crucial. This refers to the position of elements in the layout, and designers can achieve balance by placing important elements. For example, multiple small elements are perfectly aligned to convey their connections to the user.

　　其次，对称性也很重要。对称设计可以使画面平衡、眼睛得到放松；而打破对称性则能创造出新颖而有力的效果，但关键在于保持视觉上的平衡。

　　Secondly, symmetry is also important. Symmetrical design can balance the picture and relax the eyes; Breaking symmetry can create novel and powerful effects, but the key is to maintain visual balance.

　　3、突出内容

　　3. Highlight key content

　　网站设计布局需将用户的注意力集中在真正重要的内容上。通过合理分配空间，突出内容。设计师可以通过颜色选择、元素周围的留白或元素与背景的对比度来传达页面上的主要。

　　Website design layout needs to focus users' attention on the truly important content. By allocating space reasonably and highlighting key content. Designers can convey the main focus of a page through color selection, white space around elements, or contrast between elements and the background.

　　例如，主要按钮（如“发送”）通常采用醒目的颜色以吸引用户注意，而次要按钮（如“取消”）则采用较低对比度的颜色，以引起注意但不于分散太多焦点。

　　For example, the main button (such as "send") usually uses a prominent color to attract the user's attention, while the secondary button (such as "cancel") uses a lower contrast color to attract attention but not scatter too much focus.

　　设计师向用户传达页面上真正重要内容的主要方式之一是通过比例。重要内容通常以更大尺寸展示，占据更多设计空间。网站设计布局要求设计师明确每个页面上的主要元素或重要的信息。确定优先级关重要，这决定了在哪里。

　　One of the main ways designers convey the truly important content on a page to users is through proportion. Important content is usually displayed in larger sizes, occupying more design space. Website design layout requires designers to clearly identify the main elements or most important information on each page. Prioritizing is crucial as it determines where the focus lies.

　　4、留白和视觉缓解

　　4. Blank space and visual relief

　　在网站设计布局中，留白关重要。留白的主要作用是突出视觉层次，让用户能够直观地感知信息之间的关联性，同时确定元素之间的相似之处。

　　Blank space is crucial in website design and layout. The main function of blank space is to highlight visual hierarchy, allowing users to intuitively perceive the correlation between information and determine the similarities between elements.

　　适当的留白有助于提高可读性，因为用户不会被细节所干扰，而是专注于设计师设定的路径。

　　Proper whitespace helps improve readability as users are not distracted by details and instead focus on the path set by the designer.

　　大量使用留白还有助于视觉缓解，减少认知负荷（即阅读、理解和解释信息所需的心理能量）。

　　The extensive use of blank space also helps with visual relief and reduces cognitive load (i.e. the psychological energy required to read, understand, and interpret information).

　　通过优先考虑元素和信息，在它们周围流出充足的空白，确保页面不会让用户感到不知所措。如果元素过多、颜色闪烁、图形移动且没有留白，用户往往会离开。

　　By prioritizing elements and information, leaving ample blank space around them, ensure that the page does not leave users feeling overwhelmed. If there are too many elements, colors flicker, graphics move without leaving any white space, users often leave.

　　5、重复

　　5. Repeat

　　在网站设计布局中，重复元素和排列并不一定是问题，有时反而是优势。特别是对于需要承载大量内容和多种页面设计的大型产品，通过巧妙地重复某些元素，可以使整体设计更加统一，营造连贯的感觉。

　　In website design layout, repetitive elements and arrangement are not necessarily a problem, sometimes they can actually be an advantage. Especially for large products that require carrying a large amount of content and multiple page designs, cleverly repeating certain elements can make the overall design more unified and create a coherent feeling.

　　，在同一设计中包含过多独特元素和风格是不可取的。超过一定限度，容易导致视觉疲劳，增加认知负荷。

　　Firstly, it is not advisable to include too many unique elements and styles in the same design. Exceeding a certain limit can easily lead to visual fatigue and increase cognitive load.

　　其次，要考虑品牌识别和设计系统。网站设计布局可以有效体现品牌识别，为设计增添个性。

　　Secondly, brand recognition and design systems should be considered. Website design layout can effectively reflect brand identity and add personality to the design.

　　随着产品的发展，要以连贯的方式保持相同的品牌形象并不容易。因此，有必要规范设计系统，不仅包括色彩搭配，还包括整个布局，以确保设计团队成员能够利用这些基本的网站设计布局，创建符合品牌视觉识别的页面。

　　It is not easy to maintain the same brand image in a coherent manner as the product develops. Therefore, it is necessary to standardize the design system, including not only color matching but also the entire layout, to ensure that design team members can utilize these basic website design layouts to create pages that conform to the brand's visual identity.

　　15种网页设计布局，永不过时

　　15 web design layouts that never go out of style

　　1、卡片式布局

　　1. Card style layout

　　卡片式布局因Pinterest、Facebook和Twitter等网站而流行，已成为新闻网站和博客的标准选择。这种布局适合在页面上展示大量内容，同时保持每个部分的独立性。

　　The card layout has become popular on websites such as Pinterest, Facebook, and Twitter, and has become a standard choice for news websites and blogs. This layout is suitable for displaying a large amount of content on the page while maintaining the independence of each section.

　　卡片式布局主要有两种形式：

　　There are two main forms of card layout:

　　? 网格排列相同尺寸的卡片（如Behance）；

　　Grid arrangement of cards of the same size (such as Behance);

　　? 使用流体布局，尺寸不同的卡片在有序列中排列，但没有明确的行（如Pinterest）。

　　Using a fluid layout, cards of different sizes are arranged in a sequential manner without clear rows (such as Pinterest).

　　卡片式布局的一个重要特点是其无限的可扩展性，可以根据大小、间距和列的数量进行调整。卡片样式也可以根据屏幕大小而变化，这使其在响应式设计中表现出色。

　　An important feature of card layout is its infinite scalability, which can be adjusted based on size, spacing, and number of columns. The card style can also vary according to the screen size, which makes it perform well in responsive design.

　　2、网格布局

　　2. Grid layout

　　网格为设计提供了视觉平衡和秩序，帮助用户更好地阅读和理解内容。

　　Grid provides visual balance and order for design, helping users better read and understand content.

　　大多数网格系统使用12列或16列，列间留有间距。某些网站将网格作为显著特征，而有些则较为隐蔽，只有在仔细观察时才能发现。

　　Most grid systems use 12 or 16 columns with spacing between columns. Some websites use grids as prominent features, while others are more subtle and can only be discovered through careful observation.

　　除了基于列的网格，网页设计中也常用基线网格，以合理排列横向元素，特别是在排版中强调正文和标题之间的行间距。采用的页面间距设置，可以确保网站的整体一致性和统一性。

　　In addition to column based grids, baseline grids are also commonly used in web design to arrange horizontal elements in a reasonable manner, especially emphasizing the line spacing between the main text and the title in layout. Adopting the optimal page spacing setting can ensure the overall consistency and uniformity of the website.

　　3、F形布局

　　3. F-shaped layout

　　F形布局反映了用户在浏览内容时的习惯：他们关注左侧，然后向右移动。

　　The F-shaped layout reflects users' habits when browsing content: they first focus on the left side and then move to the right.

　　在网站设计中，这意味着重要信息或元素应放在左侧，以更容易吸引用户注意，例如购物网站的商品筛选器。如果网站以文本内容为主，确保文字简明扼要，以便用户能在左侧快速找到重要信息。

　　In website design, this means that important information or elements should be placed on the left side to attract users' attention more easily, such as product filters on shopping websites. If the website focuses on text content, ensure that the text is concise and clear so that users can quickly find important information on the left side.

　　4、Z形布局

　　4. Z-shaped layout

　　Z形布局适合人们（尤其是西方文化的人）自然浏览网页的方式，呈现出Z形。

　　The Z-shaped layout is suitable for people (especially those in Western culture) to naturally browse web pages, presenting a Z-shape.

　　该布局符合“古腾堡法则”，认为用户的浏览习惯是从左到右、从上到下。它将每个屏幕分成四个象限：主视觉区（左上角）、强闲置区（右上角）、弱闲置区（左下角）和终视觉区（右下角）。

　　This layout conforms to Gutenberg's Law, which states that users' browsing habits are from left to right and top to bottom. It divides each screen into four quadrants: primary visual area (upper left corner), strong idle area (upper right corner), weak idle area (lower left corner), and final visual area (lower right corner).

　　例如，Evernote的首页就采用了Z形布局，两个号召性用语非常显眼，吸引用户的注意。

　　For example, Evernote's homepage adopts a Z-shaped layout, with two prominent catchphrases that attract users' attention.

　　Z形布局适合在电脑屏幕上使用，在手机端上需进行适配。

　　The Z-shaped layout is most suitable for use on computer screens and needs to be adapted on mobile devices.

　　5、分屏布局

　　5. Split screen layout

　　分屏布局适合同时展示两个重要内容，通常用于突出文本和图像，将它们并排放置，而非纵向排列或将文本覆盖在图像上。

　　Split screen layout is suitable for displaying two important contents at the same time, usually used to highlight text and images, placing them side by side instead of vertically arranging or overlaying text on the image.

　　这种设计赋予页面简洁、精致的品质。大多数分屏设计均匀分割，有时会按不同比例划分（如3:7或4:6），当屏幕被划分为小于1/3的比例时，更像一个侧边栏。

　　This design gives the page a clean and refined quality. Most split screen designs are evenly divided, sometimes divided in different proportions (such as 3:7 or 4:6), and when the screen is divided into a ratio less than 1/3, it looks more like a sidebar.

　　分屏设计特别适合电商网站，能同时展示产品图像、、规格及添加到购物车的按钮。

　　The split screen design is particularly suitable for e-commerce websites, as it can display product images, prices, specifications, and buttons to add to the shopping cart simultaneously.

　　6、不对称布局

　　6. Asymmetric layout

　　不对称布局的两侧不均等分布，目的是在内容权重不相等时创造平衡。它能够产生张力和动感，并将用户的注意力集中在焦点上。通过改变内容的宽度、比例和颜色，可以促进用户的沉浸式体验。

　　The uneven distribution on both sides of an asymmetric layout aims to create balance when content weights are not equal. It can generate tension and dynamism, and focus the user's attention on the focal point. By changing the width, proportion, and color of the content, it can promote an immersive experience for users.

　　这种布局适合设计有趣、创意的网页，但并不适用于所有网站，极简主义网站可能更适合简单布局。使用对比强烈的颜色可以增强视觉焦点。

　　This layout is suitable for designing interesting and creative web pages, but not for all websites. Minimalist websites may be more suitable for simple layouts. Using contrasting colors can enhance visual focus.

　　7、径向对称布局

　　7. Radial symmetric layout

　　径向对称布局在页面中心设有一个中心点，相关项目呈圆形辐射。

　　The radial symmetrical layout has a center point at the center of the page, and the related items radiate in a circular shape.

　　这种布局使用得当可以非常吸引眼球，但对于许多业务来说不太适用，移动端适配也有限，通常适合只展示信息的网站。

　　This layout can be very eye-catching when used properly, but it is not very suitable for many businesses and has limited adaptability to mobile devices. It is usually suitable for websites that only display information.

　　8、单页布局

　　8. Single page layout

　　单页布局将多个操作合并到一个页面，用户通过滚动进行导航，通常使用跳转快捷方式，偶尔结合视差滚动效果。这种布局适合内容稀疏的网站，是叙事内容的理想选择，如互动儿童读物、作品集或活动等。

　　Single page layout combines multiple operations into one page, allowing users to navigate by scrolling, typically using jump shortcuts and occasionally incorporating parallax scrolling effects. This layout is suitable for websites with sparse content and is an ideal choice for narrative content, such as interactive children's books, portfolios, or events.

　　9、特色图片布局

　　9. Featured Image Layout

　　特色图片布局是常见且易于实现的一种网站布局。通常使用一张大图片作为用户注意力的锚点，这张图片能够有效传达品牌或公司的信息。

　　Featured image layout is a common and easy to implement website layout. Usually, a large image is used as an anchor point for user attention, which can effectively convey brand or company information.

　　该布局适合博客、自由职业者或个体经营者的网站。选用吸引用户的特色图片，并保持适量留白，使导航简单明了。

　　This layout is suitable for websites of bloggers, freelancers, or self-employed individuals. Select distinctive images that attract users and keep a moderate amount of white space to make navigation simple and clear.

　　撰稿人Helen Gebre在他的网站上就很好地运用了特色图片，这张图片温暖且有吸引力，让人想进一步了解他。而且，网站上大量的留白，不显得拥挤，导航栏也简单明了。

　　Writer Helen Gebre has effectively utilized featured images on his website, which are warm and attractive, making people want to learn more about him. Moreover, there is a lot of blank space on the website, which does not appear crowded, and the navigation bar is also simple and clear.

　　10、全屏照片

　　10. Full screen photo

　　全屏照片布局使用一张占据整个屏幕的图片，上面叠加文字和菜单。

　　The full screen photo layout uses an image that occupies the entire screen, with text and menus overlaid on top.

　　这种布局能够强有力地传递信息，但可能导致用户不知页面向下滚动后还有更多内容。因此，需要设计一些引导用户与网站互动的方式。

　　This layout can effectively convey information, but may result in users not knowing that there is more content left after scrolling down the page. Therefore, it is necessary to design some ways to guide users to interact with the website.

　　Prometheus Fuels的全屏照片布局是一个案例，图片与公司业务契合，文案填补了信息空白，导航栏清晰可见，页面中有一个大箭头提示用户向下滚动。

　　The full screen photo layout of Prometheus Fuels is an excellent example, where the images align with the company's business, the copy fills in information gaps, the navigation bar is clear and visible, and there is a large arrow on the page prompting users to scroll down.

　　11、单栏/单列布局

　　11. Single column/single column layout

　　单列布局将主要内容呈现在一个垂直列中，是列表中简单的布局，用户只需向下滚动即可查看更多内容。

　　The single column layout presents the main content in a vertical column, which is the simplest layout in a list. Users only need to scroll down to view more content.

　　尽管简单，单列布局在许多网站中流行，尤其是在移动端的迅猛发展下，完全适配手机屏幕。长页面需要考虑吸顶导航，确保用户不必滚动到页面顶部查看导航，保持用户体验的舒适度。

　　Despite its simplicity, single column layout is popular on many websites, especially with the rapid development of mobile devices that are fully compatible with mobile screens. Long pages need to consider ceiling navigation to ensure that users do not have to scroll to the top of the page to view the navigation and maintain a comfortable user experience.

　　单列布局常见于许多基于极简设计言责的个人博客中。长页面需要考虑吸顶/底导航，由于单列布局经常用于长页面，所以需要保持导航始终可见，以避免需要滚动到页面顶部才能查看导航。

　　Single column layout is common in many personal blogs based on minimalist design principles. Long pages need to consider top/bottom navigation. As single column layouts are often used for long pages, it is necessary to keep the navigation visible at all times to avoid scrolling to the top of the page to view the navigation.

　　当想要强调不同细节时，单列和空白是不错的选择，如果使用得当，单列布局不仅让用户舒适浏览，视觉也很出色。也非常适合极简主义设计。

　　When emphasizing different details, single column and blank space are good choices. If used properly, a single column layout not only makes browsing comfortable for users, but also visually stunning. It is also very suitable for minimalist design.

　　例如Apple的iPad产品页面，单列布局在单个垂直列中呈现主要内容，大量留白包围，滚动体验流畅，大尺寸图像清晰细腻，让页面的主要内容看上去详细和，但又不会让人眼花缭乱。

　　For example, on Apple's iPad product page, a single column layout presents the main content in a single vertical column, with a large amount of white space surrounding it. The scrolling experience is smooth, and the large-sized images are clear and delicate, making the main content of the page look detailed and comprehensive, but not dazzling.

　　12、固定侧边栏布局

　　12. Fixed Sidebar Layout

　　固定侧边栏布局始终在页面一侧显示垂直菜单，提供固定导航选项，让用户轻松访问。这种布局适合菜单选项较少的网站，避免杂乱的侧边栏给用户带来烦躁感。

　　The fixed sidebar layout always displays a vertical menu on one side of the page, providing fixed navigation options for users to easily access. This layout is suitable for websites with fewer menu options, avoiding cluttered sidebars that can cause frustration for users.

　　侧边栏不仅可以包含导航选项，还可以增加社交媒体链接和其他相关内容。

　　The sidebar can not only contain navigation options, but also add social media links and other related content.

　　Arbor是一家米其林餐盘、AA Rosette 美食餐厅、酒吧和活动场所，位于英格兰伯恩茅斯。独特的主页布局包括全屏图像背景幻灯片，以及固定在额面左边缘的粘性侧边栏。

　　Arbor is a Michelin starred restaurant, AA Rosette gourmet restaurant, bar, and event venue located in Bournemouth, England. The unique homepage layout includes a full screen image background slideshow, as well as a sticky sidebar fixed on the left edge of the forehead.

　　在网页设计中，粘性侧边栏通常被定义为网页上的固定导航菜单，当用户浏览并向下滚动页面时，它保持在相同的位置，并始终保持可见。

　　In web design, a sticky sidebar is typically defined as a fixed navigation menu on a webpage that remains in the same position and always visible when the user browses and scrolls down the page.

　　13、大字体布局

　　13. Large font layout

　　大字体自网络诞生以来就一直存在，但在移动设计普及后变得越来越流行。

　　Large fonts have existed since the birth of the internet, but have become increasingly popular with the popularization of mobile design.

　　大字体常见于标题和主标题，也可用于正文中。选择合适的字体后，较大的文字易读性更强，提升用户体验，并能产生强烈的视觉效果。极简设计中尤为受欢迎，因为此类设计通常缺少其他视觉元素。

　　Large fonts are commonly used in titles and main headings, and can also be used in the main text. After selecting the appropriate font, larger text has stronger readability, enhances user experience, and can produce strong visual effects. Minimalist design is particularly popular because such designs often lack other visual elements.

　　14、杂志式布局

　　14. Magazine style layout

　　杂志式布局通常是其他布局的融合，旨在为读者提供独特的体验，灵感来自传统的印刷布局。

　　Magazine style layouts are often a fusion of other layouts, designed to provide readers with a unique experience inspired by traditional printing layouts.

　　该布局经常包括一篇特色文章以及主页上的二级、三级文章，往往有多个内容栏，适合具有大量内容的网站，特别是每天添加新内容的杂志或新闻网站。

　　This layout often includes a featured article as well as secondary and tertiary articles on the homepage, often with multiple content columns, making it suitable for websites with a large amount of content, especially magazines or news websites that add new content every day.

　　15、盒子（Boxes）布局

　　15. Boxes layout

　　盒子布局通常是以大全角框（图像或视频）为头部，下面是较小的框，常见的小框数量在2到5个之间。每个小框可作为链接，用户可通过主页了解各个栏目。盒子布局能有效讲述故事，大框展示产品，小框提供更多信息。

　　The box layout usually starts with a full frame (image or video) as the head, followed by smaller boxes below, with common numbers ranging from 2 to 5. Each small box can serve as a link, and users can learn about each column through the homepage. Box layout can effectively tell stories, with large frames displaying products and small frames providing more information.

　　本文由  济南网站建设 友情奉献.更多有关的知识请点击https://www.chinanovo.net/真诚的态度.为您提供为的服务.更多有关的知识我们将会陆续向大家奉献.敬请期待.

　　This article is a friendly contribution from Jinan website construction For more related knowledge, please click https://www.chinanovo.net/ Sincere attitude To provide you with comprehensive services We will gradually contribute more relevant knowledge to everyone Stay tuned