一套外壳设计理论可以解决你90%的困惑(一)

发布时间：2020-09-30 作者：admin 0

一套设计理论可以解决你90%的困惑(一)

用户在使用一款产品时，视觉感知是非常重要的，甚至对部分“颜控”用户起着决定性的作用。每个产品服务的人群不同，界面设计也很不一样。但无论如何变化，它始终坚持一套设计理论。本文作者提出自己的观点，与大家分享。

一、前言

用户界面的本质是资源的交换。

用户为产品提供时间和注意力，产品为用户提供单位时间内最有价值的内容。

当视觉设计师介入时，他们的关系就可以用这样一幅图来表示。

表示层作为用户体验五要素中最具体的层次，解决了产品视觉效果的呈现问题。视觉设计师需要合理的布局和视觉手段来保证用户在单位时间内获得最多的内容资源，即实现高效的信息获取。

高效的信息获取来源于合理的视觉引导(信息阅读的优先安排)。我们一直在说的层次清晰、信噪比低、沉浸感强等视觉体验，本质上其实是合理的视觉引导。

实现这一点的手段包括众所周知的卡片、空格、颜色匹配、字体层次、图标等等。这些手段纷繁复杂，系统建设是必须的，但很容易淹没在漫长的积累和沉淀中，而每种手段背后又有着怎样的底层逻辑和基础呢？

为什么卡片会使页面层次清晰？平面图标为什么识别度高？为什么步杠要横着竖着分？

点、线、面解决了这些内在的逻辑问题。在你很好的了解了他们的特点之后，大部分的设计方法都可以串联起来解释，让你的设计决策和设计推导更加循证，而不是单纯的靠感觉。

如果把各种设计方法比作各种武术外功招式，那么点线面理论就像内功中的呼吸。虽然是最基本的入门方法，但是它的内息影响着所有招式的发挥。

1.点、线、面和康定斯基

点、线、面理论最早由瓦西里康定斯基提出，他的书《点、线、面》最早在包豪斯学院作为正式课程讲授。他把所有的艺术形式归结为点、线、面三要素之间的关系。

康定斯基关于点、线、面的独特想法对设计领域产生了深远的影响。目前我们最熟悉的领域之一就是平面设计。根据这一理论，一个平面上的所有元素都可以看作点、线、面，每一种形式的存在、变化和组合都可以为画面传达不同的风格和风格。虽然用户界面设计和平面设计属于两个完全不同的设计行业，但是点、线、面理论是相通的。

2.谈点、线、面

点、线、面具有普遍性和相对性。我前面说过，点、线、面三种形式存在于所有的元素中。无论什么样的元素，都可以用点、线、面来表示。而且，点、线、面都是相对的，不是元素的纯定义。

比如界面中的一个曲面图标，可以看作一个点，与线性图标相比，可以看作一个曲面。如果这个图标和其他图标形成一个tab条，那么这个系列的图标也可以看作一条线。

之后我会把它分为点、线、面三个部分，以各形态自身的维度来讲述各形态的特点，以及如何通过存在和变化在界面中发挥各自的作用，从而实现合理高效的视觉引导。

今天先说点事。

一切都从一点开始。

就像BIGBANG起源于一个引力奇点一样，点是万物之源，是一切元素的基础。从维度上看，一个点属于零维，不能像直线或平面那样延伸，这就决定了点本身的向心性和自由性。

康定斯基把点描述为“口才与沉默”，意思是当点在一幅画面中独立存在时，它就开始“口才”它的存在，使自己成为焦点；当它的数量增加时，点趋向于“沉默”，并根据它的排列，趋向于对应形式的特征。

第二，向心

当一个点独立存在时，点的向心性质有助于它成为视觉焦点。在这一点上，主要起到定位的作用。

以支付宝首页为例。在过去的界面设计中，我们经常在每个模块的标题旁边添加一个小短线，这个短线作为定位点，引导用户快速注意到标题，从而实现不同内容的快速定位。而且经常用在作品的包装上。

但是在《肤色还原》形式化浪潮的洗礼下，这种方法已经成了过去式，现在直接用标题本身作为定位的点。

但是在其他更多的场景中，仅仅文字是无法充分发挥向心力的，尤其是在一些信息比较多，需要快速识别的场景中。这时，我们通常会引入另一个元素——图标来引用它。

图标本身可以用来表达意义，但其独立而精致的特性使其适合作为点元素来对待。

比如APP中的标签栏中的图标可以看作点元素，每个图标都以其向心的性质帮助我们快速聚焦到它的位置。列表页面的每个字段前还添加了具有相应含义的图标，以帮助用户快速锚定当前列，并且由于图标更容易识别，阅读变得轻快而有节奏。下图是Google日历中的活动页面表单。当我们去掉字段前面的图标，没有强定位元素的阅读会失去节奏，信息获取会变得困难和缓慢，影响用户的填表。

三.聚合

点是自由细腻的，不像线一样向两端延伸，也就是说可以按照各种形式和规则排列，以适合布局。

1.虚线

在这种分布形式中，点通常以图标的形式水平和垂直排列，并倾向于以线为导向。

点的水平排列通常出现在标签的导航条，单列菱形区域的入口等。点的垂直排列通常见于列表布局。因为点本身集中在用户的注意力上，所以当点向任意方向排列时，用户的视线往往会向相应的方向移动。

上面说的谷歌日历是这样的。单个图标方便定位，多个线性排列的图标有线条引导，方便用户从上到下快速浏览。ios自带的音乐app和QQ音乐的歌单也是用虚线引导浏览，只有图片和阿拉伯数字的区别。

2.虚线表面

在这种分布形式中，点往往在界面中水平排列(通常一行不超过5个)，作为快捷条目存在，形成网格布局。

比如金港区的商业入口和书籍的布局属于网文格式。这种布局中的点集倾向于面向元素，界面在这种布局下呈现出一种装饰性的视觉张力，吸引用户的注意力。而且网格布局引导用户均匀移动眼睛，方便视觉辨别。

3.网格和列表

既然说了这个，就不得不提一下上面两种表单的布局——网格布局和列表布局。

4.目录

一般来说，静态页面的内容大致可以分为两类：图片和文字。

从形态学的角度来看，文本本身具有像线条一样连续延伸的特点，所以列表的横向布局更适合显示长文本。而图片和图标通常独立存在于固定大小的img中，可以视为点元素。如前一节所述，它们可以存在于列表和网格中。

从视觉动线来看，列表布局的动线属于Nelson等前辈提出的F型浏览模式。也就是说，用户首先在左侧的位置点着陆，然后从左向右读取，然后垂直扫描，在定位感兴趣点后继续从左向右读取。这种动线符合人的自然阅读模式。

并且在视线自上而下的迁移中，用户的关注度会随着路径的延伸而逐渐降低。

这种递减效应使得列表布局更适合根据基于产品和用户习惯的一定规则进行排序。

邮件消息按时间排序，这是基于用户查看最新消息的习惯；电商产品默认按相关性、销量等因素排序(同时买家可以根据价格、销量等定制排序。)，这是基于用户的购物偏好；直播平台按热度排名，基于从众效应打造引流点，刺激用户发布优质内容。并且可以在特定的排序规则下，有目的地引导用户更快地浏览。但如果将界面改为网格布局，扫描效率会大大降低，更高的版材率也会导致文字信息的过度弱化。如下图所示，健身环冒险并不是外观产品，用户更关心的是价格、赞等文字信息。当它变成网格视图时，一方面用户无法根据排序结果快速垂直扫描，另一方面文本信息被重量级图片压制，用户无法快速获取。

5.格子

网格布局以牺牲宽度为代价将界面分割成网格，直接限制了长文本的存在，使其更适合放置独立的点，如图片、图标等。而正文则落在最下面，成为辅助。

从视觉动线来看，网格布局趋于Z浏览模式。用户的视觉移动通常是从左到右，再从上到下，可以在几个有“雨露”的点均匀移动，减少注意力的效果没有列表布局那么强烈。因此，网格布局非常适合识别和区分不同的信息。

界面中常见的功能性业务条目，相册或电影的布局，个别店铺的商品都不需要进行明显的排序处理，用户最初的行为是通过图片和图标进行快速区分和区分，然后进行交互决策。

如果列出来，识别和区分不同信息的效率会受到影响。如下图所示，服装是一种典型的外观商品，当它成为列表视图时，将很难区分商品。

因此，我们可以大致梳理两种布局的应用：

列表：适用于以文字为主显示或按一定规则排序的信息。

网格：适用于以图片为主显示或者没有排序规则，需要用户通过图片和图标进行识别和区分的信息。

当然，这两种布局不能随便选一种。为了方便用户习惯，淘宝和JD.COM提供了两种布局视图，供用户随时切换，降低决策成本。

另外，也经常作为丰富画面层次的手段。当点不再在水平和垂直方向排列分布时，可以作为特定场景背景中的图案，减少背景过于平坦和空旷的感觉。

比如美食家封面的加载位图是基于与产品相关的各种食材图标的随机组合，全图减少了用户等待时的沉闷感。

QQ的群发功能在第一张卡片的背景上添加了各种学习图标，随机分布在卡片上，营造出一种活泼有趣的氛围，后面的三个二级功能迅速将层级从卡片的背景上拉开。