發布日期：2017/5/28

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

 

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

對比：引發愛好

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

 

只是稍稍對字號大小進行調整，或對色彩進行更改，就會馬上改變整個界面的視覺效果。例如，當你看到下面這個網頁時，把淺色的背景換為深色，首頁引人注目的“try it free”的首要按鈕馬上在視覺主要性上降級，而好下方的“call us”就會升級為首要的按鈕。

 

再來看看下圖中，顏色和大小是怎樣影響我們的界面視覺的。例如，許多人在眼掃視而過時，不會僅僅就看到了兩個圓。事實上，他們在看這兩個圓時，已經獲得了這樣的旌旗燈號“一個黑色的大圓和一個紅色的小圓”。也就是說，對比關系已經可以在時間就進入人們的大腦中，形成強烈的印象。

 

商業工具：顏色，大小和外形

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

顏色

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

顏色基礎知識見：《設計師配色寶典!教你從零開始學配色(一)》

 

上面這個網站采用的是視覺系統中的Z模式，Z模式的具體情況已經在《基礎小科普!聊聊兩種好常見的網頁布局設計模式》中講過了。在此模式下上海做網站，他們運用色彩的技巧是特別很是巧妙的。水藍色的背景馬上將首要目標按鈕凸顯在了頂部，這些目標按鈕的色彩可以與“get active”的色彩搭配，暗示這一系列的按鈕的相關性。而下方的兩個大的矩形區域因為外形的相似又相連，因此也暗示著它們之間的相似性。

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

大小

說到大小，我們通常在說的其實也就是網頁字體的大小。在傳統的從左到右自上而下的閱讀模式中，這就已經是個很壯大的元素了。這意味著，大號字體或段落的右下角通常是讀者好先閱讀的地方。因此，字號大一點發揮的就是一種強調作用。

 

講到這一點，不得不提到，的網頁設計名博Smashing Magazine對50個流行的網頁界面進行調查，他們發現這些網站通常都是采用題目字號18~29px，與此匹配的文章主體字號采用12~14px，只是這項調查針對的是英文字體，而中文字體相對來說應該字號會大一些易于辨認。當然，這也只是一個也許的調查，并無。但是，你可以從中獲悉更多關于字號比例的排版設計的知識。

留白

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

 

Usaura的創始人Dmitry就已經指出，適當的留白能增強對網頁內容的理解。2004年模塊電源，一些研究小組就調查過，適當的留白能讓人們對網站內容理解程度增加20%。雖然用戶并不會直接對留白的頁面做些什么，但它卻能影響到用戶的知足和體驗。大家可以看看下圖的頁面設計。在每一個主體內容品牌策劃，都保留大量留白，用戶的視線流得到了珍愛，讓觀者專注內容，才是好好的體驗。

網頁設計視覺系統的測試：模糊法

就我所知，有人曾提出這樣一個方法來檢測自己的網站。尤其是當你的網站有特殊要強調的內容時，特別很是適用。將自己的網站首頁，放在PS里模糊5~10個像素，這樣來判斷那些你想強調的內容是否仍然能吸引到注重。

 

上圖的網站經過模糊法測試后，我們會發現那些注冊按鈕和產品特征仍然是很搶眼。這樣的元素安排對我們來說就是合理的。