界面布局之_关于无框设计的思考

3. 无框设计

无框设计是近两年流行起来的的一种新的趋势，是去除界面中的边框，分割线，用间距来区分内容。

它适合运用于：a.大图为主；b.内容有规律，c.小众且垂直产品。

a.大图为主

大图为主指的是以图片为主的产品，每张图片本身就可以起到分割的作用，因此，不需要采用多余的线或边框进行分割。

比如：instagram，发布图片前，用户被强制对图片进行正方形截取，才能保证图片在feed流里的宽度，撑满全屏，从而看起来很整体。

图片起到分割的作用

可能有的同学会问，为什么国外的产品就这么高大上，微博怎么就不能去分割线，做减法，搞的洋气一些呢？

instagram只支持发送固定尺寸的图片和视频，而你想人家微博支持发送图片、文章、视频、纯文字、签到、点评...等等的内容。

同时微博feed流里的图片，支持1张－9张不同情况的排版，而且1张图片时，为了更好的呈现出用户的原图比例，还要处理成4:3，16:9，正方形，以及特殊尺寸的缩略样式，同时还有gif图的情况，还支持你在自己状态下添加不同话题。那么你想只用间距留白来区分？场面会像刚地震完的样子...（认真脸）

重体量产品

b.内容有规律

内容有规律指的是，留白间距上下的内容，最好是相对一致的、重复的、亲密的，这样用户会下意识的将其分为一组。

比如，Airbnb采用的无框设计，原因是它们的信息元素很统一、重复，才给人营造出比较整体的感觉。同时，合理的运用大标题也起到关键性作用。

内容有规律

而同样采用无框设计的“下厨房”APP，首屏由于每个模块信息元素不一致，而且模块内元素的左右间距也不一样，字号种类过多，导致界面看起来相对有些杂乱。

每个模块信息元素不一致

c.小众且垂直产品

小众且垂直的产品，一般情况下目标用户聚焦，功能简洁。因此，能够比较好的运用无框设计，跳出传统的规范做出创新的设计。

比如：轻芒杂志，采用无框设计的同时打破传统的移动端浏览体验，更符合它们自己的产品调性。

符合它们自己的产品调性

下面是FOOTAGE，一款小众且文艺的产品，由VUE的团队设计的。他们采用无框设计的前提是，每个界面元素有限，功能内容简洁。

功能内容简洁

但如果你是像微博，淘宝，微信等体量的产品，用户群体广，内容繁杂且层级较深。那么，你需要找到一个效率更高的信息呈现和交互的基础隐喻，无框设计可能就不太适合了。

总的来说，任何表现形式都应该是为了更好的呈现功能及内容，而不是盲目的追随趋势。

自成一派的优秀设计师并不需要受到任何风格的局限，因为他知道风格并无好坏之分，而是探索更适合自己产品的处理方式。