奪你眼球!有哪些方法可以凸起網(wǎng)頁中的關(guān)鍵內(nèi)

2023-10-19    分類: 網(wǎng)站建設(shè)

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

對比:引發(fā)愛好

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

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

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

商業(yè)工具:顏色,大小和外形

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

顏色

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

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

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

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

大小

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

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

留白

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

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

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

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

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

本文名稱:奪你眼球!有哪些方法可以凸起網(wǎng)頁中的關(guān)鍵內(nèi)
網(wǎng)頁網(wǎng)址:http://www.muchs.cn/news13/286863.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站設(shè)計、微信公眾號服務(wù)器托管、關(guān)鍵詞優(yōu)化、標簽優(yōu)化、微信小程序

廣告

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

微信小程序開發(fā)