什麼是無框介面

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

　　我曾在之前的《[譯文] 去形式化——移動設計新趨勢化》寫過關於去形式化的話題。在這個新趨勢中，介面上的內容越來越重要，相對的，一切與內容無關的都被大大削減。

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

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

　　那麼卡片化呢？

　　如果您的設計思維還停留在卡片話，那就落伍了，因為無框介面的趨勢下，卡片的概念被淡化。卡片與否有何重要？反正多使用者甚至不會察覺，他們只關心自己來這裡的終目的，介面對他們來說只是搜尋資訊的手段之一罷了（如果有很好的搜尋功能可用的話，說不定根本不用掃一眼介面）。

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

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

　　無框的優勢？

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

　　下圖：上面的是原版介面，下面的是我修改的無框版。我這個修改主要只是將框去掉而已，然後為了配合無框風格對細節做了一些修改，目的僅僅是為了對比同一個介面在有框和無框兩種情況下看起來有什麼不同。

　　掌控注意力

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

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

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