建站：網(wǎng)頁(yè)設(shè)計(jì)制作如何用好點(diǎn)線面

設(shè)計(jì)的過(guò)程，或者形式的探討，始終繞不開(kāi)的就是對(duì)于點(diǎn)線面的研究，看下平面構(gòu)成的定義：視覺(jué)元素在二次元的平面上，按照美的視覺(jué)效果，力學(xué)的原理，進(jìn)行編排和組合，它是以理性和邏輯推理來(lái)創(chuàng)造形象、研究形象與形象之間的排列的方法，是理性與感性相結(jié)合的產(chǎn)物。任何在設(shè)計(jì)中呈現(xiàn)的元素，我們都可以歸納到點(diǎn)線面的范疇，然后對(duì)三者的反復(fù)組合排列，形成設(shè)計(jì)語(yǔ)言，形式，美感。核心：元素與元素之間的排列關(guān)系，進(jìn)而所有元素在一起所體現(xiàn)的構(gòu)成形式。
一、點(diǎn)
    體積小、分散、遠(yuǎn)的、運(yùn)動(dòng)；大空間對(duì)比下小的、密集的。
1. 點(diǎn)的變化

      

      點(diǎn)在畫(huà)面中存在，通過(guò)大小，虛實(shí)，濃淡，多少的關(guān)系變化，都會(huì)影響視覺(jué)感受的強(qiáng)弱。這些變化可以形成線也可以形成面，或者依舊是點(diǎn)的變化。

      

      原點(diǎn)的大與小，虛與實(shí)，濃與淡。相比紅色，黃色是淡；同為紅色，漸變?yōu)樘摗?/p>2. 小結(jié)
    有對(duì)比就有點(diǎn)；點(diǎn)不是單獨(dú)存在的；點(diǎn)用來(lái)豐富畫(huà)面和層次。
二、線
    線具有位置。它是點(diǎn)的移動(dòng)軌跡，是面與面的交界。
1. 線的變化

       線的存在表現(xiàn)形式是微妙的，點(diǎn)的密集形成的運(yùn)動(dòng)軌跡可以視為線，不同顏色的面形成交界也可以存在線。同時(shí)線足夠短時(shí)，又可以變化為點(diǎn)，線的加粗又轉(zhuǎn)化為面。因此，點(diǎn)線面不是絕對(duì)存在的，是相對(duì)存在。

      下面重點(diǎn)闡述線的兩個(gè)重要特質(zhì)，無(wú)形的線和有形的線。
無(wú)形的線
    我認(rèn)為這點(diǎn)尤為重要，其實(shí)一幅運(yùn)營(yíng)設(shè)計(jì)作品，基本上都包括圖像和文字，而文字本身在畫(huà)面中可以理解為點(diǎn)，通過(guò)這些點(diǎn)的組合，詞組和句子就形成了線（文字的長(zhǎng)度、高度），很多時(shí)候就是這些線決定了畫(huà)面的核心。

      為什么我們經(jīng)常排版起來(lái)難看，就是因?yàn)闆](méi)有粗細(xì)、長(zhǎng)短的對(duì)比。

      字形成隱形的線；不同大小，粗細(xì)，顏色的組合，形成線的粗細(xì)變化，分割畫(huà)面，進(jìn)而形成有序的節(jié)奏。
視線

      無(wú)形的線中還有一種很重要的表現(xiàn)形式——視線。很重要，很多時(shí)候內(nèi)容設(shè)計(jì)的期望就是自然引導(dǎo)用戶去閱讀。人物的視線引導(dǎo)我們把視覺(jué)轉(zhuǎn)向文字。

有形的線

      清晰的線條讓畫(huà)面有速度感、層次感、豐富版式。

2. 線的應(yīng)用

    3. 小結(jié)
    不同的線能夠創(chuàng)造不同的感受；引導(dǎo)視覺(jué)；控制好線的使用，不要為線而線，造成畫(huà)面的組織混亂。
三、面
    幾何學(xué)中線的移動(dòng)軌跡。
    面對(duì)畫(huà)面進(jìn)行分割，得到層次感。也可以作為信息的載體，讓文字在畫(huà)面中更清晰地表現(xiàn)。
    面可以分為：幾何形的面和不規(guī)則的面。
    1. 幾何形的面

      方、圓、三角、多邊形等幾何形狀，這些面可以傳遞有序、簡(jiǎn)潔、穩(wěn)定、速度等視覺(jué)心理感受。

2. 不規(guī)則的面

      實(shí)物（人物、墨跡、水花），不規(guī)則多邊形等等，應(yīng)用方式更廣泛。其中規(guī)則面對(duì)畫(huà)面進(jìn)行分割后，剩余空間本身也形成了一種面，可以理解為一種正負(fù)形的形式。對(duì)負(fù)空間的設(shè)計(jì)，對(duì)于整體畫(huà)面的風(fēng)格和層次感的提升很關(guān)鍵，也需要更多的研究和體會(huì)。

3. 小結(jié)

    大面積，視覺(jué)的重心；整體信息的依托。
案例
    通過(guò)上面的示例介紹，我們應(yīng)該可以建立起對(duì)點(diǎn)線面的基礎(chǔ)認(rèn)識(shí)。下圖是對(duì)點(diǎn)線面在呈現(xiàn)信息內(nèi)容時(shí)，承擔(dān)的職能意義。接下來(lái)讓我們更深入地研究和分析。
      上圖的例子我們先觀察面，像之前總結(jié)的一樣：面，信息模塊的載體，構(gòu)建畫(huà)面的基礎(chǔ)。上圖的例子通過(guò)大背景的區(qū)分，顏色與圖形的交織分布，信息骨架就此建立。
      對(duì)這個(gè)設(shè)計(jì)繼續(xù)進(jìn)行分析。線，加強(qiáng)視線的引導(dǎo)，強(qiáng)化/區(qū)分模塊關(guān)系?？瓷蠄D所示：標(biāo)題作為無(wú)形的線，成為模塊區(qū)分的標(biāo)識(shí)。在縱向方向上自然引導(dǎo)視線下移。
    這個(gè)例子仔細(xì)分析后，并沒(méi)有所謂明顯的點(diǎn)元素的出現(xiàn)，再想想點(diǎn)的總結(jié)：點(diǎn)，打破節(jié)奏，增加氛圍。點(diǎn)的戲份不多也不重，隱含在每個(gè)模塊中去構(gòu)建信息。
    通過(guò)這個(gè)簡(jiǎn)單例子的分析，大家是否對(duì)之前點(diǎn)線面的總結(jié)有一定的理解呢？再?gòu)?qiáng)調(diào)一遍：
    面，信息模塊的載體，構(gòu)建畫(huà)面的基礎(chǔ)；
    線，加強(qiáng)視線的引導(dǎo)，強(qiáng)化/區(qū)分模塊關(guān)系；

      點(diǎn)，打破節(jié)奏，增加氛圍。

（本文摘編自金山辦公用戶體驗(yàn)中心）

標(biāo)題名稱：建站：網(wǎng)頁(yè)設(shè)計(jì)制作如何用好點(diǎn)線面
URL鏈接：http://www.muchs.cn/news/114764.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、品牌網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、企業(yè)建站、手機(jī)網(wǎng)站建設(shè)、小程序開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)