什么是無框界面?
即使幾種主要的設計風格已經形成了寡頭壟斷(如蘋果的圓角玻璃、谷歌的等級、微軟的方塊)…),但界面設計的進化才剛剛開始。
我曾經在之前的《[翻譯]去形式化-移動設計的新趨勢》中寫過去形式化的話題。在這種新趨勢中,界面上的內容變得越來越重要。相對而言,與內容無關的一切都被大大削減。
去形式化是一幅非常模糊的全景圖,一些新的設計風格在演變中逐漸清晰起來,比如無框界面。
也許你已經發現,今年越來越多的網站和應用程序,尤其是那些關注設計的人,都有這樣的趨勢。曾經用來劃分區域的邊界和邊界逐漸消失,但在干凈的界面上,通過距離劃分,區域之間的差異仍然很清楚。
那么卡片化呢?
如果你的設計思維還停留在卡片上,那就過時了,因為在無框界面的趨勢下,卡片的概念被稀釋了。卡片有什么重要嗎?無論如何,用戶甚至不會注意到他們來這里的最終目的。界面只是他們搜索信息的手段之一(如果有良好的搜索功能,他們可能根本不需要掃描界面)。
是的,卡片化的起源有其合理性。幾年前,我們注意到顯示屏的尺寸越來越不可預測,設計師迫切需要一種設計方法來適應不同尺寸的屏幕。卡片正好可以解決這個問題,因為它把內容包裝成一個固定的小塊,可以像水一樣放在任何比自己大的容器里。不僅如此,還可以根據需要隨時刪除卡片,以靈活控制界面上的內容類型和數量。在響應界面的環境下,卡片化這個詞越來越受到重視。
事實上,無框界面并不真正與卡片相沖突,將內容分成小塊的概念仍然存在,但此時卡片已經完全透明,不需要看到卡片的外觀。
無框優勢?
用文字來討論太過抽象,所以我用無框的概念優化了一個大家熟悉的有框界面。不要問我是哪個網站,哈哈~
下圖:上面是原始界面,下面是我修改的無框版本。我的修改主要是刪除框架,然后對細節進行一些修改,以配合無框風格,目的只是比較同一界面在有框架和無框架的情況下的區別。
掌控注意力
當你看上圖的原始界面時,你可能會看到卡片中的邊線,而不是內容。這是因為白色卡片和灰色背景之間的對比非常明顯,而且尺寸非常大,所以它非常吸引注意力。卡片中的內容很容易被忽略,因為它們被擠卡片中。
看上圖中的無框界面,因為沒有邊線,只有內容,用戶眼中的注意力一定在內容上。
用戶對界面的關注是寶貴的。因為一個產品想給用戶提供的功能越多越好,但是用戶的注意力總是只有一點點。因此,控制用戶的注意力是設計師的關鍵使命。假如界面上放置了太多色彩鮮艷、引人注目的裝飾,用戶看到內容的概率就會降低。當然,即使有框架,用戶的注意力也可以通過特殊的框架設計來控制,但框架越多,難度就越大。