剖析網(wǎng)頁設(shè)計(jì)中的幾何圓
你的設(shè)計(jì)為什么平平無奇,為什么吸引不到別人的眼球,這里先來說說什么是焦點(diǎn)(也可以稱興趣中心或者視覺中心),我認(rèn)為用焦點(diǎn)更能簡(jiǎn)單準(zhǔn)確的闡述。有人用通俗的方法來詮釋焦點(diǎn),在設(shè)計(jì)的頁面上最吸引人注意的地方,視線上集中交匯的地方,這個(gè)位置就叫焦點(diǎn),在日常生活中我們運(yùn)用照相機(jī)對(duì)準(zhǔn)人的臉部,那也是在獲取一個(gè)焦點(diǎn)。在網(wǎng)頁設(shè)計(jì)中,引導(dǎo)用戶集中在你想讓他關(guān)注的畫面上,那樣會(huì)讓你的設(shè)計(jì)有重心和亮點(diǎn)。
視覺焦點(diǎn)的處理方式
人們用視覺獲取環(huán)境中的信息,對(duì)你注意的周圍都會(huì)是模糊的,你視線集中的中心點(diǎn)是最清晰的。第一張,視覺上呈現(xiàn)這樣的狀態(tài)是,視線上沒有集中,整體模糊,是成方形的視覺框架。第二張和第三張,圖中的兩朵花在圖形中是最漂亮的亮點(diǎn),漂亮的東西會(huì)引人注意,你會(huì)注意到上一朵或則下一朵,注意任何一朵花的時(shí)候,眼球集中點(diǎn)會(huì)以圓的形狀向外逐漸模糊,最中心點(diǎn)就是焦點(diǎn)。圓形作為設(shè)計(jì)中的元素的時(shí)候,自然更加的適應(yīng)視覺上的感知。
視覺強(qiáng)弱
美女其實(shí)可以獨(dú)立成為一個(gè)視覺焦點(diǎn),但當(dāng)我們給美女加了圓形邊框后,視覺焦點(diǎn)就轉(zhuǎn)移到圓形邊框包括到的美女上,最后將圓形填充,視覺焦點(diǎn)就轉(zhuǎn)移到填充色的圓形的美女上。
下面本人做了點(diǎn)對(duì)比圖片
圖1 整體畫面平平,人物排列沒有層次,視覺上給人感覺很散。
圖2通過添加圓形背景框,會(huì)讓你想表達(dá)的圖形首先進(jìn)入用戶眼球。
圖3不僅添加圓形背景框,再區(qū)分人物大小,主次分明,焦點(diǎn)突出,畫面活躍立體。
幾何的對(duì)比
上圖中我們可以看到,方形過度到圓形的變化,圓形是由極其細(xì)小的邊角組成,在變化當(dāng)中圖形變得越來越有樂趣,比較下來圓形在幾何圖形中具有平滑流暢的邊緣,圓形更讓人感覺輕松,愉悅。設(shè)計(jì)需要增加樂趣的時(shí)候,我們可以多運(yùn)用流暢線條的圖形來讓頁面活躍起來。
實(shí)例效果進(jìn)行比較
在這個(gè)頁面上圓形挑起了大梁,支撐整個(gè)頁面,人物笑臉圖片組合的圓形包圍著瓶子,映射了這個(gè)飲料帶給我們的快樂。圓形不僅加強(qiáng)了焦點(diǎn),更加強(qiáng)了頁面的層次感,讓頁面不會(huì)單薄,無力度。
雖然同樣用加框的形式來集中物體焦點(diǎn),同圓形邊框相比整體畫面呆板,僵硬,缺失了活躍的感覺。
富有節(jié)奏的設(shè)計(jì),連貫的圓形元素組合,網(wǎng)站的主體富有節(jié)奏的形狀,營造了網(wǎng)站活潑的氣氛。方形的組合結(jié)構(gòu)使得網(wǎng)站變得嚴(yán)謹(jǐn)許多。
圓形對(duì)價(jià)格的標(biāo)注,讓用戶對(duì)這誘惑的價(jià)格更加的感興趣,很好的營造了商品的氣氛。
圓形元素和其它幾何圖形比較,具有圓滑的特點(diǎn),讓人感覺輕松,愉悅,合理的運(yùn)用會(huì)提高頁面的層次,讓焦點(diǎn)更加突出,增強(qiáng)視覺感的同時(shí)也能夠營造活躍的氛圍。我們都在不斷嘗試如何讓頁面變的美觀而生動(dòng),創(chuàng)造富有活力的頁面,讓網(wǎng)站給人的視覺感受富有好感,把握好設(shè)計(jì)中的焦點(diǎn),使頁面信息有效傳達(dá)的前提下,運(yùn)用有趣的圓形來設(shè)計(jì)頁面是設(shè)計(jì)中很有效的方法。
本文地址:http://pkvc.cn/tutorial/di1780.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁背景效果制作教程
- 龐門正道:好好玩耍的點(diǎn)線面(上)
- 網(wǎng)頁設(shè)計(jì)中的常見頁面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫:40款為網(wǎng)頁設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺設(shè)計(jì)分享—專題頁面設(shè)計(jì)篇
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問題
- 網(wǎng)頁設(shè)計(jì)精粹 網(wǎng)頁中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁UI - 原子設(shè)計(jì)理論(上)
- 如何通過設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏