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

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

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

　　一、網(wǎng)格布局
 

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

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

 

　　2、兩欄、三欄、四欄式

 

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

 

　　二、卡片
 

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

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

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

 

　　2、大色塊或漸變色卡片
 

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

 

　　3、滑動(dòng)的卡片
 

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

 

　　三、列表
 

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

 

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