什么是無(wú)框界面？

　　即使幾種主要的設(shè)計(jì)風(fēng)格已經(jīng)形成了寡頭壟斷(如蘋果的圓角玻璃、谷歌的等級(jí)、微軟的方塊)…），但界面設(shè)計(jì)的進(jìn)化才剛剛開始。

　　我曾經(jīng)在之前的《[翻譯]去形式化-移動(dòng)設(shè)計(jì)的新趨勢(shì)》中寫過(guò)去形式化的話題。在這種新趨勢(shì)中，界面上的內(nèi)容變得越來(lái)越重要。相對(duì)而言，與內(nèi)容無(wú)關(guān)的一切都被大大削減。

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

　　也許你已經(jīng)發(fā)現(xiàn)，今年越來(lái)越多的網(wǎng)站和應(yīng)用程序，尤其是那些關(guān)注設(shè)計(jì)的人，都有這樣的趨勢(shì)。曾經(jīng)用來(lái)劃分區(qū)域的邊界和邊界逐漸消失，但在干凈的界面上，通過(guò)距離劃分，區(qū)域之間的差異仍然很清楚。

　　那么卡片化呢？

　　如果你的設(shè)計(jì)思維還停留在卡片上，那就過(guò)時(shí)了，因?yàn)樵跓o(wú)框界面的趨勢(shì)下，卡片的概念被稀釋了。卡片有什么重要嗎？無(wú)論如何，用戶甚至不會(huì)注意到他們來(lái)這里的最終目的。界面只是他們搜索信息的手段之一（如果有良好的搜索功能，他們可能根本不需要掃描界面）。

　　是的，卡片化的起源有其合理性。幾年前，我們注意到顯示屏的尺寸越來(lái)越不可預(yù)測(cè)，設(shè)計(jì)師迫切需要一種設(shè)計(jì)方法來(lái)適應(yīng)不同尺寸的屏幕。卡片正好可以解決這個(gè)問(wèn)題，因?yàn)樗褍?nèi)容包裝成一個(gè)固定的小塊，可以像水一樣放在任何比自己大的容器里。不僅如此，還可以根據(jù)需要隨時(shí)刪除卡片，以靈活控制界面上的內(nèi)容類型和數(shù)量。在響應(yīng)界面的環(huán)境下，卡片化這個(gè)詞越來(lái)越受到重視。

　　事實(shí)上，無(wú)框界面并不真正與卡片相沖突，將內(nèi)容分成小塊的概念仍然存在，但此時(shí)卡片已經(jīng)完全透明，不需要看到卡片的外觀。

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

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

　　下圖：上面是原始界面，下面是我修改的無(wú)框版本。我的修改主要是刪除框架，然后對(duì)細(xì)節(jié)進(jìn)行一些修改，以配合無(wú)框風(fēng)格，目的只是比較同一界面在有框架和無(wú)框架的情況下的區(qū)別。

　　掌控注意力

　　當(dāng)你看上圖的原始界面時(shí)，你可能會(huì)看到卡片中的邊線，而不是內(nèi)容。這是因?yàn)榘咨ㄆ突疑尘爸g的對(duì)比非常明顯，而且尺寸非常大，所以它非常吸引注意力。卡片中的內(nèi)容很容易被忽略，因?yàn)樗鼈儽粩D卡片中。

　　看上圖中的無(wú)框界面，因?yàn)闆](méi)有邊線，只有內(nèi)容，用戶眼中的注意力一定在內(nèi)容上。

　　用戶對(duì)界面的關(guān)注是寶貴的。因?yàn)橐粋€(gè)產(chǎn)品想給用戶提供的功能越多越好，但是用戶的注意力總是只有一點(diǎn)點(diǎn)。因此，控制用戶的注意力是設(shè)計(jì)師的關(guān)鍵使命。假如界面上放置了太多色彩鮮艷、引人注目的裝飾，用戶看到內(nèi)容的概率就會(huì)降低。當(dāng)然，即使有框架，用戶的注意力也可以通過(guò)特殊的框架設(shè)計(jì)來(lái)控制，但框架越多，難度就越大。