頁(yè)面布局思考:無(wú)邊框設(shè)計(jì)、卡片設(shè)計(jì)及分割線設(shè)計(jì)知識(shí)匯總：任何一名科班出身的設(shè)計(jì)師都會(huì)看到朋友圈分享的各種設(shè)計(jì)流行趨勢(shì)，迷彩陰影、流體漸變、2.5D、大字體等等層出不窮。從IOS11發(fā)布至今已有數(shù)月，無(wú)邊框設(shè)計(jì)呈現(xiàn)病毒式裂變被傳播，很多人都會(huì)有一種被牽著走的感覺，從布局的緯度設(shè)計(jì)流行趨勢(shì)下出現(xiàn)的幾種布局樣式主要是以無(wú)邊框設(shè)計(jì)、卡片設(shè)計(jì)及傳統(tǒng)布局的分割線設(shè)計(jì)為主要內(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)蘋果產(chǎn)品簡(jiǎn)潔不簡(jiǎn)單的設(shè)計(jì)理念。 愛彼迎也是一個(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ì)

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

1. 分割線

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

2. 分隔線

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

四、總結(jié)

設(shè)計(jì)趨勢(shì)總是不斷變化的，在做一個(gè)設(shè)計(jì)的開始，首先要根據(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)容。

網(wǎng)站名稱：頁(yè)面布局思考:無(wú)邊框設(shè)計(jì)、卡片設(shè)計(jì)及分割線設(shè)計(jì)知識(shí)匯總
URL鏈接：http://aaarwkj.com/news/153712.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、標(biāo)簽優(yōu)化、商城網(wǎng)站、小程序開發(fā)、動(dòng)態(tài)網(wǎng)站、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)