作者：X設(shè)計聯(lián)盟 文章來源：X 設(shè)計聯(lián)盟
3． 面的視覺構(gòu)成： 線的推移形成面。面是無數(shù)點和線的組合。面具有一定的面積和質(zhì)量，占據(jù)空間的位置更多，因而相比點和線來說視覺沖擊力更大更強烈。面的形狀可以大概的分為以下幾種：幾何型的面：方，圓，三角，多邊型的面在頁面中經(jīng)常出現(xiàn)。而一段文字也可以看做是一個方形的面； 有機切面：可以用弧形相交或者相切得到；不規(guī)則形的面和意外因素形成的隨意形面。面具有自己鮮明的個性和情感特征，在網(wǎng)頁的版面設(shè)計上，不同形狀的面之間的相互關(guān)系和整體的和諧需要我們?nèi)ナ炀毎盐�。可以這么說，只有合理的安排好面的關(guān)系，才能設(shè)計出充滿美感，藝術(shù)加實用的網(wǎng)頁作品。
例一：
http://www.ibm.com
方形的面具有沉著，穩(wěn)重，厚實，堅強的男性特征。IBM的網(wǎng)站使用了大量方形的面，充分表達了這個國際公司深厚的背景和強大實力。在方形面的應(yīng)用上，大小有明顯的區(qū)別，重點突出。位置整齊但也有微小的變化，在嚴肅中透露輕松。在視覺中心的位置，放置頁面面積的深灰色的方形，配合線條、文字和色彩，以及頁面上的，亮麗的自由面（女性頭部）將重點信息完整強烈的表達出來。這個頁面可以說是商業(yè)站點中的典范之作。
http://www.adobe.com
同樣是方形面運用的典范之作。在這個頁面，面的大小和色彩對比更加強烈。頁面中部的幾個彩色塊也可以看做是點，在豐富了頁面的色彩，起了點睛的作用。
例二：
http://www.apple.com/imac/
在這個頁面中，有機的接近流線形的面（蘋果電腦）占據(jù)了頁面的大部分位置，造成強烈的視覺沖擊。帶圓狐的稍微向右上方傾斜的有機三角形，充滿了時尚和流行的味道，在由多個透明按鈕組成的水平的面上，大方又帶有動感，輕盈又不失穩(wěn)重。
http://www.newbeetle.co.uk/
圓形的面和自由形的面組成了一個極不穩(wěn)定的倒三角構(gòu)圖。加上網(wǎng)頁中動態(tài)的高速向外沖的卡通飛車高手，制造了一個緊張的環(huán)境，讓觀眾在擔(dān)心之后，自然記住了這個特殊的視覺效果。倒三角形可以給人們活潑，新穎的感覺。倒三角面的不穩(wěn)定性，可以制造危險的氣氛。
例三：
http://www.humongous.com
圓形的面給人以充實、圓滿、活潑的感覺，比較適合表現(xiàn)兒童或者女性特征。這個頁面充滿了天真和童趣，緊張之余，我們都希望能夠去這放松放松。同時這個頁面還采用了很多的動態(tài)元素，符合兒童好動的心理。
http://www.nike.com/usa/index.html
耐克的站點大量采用了接近圓形的幾何面，加上灌藍高手的精彩定格，使整個站點充滿了跳躍和運動的感覺。在這個頁面中，自由形（喬丹）的運動方向?qū)σ暰�的引導(dǎo)起了很大作用，他將視線牽引到頁面的右上角。右上角的面所要推薦的產(chǎn)品，應(yīng)該是這個頁面的重點中的重點了。中間位置不同內(nèi)容的幾何面的運用，避免了單純采用文字的單調(diào)感。既能夠最直接地反映產(chǎn)品的信息，又在色彩和版面上為整個站點活躍了氣氛，可謂是一舉多得。
例四：
http://www.h73.com/
不規(guī)則面和幾何面在頁面中交錯出現(xiàn)。點，線，面的綜合運用，合理的布白（也是面），加上色彩的對比，形式新穎，使視線保持興奮，完美的實現(xiàn)了視覺傳達的目的。頁面中面的黑白灰的合理關(guān)系和安排，使頁面產(chǎn)生了空間層次，豐富了整體效果。
總結(jié) 自然界的萬物形態(tài)構(gòu)成都離不開點、線、面。點、線、面是視覺構(gòu)成的基本元素，是每個網(wǎng)頁設(shè)計師必須熟練掌握的設(shè)計語言。點、線、面具有不同的情感特征，我們要善于采用不同的組合去體現(xiàn)不同的情感訴求。在網(wǎng)頁的視覺構(gòu)成中，點、線、面既是最基本的造型元素，又是最重要的表現(xiàn)手段。在我們確定網(wǎng)頁主體形象的位置、動態(tài)時，點線面將是需要考慮的因素。只有合理的安排好點線面的互相關(guān)系，才能設(shè)計出具有視覺效果的頁面，充分的表達出網(wǎng)頁最終的訴求！
- TEL：131 7970 3111
-
慧網(wǎng)微信
- 掃描二維碼
- 關(guān)注邳州在線
-
手機網(wǎng)站
- 手機掃描二維碼
- 進入手機站
網(wǎng)站地圖
付款方式