昨天跟大家分享了介面構圖中的九宮格構圖，今天米醋就繼續來說說圓心放射構圖與三角形構圖，其中蘊含著哪些最基礎的版式設計理念，讓我們一起梳理梳理，為初入UI行業的讀者提供一個參考。

圓心放射構圖

在生活中，最為常見的就是圓形了，眼睛是圓的，太陽是圓的，碗也是圓的，天也是圓的。在介面設計中，圓的運用可謂是點睛之筆。

圓是有圓心的，在介面中，往往通過構造一個大圓來起到聚焦和凸顯的作用。

放射形的構圖，有凸顯中央內容或功能點的作用。在強調核心功能點的時候，可以試著將功能以圓形的方式排布到中間，以當前主要功能點為中心，將其他的按鈕或內容放射編排起來。

我們將主要的功能設置在版面的中心位置，就能引導用戶的視線聚集在想要突出的功能點上，就算視線本來不在中間的位置，也能引導用戶再次回到中心的聚集處。

案例分析

在介面設計中，圓形的運用能讓介面顯得格外生動，多數可操作的按鈕上或交互動畫中都能見到圓形的身影。因為圓形具有靈動、活躍、有趣、可愛和多變的特徵。在介面設計中合理地將圓形的設計與動畫相結合，能讓整個介面鮮活起來。

如果再加上旋轉圍繞的動畫，會讓整個介面更加靈動。介面中的圓形能集中用戶的視線，引導點擊操作，突出主要的功能點或數據，把產品核心展現出來。圓心點放射形的設計，會使軟體感覺更為智能化，包容萬象。

如果要體現的功能點非常簡單，例如只有幾個功能按鈕的時候，可以嘗試使用大圓形進行展示設計，突出最重要的功能，然後羅列並排出其他的功能點。這種方式非常實用，就和畫重點一樣，圈出最重要的數據。善於運用大圓構圖，能撐起整個畫面，讓介面圓潤而飽滿。

圓心放射的構圖運用到Banner設計中可以起到很好的聚焦作用。

使用放射形狀的圖案作為背景有利於讓用戶將視線集中到中心點的文案主題上，用這種表現方式設計出來的Banner具有非常強衝擊力，主題也是一目了然。

三角形構圖

三角形構圖主要運用在文字與圖標的版式設計中，能讓介面保持平衡穩定。從上至下式的三角形構圖，能把信息層級羅列得更為規整和明確。在介面設計中，三角形構圖大部分都是圖在上，字在下，這樣閱讀起來更為舒服，有重點有描述。

案例分析

Gogobot的登陸頁在設計時將Logo圖標及字標作為一個圖片整體放在了上面，而輸入框作為核心描述放到了三角形的下面，也是整個介面的中心，大大的加強了用戶對產品的理解，同時也可以讓用戶以最快的速度找到搜索這個主功能。

在個人信息頁的設計中，比較常用的也是三角形構圖。頭像明確了這個頁面的內容，而下面的粉絲和喜歡等數據就是對本人的一個描述和介紹。

在設計下面的這個兒童衛士寶貝信息設置頁時，結合了三角構圖與圓形構圖一起進行設計。將體重刻度做成可滑動操作的效果，而卡通形象用來突出設置的對象及這個頁面的功能。

好啦！今天就分享到這裡！

明天米醋將跟大家繼續分享，

不見不散哦！

在【MICU設計】微信公眾號中回復「W6」 即可下載，Adobe Premiere Pro 2020 軟體