• 相關文章
  • 文字效果
  • 調色教學
  • 合成教學
  • 去背教學
  • 照片後製
  • 電腦繪圖
  • 設計教學
  • 動畫教學
  • 簽名製作
  • 其他教學
  • Illustrator
  • CorelDraw教學
  • 攝影教學
  • 3DMAX教學
  • AUTOCAD教學
  • MAYA教學
  • FireWorks教學
  • flash教學
  • 繪畫教學
  • PS作品欣賞
  • 包裝設計範例
  • LOGO設計範例
  • 封面設計範例
  • 名片設計範例
  • CG繪圖設計
  • 海報設計
  • 網頁設計範例
  • PS筆刷下載
  • PS濾鏡下載
  • PS動作下載
  • PS背景下載
  • PS樣式下載




  • 【 設計理論】詳細解析設計作品中點線面的應用




    詳細解析設計作品中點線面的應用

    這一次的教學是屬於設計理論領域中的設計理論的相關教學。

    文章出處是來自優設的設計理論類文章,寫教學的作者是情非得已,感謝情非得已提供設計理論的實作教學。

    教學大綱:

    上一篇文章中,我們重新回顧了點、線、面三個設計構成要素,接下來我要帶領大家來看看它們是如何利用它們的關係交織在一幅幅畫面中,形成一個賦予生命的脈絡的,設計師手中的畫筆就是描繪美好的開始。


    設計理論教學開始

    上一篇文章中,我們重新回顧了點、線、面三個設計構成要素,接下來我要帶領大家來看看它們是如何利用它們的關係交織在一幅幅畫面中,形成一個賦予生命的脈絡的,設計師手中的畫筆就是描繪美好的開始。

    說到它們的關係,不得不提的是版式設計。

    四.版式設計中的點線面構成

    1.通過組合簡化版面

    點線面的構成關係,即是版式設計,三個要素不同的組合方式,可以產生不同的版面設計效果,重要的是掌握信息內容或者需求的重點是什麼,將它們用平面構成的方法,清晰的表現出來。

    優秀的版式設計是通過元素的組合簡化版面的內容,建立鮮明的秩序感覺。例如雜誌的設計

    詳細解析設計作品中點線面的應用

    某雜誌內頁

    詳細解析設計作品中點線面的應用

    編排整齊

    這個雜誌內頁的設計中,通過將信息文字的組合,將非常的多的文字大致分成了10個元素,黑色表示元素,藍色區域即使留白,我們可以叫它虛空間

    相同的元素緊密且整齊的排列在一起。形成了秩序美,虛實空間的結合也是非常和諧的。一個畫面中的元素種類越少,傳達的信息更準確。

    2.利用四個邊元素的延續擴大版面

    不要讓虛空間把你的版面框住,跳出框,會讓人有更多想像的空間。

    用好頁面的四邊,對於版面的設計是很重要的,如果頁面的元素任意一個接近邊緣,虛空間就會被放大,如上面的例子,雜誌的封面邊緣只露出了字母的一個角,但卻讓整個畫面被放大,視覺的擴大讓頁面顯得很大氣。

    也可以利用元素的延續性,讓版面有一定的關聯,例如上圖中的左側圖片採用延伸到右頁的方式,讓兩個頁面感覺上是一個整體,打破了四方的邊框。

    詳細解析設計作品中點線面的應用

    詳細解析設計作品中點線面的應用

    詳細解析設計作品中點線面的應用

    3.四個焦點法則

    當一個矩形或者正方形被水平和垂直的分成三份后,結構中的四個焦點是最吸引人的四個點,設計師可以實用位置和距離,來決定哪些點在層級上是最重要的。

    下圖是日本的食品網站設計,其中豆子形狀的信息框是整個畫面中最關鍵的內容,所以將其放在了頁面的右上角的交接點。

    詳細解析設計作品中點線面的應用

    下圖的網頁設計,左下角的交點上是畫面中最大的視覺元素,所以非常的引人注目,即便看不懂韓文也能一眼便能看出來是一個物流公司的網站。

    詳細解析設計作品中點線面的應用

    4.利用交錯和重疊打破平淡

    元素的重複構成使設計產生安定、整齊、規律的統一。但重複構成的視覺感受有時容易顯的呆板、平淡、缺乏趣味性的變化,故此,我們在版面中可安排一些交錯與重疊,打破版面呆板、平淡的格局。

    例如下面的海報設計中,利用字體形狀顏色的重疊產生豐富的色彩,第二張海報用交錯的照片拼成了一個完整的圖形,使得畫面非常有層次感,不失為打破格局的好方法。

    詳細解析設計作品中點線面的應用

    5.對比越強烈視覺衝擊力越強

    對比是版面設計中常用的手法,無論字與字,形與形,無處不在,或者多種關係交融在一起。有主次廣西,大小,長短,疏密,動靜,黑白,剛柔,虛實等方式,彼此參透,相互並存。

    如下圖,幾種比較重要的對比關係交織在一起,背景黑色和白色的文字對比,黃色的圓形的大小對比,文字長短疏密的對比,折線和模特臉部曲線的對比,交織在一起,形成了很強的視覺衝擊力。我們可以看一旦去掉其中一種對比,例如黑白對比以後,視覺上就弱了許多。

    詳細解析設計作品中點線面的應用

    在比如naver網站的設計,左上角的色塊與其他的色塊成了明顯的對比,它在整個頁面中的作用相當於一個面的存在,所以十分醒目。

    詳細解析設計作品中點線面的應用

    詳細解析設計作品中點線面的應用

    值得順便一提的是,韓國的設計中對元素的把握總是比較到位的,哪怕是一個搜索框,就是一個點線面的組合關係。

    詳細解析設計作品中點線面的應用

    6.在秩序中融入變異元素,能活躍頁面,並突出焦點

    同質中的不同,即是變異元素,在同質元素充滿屏幕時,難免乏味很難獲得衝擊力,想要快速打破格局的方法就是將某個元素變異處理。

    例如圖中的網站首頁中,有兩種元素組成,在重複的矢量圖形中,插入了幾個照片,裡面的照片就是變異元素,這種視覺上的對比使得一堆圖形變得活潑起來,並且容易被記住。

    詳細解析設計作品中點線面的應用

    我們在來看下面的一組圖,這是原研哉給《無印良品》設計的海報,畫面中的三個元素非常清晰可見,用最簡潔的語言比傳達出了純樸、簡潔、環保、以人為本的理念。畫面中以地平線的形式打造了一個巨大的空間感,一個小小的人影站立與地平線上顯得非常渺小,正是這樣的對比使得虛無的感覺被描述的淋漓盡致。

    究其根源是什麼造成的視覺美感?正是虛實空間對比的作用,也就是所謂的留白。這就是最後一點在整個構成關係中很重要的一部分,留白。

    詳細解析設計作品中點線面的應用

    7.敢於留白也要慎於留白

    留白好比音樂中的休止符,有種此時無聲省有聲的效果,它不僅能引發觀眾的聯想,更能起到戲劇般的效果,如果敢於運用白,能達到一種更好的信息傳達並從精神層面引起觀眾的共鳴,這是它獨特的魅力所在。

    在現在信息爆炸的時代,白變成了一種更高尚的美,讓現代人能釋放壓力並享受這樣的美感。

    信息設計中它的好處是顯而易見的。在網頁設計中比較典型的例子是豆瓣,文字的間距和每個模塊之間靠留白來區分,不會靠得特別近,它得虛實空間是比較對稱得。所以無需添加過多的修飾。

    豆瓣的閱讀中心除了正文的文字內容以外,其餘的圖標被盡量的放在頁面的邊緣,或者只保留圖形,這樣的目的是純粹的突出文章本身,而將一些輔助的信息收起來,讓人可以沉浸在閱讀的氛圍里。這樣的方式也是一種留白。

    詳細解析設計作品中點線面的應用

    詳細解析設計作品中點線面的應用

    ios7系統的界面設計同樣也以留白來處理信息之間的層級關係,極細的線在界面中顯得非常精緻,它的設計是一種“純粹極簡的演繹”。

    詳細解析設計作品中點線面的應用

    界面中點線面的元素合理的排布,無不體現了設計師的匠心所在。摒棄了過多無用的設計才是能深入人心的。

    再看看更多其他網站一些細小的留白設計,比如google的卡片設計

    詳細解析設計作品中點線面的應用

    卡片化的設計終於在google之後風靡開來自於生活中類似名片,賀卡等便攜又輕巧的設計,卡片中標題與摘要之間,摘要與說明文字之間的間隙較大,圖片與其他內容間也比較疏離,同樣以信息為本的設計靠留白來分割內容之間的關係,是最近比較流行的設計趨勢,留白的關鍵在於大面積虛空間的襯托將實體最純粹的展現出來,而卡片越來越趨向這種純粹的形式。

    點線面的構成在設計中實際是一套科學的方法論,它還有非常多的奧秘,以上7點只是粗略的談到一些在平常設計中發現的規律,不能一一將它的科學美展現出來。

    設計不是盲人摸象憑着感覺去描繪,而是要把握它的骨骼,知道它的結構所在,再用表情語言去豐富它,才能做到傳達出設計之美,信息之美。

    — —

    文章永久連結為: 詳細解析設計作品中點線面的應用