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

2022-07-28    分類: 網(wǎng)站建設(shè)

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

在本指南中,我們將了解對(duì)稱和不對(duì)稱如何在設(shè)計(jì)中起作用。我們將介紹每種方法的基本技術(shù),技巧和實(shí)踐。

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

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

還不是Shopify合作伙伴?立即注冊(cè)!

什么是對(duì)稱性?
長(zhǎng)期以來(lái),對(duì)稱性一直被認(rèn)為是設(shè)計(jì)的黃金標(biāo)準(zhǔn)。選擇對(duì)稱布局的偏好在體系結(jié)構(gòu)中尤其明顯??纯词澜缟献蠲利惖慕ㄖ?泰姬陵。泰姬陵具有許多特性,使其在美學(xué)上令人愉悅,但其對(duì)稱平衡是主要的平衡之一。

泰姬陵不對(duì)稱設(shè)計(jì)

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

了解如何編寫(xiě)出色的設(shè)計(jì)簡(jiǎn)介,以保持項(xiàng)目進(jìn)度。

對(duì)稱類型
對(duì)稱共有三種類型:反射對(duì)稱,旋轉(zhuǎn)對(duì)稱和平移對(duì)稱。

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

不對(duì)稱設(shè)計(jì)反射
反射對(duì)稱:鳥(niǎo)類圍繞中心水平軸鏡像。
非對(duì)稱設(shè)計(jì)反射鏡
現(xiàn)實(shí)生活中的反射對(duì)稱性。
設(shè)計(jì)人員經(jīng)常使用反射對(duì)稱性來(lái)使兩側(cè)的權(quán)重相等,或創(chuàng)建有趣的視覺(jué)效果。

非對(duì)稱設(shè)計(jì)平移對(duì)稱
Method.digital使用反射對(duì)稱性作為其主要圖像。
旋轉(zhuǎn)對(duì)稱
也稱為徑向?qū)ΨQ,當(dāng)所有物體圍繞共同的中心旋轉(zhuǎn)時(shí),就會(huì)發(fā)生這種對(duì)稱。只要存在一個(gè)共同的中心,所有物體都圍繞該中心旋轉(zhuǎn),并且元素圍繞一個(gè)中心點(diǎn)等距分布,則旋轉(zhuǎn)對(duì)稱可以在任何角度/頻率下發(fā)生。

不對(duì)稱設(shè)計(jì)旋轉(zhuǎn)對(duì)稱鳥(niǎo)
圍繞公共中心旋轉(zhuǎn)對(duì)象

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

設(shè)計(jì)不對(duì)稱旋轉(zhuǎn)對(duì)稱海星
許多教堂的天花板畫(huà)也使用旋轉(zhuǎn)對(duì)稱。
不對(duì)稱設(shè)計(jì)旋轉(zhuǎn)對(duì)稱天花板


Web設(shè)計(jì)人員將旋轉(zhuǎn)對(duì)稱性納入他們的工作中,以刻畫(huà)運(yùn)動(dòng)(例如推斷進(jìn)度或運(yùn)動(dòng))或以有趣的方式可視化數(shù)據(jù)。

不對(duì)稱設(shè)計(jì)旋轉(zhuǎn)對(duì)稱數(shù)據(jù)
由英國(guó)廣播公司(BBC)的《明日世界》(Tomorrow's World)委托制作的互動(dòng)式問(wèn)卷調(diào)查“ 全球價(jià)值”(Global Values)使用旋轉(zhuǎn)對(duì)稱性來(lái)可視化數(shù)據(jù)。
平移對(duì)稱
當(dāng)元素在空間中的不同位置重復(fù)出現(xiàn),同時(shí)又保持其基本方向或精確方向時(shí),就會(huì)發(fā)生這種類型的對(duì)稱。只要保持元件的方向,平移對(duì)稱性就可以在任何方向上發(fā)生。

不對(duì)稱設(shè)計(jì)翻譯對(duì)稱鳥(niǎo)
同一對(duì)象以均勻間隔移動(dòng)幾次。
不對(duì)稱設(shè)計(jì)平移對(duì)稱柵欄
柵欄是平移對(duì)稱性的一個(gè)很好的例子。
正確使用平移對(duì)稱性可以在設(shè)計(jì)中產(chǎn)生節(jié)奏。Web設(shè)計(jì)人員經(jīng)常使用平移對(duì)稱性作為創(chuàng)建背景圖案的被動(dòng)元素。但是在某些情況下,可以將平移對(duì)稱性用作傳達(dá)信息的有效元素。NINX的網(wǎng)站使用簡(jiǎn)單的幾何結(jié)構(gòu)傳遞主要信息-隨著音樂(lè)開(kāi)始播放,對(duì)象隨時(shí)間移動(dòng)。

不要試圖達(dá)到好的對(duì)稱
好的對(duì)稱性是當(dāng)元素在軸上鏡像并且兩側(cè)完全相同時(shí)??粗R子,您將看到自己的反射-鏡面的兩個(gè)側(cè)面完全相同。

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

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

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

什么是不對(duì)稱?
不對(duì)稱自然是不對(duì)稱的。在自然界中,我們幾乎可以在任何地方看到不對(duì)稱性,例如樹(shù)木的樹(shù)枝或云的形狀。

不對(duì)稱設(shè)計(jì)樹(shù)枝
一棵樹(shù)的分支是不對(duì)稱的。
在設(shè)計(jì)中,不對(duì)稱(通常用于產(chǎn)生視覺(jué)張力)。同時(shí),不對(duì)稱可能是一個(gè)很難掌握的概念,因?yàn)椴粚?duì)稱設(shè)計(jì)中元素之間的關(guān)系變得更加復(fù)雜,因此可能很難創(chuàng)建一個(gè)整體的,有凝聚力的設(shè)計(jì)。這就是為什么許多設(shè)計(jì)師都選擇可預(yù)測(cè)的對(duì)稱布局的原因。但是掌握不對(duì)稱性的設(shè)計(jì)師擁有更大的表達(dá)自由。

對(duì)稱與平衡
許多設(shè)計(jì)師認(rèn)為,只有在對(duì)稱布局中才能實(shí)現(xiàn)平衡。之所以發(fā)生這種情況,是因?yàn)?ldquo;不對(duì)稱”一詞意味著缺乏平衡。雖然不對(duì)稱的定義是缺乏對(duì)稱性,但正如某些人錯(cuò)誤地假設(shè)的那樣,它并非缺乏平衡-缺乏對(duì)稱性的設(shè)計(jì)仍然需要平衡。換句話說(shuō),無(wú)論您創(chuàng)建哪種布局(無(wú)論對(duì)稱還是不對(duì)稱),實(shí)現(xiàn)平衡都是至關(guān)重要的,因?yàn)椴黄胶獾臉?gòu)圖會(huì)讓觀看者感到不舒服。

掌握平衡(對(duì)稱和不對(duì)稱)的一種合適方法是將頁(yè)面上的每個(gè)元素都視為具有視覺(jué)上的分量。視覺(jué)權(quán)重取決于元素的大小(較小的對(duì)象可能比較大的對(duì)象重)和視覺(jué)屬性(例如對(duì)比度)(對(duì)比元素的權(quán)重可能大于中性元素)。設(shè)計(jì)人員需要發(fā)揮元素的重量,直到達(dá)到有效的平衡。

當(dāng)然,要在對(duì)稱布局中取得平衡是很容易的-您需要做的只是在頁(yè)面的左右兩邊放置相同的權(quán)重。

不對(duì)稱設(shè)計(jì)對(duì)稱平衡根琴祭壇
這是揚(yáng)·范·埃克(Jan van Eyck)創(chuàng)建的根特祭壇的一部分,這是  對(duì)稱平衡的一個(gè)很好的例子。
當(dāng)涉及非對(duì)稱設(shè)計(jì)時(shí),任務(wù)可能會(huì)比較艱巨-您可能需要在一側(cè)上放幾個(gè)小物品,以便在另一側(cè)上放一個(gè)大物體。

梵高星夜不對(duì)稱設(shè)計(jì)
梵高的  《星夜》是非對(duì)稱平衡的一個(gè)很好的例子。梵高通過(guò)使用不同大小的對(duì)象并使用顏色和對(duì)比度來(lái)達(dá)到平衡。
我們?cè)诶L畫(huà)中擁有的平衡原則也適用于網(wǎng)頁(yè)設(shè)計(jì)。下面是Alan Turing Institute網(wǎng)站的屏幕截圖,它是非對(duì)稱平衡的一個(gè)很好的例子。頁(yè)面的左側(cè)比右側(cè)的內(nèi)容更多,但是設(shè)計(jì)人員通過(guò)在頁(yè)面的右側(cè)添加對(duì)比元素來(lái)實(shí)現(xiàn)平衡。

不對(duì)稱設(shè)計(jì)alan-turing主頁(yè)
好平衡的配方
“我可以衡量余額嗎?” 在設(shè)計(jì)師中是一個(gè)相當(dāng)普遍的問(wèn)題。為了找到這個(gè)問(wèn)題的答案,許多設(shè)計(jì)師都在尋找一個(gè)特定的公式,使他們能夠計(jì)算出一切是否平衡。壞消息:沒(méi)有計(jì)算余額的公式。好消息:我們可以使用強(qiáng)大的工具來(lái)確定構(gòu)圖是否平衡-我們自己的眼睛。

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

您可能還會(huì)喜歡:主題開(kāi)發(fā)人員如何從Brutalist Web Design中學(xué)習(xí)。

對(duì)稱與不對(duì)稱
最終,在設(shè)計(jì)布局時(shí),您需要決定要?jiǎng)?chuàng)建對(duì)稱設(shè)計(jì)還是非對(duì)稱設(shè)計(jì)。這個(gè)問(wèn)題沒(méi)有統(tǒng)一的答案,具體選擇取決于項(xiàng)目的具體情況。讓我們看看如何在設(shè)計(jì)中使用對(duì)稱性和非對(duì)稱性。

當(dāng)對(duì)稱最有效時(shí)
以下是一些一般情況,最好采用對(duì)稱方法進(jìn)行布局設(shè)計(jì):

您正在尋求更嚴(yán)肅的美學(xué)(您想傳達(dá)古典主義)
您想增強(qiáng)識(shí)別和回憶(對(duì)稱形式使回憶信息更容易)
您想要實(shí)現(xiàn)更多的順序和結(jié)構(gòu)
您不想在元素的排列上花很多心思,但仍然想要實(shí)現(xiàn)平衡(對(duì)稱布局本來(lái)就是穩(wěn)定且平衡的)
現(xiàn)在,讓我們回顧一下這些案例在現(xiàn)實(shí)生活中的樣子。

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

非對(duì)稱設(shè)計(jì)對(duì)稱音頻徽標(biāo)
許多汽車制造商在設(shè)計(jì)中使用對(duì)稱性來(lái)營(yíng)造一種穩(wěn)定感。奧迪有一個(gè)對(duì)稱的標(biāo)志。
對(duì)稱設(shè)計(jì)是可以預(yù)測(cè)的。因此,如果您要設(shè)計(jì)一個(gè)要求穩(wěn)定性的網(wǎng)站(例如,銀行或保險(xiǎn)公司的網(wǎng)站),那么對(duì)稱設(shè)計(jì)可能是您的正確選擇。

PayPal主頁(yè)的設(shè)計(jì)是對(duì)稱平衡的。一切都圍繞垂直軸進(jìn)行反射-導(dǎo)航欄居中,特色圖像居中,標(biāo)題居中。

不對(duì)稱設(shè)計(jì)對(duì)稱余額貝寶
頁(yè)面只有一個(gè)交互對(duì)象
對(duì)稱性對(duì)于具有單個(gè)交互對(duì)象的頁(yè)面效果很好。典型示例是登錄/注冊(cè)頁(yè)面。通過(guò)將關(guān)鍵的交互對(duì)象或關(guān)鍵消息放在中間,您可以將焦點(diǎn)放在頁(yè)面的中心。

不對(duì)稱設(shè)計(jì)機(jī)器學(xué)習(xí)Google
Google搜索頁(yè)面是一個(gè)具有單個(gè)交互對(duì)象的對(duì)稱布局的很好示例。
非對(duì)稱設(shè)計(jì),對(duì)稱平衡,單個(gè)相互作用,對(duì)象安裝
Instapaper還在屏幕中央創(chuàng)建焦點(diǎn),并在其中顯示關(guān)鍵信息。
網(wǎng)頁(yè)具有兩個(gè)(或多個(gè))同等重要的選項(xiàng)
對(duì)稱設(shè)計(jì)使您可以平均吸引頁(yè)面的所有區(qū)域。一個(gè)典型的例子是在線商店,出售男女產(chǎn)品。對(duì)稱性可以幫助設(shè)計(jì)人員在同一空間中傳遞兩個(gè)同樣重要的信息。

不對(duì)稱設(shè)計(jì)對(duì)稱保暖器
Paulwarmer使用對(duì)稱布局來(lái)傳達(dá)兩個(gè)同等重要的類別。兩塊內(nèi)容成正比。
當(dāng)不對(duì)稱效果時(shí)
對(duì)稱通常被認(rèn)為是穩(wěn)定和協(xié)調(diào)的。但是,對(duì)于某些人來(lái)說(shuō),穩(wěn)定性可能是可預(yù)測(cè)的且無(wú)聊的。不對(duì)稱布局往往更有趣和動(dòng)態(tài)。

在以下情況下不對(duì)稱:

您已經(jīng)準(zhǔn)備好花費(fèi)額外的時(shí)間來(lái)安排要素,以找到實(shí)現(xiàn)平衡的獨(dú)特方法
您正在尋找一種更有趣的布局來(lái)傳達(dá)用戶的興趣
使布局突出
如今,當(dāng)用戶有許多不同的選項(xiàng)可供選擇時(shí),一個(gè)站點(diǎn)必須具有特殊性,以使其在所有其他站點(diǎn)中脫穎而出并降低跳出率。當(dāng)設(shè)計(jì)師掌握不對(duì)稱性時(shí),他們會(huì)創(chuàng)造出更令人難忘的產(chǎn)品。

由Google創(chuàng)建的教程Slice of Machine Learning,教您如何構(gòu)建機(jī)器學(xué)習(xí)分類模型,它使用非對(duì)稱設(shè)計(jì)為訪問(wèn)者創(chuàng)造了難忘的體驗(yàn)。

傳達(dá)動(dòng)力
當(dāng)網(wǎng)頁(yè)設(shè)計(jì)師使用“動(dòng)態(tài)”一詞時(shí),他們所指的是一種設(shè)計(jì),在這種設(shè)計(jì)中,觀看者的眼睛會(huì)四處移動(dòng)并穿過(guò)設(shè)計(jì)。不對(duì)稱的設(shè)計(jì)會(huì)喚起運(yùn)動(dòng)的感覺(jué)。這就是為什么許多體育品牌在單個(gè)元素(例如徽標(biāo))中使用不對(duì)稱布局和不對(duì)稱的原因。

不對(duì)稱設(shè)計(jì)耐克徽標(biāo)
不對(duì)稱傳達(dá)運(yùn)動(dòng)感。
為了吸引注意
不對(duì)稱引起了人們的注意。適當(dāng)?shù)牟粚?duì)稱布局會(huì)自動(dòng)將觀眾的視線轉(zhuǎn)移到焦點(diǎn)上,凝視自然首先落在設(shè)計(jì)的關(guān)鍵部分上。通過(guò)定位和調(diào)整頁(yè)面上的元素,您可以將眼睛引向不同的區(qū)域。

選擇重點(diǎn)時(shí),請(qǐng)記住,任何設(shè)計(jì)的主要目標(biāo)都是溝通。在您設(shè)計(jì)的每個(gè)網(wǎng)頁(yè)上,您都會(huì)向訪問(wèn)者講述一個(gè)故事,因此請(qǐng)務(wù)必選擇有助于您以最有效的方式講故事的焦點(diǎn)。

以下是一些可以引起您注意的事項(xiàng):

對(duì)比。對(duì)比度可用于突出顯示特定元素或?qū)⑵潆[藏。通過(guò)增加特定元素的對(duì)比度,您可以使它脫穎而出。相反,通過(guò)降低對(duì)比度,可以使元素淡入背景。
空格。使用空格將一個(gè)元素與另一個(gè)元素隔離。
運(yùn)動(dòng)。人眼難以動(dòng)彈,要注意運(yùn)動(dòng)的物體。
方向提示。眼睛將遵循方向提示(例如,方向提示可能是指向特定方向的箭頭)。
人臉。眼睛將沿著照片中的眼睛前進(jìn),因此站點(diǎn)的訪客將與設(shè)計(jì)中的人朝相同的方向看。
非對(duì)稱設(shè)計(jì)波美主頁(yè)
鮑姆(Baume)的首頁(yè)設(shè)計(jì)使用空格將觀眾的眼睛引導(dǎo)到特定區(qū)域。
不對(duì)稱設(shè)計(jì)的運(yùn)動(dòng)對(duì)象
Detaen使用移動(dòng)物體(三角形)來(lái)吸引用戶的注意力
非對(duì)稱設(shè)計(jì)關(guān)鍵解決方案主頁(yè)
對(duì)Keysolutions采取行動(dòng)的  呼吁打破了對(duì)稱性,并引起了人們對(duì)自身的更多關(guān)注。
不對(duì)稱設(shè)計(jì)簡(jiǎn)單的生活方式健康主頁(yè)
當(dāng)人們?cè)L問(wèn)Simple Lifestyle Health時(shí),他們會(huì)按照屏幕圖像中的眼睛來(lái)閱讀關(guān)鍵信息。
在設(shè)計(jì)中結(jié)合對(duì)稱和不對(duì)稱
對(duì)稱性并不總是一個(gè)選擇。通過(guò)將對(duì)稱性和非對(duì)稱性相結(jié)合,可以創(chuàng)建最有趣且美觀的設(shè)計(jì)。

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

不對(duì)稱設(shè)計(jì)方丹酮carnevale acireale主頁(yè)
Fondazione Carnevale Acireale在設(shè)計(jì)中同時(shí)使用了對(duì)稱性和非對(duì)稱性。
掌握對(duì)稱和不對(duì)稱
對(duì)稱性(或缺乏對(duì)稱性)可能是設(shè)計(jì)人員工具箱中的強(qiáng)大工具。對(duì)稱自然會(huì)喚起秩序感和穩(wěn)定性,而另一方面,不對(duì)稱可幫助設(shè)計(jì)師實(shí)現(xiàn)設(shè)計(jì)的獨(dú)特性和個(gè)性。將兩者結(jié)合起來(lái),可以創(chuàng)造出獨(dú)特且給觀眾留下深刻印象的設(shè)計(jì)。

文章題目:高端網(wǎng)站建設(shè)企業(yè)
網(wǎng)站路徑:http://www.muchs.cn/news/182948.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供小程序開(kāi)發(fā)、網(wǎng)站營(yíng)銷、電子商務(wù)、全網(wǎng)營(yíng)銷推廣、域名注冊(cè)、網(wǎng)站建設(shè)

廣告

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

成都網(wǎng)站建設(shè)