什麼是無框介面

  顧名思義就是頁面排版去掉條條框框,以距離、色塊、圖形等來區分內容區域。

  也許您已經發現了,今年來越來越多的網站和應用,尤其是那些注重設計的,都有這樣的趨勢。曾經用來劃分割槽域的邊框和邊線逐漸消失,然而在乾淨的介面上,透過距離分割,各區域的差別依舊清晰可辨。在前不久 SEO 站群釋出的一篇極簡設計理念(極簡風格設計的四大要點)與本文分享的設計趨勢也是殊途同歸的!

  無框介面設計有哪些優勢

  1 、掌控注意力

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

上圖為原版,下圖為無框版

  看上圖中的無框版介面時,因為沒有邊線,只有內容,所以多使用者眼的注意力肯定是在內容上。

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

  2 、減少設計束縛

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

  3 、增加介面利用率

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

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

  4 、提升設計效率

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

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

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

  視覺手段減少

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

  視覺與互動的分歧

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

  一個爭議是同質化

  在去除多餘 “裝飾” 之後,介面只剩下內容,這會讓不同產品之間越來越相似,走到極致,甚至可能大家看起來完全一模一樣都有可能。

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

  另一方面對於產品本身來說,都想要樹立自己的風格,體現自己的品牌識別性,使出渾身解數想要獲得多使用者的額外喜愛。