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

首先我們看一下視線的軌跡，在視線轉(zhuǎn)角處視覺(jué)軌跡最為密集，瀏覽更為集中在切換的地方，視線轉(zhuǎn)折的地方停留時(shí)間最長(zhǎng)。所以我們應(yīng)該把重要的想要突出的產(chǎn)品或功能放在這塊，這樣更容易讓用戶記住產(chǎn)品的賣點(diǎn)。

蘋(píng)果官網(wǎng)便采用了S形視線構(gòu)圖，引導(dǎo)閱讀，大家可以從蘋(píng)果官網(wǎng)好好體會(huì)一下。每個(gè)模塊的圖形進(jìn)行穿插，可以起到幫助折回視線的作用。產(chǎn)品圖更多的讓用戶去記憶，設(shè)計(jì)引導(dǎo)消費(fèi)！

此外，為了幫助視線的移動(dòng)方向,圖片的處理也非常的講究。

在iPod touch 的介紹中，第一張圖片展開(kāi)的效果用到了三角形構(gòu)圖，強(qiáng)化了引導(dǎo)視線軌跡的指示性。同時(shí)多張圖片借助手機(jī)排列方向引導(dǎo)到視線軌跡，很好地實(shí)現(xiàn)了圖片—文字—圖片之間切換，將用戶帶入到整個(gè)產(chǎn)品畫(huà)面中。

第一屏手機(jī)展開(kāi)方向與視線保持一致

為了使用戶閱讀更有推進(jìn)性，在圖片層次和空間上，我們也需要注重用戶的視線效果，將焦點(diǎn)調(diào)整到合理的視線位置上，產(chǎn)品正面方向?qū)?zhǔn)視線的來(lái)源點(diǎn)。通過(guò)這些調(diào)整不僅能使閱讀順暢，更加強(qiá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)容描述段落用到了文本居中式，畫(huà)面穩(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)題更為突出，主題更加吸引視線。

值得注意的是，要充分利用主圖的畫(huà)面的指向性。比如，主圖是人物，可將文字放置于其眼神、朝向、手勢(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)買度。

小結(jié)：

這一課沒(méi)有什么實(shí)戰(zhàn)技巧，更多的是引導(dǎo)大家學(xué)會(huì)欣賞，學(xué)會(huì)用基本的設(shè)計(jì)原理來(lái)描述自己看到的作品，而不是簡(jiǎn)單扔下一句“人家設(shè)計(jì)得真好”就完了，要明白其中道理，并努力為自己所用。構(gòu)圖先說(shuō)到這里，當(dāng)然版式不僅僅指構(gòu)圖，還有很多東西可講，有時(shí)間我再整理給大家。

做設(shè)計(jì)要培養(yǎng)職業(yè)敏感，習(xí)慣用設(shè)計(jì)語(yǔ)言解構(gòu)看到的畫(huà)面。