不對稱的網(wǎng)頁設(shè)計打造有趣的網(wǎng)站頁面

現(xiàn)在大家對于網(wǎng)站的要求是越來越高了，不僅整體要有美感，實用性強(qiáng)，用戶使用方便，而且還更加注重了創(chuàng)意這塊，在網(wǎng)頁設(shè)計上面都在搞各種小心機(jī)，甚至于把心理學(xué)都給用上了，為的就是讓網(wǎng)站能大化的發(fā)揮效果，所以說現(xiàn)在要想建一個有趣的有創(chuàng)意的網(wǎng)站，網(wǎng)頁設(shè)計這塊可是重中之重，選你要稍微懂點心理學(xué)，再者你要有自己的想法，能拿捏的住分寸，強(qiáng)烈的美感也是不可少的，之前有和專業(yè)的朋友討論過這方面的問題，說到了網(wǎng)頁設(shè)計過程中的對稱與不對稱這個問題，這個是我們常常要做的取舍。對稱的和諧，和不對稱的差異，都是創(chuàng)造好設(shè)計的必須的手段。但是對稱通常都用的不錯，但是不對稱并非人人都運用嫻熟。那么今天的這篇文章，我們簡單聊聊網(wǎng)頁設(shè)計中的不對稱設(shè)計~也是結(jié)合了我們討論的結(jié)果整理出來的。

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

今天創(chuàng)新互聯(lián)就一起來仔細(xì)看看網(wǎng)頁設(shè)計師們是如何通過對比、留白和布局來打造令人難忘的不對稱設(shè)計。不對稱的設(shè)計并不全是外部輪廓上的差異，它同樣可以是內(nèi)部結(jié)構(gòu)上的不對稱。舉個例子，圖庫頁面中，每張圖都有縮略圖，其中某個比其他的縮略圖略大一點，這種差異會立刻吸引用戶的注意力?？偟膩碚f，不對稱設(shè)計非常適合于將用戶的注意力吸引到特定的區(qū)域或者元素上，這是它的優(yōu)勢所在。

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

可觀察到的對比度

當(dāng)你將視野中的視覺干擾都移除了之后，你的用戶會很快注意到那些細(xì)微的差異。這個時候，你可能會適當(dāng)?shù)卦黾右恍┬Ч?，比如漸變的背景，甚至jQuery 動畫。這樣的效果能讓頁面中僅剩的一兩個元素飛快地讓人注意到。

著名Mac平臺設(shè)計軟件Sketch的官方網(wǎng)站的設(shè)計就是個很好的例子，深色和淺色被容納到一個統(tǒng)一的頁面設(shè)計中來。在頁頭中，你會注意到兩個按鈕：深色的“免費試用”和淺色的“立刻購買”。有意思的是，兩個按鈕都是同樣的大小，并且處于同一個水平面上，并且是同一色系。但是，“免費購買”的按鈕被設(shè)計成為幽靈按鈕，整體和深色背景幾乎融為一體。

這樣一來，使用淺藍(lán)色實底的“立刻購買”按鈕和背景構(gòu)成了鮮明的對比，相當(dāng)?shù)娘@眼。當(dāng)你打開頁面的時候，會一眼注意到購買按鈕，這就是通過大量的留白和合理的對比營造出來的視覺引導(dǎo)。

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

在這種情況下，用戶只能提交他們的電子郵件，或者選擇放棄。

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

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

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

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

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

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

·對稱與協(xié)調(diào)能制造和諧的觀感，而不對稱設(shè)計則能吸引用戶注意力，兩者的使用應(yīng)當(dāng)平衡。

留白引導(dǎo)注意力

iPad 平臺上的繪圖工具 Procreate 的官方網(wǎng)站就是一個不太一樣的案例。簡單掃視一下這個頁面，頁面整體采用的暗色調(diào)配色，整體布局并不復(fù)雜，使用的頁面元素尺寸相當(dāng)大。

設(shè)計師在這個超大的頁面上使用單個元素來展示如何繪畫。屏幕截圖、繪畫Demo和功能介紹都各自占據(jù)著不同的區(qū)塊，留白則將文字內(nèi)容和視覺信息分割開來。在文本色彩的使用上，設(shè)計師也相當(dāng)?shù)挠眯模喉擃^的部分使用了強(qiáng)對比的配色，而正文部分則使用了對比相對較弱的配色。

通過將頁面劃分為不同的區(qū)塊，頁面自然地劃分出不同的層次，每個部分都有著不同的樣式(全屏背景、超大字體排版、截圖展示等)，這樣就使得各個區(qū)塊顯得更加獨立。

但是請務(wù)必記住，這種設(shè)計手法并不適合所有網(wǎng)站，但是它確實已經(jīng)在設(shè)計師圈子里面逐步流行起來，成為了一種設(shè)計趨勢。如果設(shè)計和執(zhí)行都很到位的話，看起來倒是相當(dāng)?shù)牟诲e。

交替式布局

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

這種樣式會促使訪客按照他們自己的節(jié)奏來閱讀，因為這種布局方式打斷了信息的連續(xù)性，但是讓用戶成為了閱讀節(jié)奏的掌控者。

Wunderlist頁面就使用了非對稱式的留白，合理的留白設(shè)計讓布局顯得有趣而不單調(diào)。通過Wunderlist 的布局，我們可以總結(jié)一下這種設(shè)計模式：

·不對稱設(shè)計的主要目的是引導(dǎo)用戶關(guān)注頁面特定的區(qū)域

·不對稱設(shè)計的重復(fù)使用能創(chuàng)造出對稱式的設(shè)計

·圖文之間的間隙控制好了也可以成為一種模式

·規(guī)律的留白能讓內(nèi)容瀏覽更簡單，并且具有預(yù)期性。

分享標(biāo)題：不對稱的網(wǎng)頁設(shè)計打造有趣的網(wǎng)站頁面
鏈接地址：http://www.bm7419.com/news39/159239.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、服務(wù)器托管、Google、網(wǎng)站制作、用戶體驗、外貿(mào)建站

廣告

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