「無框界面」讓ui設計打破束縛


「無框界面」讓ui設計打破束縛


什麼是無框界面?

縱使幾大設計風格已形成寡頭壟斷(如蘋果的圓角玻璃、谷歌的層級、微軟的方塊…),但界面設計的進化歷程才剛剛開始。

去形式化是一張非常模糊的全景圖,在演化中一些新的設計風格逐漸清晰起來,例如——無框界面

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

「無框界面」讓ui設計打破束縛


△ 去形式樣例

那麼卡片化呢?

如果你的設計思維還停留在卡片話,那就落伍了,因為無框界面的趨勢下,卡片的概念被淡化。卡片與否有何重要?反正用戶甚至不會察覺,他們只關心自己來這裡的最終目的,界面對他們來說只是搜尋信息的手段之一罷了(如果有很好的搜索功能可用的話,說不定根本不用掃一眼界面)。

沒錯,卡片化的由來有它的合理性。幾年前大家注意到顯示屏的尺寸越來越不可預期,設計師急需一種設計手段,來讓設計出的界面能夠適應不同尺寸的屏幕。

卡片剛好能夠解決這一點,因為它將內容封裝成固定的小區塊,像水一樣,可以放在任何比自己大的容器中。不但如此,卡片式界面還可以根據需要歲時刪減卡片,以此靈活控制界面上的內容種類和數量。由此響應式界面的大環境下,卡片化這個詞被越來越多地注意到。

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

無框的優勢?

用文字來討論太過抽象,所以我用無框的概念優化了一個大家熟悉的有框界面。不要問我是哪個網站,哈哈~

「無框界面」讓ui設計打破束縛


△ 上面的是原版界面,下面的是我修改的無框版

掌控注意力

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

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

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

減少設計束縛

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

增加界面利用率

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

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

提升設計效率

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

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

有何爭議

視覺手段減少

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

視覺與交互的分歧

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

同質化

這是個嚴肅的課題,可以上升至哲學境界,這裡只能頂多只能拋些磚角。在去除多餘“裝飾”之後,界面只剩下內容,這會讓不同產品之間越來越相似,走到極致,甚至可能大家看起來完全一模一樣都有可能。

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

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

在這兩個方面要如何取捨?未來肯定是用戶的。但界面的直接粗暴並不一定與識別性完全衝突,即便操作界面的識別性為零,也可以通過Logo、文字等手段來樹立品牌形象。

從另一個角度來思考,在不知多遠的未來,人類和機器之間,很有可能已經不再需要界面來交流了。舉個最接地氣的例子,如果Siri可以取代iOS的一切界面,那麼不要說無框界面,所有界面都沒了,這是不是代表iOS這整個產品的品牌形象就喪失了?當然不是,語音的音色、語氣、回答方式……有太多的東西都能讓用戶產生印象了。

一個輪迴

作為一個有全局觀的人,我又要提一下歷史了。

其實最早的人機界面是無框的——命令行,還記得嗎?

「無框界面」讓ui設計打破束縛


△命令行界面

但是,圖像界面幾乎一誕生就是有框的,而且早期的圖形界面幾乎滿屏都是框。因為那時大家還只會用線來劃分區塊。

「無框界面」讓ui設計打破束縛


△ 早期的圖形界面

發展了好久,終於在一兩年前,咱們學會了用色塊取代邊線。

「無框界面」讓ui設計打破束縛


△ Instagram 2015

不要多久,更多的人會發現連色塊都不需要就可以將內容區分開,那就真正是無框界面的時代了。

「無框界面」讓ui設計打破束縛


△ 無框界面先驅們

總結

框界面其實不過是界面風格的一種罷了,並不是包治百病的神藥。糟糕的設計師,什麼風格都拯救布料;而能自成一派的優秀設計師並不需要收到任何風格的侷限。

來源優設

作者雨涵_Zoe

因未有作者聯繫方式


「無框界面」讓ui設計打破束縛



分享到:


相關文章: