在絕大多數情形下，不對(duì)稱的設計元素能(néng)從其他的元素中脫穎而出。這(zhè)些不對(duì)稱的設計看起(qǐ)來更富有活力，如果其中包含有按鈕、控件或者鏈接的話，它們通常能(néng)獲得比其他部位更多的關注。

今天我們就一起(qǐ)來仔細看看網頁設計師們是如何通過(guò)對(duì)比、留白和布局來打造令人難忘的不對(duì)稱設計。不對(duì)稱的設計并不全是外部輪廓上的差異，它同樣(yàng)可以是内部結構上的不對(duì)稱。舉個例子，圖庫頁面(miàn)中，每張圖都(dōu)有縮略圖，其中某個比其他的縮略圖略大一點，這(zhè)種(zhǒng)差異會立刻吸引用戶的注意力。總的來說，不對(duì)稱設計非常适合于將(jiāng)用戶的注意力吸引到特定的區域或者元素上，這(zhè)是它的優勢所在。

天貓&京東,内蒙古電商品牌策劃,内蒙古微信營銷,内蒙古微網站,呼和浩特電商品牌策劃,呼和浩特微信營銷,呼和浩特微網站,内蒙古網站制作，内蒙古網站設計，内蒙古網站建設，呼和浩特網站建設，呼和浩特網站制作、呼和浩特網站設計首選内蒙古呼和浩特先誠網絡科技公司。先誠官網：/

接下來，我們仔細看看對(duì)比、間距和布局是如何創造出不對(duì)稱的效果。

可觀察到的對(duì)比度

當你將(jiāng)視野中的視覺幹擾都(dōu)移除了之後(hòu)，你的用戶會很快注意到那些細微的差異。這(zhè)個時候，你可能(néng)會适當地增加一些效果，比如漸變的背景，甚至jQuery 動畫。這(zhè)樣(yàng)的效果能(néng)讓頁面(miàn)中僅剩的一兩(liǎng)個元素飛快地讓人注意到。

著名Mac平台設計軟件Sketch的官方網站的設計就是個很好(hǎo)的例子，深色和淺色被(bèi)容納到一個統一的頁面(miàn)設計中來。在頁頭中，你會注意到兩(liǎng)個按鈕：深色的“免費試用”和淺色的“立刻購買”。有意思的是，兩(liǎng)個按鈕都(dōu)是同樣(yàng)的大小，并且處于同一個水平面(miàn)上，并且是同一色系。但是，“免費購買”的按鈕被(bèi)設計成(chéng)爲幽靈按鈕，整體和深色背景幾乎融爲一體。

這(zhè)樣(yàng)一來，使用淺藍色實底的“立刻購買”按鈕和背景構成(chéng)了鮮明的對(duì)比，相當的顯眼。當你打開(kāi)頁面(miàn)的時候，會一眼注意到購買按鈕，這(zhè)就是通過(guò)大量的留白和合理的對(duì)比營造出來的視覺引導。

橫向(xiàng)和縱向(xiàng)的留白讓按鈕和文本區分開(kāi)來，而按鈕色彩的差異對(duì)比是讓其中一個按鈕自然而然地凸顯了出來。這(zhè)種(zhǒng)設計手法非常的使用，如果你再接著(zhe)浏覽，你會發(fā)現頁腳也采用了相似的設計：

在這(zhè)種(zhǒng)情況下，用戶隻能(néng)提交他們的電子郵件，或者選擇放棄。

Sketch 希望你在輸入郵件地址之後(hòu)盡快提交，所以提交按鈕布置得同輸入框非常近。根據Fitt定律，兩(liǎng)個元素之間的距離越近，用戶的浏覽和切換速度越快。值得注意的是，提交按鈕的色彩和之前的不對(duì)稱設計保持著(zhe)一緻，讓你非常容易注意到，勾引你去點擊，而這(zhè)也正是Sketch想要的。

不對(duì)稱設計讓掃視頁面(miàn)的用戶更容易注意到這(zhè)些被(bèi)精心設計得“突出”的元素。至于布局和留白的控制，你可以使用A/B測試來尋求最佳的比例。

從Sketch 的官方網站上，可以學(xué)習到這(zhè)些經(jīng)驗：

·對(duì)比并不隻是色彩的對(duì)比，它同時也可以是網頁上其他控件之間的大小對(duì)比、位置對(duì)比

·在不同的布局和情況下，留白可以特别顯眼，也可以非常不顯眼

·周圍的元素的襯托對(duì)于其他的元素的可見性有著(zhe)重要的作用

·對(duì)稱與協調能(néng)制造和諧的觀感，而不對(duì)稱設計則能(néng)吸引用戶注意力，兩(liǎng)者的使用應當平衡。

留白引導注意力

iPad 平台上的繪圖工具 Procreate 的官方網站就是一個不太一樣(yàng)的案例。簡單掃視一下這(zhè)個頁面(miàn)，頁面(miàn)整體采用的暗色調配色，整體布局并不複雜，使用的頁面(miàn)元素尺寸相當大。

設計師在這(zhè)個超大的頁面(miàn)上使用單個元素來展示如何繪畫。屏幕截圖、繪畫Demo和功能(néng)介紹都(dōu)各自占據著(zhe)不同的區塊，留白則將(jiāng)文字内容和視覺信息分割開(kāi)來。在文本色彩的使用上，設計師也相當的用心：頁頭的部分使用了強對(duì)比的配色，而正文部分則使用了對(duì)比相對(duì)較弱的配色。

通過(guò)將(jiāng)頁面(miàn)劃分爲不同的區塊，頁面(miàn)自然地劃分出不同的層次，每個部分都(dōu)有著(zhe)不同的樣(yàng)式（全屏背景、超大字體排版、截圖展示等），這(zhè)樣(yàng)就使得各個區塊顯得更加獨立。

但是請務必記住，這(zhè)種(zhǒng)設計手法并不适合所有網站，但是它确實已經(jīng)在設計師圈子裡(lǐ)面(miàn)逐步流行起(qǐ)來，成(chéng)爲了一種(zhǒng)設計趨勢。如果設計和執行都(dōu)很到位的話，看起(qǐ)來倒是相當的不錯。

交替式布局

乍一看，内容和圖片左右交替式的布局可能(néng)會讓用戶感到厭煩，但是如果控制好(hǎo)區塊之間的間距，可以消除Z字型掃視閱讀的不适感。

這(zhè)種(zhǒng)樣(yàng)式會促使訪客按照他們自己的節奏來閱讀，因爲這(zhè)種(zhǒng)布局方式打斷了信息的連續性，但是讓用戶成(chéng)爲了閱讀節奏的掌控者。

Wunderlist頁面(miàn)就使用了非對(duì)稱式的留白，合理的留白設計讓布局顯得有趣而不單調。通過(guò)Wunderlist 的布局，我們可以總結一下這(zhè)種(zhǒng)設計模式：

·不對(duì)稱設計的主要目的是引導用戶關注頁面(miàn)特定的區域

·不對(duì)稱設計的重複使用能(néng)創造出對(duì)稱式的設計

·圖文之間的間隙控制好(hǎo)了也可以成(chéng)爲一種(zhǒng)模式

·規律的留白能(néng)讓内容浏覽更簡單，并且具有預期性。

原文地址：designshack

原文作者：JERRRY CAO

優設譯文：http://www.uisdc.com/space-asymmetry-website-design

注：本文均來自百度搜索，如涉及版權問題，請聯系我們，我們會第一時間解決。