文末點(diǎn)擊原文地址 可觀看教程視頻；

今天用另一種角度

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

▽

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

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

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

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

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

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

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

教程步驟

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

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

一、解決層次和空間

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

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

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

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

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

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

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

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

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

作者：修先森

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

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

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

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