獵學(xué)網(wǎng)為大家?guī)砩虾I設(shè)計(jì)培訓(xùn)ui構(gòu)圖法，大家可隨時(shí)關(guān)注獵學(xué)網(wǎng)平面設(shè)計(jì)培訓(xùn)頻道，我們將第一時(shí)間公布相關(guān)培訓(xùn)信息。

下面和大家介紹以下幾種在界面中常用的構(gòu)圖方法：

九宮格構(gòu)圖

圓心點(diǎn)放射形構(gòu)圖

三角形構(gòu)圖

SF字形構(gòu)圖

一、九宮格網(wǎng)格構(gòu)圖

這種版式主要運(yùn)用在分類為主的一級(jí)頁面，起到功能分類的作用。通常在界面設(shè)計(jì)中，我們會(huì)利用網(wǎng)格在界面進(jìn)行布局，根據(jù)水平方向和垂直方向劃分所構(gòu)成的輔助線，設(shè)計(jì)會(huì)進(jìn)行得非常順利。在界面設(shè)計(jì)中，九宮格這種類型的構(gòu)圖更為規(guī)范和常用，用戶在使用過程中非常的方便，應(yīng)用功能會(huì)顯得格外的明確和突出。

九宮格給用戶一目了然的感覺，操作便捷是這種構(gòu)圖方式最重要的優(yōu)勢。

九宮格看似簡單隨意，用好了同樣能呈現(xiàn)出奇妙的效果。靈活運(yùn)用九宮格輔助線區(qū)分出來的方塊。在有規(guī)律的設(shè)計(jì)方法中找突破，做設(shè)計(jì)一定要注重這一點(diǎn)！在九個(gè)方塊分配的時(shí)候，不一定要一個(gè)格子對(duì)應(yīng)一個(gè)內(nèi)容，完全可以一對(duì)二，一對(duì)多，打破平均分割的框框，增加留白，調(diào)整頁面節(jié)奏，或突出功能點(diǎn)或廣告。各個(gè)方塊的不同組成方式，頁面的效果也會(huì)產(chǎn)生無數(shù)的變化。

我們可以看出這樣的版式，同樣可以使界面變得非常的靈活，內(nèi)容簡單，信息明了。

二、圓心點(diǎn)放射形構(gòu)圖

生活中，最為常見的就是圓形了，眼睛是圓的，太陽是圓的，碗也是圓的，天也是圓的。在界面設(shè)計(jì)中圓的運(yùn)用可謂是點(diǎn)睛之筆。

圓是有圓心的，在界面中，往往通過構(gòu)造一個(gè)大圓來起到聚焦、凸顯作用。放射形的構(gòu)圖，有凸顯位于中間內(nèi)容或功能點(diǎn)的作用。在強(qiáng)調(diào)核心功能點(diǎn)的時(shí)候，可以試著將功能以圓形的范式排布到中間，以當(dāng)前主要功能點(diǎn)為中心，將其他的按鈕或內(nèi)容放射編排起來。我們將主要的功能設(shè)置在版式的中位置，就能引導(dǎo)用戶的視線聚集在想要突出的功能點(diǎn)上，就算視線本來不在中間的位置，也能引導(dǎo)用戶再次回到中心的聚集處。

在界面設(shè)計(jì)中，圓形的運(yùn)用能使界面顯得格外生動(dòng)，多數(shù)可操作的按鈕上或交互動(dòng)畫中都能見到圓形的身影。因?yàn)閳A形具有靈動(dòng)、活躍、有趣、可愛、多變的特質(zhì)。在界面設(shè)計(jì)中善于將圓形的設(shè)計(jì)與動(dòng)畫結(jié)合，能讓整個(gè)軟件鮮活起來。如再加上旋轉(zhuǎn)圍繞的動(dòng)畫，會(huì)讓整個(gè)軟件鮮活起來。界面中的圓形能集中用戶的視線，引導(dǎo)點(diǎn)擊操作，突出主要的功能點(diǎn)或數(shù)據(jù)，把產(chǎn)品核心展現(xiàn)出來。

圓心點(diǎn)放射形的設(shè)計(jì)，會(huì)使軟件感覺更為智能化，包容萬象。如果要體現(xiàn)的功能點(diǎn)非常簡單，只有幾個(gè)功能按鈕的時(shí)候，可嘗試這種大圓的展示設(shè)計(jì)，突出最重要的功能，然后羅列并排出其他的功能點(diǎn)。這種方式非常實(shí)用，就和畫重點(diǎn)一樣，圈出最重要的數(shù)據(jù)。善于運(yùn)用大圓構(gòu)圖，能撐起整個(gè)畫面，讓界面圓潤而飽滿。

三、三角形構(gòu)圖

這類的構(gòu)圖方式主要運(yùn)用在文字與圖標(biāo)的版式中，能讓界面保持平衡穩(wěn)定。從上至下式的三角形構(gòu)圖，能把信息層級(jí)羅列得更為規(guī)整和明確。在界面中三角形構(gòu)圖大部分都是圖在上，字在下，閱讀更為舒服，有重點(diǎn)有描述。

跑贏職場登陸頁在設(shè)計(jì)中將logo作為了圖形的部分，輸入框就是產(chǎn)品的核心描述。

以上就是有關(guān)上海UI設(shè)計(jì)培訓(xùn)ui構(gòu)圖法的介紹，更多的(平面設(shè)計(jì)培訓(xùn)課程、平面設(shè)計(jì)培訓(xùn)機(jī)構(gòu))，敬請(qǐng)關(guān)注獵學(xué)網(wǎng)平面設(shè)計(jì)培訓(xùn)頁面!

溫馨提示
獵學(xué)網(wǎng)鄭重承諾，本網(wǎng)站(獵學(xué)網(wǎng))以誠信、高效、安全、擔(dān)保的產(chǎn)品理念，作為“學(xué)習(xí)+服務(wù)”的第三方平臺(tái)，致力于打造良好的口碑服務(wù)平臺(tái)。站內(nèi)收錄的中專、大專、自考、成考、專升本、網(wǎng)絡(luò)教育等機(jī)構(gòu)，都經(jīng)過獵學(xué)網(wǎng)核實(shí)認(rèn)證!如果廣大考生有提升學(xué)歷的需求，敬請(qǐng)關(guān)注獵學(xué)網(wǎng)，歡迎通過了解!