發(fā)布日期：2017/5/28

摘要： 編者按：我有特殊的搶眼技巧!今天的好文特別很是值得拜讀，@飛屋睿UIdesign 同窗從對(duì)比、色彩、字體、留白等方面幫同窗們將好關(guān)鍵的內(nèi)容呈現(xiàn)出來，文末還附上一個(gè)特殊有用果的檢測(cè)方

 

編者按：我有特殊的搶眼技巧!今天的好文特別很是值得拜讀，@飛屋睿UIdesign 同窗從對(duì)比、色彩、字體、留白等方面幫同窗們將好關(guān)鍵的內(nèi)容呈現(xiàn)出來，文末還附上一個(gè)特殊有用果的檢測(cè)方法，一眼就能看出你的網(wǎng)站是否合格，周末來充電吧。

對(duì)比：引發(fā)愛好

為了更好地理解對(duì)比在網(wǎng)頁設(shè)計(jì)中的作用，我們先詮釋下什么是對(duì)比。對(duì)比就是在一個(gè)相對(duì)封閉的環(huán)境里發(fā)生的某種元素間的一種關(guān)系。在我此前寫過《設(shè)計(jì)基礎(chǔ)功!幫你徹底掌握設(shè)計(jì)四大原則中的對(duì)比原則》中也具體介紹過對(duì)比在設(shè)計(jì)中的主要性百度優(yōu)化排名，這些元素可以是顏色、紋理、外形、方向和大小。

 

只是稍稍對(duì)字號(hào)大小進(jìn)行調(diào)整，或?qū)ι�彩進(jìn)行更改，就會(huì)馬上改變整個(gè)界面的視覺效果。例如，當(dāng)你看到下面這個(gè)網(wǎng)頁時(shí)，把淺色的背景換為深色，首頁引人注目的“try it free”的首要按鈕馬上在視覺主要性上降級(jí)，而好下方的“call us”就會(huì)升級(jí)為首要的按鈕。

 

再來看看下圖中，顏色和大小是怎樣影響我們的界面視覺的。例如，許多人在眼掃視而過時(shí)，不會(huì)僅僅就看到了兩個(gè)圓。事實(shí)上，他們?cè)诳催@兩個(gè)圓時(shí)，已經(jīng)獲得了這樣的旌旗燈號(hào)“一個(gè)黑色的大圓和一個(gè)紅色的小圓”。也就是說，對(duì)比關(guān)系已經(jīng)可以在時(shí)間就進(jìn)入人們的大腦中，形成強(qiáng)烈的印象。

 

商業(yè)工具：顏色，大小和外形

當(dāng)我們剛開始設(shè)計(jì)一個(gè)頁面的時(shí)候，一定不要忘掉了運(yùn)用這幾個(gè)壯大的視覺工具：顏色，大小和空間。設(shè)計(jì)師Alex Bigman就相信顏色和大小在管理著我們的視覺注重，而空間則幫助管理視覺元素間的關(guān)系。

顏色

簡(jiǎn)單說，亮色可以在柔和的色彩中凸顯出來。這是顯而易見的，而更為主要的是，在設(shè)計(jì)中，你就可以運(yùn)用這一關(guān)系去吸引用戶的注重。另外，特定的色彩也能幫助營造網(wǎng)站的整體氛圍(例如，藍(lán)色代表寧靜，紅色顯得張揚(yáng)和富有攻擊性等)。

顏色基礎(chǔ)知識(shí)見：《設(shè)計(jì)師配色寶典!教你從零開始學(xué)配色(一)》

 

上面這個(gè)網(wǎng)站采用的是視覺系統(tǒng)中的Z模式，Z模式的具體情況已經(jīng)在《基礎(chǔ)小科普!聊聊兩種好常見的網(wǎng)頁布局設(shè)計(jì)模式》中講過了。在此模式下上海做網(wǎng)站，他們運(yùn)用色彩的技巧是特別很是巧妙的。水藍(lán)色的背景馬上將首要目標(biāo)按鈕凸顯在了頂部，這些目標(biāo)按鈕的色彩可以與“get active”的色彩搭配，暗示這一系列的按鈕的相關(guān)性。而下方的兩個(gè)大的矩形區(qū)域因?yàn)橥庑蔚南嗨朴窒噙B，因此也暗示著它們之間的相似性。

好完整的色彩搭配方法見：《色彩搭配速成!3個(gè)實(shí)用方法幫你周全搞定配色》

大小

說到大小，我們通常在說的其實(shí)也就是網(wǎng)頁字體的大小。在傳統(tǒng)的從左到右自上而下的閱讀模式中，這就已經(jīng)是個(gè)很壯大的元素了。這意味著，大號(hào)字體或段落的右下角通常是讀者好先閱讀的地方。因此，字號(hào)大一點(diǎn)發(fā)揮的就是一種強(qiáng)調(diào)作用。

 

講到這一點(diǎn)，不得不提到，的網(wǎng)頁設(shè)計(jì)名博Smashing Magazine對(duì)50個(gè)流行的網(wǎng)頁界面進(jìn)行調(diào)查，他們發(fā)現(xiàn)這些網(wǎng)站通常都是采用題目字號(hào)18~29px，與此匹配的文章主體字號(hào)采用12~14px，只是這項(xiàng)調(diào)查針對(duì)的是英文字體，而中文字體相對(duì)來說應(yīng)該字號(hào)會(huì)大一些易于辨認(rèn)。當(dāng)然，這也只是一個(gè)也許的調(diào)查，并無。但是，你可以從中獲悉更多關(guān)于字號(hào)比例的排版設(shè)計(jì)的知識(shí)。

留白

網(wǎng)頁設(shè)計(jì)的目標(biāo)什么?簡(jiǎn)單講，就是創(chuàng)作一個(gè)漂亮的頁面。那么，你將所有的漂亮的元素悉數(shù)堆疊在網(wǎng)頁中就漂亮嗎?無節(jié)制的增添吸引的元素是快速毀掉自己的設(shè)計(jì)方法之一。一個(gè)網(wǎng)頁中有可以呼吸的空間是特別很是主要的，也就是我們總是愛說的留白。削減“視覺噪音”會(huì)讓頁面顯得更有重點(diǎn)。

 

Usaura的創(chuàng)始人Dmitry就已經(jīng)指出，適當(dāng)?shù)牧舭啄茉鰪?qiáng)對(duì)網(wǎng)頁內(nèi)容的理解。2004年模塊電源，一些研究小組就調(diào)查過，適當(dāng)?shù)牧舭啄茏屓藗儗?duì)網(wǎng)站內(nèi)容理解程度增加20%。雖然用戶并不會(huì)直接對(duì)留白的頁面做些什么，但它卻能影響到用戶的知足和體驗(yàn)。大家可以看看下圖的頁面設(shè)計(jì)。在每一個(gè)主體內(nèi)容品牌策劃，都保留大量留白，用戶的視線流得到了珍愛，讓觀者專注內(nèi)容，才是好好的體驗(yàn)。

網(wǎng)頁設(shè)計(jì)視覺系統(tǒng)的測(cè)試：模糊法

就我所知，有人曾提出這樣一個(gè)方法來檢測(cè)自己的網(wǎng)站。尤其是當(dāng)你的網(wǎng)站有特殊要強(qiáng)調(diào)的內(nèi)容時(shí)，特別很是適用。將自己的網(wǎng)站首頁，放在PS里模糊5~10個(gè)像素，這樣來判斷那些你想強(qiáng)調(diào)的內(nèi)容是否仍然能吸引到注重。

 

上圖的網(wǎng)站經(jīng)過模糊法測(cè)試后，我們會(huì)發(fā)現(xiàn)那些注冊(cè)按鈕和產(chǎn)品特征仍然是很搶眼。這樣的元素安排對(duì)我們來說就是合理的。