轉(zhuǎn)自：大牙的設(shè)計筆記
每年都會有一波又一波的設(shè)計趨勢流行起來，被設(shè)計師們追隨和模仿著辑莫。大家總覺得迎合著趨勢做的設(shè)計肯定不會差学歧。
比如，之前流行的卡片設(shè)計各吨，很多設(shè)計師都采用這種形式枝笨，來區(qū)隔內(nèi)容模塊；今年流行的無框設(shè)計，一窩蜂的開始去分割線横浑、去邊框剔桨，做大面積留白的設(shè)計。
然而徙融，你有沒有反問自己是在被趨勢牽著鼻子走洒缀，還是真正深思熟慮后，選擇更符合自己產(chǎn)品定位和內(nèi)容傳達(dá)的表現(xiàn)形式欺冀？
最近我也在思考這個問題树绩，對不同產(chǎn)品界面的布局樣式進(jìn)行分析和梳理，下來分享給大家脚猾。
界面布局樣式有哪些葱峡？
在做界面設(shè)計時，我們?yōu)榱藚^(qū)分信息結(jié)構(gòu)及層次龙助，通常采用以下3種布局樣式：卡片式設(shè)計砰奕、分割線、無框設(shè)計提鸟。
? 1.卡片式設(shè)計??
自從Android4.1上Google Now登臺亮相之后军援，卡片式這種設(shè)計思路／風(fēng)格慢慢就流行了起來，被大家所關(guān)注和使用称勋。
Google將它稱之為“Inside Out design（由內(nèi)而外式）”胸哥，它的本質(zhì)是更好的處理信息集合，那么卡片式設(shè)計適合運(yùn)用在什么地方呢赡鲜？a.增加空間利用率空厌；b.區(qū)分不同維度內(nèi)容；c.提升可操作性银酬。
a.增加空間利用率
相比于傳統(tǒng)列表式布局嘲更，卡片式設(shè)計能更好的打破原有的框架。
比如揩瞪，在傳統(tǒng)列表下赋朦，內(nèi)容一般為縱向滾動操作，展示的內(nèi)容有限李破，而采用卡片式的布局宠哄，在縱向的內(nèi)容流里，還可以很好的增加橫向滑動的內(nèi)容區(qū)域嗤攻，而且看起來很整體毛嫉。
比如，知乎feed流里增加知乎live的橫向滑動內(nèi)容妇菱。?
b.區(qū)分不同維度內(nèi)容
卡片承粤，其實比較像一個容器惊畏，你可以把不同維度的內(nèi)容放入不同的卡片中，使其在內(nèi)容區(qū)分的同時密任，還能保持界面的統(tǒng)一性。
比如：淘寶采用卡片處理信息的層級偷俭。第一個卡片承載著：個人信息及偏好浪讳；第二個卡片：購買操作后的所有關(guān)鍵流程；第三個卡片：一些淘寶內(nèi)使用率不高的功能聚合涌萤；第四個卡片淹遵，是對支付寶和理財產(chǎn)品的一種推廣；等等...?
每個卡片都是不同維度负溪，相對獨立的透揣，但通過不同大小的卡片歸納后，比起傳統(tǒng)列表項?+?分割線?+?標(biāo)題的視覺效率要高很多川抡，顯得更有有秩序辐真。
再比如：荔枝FM、微信讀書崖堤，也是采用卡片式設(shè)計侍咱，來歸納不同維度的信息內(nèi)容。?
還有密幔，微信公眾號和appstore楔脯，同樣是采用這種處理方式，把繁雜的信息以時間維度胯甩，歸納到不同卡片中昧廷。
c.提升可操作性
卡片是一種擬真元素，可以被覆蓋偎箫、堆疊木柬、移動、劃去镜廉，這樣能更好的拓展內(nèi)容塊的視覺深度和可操作性弄诲。
比如：iPhone自帶的“提醒事項”APP，就是采用卡片堆疊的方式娇唯，用戶可按照標(biāo)題快速查找目標(biāo)備忘錄齐遵，同時進(jìn)行點擊操作，打開卡片內(nèi)容塔插。
探探梗摇，運(yùn)用卡片式設(shè)計，實現(xiàn)左右滑動代表感不感興趣的操作想许，從而增加產(chǎn)品的趣味性伶授。
但是断序，卡片也有它的弊端，如果不在何時的場合盲目的使用卡片設(shè)計糜烹，也會使你的設(shè)計變得低效和空間浪費(fèi)违诗。
舉個例子，下面這種效果圖，設(shè)計師們應(yīng)該都不陌生，因為在各大設(shè)計網(wǎng)站上經(jīng)衬っ撸看到的肯骇。
但是，你認(rèn)真分析下，好好的一個通訊錄，明明只有簡單的頭像和名字的元素，非要包裹在卡片里绅项，而且卡片與卡片之間還要留出間距。為了視覺效果比肄，空間這么浪費(fèi)快耿，并且影響效率。
如果按照微信的策略好友可以加到5000芳绩，那找個人不得向上滑死么润努，肯定想日了哈士奇了（bi～～～消音器）。
? 2.分割線設(shè)計??
在UI設(shè)計中示括，最傳統(tǒng)也是最常見的的分隔方式是“線”铺浇。它能起到分隔、組織垛膝、細(xì)化的作用鳍侣，幫助用戶了解頁面層次，賦予內(nèi)容組織性吼拥。
而“線”倚聚，可以分為：a.全出血分隔線，b.內(nèi)嵌式分割線凿可。
a.全出血分隔線
“出血”是一種平面印刷中的概念惑折，而“全出血”指的是分隔線橫向貫穿整個頁面，一般為了區(qū)分更加獨立性的內(nèi)容信息枯跑。
比如：知乎的“想法”feed流里惨驶，就是采用全出血分隔線的形式，讓信息分隔的更明顯敛助，更加獨立性粗卜。 （可以點擊看大圖）
比如：google photo，用全出血分割線纳击，來區(qū)分上面的默認(rèn)分類和下面相冊的模塊內(nèi)容续扔。
b.內(nèi)嵌式分割線攻臀。
內(nèi)嵌式分割線，不同于前者纱昧，它一般會在“線”的前面留有缺口刨啸，來區(qū)分統(tǒng)一模塊下的相關(guān)內(nèi)容，目的是為了讓用戶瀏覽大量相關(guān)內(nèi)容時识脆，更加高效呜投。
比如：知乎的“更多”頁面，卡片內(nèi)采用內(nèi)嵌式分割線存璃，來區(qū)分同一維度下有關(guān)聯(lián)的內(nèi)容。
比如第二個模塊里雕拼，我的創(chuàng)作纵东、我的收藏、我的關(guān)注啥寇、我的邀請回答偎球，都是“我”操作后的內(nèi)容信息；而第三個模塊辑甜，已購內(nèi)容衰絮、我的私家課、我的Live...磷醋，都是跟“錢”或“付費(fèi)”相關(guān)的猫牡。
所以，采用內(nèi)嵌式分割線邓线，比較適合這種劃分有關(guān)聯(lián)性的內(nèi)容淌友，同時有提升瀏覽效率。?
其實骇陈，采用“線”的分割方式震庭，相對其它兩種（卡片式設(shè)計、無框設(shè)計）是比較保守的解決方案你雌，但是器联，前提是要處理好“線”的間距、粗細(xì)婿崭、顏色拨拓，等問題。
? 3.無框設(shè)計??
無框設(shè)計是近兩年流行起來的的一種新的趨勢氓栈，是去除界面中的邊框千元，分割線，用間距來區(qū)分內(nèi)容颤绕。
它適合運(yùn)用于：a.大圖為主幸海；b.內(nèi)容有規(guī)律祟身，c.小眾且垂直產(chǎn)品。
a.大圖為主
大圖為主指的是以圖片為主的產(chǎn)品物独，每張圖片本身就可以起到分割的作用袜硫，因此，不需要采用多余的線或邊框進(jìn)行分割挡篓。
比如：instagram婉陷，發(fā)布圖片前，用戶被強(qiáng)制對圖片進(jìn)行正方形截取官研，才能保證圖片在feed流里的寬度秽澳，撐滿全屏，從而看起來很整體戏羽。?
可能有的同學(xué)會問担神，為什么國外的產(chǎn)品就這么高大上，微博怎么就不能去分割線始花，做減法妄讯，搞的洋氣一些呢？
那么大牙來帶你分析一下哈酷宵！instagram只支持發(fā)送固定尺寸的圖片和視頻亥贸，而你想人家微博支持發(fā)送圖片、文章浇垦、視頻炕置、純文字、簽到男韧、點評...等等的內(nèi)容讹俊。
同時微博feed流里的圖片，支持1張－9張不同情況的排版煌抒，而且1張圖片時仍劈，為了更好的呈現(xiàn)出用戶的原圖比例，還要處理成4:3寡壮，16:9贩疙，正方形，以及特殊尺寸的縮略樣式况既，同時還有g(shù)if圖的情況这溅，還支持你在自己狀態(tài)下添加不同話題。那么你想只用間距留白來區(qū)分棒仍？場面會像剛地震完的樣子...（認(rèn)真臉）
所以現(xiàn)在想悲靴，微博用卡片形式來承載這些內(nèi)容信息，還是有一定的原因的莫其。
b.內(nèi)容有規(guī)律癞尚。
內(nèi)容有規(guī)律指的是耸三，留白間距上下的內(nèi)容，最好是相對一致的浇揩、重復(fù)的仪壮、親密的，這樣用戶會下意識的將其分為一組胳徽。
比如积锅，Airbnb采用的無框設(shè)計，原因是它們的信息元素很統(tǒng)一养盗、重復(fù)缚陷，才給人營造出比較整體的感覺。同時往核，合理的運(yùn)用大標(biāo)題也起到關(guān)鍵性作用箫爷。
而同樣采用無框設(shè)計的“下廚房”APP，首屏由于每個模塊信息元素不一致铆铆，而且模塊內(nèi)元素的左右間距也不一樣，字號種類過多丹喻，導(dǎo)致界面看起來相對有些雜亂薄货。
c.小眾且垂直產(chǎn)品。
小眾且垂直的產(chǎn)品碍论，一般情況下目標(biāo)用戶聚焦谅猾，功能簡潔。因此鳍悠，能夠比較好的運(yùn)用無框設(shè)計税娜，跳出傳統(tǒng)的規(guī)范做出創(chuàng)新的設(shè)計。
比如：輕芒雜志藏研，采用無框設(shè)計的同時打破傳統(tǒng)的移動端瀏覽體驗敬矩，更符合它們自己的產(chǎn)品調(diào)性。?
下面是FOOTAGE蠢挡，一款小眾且文藝的產(chǎn)品弧岳，由VUE的團(tuán)隊設(shè)計的。他們采用無框設(shè)計的前提是业踏，每個界面元素有限禽炬，功能內(nèi)容簡潔。
但如果你是像微博勤家，淘寶腹尖，微信等體量的產(chǎn)品，用戶群體廣伐脖，內(nèi)容繁雜且層級較深热幔。那么乐设，你需要找到一個效率更高的信息呈現(xiàn)和交互的基礎(chǔ)隱喻，無框設(shè)計可能就不太適合了断凶。
? 總結(jié)??
總的來說伤提，任何表現(xiàn)形式都應(yīng)該是為了更好的呈現(xiàn)功能及內(nèi)容，而不是盲目的追隨趨勢认烁。
自成一派的優(yōu)秀設(shè)計師并不需要受到任何風(fēng)格的局限肿男，因為他知道風(fēng)格并無好壞之分，而是探索更適合自己產(chǎn)品的處理方式却嗡。
希望這篇文章對你有所幫助??舶沛。
