頁面布局思考:無邊框設(shè)計、卡片設(shè)計及分割線設(shè)計知識匯總

頁面布局思考:無邊框設(shè)計、卡片設(shè)計及分割線設(shè)計知識匯總：任何一名科班出身的設(shè)計師都會看到朋友圈分享的各種設(shè)計流行趨勢，迷彩陰影、流體漸變、2.5D、大字體等等層出不窮。從IOS11發(fā)布至今已有數(shù)月，無邊框設(shè)計呈現(xiàn)病毒式裂變被傳播，很多人都會有一種被牽著走的感覺，從布局的緯度設(shè)計流行趨勢下出現(xiàn)的幾種布局樣式主要是以無邊框設(shè)計、卡片設(shè)計及傳統(tǒng)布局的分割線設(shè)計為主要內(nèi)容。

一、無框設(shè)計

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

1. 大圖為主

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

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

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

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

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

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

二、卡片設(shè)計

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

1. 增加版面利用率

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

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

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

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

每一個卡片的內(nèi)容都代表一個分類，都是一個載體，承載一定的內(nèi)容，歸納一個類別的信息。

每一個卡片都是不同的緯度，相對獨立，又有關(guān)聯(lián)，通過卡片的大小歸納內(nèi)容信息，更有秩序性。

3. 增加可控性，提升體驗

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

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

三、分割線設(shè)計

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

1. 分割線

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

2. 分隔線

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

四、總結(jié)

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

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

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

廣告

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