建站常識(shí)
網(wǎng)頁(yè)設(shè)計(jì)中“面”的視覺(jué)構(gòu)成
2005-12-28 13:58:00
線的推移形成面。面是無(wú)數(shù)點(diǎn)和線的組合。
面具有一定的面積和質(zhì)量,占據(jù)空間的位置更多,因而相比點(diǎn)和線來(lái)說(shuō)視覺(jué)沖擊力更大更強(qiáng)烈。
面的形狀可以大概的分為以下幾種:
幾何型的面:方,圓,三角,多邊型的面在頁(yè)面中經(jīng)常出現(xiàn)。而一段文字也可以看做是一個(gè)方形的面;
有機(jī)切面:可以用弧形相交或者相切得到;
不規(guī)則形的面和意外因素形成的隨意形面。
面具有自己鮮明的個(gè)性和情感特征,在網(wǎng)頁(yè)的版面設(shè)計(jì)上,不同形狀的面之間的相互關(guān)系和整體的和諧需要我們?nèi)ナ炀毎盐铡?nbsp;
可以這么說(shuō),只有合理的安排好面的關(guān)系,才能設(shè)計(jì)出充滿美感,藝術(shù)加實(shí)用的網(wǎng)頁(yè)作品。 下面我們舉幾個(gè)實(shí)例來(lái)具體說(shuō)明:
例一:
方形的面具有沉著,穩(wěn)重,厚實(shí),堅(jiān)強(qiáng)的男性特征。
IBM的網(wǎng)站使用了大量方形的面,充分表達(dá)了這個(gè)國(guó)際公司深厚的背景和強(qiáng)大實(shí)力。
在方形面的應(yīng)用上,大小有明顯的區(qū)別,重點(diǎn)突出。位置整齊但也有微小的變化,在嚴(yán)肅中透露輕松。
在視覺(jué)中心的位置,放置頁(yè)面最大面積的深灰色的方形,配合線條、文字和色彩,以及頁(yè)面上唯一的,亮麗的自由面(女性頭部)將重點(diǎn)信息完整強(qiáng)烈的表達(dá)出來(lái)。
這個(gè)頁(yè)面可以說(shuō)是商業(yè)站點(diǎn)中的典范之作。
同樣是方形面運(yùn)用的典范之作。在這個(gè)頁(yè)面,面的大小和色彩對(duì)比更加強(qiáng)烈。
頁(yè)面中部的幾個(gè)彩色塊也可以看做是點(diǎn),在豐富了頁(yè)面的色彩,起了點(diǎn)睛的作用。
例二:
在這個(gè)頁(yè)面中,有機(jī)的接近流線形的面(蘋果電腦)占據(jù)了頁(yè)面的大部分位置,造成強(qiáng)烈的視覺(jué)沖擊。
帶圓狐的稍微向右上方傾斜的有機(jī)三角形,充滿了時(shí)尚和流行的味道,在由多個(gè)透明按鈕組成的水平的面上,大方又帶有動(dòng)感,輕盈又不失穩(wěn)重。
圓形的面和自由形的面組成了一個(gè)極不穩(wěn)定的倒三角構(gòu)圖。加上網(wǎng)頁(yè)中動(dòng)態(tài)的高速向外沖的卡通飛車高手,制造了一個(gè)緊張的環(huán)境,讓觀眾在擔(dān)心之后,自然記住了這個(gè)特殊的視覺(jué)效果。
倒三角形可以給人們活潑,新穎的感覺(jué)。
倒三角面的不穩(wěn)定性,可以制造危險(xiǎn)的氣氛。
例三:
圓形的面給人以充實(shí)、圓滿、活潑的感覺(jué),比較適合表現(xiàn)兒童或者女性特征。
這個(gè)頁(yè)面充滿了天真和童趣,緊張之余,我們都希望能夠去這放松放松。
同時(shí)這個(gè)頁(yè)面還采用了很多的動(dòng)態(tài)元素,符合兒童好動(dòng)的心理。
耐克的站點(diǎn)大量采用了接近圓形的幾何面,加上灌藍(lán)高手的精彩定格,使整個(gè)站點(diǎn)充滿了跳躍和運(yùn)動(dòng)的感覺(jué)。
在這個(gè)頁(yè)面中,自由形(喬丹)的運(yùn)動(dòng)方向?qū)σ暰€的引導(dǎo)起了很大作用,他將視線牽引到頁(yè)面的右上角。右上角的面所要推薦的產(chǎn)品,應(yīng)該是這個(gè)頁(yè)面的重點(diǎn)中的重點(diǎn)了。
不規(guī)則面和幾何面在頁(yè)面中交錯(cuò)出現(xiàn)。點(diǎn),線,面的綜合運(yùn)用,合理的布白(也是面),加上色彩的對(duì)比,形式新穎,使視線保持興奮,完美的實(shí)現(xiàn)了視覺(jué)傳達(dá)的目的。
頁(yè)面中面的黑白灰的合理關(guān)系和安排,使頁(yè)面產(chǎn)生了空間層次,豐富了整體效果。
例五:
面還有正形和負(fù)形兩種表現(xiàn)。
正型可以解釋為以白襯黑。在頁(yè)面的右邊,白底上的四個(gè)人物動(dòng)態(tài)可以稱之為正型。正型在頁(yè)面中特性為一個(gè)實(shí)體,具有明確,肯定,向前的感覺(jué)。
負(fù)形可以理解為以黑襯白。在頁(yè)面的左邊圓中,女性的白色衣服和皮膚即為負(fù)形,在重色的背景的襯托下,體現(xiàn)出虛幻,輕松,深遠(yuǎn)的感覺(jué)。
總結(jié)
自然界的萬(wàn)物形態(tài)構(gòu)成都離不開(kāi)點(diǎn)、線、面。
點(diǎn)、線、面是視覺(jué)構(gòu)成的基本元素,是每個(gè)網(wǎng)頁(yè)設(shè)計(jì)師必須熟練掌握的設(shè)計(jì)語(yǔ)言。
點(diǎn)、線、面具有不同的情感特征,我們要善于采用不同的組合去體現(xiàn)不同的情感訴求。
在網(wǎng)頁(yè)的視覺(jué)構(gòu)成中,點(diǎn)、線、面既是最基本的造型元素,又是最重要的表現(xiàn)手段。
在我們確定網(wǎng)頁(yè)主體形象的位置、動(dòng)態(tài)時(shí),點(diǎn)線面將是需要最先考慮的因素。只有合理的安排好點(diǎn)線面的互相關(guān)系,才能設(shè)計(jì)出具有最佳視覺(jué)效果的頁(yè)面,充分的表達(dá)出網(wǎng)頁(yè)最終的訴求!
近期更新
- [2023-06-25 23:22:29] 優(yōu)秀網(wǎng)站設(shè)計(jì)的五大特點(diǎn)
- [2023-04-27 14:05:55] Html 5 響應(yīng)式網(wǎng)站設(shè)計(jì)制作
- [2023-04-10 11:07:30] 網(wǎng)站建設(shè)制作流程知多少
- [2022-10-14 10:11:30] 做網(wǎng)站設(shè)計(jì)應(yīng)該更看重框架搭建還是視覺(jué)觀感?
- [2022-08-09 15:57:48] 以“產(chǎn)品”思維搭建網(wǎng)站!
- [2022-08-08 09:12:57] 一家公司的網(wǎng)站應(yīng)該有哪些板塊內(nèi)容?
- [2022-08-05 09:28:06] 企業(yè)網(wǎng)站建設(shè)為什么要設(shè)置新聞板塊?
- [2022-07-04 15:58:06] 網(wǎng)站首頁(yè)設(shè)計(jì)的好看,這個(gè)網(wǎng)站就成功了一大半!
- [2022-05-20 09:34:19] 網(wǎng)站后臺(tái)管理系統(tǒng)是什么?有什么作用?
- [2022-05-17 11:29:32] 作為消費(fèi)者,應(yīng)該如何選擇一家水平高的網(wǎng)站建設(shè)公司
- [2022-05-17 11:27:01] 高端網(wǎng)站定制與模板化網(wǎng)站應(yīng)該怎么選擇?
- [2022-04-22 16:00:41] 現(xiàn)在高端的網(wǎng)站設(shè)計(jì)都有哪些新的趨勢(shì)?
延伸閱讀
- [2007-01-04 15:10:00] 網(wǎng)頁(yè)設(shè)計(jì)配色應(yīng)用實(shí)例剖析——綠色系
- [2006-08-22 07:59:00] 網(wǎng)頁(yè)設(shè)計(jì)配色基礎(chǔ):色彩三屬性與實(shí)例剖析
- [2010-08-02 22:08:00] 為什么不要“以任務(wù)為中心”來(lái)進(jìn)行設(shè)計(jì)?
- [2009-12-11 08:24:00] 產(chǎn)品設(shè)計(jì)過(guò)程中的一些體會(huì)總結(jié)
- [2016-10-13 11:21:41] 高顏值的全屏導(dǎo)航網(wǎng)頁(yè)設(shè)計(jì)賞析
- [2007-07-25 14:57:00] 網(wǎng)頁(yè)設(shè)計(jì)中的版式原理--比例
- [2006-05-09 11:23:00] 學(xué)習(xí)網(wǎng)站建設(shè)中一些容易被忽視的問(wèn)題
- [2006-11-29 09:10:00] 如何寫好“幫助中心”的內(nèi)容
- [2010-03-31 11:56:00] 設(shè)計(jì)中的色彩:紫色
- [2007-05-11 10:00:00] “交互”的三個(gè)條件
- [2005-12-29 21:18:00] 從菜鳥(niǎo)到準(zhǔn)網(wǎng)頁(yè)設(shè)計(jì)師
- [2007-09-11 10:17:00] 網(wǎng)頁(yè)設(shè)計(jì)之視覺(jué)信息傳達(dá)分析
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計(jì)解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計(jì)解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 科技企業(yè)網(wǎng)站設(shè)計(jì)解決方案 電子家電網(wǎng)站設(shè)計(jì)解決方案 食品行業(yè)網(wǎng)站設(shè)計(jì)解決方案 集團(tuán)公司網(wǎng)站設(shè)計(jì)解決方案 企事業(yè)單位網(wǎng)站設(shè)計(jì)解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 健身運(yùn)動(dòng)網(wǎng)站設(shè)計(jì)解決方案 美容與化妝品網(wǎng)站設(shè)計(jì)解決方案 建筑設(shè)計(jì)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 物流行業(yè)網(wǎng)站設(shè)計(jì)解決方案
TAGS關(guān)鍵字
網(wǎng)站改版 色彩心理學(xué) 青島網(wǎng)絡(luò)公司 插畫 力圖數(shù)字科技 網(wǎng)站設(shè)計(jì)資訊 如何做網(wǎng)站優(yōu)化 H5 力圖 網(wǎng)站動(dòng)畫 版面布局 外貿(mào)網(wǎng)站設(shè)計(jì) 青島SEO 網(wǎng)站策劃 青島網(wǎng)站建設(shè) HTML5 高端網(wǎng)站設(shè)計(jì) 青島網(wǎng)站SEO 網(wǎng)站視覺(jué) 青島輪胎網(wǎng)站設(shè)計(jì) 手機(jī)網(wǎng)站建設(shè) 網(wǎng)站推廣 網(wǎng)站交互設(shè)計(jì) 青島好的網(wǎng)站優(yōu)化公司 官網(wǎng)網(wǎng)站建設(shè) css 青島輪胎網(wǎng)站設(shè)計(jì)公司 微官網(wǎng)帶來(lái)的好處 青島高端網(wǎng)站設(shè)計(jì)公司哪家好 企業(yè)網(wǎng)站設(shè)計(jì)