UI設(shè)計(jì)中首頁設(shè)計(jì)排版技巧

　　在設(shè)計(jì)APP首頁時(shí)，產(chǎn)品總希望狂加功能，內(nèi)容越多越好，而且還必須要簡潔。每到這種時(shí)候，設(shè)計(jì)師的內(nèi)心都是崩潰的：are you kidding me~~。但在設(shè)計(jì)師一堆“放不下，放那么多東西太亂了，又不是菜市場...”各種反抗無效后，還是得以佛系的心態(tài)把大量內(nèi)容塞下，在心里默練1萬次：我佛慈悲，可以的。
 

　　這里分享一些常用在首頁的排版方式，在首頁在內(nèi)容很多的情況下，依然能保持界面整體簡潔而有層級，讓你的界面高端大氣上端次，去掉小攤販的即視感。今天AAA教育郭老師就針對UI設(shè)計(jì)中首頁設(shè)計(jì)排版技巧進(jìn)行簡單的說明。
 

　　一、網(wǎng)格布局
 

　　網(wǎng)格列表是一個(gè)連續(xù)元素，該元素由棋盤式、規(guī)律性的小格子構(gòu)成。網(wǎng)格列表最適合用于同類信息展示，典型的如圖片、圖標(biāo)。以下總結(jié)了幾種網(wǎng)格的展示形式。
 

　　1、9宮格(通常用于展示入口圖標(biāo)

 

　　2、兩欄、三欄、四欄式

 

　　3、不規(guī)則網(wǎng)格(通常為運(yùn)營廣告入口

 

　　二、卡片
 

　　卡片式布局經(jīng)久不衰，在于它能有效的組織不同的內(nèi)容，使得信息模塊化，提升可點(diǎn)擊感，很好的利用了頁面的空間。
 

　　1、簡約風(fēng)卡片
 

　　簡約風(fēng)的卡片很適合信息內(nèi)容單一重復(fù)的頁面，不至于造成頁面雜亂。

 

　　2、大色塊或漸變色卡片
 

　　帶背景色彩的卡片多用于運(yùn)營廣告、活動推廣

 

　　3、滑動的卡片
 

　　為了提供頁面空間的利用率，我們看到越來越多的左右滑動條出現(xiàn)在頁面首頁，通常最后一個(gè)卡片只會顯示一部分，代表可以滑動。這種滑動操作不單純作用于banner廣告，也大量出現(xiàn)在其他功能模塊上。

 

　　三、列表
 

　　列表是單一的連續(xù)元素以垂直排列的方式顯示多行信息，有純文本列表，也有圖文結(jié)合的列表。首頁使用列表布局，多用于推薦熱門資訊。

 

　　總的來說，這些排版方式都是為了滿足用戶和產(chǎn)品需求，讓內(nèi)容更好地傳達(dá)給用戶。如何把這些排版結(jié)合起來使用在APP的首頁改版上，還需要我們在具體的設(shè)計(jì)過程中大量嘗試，打磨細(xì)節(jié)。因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息，請?jiān)L問AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。