聊一聊界面設(shè)計(jì)的構(gòu)圖(2)

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

圓是有圓心的，在界面中，往往通過(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)。

我們將主要的功能設(shè)置在版式的中位置，就能引導(dǎo)用戶(hù)的視線(xiàn)聚集在想要突出的功能點(diǎn)上，就算視線(xiàn)本來(lái)不在中間的位置，也能引導(dǎo)用戶(hù)再次回到中心的聚集處。

在界面設(shè)計(jì)中，圓形的運(yùn)用能使界面顯得格外生動(dòng)，多數(shù)可操作的按鈕上或交互動(dòng)畫(huà)中都能見(jiàn)到圓形的身影。

因?yàn)閳A形具有靈動(dòng)、活躍、有趣、可愛(ài)、多變的特質(zhì)。在界面設(shè)計(jì)中善于將圓形的設(shè)計(jì)與動(dòng)畫(huà)結(jié)合，能讓整個(gè)軟件鮮活起來(lái)。

如再加上旋轉(zhuǎn)圍繞的動(dòng)畫(huà)，會(huì)讓整個(gè)軟件鮮活起來(lái)。界面中的圓形能集中用戶(hù)的視線(xiàn)，引導(dǎo)點(diǎn)擊操作，突出主要的功能點(diǎn)或數(shù)據(jù)，把產(chǎn)品核心展現(xiàn)出來(lái)。

圓心點(diǎn)放射形的設(shè)計(jì)，會(huì)使軟件感覺(jué)更為智能化，包容萬(wàn)象。

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

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

這類(lèi)的構(gòu)圖方式主要運(yùn)用在文字與圖標(biāo)的版式中，能讓界面保持平衡穩(wěn)定。從上至下式的三角形構(gòu)圖，能把信息層級(jí)羅列得更為規(guī)整和明確。

在界面中三角形構(gòu)圖大部分都是圖在上，字在下，閱讀更為舒服，有重點(diǎn)有描述。

Gogobot登陸頁(yè)在設(shè)計(jì)中將logo作為了圖形的部分，輸入框就是產(chǎ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è)面的功能。

四、視線(xiàn)在界面中的構(gòu)圖法則（SF字形構(gòu)圖）

在設(shè)計(jì)實(shí)踐中，如何引導(dǎo)讀者視線(xiàn)，對(duì)增強(qiáng)用戶(hù)體驗(yàn)有重要作用。好的構(gòu)圖視線(xiàn)法則，能夠獲得非常舒服的閱讀體驗(yàn)。而雜亂無(wú)章的構(gòu)圖，往往讓用戶(hù)厭倦。

在進(jìn)行界面設(shè)計(jì)的時(shí)候，對(duì)用戶(hù)的視覺(jué)移動(dòng)方向的預(yù)設(shè)是非常重要的。在界面中加入更為順暢的構(gòu)圖設(shè)計(jì)引導(dǎo)用戶(hù)視線(xiàn)移動(dòng)的元素，就能使用戶(hù)更多的觀(guān)察到產(chǎn)品的核心和產(chǎn)品的賣(mài)點(diǎn)。

視線(xiàn)流動(dòng)的軌跡多則是從上至下從左到右移動(dòng)，如果不能?chē)@這樣的視線(xiàn)軌跡進(jìn)行排版，用戶(hù)在閱讀的時(shí)候會(huì)變得很吃力，找不到重點(diǎn)，使用戶(hù)產(chǎn)生反感。所以在界面設(shè)計(jì)中格外需要注意這個(gè)地方�，F(xiàn)在界面一般是上下滑動(dòng)的，做好視線(xiàn)引導(dǎo)，可以大大減小用戶(hù)的負(fù)擔(dān)和閱讀疲勞。

界面中最基礎(chǔ)的是S形視線(xiàn)構(gòu)圖

在界面中怎么運(yùn)用S形視線(xiàn)構(gòu)圖呢？

S形視線(xiàn)大家都懂，關(guān)鍵是如何運(yùn)用好S形視線(xiàn)來(lái)抓住用戶(hù)眼球。