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

　　第一，無框架設計

　　無框架設計是近兩年比較流行的設計風格，去掉了頁面的樣式線和邊框，用間距來表達。

　　1.大圖是主要的

　　圖片可以自己分。例如，一些應用程序會讓用戶在發布圖片時剪切圖片。

　　2.內容有規律

　　留白上下的內容要相對一致，重復，貼心，讓用戶有意識的分成一組。

　　3.小型垂直產品

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

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

　　二、卡片設計

　　卡牌設計從材質設計開始流行。卡片式設計的出現，打破了傳統設計一成不變的布局，大大提高了布局的利用率，創造了更多的驚喜。卡片設計有什么優勢？

　　1.提高版面利用率

　　一張卡片就像一個容器，可以把不同種類的內容放在不同的卡片上，既能很好的區分內容，又能保持界面的統一。

　　比如傳統的列表，內容一般是垂直滾動的，顯示內容有限，而卡片式的滑動設計可以很好的解決空間有限的問題。

　　2.區分卡片內容

　　一張卡片就像一個容器，可以把不同種類的內容放在不同的卡片上，既能很好的區分內容，又能保持界面的統一。

　　每張卡片的內容代表一個分類，它是一個載體，承載著一定的內容，概括了一個類別的信息。

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

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

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

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

　　三、分割線設計

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

　　1.分界線

　　貫穿整個頁面的分割線將內容分割成獨立的信息。

　　2.分隔線

　　也稱為嵌入式分割線，通常在分割線前留有間隙，以指示統一模塊下的內容

　　四.總結

　　設計潮流總是在變。一個設計的開始，首先要分析它適合什么風格，而不是盲目跟風。設計風格沒有好壞，只有適合與否。無框設計、卡片設計、分割線設計也是如此。與卡片設計和無框設計相比，分割線設計是最保守的設計方法之一。應根據具體的產品要求做出適當的選擇。但要做出高質量的分割線設計，就要處理好“線”的間距、粗細、顏色。