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

今天用另一種角度

教大家三角構(gòu)圖的實用方法

▽

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

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

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

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

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

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

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

教程步驟

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

設(shè)計一張海報時，放置物體和文字，這樣的結(jié)合看起來是不是有點單調(diào)且缺設(shè)計感。

一、解決層次和空間

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

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

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

調(diào)整整個畫面包括物體的質(zhì)感。

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

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

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

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

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

作者：修先森

轉(zhuǎn)載請注明：學UI網(wǎng)》版式技巧 | 不一樣的三角構(gòu)圖技巧

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( cqzjtgb.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)