網(wǎng)頁設(shè)計(jì)!有哪些方法可以突出網(wǎng)頁中的關(guān)鍵內(nèi)容?
對(duì)比:引發(fā)興趣
為了更好地理解對(duì)比在網(wǎng)頁設(shè)計(jì)中的作用,我們先解釋下什么是對(duì)比。對(duì)比就是在一個(gè)相對(duì)封閉的環(huán)境里發(fā)生的某種元素間的一種關(guān)系。
只是稍稍對(duì)字號(hào)大小進(jìn)行調(diào)整,或?qū)ι蔬M(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è)強(qiáng)大的視覺工具:顏色,大小和空間。設(shè)計(jì)師Alex Bigman就相信顏色和大小在管理著我們的視覺注意,而空間則幫助管理視覺元素間的關(guān)系。
顏色
簡單說,亮色可以在柔和的色彩中凸顯出來。這是顯而易見的,而更為重要的是,在設(shè)計(jì)中,你就可以運(yùn)用這一關(guān)系去吸引用戶的注意。另外,特定的色彩也能幫助營造網(wǎng)站的整體氛圍(例如,藍(lán)色代表寧靜,紅色顯得張揚(yáng)和富有攻擊性等)。
上面這個(gè)網(wǎng)站采用的是視覺體系中的Z模式。在此模式下,他們運(yùn)用色彩的技巧是非常巧妙的。水藍(lán)色的背景立刻將首要目標(biāo)按鈕凸顯在了頂部,這些目標(biāo)按鈕的色彩可以與“get active”的色彩搭配,暗示這一系列的按鈕的相關(guān)性。而下方的兩個(gè)大的矩形區(qū)域由于形狀的相似又相連,因此也暗示著它們之間的相似性。
大小
說到大小,我們通常在說的其實(shí)也就是網(wǎng)頁字體的大小。在傳統(tǒng)的從左到右自上而下的閱讀模式中,這就已經(jīng)是個(gè)很強(qiáng)大的元素了。這意味著,大號(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)站通常都是采用標(biāo)題字號(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)查,并無絕對(duì)。但是,你可以從中獲悉更多關(guān)于字號(hào)比例的排版設(shè)計(jì)的知識(shí)。
留白
網(wǎng)頁設(shè)計(jì)的目標(biāo)什么?簡單講,就是創(chuàng)作一個(gè)漂亮的頁面。那么,你將所有的漂亮的元素全部堆疊在網(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)容,都保留大量留白,用戶的視線流得到了保護(hù),讓觀者專注內(nèi)容,才是最好的體驗(yàn)。
網(wǎng)頁設(shè)計(jì)視覺體系的測試:模糊法
就我所知,有人曾提出這樣一個(gè)方法來檢測自己的網(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)過模糊法測試后,我們會(huì)發(fā)現(xiàn)那些注冊(cè)按鈕和產(chǎn)品特性仍然是很搶眼。這樣的元素安排對(duì)我們來說就是合理的。
- 相關(guān)教程
- TA的教程
- 收藏
- 返回
- ps知識(shí)
- ps基礎(chǔ)教程
- 飛屋睿UIdesign
- ps技巧
- 理論教程
學(xué)習(xí) · 提示
相關(guān)教程
推薦教程
- 圖片畫冊(cè)平面設(shè)計(jì)排版ps理論教程
- 用戶體驗(yàn),分享20個(gè)有影響力的包裝設(shè)計(jì)
- Photoshop初級(jí)教程-命令的技巧
- 移動(dòng)設(shè)計(jì),移動(dòng)應(yīng)用導(dǎo)航模式設(shè)計(jì)方法
- 顏色管理,讓自己的照片在網(wǎng)上正確地顯示
- 用戶體驗(yàn),如何讓用戶心動(dòng)?
- UI知識(shí),尺寸對(duì)UI設(shè)計(jì)的影響
- 調(diào)色知識(shí),簡單實(shí)用的調(diào)色原理
- 色彩知識(shí),講解顏色基礎(chǔ)知識(shí)和配色理論
- 設(shè)計(jì)界面最常用最舒服的12種顏色(含色