[設(shè)計(jì)干貨](méi)不對(duì)稱(chēng)設(shè)計(jì)打造有趣的網(wǎng)站頁(yè)面

在絕大多數(shù)現(xiàn)象下，不對(duì)稱(chēng)的計(jì)劃元素能從其他的元素中鋒芒畢露。這些不對(duì)稱(chēng)的計(jì)劃看起來(lái)更賦有生機(jī)，假定其間包括有按鈕、控件或許聯(lián)接的話(huà)，它們普通能取得比其他部位更多的重視。

今日咱們就一同來(lái)細(xì)心看看頁(yè)面計(jì)劃師們是如何通過(guò)比照、留白和計(jì)劃來(lái)創(chuàng)造令人難忘的不對(duì)稱(chēng)計(jì)劃。不對(duì)稱(chēng)的計(jì)劃并不滿(mǎn)是外部歸納上的差異，它相同可所以?xún)?nèi)部構(gòu)造上的不對(duì)稱(chēng)。舉個(gè)比方，圖庫(kù)頁(yè)面中，每張圖都有縮略圖，其間某個(gè)比其他的縮略圖略大一點(diǎn)，這種差異會(huì)立刻招援用戶(hù)的留心力?？偟膩?lái)說(shuō)，不對(duì)稱(chēng)計(jì)劃十分適合于將用戶(hù)的留心力招引到特定的區(qū)域或許元素上，這是它的優(yōu)勢(shì)地址。

接下來(lái)，創(chuàng)新互聯(lián)教您細(xì)心看看比照、間隔和計(jì)劃是如何創(chuàng)造出不對(duì)稱(chēng)的作用。

可察看到的比照度

當(dāng)你將視界中的視覺(jué)干擾都移除了今后，你的用戶(hù)會(huì)很快留心到那些纖細(xì)的差異。這個(gè)時(shí)分，你可能會(huì)恰本地增加一些作用，比方突變的布景，以致jQuery 動(dòng)畫(huà)。這么的作用能讓頁(yè)面中僅剩的一兩個(gè)元素飛快地讓人留心到。

知名Mac途徑計(jì)劃軟件Sketch的官方網(wǎng)站的計(jì)劃便是個(gè)極好的比方，深色和淡色被包容到一個(gè)一致的頁(yè)面計(jì)劃中來(lái)。在頁(yè)頭中，你會(huì)留心到兩個(gè)按鈕：深色的“免費(fèi)試用”和淡色的“立刻收購(gòu)”。有意義的是，兩個(gè)按鈕都是相同的大小，并且處于同一個(gè)程度面上，并且是同一色系。但是，“免費(fèi)收購(gòu)”的按鈕被計(jì)劃成為鬼魂按鈕，整體和深色布景幾乎融為一體。

這么一來(lái)，運(yùn)用淺藍(lán)色實(shí)底的“立刻收購(gòu)”按鈕和布景構(gòu)成了顯著的比照，恰當(dāng)?shù)娘@眼。當(dāng)你翻開(kāi)頁(yè)面的時(shí)分，會(huì)一眼留心到收購(gòu)按鈕，這便是通過(guò)許多的留白和合理的比照建筑出來(lái)的視覺(jué)引導(dǎo)。

橫向和縱向的留白讓按鈕和文本辨別開(kāi)來(lái)，而按鈕色彩的差異比照是讓其間一個(gè)按鈕自但是然地凸顯了出來(lái)。這種計(jì)劃方法十分的運(yùn)用，假定你再接著閱讀，你會(huì)發(fā)現(xiàn)頁(yè)腳也選用了相似的計(jì)劃：

在這種情況下，用戶(hù)只能提交他們的電子郵件，或許選擇丟掉。

Sketch 希冀你在輸入郵件地址今后從速提交，所以提交按鈕安置得同輸入框十分近。依據(jù)Fitt規(guī)矩，兩個(gè)元素之間的間隔越近，用戶(hù)的閱讀和切換速度越快。值得留心的是，提交按鈕的色彩和之前的不對(duì)稱(chēng)計(jì)劃堅(jiān)持著分歧，讓你十分簡(jiǎn)略留心到，蠱惑你去點(diǎn)擊，而這也恰是Sketch想要的。

不對(duì)稱(chēng)計(jì)劃讓環(huán)顧頁(yè)面的用戶(hù)更簡(jiǎn)略留心到這些被精心計(jì)劃得“超卓”的元素。至于計(jì)劃和留白的控制，你能夠運(yùn)用A/B查驗(yàn)來(lái)尋求最好的份額。

從Sketch 的官方網(wǎng)站上，能夠?qū)W習(xí)到這些履歷：

·比照并不只僅色彩的比照，它一同也可所以頁(yè)面上其他控件之間的大小比照、方位比照

·在不相同的計(jì)劃和情況下，留白能夠分外顯眼，也能夠十分不顯眼

·附近的元素的烘托關(guān)于其他的元素的可見(jiàn)性有著首要的作用

·對(duì)稱(chēng)與諧和能制作諧和的觀感，而不對(duì)稱(chēng)計(jì)劃則能招援用戶(hù)留心力，兩者的運(yùn)用應(yīng)當(dāng)均衡。

留白引導(dǎo)留心力

iPad 途徑上的繪圖東西 Procreate 的官方網(wǎng)站便是一個(gè)不太相同的案例。簡(jiǎn)略環(huán)顧一下這個(gè)頁(yè)面，頁(yè)面整體選用的暗色彩配色，整體計(jì)劃并不雜亂，運(yùn)用的頁(yè)面元素標(biāo)準(zhǔn)恰當(dāng)大。

計(jì)劃師在這個(gè)超大的頁(yè)面上運(yùn)用單個(gè)元?dú)v來(lái)展現(xiàn)如何繪畫(huà)。屏幕截圖、繪畫(huà)Demo和功用引見(jiàn)都各自占有著不相同的區(qū)塊，留白則將文字內(nèi)容和視覺(jué)信息切開(kāi)開(kāi)來(lái)。在文本色彩的運(yùn)用上，計(jì)劃師也恰當(dāng)?shù)挠眯模喉?yè)頭的有些運(yùn)用了強(qiáng)比照的配色，而正文有些則運(yùn)用了比照相對(duì)較弱的配色。

通過(guò)將頁(yè)面劃分為不相同的區(qū)塊，頁(yè)面自然地劃分出不相同的層次，每個(gè)有些都有著不相同的款式(全屏布景、超大字體排版、截圖展現(xiàn)等)，這么就使得各個(gè)區(qū)塊顯得更加獨(dú)立。

但是請(qǐng)必須記住，這種計(jì)劃方法并不適合全部網(wǎng)站，但是它確實(shí)曾經(jīng)在計(jì)劃師圈子里面逐步盛行起來(lái)，成為了一種計(jì)劃趨向。假定計(jì)劃和實(shí)行都很到位的話(huà)，看起來(lái)卻是恰當(dāng)?shù)牟诲e(cuò)。

交換式計(jì)劃

乍一看，內(nèi)容和圖畫(huà)擺布交換式的計(jì)劃可能會(huì)讓用戶(hù)感到膩煩，但是假定控制好區(qū)塊之間的間隔，能夠消弭Z字型環(huán)顧閱讀的不適感。

這種款式會(huì)推進(jìn)訪(fǎng)客按照他們自己的節(jié)拍來(lái)閱讀，因?yàn)檫@種計(jì)劃方法打斷了信息的連續(xù)性，但是讓用戶(hù)成為了閱讀節(jié)拍的掌控者。

Wunderlist頁(yè)面就運(yùn)用了非對(duì)稱(chēng)式的留白，合理的留白計(jì)劃讓計(jì)劃顯得詼諧而不單調(diào)。通過(guò)Wunderlist 的計(jì)劃，咱們能夠總結(jié)一下這種計(jì)劃方法：

·不對(duì)稱(chēng)計(jì)劃的首要妄圖是引導(dǎo)用戶(hù)重視頁(yè)面特定的區(qū)域

·不對(duì)稱(chēng)計(jì)劃的重復(fù)運(yùn)用能創(chuàng)造出對(duì)稱(chēng)式的計(jì)劃

·圖文之間的空地控制好了也能夠成為一種方法

·規(guī)矩的留白能讓內(nèi)容閱讀更簡(jiǎn)略，并且具有預(yù)期性。

不對(duì)稱(chēng)設(shè)?計(jì)打造有趣的網(wǎng)站頁(yè)面，你學(xué)會(huì)了么？

標(biāo)題名稱(chēng)：[設(shè)計(jì)干貨](méi)不對(duì)稱(chēng)設(shè)計(jì)打造有趣的網(wǎng)站頁(yè)面
文章URL：http://muchs.cn/news/161326.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、微信公眾號(hào)、ChatGPT、動(dòng)態(tài)網(wǎng)站、定制網(wǎng)站、外貿(mào)建站

廣告

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