一平衡
　　A balance

　　相比對(duì)比，平衡的版式設(shè)計(jì)會(huì)給網(wǎng)頁帶來一種視覺感受上的穩(wěn)定性。平衡原則主要考慮設(shè)計(jì)中的元素如何分布，使得頁面中的每個(gè)板塊能做到基本一致，以達(dá)到設(shè)計(jì)的視覺平衡。也就是說，頁面中的某些元素被集合到一起，就形成了視覺重量，這些視覺重量一定要用一個(gè)分量相當(dāng)且作用相反的重量來抵消，否則就會(huì)導(dǎo)致視覺的不穩(wěn)定性。
　　Compared to comparison, a balanced layout design will bring a visual stability to the webpage. The principle of balance mainly considers how the elements in the design are distributed, so that each section of the page can achieve basic consistency, in order to achieve visual balance in the design. That is to say, certain elements in the page are grouped together to form visual weight, which must be offset by a weight that is equal in weight and has opposite effects, otherwise it will lead to visual instability.
　　平衡分對(duì)稱平衡和不對(duì)稱平衡兩種方式，下面分別介紹。
　　There are two ways of balancing: symmetric balance and asymmetric balance, which will be introduced separately below.
　　1.對(duì)稱平衡
　　1. Symmetrical balance
　　當(dāng)頁面的形式構(gòu)成是基于某條軸線對(duì)稱，并且軸線兩邊的視覺重量相同時(shí)，就稱為對(duì)稱平衡。網(wǎng)頁中的絕對(duì)對(duì)稱平衡很少用到，但左右水平對(duì)稱的手法常常出現(xiàn)在網(wǎng)頁的版式設(shè)計(jì)中，通常是從中分開的左右兩邊有著相同的視覺重量（圖2-16）。Flourish Web Design網(wǎng)站首頁就使用了對(duì)稱平衡的手法，將一些必要的導(dǎo)航信息放入左右對(duì)稱的位置，在平衡視覺的同時(shí)將用戶的視線成功吸引到重要的信息位置（圖2-17）。
　　When the form of a page is based on a symmetrical axis and the visual weight on both sides of the axis is the same, it is called symmetrical balance. Absolute symmetry balance is rarely used in web pages, but the technique of left-right horizontal symmetry often appears in the layout design of web pages, where the left and right sides separated from each other have the same visual weight (Figure 2-16). The homepage of the Flourish Web Design website uses the technique of symmetrical balance, placing some necessary navigation information in symmetrical positions on both sides, successfully attracting the user's gaze to important information positions while balancing the visual aspect (Figure 2-17).
　　2.不對(duì)稱平衡
　　2. Asymmetric equilibrium
　　不對(duì)稱平衡指使用不同視覺元素來實(shí)現(xiàn)視覺的整體平衡。當(dāng)頁面的視覺重量被均勻分布到對(duì)稱軸上，而對(duì)稱軸兩邊的個(gè)體元素不相對(duì)應(yīng)時(shí)，就形成了不對(duì)稱平衡。
　　Asymmetric balance refers to the use of different visual elements to achieve overall visual balance. When the visual weight of the page is evenly distributed on the axis of symmetry, and the individual elements on both sides of the axis of symmetry do not correspond, asymmetric balance is formed.
　　因?yàn)椴粚?duì)稱平衡常常是對(duì)所呈現(xiàn)內(nèi)容的一種更加自然的處理方式，所以它在網(wǎng)頁設(shè)計(jì)中較為常見。nest企業(yè)網(wǎng)站首頁的版式設(shè)計(jì)就采用了不對(duì)稱平衡的手法，畫面的主要部分雖然在面積上被分為不完全對(duì)稱的兩部分，但是在視覺元素設(shè)計(jì)上使畫面達(dá)到了力量的均衡對(duì)稱（圖2-18）。blackberry網(wǎng)站首頁將頁面分為相等的兩部分，左右兩邊分別是文字和圖像的內(nèi)容，使頁面整體達(dá)到了視覺感受統(tǒng)一均衡的效果（圖2-19）。this is grow網(wǎng)站首頁也采用了不對(duì)稱平衡的手法，采用文字和大面積空白的方式使網(wǎng)頁達(dá)到了視覺平衡的效果（圖2-20）。gavin castleton網(wǎng)站首頁運(yùn)用不對(duì)稱均衡的圖像對(duì)比手法，產(chǎn)生了強(qiáng)烈的視覺效果（圖2-21）。
　　Because asymmetric balance is often a more natural way of handling the presented content, it is more common in web design. The layout design of the Nest Enterprise website homepage adopts an asymmetric balance approach. Although the main part of the image is divided into two partially symmetrical parts in terms of area, the visual element design achieves a balanced and symmetrical power of the image (Figure 2-18). The homepage of Blackberry website divides the page into two equal parts, with text and images on the left and right sides respectively, achieving a visually unified and balanced effect on the overall page (Figure 2-19). The homepage of this is grow website also adopts asymmetric balance technique, using text and large blank space to achieve visual balance effect on the webpage (Figure 2-20). The homepage of Gavin Castleton website uses asymmetric and balanced image contrast techniques to produce a strong visual effect (Figure 2-21).
　　二對(duì)齊
　　Two Alignment
　　對(duì)齊指以盡可能協(xié)調(diào)的方式將視覺元素的自然邊界（或邊框）排列起來的過程。這常常會(huì)用到網(wǎng)格，網(wǎng)格構(gòu)成作為一種行之有效的版面設(shè)計(jì)形式法則之一，將構(gòu)成主義和秩序的概念引入設(shè)計(jì)中，使所有的設(shè)計(jì)元素之間的協(xié)調(diào)統(tǒng)一成為可能。
　　Alignment refers to the process of arranging the natural boundaries (or borders) of visual elements in a coordinated manner as much as possible. This often involves the use of grids, and grid composition is one of the effective rules for layout design. It introduces the concepts of constructivism and order into design, making it possible to coordinate and unify all design elements.
　　對(duì)齊設(shè)計(jì)在實(shí)際運(yùn)用中特別強(qiáng)調(diào)比例感、秩序感、整體感和嚴(yán)密感，創(chuàng)造出一種簡潔樸實(shí)的版面藝術(shù)表現(xiàn)風(fēng)格，但過度使用也會(huì)給版面帶來呆板的負(fù)面影響。因此設(shè)計(jì)者在運(yùn)用對(duì)齊設(shè)計(jì)時(shí)，應(yīng)適當(dāng)打破網(wǎng)格的約束，也可以用更微妙的對(duì)齊方式來實(shí)現(xiàn)統(tǒng)一，達(dá)到令人滿意的目的，使畫面更生動(dòng)活潑，更有趣味性。
　　Alignment design emphasizes a sense of proportion, order, wholeness, and rigor in practical applications, creating a concise and simple artistic expression style for the layout. However, excessive use can also have a negative impact on the layout's rigidity. Therefore, when using alignment design, designers should appropriately break the constraints of the grid, and can also use more subtle alignment methods to achieve unity and satisfactory results, making the picture more lively and interesting.
　　glossy rey網(wǎng)站首頁采用了矩形圖片和色塊對(duì)比的方式，并使用了絕對(duì)對(duì)齊的方式，將不同的信息元素統(tǒng)一在相同的組合方式中，使畫面層次豐富的同時(shí)將導(dǎo)航鏈接直觀地呈現(xiàn)給用戶（圖2-22）。如果網(wǎng)站內(nèi)容比較豐富，網(wǎng)頁內(nèi)容較多，對(duì)齊的手法就非常實(shí)用，可以將繁復(fù)的內(nèi)容整理干凈，方便用戶使用（圖2-23、圖2-24）。有時(shí)候簡單的文字對(duì)齊也可以營造獨(dú)特的頁面風(fēng)格（圖2-25）。
　　The homepage of Glossy Rey website adopts a rectangular image and color block comparison method, and uses absolute alignment to unify different information elements in the same combination, making the picture rich in hierarchy and presenting navigation links intuitively to users (Figure 2-22). If the website content is rich and the webpage content is abundant, the alignment technique is very practical, which can clean up the complex content and facilitate user use (Figure 2-23, Figure 2-24). Sometimes simple text alignment can also create a unique page style (Figure 2-25).
　　三節(jié)奏和韻律
　　Triple Rhythm and Rhythm
　　運(yùn)動(dòng)中的事物都具有節(jié)奏和韻律的形式規(guī)律，節(jié)奏與韻律本來在音樂、舞蹈、詩歌及電影等具有時(shí)間形式的藝術(shù)中是通過視覺和聽覺來表現(xiàn)的。節(jié)奏本身沒有形象特征，只是表明事物在運(yùn)動(dòng)中的快慢、強(qiáng)弱以及間歇的節(jié)拍。節(jié)奏可以說是條理與反復(fù)的發(fā)展。它帶有機(jī)械的秩序美，韻律是每個(gè)節(jié)拍間運(yùn)動(dòng)所表現(xiàn)的軌跡，它帶有形象特征。
　　Things in motion have formal laws of rhythm and rhyme, which are originally expressed through visual and auditory means in art forms such as music, dance, poetry, and film that have temporal forms. Rhythm itself has no visual characteristics, it only indicates the speed, strength, and intermittent rhythm of things in motion. Rhythm can be said to be the development of organization and repetition. It has a mechanical beauty of order, rhythm is the trajectory expressed by the movement between each beat, and it has visual characteristics.
　　版式設(shè)計(jì)需要節(jié)奏感和韻律感，節(jié)奏形式的運(yùn)用是版式設(shè)計(jì)的必要手法，韻律的形式運(yùn)用得合理，可以取得不錯(cuò)的視覺效果。在具體的網(wǎng)頁設(shè)計(jì)應(yīng)用中，版面的結(jié)構(gòu)設(shè)計(jì)就經(jīng)常會(huì)遇到這個(gè)問題，優(yōu)秀的版面設(shè)計(jì)富有音樂般的美感，同時(shí)實(shí)用性絲毫未減，這不僅需要從形狀上，而且要從整體的色彩、大小、明暗等綜合方面入手（圖2-26、圖2-27）。
　　Layout design requires a sense of rhythm and cadence, and the use of rhythmic forms is a necessary technique in layout design. Reasonable use of rhythmic forms can achieve good visual effects. In specific web design applications, the structural design of layouts often encounters this problem. Excellent layout design is full of musical beauty, while practicality remains unchanged. This requires not only the shape, but also the overall color, size, brightness, and other comprehensive aspects (Figure 2-26, Figure 2-27).
　　四簡約
　　Four Simplicity
　　簡約設(shè)計(jì)歷來都是最可行、最受歡迎的網(wǎng)站設(shè)計(jì)方法，這種風(fēng)格不但能提供最實(shí)用的設(shè)計(jì)，而且永遠(yuǎn)不會(huì)過時(shí)。以這種風(fēng)格設(shè)計(jì)的網(wǎng)站也非常易于創(chuàng)建和維護(hù)。但簡約設(shè)計(jì)實(shí)現(xiàn)起來并不容易，需要在細(xì)節(jié)上煞費(fèi)苦心，在微妙之處獨(dú)具慧眼，因?yàn)椤昂喖s”并不意味著“簡單”。
　　Minimalist design has always been the most feasible and popular website design method, which not only provides the most practical design, but also never becomes outdated. Websites designed in this style are also very easy to create and maintain. But implementing minimalist design is not easy, it requires careful attention to details and a keen eye for subtle nuances, because "minimalism" does not necessarily mean "simplicity".
　　圖2-28所示頁面采用極為簡潔的頁面設(shè)計(jì)，加上一些交互式動(dòng)作，使網(wǎng)站富有一定的動(dòng)感；設(shè)計(jì)師將最需要說明的網(wǎng)站主題采用言簡意賅的話語標(biāo)注在頁面中心位置，主題突出、視覺中心明確，方便用戶使用的同時(shí)也試圖給用戶留下深刻印象（圖2-28~圖2-30）。
　　The page shown in Figure 2-28 adopts an extremely simple page design, with some interactive actions added to give the website a certain sense of dynamism; The designer uses concise and clear language to label the most important website themes in the center of the page, with prominent themes and clear visual centers, making it convenient for users to use while also attempting to leave a deep impression on them (Figure 2-28~Figure 2-30).
　　版式設(shè)計(jì)的簡約手法講究“少即是多”，簡潔的圖形、醒目的文字、寬大的色塊會(huì)給人以悅目、舒適以及美的享受，令人百看不厭、回味無窮。所以需要認(rèn)真研究版式設(shè)計(jì)中的構(gòu)成法則，避免做過多的、繁復(fù)的裝飾。網(wǎng)頁設(shè)計(jì)并非要把整個(gè)頁面塞滿了才能體現(xiàn)信息的豐富性，只要合理地安排信息內(nèi)容的位置，規(guī)劃頁面的布局，使頁面達(dá)到基本的視覺平衡，即使大面積留白，同樣會(huì)使頁面產(chǎn)生意想不到的視覺效果，不會(huì)讓人感到內(nèi)容空泛、信息量貧乏，而是會(huì)給用戶留下廣闊的思考空間。back beat media網(wǎng)站只把最主要的導(dǎo)航放在主頁上，配以簡單圖形和背景圖，網(wǎng)站設(shè)計(jì)師認(rèn)為只有這樣的做法才可能成功吸引用戶的視線（圖2-31）。
　　The minimalist approach of layout design emphasizes the principle of "less is more". Simple graphics, eye-catching text, and large color blocks will give people a pleasing, comfortable, and beautiful experience, making them never tire of it and leaving a lasting impression. So it is necessary to carefully study the composition rules in layout design and avoid making too many and complicated decorations. Web design does not need to fill the entire page to reflect the richness of information. As long as the position of information content is arranged reasonably, the layout of the page is planned, and the page reaches a basic visual balance, even if there is a large area of blank space, it will still produce unexpected visual effects on the page. It will not make people feel that the content is empty or the information is lacking, but will leave users with broad thinking space. The back beat media website only places the main navigation on the homepage, accompanied by simple graphics and background images. Website designers believe that only this approach can successfully attract users' attention (Figure 2-31).
　　在生活節(jié)奏如此快速的互聯(lián)網(wǎng)時(shí)代，隨著追求目標(biāo)的不斷變化，人們的審美觀念也不斷地變化，但是作為形式美的法則是不變的，網(wǎng)頁的版式設(shè)計(jì)也需要遵循相應(yīng)的設(shè)計(jì)規(guī)則。任何問題都不是絕對(duì)的，在遵循這些基本法則的同時(shí)，設(shè)計(jì)者更需要有創(chuàng)新的意識(shí)，將這些基本的設(shè)計(jì)原則靈活運(yùn)用，而避免成為規(guī)則的奴隸。
　　In the Internet era, where the pace of life is so fast, with the constant change of the pursuit of goals, people's aesthetic concepts are also constantly changing, but as the rule of formal beauty is unchanged, the layout design of web pages also needs to follow the corresponding design rules. No problem is absolute. While following these basic principles, designers need to have innovative thinking and flexibly apply them to avoid becoming slaves to rules.
　　五參考書籍
　　Five reference books
　　作者：何麗萍、楊光、龍彬
　　Authors: He Liping, Yang Guang, Long Bin
　　定價(jià)：59元
　　Pricing: 59 yuan
　　ISBN：9787302692225
　　ISBN：9787302692225
　　出版日期：2025.06.01
　　Publication date: June 1, 2025
　　《Web界面設(shè)計(jì)》重點(diǎn)介紹網(wǎng)頁界面設(shè)計(jì)的相關(guān)內(nèi)容。從設(shè)計(jì)藝術(shù)學(xué)的角度說明網(wǎng)頁中各部分的作用；在遵循形式美法則的基礎(chǔ)上討論如何提高網(wǎng)頁信息傳遞效率；在總結(jié)網(wǎng)頁設(shè)計(jì)規(guī)律和方法的同時(shí)補(bǔ)充網(wǎng)頁交互設(shè)計(jì)的內(nèi)容。本書第1章介紹網(wǎng)頁設(shè)計(jì)制作的基本原理和工作流程；第2~5章講述網(wǎng)頁設(shè)計(jì)的原則和方法；第6、7章介紹網(wǎng)頁交互設(shè)計(jì)的原則和方法。為方便師生教與學(xué)，本書還提供了配套的教學(xué)視頻和課件。
　　Web Interface Design "focuses on introducing the relevant content of web interface design. From the perspective of design art, explain the roles of each part in a webpage; Discuss how to improve the efficiency of webpage information transmission based on the principle of formal beauty; While summarizing the rules and methods of web design, supplement the content of web interaction design. Chapter 1 of this book introduces the basic principles and workflow of web design and production; Chapters 2-5 discuss the principles and methods of web design; Chapters 6 and 7 introduce the principles and methods of web interaction design. For the convenience of teachers and students in teaching and learning, this book also provides supporting teaching videos and courseware.
　　本文由 濟(jì)南網(wǎng)站設(shè)計(jì) 友情奉獻(xiàn).更多有關(guān)的知識(shí)請(qǐng)點(diǎn)擊 http://www.cheapsocialhits.com/ 真誠的態(tài)度.為您提供為全面的服務(wù).更多有關(guān)的知識(shí)我們將會(huì)陸續(xù)向大家奉獻(xiàn).敬請(qǐng)期待.
　　This article is a friendly contribution from Jinan website design For more related knowledge, please click http://www.cheapsocialhits.com/ Sincere attitude To provide you with comprehensive services We will gradually contribute more relevant knowledge to everyone Stay tuned