如何選擇UI 界面布局樣式？來看丁香園設計師的總結！

大海一向鼓勵本身多總結，多積累，多分享，最近看到一篇大牙的文章，對于不要盲從趨勢，總結的分外好，于是有感而發(fā)，在此基礎上，做了一些拓展衍生。

什么是界面布局樣式？

界面布局樣式是指用于區(qū)分信息內容，條理的版式設計的詳細體例。

總結和了解目前常用的界面布局樣式，可以讓設計師快速決策，選擇合適的設計體例。

界面布局樣式有哪些？

一、卡

行使「卡」設計界面，對應的是如今流行的「卡片式設計」，比如：APP Store 的 Today 網頁。

大海將從以下 3 點描述卡片設計的上風：

• 天真性

• 信息區(qū)分

• 操作性和趣味性

1. 天真性

示例如下，分別是 Instagram，知乎，微博的首頁。

Instagram 的「保舉用戶」模塊，知乎的「知乎書店」模塊，微博的「問答」模塊，都行使了可以橫向滑動的卡片設計，打破了訂閱流信息垂直展示的限定，從而展示更多的信息。

2. 信息區(qū)分

信息類型

示例如下，分別是天貓，嚴選，微信讀書的小我中間截圖。

這三個「小我中間」的設計，都行使卡片設計，對不同類型的信息進行了區(qū)分和歸整。

• 天貓：第一張卡片式用戶小我信息，以及用戶本身珍藏的內容和足跡數據；第二張卡片都是訂單數據；第三張卡片是運營卡片，用于專門的大型活動的內容展示

• 考拉：第一張卡片是用戶小我信息，以及用戶本身珍藏的內容和足跡數據；第二張卡片都是訂單數據；第三張卡片是用戶相干的其他信息；第四張卡片是考拉提供的服務。

• 微信讀書：第一張卡片是用戶小我信息；第二張卡片是用戶賬戶的基本數據；第三張卡片是用戶本身生成的相干內容；

時間

示例如下，分別是 APP Store，微信公眾號，微博的截圖。

這三個設計，都把復雜的內容信息，用卡片設計的情勢，按照時間維度進行了整頓和排序。

3. 操作性和趣味性

示例如下，分別是付出寶，ZUO，探探的截圖。

卡片是一種模仿物理世界的設計情勢，擁有可操作隱喻，可以被覆蓋、堆疊、移動、劃去。

• 付出寶卡包：模擬物理世界真實的銀行卡設計，行使用戶已有的銀行卡查看風俗，讓用戶快速理解和查看已綁定的銀行卡。

• ZUO：「ZUO」是一款小眾的，風趣奇怪創(chuàng)意的內容分享產品。主打追尋更美好的可能，產品設計別具特色。左滑卡片可以切換內容的設計，讓產品體驗更加靈動風趣。

• 探探：一款陌生人社交軟件，廣告主打：左滑不喜好，右滑喜好的體驗，凸顯本身在同類型軟件中的體驗差異化，用戶的感受更加奇怪風趣。

4. 卡片設計的反例

自從 iOS 11 之后，卡片設計的趨勢就被推向了高潮。設計網站上有許多卡片式設計作品出現。

卡片設計經常會呈現出比較好的視覺結果，但是卡片設計用的不好，會導致虛耗空間，降低服從。

示例如下：是大海從 dribbble 上找來的設計，通信錄的設計行使了卡片設計。

當用戶必要探求聯系人時，呈「Z字型」閱讀曲線，遠沒有微信通信錄的「直線型」閱讀服從高。

二、線

「線」指的是 APP 設計中最常見的「分割線」，在分割線當中可以分為兩類：

1. 貫穿式

「貫穿式」是指，線長度貫穿屏幕，左右邊距為零。貫穿式分割線可以讓被分割的信息的自力性變強。

示例如下：分別是豆瓣的首頁，網易云音樂的動態(tài)截圖。

兩者的共同點是，每一塊信息的內容較多，關聯性弱。必要用貫穿式分割性，讓每一個信息內容，更加自力。

2. 內嵌式

「內嵌式」是指，線的左右邊距留有閑暇。內嵌式分割線，可以有助于信息閱讀的流暢性。

示例如下：分別是 APP Store 今日主題的列表頁，36Kr 的小我中間網頁。

貫穿式和內嵌式經常是同時使用的，如下圖：網易嚴選的填寫訂單網頁。

圖中列表「商品合計」「運費」是相對關聯性較強的，因此這兩者之間用了內嵌式分割線?！肝乙_發(fā)票」和它們之間是相對自力的，因此使用貫穿式分割線。

3. 分割線設計的反例

分割線設計是界面當中最常用的元素，大?？戳诉@么多 APP，截了這么多圖，都沒有發(fā)現界面中一根線都沒有使用的產品。

分割線設計要細致是否應該使用，以及使用時線的顏色，粗細。

下圖中：知乎的「小我中間」，來源于網絡的日歷設計。

知乎：線的顏色用的過重，導致當看到這個網頁時，會感受到滿眼都是線。改進方法有兩種：把線改細，改淡；把列表筆墨改重?？偨Y下來就是拉開筆墨和線的對比。

日歷：日期自己的排版已經把信息區(qū)分的比較顯明，此時不必要使用分割線。假設 「親密」 「對比」 「重復」 足以讓信息得到區(qū)分，不使用分割線，可以讓你的設計，更加透氣簡潔。

三、間距

行使「間距」設計界面，對應的是如今流行的「無框設計」，不用分割線，純粹用間距實現信息的排版。

大海將從以下2點描述其適用性：

• 圖片為主

• 內容少且有規(guī)律

1. 圖片為主

示例如下：分別是 Instagram，愛彼迎，紅板報的界面截圖。這些網頁中，均以圖片為主。圖片自己的邊緣具備分隔作用。

2. 內容少且有規(guī)律

示例1：愛彼迎的「故事網頁」和「搜索效果頁」，兩者都只有2種信息版式。內容少且有規(guī)律。

示例2：輕芒的「分類頁」和「類別首頁」，分類頁只有一種版式，并橫向排版展示。類別首頁只有一屏信息。

總結

卡，線，間距都是網頁當中基礎元素，盼望本篇文章可以幫助設計師掌握和了解這3個基礎元素的適用性。在設計實行中，更加風馳電掣，如沐春風。

迎接關注作者的微信公眾號：「花廠設計招待所」

圖片素材作者：Dennis Cortés

圖趣之前有關布局的網頁教程

扔掉黃金比例，網頁布局還能這樣做

http://irelandcustomcontracting.com/Tutorial/di2547.html

詳解創(chuàng)造完美網站布局的20個步驟

http://irelandcustomcontracting.com/Tutorial/di2608.html