什(shén)麽是無框界面？

縱使幾大(dà)設計風格已形成寡頭壟斷（如蘋果的(de)圓角玻璃、谷歌(gē)的(de)層級、微軟的(de)方塊…），但界面設計的(de)進化(huà)曆程才剛剛開始。

去形式化(huà)是一張非常模糊的(de)全景圖，在演化(huà)中一些新的(de)設計風格逐漸清晰起來(lái)，例如——無框界面。

也(yě)許你已經發現了(le)，今年來(lái)越來(lái)越多(duō)的(de)網站和(hé)應用(yòng)，尤其是那些注重設計的(de)，都有這(zhè)樣的(de)趨勢。曾經用(yòng)來(lái)劃分(fēn)區(qū)域的(de)邊框和(hé)邊線逐漸消失，然而在幹淨的(de)界面上，通(tōng)過距離分(fēn)割，各區(qū)域的(de)差别依舊(jiù)清晰可(kě)辨。

那麽卡片化(huà)呢(ne)？

如果你的(de)設計思維還(hái)停留在卡片話(huà)，那就落伍了(le)，因爲無框界面的(de)趨勢下(xià)，卡片的(de)概念被淡化(huà)。卡片與否有何重要？反正用(yòng)戶甚至不會察覺，他(tā)們隻關心自己來(lái)這(zhè)裏的(de)最終目的(de)，界面對(duì)他(tā)們來(lái)說隻是搜尋信息的(de)手段之一罷了(le)（如果有很好的(de)搜索功能可(kě)用(yòng)的(de)話(huà)，說不定根本不用(yòng)掃一眼界面）。

沒錯，卡片化(huà)的(de)由來(lái)有它的(de)合理(lǐ)性。幾年前大(dà)家注意到顯示屏的(de)尺寸越來(lái)越不可(kě)預期，設計師急需一種設計手段，來(lái)讓設計出的(de)界面能夠适應不同尺寸的(de)屏幕。卡片剛好能夠解決這(zhè)一點，因爲它将内容封裝成固定的(de)小區(qū)塊，像水(shuǐ)一樣，可(kě)以放在任何比自己大(dà)的(de)容器中。

不但如此，卡片式界面還(hái)可(kě)以根據需要歲時(shí)删減卡片，以此靈活控制界面上的(de)内容種類和(hé)數量。由此響應式界面的(de)大(dà)環境下(xià)，卡片化(huà)這(zhè)個(gè)詞被越來(lái)越多(duō)地注意到。

其實無框界面與卡片化(huà)并不真正相沖，将内容分(fēn)裝成小區(qū)塊的(de)概念依舊(jiù)還(hái)在，隻是此時(shí)卡片已經完全透明(míng)，不需要看到卡片的(de)樣子了(le)。

用(yòng)戶之于界面，最寶貴的(de)莫過于注意力。因爲一個(gè)産品想要提供給用(yòng)戶的(de)功能是越多(duō)越好，但是用(yòng)戶的(de)注意力始終隻有那麽一丁點。所以，掌控用(yòng)戶的(de)注意力是設計師的(de)關鍵使命。如果界面上擺放了(le)過多(duō)色彩顯明(míng)、吸引注意力的(de)“裝飾”，用(yòng)戶看到内容的(de)幾率變下(xià)降了(le)。當然，即便有邊框，還(hái)是能夠通(tōng)過對(duì)邊框的(de)特殊設計來(lái)控制用(yòng)戶的(de)注意力不分(fēn)散，但是邊框越多(duō)，難度就越大(dà)。

減少設計束縛

設計是連貫、統一的(de)。一旦一個(gè)區(qū)域有了(le)邊框，其它很多(duō)地方都要加上邊框與之呼應。邊框一多(duō)，束縛也(yě)多(duō)。因爲這(zhè)意味著(zhe)從此以後，不論一項要在界面上加一點什(shén)麽别的(de)東西，都要思考一下(xià)，是否需要加上邊框，如果邊框還(hái)分(fēn)好幾類，那麽這(zhè)時(shí)還(hái)要判斷一下(xià)此處的(de)内容适合使用(yòng)哪類邊框。這(zhè)樣設計師不自覺地給自己加了(le)越來(lái)越多(duō)的(de)束縛，而這(zhè)些束縛，用(yòng)戶其實根本不care。

增加界面利用(yòng)率

所有的(de)邊框，可(kě)以不要邊線，但是至少得(de)要有兩個(gè)邊距，即内邊距和(hé)外邊距，這(zhè)樣才能保證視覺效果的(de)舒适性。然而如果去掉邊框，用(yòng)距離分(fēn)割内容區(qū)塊，那麽兩個(gè)内容區(qū)塊之間就隻需要一個(gè)間距就好了(le)。就算(suàn)爲了(le)區(qū)分(fēn)要拉大(dà)這(zhè)個(gè)間距，也(yě)通(tōng)常不會超過有邊框情況下(xià)内外邊距之和(hé)。

提升設計效率

前面提過的(de)減少設計束縛，可(kě)看作是一種對(duì)設計思考效率的(de)提升。除了(le)思考之外，無框界面對(duì)畫(huà)圖效率的(de)提升更加明(míng)顯。

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

視覺手段減少

爲了(le)區(qū)分(fēn)、突出、弱化(huà)某些東西，視覺上可(kě)以用(yòng)N中方法解決。但是如果死守無框，這(zhè)些可(kě)用(yòng)的(de)手段就減少了(le)。但中互信達認爲，少點套路多(duō)些真誠是這(zhè)個(gè)時(shí)代的(de)精神追求，所以大(dà)部分(fēn)情況下(xià)，視覺上樸素些也(yě)挺好。但是在特殊情況下(xià)，完全不需要死守任何教條，畢竟規矩就是爲了(le)在少數情況被打破而存在的(de)。

視覺與交互的(de)分(fēn)歧

縱使無框界面有再多(duō)易用(yòng)性的(de)有點，視覺視覺設計師依舊(jiù)可(kě)能對(duì)此無感。因爲凡是強調某種風格，都視覺來(lái)說都是一種限制。而如果将無框看作對(duì)視覺設計的(de)限制，其結果受益于易用(yòng)性，視覺設計可(kě)能難以接受。很多(duō)事情難的(de)不是增加而是減少，這(zhè)種轉變需要像當前喬布斯去除手機鍵盤一樣，有一個(gè)具有全局觀的(de)決策者。

無框界面其實不過是界面風格的(de)一種罷了(le)，并不是包治百病的(de)神藥。糟糕的(de)設計師，什(shén)麽風格都拯救布料；而能自成一派的(de)優秀設計師并不需要收到任何風格的(de)局限。

即便在今天，全鍵盤的(de)黑(hēi)莓手機依舊(jiù)在歐洲市場(chǎng)占據重要位置。我從不認爲有框與無框之間又對(duì)錯之分(fēn)，隻是此處做(zuò)個(gè)預言，未來(lái)的(de)世界會朝無框邁進。