巧妙設(shè)計(jì)—讓頁面活起來
![](http://image.woshipm.com/wp-files/img/99.jpg)
一.巧妙利用文字
網(wǎng)頁設(shè)計(jì)中,文字在整體界面中起到了主體的作用,是傳達(dá)信息的主要元素,字體的的大小、顏色、字體樣式甚至間距都會(huì)直接影響頁面的視覺傳達(dá)效果。
如下圖例:
![](https://image.woshipm.com/wp-files/2013/07/3685565cd8b7ce70371c8ed93e9205038.png)
整體頁面趨于簡(jiǎn)潔,但用文字跟圖形做了巧妙的結(jié)合,使整個(gè)頁面顯的簡(jiǎn)而不空,同時(shí)整體文字大小對(duì)比也使頁面變的更具層次感。
![](https://image.woshipm.com/wp-files/2013/07/18835feee61e21a22c678b5b327f2ce68.png)
合理的將字體打散進(jìn)行靈活藝術(shù)加工處理使其圖形化,既呈現(xiàn)了信息,又使整體看起來更加貼切設(shè)計(jì)主題,更具美感和藝術(shù)性。
![](https://image.woshipm.com/wp-files/2013/07/732ac062e5beb936bdb475688032908b8.png)
頁面信息量雖大,但由于在間距和大小對(duì)比上做了合理的處理,使整個(gè)頁面看起來滿而不亂,很容易一眼就能找到信息點(diǎn)。
二.使用幾何圖形
網(wǎng)頁一般都是由不同尺寸的欄目快和表格等組成,基本都是非常方正的表現(xiàn)方式,適當(dāng)?shù)倪\(yùn)用一些幾何圖形加入其中,比如三角形,菱形或者圓形,會(huì)使整個(gè)畫面更加的生動(dòng)活潑和起到打破常規(guī)的作用。
如下圖例:
![](https://image.woshipm.com/wp-files/2013/07/167e7d48eddbbc67d3ebd4bc270105b38.png)
提取了LOGO色,利用不同的幾何圖形組成固定的背景圖案,使整體頁面更加的形象化。
![](https://image.woshipm.com/wp-files/2013/07/2638facd533cdf8f499eec15ce112b538.png)
LOGO采用幾何圖形的表現(xiàn)方式,導(dǎo)航則巧妙的使用了輪盤的表現(xiàn)形式,使原本信息量不大且方正的頁面看起來活潑和飽滿。
![](https://image.woshipm.com/wp-files/2013/07/6bebee2822a274cdaa1aa8cbc039ee338.png)
利用幾何外形直接作為欄目快,在hover的狀態(tài)下直接呈現(xiàn)內(nèi)容,使簡(jiǎn)單的畫面豐富起來。
三.合理的留白
古人曾曰:“虛實(shí)相生,無畫出皆成妙境?!闭f的就是場(chǎng)景中一實(shí)一虛留白的妙處。巧妙的留白可以讓畫面的視覺效果更加的通透,流暢和干凈。避免元素的堆積造成的畫面擁擠,辨識(shí)度低。當(dāng)然留白并不是說頁面中的白色區(qū)域,而是沒有其他元素干擾的視覺區(qū)域。
如下圖例:
![](https://image.woshipm.com/wp-files/2013/07/20b920b7efb05b099f308814529d88da8.png)
以人物為中心,大面積四周留白,突出中心內(nèi)容區(qū)域,雖信息量不大,但簡(jiǎn)單明了,直觀的表達(dá)的網(wǎng)站的內(nèi)容主旨。
![](https://image.woshipm.com/wp-files/2013/07/d4f8b28810610c0bb5cc1758687bb4b68.png)
原本信息量很大的電子產(chǎn)品頁面,通過精簡(jiǎn)內(nèi)容和留白設(shè)計(jì),內(nèi)容不多,但突出主要功能點(diǎn),使產(chǎn)品看起來更加的簡(jiǎn)潔和品質(zhì)感十足。
![](https://image.woshipm.com/wp-files/2013/07/ee587668669d3bc1bbe4ce8b1aa1334d8.png)
圖形化為中心的個(gè)人網(wǎng)站,由于信息不多,大膽的采用了大面積留白設(shè)計(jì),巧妙之處在于在留白的基礎(chǔ)上以圖形作為網(wǎng)站的主要特色和主旨,通透活潑而不失嚴(yán)謹(jǐn)。
四.加入點(diǎn)綴色
點(diǎn)綴顧名思義,就是用小而精湛的手法在原有事物上加以襯托或裝飾,使其更加的美好和迷人。同樣,合理的利用點(diǎn)綴色也能在頁面設(shè)計(jì)中起到畫龍點(diǎn)睛的作用。
如下圖例:
![](https://image.woshipm.com/wp-files/2013/07/80f01bd2d2e355f10fd6065067cdd8ee8.png)
整體暗色調(diào)的設(shè)計(jì),加入紫色的點(diǎn)綴,遍布各類主要元素,突出了信息,還使得原本沉悶的頁面神秘和活潑起來。
![](https://image.woshipm.com/wp-files/2013/07/6cd52f35e040db3acf4a6c755acd58be8.png)
樸實(shí)素凈的頁面,利用黃藍(lán)的背景和元素點(diǎn)綴,豐富了頁面內(nèi)容,增加頁面活力。
![](https://image.woshipm.com/wp-files/2013/07/f4b73a2f20f381f503b1031057e7edc18.png)
大面積采用點(diǎn)綴色作為欄目背景色,使本來方方正正的頁面變的有亮點(diǎn),同時(shí)也突出襯托了欄目?jī)?nèi)容。
以上就是本次要講的四個(gè)點(diǎn),當(dāng)然讓頁面活起來的方式肯定不止四種,像插畫元素,動(dòng)效等都可以為頁面增彩,這就需要大家在日后的學(xué)習(xí)中多多總結(jié)和積累了。
轉(zhuǎn)載自”百度MUX”
- 目前還沒評(píng)論,等你發(fā)揮!