網(wǎng)頁設計趨勢探討 無框界面的優(yōu)劣

什么是無框界面

　　顧名思義就是頁面排版去掉條條框框，以距離、色塊、圖形等來區(qū)分內(nèi)容區(qū)域。

　　也許你已經(jīng)發(fā)現(xiàn)了，今年來越來越多的網(wǎng)站和應用，尤其是那些注重設計的，都有這樣的趨勢。曾經(jīng)用來劃分區(qū)域的邊框和邊線逐漸消失，然而在干凈的界面上，通過距離分割，各區(qū)域的差別依舊清晰可辨。在前不久零度網(wǎng)絡發(fā)布的一篇極簡設計理念（極簡風格設計的四大要點）與本文分享的設計趨勢也是殊途同歸的！

　　無框界面設計有哪些優(yōu)勢

　　1、掌控注意力

　　卡片式設計因為背景色的原因或者邊框的問題，瀏覽者眼注意到的內(nèi)容很有可能被分散。下圖白色卡片和灰色背景的對比非常明顯，而尺寸又很大，所以非常吸引注意力。而卡片中的內(nèi)容，因為在卡片中擠作一團，所以很容易被忽視。

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

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

　　2、減少設計束縛

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

　　3、增加界面利用率

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

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

　　4、提升設計效率

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

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

　　當然任何新的設計都是有爭議的

　　視覺手段減少

　　為了區(qū)分、突出、弱化某些東西，視覺上可以用N中方法解決。但是如果死守無框，這些可用的手段就減少了。但本人認為，少點套路多些真誠是這個時代的精神追求，所以大部分情況下，視覺上樸素些也挺好。但是在特殊情況下，完全不需要死守任何教條，畢竟規(guī)矩就是為了在少數(shù)情況被打破而存在的。

　　視覺與交互的分歧

　　縱使無框界面有再多易用性的有點，視覺設計師依舊可能對此無感。因為凡是強調某種風格，都視覺來說都是一種限制。而如果將無框看作對視覺設計的限制，其結果受益于易用性，視覺設計可能難以接受。很多事情難的不是增加而是減少，這種轉變需要像當前喬布斯去除手機鍵盤一樣，有一個具有全局觀的決策者。

　　一個爭議是同質化

　　在去除多余“裝飾”之后，界面只剩下內(nèi)容，這會讓不同產(chǎn)品之間越來越相似，走到極致，甚至可能大家看起來完全一模一樣都有可能。

　　一方面對于用戶來說，這個問題可能不是很嚴重。雖然用戶也很享受產(chǎn)品提供的附加價值，但是他們并不指望產(chǎn)品提供觀賞性和趣味性，畢竟大家平時有的是娛樂手段，使用非娛樂性產(chǎn)品時除了快速達到自己的目的之外別無他求。

　　另一方面對于產(chǎn)品本身來說，都想要樹立自己的風格，體現(xiàn)自己的品牌識別性，使出渾身解數(shù)想要獲得用戶的額外喜愛。

網(wǎng)頁設計

• 2020-11-11網(wǎng)頁設計經(jīng)驗分享：用合適字號提升用戶體驗
• 2020-11-11網(wǎng)頁設計中如何更好的運用相似的顏色
• 2020-11-11培養(yǎng)良好的設計思維-給網(wǎng)頁設計師們
• 2020-11-11網(wǎng)頁設計與企業(yè)文化
• 2020-11-11網(wǎng)頁設計標準5大關鍵點分享
• 2020-11-09網(wǎng)站制作、網(wǎng)站設計、網(wǎng)頁設計之間的區(qū)別
• 2020-11-11網(wǎng)頁設計中最容易出現(xiàn)的哪些錯誤？
• 2020-11-11網(wǎng)站建設公司總匯網(wǎng)頁設計效果
• 2020-11-11手機端網(wǎng)頁設計容易出現(xiàn)的五大錯誤
• 2020-11-11網(wǎng)頁設計的第一步 確定網(wǎng)站類型
• 2020-11-11網(wǎng)頁設計制作員的職業(yè)鑒定
• 2020-11-11佛山做網(wǎng)站_佛山網(wǎng)頁設計_網(wǎng)頁設計原則