如何選擇UI 界面布局樣式？來(lái)看丁香園設(shè)計(jì)師的總結(jié)！

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

什么是界面布局樣式？

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

總結(jié)和了解目前常用的界面布局樣式，可以讓設(shè)計(jì)師快速?zèng)Q策，選擇合適的設(shè)計(jì)體例。

界面布局樣式有哪些？

一、卡

行使「卡」設(shè)計(jì)界面，對(duì)應(yīng)的是如今流行的「卡片式設(shè)計(jì)」，比如：APP Store 的 Today 網(wǎng)頁(yè)。

大海將從以下 3 點(diǎn)描述卡片設(shè)計(jì)的上風(fēng)：

• 天真性

• 信息區(qū)分

• 操作性和趣味性

1. 天真性

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

Instagram 的「保舉用戶(hù)」模塊，知乎的「知乎書(shū)店」模塊，微博的「問(wèn)答」模塊，都行使了可以橫向滑動(dòng)的卡片設(shè)計(jì)，打破了訂閱流信息垂直展示的限定，從而展示更多的信息。

2. 信息區(qū)分

信息類(lèi)型

示例如下，分別是天貓，嚴(yán)選，微信讀書(shū)的小我中間截圖。

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

• 天貓：第一張卡片式用戶(hù)小我信息，以及用戶(hù)本身珍藏的內(nèi)容和足跡數(shù)據(jù)；第二張卡片都是訂單數(shù)據(jù)；第三張卡片是運(yùn)營(yíng)卡片，用于專(zhuān)門(mén)的大型活動(dòng)的內(nèi)容展示

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

• 微信讀書(shū)：第一張卡片是用戶(hù)小我信息；第二張卡片是用戶(hù)賬戶(hù)的基本數(shù)據(jù)；第三張卡片是用戶(hù)本身生成的相干內(nèi)容；

時(shí)間

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

這三個(gè)設(shè)計(jì)，都把復(fù)雜的內(nèi)容信息，用卡片設(shè)計(jì)的情勢(shì)，按照時(shí)間維度進(jìn)行了整頓和排序。

3. 操作性和趣味性

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

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

• 付出寶卡包：模擬物理世界真實(shí)的銀行卡設(shè)計(jì)，行使用戶(hù)已有的銀行卡查看風(fēng)俗，讓用戶(hù)快速理解和查看已綁定的銀行卡。

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

• 探探：一款陌生人社交軟件，廣告主打：左滑不喜好，右滑喜好的體驗(yàn)，凸顯本身在同類(lèi)型軟件中的體驗(yàn)差異化，用戶(hù)的感受更加奇怪風(fēng)趣。

4. 卡片設(shè)計(jì)的反例

自從 iOS 11 之后，卡片設(shè)計(jì)的趨勢(shì)就被推向了高潮。設(shè)計(jì)網(wǎng)站上有許多卡片式設(shè)計(jì)作品出現(xiàn)。

卡片設(shè)計(jì)經(jīng)常會(huì)呈現(xiàn)出比較好的視覺(jué)結(jié)果，但是卡片設(shè)計(jì)用的不好，會(huì)導(dǎo)致虛耗空間，降低服從。

示例如下：是大海從 dribbble 上找來(lái)的設(shè)計(jì)，通信錄的設(shè)計(jì)行使了卡片設(shè)計(jì)。

當(dāng)用戶(hù)必要探求聯(lián)系人時(shí)，呈「Z字型」閱讀曲線，遠(yuǎn)沒(méi)有微信通信錄的「直線型」閱讀服從高。

二、線

「線」指的是 APP 設(shè)計(jì)中最常見(jiàn)的「分割線」，在分割線當(dāng)中可以分為兩類(lèi)：

1. 貫穿式

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

示例如下：分別是豆瓣的首頁(yè)，網(wǎng)易云音樂(lè)的動(dòng)態(tài)截圖。

兩者的共同點(diǎn)是，每一塊信息的內(nèi)容較多，關(guān)聯(lián)性弱。必要用貫穿式分割性，讓每一個(gè)信息內(nèi)容，更加自力。

2. 內(nèi)嵌式

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

示例如下：分別是 APP Store 今日主題的列表頁(yè)，36Kr 的小我中間網(wǎng)頁(yè)。

貫穿式和內(nèi)嵌式經(jīng)常是同時(shí)使用的，如下圖：網(wǎng)易嚴(yán)選的填寫(xiě)訂單網(wǎng)頁(yè)。

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

3. 分割線設(shè)計(jì)的反例

分割線設(shè)計(jì)是界面當(dāng)中最常用的元素，大?？戳诉@么多 APP，截了這么多圖，都沒(méi)有發(fā)現(xiàn)界面中一根線都沒(méi)有使用的產(chǎn)品。

分割線設(shè)計(jì)要細(xì)致是否應(yīng)該使用，以及使用時(shí)線的顏色，粗細(xì)。

下圖中：知乎的「小我中間」，來(lái)源于網(wǎng)絡(luò)的日歷設(shè)計(jì)。

知乎：線的顏色用的過(guò)重，導(dǎo)致當(dāng)看到這個(gè)網(wǎng)頁(yè)時(shí)，會(huì)感受到滿眼都是線。改進(jìn)方法有兩種：把線改細(xì)，改淡；把列表筆墨改重。總結(jié)下來(lái)就是拉開(kāi)筆墨和線的對(duì)比。

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

三、間距

行使「間距」設(shè)計(jì)界面，對(duì)應(yīng)的是如今流行的「無(wú)框設(shè)計(jì)」，不用分割線，純粹用間距實(shí)現(xiàn)信息的排版。

大海將從以下2點(diǎn)描述其適用性：

• 圖片為主

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

1. 圖片為主

示例如下：分別是 Instagram，愛(ài)彼迎，紅板報(bào)的界面截圖。這些網(wǎng)頁(yè)中，均以圖片為主。圖片自己的邊緣具備分隔作用。

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

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

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

總結(jié)

卡，線，間距都是網(wǎng)頁(yè)當(dāng)中基礎(chǔ)元素，盼望本篇文章可以幫助設(shè)計(jì)師掌握和了解這3個(gè)基礎(chǔ)元素的適用性。在設(shè)計(jì)實(shí)行中，更加風(fēng)馳電掣，如沐春風(fēng)。

迎接關(guān)注作者的微信公眾號(hào)：「花廠設(shè)計(jì)招待所」

圖片素材作者：Dennis Cortés

圖趣之前有關(guān)布局的網(wǎng)頁(yè)教程

扔掉黃金比例，網(wǎng)頁(yè)布局還能這樣做

http://m.likemindfilms.com/Tutorial/di2547.html

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

http://m.likemindfilms.com/Tutorial/di2608.html