很多初級(jí)網(wǎng)頁(yè)設(shè)計(jì)師，在初入行時(shí)，往往會(huì)有一些細(xì)節(jié)上的東西做不好，導(dǎo)致整個(gè)畫(huà)面看上去粗糙沒(méi)品質(zhì)，這些細(xì)節(jié)可能是很細(xì)微的，很容易被設(shè)計(jì)師不重視或直接忽略掉，當(dāng)加起來(lái)有幾條細(xì)節(jié)沒(méi)有做好，你的作品的品質(zhì)已經(jīng)開(kāi)始下降，所以要做好界面同時(shí)也要注重設(shè)計(jì)細(xì)節(jié)的處理。

今天長(zhǎng)沙網(wǎng)站建設(shè)與大家分享10條實(shí)用的網(wǎng)頁(yè)設(shè)計(jì)設(shè)計(jì)干貨，里面提到很多關(guān)于網(wǎng)頁(yè)設(shè)計(jì)相關(guān)的微細(xì)節(jié)，對(duì)于初入行的設(shè)計(jì)師都值得一看。

好的設(shè)計(jì)原則是可以很容易被大眾學(xué)習(xí)和實(shí)踐的。本文將介紹一些設(shè)計(jì)技巧相關(guān)的基礎(chǔ)知識(shí)，看完這些

說(shuō)不定你今天就能用上！

如果你不確定自己適不適合做設(shè)計(jì)，請(qǐng)記住大神Dave Grohl關(guān)于學(xué)習(xí)新事物的看法：

我從未學(xué)過(guò)打鼓，也從未上過(guò)吉他課，我只是想做就去做了。我認(rèn)為，如果你對(duì)某件事充滿熱情，有動(dòng)力，有專(zhuān)注力，就能做好你想做的任何事。

— Dave Grohl, Foo Fighters

記住Grohls先生的話，準(zhǔn)備好開(kāi)始今天的速成班了嗎？系好安全帶，老司機(jī)帶你飛：

1.對(duì)比度不能太小

背景與內(nèi)容之間的對(duì)比度應(yīng)該足夠適合閱讀，以免引起眼睛疲勞。通常，白色背景下的黑色文本是最容易讀的，盡量不要用淺灰色，黃色和綠色的文字。如果你自己做完設(shè)計(jì)稿，不得不瞇著眼睛才能看清，那就肯定是有問(wèn)題了。

2.深灰色比黑色要更容易閱讀

如果可以選擇，推薦使用#333333 RGB(51,51,51)而不是純黑色作為文字內(nèi)容。純黑色配上白色背景會(huì)讓眼睛產(chǎn)生視覺(jué)抖動(dòng)，讓文字難以聚焦。

3.核心內(nèi)容要突出

首頁(yè)的布局尤為重要，應(yīng)該要清楚的顯示應(yīng)用的主要功能。核心內(nèi)容應(yīng)該是顯而易見(jiàn)的，而不需要通過(guò)縮放，滾動(dòng)或點(diǎn)擊等操作才能知曉。

讓我們一起來(lái)看看市面上把視覺(jué)層次結(jié)構(gòu)做的比較好的例子吧。

Instagram (下圖中的左邊) 核心功能是希望用戶上傳照片/視頻；Pinterest (下圖中的右邊) 的核心功能是發(fā)現(xiàn)和搜索靈感圖片，所以把搜索放在了頂部最顯著的位置。

再看看另外2個(gè)案例

Spotify (下面的左圖) 希望給音樂(lè)專(zhuān)輯更多的曝光，所以將播放頁(yè)面中的專(zhuān)輯封面放到最大，將播放器控件放在第二重要位置；然后在第二重要的播放器控件中再進(jìn)行重要級(jí)拆分，結(jié)合用戶的實(shí)際需求頻率，把播放和暫停放大，快進(jìn)和快退縮小。

Facebook (下面的右圖) 看起來(lái)比較像Instagram，把朋友的內(nèi)容放在了核心位置上，因?yàn)樯缃皇荈acebook的核心業(yè)務(wù)。

4.注意對(duì)齊所有元素

當(dāng)看到一個(gè)設(shè)計(jì)不舒服的時(shí)候，首先應(yīng)該考慮到的就是對(duì)齊問(wèn)題。當(dāng)設(shè)計(jì)師們?cè)趶?qiáng)調(diào)需要使用“網(wǎng)格”體系時(shí)，他們其實(shí)是在提醒團(tuán)隊(duì)注意對(duì)齊問(wèn)題。

（譯者注：新手只要把對(duì)齊這個(gè)看似簡(jiǎn)單的問(wèn)題做好，設(shè)計(jì)就能提升一個(gè)檔次！很多新人會(huì)把設(shè)計(jì)元素故意調(diào)的歪七扭八，以此體現(xiàn)他們做了設(shè)計(jì)，我當(dāng)年剛?cè)腴T(mén)的時(shí)候也犯了這樣的錯(cuò)誤。實(shí)際上，有規(guī)律的東西能形成美感，對(duì)齊不是一種禁錮，而是一種好的設(shè)計(jì)方式。）

調(diào)整好對(duì)齊問(wèn)題是可以對(duì)任何網(wǎng)頁(yè)或應(yīng)用設(shè)計(jì)最行之有效的優(yōu)化設(shè)計(jì)手段之一，只要做好了，效果能立馬好上10倍以上。

看看另一個(gè)對(duì)齊問(wèn)題，這個(gè)是medium的一個(gè)頁(yè)面。

這是我從Medium上找到的網(wǎng)頁(yè)設(shè)計(jì)布局——你覺(jué)得怎樣？(提示: 注意對(duì)邊邊緣的對(duì)齊情況。)

左圖，我突出顯示了由于對(duì)齊問(wèn)題帶來(lái)的視覺(jué)流向，而在右側(cè)，我只是將所有主要內(nèi)容進(jìn)行了左對(duì)齊。

左圖糟糕的對(duì)齊形式，右圖是調(diào)整后的對(duì)齊形式（點(diǎn)開(kāi)圖片可以查看大圖）

5.把握文字的大小和間距

我們并不是為螞蟻設(shè)計(jì)的。增大文字的尺寸和間距，能夠使得內(nèi)容更容易閱讀和消化。

6.使用合適的布局形式

大多數(shù)App或者網(wǎng)站都會(huì)用到搜索，關(guān)于如果排布具體的搜索結(jié)果一直存在一些爭(zhēng)議。

如果結(jié)果的排序很重要，那么使用列表視圖是最有效的。

如果順序無(wú)關(guān)緊要，而你希望你的應(yīng)用是鼓勵(lì)用戶去發(fā)現(xiàn)（比如Pinterest），則使用網(wǎng)格視圖更為合適。

7.先用黑白設(shè)計(jì)，后面再加顏色

使用黑白設(shè)計(jì)時(shí)，能更專(zhuān)注于解決和設(shè)計(jì)應(yīng)用的核心體驗(yàn)。

而如果在做布局框架的同時(shí)，加入顏色，會(huì)引起一些情感上的干擾，會(huì)打斷我們專(zhuān)注于核心問(wèn)題設(shè)計(jì)上的能力。（譯者注：先做交互，后做視覺(jué)，現(xiàn)在應(yīng)該大多數(shù)都是這么個(gè)流程吧。）