2023年一套设计理论为你解决90%的困惑（下）

一套设计理论为你解决90%的困惑（下）上篇文章我们简洁叙述了线在界面中的表现及运用，这次来讲讲重头戏——面。

面可以看作是线的运动轨迹，可以由一个闭合的线生成，也可以由点、线强化自身而来。

一、关于面

1.点线面的临界问题

康定斯基在书中曾讲到，线的强化加粗，与点不断增大面临同样的问题，即与面之间的临界。

这句话的意思就是，当点、线通过强化自身的面积、宽度后，和面的界限开头模糊，从而具备了面本身的性质。

比如ios11中让人印象深刻的大标题，便是由通过增加每个点的面积（增加每个字的字号），以及笔画的线宽（增加每个字的字重）来趋向于面，以来营造出饱满、冲击的视觉张力。

2.辨识性

面二维的属性让它可以向四周无限得扩张自己的领土，这个优势让面可以轻松承载各类信息，并且也让它具备了绝佳的视觉张力。

在一个点线面同时存在的画面中，人眼优先留意到的必定是拥有肯定视觉张力的面元素。这意味着面拥有着远胜于前两者的辨识性，或者说，在一部各类元素参演的戏剧里，面更擅长主角。

比如在一个放置了文字的界面中，我们盼望其中一段比较重要的文字完全和其他文字区分开，也就意味着这段文字需要进行对比。

我们可以对这段文字加粗、加入颜色等等，这的确能做出一些明显的变化。但是仅仅是对字体本身的强化，一旦界面需要划分层级，就会显得很“平”，造成信息关系的暧昧。

不过，当加入一层淡淡的色块充当文字背景后，便可以制造出极为明朗的层次关系。一方面，这段文字奇妙得与其他信息快速孤立开来，另外，有面作为“靠山”让它变得略微与众不同，并且相比其他文字能被更快得留意到。

当然，假如你觉得它很重要，那你可以增加文字与背景的颜色对比，给面加入各种各样的颜色。而当颜色对信息可读性造成影响时，为保证信息的顺当辨识，我们不得不对文字进行反色处理，以此作为视觉落点来强制用户快速留意到它。这就是我们熟知的反白视觉手段。

面的这种强力属性被用到了界面的方方面面，比如按钮和图标。

3.图标相比前面所讲的线性图标，面的辨识性让面性图标可以更快得被识别。因此，界面中一些重要的业务入口通常都以醒目的面性图标存在，并且常以面性图标代表激活、选中时的状态，线性图标代表未激活、未选中时的状态。

不过线性图标薄弱的辨识性并非完全适合标签栏状态的切换。用户在选中到当前页时，并不代表其他页面彻底弱化了，用户同样需要关注其他未选中的页面。正因如此，ios11中全部未选中的icon全部由线性更改为了面性。同样的，国内的简书、天猫等产品也进行了图标的改版以提升其他页面的点击率。

4.按钮对于按钮，面的辨识性为它的层级使用供应了更多可能。

如下图，按钮从样式上来看大致有六种样式，反白、同色、灰色、幽灵、文字和图标按钮，其中面性按钮就占了一半。相比幽灵、文字和图标按钮，三种面性按钮都以面的强辨识性引导用户快速留意到它。因此面性按钮相对对应更高的层级。

当页面中存在多个功能按钮时，就需要以样式进行主次之分。深色按钮以剧烈的颜色对比制造吸引力，因此常以深色表达层级最高的主按钮，而次按钮通常对应层级较低的浅色、灰色等样式。

当页面中没有主次功能之分时，按钮的样式通常取决于当前的用户场景及业务需求。

比如知乎的答案详情页面，答主关注按钮是浅灰色样式，就是为了引导用户沉醉在内容中，避开深色样式对阅读造成干扰。而答主个人页的关注变为深色，则是由于用户点击答主头像的行为来自了解更多的动机，即用户对其产生了特定爱好，在此场景下使用深色样式便是为了引导用户实行社交行为。另外按钮圆角的转化也是为了强化信息的聚焦。

appstore同理。商品列表页的按钮全都以浅灰色样式表达，而详情页使用了深色。

我们在按钮样式的选择上，务必需要考虑到当前的用户场景，避开过低的信噪比而影响信息的传达效率。比如Appstore列表页中，用户的场景是非特定的扫瞄行为，假如使用深色按钮将会让其成为视觉焦点，强制用户不断留意到它，致使其成为“噪音”，影响用户对有效信息的猎取。

5.承载性与分割性

面无限延展的属性让它可以承载各类信息。包括文字、图片或视频元素，异或是元素自由组合所形成的信息单元。并且我们仅加深界面的背景色，就可以基于面的分割性，通过掌握模块间距实现区域的划分。（这里的间距即我们熟知的分割条）

但这种文字墙一般平铺式的布局并不能更好得反映当前模块所在的层次，或者从用户认知上说它们倾向于一个层面上。而且直角矩形的四个顶角所形成的四个焦点，也让用户的视线倾向于发散而非聚焦。直到卡片的消失，问题得以顺当解决。

6.卡片式设计

卡片在我们生活中随处可见，信件、名片、便利贴、甚至是我们的手机屏幕，它们从形态来说都属于面，并且都充分利用了面的承载性来充当一个收纳信息的容器或载体。信件收纳来信人的寄语，名片收纳对方的个人信息、便利贴收纳事项清单、屏幕收纳用户界面。而且它们便利携带，我们想要知道更多，打开它即可。

2022年I/O开发者大会中，随安卓4.1系统一同惊艳亮相的GoogleNow首次将卡片展现在了用户界面中。这种后拟物时代的设计不仅一改google以往混乱的信息展现问题，而且熟识的拟物感收获了足量用户的宠爱。初尝甜头之后，Google将卡片应用到了全部的产品，并且将其作为基础元素列入了一门宏大的设计语言中——materialdesign。

你可以在materialdesign中更系统得看到，google通过为界面添加了z轴（海报高度），来拟物映射生活中的一张张卡片。并且通过阴影的浓淡反应卡片所在的高度，通过不同的高度实时反映当前元素的层级关系。

而在ios11中，改版后的appstore也使用了大量的卡片进行排列组合，形成非常的清楚的页面层次引导用户的视觉动线。

相比原本平铺直叙的信息，卡片式设计通过以下优点让其风靡设计界。

1）更高效得猎取信息

每张卡片都是一个独立的面。从面的辨识性上说，独立和聚焦的特点让卡片与其他内容形成自然 的断层，更易形成视觉焦点。从面的分割性上说，卡片通过牺牲屏幕空间（四周的块外距）的方式让区域的分割相较分割条更为明确，清楚的层次关系便于用户快速辨识和猎取信息。

比如改版后的支付宝，通过引入圆角卡片来引导用户更好得留意到下方的各类生活服务，以实现向生活服务数字平台的转型。

2）更轻量的入口跳转

每个卡片除了承载信息外，都可以作为单独的入口承载内页的全部信息，并且卡片的属性让内页的展现变为了绽开而非跳转。

比如appstore点击卡片后，便以非线性的绽开动画呈现全部内页信息，返回则只需下滑手势即可，轻量而好玩。

3）更多的交互手势

卡片独立的特点让它可排列也可堆叠，这为页面带来了更多的交互方式。我们可以通过左右滑动（scroll）解锁横向更多的空间，也可以左右轻划（flick）形成类似tinder那样新的产品机制。

比如知乎的书架引入滑动手势展现更多内容，轻划手势切换问题卡片。

4）更舒适的视觉观感

卡片基于自身独立的特征让它成为网格布局的常用载体，富有欣赏性的视觉张力让页面更加吸引眼球。

当然，卡片并不是通用的，原本可以靠留白或分割线分割的信息，假如为了视觉效果硬是卡片化处理，就会导致阅读的低效，而且铺张空间。

比如常见的一些feed流，相比卡片，这类同类的信息流更适合以列表来关心用户快速得扫视，并节约页面空间。

7.卡片的嵌套和分割产品的功能并非完全相互剥离的，许多时候存在包含和平行的关系。这两类关系分别可以以卡片的嵌套和分割进行处理。前者通过卡片堆砌表达信息的包含关系，而后者则通过视觉分割所形成的点击域传达信息的平行关系。

比如天猫点评页中的金香蕉好物推举，每个卡片承载了商品信息以及点评信息，通过卡片的嵌套表示出两者的包含关系。而单条推选理由及入口的引导属于平行关系，因此采纳了视觉分割来进行划分。

并且前者跳转的是点评详情，后者跳转的页面中包含了全部点评、商品推举以及我要点评，因此在后者所属的面中加入了淡淡的一层业务主色来强化它的地位。

在支付宝改版后的卡包页中同样进行了一次嵌套处理，以更好得容纳不同的业务并传达各自所在的层级，并且以尺寸和颜色对比进行业务区分。

京东金融的付费业务卡片中存在两个平行关系的功能，因此以分割线形式进行了区域的划分。同时，它利用了颜色进行了有效的视觉及心情引导：黑色背景进行反白处理将其作为一个单独的视觉落点，强制用户留意到这里，并且又传达了付费用户所尊享的高级感。

二、苹果是如何改头换面的

自从ios7转型扁平后，线元素在苹果设计语言中始终占有重要地位，线自身的纤细、轻快感可以快速打造apple独有的轻量调性，不仅是按钮、图标的样式，包括字体本身也更加倾向纤细的字重。

但是，这个僵局在ios11发布的那天被彻底打破。2022年6月6日，苹果设计师乔纳森仿佛和线有了隔夜仇一般，从解锁页面到原生应用中，原本ios10中曾经被大量使用的线元素基本全部被面元素取代。

锁屏页面，全部拨号按钮全部由幽灵样式改为了面性样式，而数字字重的变粗也是一种化面的倾向。这使得按钮及文字更易辨识，并且降低了线所产生的视觉噪音。

Appstore中也同样发生着形态的易主。原本的幽灵按钮全部改为了浅灰色面性按钮。用于划分信息的分割线明度也得到了克制。另外，11代中众所周知的大标题同样也可以看做化面的倾向（通过增加自身的面积），剧烈的视觉张力引导用户快速得进行辨识。

另外，全部的数字全部提至文字的前方，基于用户由左至右的动线更突出产品自身，以点化线的形式更好得引导用户进行扫视。

追求极致的苹果明显不能容忍tab中未选中态下消失的线元素，你可以在ios13中看到，线元素得到了彻底的消退，并且颜色一并得到了克制，再次提升了阅读内容的沉醉感。

ios11中的商品详情页猎取按钮也同样使用了面性，深色的强调样式更好得契合了页面所在的用户场景，呼唤用户对其感爱好的商品实行点击行为。

掌握中心页面，基于面元素的承载与分割性，全部的信号类功能独立收纳到了卡片中。亮度和音量的调整则由横向的线性滑竿掌握条改为了纵向的面性掌握块。一方面增加了两者的辨识力，另一方面，依据菲茨交互定律，面积的增大带来了更好的点击体验。这一点在miui11的控件优化中也得到了应用。

全部的未选中态图标也进行了面性处理，大幅提升了10代中未选中页标签的辨识性。并且每个图标对应的文字也进行了加粗。

纵观ios11中全部形态的变化，我们可以发觉这次改版的最终目的是：促进内容的高效猎取。

服从作为苹果历来遵循的设计法则之一，和包豪斯“形式追随功能”设计理念不谋而合。设计永久只关心用户理解内容，但永久不与