文末點擊原文地址 可觀看教程視頻；

今天用另一種角度

教大家三角構圖的實用方法

▽

用三個點所相連成的線稱之為三角構圖，看似簡單，實際該如何運用？

第一眼看好像沒什么問題，但是由于文字的分段較多導致內容層級不明顯，閱讀上會出現斷層和不夠直觀的體驗。

三角構圖作為層次空間的搭建者，將數字、主題、信息、時間利用三角的結構進行了分層以及信息主次和布局的整理，讓大眾可以清晰直觀的看到想要體現的利益和重要順序。

兩者之間的對比一下，是不是右邊的也更有設計感一些。

物體之間的三角構圖，一個奧特曼放在畫面中，看上去有些孤單，主要是怕萬一打不過怪獸。

根據三角的結構和方向性，依次左右放置更多的物體進行組合，再放置主標題，這樣是不是既顯得有層次又看起來內容豐富一些呢。

可惜80、90年代人最美好的童年回憶也終將逝去，某些家長不相信光，把教育不好的鍋丟給了奧特曼，可奧特曼又有什么錯了，他只是單純的想保護地球。

教程步驟

剛才這兩個示例都是拆分式的講解，如何在實際設計時完整的使用？

設計一張海報時，放置物體和文字，這樣的結合看起來是不是有點單調且缺設計感。

一、解決層次和空間

根據三角構圖，用剛才奧特曼的方式依次將物體有序的以三角構建的方向組合羅列。

將文字做出透視感放置到物體腳下，增加質感讓文字貼合到背景中。放置一些城市元素在物體身后，這幾步的操作都是增加遠景以提升空間感。

二、解決畫面的融合和完整度

調整整個畫面包括物體的質感。

將主標題放置畫面時，主標題區域與下面物體還沒能很好的融合在一起，我們可以將主標題以扇形或者同以三角構圖的方法展開結合到畫面中，這樣一來，視覺的完整度就有了很大的提高。

到這很多人可能就做完了，但其實還缺點睛之筆，我們發現人物的視線是直視著畫面前方，可以利用這樣的引導，增加一個兵乓球在視線前方，讓畫面具有一定的律動感和視覺的穿透力。

我們再對比下前后的效果。

這就是今天帶來的三角構圖方法，視頻完整版內容都在我最新的直播課程當中。

原文地址：修先森撩設計（公眾號）

作者：修先森

轉載請注明：學UI網》版式技巧 | 不一樣的三角構圖技巧

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務