什麼是界面佈局樣式？
界面佈局樣式是指用於區分信息內容，層次的版式設計的具體方式。
總結和了解目前常用的界面佈局樣式，可以讓設計師快速決策，選擇合適的設計方式。
界面佈局樣式有哪些？
一、卡
利用「卡」設計界面，對應的是現在流行的「卡片式設計」，比如：APP Store 的 Today 頁面。
大海將從以下 3 點描述卡片設計的優勢：
- 靈活性
- 信息區分
- 操作性和趣味性
1. 靈活性
示例如下，分別是 Instagram，知乎，微博的首頁。
Instagram 的「推薦用戶」模塊，知乎的「知乎書店」模塊，微博的「問答」模塊，都利用了可以橫向滑動的卡片設計，打破了訂閱流信息垂直展示的限制，從而展示更多的信息。
2. 信息區分
信息類型
示例如下，分別是天貓，嚴選，微信讀書的個人中心截圖。
這三個「個人中心」的設計，都利用卡片設計，對不同類型的信息進行了區分和歸整。
- 天貓：第一張卡片式用戶個人信息，以及用戶自己收藏的內容和足跡數據；第二張卡片都是訂單數據；第三張卡片是運營卡片，用於專門的大型活動的內容展示
- 考拉：第一張卡片是用戶個人信息，以及用戶自己收藏的內容和足跡數據；第二張卡片都是訂單數據；第三張卡片是用戶相關的其他信息；第四張卡片是考拉提供的服務。
- 微信讀書：第一張卡片是用戶個人信息；第二張卡片是用戶賬戶的基本數據；第三張卡片是用戶自己生成的相關內容；
時間
示例如下，分別是 APP Store，微信公眾號，微博的截圖。
這三個設計，都把複雜的內容信息，用卡片設計的形式，按照時間維度進行了整理和排序。
3. 操作性和趣味性
示例如下，分別是支付寶，ZUO，探探的截圖。
卡片是一種模擬物理世界的設計形式，擁有可操作隱喻，可以被覆蓋、堆疊、移動、劃去。
- 支付寶卡包：模仿物理世界真實的銀行卡設計，利用用戶已有的銀行卡查看習慣，讓用戶快速理解和查看已綁定的銀行卡。
- ZUO：「ZUO」是一款小眾的，有趣新鮮創意的內容分享產品。主打追尋更美好的可能，產品設計別具特色。左滑卡片可以切換內容的設計，讓產品體驗更加靈動有趣。
- 探探：一款陌生人社交軟件，廣告主打：左滑不喜歡，右滑喜歡的體驗，凸顯自己在同類型軟件中的體驗差異化，用戶的感受更加新鮮有趣。
4. 卡片設計的反例
自從 iOS 11 之後，卡片設計的趨勢就被推向了高潮。設計網站上有很多卡片式設計作品出現。
卡片設計經常會呈現出比較好的視覺效果，但是卡片設計用的不好，會導致浪費空間，降低效率。
示例如下：是大海從 dribbble 上找來的設計，通訊錄的設計利用了卡片設計。
當用戶需要尋找聯繫人時，呈「Z字型」閱讀曲線，遠沒有微信通訊錄的「直線型」閱讀效率高。
二、線
「線」指的是 APP 設計中最常見的「分割線」，在分割線當中可以分為兩類：
1. 貫穿式
「貫穿式」是指，線長度貫穿屏幕，左右邊距為零。貫穿式分割線可以讓被分割的信息的獨立性變強。
示例如下：分別是豆瓣的首頁，網易雲音樂的動態截圖。
兩者的共同點是，每一塊信息的內容較多，關聯性弱。需要用貫穿式分割性，讓每一個信息內容，更加獨立。
2. 內嵌式
「內嵌式」是指，線的左右邊距留有空隙。內嵌式分割線，可以有助於信息閱讀的流暢性。
示例如下：分別是 APP Store 今日主題的列表頁，36Kr 的個人中心頁面。
貫穿式和內嵌式經常是同時使用的，如下圖：網易嚴選的填寫訂單頁面。
圖中列表「商品合計」「運費」是相對關聯性較強的，因此這兩者之間用了內嵌式分割線。「我要開發票」和它們之間是相對獨立的，因此使用貫穿式分割線。
3. 分割線設計的反例
分割線設計是界面當中最常用的元素，大海看了這麼多 APP，截了這麼多圖，都沒有發現界面中一根線都沒有使用的產品。
分割線設計要注意是否應該使用，以及使用時線的顏色，粗細。
下圖中：知乎的「個人中心」，來源於網絡的日曆設計。
知乎：線的顏色用的過重，導致當看到這個頁面時，會感受到滿眼都是線。改進方法有兩種：把線改細，改淡；把列表文字改重。總結下來就是拉開文字和線的對比。
日曆：日期本身的排版已經把信息區分的比較明顯，此時不需要使用分割線。假設 「親密」 「對比」 「重複」 足以讓信息得到區分，不使用分割線，可以讓你的設計，更加透氣簡潔。
三、間距
利用「間距」設計界面，對應的是現在流行的「無框設計」，不用分割線，純粹用間距實現信息的排版。
大海將從以下2點描述其適用性：
- 圖片為主
- 內容少且有規律
1. 圖片為主
示例如下：分別是 Instagram，愛彼迎，紅板報的界面截圖。這些頁面中，均以圖片為主。圖片本身的邊緣具備分隔作用。
2. 內容少且有規律
示例1：愛彼迎的「故事頁面」和「搜索結果頁」，兩者都只有2種信息版式。內容少且有規律。
示例2：輕芒的「分類頁」和「類別首頁」，分類頁只有一種版式，並橫向排版展示。類別首頁只有一屏信息。
總結
卡，線，間距都是頁面當中基礎元素，希望本篇文章可以幫助設計師掌握和了解這3個基礎元素的適用性。在設計執行中，更加風馳電掣，如沐春風。
閱讀更多 路漫UED 的文章
