如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

有了这篇文章，你就不用在其他地方学习基本的动效设计规则了。

动效的持续时长和速度

当元素的位置和状态发生改变的时候，动效的速度应该足够慢，维持足够长的时间，让用户能够注意到变化，但是同时，又不能慢到需要用户去等待。

大量的研究表明，动效的最佳持续时长是200毫秒到500毫秒之间。这个研究数字是基于人脑的认知方式和信息消化速度得出来的。任何低于100毫秒的动效对于人的眼睛而言，几乎都是瞬间，很难被识别出来。而超过1秒的动效会让人有迟滞感。

△ 界面中动效持续时长

在手机这样的移动端设备上，按照 Material Design 的建议，动效时长应该控制在200~300毫秒之间，在平板电脑上，这个时长应该延长大概30%，也就是说，时长应该在400~450毫秒之间。原因很简单，屏幕尺寸越大，元素在发生位移的时候，跨越的距离越长，速度一定的情况下，时长自然越长。相应的，在可穿戴设备的小屏幕上，这个时长应该缩短30%，在150~200毫秒之间。

△ 移动端设备的屏幕尺寸影响动画的持续时长

网页动效的处理方式也不一样。由于我们习惯在浏览器中直接打开网页，考虑到浏览器性能和大家的使用习惯，用户对于浏览器中动效变化速率的预期还是比较快的。相比于移动端中的动效速度，网页中的速度会快上一倍，换句话说，就是动效的持续时长应该在150~200毫秒之间。如果持续时间太长，用户会忍不住觉得网页卡住了。

不过，如果你的网页中所用的动效并非功能性的，而是装饰用的，或者用来吸引用户的注意力，那么请忘记这个规则，在这种情况下，动效可以更长。

更大的屏幕=更慢的动效？绝不是如此！

请务必记住，无论是在什么平台上，动效的持续时长绝不是单纯取决于屏幕尺寸和运动距离，还取决于平台特征、元素大小、功能设定等等。较小的元素或者较小的变化，相应的动效应该更快一点。因此，大而复杂的元素动效持续时间更长，看起来也更舒服一点。

大小相同的元素，在移动的时候，移动距离最短的元素，是停止下来的。

与较大的元素相比，较小的元素运动速度应该更慢，因为相同的移动距离，对于小元素而言，位移距离和自身大小比例倍数更大，相对偏移更远。

△ 动效的持续时长还和元素大小、运动距离有关

动效的运动规律要符合物理规律，当元素运动到边界，发生碰撞的时候，碰撞的「能量」最终是要均匀分摊下来的，而弹跳的在多数情况下是不适合的，仅在特殊情况下适合使用。

△ 避免使用弹跳，它会分散用户的注意力

元素的运动过程应该是清晰的，尽量不要在运动中使用模糊的效果（是的，说的就是 AE 的模糊动效爱好者们），模糊的动效不适合在 UI界面中使用。

△ 不要在动效中使用模糊效果

列表项（新闻列表、邮件列表等）所使用的动效，在实际运动的过程中，项和项之间应该有轻微的延迟，元素之间的延迟应该控制在20~25毫秒之间，如果持续时间再长，可能会给人一种迟滞的观感。

△ 列表项之间的延迟应该在20~25毫秒

缓动

缓动指的是物体在物理规则下，渐进加速或减速的现象。在动效中加入缓动的效果能够让运动显得更加自然，这是运动的基本原则之一。对于缓动，迪士尼的两位关键性的动画大师 Ollie Johnston 和 Frank Thomas 在他们的著作《The Illusion of Life: Disney Animation》中有过非常详尽的描述。

为了不让动效看起来机械或者人工痕迹太明显，元素的运动应该有渐进加速和渐进减速的特征，就像物理世界当中其他的物体这样。

匀速直线运动

不受任何物理力量的影响，匀速直线运动看起来是非常不自然的，尤其是对于人眼而言。

所有用来设计动画的应用都会使用坐标轴和曲线来阐述动效的运动特征，我将尝试阐述它们的含义，以及如何使用。坐标轴的 X轴是实现，而 Y轴则表示的唯一，换句话来说，如同我们在初中物理中所学到的，坐标轴上的线条描述的是速度和加速度的特征。下面所示的直线，表示速度是均匀的，也就是匀速直线运动，物体在相同时间内运动的距离是不变的。

△ 匀速直线运动的座标图

均匀的变化通常只会用在色彩的改变或者透明的改变上，一般来说，我们也可以让背景元素均匀运动，而前景元素保持不变，来呈现它的状态，就像上图一样。

缓动加速曲线

通过曲线我们可以看到，物体开始时候的初速度比较低，运动缓慢，随后速度逐渐增加，这意味着物体在加速运动。

△ 加速曲线

当物体加速飞出屏幕的时候，可以使用这种加速曲线，比如界面中被用户使用滑动手势甩出去的卡片。但是请记住，只有当运动对象需要完全离开界面的时候才会这么使用，如果它还需要再回来的话，则不行。

△ 以加速运动将卡片扔出屏幕

动画曲线有助于正确传达讯息，甚至表达情绪和感觉。在下面的案例当中，我们可以看每个元素的运动位移是完全一样的，所消耗的总时长也是一样的，但是运动的速率变化是不同的，这一点也体现在曲线上，所表现出来的情绪也不同。当然，通过调整曲线，你能够让物体的运动轨迹尽可能接近现实世界。

缓动减速曲线

当元素从屏幕外运动到屏幕内的时候，动效应该遵循这类曲线的运动特征。从全速进入屏幕开始，速度降低，直到完全停止。

△ 减速曲线

减速曲线可以适用于多种不同的 UI控件和元素，包括从屏幕外进入屏幕内的的卡片、条目等。

△ 减速曲线案例

缓动标准曲线

在这种曲线之下，物体从静止开始加速，到达速度最高点之后开始减速直到静止。这种类型的元素在 UI界面中最为常见，每当你不知道要在动效中使用哪种运动方式的时候，可以试试标准曲线。

△ 标准曲线

根据 Material Design 的规范，最好使用不那么对称的增速和减速的过程，让动效看起来更加真实。同时大家会更加在意运动的结果，曲线的末端，也就是运动结束的过程最好进行适当的强调，换句话说就是减速过程持续的时长最好超过开始加速的时长，用户将会更加清楚地观察到运动的最终结果，从而更好地明白运动的终止状态。

△ 对称和非对称运动的差异

当元素从屏幕的一个位置移动到另外一个位置的时候，最好使用这种标准的缓动曲线，这个过程中，尽量不要让动画效果引人注意，不要使用戏剧化的效果。

△ 卡片元素从屏幕上运动的时候，不对称的缓动曲线

当元素从屏幕上消失的时候，采用了相同的不对称缓动曲线，用户同样可以通过滑动回到之前的位置。这个环节使用了抽屉式导航控件。

△ 抽屉式导航随着缓动曲线从屏幕上隐藏

从这些案例当中，可以看出许多动效的初学者对于运动规则的了解还不足。比如下面的这个动效，元素随着减速曲线出现，然后使用标准缓动曲线消失。根据 Material Design 的标准，新出现的元素持续的时间应该更长，因为需要吸引更多的注意力。

△ 导航菜单的出现和消失

贝赛尔曲线函数 cubic-bezier（）是用来描述曲线的，它的名字前面之所以带有 Cubic 是因为每个贝赛尔曲线的描述都是基于四个不同的参数来确定的。曲线的起点（0，0）和终点（1，1）在坐标轴上的位置是已经事先确定的。

为了简化你对于贝赛尔曲线的理解，我们推荐两个网站，分别是 easings.net 和 cubic-bezier.com ，前者包含了最常见的曲线的列表，你可以将他们复制到你的原型工具中，第二个网站为你提供了不同曲线的参数，你可以直接在其中查看各种对象的移动方式。

△ 不同类型的 cubic-bezier（）的曲线和参数

界面动效的编排

就像芭蕾舞的舞蹈编排一样，动画效果也是需要编排的，它的主要目的是让元素从一个状态切换到下一个状态，自然过渡，让用户的注意力自然地被引导过去。

编排有两种不同的方式，一种是均等交互，另一种是从属交互。

均等交互

均等交互意味着所有的元素和对象都遵循一个特定的编排的规则。

在这个实例当中，所有的卡片都遵循着一个方向来引导用户的注意力，自上到下地次第加载。相反，没有按照这样清晰的规则来加载，用户的注意力会被分散，元素的外观排布也会显得比较糟糕。

△ 用户的注意力应该沿着一个流向来引导

至于表格式的布局，它相对就复杂一点。在这里，用户的视线流向应该是清晰的对角线方向，因此，逐个区块次第出现是一个糟糕的设计。这样的逐个显示，一方面耗时太长，另一方面会让用户觉得元素的加载方式是锯齿状的，这种方式并不合理。

△ 沿着对角线加载

从属交互

从属交互指的是使用一个中心对象作为主体，来吸引用户的注意力，而其他的元素从属于它来逐步呈现。这样的动画设计能够创造更强的秩序感，让主要的内容更容易引起用户的注意。

在其他的设计当中，用户很难搞清楚哪个才是主要的，因为注意力被分散了。因此，如果要设置多个动画元素，应该定义清楚谁为主，谁是中心，并且尽量按照从属关系来次第呈现不同的子元素。

如果只有一个中心对象，那么其他的对象的运动方式都要受它制约，否则用户分不清楚主次。

根据 Material Design 的规定，当元素不成比例地变幻尺寸的时候，它应该沿着弧线运动，而不是直线运动，这样有助于让它看起来更加自然。所谓「不成比例」地变化指的是元素的长和宽的变化并不是按照相同比例来缩放或者变化的，换句话来说，变化的速度也不一样。（比如，方形变成矩形）

△ 不成比例地改变对象外观的时候，运动轨迹应该是弧线的

相反，如果元素是按照比例改变大小的时候，应该沿着直线移动，这样不仅操作更加方便，而且更符合均匀变化的特征。看一下真实的案例，你会发现直线的运动轨迹会更加合理。

△ 成比例变化大小的时候，应该沿着直线运动

当元素不成比例放大的时候，运动轨迹是弧线，而这种弧线运动轨迹有两种不同的呈现一种，一种轨迹是初始方向为垂直方向而运动结束时瞬间运动方向是水平的（Horizontal out），另外一种初始方向是水平方向而运动结束时瞬间运动方向是垂直的（Vertical out）。

那么怎么选取这个方向呢？很简单，元素运动曲线的方向，应该是要向界面的主要运动方向的主轴靠拢重合。举个例子，在下面的动效当中，整个界面的滚动方向是上下滚动，主轴是纵向的，因此，当卡片点击之后被展开的时候，会先向右水平移动，并最终以垂直运动结束，运动的最终方向，切线是垂直的，也就和垂直方向的主轴重合了。

△ 元素按照弧线展开的时候，最终方向应该和主轴重合

如果几个不同的元素的运动轨迹相交，那么他们不能彼此穿越。如果每个元素都必须通过某个交点，抵达另外一个位置，那么应该次第减速，依次通过这个点，给彼此留出足够的空间。另外一种选择，是元素不相交，而是像实体一样在靠近的时候，彼此推开。为什么？因为我们通常假定界面中所有的元素都位于同一个平面当中。

在运动过程中，元素不应彼此穿越，而应该互相留出空间。

但是这一点也不是一成不变的。在比较拥挤的界面当中，某个元素可以「越过」其他的元素，它同样没有穿过其他的元素消失，而是单纯的移动。这一点从某种意义上也是延续自我们日常的物理规律，只不过我们会默认界面中的元素在这个情况下拥有了高度这样的属性。

△ 元素可以越过其他的元素运动

结语

我们总结了这么多动效运动的规则和原则，从某种意义上还是延续自我们对于物理世界的认知，摩擦力和加速度在虚拟界面中以另外的方式续存着。模仿现实世界的界面让我们对于界面的秩序有更清晰的认知，允许我们更轻松的了解和访问界面的内容。

如果动效按照正确的方式来设计，它应该是不显著，且不会分散用户注意力的。如果不是这样，那么你需要让动效更微妙一点，实在不行甚至需要将它移除。动效不应该成为影响用户操控界面的障碍，或者转移注意力的存在。

当然，即使是遵循这么多规律，动效的设计依然是一门艺术，而非单纯的科学，多做测试多摸索总是有必要的。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

筛选组件概述

筛选组件的作用是帮助人们在面对大量信息时，通过更的筛选方式提升决策效率。广义的筛选组件还包括搜索栏及Tab栏，本文暂不分析。

组件包括筛选按钮与筛选器，筛选器包含类别及各类别下的筛选项。使用频次高低、筛选条件的数量都是决定筛选组件样式的因素。

01

位于 Tab 栏的筛选组件

组件样式

筛选按钮位置：一般位于Tab栏最右侧视觉薄弱区域。

筛选器形式：点击按钮，筛选器以抽屉形式从Tab栏底部向下展开筛选条件，或以浮层形式从屏幕最右侧向左滑出筛选条件。

样式分析

当界面使用Tab栏时，已为内容做了第一层筛选，多数情况下已满足用户对内容的筛选需求。

当筛选类别较多且复杂时，就需要在Tab栏增加筛选组件来提供更详细的筛选能力。而这里的筛选组件较于Tab栏其他条件优先级较低，屏幕右侧为视觉薄弱区域，这也解释了为什么大多数Tab栏的筛选组件都位于最右侧。

案例一

案例来源于美团App

此页是对美食品类的选择，这里的筛选组件在Tab中是最常见的样式。对于用户而言，选择商家店铺优先考虑地域、美食类别、价格及综合评价，而用餐人数与餐厅服务等只是辅助选择条件。

筛选器使用了抽屉形式，如要选择此样式，建议在筛选条件不多且不超过一屏的场景使用。

案例二

案例来源于淘宝App

当用户从首页全局搜索后，出现此页。筛选按钮位于二级Tab栏。点击筛选按钮后，由于筛选条件较多，很难一页展示完，用户往往需要上下滑动屏幕查看全部，因此使用右侧浮层展开的形式较适合。

案例三

案例来源于哔哩哔哩App

全局搜索后，Tab栏默认展开综合tab内容，用户对排序、时长、分区的筛选需求较高，因此直接把筛选类别放在了二级Tab栏，相比通过点击筛选按钮再展开类别的交互方式更简单直白。

点击筛选类别后，筛选器使用抽屉式。此种筛选组件样式一般用于筛选类别较少（不超过4项），筛选项数量不多的场景。

02

底部按钮型筛选组件

组件样式

筛选按钮位置：以按钮或浮层形式固定在界面底部，便于用户操作。

筛选器形式：点击按钮，筛选器以抽屉形式从按钮底部向上展开筛选条件，或以界面浮层形式从底部向上展开筛选条件。

样式分析

使用底部筛选按钮的界面，内容区类别相对单一，通过筛选组件就能满足筛选需求，并对筛选的需求较大。而底部按钮作为常见的按钮形式，用户点击更方便，因此承载筛选组件较合适。

若使用此样式，点击筛选按钮后，筛选器的出现优先考虑从底部向上出现的抽屉式浮层。

案例一

案例来源于旅游类App Expedia

输入旅游目的地后进入此列表页，用户目的性明确，就是要查看结果。底部的筛选按钮是为了帮助用户更快的筛选结果，方便用户触达。并且筛选条件较多，无法一页展示完，使用了界面浮层的形式。

这里还有2个细节：

1、由于筛选类别较多，手动清除单个筛选条件太过繁琐，于是筛选器底部增加了清除按钮，操作更简便。但底部按钮一般为“确定”操作，“清除”放在底部样式上没有做误操作提示，可能会增加误操作机率。

2、筛选后，筛选按钮处会显示已选择的筛选类别数量，给用户带来良好的使用反馈。

案例二

案例来源于dribbble

当前页为地点搜索。需要先进行筛选操作，内容区再出现结果。筛选按钮位于底部浮层，筛选类别代替筛选按钮平铺展现，筛选器使用抽屉式从浮层底部向上展开。

此样式一般适合筛选类别较少，并且每个类别的筛选项不多的场景。优点是减少操作步骤，提高用户操作效率。并且可以学习一些体验细节：在筛选器中选择一个选项后，在其筛选类别处同步修改为该选项；筛选项与筛选类别选中状态一致，增加关联度。

03

浮层按钮型筛选组件

组件样式

筛选按钮位置：以浮层按钮的形式位于界面右下方，占用空间较少。

筛选器形式：点击按钮，筛选器以浮层形式为主，或在筛选按钮下方展开筛选条件。

样式分析

浮层型筛选按钮的优点是增大内容区的纵向空间，比底部按钮型筛选组件的层级要弱一些。但当用户需要操作时，它的位置也便于用户点击。

设计时按钮用色需要区别于内容区，内容形式尽量精简直观。若使用案例3中的扇形筛选器，则要求筛选类别为1-2类，筛选项数量少切文案精简。

案例一

案例来源于dribbble

筛选按钮位于界面右下方紧贴于右侧屏边，浮于被筛选内容上层，滑动屏幕时消失。点击筛选按钮后，从屏幕右侧展开筛选浮层，原筛选按钮变为确认按钮。

此按钮形式最大限度的让出空间留给内容区，且右下角为用户关注薄弱区，这样的位置关系可让用户按需操作。关于筛选器使用右侧浮层前面的案例也提到过，适用于筛选条件较多的场景。并且使用侧边栏形式的浮层与筛选按钮关联性较高，相对符合用户认知。体验细节上可学习的点还有按钮功能的改变，使得体验更便捷。

案例二

案例来源于dribbble

筛选按钮位于界面右下方但没有贴屏边，筛选器以底部分层形式从底部向上展开。这里的筛选条件不多，因此使用了底部分层形式。

案例三

案例来源于dribbble

筛选按钮形式与上一案例相似，不同的是筛选按钮处直接显示筛选条件，可得知此内容区目前被筛选维度为“30M”。此样式适用于筛选条件为同一维度的场景。

点击按钮后，从按钮下层展开扇形筛选器，滑动选择筛选条件。此种筛选器样式使用场景较局限，多为选择时长或数量，并且单选居多。因此筛选器不需要“确定按钮”，只需放“关闭按钮”即可。这里的筛选器也可根据不同的场景选择其他的形式。

04

举一反三

接下来我们拿个案例练练手。

下图界面中内容区为概览与各监控数据图表，需要设计一个筛选组件对内容区进行不同时段的筛选。

在设计之前需要确定几个需求：筛选组件的使用频次、筛选类别的数量、筛选项的数量，单复选关系、筛选条件之间的优先级。

进一步明确需求

筛选类别只有时间段1项，筛选数量不固定，为多项，单选关系。当用户进入此页，根据用户使用需求判断“1小时”基本满足用户查看数据的需求，默认展示“1小时”的筛选。因此筛选组件此场景使用“1小时”时段基本满足用户查看数据的需求，可判断用户使用筛选组件的频次不高。

方案解析

方案一，Tab栏形式

Tab是对整页的筛选，多为不同维度，而这里只有时段一个维度。

Tab所处位置为视觉热点区域附近，但用户对筛选组件的需求并不高，放在此位置占用了概览区空间。

方案二，底部按钮形式

底部按钮位于用户的习惯操作区，放这里使用层级略高，并且会使内容区的整体高度减少。

方案三，浮层按钮形式

位于右下角的浮层按钮在页面中属于视觉薄弱区域，可以使用户浏览时不受按钮影响；但按钮拥有强对比色，在有筛选需求时满足使用需求。

筛选器以时间选择器形式出现，可满足筛选项数量较多的场景。

05

小结

以上内容是我对常见筛选组件的思考，每一种样式都有其优缺点。但我们设计筛选组件的最终目的是帮助用户筛选信息，决策。这就需要设计师根据筛选需求、用户习惯等设计符合用户使用场景的操作体验。

本文作者：TXD技术体验团队-喻杰（阿里巴巴视觉设计师）

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

令人上瘾的数字内容，让我们一刻都离不开智能手机，从某种意义上，它彻底改变了我们的生活，工作，甚至思考的方式。现如今，越来越多的人开始尝试戒除令人上瘾的智能手机，寻找更加健康自由的人机关系。根据今天的调研，过度使用智能手机，确实会有一定机率带来心理健康的问题。从 iPhone 诞生之初，直到10年后的现在，在数字产品上瘾和用户注意力的控制这件事情上，开发团队本身就没有放松过。这次，Fast Company 专访了前苹果设计师 Imran Chaudhri。

Imran Chaudhri 早在 1995 年就加入了苹果公司，并且很快就出任了公司的人机交互界面组的设计总监，在2006年前后，他也是作为 iPhone 项目核心的6人团的一员，加入到项目当中来。

待在苹果的20多年时间里，他参与了 iPod、iPad、 Apple Watch、Apple TV 以及 iPhone 等几乎全部主要产品的用户界面的设计，直到他开始追求创造属于自己的公司和事业，才正式从苹果离职。也正是因为这样的契机，才使得 Fast Company 有机会能和他面对面地一起聊一聊他的过去，以及他留给苹果的那些遗产。

和许多设计师一样，他们对于产品的想法和企业的定位或多或少有一些错位。和苹果产品相关的很多信息，他现在依然还不能透露，但是他依然提到了很重要的事情：即使是在iPhone的原型设计阶段，他就已经意识到了，这款产品最大的缺陷之一，就是它注定会分散甚至垄断用户的注意力。而与此同时，苹果也有意识的没有给予用户，对于iPhone 完全的控制权。下面，是访谈中能够对外公布的几个重要的内容摘录：

设计「请勿打扰」的功能

「我认为，从某种意义上来说，真正洞悉设计的设计师，大都能够预见到手机对于注意力的影响。在使用手机的时候，我们总会碰到被各种各样的信息和通知打扰到。」

「早些时候，当我刚刚开始制作 iPhone 的原型之时，管束还不是那么多，我们当中有几个人还有幸把原型机带回家，这样就可以每天工作生活都使用它。那个时候我全世界各地的朋友都和我保持着联系，iPhone 几乎隔一会儿就会亮一下，显示有新消息，叮叮咚咚响个不停，于是我意识到，和我们朝夕相处的手机需要一个管控功能。所以，在很早的阶段，我就开始设计请勿打扰这个功能了。」

对于谁来掌控手机设备这个事，苹果的内部产生了分歧

「其实，在苹果公司内部，想要大家都理解分心是一个影响用户生活的问题，还挺难的。乔布斯倒是很能理解的，但是公司内其他的同事，对于用户对于手机的控制权多少，其实大家还存在不少争议。我和一部分同事倡议给用户更多的掌控权，不过这个事情对产品的营销和市场运作是有影响的。所以，当时内部也有声音说，如果真的给用户太多的控制权，那么这款手机就不酷了。」

「其实直到今天，iPhone 当中绝大多数的功能都是可控的，但是其中很多功能隐藏的比较深，彻底的掌控它们是比较困难的，如果你真得想让那些整天都在轰炸你的信息彻底远离，你需要花费很长的时间来摸索，用独特的方式逐个调整或者关闭才行。因此，对于那些熟练使用iPhone 的重度用户而言，确实是可以如臂使指地掌控这台设备，但是对于更换壁纸都不太会的用户，想要搞清楚iPhone ，让它如意随心，真的是难如登天。他们没有这样的控制能力。」

关于 iPhone 是否有可能更智能地预测通知

「你可能会在一个下午安装十几个不同的新应用，然后你不停地会收到提醒和通知，是否要授权使用相机，是否要授权获取你的位置，是否允许它给你发送通知，每个都要做决定。稍后，你可能会发现，Facebook 一直在后台给你推送信息。再之后你就会发现你有睡眠障碍了，总会有信息大半夜地推送到你的眼前，让你无法安生地休息。实际上，借助请勿打扰的功能，你可以一早上再查看它们。这套系统足够智能，能够判断出哪些应用之前就已经获得了许可，哪些仍然在后台获取数据，哪些通知实际上你并不关心。所以，这套系统其实是会选择更加恰当的时机和正确的方式来建立用户和手机之间的对话和关系，手机会询问用户，你真的需要这些通知吗？或者是，你真的需要Facebook 使用你的电话簿的信息吗（因为你已经很久没有登录了）？等等。正确地设计了这套系统之后，提醒用户的方式也非常的多。」

为什么苹果最后还是开始关注分心这个事情？

「iOS 12 中内置的这套防干扰的控制系统可以更加系统地监控手机各方面的功能和用量，它实际上是从iOS 6 时代的请勿打扰的功能拓展而来的。但是它在现在被推出来真正的原因是有太多的用户为此而抱怨，而媒体和用户都发文吐槽，在呼声和压力之下，它们最终在iOS 12 中呈现了出来。这个局面之下，苹果没有选择的余地，必须对于舆论有回应。这对于每个人都是好事，因为用户和他们的孩子都因此能够获得更好的产品。但是这是否是最好的产品？当然算不上，因为现在的iOS系统是为了应对舆论和负面新闻而设计的，设计的意图并不对。如果是苹果主动作出这样的决策，才算得上是好产品。」

「对于苹果这种体量的大公司而言，产品设计其实复杂性非常的高。真的是这样。作为设计师，你需要服务于你的用户，你还得和公司的利益保持一致，同时，还需要对得起自己的底线和道德。服务于一个大型的企业，确实非常的难做抉择。对于用户而言，可以很轻松的直接怼苹果，说它没有做对的事情。但是身为其中的设计师，要平衡各方面的需求也压力，经常会进退维谷。有些用户因为iPhone 的一些功能，受到了负面的影响，有些人受到的影响比另一部分人更多。但是身为设计师，一个受到各方面制衡的设计师，即使是作出了改变，在很多时候也远远不够。至少在我看来，现在的改变还不够大。」

管理数字化的生活，就像管理健康一样重要

「我和数字设备之间的关系非常简单。我不希望被它所控制。从使用 iPhone 的第一天起，我就用着黑色的壁纸。我不会将一大堆的东西塞进手机，减少被分心的可能性。我的手机第一屏上的应用程序非常少。」

「我的意思并不是说这样做很重要，或者说我推荐这么做，对于人和手机之间的关系，每个人都不一样，处理方式也都很个人。对于如何处理自己和手机之间的关系，有人让我提一些建议，我觉得没有必要，因为我的办法并不适合所有人。一天喝多少咖啡，抽几包烟，每个人的情况都不一样，没法一概而论。不过，心理健康是一件大事，你和你的智能设备之间，应该保持着平等的关系。这至少是一个大的设计趋势，是设计师需要关注的焦点。就像可持续性发展已经成为时代的主流诉求一样，你无法忽视认知压力的存在，认知设计也势在必行。」

界面设计的未来，以及不可避免的问题

「我观察到，界面设计在很自然地进化和发展着，从按钮到旋钮，从点击到手势操作，从语音交互到情感化设计，均是如此。无论是考虑到用户的情感诉求，还是进入语音交互的领域，都一定会遭遇一大堆的问题。按钮和旋钮的设计是需要考虑到人体工程学的问题，点击和手势的交互则牵涉到更具体的压感和硬件上问题。任何人和机器之间的交互，都一定都会遭遇不自然的状况和问题，就这么简单。身为设计师，需要足够的预见性，才能真正领先于用户，预测到可能会遭遇的问题。」

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

在 Sarah 给 Jimmy 讲完了她在设计上的一些原则之后，Jimmy 就准备开始重新设计那个客户等着要的新的仪表盘界面了。与此同时，他所在的公司 Shmuckle 准备设置一个新的产品经理的职位，并且将会在公司内部选择合适的人员来任职。Jimmy 对此非常有兴趣，实际上，在当前的架构下， Jimmy 是一个非常合适的候选人。但是要担任这个职位，他必须证明自己能够胜任这个职位，证明自己知道如何管理项目和团队。

对于他正在做的这个控制面板的设计项目，他也正在挑选合适的产出流程。用敏捷（Agile）开发流程更好，还是应该用瀑布模型（Waterfall Model）？又或者是循环式开发流程？他觉得跟开发部的同事聊一聊会是更好的选择。

当他找到工程部的 Boris 的时候，他正在楼道里刷推特摸鱼。「用什么流程？那还用问，当然是敏捷啦。这个最好，过程清晰简单，现在没有什么办法比敏捷更好处理各种数字产品的设计和开发啦。」接着，Boris 去隔壁会议室拖出一个白板，并且说道：「给我一个小时，我告诉你关于敏捷开发的一切。接着还能捎带计划一下每周的工作内容，这样你就能完全明白要干啥了。哦，差点忘了，还有几个播客和视频可以帮你更加深入地了解敏捷。」

敏捷开发以用户的需求进化为核心，采用迭代、循序渐进的方法进行软件开发。在敏捷开发中，软件项目在构建初期被切分成多个子项目，各个子项目的成果都经过测试，具备可视、可集成和可运行使用的特征。换言之，就是把一个大项目分为多个相互联系，但也可独立运行的小项目，并分别完成，在此过程中软件一直处于可使用状态。

絮絮叨叨的 Boris 终于找到一个倾诉的对象，Jimmy 一时之间感到颇为尴尬，不知道如何回应。好在这个时候，开发部另外一个部门的 Floris 从门口路过，Jimmy 赶紧喊住他「Floris 我到处在找你，你怎么在这儿啊」说着就拉住 Floris 的手，窜进了另外一个办公室，远离了热情的 Boris。

「干啥？你俩在聊啥？」

「Boris在跟我说敏捷开发……」

「啥玩意儿？他跟你讲敏捷开发？快拉倒吧，他们部门里面唯一敏捷的就手头上的 Macbook。我们这边都用瀑布模型来作为产品开发的流程，因为它是线性的，有着更简单的结构，操作起来也简单，很少会发生混乱。」说着，Floris 从办公室的书架上摸出一堆文档压到 Jimmy 手上。「你要的东西都在里面，祝你好运。如果你需要任何帮助，请在公共的平台上跟我约时间，我们可以开个小会解决一下问题~」说着 Floris 回到自己的桌子边，开始继续干活儿。

瀑布模型（Waterfall Model） 是一个项目开发架构，开发过程是通过设计一系列阶段顺序展开的，从系统需求分析开始直到产品发布和维护，每个阶段都会产生循环反馈，因此，如果有信息未被覆盖或者发现了问题，那么最好「返回」上一个阶段并进行适当的修改，项目开发进程从一个阶段「流动」到下一个阶段，这也是瀑布模型名称的由来。包括软件工程开发、企业项目开发、产品生产以及市场销售等构造瀑布模型。

拿着一堆资料，回到自己的工位前，整个人都要陷入到怠惰的情绪里面，瘫坐在电脑椅上纠结了起来。信息太多了，不知道从何做起。在网上一搜也是成堆的内容，根本不知道从何入手。懵逼了。

Jimmy 决定采用最终的备用方案——万事不决问 Sarah。在 Jimmy 的工作经验当中，老领导 Sarah 总能给他靠谱的建议和可行的方案。

出问题的时候，先后退一步

Sarah 办公室的门从来都是敞开的。当 Jimmy 来找她的时候，Sarah 正在阅读一些有意思的东西。她的办公室里面有很多的书和绿植，漂亮的色彩让 Sarah 的整个工作区域仿佛能够唤起人的创造力和想象力，桌上打开的书页散发着油墨的味道，闻起来让人很有安全感，像家里的书房。「Hey，Sarah，我又有问题来麻烦你啦，你有空么？」

「我的门永远敞开着。这次有啥问题，看看我能怎么帮到你。」Sarah 听到声音就知道是谁，一边放下手头的文档，一边抬头笑着看到略显局促的 Jimmy 。说话间，Jimmy 非常熟悉地跑到办公桌另外一边的椅子上瘫坐下来，Sarah 笑着摇头，拿起咖啡壶给 Jimmy 倒上一杯咖啡。

回到自己椅子上的 Sarah 没有看自己的电脑，而是像心理咨询师一样，盯着 JImmy ，进入了等他倾诉的状态。而 Jimmy 此刻也惊讶于 Sarah 如此洒脱迅速地放下手头的工作，并专注地帮助自己，于是也不再放飞地瘫坐着，直起腰身，开始认真地陈述自己的问题：

「实际上，你之前跟我说的设计原则，让我获益匪浅。我按照你告诉我的方法，找到了症结，解决了问题。但是我现在不仅仅是要设计这个仪表盘界面，我需要开发和实现。有人说敏捷开发比较好，有人说瀑布模型很给力，这些开发方式到底有啥差别，优势具体在哪我并没有搞清楚。有人说我需要的是敏捷开发里面 Scrum，还有人说，它实际上是 shmum，也有人称之为 Bshmum，结果还有朋友告诉我说 Google 的 Design Sprint 才能帮我解决问题。我感觉脑子快要炸了。所以……Sarah 你明白么，我需要帮助了。 」

听到 Jimmy 说到后面，Sarah 就明白了他碰到什么问题了。「Jimmy，没事儿，我们总会在某些时候碰到问题，别人的指导总会派上用场。」

「我可以理解，如果在网上搜索这些相关的信息，会有太多杂乱的内容让你感到信息过载。幸运的是，如果你理解这些东西背后的基本原理，就可以相对轻松地梳理清楚所有的内容了。」

「早知道我应该一开始就来找 Sarah 问问。」Jimmy 不由得对自己抱怨了一句。说着，他在摸起咖啡杯旁边的纸和笔，准备做笔记，就像上次那样。Sarah 看穿了他的小心思，笑道：「不用记。」说着，喝了一口咖啡，然后继续道：「先想想看，我们为什么会有敏捷、瀑布模型、冲刺模型，为什么要用循环工作法呢？」

「为了？」Jimmy 下意识挠头。

「是的，但也不完全是这样。总的来说，我们需要一个过程来呈现产品，因为人类的思维是没有办法直接掌控混乱的事物。此外，一个清晰的、可遵循可记录的流程，能够确保你在完成后，确保产品的整个开发过程是可交付的，细节也是可回溯的。这就是为什么，我们需要这些流程。」

「最首要的问题，不是选择哪个流程，而是要了解这些流程为什么而存在，以及我们可能会碰到什么样的问题。无论你选择哪一个。」Sarah 看了一眼窗外，继续说道：「你有问过公司的其他的同事，他们都遵循什么样的流程么？」Sarah 问道。

「问过了，绝大多数都采用的敏捷和瀑布模型。」Jimmy 说到。

承诺是关键

「首先要告诉你的是，两种方法都很棒。但是绝大多数的公司只会在两种方法当中选择一种。因此，当人们采用敏捷或者瀑布的时候，我们更多看到的是他们所做的设计或者开发的小冲刺。以往，我们会看到团队会在3个月或者半年这样的时间尺度当中，一直保持着高强度冲刺的状态的。在旁观者眼中，会看到一个清晰的故事，或者说整个产品逐渐设计或者开发出来的景象。如今流行的做法是将冲刺划分为很多不同的阶段，这也是为什么如今被称为小冲刺。不过本质上，做的事情和内容并没有改变。」

「另外，很多人会使用敏捷的方法来做项目，过程中会不断的迭代修改。他们希望通过这样的方法来获得更好的结果。实际上，很多团队会持续不断地、长期地坚持这么做，几个月甚至一年半载都没有发布任何东西。如果你在这种情况下，会问自己，到底出了什么问题？我会告诉你，原因在于没有清晰的承诺，以及太多的事情让人分心。大家都不会承诺在一段时间内交付一些东西，使用各种借口不按时、按预算来完成项目。」

「如果这个时间只是一两周，一个月，好吧，或者说一年，这个周期并不重要。重要的是，你不需要拥有一个清晰的过程，并且承诺提供一些东西。当然，这是很有挑战性的。这意味着，在这个情况下，你必须作出一些选择，来完成任务。」Sarah 总结道。

阻碍前进的东西

「到底使用哪种敏捷的方法，采取多少个步骤，或者使用经典的瀑布模型，借助谷歌的设计冲刺，都可以，都没有问题。大家总会认为，采用哪种过程是关键，但是现实是，这个过程始终都只是达成目的一个手段而已。」

「真正的问题在于，人的天性是懒惰的，没有按照承诺交付东西。总是忍不住的拖延，膨胀的自我，办公室政治，爱来事儿的甲方，喜欢变卦的客户，它们还都会像拦路虎一样进入产品和设计的流程。无休止的辩论，不断改变的策略，不断膨胀来回拉锯的会议，最后你只能呆滞地坐在办公室当中，想想自己的生活到底出了什么问题。最后，我想说一下多年前，我自己所经历的一个项目。」Sarah 觉得她应该从具体案例上来说说这个事儿了。

「所以，首先你应该清楚，在一个特定的时间段内，交付一些东西出来。你要保证你的团队不会跳票和拖延，也不会让预算超出计划。你将要在约束中工作。约束其实是一种隐藏的优点，也许并不是每个人都明白。你需要完全保持专注，除了你的和参评之外，不会被其他的任何东西分心。就你的情况而言，你需要专注于这个仪表盘界面的设计和实现。」Sarah 说道。

「团队的规模很重要。不过那是后话，后面咱们再仔细聊。」

「假设，你有一个三个人组成的团队，他们共同负责开发并发布你的产品的下一个功能。具体到你的头上，就是为你开发并实现这个重设计的仪表盘。你需要确保公司的其他人不会前来干涉他们的工作，不会来和他们讨论这个项目以外的任何事情。」

「这一点极为重要。他们必须保持专注。减少被打扰的机率——或者说不被打扰是最好的事情，他们能够专注而清晰的思考问题。除了手头的任务之外，他们不会需要去做其他的任何事情，不会被其他的工作内容所分心。对于如何做手头的工作，什么时候做，具体做什么，他们应当有足够的控制权和自主权。最后，请记住这一点：

团队必须足够小。如果太大，沟通问题一定会成为主要的障碍。每增加一个人，想让大家信息和想法保持一致的成本，就会成倍增加。如果你拥有太多的自由，太多的资源以及大量的人员，你不仅会得到过度的设计，超出常规的工作，需要超出计划的预算，以及一个没有重点，不够出彩的产品。」

问题总是会出现的

「如果你像我说的一样，后退一步来看问题，就会意识到，流程背后所存在的问题，并不是流程本身的优劣，也不关乎公司、人员、国家、文化或者其他。这是关于纪律和约束。不仅是团队本身需要纪律，负责人要有纪律感，业务也需要有纪律约束。如同我们所知道的，团队也好，产品也好，公司也好，它都是自上而下的，顶部的纪律、约束和眼界，决定了底部的纪律、调性和产出。」

「现在，你可能会问自己，如果你的项目出现了问题，会怎么办？那么首先，对于你想要达成的目标，需要一个清晰的愿景或者想法。除非你的愿景和目标足够清晰，否则你是没有办法来提供承诺的。在项目开始之前，这个愿景/目标必须有足够清晰的定义，是否能够达成，难度高低，是否具备可执行性，否则在过程中一定会有所偏离。在这里，给你几个小贴士，务必要记住：

不要自欺欺人，你需要提前计划好整个项目，避免出错。很多事情都会出错，所以你需要有目标有愿景，你需要向着目标前进，并且随时做好解决问题、纠偏的准备。一旦你被其他的因素影响，就很容易增加开发时间、增加预算、招募更多的人手。不要相信所谓的规划和蓝图，那什么都不是。问题是一定会出现的，出错了，就专注于最终目标，抓紧手头的项目，别无其他。」

Sarah 说道这里，Jimmy 已经开始有所思考了。「所以，在我告诉你这些事情以后，对于你你手头的这个仪表盘的项目，你打算下一步要怎么做？」

需要始终牢记的事情

Jimmy 的脑中仍然在反思 Sarah 刚刚说过的话，下意识回复道：「要有远见，目标清晰，为即将出现的错误与问题做好准备，组建一个足够独立的小团队，和公司其他的团队和部门隔离开来，这样可以在不被打断的情况下聚焦于当前的任务，最重要的是，要在承诺的日期前交付承诺的产品。但是我不知道团队要有多小，我应该带多少人？」Jimmy 问道。

「如果我说我知道你要带几个，那么我一定是在骗你。不过，通常而言，你这种规模不算太大的产品，我建议控制在3人以内。你是这个项目的主管设计师，也是产品经理，在设计上已经没有大的问题，你还需要两个开发人员，一个负责前端，一个负责后端，这样足矣。」Sarah 回答道。

「那么我应该花费多少人在这个上面呢？」Jimmy 又问道。

「这个是你的项目，时间应该由你来衡量。不过，你需要一开始就清楚你手头有多少资源，你有多少时间来投入这个项目，有多少可供调用的预算，以及管理团队的耐心达到了什么程度。而且，这个事情最关键的并不是时间，而是你的承诺，以及到达约定时间之后要交付的东西。这不仅是对上层的责任，对于你和你的项目而言，也是一个可供奋斗的目标和清晰的边界。你的项目看起来并不算小，这个人员工作量之下，可能需要花费一个月的时间来进行开发。但是请记住，在一个月的时间内，你必须提交出一个可用的产品出来。从我的角度上来看，我是不允许增加预算和时间的。约束对双方其实都是有利的。」Sarah 说道。

「那么我还是想问最开始的那个问题，到底应该使用敏捷还是瀑布模型？」Jimmy 还是忍不住问道。

「我不知道。」Sarah 坦言道：「你的项目应该由你来决定。对我而言，选择哪个流程其实并不算最重要的问题，相反我刚刚说道的，流程之前的种种问题才是最重要的，关于承诺，团队的构建和管理，这些因素产生的影响更为深远。如果你清楚的知道最终要产出的产品，流程就仅仅只是手段了。」Sarah 笑着总结道。说话间，她伸手去拿之前没看完的文档。「谢谢，Sarah，」Jimmy 笑道：「你好像又救了我一次。」说着 Jimmy 走出了Sarah 的办公室。

「我的门一直都敞开着。」Sarah 低声说道，走远了 Jimmy 大概并没有听到这句低语。

结语

在设计和开发数字产品的时候，每个团队的负责人可以选择自己习惯的或者自己青睐的流程和方法。使用什么样的方法无关紧要，在未来10年，我们可能还会碰到更多的新方法，新的策略。而唯一不变的，始终还是最基本的问题，团队，承诺和交付。

我注意到，有人把产品所使用的敏捷和瀑布模型这类流程称为「项目的上帝」。但是实际上，不管哪种流程，依然会陷入无休止的扯皮会议和无意义的辩论，出现了问题之后，开始修改时间表。「我们无法按时完成功能A，因此我们无法开发模块B，开发人员又需要参与下一个项目，因此我们资源是不够用的，所以呢，这个项目不得不停一个月。」这情况很常见，也是典型的反面案例。

我相信，产品团队应该高度专注于当前的产品，和其他产品的需求、各种无关的事务隔离开来。「Hey，Angela，我们的大客户要求这个今天上线，能不能把你的项目放一边，帮我们把这个产品弄上线？」这也是一个反面案例。拒绝。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

很多产品设计师，在画原型或者设计 UI 的时候痴迷于工具的使用，拿到需求文档之后急于动手画图，忽略了信息架构设计对于产品的作用。

信息架构作为一个产品的骨架，是产品非常重要的一部分，它决定了一个产品

的布局和未来的发展方向以及用户对一个产品的最初印象和整体体验。毫不夸张的说，好的产品信息架构是产品成功的一半。

那么到底什么是产品的信息架构呢？该如何设计产品的信息架构？如何评判一个产品信息架构的好坏？我们接着往下看：

一、信息架构的概念

让我们来看一个例子：

一个饭店需要有哪些设施，如果你是饭店的老板如何合理的排布这些设施，可以让客户感觉很舒服的用餐，这个过程就是一个信息架构的过程。他可以让客户对你的饭店产生好感，从而下次用餐的时候还会想到来你这里吃饭。

在排布饭店设施的过程中我们要遵循一些规范，比如用户的习惯或者施工规范等，正是因为需要遵循这些规范，所以我们需要一个信息架构来体现这些。

比较官方的信息架构解释是这样的：信息架构设计是对信息进行结构、组织以及归类的设计，好让使用者与用户容易使用与理解的一项艺术与科学。

简单来说，信息架构设计就是让用户可以 容易地理解你的产品是怎样的。让他们在使用你产品的时候可以更顺利更自然。就像一进入饭店就会有一种感觉，门口是等餐的地方，进去就应该吃饭，如果找洗手间一定不会往门口走，而会往深处走。这就是信息架构的好处：他让用户使用同类产品时更容易上手和理解，让产品更容易被接受。

二、为何需要信息架构设计

那对于线上产品来说为什么需要合理的信息架构呢？大家来看下边3组 app 的 tab栏截图。你能仅仅从 tab栏就看出这款 app 是什么类型的 app，如何使用吗？

很明显的，第一个是一款购物类 app，第二个是一款图片社交类的 app，第三个是微信的 tab，虽然首页名称是微信，但是我相信如果把名称换成「聊天」，你还是能认出这是微信的 tab栏。

从底部标签栏就可以大致看出产品是用来干嘛的，这就是信息架构的作用。一个合理的信息架构可以让产品非常容易被用户理解，可以让用户第一眼对产品有一个简单的认知，指导自己可以用产品做什么事，指导产品提供什么服务。

再看一组反例：

这三组 tab栏就让人很困惑了，看了半天你也许根本不知道这几款 app 是做什么用的，以及如何使用。如果你让用户很困惑，他会分分钟抛弃你的 app。

所以信息架构的核心目标是为用户提供更好的体验，获得更高的留存率。

一款信息架构良好的产品必然遵循以下两个标准：

• 让用户打开 app 的第一秒就知道这是一款什么 app，怎么用；
• 用户想要使用某一功能时，能够第一时间找到。

我们通过这两个标准来印证下上边3个正面案例的信息架构：

相信你能很快速的识别出这款软件的用途和用法，这就给提升留存提供了基础。

那么如果信息架构像架构一个饭店一样简单，那么信息架构为何需要设计？

因为你的实际产品功能可能有这么多：

毕竟我们不是支付宝，没办法把功能像豆腐块一样堆叠起来，我们需要一些科学的设计方法。

三、如何设计信息架构

合理的信息架构设计需要考虑5个步骤：

下面我来分步讲解一下。

1. 了解用户，场景，习惯

首先你的产品是给到用户用，你当然要最大限度的了解你的用户，我们先来看下一个概念：「心智模型」。

心智模型是经由经验及学习，脑海中对某些事物发展的过程，所写下的剧本。人类在经历或学习某些事件之后，会对事物的发展及变化，归纳出一些结论，然后像是写剧本一样，把这些经验浓缩成一本一本的剧本，等到重复或类似的事情再度发生，我们便不自觉的应用这些先前写好的剧本，来预测事物的发展变化。心智模型是你对事物运行发展的预测。再说得清楚一点，你「希望」事物将如何发展，并不是心智模型，但你「认为」事物将如何发展，就是你的心智模型了。

假设你从没见过 iPad，而我刚递给你一台并告诉你可以用它来看书。在你打开 iPad 使用它之前，你头脑里会有一个在 iPad 上如何阅读的模型。你会假想书在 iPad 屏幕上是怎样的，你可以做什么事情，比如翻页或使用书签，以及这些事情的大致做法。即使你以前从没有使用过 iPad，你也有一个用 iPad 看书的「心智模型」。你头脑里的心智模型的样式和运作方式取决于很多因素。

用户往往带着以往使用 APP 的一些习惯来使用产品；线下做同一件事的习惯、生活习惯、心智模型等。要考虑哪些是可以创新的，哪些是用户习惯，要在不妨碍用户习惯的情况下作出更能让用户接受的创新。

你要考虑清楚4个问题：

用户通常用你的产品做什么？

用户用你的产品来做什么？用来看新闻还是用来聊天？一定要考虑清楚用户的核心流程。从核心流程中提取信息架构的基础形式。

用户用这类产品最关心什么？

用新闻app 时咨询的真实性实效性，购物类app 精准搜索和售后功能，就是你的用户关注点在哪里，这是一个很好的突破口。

用户有哪些思维定式？

和用户年龄身份相关的属性，产品体验符合相应用户的思维模式，心智模型，用户就会比较容易接受。

用户用什么类似的产品？

类似的产品也会带来一些用户习惯，迎合这些习惯也会让用户快速上手接受产品。

了解了你的用户场景和使用习惯之后你会知道如何做出符合用户心智的，容易被接受的产品，你不需要担心做的产品没有差异性或者没有竞争力，我们可以在核心流程之外做出创新点，让用户觉得你的产品又好用又有些不一样。

2. 了解业务

这里的业务包括与产品接触的内部及外部的人提出的需求，比如公司的运营，市场，销售，BD，公司的外部合作伙伴等。

这些人的需求我们也要收集，比如运营人员想更方便的管理注册用户，销售想更多的添加广告位，市场推广人员要求能统计不同渠道带来产品的下载量，注册数，活跃数，合作伙伴需要进行账号，内容互通等，总之只要与业务有关的人的意见，尽可能的在产品设计前多收集，即使做不了，也告诉他们原因，要不然产品上线后就等着被他们吐槽吧。

3. 调研竞品的信息架构

在做一款 app 时，我们面临了和无数竞品争抢用户的局面，这时候分析竞品就非常必要，我们需要在知己知彼的前提下，做好核心流程功能，再思考如何在差异功能上做好突破。

首先我们需要把竞品功能梳理成思维导图：

其实思维导图就是信息架构比较基础的形式了，但是光有思维导图没用，我们需要对思维导图进行分析。

我以前做过的一款人脉 app 为例，当初对比了领英、赤兔和脉脉，分析了这4款 app 的思维导图后得出的共性和差异点：

共性就是要符合用户使用习惯的地方，如果你调研的3-5个产品都这么做了，很可能这里是产生用户习惯的地方，是我们需要去遵循的，这是获得用户好感度的基础。

分析产品时你一定也会得出一些产品差异的地方，而这些差异就是你的产品竞争点，也是别人用你的 app 不用其他 app 的理由。比如人脉软件都会有社交相关的功能，但是脉脉会比较注重职场招聘、直播等互联网职场人比较关心的点，这样对应的用户群体就比较会吃你这套，会提升用户的粘性。

相信你在梳理了竞品的信息架构，总结了共性和差异点之后对产品的信息架构已经有一个比较清晰的认知了，在做自己产品信息架构的时候也会更胸有成竹。但是最后还有一件事我们可以做，就是对我们的要做的产品功能做卡片分类。

4. 卡片分类

卡片分类法是我们工作中常用到的一种方法，它可以在用户侧再一次印证和检测我们的产品信息架构。

卡片分类法就是让用户对功能卡片进行分类，组织，并给相关功能的集合重新定义名称的一种自下而上的整理方法。

说直白点就是准备一堆卡片，在这些卡片上写上你所需要包含的功能名称，然后给到用户侧，让用户进行分类，让用户进行组织，来了解用户到底觉得这些功能应该怎么合并怎么归类的一种方法。它可以帮助你站在用户角度去了解用户是怎么认定这些功能的，也可以在卡片分类法的过程中更加了解用户是怎么想的。

卡片分类法大概的步骤和注意点是这样的：

卡片分类法最终会产出这样的一个树形图：

5. 产出信息架构

其实到这一步信息架构大概的雏形已经有了，你可以用 axure 或者类似 mindnode 的软件把信息架构梳理出来。

接下来你要对信息架构进行重要性分级，这样在产品开发的前期可以帮助梳理产品研发的优先级，集中精力解决用户的最大痛点。在产出页面时也可以更好的把控页面元素的大小层级，位置关系等。

最后你需要注意层和度的平衡：层一般不超过5层，超过操作困难。度过多会让用户认知成本增加，容易找不到想找的内容。这里的度指的是同一页面展示的信息量。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

小明的设计故事：身为设计师的小明，刚刚遇到下发的设计需求，看了半天需求，无从下手。于是疯狂寻找竞品去借鉴，去素材网站寻找素材拼凑。

如果在设计工作中遇到与小明相同的情况：没有设计头绪，大脑一片空白，画着不一定能过审的草稿时，请继续阅读下面的文章，希望大家能从作者的设计总结中有所启发。

目录：

• 从业务目标切入
• 从用户行为切入
• 从设计方法上切入

什么是设计点？

设计点是设计师通过设计手段介入设计任务的一个节点，比如：设计目标 、设计风格 、用户行为 、用户情绪 、信息表达等都是设计的切入点，设计点能够影响设计的风格走向和设计师的创作思路。

那如何从众多的设计点中找到一个清晰的设计主线呢？只需从3个方面切入。

一、从业务目标来切入：晒讲义案例

下图是阿里巴巴UED 的设计理论，同程序员提倡的「不造重复的轮子」一样，设计理论也没有必要去反复总结类似的。目前阿里的这个设计理论，很好的支持了包含大型项目到中型项目的各个环节，易于理解，且和我们的工作认知贴近，是一个很好的入门方法。

我们通过定义业务目标和聚焦设计目标，来最终实现设计的产出。

下图是平台营销活动的设计5个要义，其核心也是业务目标。

通过几个的设计方法的展示，我们可以看出，处于上游业务目标的重要性。

只有业务目标和设计目标一致的时候，我们的设计工作才有意义。当我们评判我们的设计结果时，除了设计的数据指标外，能快速判断设计方案比迭代之前更优的指标就是是否符合业务目标，是否更贴近用户的诉求。

1. 切入模型

根据工具模型我们从业务目标出发，去定义设计目标从而得出设计方向。

2. 明确业务诉求

3. 得出业务目标

用分享讲义的策略给用户带来学习交流机会和学习成就感，达到拉新和活跃用户目的。

4. 视觉推导

5. 案例

二、从用户行为切入

视觉设计师，尤其是运营设计师一定要具有交互思维，作为全链路设计目标的我们，掌握交互思维，能更好的理解产品文档和规避更多的设计错误，从而准确引导用户操作路径。

方法：了解页面中的功能交互流程，梳理用户操作行为路径，可以对行为步骤中的信息内容进行归类分组提供依据。

切入模型：

三、从设计方法上切入

常见的方法有：情感化、原子化、组件化、游戏化等等。

方法：分解设计需求，归纳设计模块，运用已知的设计类型进行视觉化设计。

1. 提取仪式感设计点-晒成绩项目

仪式感的作用：通过用户在体验过程中由产品功能实现—交互操作—体验心理变化建立，形成对价值观的建立，是给用户带来更高层次的享受。

从四个层面理解仪式感：权威感、尊重存在感、期待感、荣誉感的意义。通过分解设计内容来发现机会点，插入仪式感设计方法。

视觉推导：

案例：

2. 提取情感化设计点

情感化设计3要素：

案例：

3. 提取游戏化设计点

将游戏机制运用于非游戏场景。比如：要想鼓励用户多参与交互，你可以在 APP 加入「挑战」这类的游戏元素，用户可以参与挑战，通过连续抽奖，并获得相应奖赏，从而达到预期目的。

案例：

寻找设计点就是拆解与分析的过程。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

如何从无到有设计一款字体

对于很多刚接触字体设计的同学经常会遇到一种情况那就是想法高大上，结果很悲伤，为什么会造成这样的结果？归根结底是对字体设计本身了解还不够细致就照葫芦画瓢直接上，为了避免这种尴尬的结果，我们应该在开始着手做字体之前要做好各项准备工作，不断去浏览优秀的字体设计从中寻找设计的感觉，确定感觉后建立网格系统，开始逐步设计字体。我在做字体设计的时候会把握几个步骤「建网格」——「选字体」——「拆字体」——「绘笔画」——「绑骨架」——「粗与细」——「取与舍」——「磨细节」——「去感受」。

下面我们就以大家最常见的矩阵字体为例来给大家分享如何制作字体。

1. 建网格

建立网格系统，万丈高楼平地起，要做一款扎实的字体离不开网格系统的规范。

2. 拆字体

以「燃」为例——选取一个默认字体，按照字体结构对笔画进行拆分。

3. 绘笔画

将拆分出的笔画用横线和竖线在网格系统里进行笔画重绘，此时不要做细节，撇、捺和点根据自身走向和结构特点也归属为横竖线。

4. 绑骨架

拆分绘制的字体笔画就是字体的骨骼，笔画间的连接处可以理解成是人体的关节，关节的意义在于保证字体稳固的同时又灵活多变，字体的笔画可以根据视觉需要围绕关节在一定范围内做活动，也可调整长短比例。

5. 粗与细

笔画的粗细与硬度由你想要的字体气质来决定，细笔画与曲笔画柔美气质，粗笔画与直笔画沉稳大气，虽说设计是一种感觉，但是这种感觉对于初学者来说很难把控，所以跟大家共享一下常用的几种笔画的粗细，在1000PX*1000PX画板里采用6px，10px和20px为基础笔画粗细，根据想要的业务气质选取即可。

6. 解与构

常见的字体结构有「上下结构」「上中下结构」「左右结构」「左中右结构」「半包围结构」和「全包围结构」。其中「上下结构」中着重强调占比较小的那部分笔画，进而达到字体本身的平衡，例如「感」字着重设计心字；「上中下结构」中一般会在不影响识别性的前提下去掉中间部分横行笔画，进而达到字体本身的平衡，例如「享」字着重设计口字；左中右结构中在不影响识别性的前提下会简化左边部分笔画，进而达到字体本身的平衡，例如「燃」字着重设计火字。

7. 取与舍

笔画变粗后整个字体笔画间的空间比例会受到一定影响，因此为了字体的美观度和透气性我们会对字体结构进行一些取舍和整合。

8. 磨细节

为了让字体看起来更加舒适，我们将字体的拐角做圆，做圆角的同时也要根据网格系统来调整圆的度数。

9. 去感受

打磨整体字体，继续刻画细节。

注意：在一组字里，每个单字的结构都存在差异，适当调整字体内部的比例，形成感官上舒适的笔势，对保持视觉上大小一致很重要。汉字字体类型繁多，但是如果我们用几何法则来划分字体类型其实大致可以归纳为三种：方形，圆形和三角形，从面积上来看方形和圆形的面积最大，三角形次之，所以我们为了保持字重大小的一致性需要调整他们之间的大小比例，做到大小均匀，笔画一致，结构严谨和间隙适中。

△ 图源：ElethomHunter

为了拉出字体的气质，一般会把字体做的稍微偏瘦长一些。

字体设计的手段是多种多样的，每个设计师都有自己擅长的切入点，最后的结果是自己想要的就好。上述的分享希望能给字体设计初学者一点帮助，也欢迎各位同行大神交流切磋。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。