在此學堂君相信很多小伙伴已經(jīng)看過這樣的一些文章，比如優(yōu)設(shè)網(wǎng)的《2017年流行的UI風格，可能是你從未聽過的「無框界面」》等，其實這篇文章是來自ME網(wǎng)易移動設(shè)計的微信公眾號。

為了讓各位移動APP UI設(shè)計師更好的了解和學習什么是APP無框界面設(shè)計？

25學堂的小編在此再跟大家啰嗦一下。APP無框設(shè)計的案例欣賞

無框設(shè)計趨勢的誕生，也是隨著移動互聯(lián)網(wǎng)和內(nèi)容創(chuàng)業(yè)的興起而來的。

也許你已經(jīng)發(fā)現(xiàn)了，今年來越來越多的網(wǎng)站和應用，尤其是那些注重設(shè)計的，都有這樣的趨勢。曾經(jīng)用來劃分區(qū)域的邊框和邊線逐漸消失，然而在干凈的界面上，通過距離分割，各區(qū)域的差別依舊清晰可辨。

所以，2017年移動UI設(shè)計潮流，會趨向無框設(shè)計的卡片化設(shè)計。

原因一：在這個新趨勢中，界面上的內(nèi)容越來越重要，相對的，一切與內(nèi)容無關(guān)的都被大大削減。去樣式化或去形式化，就是一張非常模糊的全景圖，在UI設(shè)計潮流演化中，會出現(xiàn)一些新的設(shè)計風格。

原因二：卡片化的由來也有它的合理性，卡片化設(shè)計就是設(shè)計師急需一種設(shè)計手段，來讓設(shè)計出的界面能夠適應不同尺寸的屏幕。

如國外2016年最新改版的四款知名APP的界面設(shè)計的無框設(shè)計

所以，其實無框界面與卡片化并不真正相沖，將內(nèi)容分裝成小區(qū)塊的概念依舊還在，只是此時卡片已經(jīng)完全透明，不需要看到卡片的樣子了。

第二部分：APP無框設(shè)計有什么優(yōu)勢，為什么會火起來？

主要有以下四大優(yōu)勢：

就以新浪微博首頁進行無框設(shè)計的改版重設(shè)計。效果圖如下：

第一大優(yōu)勢：掌控注意力

看上圖的原版界面時，第一眼很有可能看到的是卡片中的邊線，而不是內(nèi)容。這是因為白色卡片和灰色背景的對比非常明顯，而尺寸又很大，所以非常吸引注意力。而卡片中的內(nèi)容，因為在卡片中擠作一團，所以很容易被忽視。

看上圖中的無框版界面時，因為沒有邊線，只有內(nèi)容，所以用戶第一眼的注意力肯定是在內(nèi)容上。

用戶之于界面，最寶貴的莫過于注意力。因為一個產(chǎn)品想要提供給用戶的功能是越多越好，但是用戶的注意力始終只有那么一丁點。所以，掌控用戶的注意力是設(shè)計師的關(guān)鍵使命。如果界面上擺放了過多色彩顯明、吸引注意力的“裝飾”，用戶看到內(nèi)容的幾率變下降了。當然，即便有邊框，還是能夠通過對邊框的特殊設(shè)計來控制用戶的注意力不分散，但是邊框越多，難度就越大。

第二大優(yōu)勢：減少設(shè)計束縛

設(shè)計是連貫、統(tǒng)一的。一旦一個區(qū)域有了邊框，其它很多地方都要加上邊框與之呼應。邊框一多，束縛也多。因為這意味著從此以后，不論一項要在界面上加一點什么別的東西，都要思考一下，是否需要加上邊框，如果邊框還分好幾類，那么這時還要判斷一下此處的內(nèi)容適合使用哪類邊框。這樣設(shè)計師不自覺地給自己加了越來越多的束縛，而這些束縛，用戶其實根本不care。

第三大優(yōu)勢：增加界面利用率

所有的邊框，可以不要邊線，但是至少得要有兩個邊距，即內(nèi)邊距和外邊距，這樣才能保證視覺效果的舒適性。然而如果去掉邊框，用距離分割內(nèi)容區(qū)塊，那么兩個內(nèi)容區(qū)塊之間就只需要一個間距就好了。就算為了區(qū)分要拉大這個間距，也通常不會超過有邊框情況下內(nèi)外邊距之和。

這樣算來，無框界面的界面利用率會更高，能夠在有限的空間里，擺放更多的內(nèi)容。

再來看下APP無框設(shè)計的案例：

第四大優(yōu)勢：提升設(shè)計效率

前面提過的減少設(shè)計束縛，可看作是一種對設(shè)計思考效率的提升。除了思考之外，無框界面對畫圖效率的提升更加明顯。

在畫圖過程中，給內(nèi)容加上邊框意味著每增加一塊內(nèi)容都要先畫出邊框；每修改以此內(nèi)容，邊框都要一并修改一次。尤其是在很多工具中，圓角、雙線等特殊邊框畫起來相當繁瑣。

以上就是25學堂想要跟大家分享的一個未來會發(fā)生裂變的一種設(shè)計潮流。也是發(fā)生改變的設(shè)計基礎(chǔ)。

APP無框設(shè)計，是2017年值得設(shè)計師們探討發(fā)現(xiàn)的一個新的設(shè)計解決方案。