逆襲高大上!網(wǎng)頁設(shè)計(jì)中圓形元素的應(yīng)用欣賞
圓形元素在網(wǎng)頁設(shè)計(jì)中的使用頻率越來越高,效果卻并不都令人滿意。如何逆襲高大上,AnyForWeb找到一些網(wǎng)頁設(shè)計(jì)中圓形元素的應(yīng)用,供大家從中汲取靈感。
1.眾所周知,圓形元素如果使用不當(dāng)會(huì)變得和突兀,甚至影響到整個(gè)頁面的視覺舒適度,尤其是在簡單的環(huán)境下,一個(gè)面積較大的圓形元素會(huì)讓頁面氛圍變得很尷尬。案例所示的正是這樣的情景,但不同的是,圓形的水印效果讓原本尷尬的氣氛完全轉(zhuǎn)變了。
2.圓形元素利用在網(wǎng)站導(dǎo)航上是相對比較少見的,而Bronco的網(wǎng)站實(shí)踐了這一想法。圓形元素是一種很搶視線的形狀,這既是優(yōu)點(diǎn)也是缺點(diǎn)。頁面中的彩色小方塊無疑會(huì)在第一時(shí)間搶占瀏覽者的眼球,而導(dǎo)航作為網(wǎng)頁首屏中很重要的一個(gè)組成部分,主要作用在于引導(dǎo)用戶,也很需要讓用戶盡早發(fā)現(xiàn),圓形元素成了不二之選。
3.這個(gè)網(wǎng)站使用了比較多的圓形元素,從logo到按鈕再到圖標(biāo),圓形設(shè)計(jì)無處不在。盡管出現(xiàn)頻率很高,但整個(gè)頁面看起來卻毫不拖沓,還增強(qiáng)了網(wǎng)頁的設(shè)計(jì)感,其中的原因離不開周圍的環(huán)境因素與圓形自身的搭配。濾鏡效果、幾何元素與圓形幽靈設(shè)計(jì)相配合,讓網(wǎng)頁呈現(xiàn)了一種文藝感。
4. 極簡頁面對于視覺重點(diǎn)的需求并不是很強(qiáng)烈,最重要的是利用圓形元素在保持頁面美觀和平衡的同時(shí)體現(xiàn)頁面重點(diǎn)。這里所說的“平衡”包含了很多細(xì)節(jié)方面,比如圓形的大小,線型的粗細(xì),色彩等等。
5.Jarad Johnson的網(wǎng)站用圓形元素把頁面的條理性變得很強(qiáng)。很有力的提升了網(wǎng)頁的可讀性和協(xié)調(diào)性。
6.Olive在紋理背景的設(shè)計(jì)上處理的很恰當(dāng)。如果是密密麻麻的圓圈一定會(huì)讓大多數(shù)人不愿意再看第二眼;如果是相間和稀疏的排列方式又會(huì)顯得和單調(diào)無趣,而Olive這種錯(cuò)落的無規(guī)則排列滿足了用戶的視覺體驗(yàn),減輕了圓形中過于平滑的那一部分。
7.這個(gè)案例很好的證明了圓形與其他形狀的與眾不同。頁面中集結(jié)了各種類型的幾何形狀圖案,而我們第一眼看到的是右上角的圓形元素,這和形狀本身以及它的顏色都有著很大的關(guān)系。
8.黑白紋理總能給我們一種經(jīng)典的時(shí)尚感,Azukisoft的網(wǎng)站正是如此。線性的紋理背景和黑色的圓形色塊互相搭配,為網(wǎng)站營造出一種別樣的神秘感,引起用戶的瀏覽興趣,吸引用戶點(diǎn)擊。
9.簡單的頁面總是令人捉摸不透。設(shè)想一下,假設(shè)頁面中沒有頂部的黑色圓形色塊,整個(gè)網(wǎng)頁是不是會(huì)看起來過于單薄,了無生趣?這個(gè)頁面的色調(diào)中性偏冷,因此,如果缺少了吸引人的圓形色塊,頁面會(huì)變得太輕。
10.直接把圓形元素堆在頁面上可能會(huì)讓人覺得有點(diǎn)偷懶,那么,像Fannabee的網(wǎng)站一樣,將圓形元素演變成我們都熟悉的物品,是不是讓畫面更有親切感呢?
只要設(shè)計(jì)師掌握一些基本的使用特點(diǎn),圓形元素就能被成功駕馭。比如網(wǎng)頁在布局上可以選擇比較整齊的網(wǎng)格布局方式;又或是讓頁面變得極簡,保持一定面積的留白等。
本文地址:http://m.pkvc.cn/tutorial/de2563.html
- 專訪:石墨文檔產(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)狀與趨勢
- 10個(gè)智能對象處理的ps技巧
- 網(wǎng)頁UI - 原子設(shè)計(jì)理論(上)
- 如何通過設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏