關(guān)于頁(yè)面布局思考匯總：無(wú)邊框設(shè)計(jì)、卡片設(shè)計(jì)及分割線設(shè)計(jì)

時(shí)間：2023-09-29 04:12:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-29 04:12:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

關(guān)于頁(yè)面布局思考匯總：無(wú)邊框設(shè)計(jì)、卡片設(shè)計(jì)及分割線設(shè)計(jì)：小編作為一名科班出生的設(shè)計(jì)師，每年總會(huì)看到朋友圈、微博分享各種設(shè)計(jì)流行趨勢(shì)，迷彩陰影、流體漸變、2.5D、大字體等等層出不窮。 小編今天只從布局的緯度和大家分享一下設(shè)計(jì)流行趨勢(shì)下出現(xiàn)的幾種布局樣式，從IOS11發(fā)布至今已有數(shù)月，無(wú)邊框設(shè)計(jì)呈現(xiàn)病毒式裂變被傳播，相信很多人都和小編一樣，會(huì)有種被牽著鼻子走的感覺(jué)吧～接下來(lái)我們就來(lái)分析下無(wú)邊框設(shè)計(jì)、卡片設(shè)計(jì)及傳統(tǒng)布局的分割線設(shè)計(jì)的詳細(xì)內(nèi)容吧～

無(wú)框設(shè)計(jì)

無(wú)框設(shè)計(jì)是近兩年來(lái)很流行的一種設(shè)計(jì)風(fēng)格，去除頁(yè)面的風(fēng)格線及邊框，通過(guò)間距來(lái)表示的設(shè)計(jì)方法。







1. 大圖為主

圖片本身就可以分割，例如有些應(yīng)用在發(fā)布圖片時(shí)，會(huì)讓用戶對(duì)圖片進(jìn)行裁切。

2. 內(nèi)容有規(guī)律

留白間距上下的內(nèi)容最好是相對(duì)一致的，重復(fù)的，親密的，這樣用戶就會(huì)有意識(shí)的將其分為一組。

3. 小眾垂直產(chǎn)品

一般情況下，小眾的功能簡(jiǎn)單的產(chǎn)品比較好適用無(wú)框設(shè)計(jì)，像淘寶、京東、微博等體量級(jí)的產(chǎn)品就不適合使用無(wú)框設(shè)計(jì)。







IOS11 apple store 通過(guò)運(yùn)用大圖，將有這同等層級(jí)的內(nèi)容用同一種表現(xiàn)方式（大圖）表現(xiàn)，增加了產(chǎn)品的格調(diào)，體現(xiàn)蘋(píng)果產(chǎn)品簡(jiǎn)潔不簡(jiǎn)單的設(shè)計(jì)理念。 愛(ài)彼迎也是一個(gè)敢于嘗試的大公司，將有規(guī)律的內(nèi)容通過(guò)卡片和大圖的方式展現(xiàn)，頁(yè)面無(wú)一根分割線，簡(jiǎn)潔大方易識(shí)別。

卡片設(shè)計(jì)

卡片設(shè)計(jì)風(fēng)靡源自于material design，卡片設(shè)計(jì)的出現(xiàn)打破了傳統(tǒng)設(shè)計(jì)一成不變的排版布局，大大提升了版面的利用率，制造了更多的驚喜，卡片設(shè)計(jì)的優(yōu)勢(shì)有哪些呢，一起來(lái)了解一下。

1. 增加版面利用率

卡片像個(gè)容器，可以把不同類別的內(nèi)容放在不同的卡片中，不僅能很好的區(qū)別內(nèi)容，還能保持界面的統(tǒng)一性。

例如，傳統(tǒng)列表，內(nèi)容一般為縱向滾動(dòng)，展示內(nèi)容有限，而采用卡片式的滑動(dòng)設(shè)計(jì)方式，則很好的解決了空間有限的問(wèn)題。







2. 區(qū)分卡片內(nèi)容

卡片像個(gè)容器，可以把不同類別的內(nèi)容放在不同的卡片中，不僅能很好的區(qū)別內(nèi)容，還能保持界面的統(tǒng)一性。

• 每一個(gè)卡片的內(nèi)容都代表一個(gè)分類，都是一個(gè)載體，承載一定的內(nèi)容，歸納一個(gè)類別的信息。
• 每一個(gè)卡片都是不同的緯度，相對(duì)獨(dú)立，又有關(guān)聯(lián)，通過(guò)卡片的大小歸納內(nèi)容信息，更有秩序性。

3. 增加可控性，提升體驗(yàn)

卡片在設(shè)計(jì)中的運(yùn)用非常廣泛，高版面旅，可以被覆蓋、滑動(dòng)、堆疊，具有更好的可擴(kuò)展性和可操作性。

例如：Apple store IOS11 通過(guò)多卡片大小的分類將不同緯度的內(nèi)容有規(guī)律的展示出來(lái)，提高了版面的利用率的同時(shí)，也提升了設(shè)計(jì)的格調(diào)。 最美應(yīng)用運(yùn)用卡片的設(shè)計(jì)方式向用戶傳達(dá)了一頁(yè)只看一個(gè)應(yīng)用的理念，結(jié)合左右滑動(dòng)的形式，使得應(yīng)用別出心裁。

分割線設(shè)計(jì)

最常見(jiàn)也是最保險(xiǎn)的設(shè)計(jì)方式，可以幫助用戶了解界面，賦予內(nèi)容組織性，分割先設(shè)計(jì)的作用就是分割、組織、細(xì)化







1. 分割線

貫穿整個(gè)頁(yè)面的分割線，將內(nèi)容分割開(kāi)，各自成為獨(dú)立的信息







2. 分隔線

又稱為內(nèi)嵌式分割線，一般會(huì)在線的前面留個(gè)缺口，表示統(tǒng)一模塊下的內(nèi)容

總結(jié)

設(shè)計(jì)趨勢(shì)總是不斷變化的，在做一個(gè)設(shè)計(jì)的開(kāi)始，首先要根據(jù)需求分析它適合什么樣的樣式，而不是一味的緊跟潮流趨勢(shì)，設(shè)計(jì)風(fēng)格沒(méi)有好壞，只有適合不適合。 無(wú)框設(shè)計(jì)、卡片設(shè)計(jì)、分割線設(shè)計(jì)同樣也是，分割線設(shè)計(jì)對(duì)比卡片設(shè)計(jì)和無(wú)框設(shè)計(jì)，是最為保守的一種設(shè)計(jì)方式，根據(jù)具體的產(chǎn)品需求做合適的選擇，但要做出做出優(yōu)質(zhì)的分割線的設(shè)計(jì)，還需要處理好“線“的間距、粗細(xì)、顏色等內(nèi)容。

希望以上的學(xué)習(xí)分享對(duì)您有所幫助，喜歡的可以關(guān)注交個(gè)朋友，不喜歡的勿噴哦～～