聊一聊界面設計的構(gòu)圖(3)

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

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

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

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

第一屏手機展開方向與視線保持一致

為了使用戶閱讀更有推進性，在圖片層次和空間上，我們也需要注重用戶的視線效果，將焦點調(diào)整到合理的視線位置上，產(chǎn)品正面方向?qū)室暰�的來源點。通過這些調(diào)整不僅能使閱讀順暢，更加強了界面的平衡性。

相比于左右構(gòu)圖，S形構(gòu)圖在上下滾動頁面上優(yōu)勢非常明顯。左右構(gòu)圖很容易給人疲勞感，而S形則將圖片和文字完美結(jié)合在一起，配以大量的留白，如同山間的溪流，給人輕快流暢的感覺。

下圖界面中，設計師很好的運用到S視線形構(gòu)圖，增強了穿插感和靈動性。人物的信息上下穿插布局，頭像則成為視線的轉(zhuǎn)折點，使這種雙列模式的排版更為有節(jié)奏。而具體到每一部分，頭像與內(nèi)容采用了三角形構(gòu)圖，內(nèi)容描述段落用到了文本居中式，畫面穩(wěn)定、和諧。

在引導頁中也會常常運用到S形的構(gòu)圖。圖文進行穿插布局，這樣的構(gòu)圖層次感分明，動感十足！

由圖文版式布局，我們還可以演變出F字形構(gòu)圖，這種類型的構(gòu)圖大部分運用在圖文左右搭配圖和banner中，使用F形構(gòu)圖能讓圖文搭配更有張力，更大氣，產(chǎn)品信息更為簡單和明確。

在F形構(gòu)圖的規(guī)律中，主圖為F的主干，右側(cè)兩行（或兩部分）文字為輔，要注意合理分配圖片和文字的占比。

F形構(gòu)圖在banner中使用，能將標題更為突出，主題更加吸引視線。

值得注意的是，要充分利用主圖的畫面的指向性。比如，主圖是人物，可將文字放置于其眼神、朝向、手勢等對應的方向，加強視線引導。如果是產(chǎn)品圖，則可以通過產(chǎn)品的朝向來引導。這樣做，用戶能最快速的關(guān)注到文本信息，加強認知度和購買度。

小結(jié)：

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

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