收集于
一、九宮格網(wǎng)格構(gòu)圖
這種版式主要運(yùn)用在分類為主的一級(jí)頁(yè)面，起到功能分類的作用，一目了然，操作便捷。
二、圓心點(diǎn)放射形構(gòu)圖
圓是有圓心的，在界面中，往往通過(guò)構(gòu)造一個(gè)大圓來(lái)起到聚焦、凸顯作用。
放射形的構(gòu)圖，有凸顯位于中間內(nèi)容或功能點(diǎn)的作用。在強(qiáng)調(diào)核心功能點(diǎn)的時(shí)候，可以試著將功能以圓形的范式排布到中間，以當(dāng)前主要功能點(diǎn)為中心，將其他的按鈕或內(nèi)容放射編排起來(lái)。
圓形具有靈動(dòng)、活躍、有趣、可愛(ài)、多變的特質(zhì)，界面中的圓形能集中用戶的視線，引導(dǎo)點(diǎn)擊操作，突出主要的功能點(diǎn)或數(shù)據(jù)，把產(chǎn)品核心展現(xiàn)出來(lái)。
三、三角形構(gòu)圖
這類的構(gòu)圖方式主要運(yùn)用在文字與圖標(biāo)的版式中，能讓界面保持平衡穩(wěn)定。從上至下式的三角形構(gòu)圖，能把信息層級(jí)羅列得更為規(guī)整和明確。
在界面中三角形構(gòu)圖大部分都是圖在上，字在下，閱讀更為舒服，有重點(diǎn)有描述。
個(gè)人信息頁(yè)比較常用三角形構(gòu)圖。頭像明確了這個(gè)頁(yè)面的內(nèi)容，而下面的粉絲、喜歡等數(shù)據(jù)就是對(duì)本人的一個(gè)描述和介紹。
當(dāng)時(shí)在設(shè)計(jì)兒童衛(wèi)士寶貝信息設(shè)置頁(yè)時(shí)運(yùn)用到了三角構(gòu)圖與圓形構(gòu)圖的結(jié)合。將體重刻度做成可滑動(dòng)操作的方式，而卡通形象來(lái)突出設(shè)置的對(duì)象及這個(gè)頁(yè)面的功能。
四、視線在界面中的構(gòu)圖法則（SF字形構(gòu)圖）
視線流動(dòng)的軌跡多則是從上至下從左到右移動(dòng)，界面中最基礎(chǔ)的是S形視線構(gòu)圖
在視線轉(zhuǎn)角處視覺(jué)軌跡最為密集，瀏覽更為集中在切換的地方，視線轉(zhuǎn)折的地方停留時(shí)間最長(zhǎng)。
相比于左右構(gòu)圖，S形構(gòu)圖在上下滾動(dòng)頁(yè)面上優(yōu)勢(shì)非常明顯。左右構(gòu)圖很容易給人疲勞感，而S形則將圖片和文字完美結(jié)合在一起，配以大量的留白，如同山間的溪流，給人輕快流暢的感覺(jué)。
下圖界面中，設(shè)計(jì)師很好的運(yùn)用到S視線形構(gòu)圖，增強(qiáng)了穿插感和靈動(dòng)性。人物的信息上下穿插布局，頭像則成為視線的轉(zhuǎn)折點(diǎn)，使這種雙列模式的排版更為有節(jié)奏。而具體到每一部分，頭像與內(nèi)容采用了三角形構(gòu)圖，內(nèi)容描述段落用到了文本居中式，畫面穩(wěn)定、和諧。
引導(dǎo)頁(yè)中也會(huì)常常運(yùn)用到S形的構(gòu)圖。圖文進(jìn)行穿插布局，這樣的構(gòu)圖層次感分明，動(dòng)感十足！
由圖文版式布局，我們還可以演變出F字形構(gòu)圖，這種類型的構(gòu)圖大部分運(yùn)用在圖文左右搭配圖和banner中，使用F形構(gòu)圖能讓圖文搭配更有張力，更大氣，產(chǎn)品信息更為簡(jiǎn)單和明確。
在F形構(gòu)圖的規(guī)律中，主圖為F的主干，右側(cè)兩行（或兩部分）文字為輔，要注意合理分配圖片和文字的占比。
F形構(gòu)圖在banner中使用，能將標(biāo)題更為突出，主題更加吸引視線。
值得注意的是，要充分利用主圖的畫面的指向性。比如，主圖是人物，可將文字放置于其眼神、朝向、手勢(shì)等對(duì)應(yīng)的方向，加強(qiáng)視線引導(dǎo)。如果是產(chǎn)品圖，則可以通過(guò)產(chǎn)品的朝向來(lái)引導(dǎo)。這樣做，用戶能最快速的關(guān)注到文本信息，加強(qiáng)認(rèn)知度和購(gòu)買度。
![Uploading Paste_Image_580834.png . . .]
