網(wǎng)頁設(shè)計中“點、線、面”的視覺構(gòu)成

1、網(wǎng)頁設(shè)計中“點、線、面的視覺構(gòu)成此主題相關(guān)圖片如下:wasabiit wai nc rediMef; Rd pr詢 *華 g rn»| I i r 'nr r.>a :嚴 m rn :-T； d才 h-召dl f T1 Fpdtb>!=- Atf C jngtihtdl ac h t電器 曲芒 qMys Ircm gijOC； abDkilelv gd ad . Hr*fe me wmna be a hacks* when t grow up線的視覺構(gòu)成點的延伸形成線。線在頁面中的作用在于表示方向、位置、長短、寬度、形狀、質(zhì)量和情緒。線是分割頁面的主要元素之一，是

2、決定頁面現(xiàn)象的根本要素。總的來說，線分為直線和曲線兩種。這是線的總體形狀。同時線還具有本體形狀，兩 端的形狀。線的總體形狀有垂直、水平、傾斜、幾何曲線，自由線這幾種可能。線是具有情感的。比方水平線給人開闊，安寧，平靜的感覺；斜線具有動力，不安， 速度和現(xiàn)代意識；垂直線具有莊嚴，挺拔，力量，向上的感覺；曲線給人柔軟流暢的女性 特征；自由曲線是最好的情感抒發(fā)手段。線的放射，粗細，漸變可以表達三維空間的感覺。將不同的線運用到頁面設(shè)計中，會獲得不同的效果。知道什么時候應(yīng)該運用什么樣的 線條，可以充分的表達你所要表達的東西?？傊?，線條是網(wǎng)頁設(shè)計師必須熟練運用的最得力的表現(xiàn)工具。我們應(yīng)該對他有一定的 了解

3、。下面我們用一些精彩實例來做具體的分析說明。在這個頁面中，水平線的重復排列形成一種強烈的形式感和視覺沖擊力，能夠在第一眼就 產(chǎn)生興趣，到達了吸引訪問者注意力的目的。自由曲線的運用，打破了水平線組成的莊嚴和單調(diào)，給網(wǎng)頁增加了豐富、流暢、活潑 的氣氛。水平線和自由曲線的組合運用，形成新穎的形式和不同情感的比照，從而將視覺中心 有力的襯托岀來。值得提岀的是，頁面中點按鈕的運用，使頁面的形象更加活潑，飽滿。此主題相關(guān)圖片如下:線還具有兩端形狀。線的兩端形狀可以任意形的，它決定了線的本體形狀。在這個頁面中，設(shè)計師運用了具有書法味道的線條，粗糙的邊緣形成特殊的肌理，表 現(xiàn)了強烈的個性特征和藝術(shù)效果。邊緣圓

4、滑的曲線條字母在粗糙背景的襯托下，顯得很特殊并引人注目。在這里， 字母也可以看做是構(gòu)成頁面的線條的一種。底紋采用了不規(guī)那么，方向不一的虛線條，在豐富肌理的同時，和粗線、曲線字母 形成比照，產(chǎn)生了縱深空間的感覺。曲線字母的大小比照也可以豐富空間層次。近實遠虛的繪畫原理，在這里得到了最充分地表達此主題相關(guān)圖片如下：將曲線字母隨意的重疊，變形，占踞了頁面左上角的很的一局部空間。配合夢幻般的 背景，表達了設(shè)計師虛無迷茫，雜亂無章的思緒。自由曲線是表現(xiàn)情感的最正確造型手段。此主題相關(guān)圖片如下:線條除了表達情感外，還能夠利用粗細、虛實例二談過，漸變，放射產(chǎn)生深度空間和 廣度空間。上面的頁面中，圍繞同心的放

5、射圓，在粗細和虛實上形成深度空間。設(shè)計師巧妙的將 3D造型的LOGO放在圓心上，非常引人注目。頁面左邊，長短不一的線段在視覺中形成虛實的變化，強調(diào)了頁面空間的構(gòu)成。此主題相關(guān)圖片如下:Wn/TMCMTIPH.FwrrwL (hti4|<nhwxi««dd “eU tI11 *t-> *. nd jllr 5. v i：J n-=A E *或=口已汨中 & Fd t&r 古咁 * «*lr 耳護< KA|jf pvtIj【網(wǎng)頁設(shè)計版】版主WindStudio.Net (Forum)2003-5-120:30:06第3樓zhoufei

6、988頭銜：飛俠等級：版主威望：1積分：80金錢：298文章：4341經(jīng)驗：4847注冊：2002-7-19離心放射的線條，具有力量和挺拔的感覺。 類似于太陽的光輝，使版面的視線更加開闊。 他同時具有吸引瀏覽者視線的作用，和同心放射有異曲同工之妙。此主題相關(guān)圖片如下：INTERACTIVE El f I I G M FRtl NT DI i IG N BR AMD CON1U LT IMGR-H yFTf JHIlFA4iWi& MMHlIdi ilidUf IMTFHWHHti iftiMJVHi Wli&bdfl MMVTlAltF線條還具有分割版面的作用。在上頁中，水平線

7、將頁面分割成上下兩局部。在頁面上部，曲線的勾勒配合色彩漸變，創(chuàng)造岀不同的形體產(chǎn)品，并通過右上角 的線產(chǎn)品輪廓聯(lián)系起來，并將視線引導到的LOGO上面。在頁面下部，線條分割造成大小方向不一的，帶有圓角的形，作為的功能按鈕區(qū)。通 過柔軟并稍微向右上傾斜的波浪線連成一個整體。同樣將視線引導到LOGO附近。此主題相關(guān)圖片如下：B Q TThe world tarflEnn&Ed HID eju寫 CftEtlFl! churts' 罰e us?t»MtsrWelcome. The searchbcts 跡電your cgmmrtd.Rollover i bol to tee I

8、ts seirehprofrarnme or customize »Qfytmown Go searchbots fo在這個頁面中，優(yōu)美的曲線將頁面清晰的分割為功能和容兩個區(qū)域。同時，富有變化的，柔軟流暢的曲線，配合時尚的色彩，將這個女性用品淋漓盡致的 表達岀來。此主題相關(guān)圖片如下:<9I Q 慚 daiwi *戟 's Pvn- for lt EirH嗣卩 Girl |g hwi Qf In wiprir 羽ti 4>利Ag-試OflEinatiHiq slfJmts. prntGQih.孑兇 mottels, a'e fiviAy nwg for ih

9、?何utlF剛忙 ipjlod phijlo t-heot AJI IMS 魚帥 5 咤 Ibv Ih* i de il pteppio-為七皿 Mf in t bjtlojnicwii 破 tu 杭 a Mlp« 補 lofitl d? mod 劃(X-Gourtt : h。fTiir&ib-i FM pfrfncl inUnbU植“" A no! to-亡 i咋卩乩皿知屆Eri fcdrfii Firalif九inAywflh 2 nrM 可口Bar Rd 出的口疋 pl陽越袖 fh*n On bottorn 叢 p4>r of «rqm.f.n

10、« twifd p«rtts.by Mrii. rrarnsceol erf wnlage Cbafirf As eh« beads turf in h?OeoRs and M s>iw sUng-back? Tw alm-Dfil 奮出 Mdjr who hnctei. riaievd of Nilj w*W dul Ihp 伽 lk*rn：h She fUgt "帕圖庭比 w*h 卜 p-ited Mopgin Bterrftu 最 b 岬 iMxw tlMPT*!晌f SCll 4rM)f pttd E F wht十 Thf Fertfl H

11、VIt ThlfM nAjr?.1ly WtrJe Mbe&n i SKk 匕昭卑卡 hofl spei 岳 isle 5Cte wwn- it "*-as knnMffi 報 ThaWbsi Side Tennis Csnlflu d d sJ4l(«lai« if 工 cun 創(chuàng)妙f 刖 h prappie nc-ca Md 科mb幟 of 恂i$ eifl 也(¥ WWtfe feifttr plica 俺匍d toEjrn "hm FnMtl tnfirtMnt|i««d pita Hi fihgen? TM

12、i*¥ aiftMlf c*iimi an U«t rQu0¥ *im vht $fvps out <rf thf cH 血* 曲曹丫 imn htr wiy is v4w uppmacNn div ceuidifl Mp Wl 4dd a reo-cla&EicaJ hnst io hei Irak Th ar* amMfcjl M Ateuis Elrttarf c*na?(J Lucte b-sneE (Luc4e was 1*0時mWiul df IKb 隨-sfrtT 占“)Wsi flwyfirt*, tret 比 giE Ih4lh色

13、r&id1蟲3遲 Atar m«ntotfhop j初1few F；nJ wlirt yev3W«ff7tftS *33(5朋OUTVUtfVKClCjvWkPjCioiii這是上面的系列站點，在這里，向上，挺拔的直線分割了整個頁面。直線和中灰色彩的運用，突岀了的男性定位。此主題相關(guān)圖片如下:三強Free wafstpack with every Crypto purchase? . jy! while topp(i« lash也3妙腫W【網(wǎng)頁設(shè)計版】版主WindStudio.Net (Forum)zhoufei9882003-5-1 20:32:03頭銜

14、:等級:威望:積分:金錢:文章:1經(jīng)驗:7注冊:2-7-19飛俠版主180298434484200面的視覺構(gòu)成線的推移形成面。面是無數(shù)點和線的組合。面具有一定的面積和質(zhì)量，占據(jù)空間的位置更多，因而相比點和線來說視覺沖擊力更大更強烈。面的形狀可以大概的分為以下幾種：幾何型的面：方，圓，三角，多邊型的面在頁面中經(jīng)常出現(xiàn)。而一段文字也可以看做是一個方形的面；有機切面：可以用弧形相交或者相切得到；不規(guī)那么形的面和意外因素形成的隨意形面。面具有自己鮮明的個性和情感特征，在網(wǎng)頁的版面設(shè)計上，不同形狀的面之間的相互關(guān)系和整體的和諧需要我們?nèi)ナ炀毎盐??？梢赃@么說，只有合理的安排好面的關(guān)系，才能設(shè)計出充滿美感，

15、藝術(shù)加實用的網(wǎng)頁作品。下面我們舉幾個實例來具體說明：方形的面具有沉著，穩(wěn)重，厚實，堅強的男性特征。IBM的使用了大量方形的面，充分表達了這個國際公司深厚的背景和強大實力。在方形面的應(yīng)用上，大小有明顯的區(qū)別，重點突岀。位置整齊但也有微小的變化，在嚴肅中透露輕松。在視覺中心的位置，放置頁面最大面積的深灰色的方形，配合線條、文字和色彩，以及頁面上唯一的，亮麗的自由面女性 頭部將重點信息完整強烈的表達岀來。這個頁面可以說是商業(yè)站點中的典之作。此主題相關(guān)圖片如下:ftrrz* Hcwn&Twime cflice bm制ma* L«|« buunni GhehimI"

16、口峠iFam BkisvaiiPM硼 +4 時 Sil l&L< *lrwestErs *J«urnoliBt3wWw frm 4hw md hyv ufah 3nMi DEmHRI M ! i. U>>1 低峠ll日列A OfiwiiilAArlhHuomI1 FTUdlKliALizmMdbnQJndiMbviWVHitfMful IBW.CM cwriM Ito SCltihCtf tiMSmttififl pr«HG«*W(b-Sphuni Gflrrfirffnfl Mt Warth 12-15 rfi Lit W時弘 Ifih

17、4 HgfYteti icrews «n 4tbb*t tMli fiMi IBM.ccilegt icup Id *t|ach ZgiU*l:fip*a4H qrffvrv33 fiwuct同樣是方形面運用的典之作。在這個頁面，面的大小和色彩比照更加強烈。頁面中部的幾個彩色塊也可以看做是點，在豐富了頁面的色彩，起了點睛的作用此主題相關(guān)圖片如下:在這個頁面中，有機的接近流線形的面蘋果電腦占據(jù)了頁面的大局部位置，造成強烈的視覺沖擊。在這個頁面中，有機的接近流線形的面蘋果電腦占據(jù)了頁面的大局部位置，造成強烈的視覺沖擊。大方又帶有動帶圓狐的稍微向右上方傾斜的有機三角形，充滿了時尚和流行的味

18、道，在由多個透明按鈕組成的水平的面上, 感，輕盈又不失穩(wěn)重 此主題相關(guān)圖片如下:R<| Stan |ITmMS JQvIdOlme5<ffpdrt| Mu05x 】»<r(f h?小Hjt iwirr和禹Ihtar聞 md:冉t0rvfffl<5nwfi屮tn t.,vItKft. CitjfUl, Gw申砌它*» 44 N .K. . I 亠一 d4 a. W KJ ,The new iMacnieeasywayttinp.mixand 'Mm vour own music CDst make movKsand suifOTiine9卄Th

19、t hiv1 >bi d.hLwih jpi4litgint UMHi豔Ftg CORWW»(h lhme$k 鼻 CD RW drke Foi honing yur?trwn rnmic 匸吒 ifJgvie 2= d Hrnin Kdldnnflbrlumrjvijf *! rlf r nvfirai Bin ! 14 11 rt /I£ 11 1if hn'圓形的面和自由形的面組成了一個極不穩(wěn)定的倒三角構(gòu)圖。加上網(wǎng)頁中動態(tài)的高速向外沖的卡通飛車高手，制造了一個緊的環(huán)境,讓觀眾在擔憂之后，自然記住了這個特殊的視覺效果。倒三角形可以給人們活潑，新穎的感覺。倒三角面的不穩(wěn)定性，可以制造危險的氣氛。此主題相關(guān)圖片如下:Volkiwagcn圓形的面給人以充實、圓滿、活潑的感覺，比擬適合表現(xiàn)兒童或者女性特征。 這個頁面充滿了天真和童趣，緊之余，我們都希望能夠去這放松放松。 同時這個頁面還采用了很多的動態(tài)元素，符合兒童好動的心理。此主題相關(guān)圖片如下:【網(wǎng)頁設(shè)計版】版主WindStudi