2022-07-22 分類: 網(wǎng)站建設(shè)
在網(wǎng)站建設(shè)工作中,你是否會(huì)覺得你的網(wǎng)頁設(shè)計(jì)項(xiàng)目好像缺少那么一些特殊的流行元素?這很有可能是因?yàn)轫撁嫒鄙倭俗銐虻膶?duì)比度。其實(shí),通過頁面中提供的不同元素之間的對(duì)比區(qū)分,可以使得每個(gè)元素看起來更加個(gè)性化,突出以及特殊。
網(wǎng)站設(shè)計(jì)可以通過多種方式來創(chuàng)建各種極具個(gè)性的對(duì)比,而且,你不用拘泥于一種或幾種不同的的元素,所有不同類型的元素都可以應(yīng)用到。從排版到色彩再到空間,通過創(chuàng)造對(duì)比可以使一個(gè)設(shè)計(jì)從“嘖嘖”的嫌棄到“喔”的驚嘆,其中的落差你可以自行腦補(bǔ)。這里我們總結(jié)提供了五種方法來提升網(wǎng)站設(shè)計(jì)的視覺對(duì)比。
1.刻意使元素更大(或更小)
當(dāng)在設(shè)計(jì)中創(chuàng)建焦點(diǎn)時(shí),過于體現(xiàn)對(duì)稱性和有序性可能是在給自己挖坑。頁面上如果具有太多相等權(quán)重的元素,會(huì)使得它們最終看起來沒有主次,完全是相同的,這樣就顯得過于平淡了。
但面臨以上的這個(gè)問題時(shí),最容易的解決方案就是凸顯一個(gè)元素,你可以讓它更大,或者更小。
通過這種方法,可以使這個(gè)元素成為頁面上直接的焦點(diǎn),通過這個(gè)“小心機(jī)”,用戶會(huì)自然的被吸引到這個(gè)區(qū)域,因?yàn)楸绕鹬苓叺钠渌貋碚f,它是不同的。
使元素,照片或文本區(qū)域更大或更小不僅僅是通過物理尺寸控制的,它也包括通過視覺重量的輕重來體現(xiàn)。想了解這一點(diǎn),最簡(jiǎn)單的方法就是在排版或字體使用上多花一些心思??纯瓷厦娴膱D像。兩個(gè)詞都是相同的“大小”,但注意,通過視覺,你覺得哪種形式的設(shè)計(jì)顯得更“重”呢?上面的這種對(duì)比就是通過字體中的粗筆畫和薄筆畫來體現(xiàn)的。
你可以試著將這種相同概念應(yīng)用于幾乎任何其他網(wǎng)頁設(shè)計(jì)元素中,結(jié)果一定會(huì)讓你吃驚的。
再回顧一下最上面舉的Little Flyers的網(wǎng)站。請(qǐng)?zhí)貏e注意頁面頂部基于文本基礎(chǔ)的導(dǎo)航和屏幕底部的按鈕。哪個(gè)或那塊區(qū)域更快地引起你的注意?為什么?上面所有的類型是相同的大小,但通過在一個(gè)豐富多彩的照片內(nèi)用線框?qū)⑽谋就癸@出來使它看起來更大,更引人注目。
2.添加一些小紋理
現(xiàn)在的網(wǎng)頁設(shè)計(jì)主要以扁平和簡(jiǎn)約的風(fēng)格作為設(shè)計(jì)趨勢(shì)的主導(dǎo)驅(qū)動(dòng)力,所以較之前流行一時(shí)的紋理,在現(xiàn)在變得不太常見了。不過你仍然會(huì)在許多地方看到它,也許只是你沒太過多的注意到。
從平面元素過度到具有紋理,圖案或三維樣式的任何東西,都有助于創(chuàng)建焦點(diǎn)區(qū)域。雖然在背景上添加紋理可能是最立竿見影的解決方案,但紋理也可以以其他方式使用在不同的設(shè)計(jì)上。
所有,在做網(wǎng)頁設(shè)計(jì)的時(shí)候,不妨考慮一下使用具有紋理感的文本元素(這在許多老式排版風(fēng)格中是很受歡迎的)。主要的紋理類型可以是粗糙或平滑的。他們可以配合使用,或者孤立地幫助創(chuàng)建視覺焦點(diǎn)。在平面設(shè)計(jì)工作中,需要打印設(shè)計(jì)時(shí),你也可以根據(jù)所使用的紙張類型,頁面平滑程度以及其他物理因素來添加紋理。
3.改變?cè)匦螤?/p>
做個(gè)小測(cè)試,看看上面的圖片。你視覺的第一印象是什么呢?對(duì)我來說,我的焦點(diǎn)被那個(gè)帶有問號(hào)的圓形物件吸引了。
你知道這是為什么嗎?其實(shí)原理很簡(jiǎn)單,在一個(gè)充滿了矩形的圖像中,它是的圓,僅此而已。對(duì)象作為特殊焦點(diǎn)元素的區(qū)別在于,是什么使它脫穎而出。當(dāng)然,字符顛倒的事實(shí)也是一個(gè)吸引我注意力的緣由之一。所以,改變?cè)氐男螤罨蚍较?,使其和周圍的絕大多數(shù)其他元素不同,可以立即對(duì)人的視覺注意力產(chǎn)生影響。
嘗試在你下次設(shè)計(jì)感覺有點(diǎn)平淡的時(shí)候,使用圓形邊緣的按鈕,或者將照片放在圓形框架中,而不是矩形的,又或者選擇垂直的照片或使用一個(gè)稍微打破頁面平衡的展示位置來放置內(nèi)容元素。
任何這些技巧在一開始的時(shí)候,可能會(huì)讓你覺得有點(diǎn)不舒服。不過不用過于擔(dān)心,繼續(xù)試驗(yàn),調(diào)整,直到你把一個(gè)傳統(tǒng)的矩形轉(zhuǎn)換成更有趣的東西。
4.添加顏色(或干脆直接不要顏色)
色彩理論是你可以使用的最重要的概念之一。通過更改色調(diào),或添加或刪除,你可以更改設(shè)計(jì)的整體“情緒”。而且,顏色可以使元素顯得更大或更小,更具張力或緩和過渡。對(duì)于使用多數(shù)調(diào)色盤里面各種顏色的竅門,就是使用對(duì)比度。
我們可以從色輪開始應(yīng)用最簡(jiǎn)單的對(duì)比度。沿輪子配對(duì)顏色產(chǎn)生各種對(duì)比組合:
· 互補(bǔ):從車輪兩側(cè)的高強(qiáng)度對(duì)比組;
· 三元組:沿著色輪以三分之一的增量間隔的顏色對(duì)比組;
· 分裂互補(bǔ):一種顏色和兩種顏色旁邊的互補(bǔ)色調(diào)。
一定還有其他顏色對(duì)比選項(xiàng)在實(shí)際的網(wǎng)站設(shè)計(jì)工作中能更好的使用,如果你已經(jīng)有了自己的一套配色方案,不要介意自己再去做一些調(diào)整或改變。
· 混合暖色,冷色和中性的顏色;
· 通過添加色彩和色調(diào)來更改基色,以便飽和度隨著顏色的不同而不同;
· 纏繞亮色和暗色; 想象它們是陰和陽,應(yīng)該怎么調(diào)節(jié);
· 添加無顏色的元素。通過黑色或白色的強(qiáng)調(diào),可以增加那些帶有很多色彩的空間重點(diǎn)重點(diǎn),并且各種顏色可以在黑色或白色中增加他們的對(duì)比度。
5.做一些出乎意料的設(shè)計(jì)
一個(gè)意想不到的形狀或細(xì)節(jié)也可以給在網(wǎng)頁設(shè)計(jì)的時(shí)候給頁面曾加適量的對(duì)比度。在設(shè)計(jì)中,一個(gè)驚喜可能不完全能夠匹配頁面中其他的元素,但你要做的,是盡量使它協(xié)調(diào)一致。
這些元素包括:
· 在其他對(duì)稱設(shè)計(jì)中的不對(duì)稱元素;
· 一個(gè)可以引導(dǎo)你了解設(shè)計(jì)信息的視覺提示,如一個(gè)帶有張力的形狀或符合視覺瀏覽模式的元素,又如上面案例的Vibrant網(wǎng)站那樣,充滿活力;
· 圖案或重復(fù)元素的變化;
· 更改元素或文本的方向和對(duì)齊方式,例如在上面案例Anima里面使用字母“I”的形式;
· 更改視覺行路徑中一個(gè)元素的位置或大小;
· 使用不同風(fēng)格的圖像,在網(wǎng)頁設(shè)計(jì)中使用圖片的同時(shí)一起使用矢量圖形和一點(diǎn)點(diǎn)的動(dòng)畫;
· 混合復(fù)雜和簡(jiǎn)單的視覺或排版風(fēng)格。
總結(jié)
改變?cè)刂g的對(duì)比度的好處在于,在網(wǎng)站建設(shè)工作中,它可以在設(shè)計(jì)項(xiàng)目中立刻產(chǎn)生影響。通過更改元素的外觀,你可以更改視覺的焦點(diǎn),并幫助用戶熟悉設(shè)計(jì)中哪些是消息最重要的部分。
缺乏對(duì)比度是一個(gè)常見的問題,但是幸運(yùn)的是它比較容易補(bǔ)救。很多時(shí)候,當(dāng)你聽到一個(gè)客戶或同事?lián)鷳n“如何使它流行”時(shí),他們真正想說的是,他們希望看到更多對(duì)比度的設(shè)計(jì)元素。現(xiàn)在,你已經(jīng)具備了應(yīng)對(duì)這個(gè)挑戰(zhàn)的建議和技巧,開始行動(dòng)吧。
當(dāng)前題目:5種方式提高網(wǎng)頁設(shè)計(jì)中的對(duì)比度
URL標(biāo)題:http://www.rwnh.cn/news/181503.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站建設(shè)、微信公眾號(hào)、ChatGPT、服務(wù)器托管、標(biāo)簽優(yōu)化、App開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容