高端網(wǎng)站建設企業(yè)

2022-07-28 分類：網(wǎng)站建設

布局設計中的對稱與不對稱

每個布局均以空白頁開頭。然后是元素-徽標，菜單，文本部分，照片，插圖等。元素的位置可以確定設計的成功程度。這就是為什么設計師在開始創(chuàng)建新頁面時要做的第一件事就是決定元素在該頁面上的排列方式。頁面上的空間元素有兩種基本的方法-設計者可以傾向于元素的更對稱排列，也可以不對稱。

在本指南中，我們將了解對稱和不對稱如何在設計中起作用。我們將介紹每種方法的基本技術，技巧和實踐。

參加我們的“轉(zhuǎn)換設計”課程

準備將您的設計技能提高到一個新的水平？參加我們的“轉(zhuǎn)化設計”課程，并提高發(fā)展業(yè)務并幫助客戶成功所需的技能。

還不是Shopify合作伙伴？立即注冊！

什么是對稱性？

長期以來，對稱性一直被認為是設計的黃金標準。選擇對稱布局的偏好在體系結(jié)構(gòu)中尤其明顯?？纯词澜缟献蠲利惖慕ㄖ?泰姬陵。泰姬陵具有許多特性，使其在美學上令人愉悅，但其對稱平衡是主要的平衡之一。

泰姬陵不對稱設計

在設計中使用對稱性的好處并不是憑空產(chǎn)生的。與許多設計原理相同，它是從格式塔原理中產(chǎn)生的。格式塔原理是一種人類行為理論，描述了人類思維如何構(gòu)造和排列視覺數(shù)據(jù)。我們的思想自然會根據(jù)所看到的事物創(chuàng)造秩序。這就是為什么對稱如此強大的原因-對稱設計是一種具有順序和穩(wěn)定性的設計，因此很容易被看到。

了解如何編寫出色的設計簡介，以保持項目進度。

對稱類型

對稱共有三種類型：反射對稱，旋轉(zhuǎn)對稱和平移對稱。

反射對稱

這是人們聽到“對稱”一詞時想到的第一件事。也稱為鏡像效應，當所有物體圍繞中心軸鏡像時，就會發(fā)生反射對稱。軸可以處于任何方向-可以是水平，垂直，對角線以及介于兩者之間的任何方向，只要軸的一側(cè)被鏡像或反射在另一側(cè)即可。

不對稱設計反射

反射對稱：鳥類圍繞中心水平軸鏡像。

非對稱設計反射鏡

現(xiàn)實生活中的反射對稱性。

設計人員經(jīng)常使用反射對稱性來使兩側(cè)的權重相等，或創(chuàng)建有趣的視覺效果。

非對稱設計平移對稱

Method.digital使用反射對稱性作為其主要圖像。

旋轉(zhuǎn)對稱

也稱為徑向?qū)ΨQ，當所有物體圍繞共同的中心旋轉(zhuǎn)時，就會發(fā)生這種對稱。只要存在一個共同的中心，所有物體都圍繞該中心旋轉(zhuǎn)，并且元素圍繞一個中心點等距分布，則旋轉(zhuǎn)對稱可以在任何角度/頻率下發(fā)生。

不對稱設計旋轉(zhuǎn)對稱鳥

圍繞公共中心旋轉(zhuǎn)對象

旋轉(zhuǎn)對稱在現(xiàn)實生活中非常普遍。例如，海星的手臂從中心向外輻射。

設計不對稱旋轉(zhuǎn)對稱海星

許多教堂的天花板畫也使用旋轉(zhuǎn)對稱。

不對稱設計旋轉(zhuǎn)對稱天花板

Web設計人員將旋轉(zhuǎn)對稱性納入他們的工作中，以刻畫運動（例如推斷進度或運動）或以有趣的方式可視化數(shù)據(jù)。

不對稱設計旋轉(zhuǎn)對稱數(shù)據(jù)

由英國廣播公司（BBC）的《明日世界》（Tomorrow's World）委托制作的互動式問卷調(diào)查“ 全球價值”（Global Values）使用旋轉(zhuǎn)對稱性來可視化數(shù)據(jù)。

平移對稱

當元素在空間中的不同位置重復出現(xiàn)，同時又保持其基本方向或精確方向時，就會發(fā)生這種類型的對稱。只要保持元件的方向，平移對稱性就可以在任何方向上發(fā)生。

不對稱設計翻譯對稱鳥

同一對象以均勻間隔移動幾次。

不對稱設計平移對稱柵欄

柵欄是平移對稱性的一個很好的例子。

正確使用平移對稱性可以在設計中產(chǎn)生節(jié)奏。Web設計人員經(jīng)常使用平移對稱性作為創(chuàng)建背景圖案的被動元素。但是在某些情況下，可以將平移對稱性用作傳達信息的有效元素。NINX的網(wǎng)站使用簡單的幾何結(jié)構(gòu)傳遞主要信息-隨著音樂開始播放，對象隨時間移動。

不要試圖達到好的對稱

好的對稱性是當元素在軸上鏡像并且兩側(cè)完全相同時?？粗R子，您將看到自己的反射-鏡面的兩個側(cè)面完全相同。

但是在設計時，對稱性與相同的鏡像并不相同。好的對稱性在網(wǎng)頁設計和現(xiàn)實生活中都是罕見的。當我們考慮環(huán)境時，我們周圍的大多數(shù)自然物體和創(chuàng)造物并不是絕對對稱的。例如，我們習慣于將臉部和身體視為兩個鏡像部分。但是，臉部的左側(cè)與右側(cè)并不完全相同。

設計師可以通過玩弄用戶對布局的感知來創(chuàng)建對稱性，并且只要觀眾從成品中獲得對稱感，在每一側(cè)都可以稍作改動是完全可以的。

您可能還會喜歡：使用網(wǎng)格布局：打破網(wǎng)格如何為客戶創(chuàng)造難忘的體驗。

什么是不對稱？

不對稱自然是不對稱的。在自然界中，我們幾乎可以在任何地方看到不對稱性，例如樹木的樹枝或云的形狀。

不對稱設計樹枝

一棵樹的分支是不對稱的。

在設計中，不對稱（通常用于產(chǎn)生視覺張力）。同時，不對稱可能是一個很難掌握的概念，因為不對稱設計中元素之間的關系變得更加復雜，因此可能很難創(chuàng)建一個整體的，有凝聚力的設計。這就是為什么許多設計師都選擇可預測的對稱布局的原因。但是掌握不對稱性的設計師擁有更大的表達自由。

對稱與平衡

許多設計師認為，只有在對稱布局中才能實現(xiàn)平衡。之所以發(fā)生這種情況，是因為“不對稱”一詞意味著缺乏平衡。雖然不對稱的定義是缺乏對稱性，但正如某些人錯誤地假設的那樣，它并非缺乏平衡-缺乏對稱性的設計仍然需要平衡。換句話說，無論您創(chuàng)建哪種布局（無論對稱還是不對稱），實現(xiàn)平衡都是至關重要的，因為不平衡的構(gòu)圖會讓觀看者感到不舒服。

掌握平衡（對稱和不對稱）的一種合適方法是將頁面上的每個元素都視為具有視覺上的分量。視覺權重取決于元素的大?。ㄝ^小的對象可能比較大的對象重）和視覺屬性（例如對比度）（對比元素的權重可能大于中性元素）。設計人員需要發(fā)揮元素的重量，直到達到有效的平衡。

當然，要在對稱布局中取得平衡是很容易的-您需要做的只是在頁面的左右兩邊放置相同的權重。

不對稱設計對稱平衡根琴祭壇

這是揚·范·?？耍↗an van Eyck）創(chuàng)建的根特祭壇的一部分，這是對稱平衡的一個很好的例子。

當涉及非對稱設計時，任務可能會比較艱巨-您可能需要在一側(cè)上放幾個小物品，以便在另一側(cè)上放一個大物體。

梵高星夜不對稱設計

梵高的《星夜》是非對稱平衡的一個很好的例子。梵高通過使用不同大小的對象并使用顏色和對比度來達到平衡。

我們在繪畫中擁有的平衡原則也適用于網(wǎng)頁設計。下面是Alan Turing Institute網(wǎng)站的屏幕截圖，它是非對稱平衡的一個很好的例子。頁面的左側(cè)比右側(cè)的內(nèi)容更多，但是設計人員通過在頁面的右側(cè)添加對比元素來實現(xiàn)平衡。

不對稱設計alan-turing主頁

好平衡的配方

“我可以衡量余額嗎？” 在設計師中是一個相當普遍的問題。為了找到這個問題的答案，許多設計師都在尋找一個特定的公式，使他們能夠計算出一切是否平衡。壞消息：沒有計算余額的公式。好消息：我們可以使用強大的工具來確定構(gòu)圖是否平衡-我們自己的眼睛。

經(jīng)驗豐富的設計師能夠一眼注意到不平衡的布局。但是要實現(xiàn)此目標，您需要通過從事實際項目并受到其他設計師工作的啟發(fā)來訓練自己的眼睛。您所做的越多，您在做出任何設計決策時就越會相信自己的判斷。

您可能還會喜歡：主題開發(fā)人員如何從Brutalist Web Design中學習。

對稱與不對稱

最終，在設計布局時，您需要決定要創(chuàng)建對稱設計還是非對稱設計。這個問題沒有統(tǒng)一的答案，具體選擇取決于項目的具體情況。讓我們看看如何在設計中使用對稱性和非對稱性。

當對稱最有效時

以下是一些一般情況，最好采用對稱方法進行布局設計：

您正在尋求更嚴肅的美學（您想傳達古典主義）

您想增強識別和回憶（對稱形式使回憶信息更容易）

您想要實現(xiàn)更多的順序和結(jié)構(gòu)

您不想在元素的排列上花很多心思，但仍然想要實現(xiàn)平衡（對稱布局本來就是穩(wěn)定且平衡的）

現(xiàn)在，讓我們回顧一下這些案例在現(xiàn)實生活中的樣子。

傳達信任感

對稱布局對于希望表現(xiàn)信任氛圍的設計非常有效。毫不奇怪，許多優(yōu)先考慮信任的公司在設計中都使用了對稱性。

非對稱設計對稱音頻徽標

許多汽車制造商在設計中使用對稱性來營造一種穩(wěn)定感。奧迪有一個對稱的標志。

對稱設計是可以預測的。因此，如果您要設計一個要求穩(wěn)定性的網(wǎng)站（例如，銀行或保險公司的網(wǎng)站），那么對稱設計可能是您的正確選擇。

PayPal主頁的設計是對稱平衡的。一切都圍繞垂直軸進行反射-導航欄居中，特色圖像居中，標題居中。

不對稱設計對稱余額貝寶

頁面只有一個交互對象

對稱性對于具有單個交互對象的頁面效果很好。典型示例是登錄/注冊頁面。通過將關鍵的交互對象或關鍵消息放在中間，您可以將焦點放在頁面的中心。

不對稱設計機器學習Google

Google搜索頁面是一個具有單個交互對象的對稱布局的很好示例。

非對稱設計，對稱平衡，單個相互作用，對象安裝

Instapaper還在屏幕中央創(chuàng)建焦點，并在其中顯示關鍵信息。

網(wǎng)頁具有兩個（或多個）同等重要的選項

對稱設計使您可以平均吸引頁面的所有區(qū)域。一個典型的例子是在線商店，出售男女產(chǎn)品。對稱性可以幫助設計人員在同一空間中傳遞兩個同樣重要的信息。

不對稱設計對稱保暖器

Paulwarmer使用對稱布局來傳達兩個同等重要的類別。兩塊內(nèi)容成正比。

當不對稱效果時

對稱通常被認為是穩(wěn)定和協(xié)調(diào)的。但是，對于某些人來說，穩(wěn)定性可能是可預測的且無聊的。不對稱布局往往更有趣和動態(tài)。

在以下情況下不對稱：

您已經(jīng)準備好花費額外的時間來安排要素，以找到實現(xiàn)平衡的獨特方法

您正在尋找一種更有趣的布局來傳達用戶的興趣

使布局突出

如今，當用戶有許多不同的選項可供選擇時，一個站點必須具有特殊性，以使其在所有其他站點中脫穎而出并降低跳出率。當設計師掌握不對稱性時，他們會創(chuàng)造出更令人難忘的產(chǎn)品。

由Google創(chuàng)建的教程Slice of Machine Learning，教您如何構(gòu)建機器學習分類模型，它使用非對稱設計為訪問者創(chuàng)造了難忘的體驗。

傳達動力

當網(wǎng)頁設計師使用“動態(tài)”一詞時，他們所指的是一種設計，在這種設計中，觀看者的眼睛會四處移動并穿過設計。不對稱的設計會喚起運動的感覺。這就是為什么許多體育品牌在單個元素（例如徽標）中使用不對稱布局和不對稱的原因。

不對稱設計耐克徽標

不對稱傳達運動感。

為了吸引注意

不對稱引起了人們的注意。適當?shù)牟粚ΨQ布局會自動將觀眾的視線轉(zhuǎn)移到焦點上，凝視自然首先落在設計的關鍵部分上。通過定位和調(diào)整頁面上的元素，您可以將眼睛引向不同的區(qū)域。

選擇重點時，請記住，任何設計的主要目標都是溝通。在您設計的每個網(wǎng)頁上，您都會向訪問者講述一個故事，因此請務必選擇有助于您以最有效的方式講故事的焦點。

以下是一些可以引起您注意的事項：

對比。對比度可用于突出顯示特定元素或?qū)⑵潆[藏。通過增加特定元素的對比度，您可以使它脫穎而出。相反，通過降低對比度，可以使元素淡入背景。

空格。使用空格將一個元素與另一個元素隔離。

運動。人眼難以動彈，要注意運動的物體。

方向提示。眼睛將遵循方向提示（例如，方向提示可能是指向特定方向的箭頭）。

人臉。眼睛將沿著照片中的眼睛前進，因此站點的訪客將與設計中的人朝相同的方向看。

非對稱設計波美主頁

鮑姆（Baume）的首頁設計使用空格將觀眾的眼睛引導到特定區(qū)域。

不對稱設計的運動對象

Detaen使用移動物體（三角形）來吸引用戶的注意力

非對稱設計關鍵解決方案主頁

對Keysolutions采取行動的呼吁打破了對稱性，并引起了人們對自身的更多關注。

不對稱設計簡單的生活方式健康主頁

當人們訪問Simple Lifestyle Health時，他們會按照屏幕圖像中的眼睛來閱讀關鍵信息。

在設計中結(jié)合對稱和不對稱

對稱性并不總是一個選擇。通過將對稱性和非對稱性相結(jié)合，可以創(chuàng)建最有趣且美觀的設計。

您可以將布局分成較小的部分，并嘗試在每個部分中實現(xiàn)對稱或不對稱的平衡。例如，您可以使用對稱布局，其中不對稱用于創(chuàng)建興趣點并在一組相似元素內(nèi)組織視覺層次。

不對稱設計方丹酮carnevale acireale主頁

Fondazione Carnevale Acireale在設計中同時使用了對稱性和非對稱性。

掌握對稱和不對稱

對稱性（或缺乏對稱性）可能是設計人員工具箱中的強大工具。對稱自然會喚起秩序感和穩(wěn)定性，而另一方面，不對稱可幫助設計師實現(xiàn)設計的獨特性和個性。將兩者結(jié)合起來，可以創(chuàng)造出獨特且給觀眾留下深刻印象的設計。

網(wǎng)頁名稱：高端網(wǎng)站建設企業(yè)
標題鏈接：http://m.rwnh.cn/news48/182948.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供微信小程序、網(wǎng)站維護、微信公眾號、全網(wǎng)營銷推廣、域名注冊、電子商務

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

高端網(wǎng)站建設企業(yè)