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

honghu2

一套设计理论为你解决90%的狐疑（下）

编纂导读：点线面是产物设计的根本，面是线的活动轨迹，由点、线强化本身而来。设计的创意层见叠出，但都必要创建在此根本上。本文作者基于本身事情履历，讲述面是如安在产物界面举行应用的，但愿对你有帮忙。

上篇文章咱们简略讲述了线在界面中的表示及应用，此次来说讲重头戏——面。

面可以看做是线的活动轨迹，可以由一个闭合的线天生，也能够由点、线强化本身而来。
1、关于面1. 点线面的临界问题


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

这句话的意思就是，当点、线经由过程强化本身的面积、宽度后，和面的界线起头模胡，从而具有了面自己的性子。

好比ios11中让人印象深入的大题目，即是由经由过程增长每一个点的面积（增长每一个字的字号），和笔划的线宽（增长每一个字的字重）来趋势于面，以来营建出丰满、打击的视觉张力。




2. 辨识性
面二维的属性让它可以向附近@无%JyLZN%穷得扩%1tr96%大@本身的国土，这个上风让面可以轻松承载各种信息，而且也让它具有了绝佳的视觉张力。

在一个点线面同时存在的画面中，人眼优先注重到的一定是具有绝对视觉张力的面元素。这象征着面具有着远胜于前二者的辨识性，或说，在一部各种元素参演的戏剧里，面更长于主角。

好比在一个安排了文字的界面中，咱们但愿此中一段比力首要的文字彻底和其他文字区分隔，也就象征着这段文字必要举行比拟。



咱们可以对这段文字加粗、参加色彩等等，这简直能做出一些较着的变革。可是仅仅是对字体自己的强化，一旦界面必要划分层级，就会显得很“平”，造成信息瓜葛的暗昧。



不外，当参加一层淡淡的色块充任文字布景后，即可以制造出极其开阔爽朗的条理瓜葛。一方面，这段文字奇异得与其他信息敏捷伶仃开来，此外，有面作为“靠山”让它变得略微与众分歧，而且比拟其他文字能被更快得注重到。



固然，若是你感觉它很首要，那你可以加强文字与布景的色彩比拟，给面参加各类各样的色彩。而当色彩对信息可读性造成影响时，为包管信息的顺遂辨识，咱们不能不对文字举行反色处置，以此作为视觉落点来强迫用户敏捷注重到它。这就是咱们熟知的反白视觉手腕。



面的这类强力属性被用到了界面的各个方面，好比按钮和图标。
3. 图标
比拟前面所讲的线性图标，面的辨识性让面性图标可以更快得被辨认。是以，界面中一些首要的营业进口凡是都以醒目标面性图标存在，而且常以面性图标代表激活、选中时的状况，线性图标代表未激活、未选中时的状况。



不外线性图标亏弱的辨识性并不是彻底合适标签栏状况的切换。用户在选中到当前页时，其实不代表其他页面完全弱化了，用户一样必要存眷其他未选中的页面。正因如斯，ios11中所有未选中的icon全数由线性更改成了面性。一样的，海内的简书、天猫等产物也举行了图标的改版以晋升其他页面的点击率。


4. 按钮
对付按钮，面的辨识性为它的层级利用供给了更多可能。

以下图，按钮从样式上来看大致有六种样式，反白、同色、灰色、鬼魂、文字和图标按钮，此中面性按钮就占了一半。比拟鬼魂、文字和图标按钮，三种面性按钮都以面的强辨识性指导用户敏捷注重到它。是以面性按钮相对于对应更高的层级。



当页面中存在多个功效按钮时，就必要以样式举行主次之分。深色按钮以强烈的色彩比拟制造吸引力，是以常以深色表达层级最高的主按钮，而次按钮凡是对应层级较低的淡色、灰色等样式。



当页面中没有主次功效之分时，按钮的样式凡是取决于当前的用户场景及营业需求。

好比知乎的谜底详情页面，答主存眷按钮是浅灰色样式，就是为了指导用户沉醉在内容中，防止深色样式对浏览造成滋扰。而答主小我页的存眷变成深色，则是因为用户点击答主头像的举动来自领会更多的念头，即用户对其发生了特定乐趣，在此场景下利用深色样式即是为了指导用户采纳社交举动。此外按钮圆角的转化也是为了强化信息的聚焦。



app store同理。商品列表页的按钮一致以浅灰色样式表达，而详情页利用了深色。



咱们在按钮样式的选择上，务必须要斟酌到当前的用户场景，防止太低的信噪比而影响信息的转达效力。好比App store列表页中，用户的场景长短特定的阅读举动，若是利用深色按钮将会让其成为视觉核心，强迫用户不竭注重到它，导致其成为“噪音”，影响用户对有用信息的获得。


5. 承载性与朋分性
面无穷延展的属性让它可以承载各种信息。包含文字、图片或视频元素，异或是元素自由组合所构成的信息单位。而且咱们仅加深界面的布景色，便可以基于面的朋分性，经由过程节制模块间距实现区域的划分。（这里的间距即咱们熟知的朋分条）



但这类文字墙一般平铺式的结构其实不能更好得反应当前模块地点的条理，或从用户认知上说它们偏向于一个层面上。并且直角矩形的四个顶角所构成的四个核心，也让用户的视野偏向于发散而非聚焦。直到卡片的呈现，问题得以顺遂解决。
6. 卡片式设计
卡片在咱们糊口中到处可见，信件、咭片、便当贴、乃至是咱们的手机屏幕，它们从形态来讲都属于面，而且都充实操纵了面的承载性来充任一个收纳信息的容器或载体。信件收纳来信人的寄语，咭片收纳对方的小我信息、便当贴收纳事项清单、屏幕收纳用户界面。并且它们便利携带，咱们想要晓得更多，打开它便可。



2012年I/O开辟者大会中，随安卓4.1体系一同冷艳表态的Google Now初次将卡片展现在了用户界面中。这类后拟物期间的设计不但一改谷歌以往紊乱的信息展现问题，并且认识的拟物感收成了充足用户的爱好。初尝甜头以后，Google将卡片利用到了所有的产物，而且将其作为根本元素列入了一门伟大的设计说话中——material design。

你可以在material design中更体系得看到，谷歌经由过程为界面添加了z轴（海报高度），来拟物映照糊口中的一张张卡片。而且经由过程暗影的浓淡反响卡片地点的高度，经由过程分歧的高度及时反应当前元素的层级瓜葛。



而在ios11中，改版后的app store也利用了大量的卡片举行分列组合，构咪咕直播成非分特别的清楚的页面条理指导用户的视觉动线。



比拟本来平铺直叙的信息，卡片式设计经由过程如下长处让其风行设计界。

1）更高效得获得信息

每张卡片都是一个自力的面。从面的辨识性上说，自力和聚焦的特色让卡片与其他内容构成自然的断层，更容易构成视觉核心。从面的朋分性上说，卡片经由过程捐躯屏幕空间（附近的块外距）的方法让区域的朋分相较朋分条更加明白，清楚的条理瓜葛便于用户敏捷辨识和获得信息。

好比改版后的付出宝，经由过程引入圆角卡片来指导用户更好得留心到下方的各种糊口办事，以实现向糊口办事数字平台的转型。



2）更轻量的进口跳转

每一个卡片除承载信息外，均可以作为零丁的进口承载内页的所有信息，而且卡片的属性让内页的展现变成了开展而非跳转。

好比app store点击卡片后，便以非线性的开展动画显现所有内页信息，返回则只需下滑手势便可，轻量而有趣。



3）更多的交互手势

卡片自力的特色让它可分列也可重叠，这为页面带来了更多的交互方法。咱们可以经由过程摆布滑动（scroll）解锁横向更多的空间，也能够摆布轻划（flick）构成雷同tinder那样新的产物机制。

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



4）更恬静的视觉观感

卡片基于本身自力的特性让它成为网格结构的经常使用载体，富有抚玩性的视觉张力让页面加倍吸引眼球。



固然，卡片其实不是通用的，本来可以靠留白或朋分线朋分的信息，若是为了视觉结果硬是卡片化处置，就会致使浏览的低效，并且挥霍空间。

好比常见的一些feed流，比拟卡片，这种同类的信息流更合适以列表来帮忙用户敏捷得扫视，并节流页面空间。


7. 卡片的嵌套和朋分
产物的功效并不是彻底相互剥离的，不少时辰存在包括和平行的瓜葛。这两类瓜葛别离可以以卡片的嵌套和朋分举行处置。前者经由过程卡片堆砌表达信息的包括瓜葛，尔后者则经由过程视觉朋分所构成的点击域转达信息的平行瓜葛。



好比天猫点评页中的金香蕉好物举荐，每一个卡片承载了商品信息和点评信息，经由过程卡片的嵌套暗示出二者的包括瓜葛。而单条推举来由及进口的指导属于平行瓜葛，是以采纳了视觉朋分来举行划分。

而且前者跳转的是点评详情，后者跳转的页面中包括了所有点评、商品举荐和我要点评，是以在后者所属的面中参加了淡淡的一层营业主色来强化它的职位地方。



在付出宝改版后的卡包页中一样举行了一次嵌套处置，以更好得容纳分歧的营业并转达各自地点的层级，而且以尺寸和色彩比拟举行营业区别。



京东金融的付费营业卡片中存在两个平行瓜葛的功效，是以以朋分线情势举行了区域的划分。同时，它操纵了色彩举行了有用的视觉及情感指导：玄色布景举行反白处置将其作为一个零丁的视觉落点，强迫用户注重到这里，而且又转达了付用度户所尊享的高档感。


2、苹果是若何洗面革心的
自从ios7转型扁平后，线元素在苹果设计说话中一向占据首要职位地方，线本身的纤细、轻快感可以敏捷打造apple独占的轻量调性，不但是按钮、图标的样式，包含字体自己也加倍偏向纤细的字重。

可是，这个僵局在ios11公布的那天被完全冲破。2017年6月6日，苹果设计师乔纳森恍如和线有了隔夜仇一般，从解锁页面到原生利用中，本来ios10中曾被大量利用的线元素根基全数被面元素代替。

锁屏页面，所有拨号按钮全数由鬼魂样式改成了面性样式，而数字字重的变粗也是一种化面的偏向。这使得按钮及文字更容易辨识，而且低落了线所发生的视觉噪音。



App store中也一样产生着形态的易主。本来的鬼魂按钮全数改成了浅灰色面性按钮。用于划分信息的朋分线明度也获得了禁止。此外，11代中家喻户晓的大题目一样也能够看作化面的偏向（经由过程增长本身的面积），强烈的视觉张力指导用户@敏%vzEzj%捷得举%98w6f%行@辨识。

此外，所有的数字全数提至文字的火线，基于用户由左至右的动线更凸起产物本身，以点化线的情势更好得指导用户举行扫视。



寻求极致的苹果明显不克不及容忍tab中未选中态下呈现的线元素，你可以在ios13中看到，线元素获得了完全的解除，而且色彩一并获得了禁止，再次晋升了浏览内容的沉醉感。



ios11中的商品详情页获得按钮也一样利用了面性，深色的夸大样式更好得契合了页面地点的用户场景，呼唤用户对其感乐趣的商品采纳点击举动。



节制中间页面，基于面元素的承载与朋分性，所有的旌旗灯号类功效自力收纳到了卡片中。亮度和音量坤然软件站的调理则由横向的线性滑竿节制条改成了纵向的面性节制块。一方面加强了二者的辨识力，另外一方面，按照菲茨交互定律，面积的增大带来了更好的点击体验。这一点在miui11的控件优化中也获得了利用。



所有的未选中态图标也举行了面性处置，大幅晋升了10代中未选中页标签的辨识性。而且每一个图标对应的文字也举行了加粗。



纵观ios11中所有形态的变革，咱们可以发明此次改版的终极目标是：促成内容的高效获得。

驯服作为苹果从来遵守的设计法例之一，和包豪斯“情势跟随功效”设计理念不约而合。设计永久只帮忙用户理解内容，但永久不与内容竞争。这一点在ios11的此次“洗面革心”被完全利用及实现，而且对设计圈影响至今。
3、最后
点、线、面理论其实不像格局塔、尼尔森可用性法例等法子论那样，为设计者供给确切可行的详细引导，它更雷同一种内敛的全局观，帮忙设计师抛开色彩、质感等分外手腕，从宏观的角度以点、线和面的方法将所有的设计元素抽象化处置，让本来紊乱无序的万象有章可循。

最后，以康定斯基的一句话末端——

钻研艺术组成的目标不过如斯：找到内涵的生命，让生命的脉动显得可感，并为生命追求法则。

作者：Andrew臣；微信公家号：转行人的设计条记

本文由 @Andrewchen 原创公布于人人都是产物司理，未经允许，制止转载。

题图来自 Unsplash，基于CC0协定。