• <tbody id="9brb1"><pre id="9brb1"></pre></tbody>

    <em id="9brb1"></em>

  • <th id="9brb1"></th>

  • <tbody id="9brb1"><pre id="9brb1"></pre></tbody>
  • <button id="9brb1"><acronym id="9brb1"><input id="9brb1"></input></acronym></button>
      <tbody id="9brb1"><pre id="9brb1"></pre></tbody>
        更多課程 選擇中心


        UI培訓

        400-111-8989

        什么是黃金比例?該如何應用到設計上?

        • 發布:UI培訓
        • 來源:UI教程
        • 時間:2018-03-27 14:14

        之前也和大家分享過很多關于黃金分割的問題。我們在大自然中很容易找到這樣的比例,當它用于設計時,能創造出有生命力的、純天然的視覺作品,愉悅我們的眼睛。但究竟什么是黃金比例,如何使用它來提高你設計水平?下面給你分析分析。

        黃金比例是多少?

        我們會把它盡可能解釋得簡單喲!黃金比例(也被稱為黃金分割,中庸之道,神圣比例或希臘字母φ)存在于被分割成兩截的線段中,我們設較長的一段為a,較短的一段為b,那么有:(a)÷(b)=【(a)+(b)】÷(a),都等于1.618。

        什么是黃金比例?該如何應用到設計上?

        但是不要讓這些數字難倒你。在設計中,黃金比例可以歸結為美學——創造和激發一種通過比例與和諧產生的美感。當應用于設計中時,黃金比例提供了一種藝術性;一個未知因素,一定的描述的事物。

        這種和諧和比例已被成千上萬的世紀所承認:從吉薩金字塔到雅典的帕特農神廟;從米開朗基羅的《亞當的創生》到西斯廷教堂天花板上梵高的《蒙娜麗莎》;從百事 logo 到 Twitter logo。甚至于我們的身體和臉也同樣遵循這樣的數學比例:

        什么是黃金比例?該如何應用到設計上?

        事實上,我們的大腦似乎本能地更喜歡使用黃金比例的對象和圖像。這幾乎是一個潛意識的力量,以至于哪怕為圖像作更接近黃金比例的微妙調整對我們的大腦也有很大影響。

        黃金比也適用于形狀。畫一個正方形,設定邊長為1,改變其中一邊使其變為1.618,一個完美的黃金比矩形便赫然紙上。

        什么是黃金比例?該如何應用到設計上?

        現在,如果你把正方形疊加在矩形上,那么這兩個圖形會讓你看到一個黃金比矩形。

        什么是黃金比例?該如何應用到設計上?

        如果你一直按照這樣的方式把黃金比應用到新矩形上,那么你最終會得到一個個逐漸縮小的正方形:

        什么是黃金比例?該如何應用到設計上?

        假如你在上面這張黃金比例圖的每個正方形的對角畫一條曲線,你將會看到一個黃金比例曲線(亦稱斐波 那契序列)—— 這個序列中的每一個數字是前面兩個數字之和。我們從零開始,結論如下:0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144……等等。

        通過在每個正方形中畫對角曲線你會發現,這張圖出現了一條神奇的黃金比例曲線:

        什么是黃金比例?該如何應用到設計上?

        這條美麗的螺旋曲線出現在自然界很多的物種當中——蕨類植物、花卉、貝殼,甚至颶風——這也許就是為什么我們會覺得他們具有強烈的視覺吸引力。因為畢竟,天然的就是最好的。

        什么是黃金比例?該如何應用到設計上?

        我們再進一步研究它吧,在每個正方形中畫一個正圓——這樣的結果是所有圓的大小也同樣遵循1:1.618,它們的比例看起來是多么的平衡啊!

        什么是黃金比例?該如何應用到設計上?

        所以,我們現在有了黃金比正方形、黃金比矩形和黃金比圓,快到你的設計中盡情釋放它們吧!

        應用黃金分割的五種方式

        OK,你現在已經理解黃金比例的概念了,那么讓我們看看它是如何提升設計的整體水平,

        黃金比例可以運用設計中的許多地方,像布局、間距、內容、圖片和版式。

        01.布局——用黃金比例設置空間布局

        我們常常把黃金比例看作是確定空間布局的實用指南。應用黃金分割的一個非常簡單的方法是將矩形的長寬比設為1:1.618.

        例如:960像素是非常典型的畫布寬度,用這個寬除以1.618,得到一個594像素的數值,把它設置為高度,就是一塊完美的畫布。

        現在,打破這種布局,使用黃金比例分成兩列。瞧!在這兩個形狀使你的設計呈現協調的黃金比例布局。

        什么是黃金比例?該如何應用到設計上?

        這樣的兩列布局非常適合網頁設計,在這種格式中你會看到許多在線內容。美國 National Geographic 就采用這種布局構建了一個整潔、易于閱讀、結構良好的網站。它為讀者提供了一個合乎規律的秩序井然的、平衡的和層次分明的閱讀體驗。

        什么是黃金比例?該如何應用到設計上?

        02.間距—黃金比例布局

        間距是任何設計的一大要素,它能營造負空間氛圍,使最終的結果要么成功要么毀滅。確定元素的間距是相當耗時的事情,但是,運用黃金分割圖,讓正方形來引導你確定每個元素的位置,工作起來會更省力好 多。這將確保你的間距和比例是通過嚴密的計算而不是“憑感覺來的”,同時任何為達到黃金比例而作的微妙的調整都可能導致所有元素的差異。

        再者,如果你需要同時處理幾個元素,也可以運用多個黃金比例來保持設計作品的整體連貫性。

        什么是黃金比例?該如何應用到設計上?

        設計工作室 Moodley 為布雷根茨 Festspiele 表演藝術節開發了一款新的品牌標識,包括logo、logo風格和拼貼設計,應用于程序、節目單和戶外活動。節目單著重強調 了攝影和說明性的拼貼,還有一個留出大片空白的波形logo。黃金比例用來確定每個元素的大小和位置,以確保封面比例協調。

        什么是黃金比例?該如何應用到設計上?

        新加坡的一家設計機構Lemon Graphic 為Terkaya 財富管理 創建了一個視覺識別系統,如下圖。這張商務名片上的三個元素——小鷹、文字和大鷹——都分布在一條黃金曲線的不同位置。

        同時,將黃金比矩形放置在小鷹的位置,它也是呈這個比例的。

        什么是黃金比例?該如何應用到設計上?

        03.內容—運用黃金螺旋

        黃金螺旋可以被看作是確定內容的位置“指南”。我們的視覺會自然而然的落到螺旋的中心,這個位置有很多細節性的元素,所以在做設計時我們要非常關注螺旋的中心位置和螺旋走過的視覺空白區域。

        什么是黃金比例?該如何應用到設計上?

        再來看國家地理網站,你會發現在曲線的中心存在著第二個、小一點的logo。這是一個加倍提高品牌形象的好地方,因為這里很自然地吸引了我們的注意力。是潛意識的嗎?也許吧。黃金比例可以讓一切看起來那樣自然。

        什么是黃金比例?該如何應用到設計上?

        下面這個網站由平面設計師 Tim Roussilhe 為 自己設計。它的內容雖看起來非常密集,但它的排版也遵循黃金比例和黃金螺旋規律,它的重點是文本的左上部分的網站。我們的視線首先會落在頂端“你好,我的 名字叫提姆”這個位置,慢慢地,會向Tim的工作內容轉移,然后看到一個菜單按鈕,進而發現左上角的一個圖標,在視線到達這個設計的“消極區域”前,我們 已經接收完所有它需要告訴我們的信息了。

        什么是黃金比例?該如何應用到設計上?

        在這個為 Saastamoisen saatio 所做的視覺識別系統中,隨著黃金螺旋的不斷延伸,內容也愈加密集。當我們的視線與曲線越近,字體和間距也在不斷減小。字母無序排列,但一回生二回熟,通過一遍遍重復使用,品牌名稱也變得熟悉起來。

        什么是黃金比例?該如何應用到設計上?

        Helms Workshop 工作室為Fullsteam啤酒廠設計了這個品牌,他使用黃金比例和黃金螺旋處理布局和內容。設計中的各種元素在每個獨立的正方形中都顯得非常和諧,視線的 重點也正好落在主人公、郵票、酒精含量和廠址上。當我們看到這張標簽時,通過黃金比例構圖讓我們 注意到其中的內容,進而讓我們了解創始人和品牌故事的細節。

        什么是黃金比例?該如何應用到設計上?

        04.圖像——黃金比例(三分法)

        無論是傳達重要信息或創建一個美觀的照片,結構對任何圖像都很重要。黃金比例可以幫助設計師搭建一個結構,引導觀眾的視線到重要的位置去。使用黃金比例,將一張照片分割成不等的三個空間,再運用線條和相交的點去創建結構。

        比例是1:0.618:1——設定第一和第三縱列的寬度為1,那么中間縱列的為0.618。同樣,水平方 向:第一和第三橫排的高度為1,中心一行的寬度為0.618。現在使用這些線和交點吸引觀者的注意力向這些位置集中。這些元素形成了一種張力,增加了設計 結構的趣味和力量。

        什么是黃金比例?該如何應用到設計上?

        另一個(稍微簡化)通過黃金比例處理圖像位置的的方法是三分法。它不像黃金比例一樣精確,但相當接近。三分法即將空間劃分為三個水平或垂直方向都相等的空間,使圖像的重要元素都圍繞在矩形中心理想情況下的四個交點上。

        這個是《Complex》的封面,歌手Solange Knowles擔當模特,它同樣使用黃金比例來確定正負空間的比例。Solange 的鼻子和前額位于三分水平線最頂端一條,鼻子和眼睛則分別落在兩條垂直線上,這里剛好是矩形中心。

        什么是黃金比例?該如何應用到設計上?

        這張封面是 Jason Mildren 為《Pilot》雜志所作,它的設計原理就是三分法。矩形中心的角落的設計呈現出一種趣味,雖然是中心,但大部分是空白的空間。模特的眼睛正巧落在這個角落里,洞察著觀眾的內心。

        什么是黃金比例?該如何應用到設計上?

        《Feld》的這張封面將模特對稱的眼睛作為黃金比例的重心。這張封面看起來相當不錯,因為模特偏離了畫面中心,而且他的臉幾乎與左側閱讀指南垂直。

        什么是黃金比例?該如何應用到設計上?

        封面的整體布局同時遵循黃金分割和黃金螺旋。內容集中在螺旋的位置,越接近螺旋的中心內容越詳細。

        什么是黃金比例?該如何應用到設計上?

        05.格式——黃金比例圓

        我們現在知道黃金比例可以用來創建比例和諧的正方形和矩形,它也還可以用于創建黃金比的圓。每一個正方形中的圓都與其鄰近的圓成1:1.618的比例,這就是完美的圓!

        什么是黃金比例?該如何應用到設計上?

        使用黃金分割圓不僅能創建和諧、均衡的設計,也能保持格式的一致性。讓我們回過頭來看百事可樂和Twitter的logo。

        百事可樂的標志基于兩個按照黃金比例相交的圓。小圓在重迭的圖案中并不那么明顯,但是通過logo中間的白色部分還是能被識別的。

        什么是黃金比例?該如何應用到設計上?

        Twitter的標志基于幾何結構并重點利用了圓的完美。從下面這張圖我們可以看出,它確實是運用黃金比例繪制的,但不完全精確。圖案總體還是遵循黃金比平衡、協調、有序的特點。

        什么是黃金比例?該如何應用到設計上?

        感謝大家閱讀由UI教程分享的“什么是黃金比例?該如何應用到設計上?”希望對大家有所幫助,更多精彩內容請關注UI培訓機構官網

        免責聲明:本文由小編轉載自網絡,旨在分享提供閱讀,版權歸原作者所有,如有侵權請聯系我們進行刪除

        預約申請免費試聽課

        填寫下面表單即可預約申請免費試聽!怕錢不夠?可就業掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業?一地學習,可全國推薦就業!

        上一篇:用戶引導&提示,了解一下
        下一篇:PS制作中國風古典工筆畫效果教程

        淺談設計中的加載

        平面設計中的印刷知識與印刷尺寸

        教你如何把手機里的自拍照片轉成手繪照

        如何將品牌基因融入到產品設計中?

        • 掃碼領取資料

          回復關鍵字:視頻資料

          免費領取 達內課程視頻學習資料

        • 視頻學習QQ群

          添加QQ群:1143617948

          免費領取達內課程視頻學習資料

        Copyright ? 2021 Tedu.cn All Rights Reserved 京ICP備08000853號-56 京公網安備 11010802029508號 達內時代科技集團有限公司 版權所有

        選擇城市和中心
        貴州省

        廣西省

        海南省

        2019最新在线国产自拍,2019最新国产在线观看_久久爱久久高清视频 百度 好搜 搜狗
        <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>