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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

再來看下APP無框設計的案例：

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

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

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

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

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