頁面布局思維：無邊距設(shè)計、卡片設(shè)計、分割線設(shè)計知識總結(jié)：任何一個有專業(yè)背景的設(shè)計師都會看到朋友們分享的各種設(shè)計潮流，比如迷彩陰影、流體漸變、2.5D、大字體等等。IOS11發(fā)布已經(jīng)幾個月了，無邊框設(shè)計像病毒一樣傳播開來，很多人會覺得被牽著走了。從版式緯度設(shè)計的流行趨勢中出現(xiàn)的幾種版式風(fēng)格，主要集中在傳統(tǒng)版式的無邊框設(shè)計、卡片設(shè)計和分割線設(shè)計上。

　　第一，無框架設(shè)計

　　無框架設(shè)計是近兩年比較流行的設(shè)計風(fēng)格，去掉了頁面的樣式線和邊框，用間距來表達(dá)。

　　1.大圖是主要的

　　圖片可以自己分。例如，一些應(yīng)用程序會讓用戶在發(fā)布圖片時剪切圖片。

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

　　留白上下的內(nèi)容要相對一致，重復(fù)，貼心，讓用戶有意識的分成一組。

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

　　一般情況下，功能簡單的產(chǎn)品更適合無框架設(shè)計，而淘寶、JD.COM、微博等大規(guī)模的產(chǎn)品不適合無框架設(shè)計。

　　IOS11 apple  store用同樣的表達(dá)方式(大圖)用大圖來表達(dá)相同層次的內(nèi)容，增加了產(chǎn)品的風(fēng)格，體現(xiàn)了蘋果產(chǎn)品簡單不簡單的設(shè)計理念。奧德馬斯皮格特也是一家敢于嘗試的大公司。它通過卡片和大圖像顯示常規(guī)內(nèi)容。頁面沒有分割線，簡單易識別。

　　二、卡片設(shè)計

　　卡牌設(shè)計從材質(zhì)設(shè)計開始流行?？ㄆ皆O(shè)計的出現(xiàn)，打破了傳統(tǒng)設(shè)計一成不變的布局，大大提高了布局的利用率，創(chuàng)造了更多的驚喜?？ㄆO(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)容，概括了一個類別的信息。

　　每張卡都有不同的緯度，相對獨立又有聯(lián)系。用卡片的大小來概括內(nèi)容信息更有條理。

　　3.增加可控性并增強體驗

　　卡在設(shè)計中應(yīng)用廣泛，布局較高，可以蓋、滑、疊，可擴展性和可操作性較好。畫

　　比如Apple  store  IOS11通過多種卡尺寸的分類，有規(guī)律地顯示不同緯度的內(nèi)容，既提高了布局的利用率，又增強了設(shè)計風(fēng)格。最美的應(yīng)用采用卡片的設(shè)計方法，傳達(dá)一頁只能查看一個應(yīng)用的思想，結(jié)合左右滑動的形式，應(yīng)用獨具特色。

　　三、分割線設(shè)計

　　最常用最安全的設(shè)計方法，可以幫助用戶理解界面，給出內(nèi)容組織。劃分前設(shè)計的作用是劃分、組織、提煉。

　　1.分界線

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

　　2.分隔線

　　也稱為嵌入式分割線，通常在分割線前留有間隙，以指示統(tǒng)一模塊下的內(nèi)容

　　四.總結(jié)

　　設(shè)計潮流總是在變。一個設(shè)計的開始，首先要分析它適合什么風(fēng)格，而不是盲目跟風(fēng)。設(shè)計風(fēng)格沒有好壞，只有適合與否。無框設(shè)計、卡片設(shè)計、分割線設(shè)計也是如此。與卡片設(shè)計和無框設(shè)計相比，分割線設(shè)計是最保守的設(shè)計方法之一。應(yīng)根據(jù)具體的產(chǎn)品要求做出適當(dāng)?shù)倪x擇。但要做出高質(zhì)量的分割線設(shè)計，就要處理好“線”的間距、粗細(xì)、顏色。