AAA教育

一. 界面布局樣式有哪些？

在做界面設(shè)計(jì)時(shí)，我們?yōu)榱藚^(qū)分信息結(jié)構(gòu)及層次，通常采用以下3種布局樣式：卡片式設(shè)計(jì)、分割線(xiàn)、無(wú)框設(shè)計(jì)。

二. 卡片式設(shè)計(jì)

自從Android4.1上Google Now登臺(tái)亮相之后，卡片式這種設(shè)計(jì)思路／風(fēng)格慢慢就流行了起來(lái)，被大家所關(guān)注和使用。

Google將它稱(chēng)之為“Inside Out design（由內(nèi)而外式）”，它的本質(zhì)是更好的處理信息集合，那么卡片式設(shè)計(jì)適合運(yùn)用在什么地方呢？

• 增加空間利用率。
• 區(qū)分不同維度內(nèi)容。
• 提升可操作性。

1. 增加空間利用率

相比于傳統(tǒng)列表式布局，卡片式設(shè)計(jì)能更好的打破原有的框架。

比如，在傳統(tǒng)列表下，內(nèi)容一般為縱向滾動(dòng)操作，展示的內(nèi)容有限。而采用卡片式的布局，在縱向的內(nèi)容流里，還可以很好的增加橫向滑動(dòng)的內(nèi)容區(qū)域，而且看起來(lái)很整體。

比如，知乎feed流里增加知乎live的橫向滑動(dòng)內(nèi)容。

2. 區(qū)分不同維度內(nèi)容

卡片，其實(shí)比較像一個(gè)容器，你可以把不同維度的內(nèi)容放入不同的卡片中，使其在內(nèi)容區(qū)分的同時(shí)，還能保持界面的統(tǒng)一性。

比如：淘寶采用卡片處理信息的層級(jí)。第一個(gè)卡片承載著：個(gè)人信息及偏好；第二個(gè)卡片：購(gòu)買(mǎi)操作后的所有關(guān)鍵流程；第三個(gè)卡片：一些淘寶內(nèi)使用率不高的功能聚合；第四個(gè)卡片，是對(duì)支付寶和理財(cái)產(chǎn)品的一種推廣；等等。

每個(gè)卡片都是不同維度，相對(duì)獨(dú)立的，但通過(guò)不同大小的卡片歸納后，比起傳統(tǒng)列表項(xiàng) + 分割線(xiàn) + 標(biāo)題的視覺(jué)效率要高很多，顯得更有秩序。

再比如：荔枝FM、微信讀書(shū)，也是采用卡片式設(shè)計(jì)，來(lái)歸納不同維度的信息內(nèi)容。

還有，微信公眾號(hào)和appstore，同樣是采用這種處理方式，把繁雜的信息以時(shí)間維度，歸納到不同卡片中。

3. 提升可操作性

卡片是一種擬真元素，可以被覆蓋、堆疊、移動(dòng)、劃去，這樣能更好的拓展內(nèi)容塊的視覺(jué)深度和可操作性。

比如：iPhone自帶的「提醒事項(xiàng)」APP，就是采用卡片堆疊的方式。用戶(hù)可按照標(biāo)題快速查找目標(biāo)備忘錄，同時(shí)進(jìn)行點(diǎn)擊操作，打開(kāi)卡片內(nèi)容。

探探，運(yùn)用卡片式設(shè)計(jì)，實(shí)現(xiàn)左右滑動(dòng)代表感不感興趣的操作，從而增加產(chǎn)品的趣味性。

但是，卡片也有它的弊端。如果不在合適的場(chǎng)合下，盲目的使用卡片設(shè)計(jì)，也會(huì)使你的設(shè)計(jì)變得低效和空間浪費(fèi)。

舉個(gè)例子，下面這種效果圖，設(shè)計(jì)師們應(yīng)該都不陌生，因?yàn)槭窃诟鞔笤O(shè)計(jì)網(wǎng)站上經(jīng)?？吹降摹?/span>

但是，你認(rèn)真分析下，好好的一個(gè)通訊錄，明明只有簡(jiǎn)單的頭像和名字的元素，非要包裹在卡片里，而且卡片與卡片之間還要留出間距。為了視覺(jué)效果，空間這么浪費(fèi)，并且影響效率。

如果按照微信的策略，好友可以加到5000，那么找個(gè)人不得向上滑動(dòng)很久么？

 

三. 分割線(xiàn)設(shè)計(jì)

在UI設(shè)計(jì)中，最傳統(tǒng)也是最常見(jiàn)的分隔方式是「線(xiàn)」。它能起到分隔、組織、細(xì)化的作用，幫助用戶(hù)了解頁(yè)面層次，賦予內(nèi)容組織性。

而「線(xiàn)」，可以分為以下兩種：

• 全出血分隔線(xiàn)。
• 內(nèi)嵌式分割線(xiàn)。

1. 全出血分隔線(xiàn)

「出血」是一種平面印刷中的概念，而「全出血」指的是分隔線(xiàn)橫向貫穿整個(gè)頁(yè)面，一般為了區(qū)分更加獨(dú)立性的內(nèi)容信息。

比如：知乎的「想法」feed流里，就是采用全出血分隔線(xiàn)的形式，讓信息分隔的更明顯，更加獨(dú)立性。

比如：google photo，用全出血分隔線(xiàn)，來(lái)區(qū)分上面的默認(rèn)分類(lèi)和下面相冊(cè)的模塊內(nèi)容。

2. 內(nèi)嵌式分割線(xiàn)

內(nèi)嵌式分割線(xiàn)，不同于前者，它一般會(huì)在「線(xiàn)」的前面留有缺口，來(lái)區(qū)分統(tǒng)一模塊下的相關(guān)內(nèi)容，目的是為了讓用戶(hù)瀏覽大量相關(guān)內(nèi)容時(shí)，更加高效。

比如：知乎的「更多」頁(yè)面，卡片內(nèi)采用內(nèi)嵌式分割線(xiàn)，來(lái)區(qū)分同一維度下有關(guān)聯(lián)的內(nèi)容。

比如第二個(gè)模塊里，我的創(chuàng)作、我的收藏、我的關(guān)注、我的邀請(qǐng)回答，都是「我」操作后的內(nèi)容信息。而第三個(gè)模塊，已購(gòu)內(nèi)容、我的私家課、我的Live等等，都是跟「錢(qián)」或「付費(fèi)」相關(guān)的。

所以，采用內(nèi)嵌式分割線(xiàn)，比較適合這種劃分有關(guān)聯(lián)性的內(nèi)容，同時(shí)能提升瀏覽效率。

其實(shí)，采用「線(xiàn)」的分割方式，相對(duì)其它兩種（卡片式設(shè)計(jì)、無(wú)框設(shè)計(jì)）是比較保守的解決方案，但是，前提是要處理好「線(xiàn)」的間距、粗細(xì)、顏色等問(wèn)題。

 

四. 無(wú)框設(shè)計(jì)

無(wú)框設(shè)計(jì)是近兩年流行起來(lái)的一種新的趨勢(shì)，是去除界面中的邊框，分割線(xiàn)，用間距來(lái)區(qū)分內(nèi)容。

它適合運(yùn)用于：

• 大圖為主。
• 內(nèi)容有規(guī)律。
• 小眾且垂直產(chǎn)品。

1. 大圖為主

大圖為主指的是以圖片為主的產(chǎn)品，每張圖片本身就可以起到分割的作用，因此，不需要采用多余的線(xiàn)或邊框進(jìn)行分割。

比如：instagram，發(fā)布圖片前，用戶(hù)被強(qiáng)制對(duì)圖片進(jìn)行正方形截取，才能保證圖片在feed流里的寬度，撐滿(mǎn)全屏，從而看起來(lái)很整體。

可能有的同學(xué)會(huì)問(wèn)，為什么國(guó)外的產(chǎn)品就這么高大上，微博怎么就不能去分割線(xiàn)，做減法，搞得洋氣一些呢？

那么大牙來(lái)帶你分析一下。instagram只支持發(fā)送固定尺寸的圖片和視頻，而微博支持發(fā)送圖片、文章、視頻、純文字、簽到、點(diǎn)評(píng)等等的內(nèi)容。

同時(shí)微博feed流里的圖片，支持1張－9張不同情況的排版。而且1張圖片時(shí)，為了更好的呈現(xiàn)出用戶(hù)的原圖比例，還要處理成4:3，16:9，正方形，以及特殊尺寸的縮略樣式，同時(shí)還有g(shù)if圖的情況，還支持你在自己狀態(tài)下添加不同話(huà)題。那么你想只用間距留白來(lái)區(qū)分？場(chǎng)面會(huì)像剛地震完的樣子……

所以現(xiàn)在想，微博用卡片形式來(lái)承載這些內(nèi)容信息，還是有一定的原因的。

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

內(nèi)容有規(guī)律指的是，留白間距上下的內(nèi)容，最好是相對(duì)一致的、重復(fù)的、親密的，這樣用戶(hù)會(huì)下意識(shí)的將其分為一組。

比如，Airbnb采用的無(wú)框設(shè)計(jì)，原因是它們的信息元素很統(tǒng)一、重復(fù)，才給人營(yíng)造出比較整體的感覺(jué)。同時(shí)，合理的運(yùn)用大標(biāo)題也起到關(guān)鍵性作用。

而同樣采用無(wú)框設(shè)計(jì)的「下廚房」APP，首屏由于每個(gè)模塊信息元素不一致，而且模塊內(nèi)元素的左右間距也不一樣，字號(hào)種類(lèi)過(guò)多，導(dǎo)致界面看起來(lái)相對(duì)有些雜亂。

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

小眾且垂直的產(chǎn)品，一般情況下目標(biāo)用戶(hù)聚焦，功能簡(jiǎn)潔。因此，能夠比較好的運(yùn)用無(wú)框設(shè)計(jì)，跳出傳統(tǒng)的規(guī)范做出創(chuàng)新的設(shè)計(jì)。

比如：輕芒雜志，采用無(wú)框設(shè)計(jì)的同時(shí)打破傳統(tǒng)的移動(dòng)端瀏覽體驗(yàn)，更符合它們自己的產(chǎn)品調(diào)性。

下面是FOOTAGE，一款小眾且文藝的產(chǎn)品，由VUE的團(tuán)隊(duì)設(shè)計(jì)的。他們采用無(wú)框設(shè)計(jì)的前提是，每個(gè)界面元素有限，功能內(nèi)容簡(jiǎn)潔。

但如果你是像微博，淘寶，微信等體量的產(chǎn)品，用戶(hù)群體廣，內(nèi)容繁雜且層級(jí)較深。那么，你需要找到一個(gè)效率更高的信息呈現(xiàn)和交互的基礎(chǔ)隱喻，無(wú)框設(shè)計(jì)可能就不太適合了。

希望這篇文章對(duì)你有所幫助。