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

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

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

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

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

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

為了使用戶閱讀更有推進性，在圖片層次和空間上，我們也需要注重用戶的視線效果，將焦點調整到合理的視線位置上，產品正面方向對準視線的來源點。通過這些調整不僅能使閱讀順暢，更加強了界面的平衡性。

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

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

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

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

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

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

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

小結：

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

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