什么是无框界面?
即使几种主要的设计风格已经形成了寡头垄断(如苹果的圆角玻璃、谷歌的等级、微软的方块)…),但界面设计的进化才刚刚开始。
我曾经在之前的《[翻译]去形式化-移动设计的新趋势》中写过去形式化的话题。在这种新趋势中,界面上的内容变得越来越重要。相对而言,与内容无关的一切都被大大削减。
去形式化是一幅非常模糊的全景图,一些新的设计风格在演变中逐渐清晰起来,比如无框界面。
也许你已经发现,今年越来越多的网站和应用程序,尤其是那些关注设计的人,都有这样的趋势。曾经用来划分区域的边界和边界逐渐消失,但在干净的界面上,通过距离划分,区域之间的差异仍然很清楚。
那么卡片化呢?
如果你的设计思维还停留在卡片上,那就过时了,因为在无框界面的趋势下,卡片的概念被稀释了。卡片有什么重要吗?无论如何,用户甚至不会注意到他们来这里的最终目的。界面只是他们搜索信息的手段之一(如果有良好的搜索功能,他们可能根本不需要扫描界面)。
是的,卡片化的起源有其合理性。几年前,我们注意到显示屏的尺寸越来越不可预测,设计师迫切需要一种设计方法来适应不同尺寸的屏幕。卡片正好可以解决这个问题,因为它把内容包装成一个固定的小块,可以像水一样放在任何比自己大的容器里。不仅如此,还可以根据需要随时删除卡片,以灵活控制界面上的内容类型和数量。在响应界面的环境下,卡片化这个词越来越受到重视。
事实上,无框界面并不真正与卡片相冲突,将内容分成小块的概念仍然存在,但此时卡片已经完全透明,不需要看到卡片的外观。
无框优势?
用文字来讨论太过抽象,所以我用无框的概念优化了一个大家熟悉的有框界面。不要问我是哪个网站,哈哈~
下图:上面是原始界面,下面是我修改的无框版本。我的修改主要是删除框架,然后对细节进行一些修改,以配合无框风格,目的只是比较同一界面在有框架和无框架的情况下的区别。
掌控注意力
当你看上图的原始界面时,你可能会看到卡片中的边线,而不是内容。这是因为白色卡片和灰色背景之间的对比非常明显,而且尺寸非常大,所以它非常吸引注意力。卡片中的内容很容易被忽略,因为它们被挤卡片中。
看上图中的无框界面,因为没有边线,只有内容,用户眼中的注意力一定在内容上。
用户对界面的关注是宝贵的。因为一个产品想给用户提供的功能越多越好,但是用户的注意力总是只有一点点。因此,控制用户的注意力是设计师的关键使命。假如界面上放置了太多色彩鲜艳、引人注目的装饰,用户看到内容的概率就会降低。当然,即使有框架,用户的注意力也可以通过特殊的框架设计来控制,但框架越多,难度就越大。