什么是無(wú)框界面

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

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

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

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

　　那么卡片化呢？

　　如果你的設計思維還停留在卡片話(huà)，那就落伍了，因為無(wú)框界面的趨勢下，卡片的概念被淡化。卡片與否有何重要？反正用戶(hù)甚至不會(huì )察覺(jué)，他們只關(guān)心自己來(lái)這里的終目的，界面對他們來(lái)說(shuō)只是搜尋信息的手段之一罷了（如果有很好的搜索功能可用的話(huà)，說(shuō)不定根本不用掃一眼界面）。

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

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

　　無(wú)框的優(yōu)勢？

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

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

　　掌控注意力

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

　　看上圖中的無(wú)框版界面時(shí)，因為沒(méi)有邊線(xiàn)，只有內容，所以用戶(hù)眼的注意力肯定是在內容上。

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

http://ezekroy.com/jianzhanzhishi/7124.html 無(wú)框界面時(shí)代或將到來(lái)：無(wú)框界面優(yōu)劣淺談