無框界面時代或?qū)⒌絹恚簾o框界面優(yōu)劣淺談

14 評論 7742 瀏覽 26 收藏 12 分鐘

我從不認(rèn)為有框與無框之間又對錯之分,只是此處做個預(yù)言,未來的世界會朝無框邁進(jìn)。

什么是無框界面

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

我曾在之前的《[譯文] 去形式化——移動設(shè)計新趨勢化》寫過關(guān)于去形式化的話題。在這個新趨勢中,界面上的內(nèi)容越來越重要,相對的,一切與內(nèi)容無關(guān)的都被大大削減。

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

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

那么卡片化呢?

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

沒錯,卡片化的由來有它的合理性。幾年前大家注意到顯示屏的尺寸越來越不可預(yù)期,設(shè)計師急需一種設(shè)計手段,來讓設(shè)計出的界面能夠適應(yīng)不同尺寸的屏幕。卡片剛好能夠解決這一點,因為它將內(nèi)容封裝成固定的小區(qū)塊,像水一樣,可以放在任何比自己大的容器中。不但如此,卡片式界面還可以根據(jù)需要隨時刪減卡片,以此靈活控制界面上的內(nèi)容種類和數(shù)量。由此響應(yīng)式界面的大環(huán)境下,卡片化這個詞被越來越多地注意到。

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

無框的優(yōu)勢?

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

下圖:上面的是原版界面,下面的是我修改的無框版。我這個修改主要只是將框去掉而已,然后為了配合無框風(fēng)格對細(xì)節(jié)做了一些修改,目的僅僅是為了對比同一個界面在有框和無框兩種情況下看起來有什么不同。

掌控注意力

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

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

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

減少設(shè)計束縛

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

增加界面利用率

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

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

提升設(shè)計效率

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

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

有何爭議

視覺手段減少

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

視覺與交互的分歧

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

同質(zhì)化

這是個嚴(yán)肅的課題,可以上升至哲學(xué)境界,這里只能頂多只能拋些磚角。我在《[譯文] 去形式化——移動設(shè)計新趨勢化》寫過同樣的問題,在去除多余“裝飾”之后,界面只剩下內(nèi)容,這會讓不同產(chǎn)品之間越來越相似,走到極致,甚至可能大家看起來完全一模一樣都有可能。

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

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

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

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

說到這里,如果你還在擔(dān)憂同質(zhì)化的問題,那么另一篇文章見吧。

一個輪回

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

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

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

發(fā)展了好久,終于在一兩年前,咱們學(xué)會了用色塊取代邊線。

下圖:Instagram 2015

不要多久,更多的人會發(fā)現(xiàn)連色塊都不需要就可以將內(nèi)容區(qū)分開,那就真正是無框界面時代了。

總結(jié)

無框界面其實不過是界面風(fēng)格的一種罷了,并不是包治百病的神藥。糟糕的設(shè)計師,什么風(fēng)格都拯救不了;而能自成一派的優(yōu)秀設(shè)計師并不需要受到任何風(fēng)格的局限。

即便在今天,全鍵盤的黑莓手機(jī)依舊在歐洲市場占據(jù)重要位置。我從不認(rèn)為有框與無框之間又對錯之分,只是此處做個預(yù)言,未來的世界會朝無框邁進(jìn)。

作者:Z Yuhan

來源:體驗進(jìn)階公眾號

本文由 @Z Yuhan? 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 這篇文章是從知乎上轉(zhuǎn)載的

    回復(fù)
  2. 最后,極簡是一種藝術(shù)的追求,但不是藝術(shù)的全部。也許過多一兩年,新的風(fēng)尚是連字母都隱去,只剩純折線或純曲線構(gòu)成的圖標(biāo),到時候設(shè)計已經(jīng)阻礙了交互,可能就會物極必反,重新回到擬物。但那時的擬物就要比前幾年的擬物高了一個層級。同時呢,新的擬物可能是建立在極簡設(shè)計之上的,而不再是單純的擬物。

    來自廣東 回復(fù)
    1. 極簡設(shè)計是對藝術(shù)的追求這個結(jié)論我是不同意的,減少線條、框體還有陰影的目的是為了突出內(nèi)容,真正有意義的東西??梢圆榭瓷戏降睦?,很明顯是為了突出真正的內(nèi)容,讓用戶關(guān)注內(nèi)容所設(shè)計。人機(jī)界面的設(shè)計有藝術(shù)的存在,但是無法很好表現(xiàn)內(nèi)容的人機(jī)界面必然不會流行。

      來自湖南 回復(fù)
    2. 其實我跟你說的是一個觀點,我這里的藝術(shù)說的不是像幾百年前美國的LOGO設(shè)計那樣,加很多邊框上去,而是說“版式設(shè)計”的美學(xué)追求是不變的,版式設(shè)計的最高追求就是用最少的元素突出內(nèi)容。

      來自廣東 回復(fù)
  3. 另外,從邊線,到色塊,再到無色塊,從整個設(shè)計界的局勢來看,確實是在進(jìn)步,這并不是iOS帶動的,而是版式設(shè)計之美本身就是用最少的元素來形成最好的視覺引導(dǎo)。但是,對一個具體的界面設(shè)計來講,不存在永恒的定式,只存在技術(shù)的變化,和產(chǎn)品本身的內(nèi)涵。

    來自廣東 回復(fù)
    1. 針對科技界設(shè)計整體的趨勢,跟隨Apple走一直是主流。安卓整體設(shè)計思路的形成比iOS晚,個人電腦上微軟的設(shè)計一直不行。版式之美恰恰是喬布斯一張追求的,不然他一開始就對字體這么看重。

      來自湖南 回復(fù)
    2. 是的。主要是現(xiàn)在蘋果沒有幫主在了,我最喜歡的手機(jī)依然是iphone 4,沒有幫主的蘋果遲早有一天要落后于google和其他人的設(shè)計的。

      來自廣東 回復(fù)
    3. 我也喜歡,現(xiàn)在用SE,覺得iPhone 6這樣的設(shè)計太丑了。

      來自湖南 回復(fù)
  4. 作者說的很好,自成一派的設(shè)計師,做什么風(fēng)格都好看。之前流行win8風(fēng)的時候,滿世界都是瓷磚設(shè)計,幾乎沒有一個是視覺上真的有動過腦子的。設(shè)計這玩意兒就像潮流,無腦的人跟著潮流走,永遠(yuǎn)是殺馬特。

    來自廣東 回復(fù)
    1. 你是女的我就愛上你了

      回復(fù)
  5. 你舉的無框界面的例子,他們都是根據(jù)iOS 10 設(shè)計規(guī)范進(jìn)行修改的。可以去看下蘋果官方iOS 10的設(shè)計規(guī)范,整體思路很詳細(xì),不僅僅是無框。

    來自湖南 回復(fù)
    1. iOS 10的界面出來之后,我已經(jīng)不迷信它的設(shè)計規(guī)范了……

      來自廣東 回復(fù)
    2. 就事論事,文章中例子的界面設(shè)計是跟隨iOS 10 人機(jī)界面設(shè)計指南走的。同時這種風(fēng)格就是iOS 10首創(chuàng),Google不是這樣,微軟不是這樣。

      來自湖南 回復(fù)
    3. windows phone幾年前就是這個風(fēng)格了。。。

      來自廣東 回復(fù)