• 客服
    咨詢
  • 公告3
  • 關(guān)注

    關(guān)于時(shí)代 更多優(yōu)惠活動(dòng)等您來拿!
    寶雞網(wǎng)絡(luò)公司微信 掃一掃關(guān)注——微信公眾號(hào) 時(shí)代手機(jī)瀏覽 掃一掃立即手機(jī)瀏覽
  • 關(guān)閉
  • 頂部
  • 網(wǎng)頁設(shè)計(jì)中的“點(diǎn)、線、面

    時(shí)間:2014-11-15 21:50 來源:未知
      怎樣的網(wǎng)頁設(shè)計(jì)才稱得上是優(yōu)秀?
      想必很多人都和我有同樣的疑問。個(gè)人認(rèn)為所謂優(yōu)秀的網(wǎng)頁設(shè)計(jì)就是能以合理的功能布局、賞心悅目的顏色(圖片)搭配傳遞出設(shè)計(jì)想法的網(wǎng)頁設(shè)計(jì)。這其中包含了排版布局、色彩搭配、素材的選用等等諸多方面……當(dāng)我們重新審視自己與別人作品之間的不同時(shí)往往會(huì)發(fā)現(xiàn)同樣的顏色(圖片、布局)會(huì)有不同的效果。這是為什么?顏色區(qū)域的面積大小?圖片的使用形狀?其實(shí)這些就是我今天要和諸位探討的內(nèi)容——網(wǎng)頁設(shè)計(jì)中的“點(diǎn)、線、面”——平面構(gòu)成在網(wǎng)頁設(shè)計(jì)中的運(yùn)用。
      點(diǎn)、線、面?平面構(gòu)成?網(wǎng)頁設(shè)計(jì)?
      我們首先要明確:一個(gè)網(wǎng)頁作品的基礎(chǔ)并不是那些不理想的素材,也不是那些斑斕的顏色,而是基礎(chǔ)的幾何圖形。
      幾何圖形其實(shí)就是“面”,“面”的基礎(chǔ)是“線”,“線”的基礎(chǔ)是“點(diǎn)”。
      那么“點(diǎn)、線、面”是如何參與到我們的設(shè)計(jì)之中的呢。我們來看下面的示例。
      網(wǎng)頁設(shè)計(jì) 網(wǎng)站設(shè)計(jì)教程 網(wǎng)站設(shè)計(jì)
      在上圖中,設(shè)計(jì)師把標(biāo)題與人物垂直排列的形式使之形成一條“線”,下方的導(dǎo)航與logo水平排列也組成了一條“線”,兩者形成一個(gè)倒“T”字形。“世界觀”與“游戲陣營”的布局設(shè)計(jì)正好形成了兩個(gè)點(diǎn)。三者的組合是一個(gè)完美的三角形狀,而在畫面的構(gòu)圖中三角構(gòu)圖是最穩(wěn)的,配以寧靜的夜空,飄舞的螢火蟲,具有視覺沖擊力的月亮與視角,恰如其分的傳遞出安靜唯美的信息。
      從上圖中不難看出“點(diǎn)、線、面”在設(shè)計(jì)行為中的表現(xiàn)形式已經(jīng)不僅僅是傳統(tǒng)意義上的形式。一個(gè)logo、一個(gè)按鈕、一個(gè)banner都可以是它們的具象表現(xiàn)。這需要我們?cè)谠O(shè)計(jì)之初把具象的素材抽象化——進(jìn)行解構(gòu)的過程——用最基礎(chǔ)的構(gòu)成元素來按形式美法則(形式美法則包含對(duì)稱、平衡、對(duì)比、和諧、調(diào)和、節(jié)奏/韻律、統(tǒng)一,七大規(guī)律)進(jìn)行布局。在獲得理想的布局形式后再把抽象的元素具象化——進(jìn)行重構(gòu)的過程——此時(shí)要以設(shè)計(jì)的手段來讓元素變得更精致更富視覺沖擊力。
      網(wǎng)頁設(shè)計(jì) 網(wǎng)站設(shè)計(jì)教程 網(wǎng)站設(shè)計(jì)
      第一部分:關(guān)于“點(diǎn)”的認(rèn)知
      網(wǎng)頁設(shè)計(jì) 網(wǎng)站設(shè)計(jì)教程 網(wǎng)站設(shè)計(jì)
      在平面構(gòu)成中,點(diǎn)作為最基礎(chǔ)的構(gòu)成元素存在。點(diǎn)的構(gòu)成形式既有不規(guī)則的自由排列,也有按一定規(guī)律的秩序排列,無論采取怎樣的排列方式都需按照形式美法則來進(jìn)行。
      在實(shí)際的網(wǎng)頁設(shè)計(jì)中,點(diǎn)是相對(duì)而言的,頁面中任何相對(duì)小面積的元素都可以視作是一個(gè)點(diǎn)。這些元素既可以單獨(dú)存在于頁面之中,也可組合成線或者面。
      它們的存在不僅僅讓我們的頁面布局顯得合理舒適,更會(huì)使得頁面靈動(dòng)具有沖擊力。
      網(wǎng)頁設(shè)計(jì) 網(wǎng)站設(shè)計(jì)教程 網(wǎng)站設(shè)計(jì)
      以上例舉出的頁面都是內(nèi)容需求入口較多,設(shè)計(jì)師采用點(diǎn)陣式的排列方式予以重構(gòu)。即滿足了頁面功能的需求同時(shí)提升了頁面的趣味性與沖擊力。
      頁面設(shè)計(jì)過程中點(diǎn)是不拘泥于形式的,但什么樣的點(diǎn)才是合理的?怎樣的排列才是有秩序的?想得到問題的答案還是用具體的案例來解釋給諸位吧。
      對(duì)稱排列(形式美法則之對(duì)稱)
      對(duì)稱:形體用對(duì)折的方法,基本上可以重疊的圖形稱為對(duì)稱。它們是等形等量的配置關(guān)系,最容易得到統(tǒng)一,是具有良好的穩(wěn)定感的最基本形式。
      網(wǎng)頁設(shè)計(jì) 網(wǎng)站設(shè)計(jì)教程 網(wǎng)站設(shè)計(jì)
      在翻看提供過來的素材后,設(shè)計(jì)師結(jié)合此次專題所要傳遞的信息,決定為了體現(xiàn)龍頭令牌的歷史感與神秘感,采用洞穴式場景,但具象洞穴形象不利于主體及特效的表現(xiàn),所想能否在一面石壁上來體現(xiàn)我們想要的內(nèi)容與效果。有了設(shè)計(jì)形式與整體布局,剩下的工作就是把抽象的幾何圖形具象話的過程了——開始了重構(gòu)之旅。
      網(wǎng)頁設(shè)計(jì) 網(wǎng)站設(shè)計(jì)教程 網(wǎng)站設(shè)計(jì)
      在這里不再贅述。
      網(wǎng)頁設(shè)計(jì) 網(wǎng)站設(shè)計(jì)教程 網(wǎng)站設(shè)計(jì)
      設(shè)計(jì)師的完成稿上完全體現(xiàn)了設(shè)計(jì)之初對(duì)布局的想法。