巧用不對(duì)稱設(shè)計(jì)打造有趣的網(wǎng)站頁(yè)面

當(dāng)一個(gè)元素在設(shè)計(jì)上使用不對(duì)稱的空間設(shè)計(jì)技巧時(shí)，與其他周圍的元素相比，它看起來能更加的突出或者說特別，在視覺上它可能看起來會(huì)更加活躍，如果你正在考慮在你的網(wǎng)頁(yè)設(shè)計(jì)中添加一個(gè)鏈接/按鈕，而它剛好需要比其他相同的元素獲得更多的關(guān)注（或者簡(jiǎn)單一點(diǎn)說，它是所有元素里面最重要的），這將是特別有用的。
今天，創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作通過案例，我們將仔細(xì)觀察通過對(duì)比度、間距和圖層這些常見的設(shè)計(jì)技巧所表現(xiàn)的不對(duì)稱性。我們將考慮可觀察的對(duì)比度，以及空間的不同使用是如何引起用戶的注意的。
不對(duì)稱并不總是與邊框，填充或溝槽的外部關(guān)系關(guān)聯(lián)。
不對(duì)稱也可以涉及圖像縮放或文本對(duì)齊方式等內(nèi)部關(guān)系。例如，圖片集可能顯示5個(gè)縮略圖，其中位于中間的可以略大于其他的縮略圖，這樣就分清了主次，是中間的那張圖在網(wǎng)頁(yè)設(shè)計(jì)上主要負(fù)責(zé)用于捕獲用戶的注意。不對(duì)稱對(duì)于將注意力引導(dǎo)到頁(yè)面上特定區(qū)域或頁(yè)面中的特定元素是非常好用的一個(gè)技巧。
在apple-mac的介紹網(wǎng)頁(yè)設(shè)計(jì)中你可以很清楚的找到這種不對(duì)稱布局
而且，正如我們?cè)诿赓M(fèi)電子書Web UI Design for the Human Eye中所描述的那樣——有時(shí)不對(duì)稱就只是為了不對(duì)稱是很有用的。
我們來看看如何通過對(duì)比度，間距和圖層來表示不對(duì)稱性。
1.可觀察對(duì)比度
通過消除干擾，你可以做到“強(qiáng)制”用戶只關(guān)注你想讓他們立即看到的內(nèi)容。
怎么做呢？
你可以將主要的設(shè)計(jì)效果應(yīng)用于這些對(duì)于你來說重要的區(qū)域里，如使用背景漸變甚至是jQuery動(dòng)畫。這些效果可以用于一個(gè)或兩個(gè)元素，使它們脫穎而出。
當(dāng)你在欣賞Sketch的網(wǎng)站設(shè)計(jì)時(shí)你可以參考很多不對(duì)稱的設(shè)計(jì)方法尤其是在按鈕方面
對(duì)于這一條來說，我最喜歡的例子之一是Sketch by Bohemian Coding的主頁(yè)。你可以看到，在它的網(wǎng)頁(yè)設(shè)計(jì)上混合了深色和淺色的顏色搭配，它們?cè)究赡苁菦_突的，但是在這個(gè)設(shè)計(jì)上卻沒有，它們將對(duì)比度混合成一個(gè)統(tǒng)一的布局。
在它的標(biāo)題部分，你會(huì)注意到有兩個(gè)按鈕：一個(gè)用于免費(fèi)試用，另一個(gè)則用于購(gòu)買。兩個(gè)按鈕都是藍(lán)色的并且占用相同的空間。然而，免費(fèi)試用按鈕使用了通常被稱為“幽靈按鈕”的“空”背景。通過分層放置在深色背景上面，看起來免費(fèi)試用按鈕似乎落后于背景。
相反，購(gòu)買按鈕因?yàn)槭褂脺\藍(lán)色背景和白色文字，使得它在黑暗的背景下顯得異常突出和搶眼。當(dāng)你的眼睛在標(biāo)題上面快速瀏覽的時(shí)候，很明顯，購(gòu)買按鈕幾乎是立即就能吸引你的注意。這是由顏色引起的，也是由元素之間添加的空白空間引起的。

使用垂直或水平的空白空間，可以使按鈕與標(biāo)題文本分離開。由于一個(gè)按鈕比另一個(gè)按鈕更亮，使它的空間感更強(qiáng)從而避免了其他元素的干擾，它自然而然地就捕獲了用戶的注意力。

你可以在同一個(gè)網(wǎng)站的底部看到類似的按鈕樣式：
你會(huì)注意到Sketch的網(wǎng)頁(yè)設(shè)計(jì)在很多元素的應(yīng)用和設(shè)計(jì)上都帶有不對(duì)稱基因
在這種情況下，用戶只能選擇提交電子郵件或保留信息。

由于Sketch想要在用戶輸入信息后能盡快提交電子郵件，因此輸入字段和提交按鈕之間的距離更加緊密。 這利用了菲茨定律，因?yàn)槟銣p小了距離（和大小保持固定），會(huì)加快你在元素之間移動(dòng)所花費(fèi)的時(shí)間，這樣就能減少你再次考慮是否有必要性的時(shí)間了，這是一種策略。

最后，請(qǐng)注意，與“提交”按鈕相比，輸入欄的不對(duì)稱尺寸也會(huì)吸引你的眼睛到頁(yè)面的那一部分，這正是Sketch所需要的。
為了在某些頁(yè)面元素上吸引用戶的注意力，你可以使用空白的空間。要通過實(shí)驗(yàn)以發(fā)現(xiàn)最有效的方法，你可以嘗試使用不同的A / B測(cè)試方法對(duì)不同的間距值進(jìn)行測(cè)試。
以下是Sketch的網(wǎng)站上收集的一般注意事項(xiàng)：
· 對(duì)比度并不總是指顏色。 它還可以指與頁(yè)面上的其他元素的空間，大小和位置的對(duì)比元素；
· 取決于上下文，空白空間可能是明顯的或不顯眼的；
· 周圍元素在其他元素的自然可見度中發(fā)揮重要作用；
· 對(duì)稱創(chuàng)造記憶和和諧，而不對(duì)稱則引起注意。 相應(yīng)地平衡。
2.空間利用注意
你可以在Procreate的網(wǎng)頁(yè)設(shè)計(jì)上找到一個(gè)稍微不同的示例，這是iPad介紹其數(shù)字繪圖和繪畫工具。通過屏蔽頁(yè)面中的其他不相關(guān)的元素，你會(huì)注意到整個(gè)頁(yè)站設(shè)計(jì)的布局是黑色的，并且具有超大的頁(yè)面元素。
Ipad的網(wǎng)頁(yè)設(shè)計(jì)在空間的應(yīng)用上通過使用大背景來制造不對(duì)稱
這種網(wǎng)站設(shè)計(jì)像我們展示了如何在非常大的頁(yè)面上將焦點(diǎn)吸引到單個(gè)元素或者捉我們想給客戶看的主要內(nèi)容。正如上面的案例一樣，你可以看到插圖，演示繪畫和功能說明都占有自己的部分。
在空間的利用上，白色空間分隔文本和視覺內(nèi)容。設(shè)計(jì)在使用顏色來區(qū)分文本標(biāo)題（較高的對(duì)比度）和一般頁(yè)面文本（較低的對(duì)比度），這個(gè)特別值得注意。
不對(duì)稱空間格局在不同的網(wǎng)頁(yè)設(shè)計(jì)上表現(xiàn)也可能不盡相同
通過將頁(yè)面分割成幾個(gè)部分，你將創(chuàng)建一個(gè)自然的內(nèi)容層次結(jié)構(gòu)，然后將這些部分用獨(dú)特的風(fēng)格（全屏幕背景，超大型排版，應(yīng)用圖例等）分割，這些部分將變得更加明顯。
不過，請(qǐng)記住，并不是所有的網(wǎng)站設(shè)計(jì)都可以從這種大格局的樣式中受益，但這似乎是設(shè)計(jì)師們非常受歡迎的趨勢(shì)。當(dāng)你應(yīng)用適當(dāng)時(shí)，它會(huì)使你的整體網(wǎng)頁(yè)設(shè)計(jì)看起來很棒。
3.交替布局
表面上，交替的內(nèi)容可能看起來并不會(huì)給你產(chǎn)生多少好感，因?yàn)檫@么做意味著你需要強(qiáng)迫讀者的注意力跟著你變化的布局跳轉(zhuǎn)。但是，正是由于內(nèi)容間隔得如此之好，使得讀取Z-Pattern比你先想象中要容易得多。
這種模式還迫使訪客停留在底部，因?yàn)樵O(shè)計(jì)不應(yīng)該是填鴨式的展示信息。當(dāng)然，這種模式唯一可能適用的場(chǎng)景，是通過以雅致的白色空間來雕刻出瀏覽路徑的方式。
看看上面的Wunderlist的APP網(wǎng)頁(yè)設(shè)計(jì)，我們可以看到在白色空間中出現(xiàn)的這種不對(duì)稱模式。認(rèn)真考慮和應(yīng)用不對(duì)稱間距，使其看起來很恰到好處，而不是激怒你的用戶。
我們可以從Wunderlist使用間距的設(shè)計(jì)模式中學(xué)到很多東西：
· 僅在你期望訪客注意頁(yè)面中的某些區(qū)域時(shí)使用，因?yàn)椴粚?duì)稱應(yīng)該是有其目的；
· 重復(fù)圖案中的不對(duì)稱性使其變?yōu)閷?duì)稱性；
· 文本或圖形之間的空間格局也將顯示為一個(gè)較大的圖案；

· 白色空間應(yīng)該使瀏覽內(nèi)容更容易，更可預(yù)測(cè)。

本文來自創(chuàng)新互聯(lián)品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)
標(biāo)簽：成都網(wǎng)頁(yè)設(shè)計(jì),做網(wǎng)站公司, 企業(yè)網(wǎng)頁(yè)制作, 專業(yè)網(wǎng)站制作

本文題目：巧用不對(duì)稱設(shè)計(jì)打造有趣的網(wǎng)站頁(yè)面
當(dāng)前路徑：http://www.muchs.cn/news42/167642.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、網(wǎng)站策劃、靜態(tài)網(wǎng)站、軟件開發(fā)、微信小程序、響應(yīng)式網(wǎng)站

廣告

聲明：本網(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í)需注明來源： 創(chuàng)新互聯(lián)