关于卡片设计、分割线、无框设计的思考

为了区分信息结构及层次，通常采用以下3种布局样式：卡片式设计、分割线、无框设计。

卡片式设计

自从Android4.1上Google Now亮相之后，卡片式设计思路／风格就逐渐流行，被关注和使用。Google将它称为“Inside Out Design（由内而外式）”，它的本质是更好的处理信息集合。
卡片式设计适合运用在什么地方？
a.增加空间利用率；b.区分不同维度内容；c.提升可操作性。

a.增加空间利用率
相比传统列表式布局，卡片式设计能更好的打破原有框架。
比如，在传统列表下，内容一般为纵向滚动操作，展示的内容有限，而采用卡片式的布局，在纵向的内容流里，可以很好的增加横向滑动的内容区域，而且看起来很整体。比如，知乎feed流里增加知乎live的横向滑动内容。
b.区分不同维度内容
卡片更像一个容器，可以把不同维度的内容放入不同的卡片中，使其在内容区分的同时，保持界面的统一性。
比如：淘宝采用卡片处理信息的层级。第一个卡片承载着个人信息及偏好；第二个卡片：购买操作后的关键流程；第三个卡片：一些淘宝内使用率不高的功能聚合；第四个卡片：对支付宝和理财产品的推广；
每个卡片都是不同维度、相对独立的，但通过卡片归纳后，比起传统列表项 + 分割线 + 标题的视觉效率要高很多，更有秩序。
再比如：荔枝FM、微信读书也是采用卡片式设计，来归纳不同维度的信息内容。还有，微信公众号和appstore，同样是采用这种处理方式，把繁杂的信息以时间维度，归纳到不同卡片中。
c.提升可操作性
卡片是一种拟真元素，可以被覆盖、堆叠、移动、划去，这样能更好的拓展内容块的视觉深度和可操作性。
比如：iPhone自带的“提醒事项”APP，采用卡片堆叠的方式，用户可按照标题快速查找目标备忘录，同时进行点击操作，打开卡片内容。
探探，运用卡片式设计，实现左右滑动代表感不感兴趣的操作，从而增加产品的趣味性。

卡片的弊端：非要把简单的元素包裹在卡片里，让设计变得低效，空间浪费。

分割线设计

最传统最常见的分隔方式是“线”。它起到分隔、组织、细化的作用，帮助用户了解页面层次，赋予内容组织性。
“线”可以分为：a.全出血分隔线，b.内嵌式分割线。
a.全出血分隔线
“出血”是平面印刷中的概念，而“全出血”指的是分隔线横向贯穿整个页面，一般为了区分更加独立性的内容信息。
b.内嵌式分割线
内嵌式分割线，不同于前者，它一般会在“线”的前面留有缺口，来区分统一模块下的相关内容，目的是为了让用户浏览大量相关内容时，更加高效。采用内嵌式分割线，比较适合划分有关联性的内容，同时提升浏览效率。
“线”的分割方式相对其它两种（卡片式设计、无框设计）是比较保守的解决方案，前提是处理好“线”的间距、粗细、颜色等问题。

无框设计

无框设计是近两年流行起来的一种新的趋势，去除界面中的边框、分割线，用间距来区分内容。
它适合运用于：a.大图为主；b.内容有规律；c.小众且垂直产品。
a.大图为主
大图为主指的是以图片为主的产品，每张图片本身就可以起到分割的作用，因此，不需要采用多余的线或边框进行分割。
b.内容有规律
内容有规律指的是，留白间距上下的内容，最好是相对一致的、重复的、亲密的，这样用户会下意识的将其分为一组。
比如，Airbnb采用的无框设计，原因是它们的信息元素很统一、重复，给人营造出比较整体的感觉。同时，合理的运用大标题也起到关键性作用。
如果模块信息元素复杂，而且模块内元素的左右间距也不一样，字号种类过多，容易导致界面杂乱。
c.小众且垂直产品
小众且垂直的产品，一般情况下目标用户聚焦，功能简洁。因此，能够比较好的运用无框设计，跳出传统的规范做出创新的设计。
比如：轻芒杂志，采用无框设计的同时打破传统的移动端浏览体验，更符合它们自己的产品调性。

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

无框界面的趋势

无框界面的趋势下，卡片的概念被淡化。
卡片化的由来有它的合理性。几年前，显示屏的尺寸越来越不可预期，设计师急需一种设计手段，让设计出的界面能够适应不同尺寸的屏幕。卡片刚好能够解决，因为它将内容封装成固定的小区块，像水一样，可以放在任何比自己大的容器中。不但如此，卡片式界面还可以根据需要随时增减卡片，灵活控制界面上的内容种类和数量。由此，在响应式界面的大环境下，卡片化被越来越多地注意到。

无框界面与卡片化并不真正相冲，将内容分装成小区块的概念依旧还在，只是“卡片已经完全透明，不需要看到卡片的样子了”。

》》》优势

• 掌控注意力

卡片和背景的对比非常明显，尺寸又很大，非常吸引注意力。而卡片中的内容在卡片中挤作一团，很容易被忽视。
无框界面，因为没有边线，只有内容，所以用户第一眼的注意力肯定是在内容上。
用户之于界面，最宝贵的莫过于注意力。因为一个产品想要提供给用户的功能是越多越好，但是用户的注意力始终只有那么一丁点。所以，掌控用户的注意力是设计师的关键使命。如果界面上摆放了过多色彩鲜明、吸引注意力的“装饰”，用户看到内容的几率就变低了。当然，即便有边框，还是能够通过对边框的特殊设计来控制用户的注意力不分散，但是边框越多，难度就越大。

• 减少设计束缚

设计是连贯、统一的。一旦一个区域有了边框，其它很多地方都要加上边框与之呼应。边框一多，束缚也多。因为这意味着从此以后，不论你想要在界面上加一点什么别的东西，都要思考一下，是否需要加上边框，如果加边框，还应该判断一下此处的内容适合使用哪类边框。而这些束缚，用户其实根本不care。

• 增加界面利用率

所有的边框，可以不要边线，但是至少得要两个边距，即内边距和外边距，这样才能保证视觉效果的舒适性。然而如果去掉边框，用距离分割内容区块，那么两个内容区块之间就只需要一个间距就好了。就算为了区分要拉大这个间距，也通常不会超过有边框情况下内外边距之和。无框界面的界面利用率会更高，能够在有限的空间里，摆放更多的内容。

• 提升设计效率

前面提过的减少设计束缚，可看作是一种对设计思考效率的提升。除了思考之外，无框界面对画图效率的提升更加明显。在画图过程中，给内容加上边框意味着每增加一块内容都要先画出边框；每修改一次内容，边框都要一并修改一次。尤其是在很多工具中，圆角、双线等特殊边框画起来相当繁琐。
》》》争议

• 视觉手段减少

为了区分、突出、弱化某些东西，视觉上可以用N种方法解决。但是如果去掉边框，可用的手段就减少了。但个人认为，少点套路多些真诚是这个时代的精神追求，所以大部分情况下，视觉上朴素些也挺好。但是在特殊情况下，完全不需要死守任何教条，毕竟规矩就是为了在少数情况下被打破而存在的。

• 视觉与交互的分歧

纵使无框界面有再多易用性的优点，视觉设计师可能依旧对此无感。因为凡是强调某种风格，对视觉来说都是一种限制。而如果将无框看作对视觉设计的限制，其结果受益于易用性，视觉设计可能难以接受。很多事情难的不是增加而是减少，这种转变需要像之前乔布斯去除手机键盘一样，有一个具有全局观的决策者。

• 同质化

这个严肃的课题可以上升至哲学境界。我在《[译文] 去形式化——移动设计新趋势化》写过同样的问题，在去除多余“装饰”之后，界面只剩下内容，这会让不同产品之间越来越相似，走到极致，甚至可能大家看起来完全一模一样都有可能。
对于用户来说，这根本不是个问题。虽然用户也很享受产品提供的附加价值，但是他们并不指望产品提供观赏性和趣味性，毕竟大家平时有的是娱乐手段，使用非娱乐性产品时除了快速达到自己的目的之外别无他求。（PS：好有道理，我竟无言以对。）
对于产品本身来说，都想要树立自己的风格，体现自己的品牌识别性，使出浑身解数想要获得用户的额外喜爱。
在这两个方面要如何取舍？未来肯定是用户的。但界面的直接粗暴并不一定与识别性完全冲突，即便操作界面的识别性为零，也可以通过Logo、文字等手段来树立品牌形象。
从另一个角度来思考，在不知多远的未来，人类和机器之间，很有可能已经不再需要界面来交流了。举个最接地气的例子，如果Siri可以取代iOS的一切界面，那么不要说无框界面，所有界面都没了，这是不是代表iOS这个产品的品牌形象就丧失了？当然不是，语音的音色、语气、回答方式……有太多的东西能让用户产生印象了。

历史与轮回

最早的人机界面是无框的——命令行。（PS：这确实也是界面）
后来，图形界面一诞生就是有框的，而且早期的图形界面几乎满屏都是框。因为那时大家还只会用线来划分区块。
发展了好久，终于大家学会了用色块取代边线。
不要多久，更多的人会发现连色块都不需要就可以将内容区分开，那就真正是无框界面的时代了。