162021-7

深度解析蚂蚁Ant Design的设计原则

『 Ant Design是什么』

众所周知蚂蚁集团的B端产品是一个庞大的系统，数量多且功能复杂，而且变动频繁，常常需要设计师和开发人员能快速做出工作上的配合。同时这类产品中有存在很多类似的页面以及组件，根据原子设计理论可以得到一些稳定且高复用性的内容。

随着这两年B端产品的逐渐白热化，越来越多的用户对更好的用户体验有了进一步的要求。带着这样的一个终极目标，蚂蚁集团体经过大量项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系 —— Ant Design。通过组件化设计规范，降低冗余的生产成本，让设计者专注于更好的用户体验。

『 Ant Design设计原则是什么』

针对B端产品反复出现的一些设计体验等问题， Ant Design 给出标准的设计原则，实现跨应用交互一致性的有效融合。依照这些原则使用 Ant Design 组件设计界面，既减少了不必要的认知成本，又能够提升设计的效率。考虑到需要适应各种定制化的业务场景，设计原则具有一定的灵活性，万变不离其宗，通过了解设计原则的构建逻辑，高效组织信息、帮助建立用户与界面的互动等原则性要求，可以衍生出更具场景特性的设计方案。

① Ant Design设计原则的由来

可以说 Ant design的设计规范摄取了《web界面设计》和《写给大家看的设计书》两本书中的精华原则，并做了理论之外最佳的设计实践。其十大设计原则反过来是对书本理论的补充，我在看书的过程结合『Ant Design 』能更好地理解那些原则的释义。每一个原则都用了大量通俗易懂的案例来补充说明，这也是为什么国内的企业一直以来都很喜欢使用这套组件的原因。

② Ant Design设计原则的适用范围

1. 我们先说说『Ant Design 』的适用范围：

稍微了解 Ant Design 的小伙伴都知道，本系统是针对B端后台系统，承载媒介是PC端的浏览器。使用的人员主要包括：用户体验设计师、交互设计师、UI设计师、前端程序员等。

2. 再说说『 Ant Design 设计原则』的适用范围：

顾名思义『设计原则』主要是针对设计师在创作页面时依照的标准。虽然『 Ant Design的设计原则』是 Ant Design 系统的一部分，但是前文已经提到，此原则是摄取了《web界面设计》和《写给大家看的设计书》两本书中的精华，所以设计师可以把这些原则运用到任何的设计领域，并不要局限于企业后台系统的PC端产品。

为了方便大家理解，讲一个小故事。故事来自于《写给大家看的设计书》，作者有一年圣诞节收到一份礼物——一本关于植物的百科全书。作者翻阅之后，发现其中有一颗叫约书亚树的树，造型奇特，自己从未见过。于是决定出门转转，然而发现外面到处都是这种树。故事到这里就完了。

可能大家会想，这个故事要讲一个什么道理呢？简单来说就是，当你手中有个锤子，满世界都是钉子。当你了解到下面要讲的十个设计原则后，你会发现它们处处都适用。

③ Ant Design设计原则的内容

十大原则如下：

亲密原则（Proximity）
对齐原则 (Alignment)
对比原则 (Contrast)
重复原则 (Repetition)
直截了当 (Make it Direct)
简化交互 (Keep it Lightweight)
足不出户 (Stay on the Page)
提供邀请 (Provide Invitation)
即时反应 (React Immediately)
巧用过渡 (Use Transition)

『如何运用Ant Design的设计原则』

对于一个初级设计师而言，想要了解UI用户体验等知识，学习 Ant Design 的设计原则算是比较快能上道的，因为 Ant Design 是吸取了很多前辈的精华，提炼而成的系统。打个简单的比喻，对于设计师而言 Ant Design 就是设计师学习『视觉规范』，掌握『设计原则』最好的字典。

接下来我就给大家说说我是如何快速理解 Ant Design 的这10条设计原则并运用到工作当中。

Ant Design 定义了10条设计原则，根据『席克定律』选项太多不易记忆，于是我找到了这些设计原则的共通性，将其归为4类，也就是大家只需记住四类设计原则，在工作中适当延展即可。

① 视觉层级清晰

包含 Ant Design 的设计原则有：『亲密原则』『对齐原则』『重复原则』『对比原则』。

「视觉层级清晰」的重要性体现在交互前用户看到的内容结构是清晰明确的。一个层级混乱的界面，任何信息的传达都是无效的。所以保证清晰的排版布局是人机交互前的基础。

1. 亲密

如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉单元；反之，它们的距离就应该越远，也越像多个视觉单元。亲密性的根本目的是实现组织性，让用户对页面结构和信息层次一目了然。

1.1 纵向间距关系

纵向间距：在 Ant Design 中，通过「小号间距」「中号间距」「大号间距」这三种规格来划分信息层次结构。这三种规格分别为：8px（小号间距）、16px（中号间距）、24px（大号间距）。

增加元素：通过增加「分割线」来拉开层次。在这三种规格不适用的情况下，可以通过加减「基础间距」的倍数，或者增加元素来拉开信息层次。注：在 Ant Design 中，y = 8 + 8 * n。其中，n >= 0，y 是纵向间距，8 是「基础间距」。

1.2 横向间距关系

组合排布：为了适用不同尺寸的屏幕，在横向采用栅格布局来排布组件，从而保证布局的灵活性。（注：栅格是另外一个模块的内容，这里不赘述。）

复选框内：在一个组件内部，元素的横向间距也应该有所不同。

2. 对齐

正如「格式塔学派」中的连续律（Law of Continuity）所描述的，人类的视觉系统往往倾向于将看到对象的直线继续成为直线，曲线继续成为曲线。在界面设计中，将元素进行对齐，既符合用户的认知特性，也能引导视觉流向，让用户更流畅地接收信息。

格式塔学派（德语：Gestalttheorie）：是心理学重要流派之一，兴起于 20 世纪初的德国，又称为完形心理学；主张人脑的运作原理是整体的，「整体不同于其部件的总和」。——摘自「维基百科」

2.1 文案类对齐

如果页面的字段或段落较短、较散时，需要确定一个统一的视觉起点。

推荐使用：标题和正文左对齐，使用了一个视觉起点。
不推荐使用：标题和正文使用了两个视觉起点，不推荐该种对齐方式，除非刻意强调两者区别。

2.2 表单类对齐

冒号对齐：冒号对齐（右对齐）能让内容锁定在一定范围内，让用户眼球顺着冒号的视觉流，就能找到所有填写项，从而提高填写效率。

2.3 数字类对齐

为了快速对比数值大小，建议所有数值取相同有效位数，并且右对齐。

3. 对比

对比是增加视觉效果最有效方法之一，同时也能在不同元素之间建立一种有组织的层次结构，让用户快速识别关键信息。

注：要实现有效的对比，对比就必须强烈，切不可畏畏缩缩。

3.1 主次关系对比

为了让用户能在操作上（类似表单、弹出框等场景）快速做出判断，来突出其中一项相对更重要或者更高频的操作。

注意：突出的方法，不局限于强化重点项，也可以是弱化其他项。

需要区分主次场景：

不需要区分主次的场景：「通过」和「驳回」都使用次按钮，系统保持中立。在一些需要用户慎重决策的场景中，系统应该保持中立，不能替用户或者诱导用户做出判断。

3.2 总分关系对比

总分关系：通过调整排版、字体、大小等方式来突出层次感，区分总分关系，使得页面更具张力和节奏感。

3.3 状态关系对比

常见类型有「静态对比」、「动态对比」。

静态对比示例：用不同颜色的点，来表明不同状态。

动态对比：鼠标悬停时，该项和其他项呈现出明显不同的视觉效果，响应用户操作。通过改变颜色、增加辅助形状等方法来实现状态关系的对比，以便用户更好的区分信息。

4.重复

相同的元素在整个界面中不断重复，不仅可以有效降低用户的学习成本，也可以帮助用户识别出这些元素之间的关联性。

4.1 重复元素

重复元素可以是一条粗线、一种线框，某种相同的颜色、设计要素、设计风格，某种格式、空间关系等。

线框重复：

设计要素重复：

文案格式重复：

② 交互操作高效

包含 Ant Design 的设计原则有：『直截了当』『足不出户』『简化交互』『即时反应』。

「交互操作高效」的重要性体现在交互时用户操作流畅、简单、用时短。如果仅仅只是解决高效的问题，却忽略用户能否理解流程如何操作，那这样的解决方案也是徒然。有的时候并不是解决实际时间的长短，而是用户的心理时间是否太长的问题，就像我们打游戏往往会觉得时间过的很快，但是在等待页面加载时却不耐烦。

1. 减少打断

能在这个页面解决的问题，就不要去其它页面解决，因为任何页面刷新和跳转都会引起变化盲视（Change Blindness），导致用户心流（Flow）被打断。频繁的页面刷新和跳转，就像在看戏时，演员说完一行台词就安排一次谢幕一样。

变化盲视（Change Blindness）：指视觉场景中的某些变化并未被观察者注意到的心理现象。产生这种现象的原因包括场景中的障碍物，眼球运动、地点的变化，或者是缺乏注意力等。——摘自《维基百科》

心流（Flow）：也有别名以化境 (Zone) 表示，亦有人翻译为神驰状态，定义是一种将个人精神力完全投注在某种活动上的感觉；心流产生时同时会有高度的兴奋及充实感。——摘自《维基百科》

气泡提示：对于操作的反馈是必要的，下文会提到，但是为了减少打断用户，轻量级的反馈气泡提示即可。

输入覆盖层：鼠标「点击」图标触发；鼠标「点击」悬浮层以外的其他区块后，直接保存输入结果并退出。不用弹窗或跳转的形式编辑，只需要在触发图标附近弹出浮层即可，这样避免用户视动线的混乱，减少打断用户操作的心流。

2.缩短步骤

正如 Alan Cooper 所言：「需要在哪里输出，就要允许在哪里输入」。这就是直接操作的原理。eg：不要为了编辑内容而打开另一个页面，应该直接在上下文中实现编辑。

常规的编辑模式，界面都会跳出一个弹窗或者是一个页面跳转，无形之中用户走了更多的流程路径，如果能在当前页面就把编辑问题解决掉那就符合了 Ant Design 『足不出户』的设计原则。

文字链/图标编辑：

状态一：在可编辑行附近出现文字链/图标；

状态二：鼠标点击「编辑」后，出现「输入框」、「确定」、「取消」表单元素，同时光标定位在「输入框」中。

多字段行内编辑：编辑模式在不破坏整体性的前提下，可扩大空间，以便放下「输入框」等表单元素；其中，在 Table 中进行编辑模式切换时，需要保证每列的不跳动。

拖放图片/文件：在早前很多产品在上传功能上，都是跳出弹窗再选择文件上传，现在基本都可以实现拖拽上传了。这样的设计大大提高了用户使用上传功能的效率。

模糊搜索：系统根据用户所查询的关键词，智能匹配可能的结果。

定时自动更新：新增的列表项「高亮」，持续几秒后恢复正常。不需要用户手动刷新，减少不冗余的操作。

3.避免回忆

人们在思考的时候，是需要依靠大脑神经元之间相互传递信号，而回忆是需要调用更多的的神经元传递信号，简单地说就是非常费脑子。

搜索历史：搜索历史的功能，可以减少用户的回忆，使得整个体验更加轻松愉悦。

4.信息降噪

根据费茨法则（Fitts's Law）所描述的，如果用户鼠标移动距离越少、对象相对目标越大，那么用户越容易操作。通过运用上下文工具（即：放在内容中的操作工具），使内容和操作融合，从而简化交互，起到信息降噪的作用。

费茨法则 ：到达目标的时间是到达目标的距离与目标大小的函数，具体：。其中：1.设备当前位置和目标位置的距离（D）；2.目标的大小（W）。距离越长，所用时间越长；目标越大，所用时间越短。

列表嵌入层：将列表为多层级时，隐藏弱层级列表内容，可以让用户更加直观地看到重要信息。当我在聚焦某一个列表模块的内容，鼠标悬浮即可展开。

标签页：标签也换可以将信息内容进行分类，让用户更易理解。

渐进式展现：用户在填写表单时，会根据当前录入的数据，展现下一项需要填写的内容，这样的展现方式可以屏蔽掉无关紧要的内容。

悬停即现工具：鼠标悬停时，出现操作项。这样将不重要信息或者操作隐藏起来，不会干扰到用户浏览其他重要内容。

③ 系统反馈即时

包含 Ant Design 的设计原则有：『简化交互』『巧用过渡』『即时反应』。

「系统反馈及时」的重要性体现在交互之后立即给出反馈。就像「牛顿第三定律」所描述作用力和反作用一样，用户进行了操作或者内部数据发生了变化，系统就应该立即有一个对应的反馈，同时输入量级越大、重要性越高，那么反馈量级越大、重要性越高。

1.实时反馈

虽然反馈太多（准确的说，错误的反馈太多）是一个问题，但是反馈太少甚至没有反馈的系统，则让人感觉迟钝和笨拙，用户体验更差。

牛顿第三定律 ：当两个物体互相作用时，彼此施加于对方的力，其大小相等、方向相反。——摘自《维基百科》

实时预览：根据用户的输入，提供关于密码强度和有效性的实时反馈提示。

文字链热区：当悬浮在 ID 所在的文字链单元格时，鼠标「指针」随即变为「手型」，单击即可跳转。

2.过渡反馈

人脑灰质（Gray Matter）会对动态的事物（eg：移动、形变、色变等）保持敏感。在界面中，适当的加入一些过渡效果，能让界面保持生动，同时也能增强用户和界面的沟通。

Adding: 新加入的信息元素应被告知如何使用，从页面转变的信息元素需被重新识别。

Receding: 与当前页无关的信息元素应采用适当方式移除。

Normal: 指那些从转场开始到结束都没有发生变化的信息元素。

表格加载：网络不好或者表格数据过多，都有可能导致加载缓慢，这时有一个小动画可以缓解用户的焦虑感。

富列表加载：用户在打开列表时，页面无法做到一次性加载所有的数据，同时有为了减少翻页的繁琐操作，就有了下拉自动加载的。

页面加载：当用户访问的页面体量过大时，系统会通过给出倒计时或完成百分比，来缓解用户焦虑，并且给用户友好可控的感觉。

滑入与滑出：可以有效构建虚拟空间。

折叠窗口：在视图切换时，有助于保持上下文，同时也能拓展虚拟空间。

对象增加：在列表/表格中，新增了一个对象。

对象删除：在列表/表格中，删除了一个对象。

对象更改：在列表/表格中，更改了一个对象。

状态一：用户更改了「详情」中的值；
状态二：用户点击「保存」后，详情所在的网格出现「黄底」，表明该对象发生了更改；
状态三：底色持续几秒后，恢复正常。

对象呼出：点击页面中元素，呼出一个新对象。

3.结果反馈

用户常常会疑惑自己的操作是否成功了，哪怕是失败了也是需要系统反馈，这样才能安心进行下一步的操作。

页面反馈结果：

气泡反馈结果：

④ 用户自由可控

包含 Ant Design 的设计原则有：『提供邀请』『足不出户』『即时反应』。

「用户自由可控」的重要性体现在交互前对下一步操作的预判；交互时不论操作后的结果多严重都要允许用户自主决策；以及交互后能否对自己的操作结果反悔。

1.未来预判

很多富交互模式（eg：「拖放」、「行内编辑」、「上下文工具」）都有一个共同问题，就是缺少易发现性。如果用户在操作前就能得到下一个交互层次的提醒和暗示，以表明在下一个界面可以做什么。这样人机交互的过程往往更加自然、顺畅。

点击刷新：对于设计师而言，最常见的例子要属花瓣了，我们时长会沉浸在我们浏览的瀑布流卡片中，如果系统强行刷新当前页面，用户很有可能迷失。邀请用户主动更新，既不会错过新的消息，又不会导致我们的心流被打断。

未完成邀请：用户在当前页面无法完成登录操作，为了减少用户迷茫的焦虑感，系统告知用户点击“更改”链接，可以去向何处。

悬停邀请：鼠标「悬停」时，出现「选择此模板」的按钮。

2.自主决策

虽然系统中缺少不了一些危险操作或者不可逆操作(eg：删除、重置、重装系统等)，但是仍然要用户自主决定是否继续，我们能做的就是让用户再三确认。

弹窗提示：虽然弹窗打断用户心流，但是对于重要的操作，这样是最保险的方式。

删除知识库提示：是钉钉中，删除「知识库」这一重要内容，是不可逆的，系统需要用户谨慎操作。

3.准许反悔

如果说「自主决策」中提到的案例都是不可逆的，那「准许反悔」的后果严重性会弱一些，系统对用户的操作没有那么强的阻断性，所以要准许用户反悔的，

删除撤销：用户点击「删除」后，直接操作；出现 Message 告知用户操作成功，并提供用户「撤销」的按钮；用户进行下一个操作或者 1 分钟内不进行任何操作， Message 消失，用户无法再「撤销」。

『 Ant Design的优点与缺点』

① 优点

1.助初创团队快速产品快速上线

Ant Design在"幸福者示例中"写到“Ant Design 无法保证业务产品能否成功，但是能帮助业务产品『正确的成功』或者『正确的失败』。”

如果团队有一个产品idea，我们需要通过最少的资源开发此产品并投入到市场中，通过听取用户反馈，验证idea是否可行，快速迭代最终做出更完善的产品。但理想是美好的，但现实是骨感的，在前期研发的过程中通常会出现两个情况。创业团队没有足够的设计资源和时间，前几个版本的产品通常用户体验非常差，这种情况体验差有可能让用户放弃这款产品。创业团队没有好的方法论和协作模式，需要磨合，设计和开发进度一延再延，结果错过了风口，市场被竞品抢占，还没上线就倒闭了。

Ant Design提供了一套完整的界面实现方案，即有代码框架能直接拿来提高开发效率，每个界面组件都经过蚂蚁金服多个项目的考验，具备优秀的用户体验。用Ant Design来做0-1，能快速发布用户体验优秀的产品，听取用户反馈，快速迭代。

当然，创业是九死一生，市场和用户口味都充满了不确定性，谁也没有能力保证产品是否成功，但是只要你能高效的产出质量优秀的产品，不断试错，说不定以后就能成功。

2.减少设计和开发的不确定性。

用 Ant Design 就能高效的产出高质量的产品，减少设计和开发的不确定性。

因为我们公司就使用了 Ant Design 的系统，所以时常会与前端小伙伴沟通，以下都是他们在使用过程的感想。

Ant Design 提供的大量功能比较全面且UI风格统一的组件，能帮助开发者快速搭建通用场景下的应用界面。这大概是得益于蚂蚁金服业务线上极为广泛的应用场景，驱动了 Ant Design 团队通过对使用情况的观察汇总，整理出来了这么一个组件库。他们的经验积累如此之丰富，足以让这个库支持大部分其他前端开发者的需要。

其设计团队给出的设计规范相当详细且经得起推敲，令许多其他团队获益匪浅。

3.节省设计与开发的人力成本

我见过太多宣称自己在乎用户体验的公司，给用户的产品质量确实比较高，但是自己员工内部使用的系统和管理一团糟。种种不便让员工经常加班，情绪消极，这样的团队抄抄竞品达到行业标准体验还行。要想突破是不可能了，因为创新需要员工有充沛的精力和主动性，天天加班谁还有这精神。

用 Ant Design 系统提供的设计工具和组件框架能给设计师和开发者减少负担，能用更少的时间呈现给用户体验好的产品。这样带来的好处不仅仅是设计师和开发者觉得少加班成就感高而幸福，他们重新恢复活力和激情能做出更有创意和竞争力的产品，给公司带来更大的收益，这是一个三赢的结局。

② 缺点

1.无法根据业务场景定制组件，灵活度不够

一定有小伙伴会有这样的疑问，目前市面上有这么多的第三方设计规范，例如 Ant Design ，Element UI，有必要自己造轮子做一遍吗？

这里要视情况而定，如果公司产品是初创期，而且研发人手不足，那确实没有必要自己造轮子。反之在资源足够的情况下，是有必要设计团队重新做一套属于自己产品的规范组件库的，因为B端自身的业务性决定了市场上没有万能的设计规范，那些设计规范的组件并不能100%满足我们产品的需求。另外一方面使用封装好的第三方设计规范，在此基础上进行修改，效率很低，适配的复杂度和重新开发相差无几。

2.组件细节深入度不够，只能“将就”使用

对于比较普通的设计解决方案是可以的，但是 Ant Design 包含的组件细节仍有不足，毕竟 Ant Design 没必要投入过多的精力在组件细节深入度上，规范定义的越是精细，对于产品组件而言可延展性就越差，限制也会越多。而 Ant Design 只需要解决80%企业，80%的通用问题即可。

3.竞品同质化严重，视觉上无法脱颖而出

当市场大部分产品都在使用 Ant Design 设计系统时，产品的同质化就会很严重。为了避免这种情况发生，我们就有必要从设计语言、设计原则、设计组件三个部分开始，设计自己的规范。那些大厂的成熟的组件库该如何用呢？我认为应该把它当成一个字典，有不会的地方，可以去参考人家的成熟的解决方案。

『总结』

这篇文章简单的介绍了一下 Ant Design 是什么、 Ant Design 的设计原则是什么以及 Ant Design 的优缺点。当然也重点总结了一下，设计师如何运用 Ant Design 的设计原则，可以将这些原则分为四类：视觉层级清晰、交互操作高效、系统反馈及时、用户自由可控。希望大家通过这篇文章能够更深一步了解 Ant Design 的设计原则，并将其灵活运用到设计工作中。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：人人都是产品经理作者：菜菜不甜

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

评论(0) 浏览(4363)

162021-7

体验度量深度实践

鹤鹤

前言

体验目标的达成，需要合理且客观的度量方法，体验度量的实践，需要度量框架的有力支撑。提高竞争优势，提升客户态度，保障产品可以即时的响应客户的需求。本篇文章的实践方法全部来源于酷家乐B端产品业务中的实践案例，重点在于度量框架的深度实践，如果我们的经验能够帮助到您，欢迎交流讨论。

一、体验度量怎么做？

“体验”是用户纯主观的感受，从这个情况来看是很难被度量的。“体验”同时也是一个比较抽象的概念，如果把一个抽象的概念拆解成一个可执行的策略，拆解的过程如何保证策略的有效性，是我们一直在思考的。面对酷家乐工具型、SaaS型、平台型并存的产品体系，且存在错综复杂的用户需求和业务诉求。在这样的前提下对方法的确立需要更加的冷静。

如何确定方法？我们需要的是一个完整的度量框架，以及能够聚焦用户体验层为驱动，分解并有力的去解决问题。经过大量的实践和验证得到，抓住一个击破点作为产品体验提升的目标，并一种合理的方式进行推导和验证，这是一种最直接度量体验的标准流程性方式，这里的目标必须是：

体现用户主观感受或者具有行为驱动的目标。
基于业务目标定义+用户诉求了解后，得到的以用户为中心驱动的用户行为。

二、度量模型怎么选？

面对设计圈内已经存在的和部分大厂创造的度量模型，评估优劣后最终我们选取了HEART模型。因为HEART是个比较全面和具备更多扩展性的分析框架，同时足够的权威和标准，而且市面上的模型基本都被HEART的五维囊括。除了这些考虑因素外，再给出以下几个明显的优势点：

1、HEART同时涵盖了定性和定量的不同数据维度。
2、HEART框架同时包含了：宏观和微观的层面
3、HEART模型并不单纯的再定义体验质量，同时也链接了商业价值。把用户体验的原则和收益驱动的指标关联在了一起。

三、HEART模型简介

1.什么是HEART模型？

多个大厂利用HEART模型拆解框架得到了深度结合业务的度量框架。是个比较全面和具备更多扩展性的分析框架。HEART是GOOGLE公司在实践中提出，基于产出更好产品为目的，用来衡量产品整体体验的度量评估模型。

它包含五个维度Happiness（愉悦度）、Engagement（参与度）、Adoption（接受度）、Retention（留存度）、Task success（任务完成度）组成，是Google用户体验研究团队在实践中为了准确的度量用户体验而总结提炼出的一个框架。

2.HEART模型的特性与应用场景

目前市面上还存在PTECH、TEENS等体验度量模型，而HEART模型的特性在于它”以用户为中心“进行度量，同时度量维度全面，既包含宏观的愉悦度，也有微观的任务完成率，同时关注产品上的留存率，与业务目标保持紧密。在评估方式上，既有定性评估的愉悦度，也有定量评估的参与度、留存率等，可对用户使用产品情况做一个完整的评估。

四、HEART模型的详细拆解指南

第一步：确定体验目标

体验目标是体验度量的开始，准确的目标决定了度量的质量。要提炼出准确而有效的体验目标并不容易，通常会引入产品功能等业务因素，使体验目标不够单纯，拆解出来的指标所反映的数据也很难归因到体验。故复杂项目可提炼多个体验目标相互补齐，但每个都必须准确而具体。

那么如何确定体验目标呢？

体验无法脱离于具体的产品服务存在，用户的整体体验感知积累于每一个接触触点，大多触点常规而平庸影响不大，必须识别出达成业务的关键触点进行深入分析，已提炼出体验目标。

整体的思路是：首先分析业务目标，并就业务目标所落地的产品服务的链路进行拆解，分析链路后，找到其中对体验有决定性影响的因素，提取其因素后，即形成体验目标。

1.确定业务目标

业务目标是整个产品服务的最终目的，体验作为产品服务的重要评估维度，需要与之对齐。业务目标与所选取项目范围有关，从整个产品到特定功能模块，或者某个行为链路都可作为参与项目。根据选取的项目来确定业务目标，如“保持产品新旧改版的平稳过渡，降低改版造成的断约率”、“提升用户自主解决问题的能力，降低运营服务的压力”等。注意业务目标与产品目标的差异，后者是对前者的产品化阐释，可以具体到某项产品服务目标上。产品目标和体验目标可以共同服务于业务目标，实现价值的达成。

➢示例：

业务目标：在设计工具中商品素材的查找效率，辅助家装设计师快速构建方案，提升其签单率

产品目标：优化现有商品素材的查找逻辑，降低家装设计师查找商品素材的成本

2.拆解产品链路

产品目标需借助于功能链路来达成，将该目标达成过程的逻辑呈现出来，并分析其跳转路径、操作触点，就是链路拆解过程。整个链路过程是用户价值的直接承载，任何一个触点的失效都将影响到整条链路顺畅和效率。就链路整体而言，触点越多、链路越长，操作成本越大；就某个具体触点而言，其效率、易用性、易理解度也将影响整体的价值传达。

为完整的拆解出整个产品链路，需要从“用户侧”、“系统侧”进行分析，用户侧代表用户视角下的功能使用流程，是主要考虑的维度，体现了以用户为中心的设计思路；系统侧代表系统在用户交互过程中的需要执行的行为，是系统逻辑的直接体现。两者的交互作用，将完整表达“信息”的流转过程，最终作用到产出物上。

➢示例：商品素材搜索链路

3.分析触点并提取决定性因素

选取对整个链路有重要影响的触点进行设计维度上的分析，以找出决定触点目标达成的决定性因素，这个决定性因素就是我们体验上需要着重优化的点。在寻找“决定性因素”的过程中，避免将系统性能、业务功能、业务信息因素筛选出来，需要聚焦在设计维度上，诸如交互行为、界面布局、信息呈现、系统反馈等。

➢示例：

“确认输入行为”、“搜索结果分类”、“不同分类的区块划分”、“结果数量”等。

对已拆分出来的各种设计因素来说，哪些算是决定性因素呢？一个很简单的判断方式是：反向判断，即假设缺失这个设计因素，或不完整是否会对该触点有“阻塞性”影响。

如有严重阻塞影响，则证明该设计因素很大程度上决定了触点的目的达成，属于决定性因素；若设计因素有中等的、轻微的影响，则可能不是本次优化的重点，不作为决定性因素。如“搜索结果的分类”影响用户对搜索结果的信息获取，是决定性因素。“确认输入行为”是常规设计行为，不算决定性因素。

当然，具体问题具体分析，在不同的功能场景下，同一种行为的影响程度可能不同。

需要注意的是，决定性因素的选取必须在具体的触点中才有意义，脱离后无法判断是否有阻塞性影响。另外，某些设计因素是否是决定性可能在跨触点中体现出来，需要联系整个链路进行交叉分析确定。

4.体验目标的提取与表述

找到决定性因素及其为什么决定性的原因后，需要为其设定一个设计目标，来指示应向什么方面优化这个决定性因素。决定性因素只是现有功能的一种解法，可能存在其他更优解法或优化方向，我们需要基于决定性因素概括出“设计目标”，以新的设计目标来指引我们的优化设计。

➢示例：

决定性因素“搜索结果的分类”，引申出的设计目标为“更清晰的信息层级”、“更完整的信息”。

通过链路触点的分析，决定性因素的提取，设计目标的匹配，我们已对设计优化方向有了准确的了解。这个时候需要从设计师视角做一个完善而精准的”体验目标“的表述。

一个体验目标需要与具体设计场景关联后，才能产生具体而明确的价值，即设计目标落地到场景中后产生价值，表述思路是：在某个具体的链路触点中，我们期望怎么达成这件事。可通过格式进行填写：

使/什么用户/用什么做什么事/设计目标/完成什么事

➢示例：

家装设计师使用搜索功能搜索素材时对结果展示清晰的信息层级来快速找到需要的商品

第二步：确定度量维度

引入HEART模型的重要原因，正在于它的度量维度。由于它的度量维度多方位的表述了产品的使用情况，度量纬度不是一种标准，是一种分析框架和角度，决定了体验目标应该被如何度量，进而影响信号的确定和指标的拆解，因此度量维度的选取至关重要。

HEART提供了丰富的五个维度，根据其定义，提供了你几个可以衡量的视角。在实践过程中，因每个体验目标所对应的触点的场景、交互、产品目的不同，我们只需要找到符合定义的维度即可。反过来看，一个与体验目标不相关、不匹配的度量维度不能很好地度量体验。

需要注意的是，HEART模型因其维度的广泛定义，不仅仅可用于体验目标的度量，也可以对产品目标、业务结果进行度量，对体验目标的度量因要从产品因素中剥离出体验问题，相对来说较为复杂，是本次叙述的重点。

第三步：确定信号

首先信号可以被定义为是一种信息的载体，其承载的信息往往反映的是用户对体验目标的成功或是失败的结果，对信号的准确获取将直接影响到对下游指标的确立。

信号的确定需以上游度量维度为标准范围并引用体验目标为重要判断依据，避免过度发散，保证精准规范的同时，去结合当前有无体验变量基准值作为条件，并使用成功或者失败的结果来评估体验目标的达成情况，最终提炼出信号。

以度量维度为标准并引用体验目标确定信号

通过逐一对度量维度进行体验变量提取，有基础值则进行对比的方式，无基础值则使用趋势的表述方式，结合业务目标的情况下，去概念性假设体验目标的正向或反向结果，最终通过标准的格式提炼出信号，信号的提炼的可以用固定的格式进行书写： 格式：用户用什么做什么体验变量趋势&数值

寻找体验变量

基于HEART模型的整个分析框架，拆解出最高频和贴合体验目标的常见体验变量库。在此框架的指导下，可以快速寻找需要的体验变量。

➢示例：

（体验变量：易操作度；有基准值） 家装设计师使用搜索功能搜索素材时易操作度达到4.2

（体验变量：易操作度；无基准值） 家装设计师使用搜索功能搜索素材时易操作度上升

确定信号的注意事项

①信号的成功或失败要能在行为或态度上准确的体现出来，失败信号可能比成功更容易定义；

②信号要易于被追踪；

③信号的敏感度要高，易于被检测；

④信号应与目标有高的相关度，同时避免被其他因素影响；

⑤一个目标可能对应多个信号；

第四步：确定指标

指标是衡量目标的参数，用于准确的描述目标。但通常很难直接从目标中确定出指标，需要借助于对信号的分析。信号是信息的载体，其中包含着变量信息，提取其中变量信息，即可获得一个初始指标。

初始指标反映了客观的原生数据，需要对原生数据做处理后，可得到一个能精准描述体验目标的指标。

对数据进行处理

体验变量所直接产生的属于原生数据，而一组数据通过某种分析加工后，可以成为一个更有价值的信息，如均值、中位值。选择对数据进行哪种方式处理，受目标的影响较大，每一种数据处理方式，都有指向特征，通过与目标的匹配，可以选取出合适的数据处理方式。

确定指标的注意事项

①指标应与目标和信号密切相关，指标越明确越清晰越好；

②标应方便被持续追踪，对信号的描述更敏感，方便做A/B测试。

五、总结

看似复杂的体验度量监控指标的拆解，可以概括为“体验的问题定位”——“体验的目标度量”——“体验的客观追踪”。

1.“问题定位”是监控目标的根据，必须来源于具体的业务链路才有被分析和量化的可能，它是体验问题在业务链路中被抽取出来的关键，并转化为可度量的指标来进行监控，最终为后续数据洞察和可视化提供准确的数据来源，否则流于主观，监控体系建立在不可靠的体验目标之上，当然也就不可能有助于解决体验问题。

2.而“目标度量”所运用的HEART模型作为度量维度，相当于一种体验的定义标准，阐释了什么是它所定义的用户体验。HEART模型以其全面的度量维度，能很好地实践这一点。必须注意的是，对HEART模型下的五个度量维度的细化阐释可能受不同产品特性、产品阶段影响而不同，最终转化出不同的客观指标。

3.“客观追踪”是对在度量标准下的客观变化的捕捉，捕捉其变量特征，建立常态指标，成为可靠的可监控的指标。

4.另外，除了准确的定位、度量、转化的逻辑推导外，参考业务目标进行范围收敛，也是非常重要的工作，它影响着每一个推导环节，以避免偏离产品方向，有效的过滤弱关联或无关联的因素。

文章来源：站酷作者：酷家乐UED

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

评论(0) 浏览(2412)

162021-7

js 获取当前元素的父元素的父元素的id

前端达人

情景一：用onclick触发的函数




    

        

            

            

        

        

            
                html代码：
            

        

    

    

        

            

            

        

        

            
                <div id="0" style="border-bottom:1px solid #000;margin:0 auto;">
            

        

    

    

        

            

            

        

        

            
                <div>1111</div>
            

        

    

    

        

            

            

        

        

            
                <div class="original">
            

        

    

    

        

            

            

        

        

            
                <div id="chartx1" class="chartstyle"></div>
            

        

    

    

        

            

            

        

        

            
                <div id="charty1" class="chartstyle" ></div>
            

        

    

    

        

            

            

        

        

            
                <button onclick="getDetail(this);" style="width:100%;height:30px;">查看信息</button>
            

        

    

    

        

            

            

        

        

            
                </div>
            

        

    

    

        

            

            

        

        

            
                </div>
            

        

    

    

        

            

            

        

        

            
                <script>
            

        

    

    

        

            

            

        

        

            
                function getDetail(obj){
            

        

    

    

        

            

            

        

        

            
                alert(obj.parentNode.parentNode.id); //1
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                </script>

运行结果：

情景二:直接用click触发的函数




    

        

            

            

        

        

            
                html代码：
            

        

    

    

        

            

            

        

        

            
                <div id="0" style="border-bottom:1px solid #000;margin:0 auto;">
            

        

    

    

        

            

            

        

        

            
                <div>1111</div>
            

        

    

    

        

            

            

        

        

            
                <div class="original">
            

        

    

    

        

            

            

        

        

            
                <div id="chartx1" class="chartstyle"></div>
            

        

    

    

        

            

            

        

        

            
                <div id="charty1" class="chartstyle" ></div>
            

        

    

    

        

            

            

        

        

            
                <button class="info_detail" style="width:100%;height:30px;">查看信息</button>
            

        

    

    

        

            

            

        

        

            
                </div>
            

        

    

    

        

            

            

        

        

            
                </div>
            

        

    

    

        

            

            

        

        

            
                <script>
            

        

    

    

        

            

            

        

        

            
                $(".info_detail").click(function(){
            

        

    

    

        

            

            

        

        

            
                id=$(this).parent().parent().attr('id');
            

        

    

    

        

            

            

        

        

            
                })
            

        

    

    

        

            

            

        

        

            
                </script>

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：csdn 作者：chdeWang

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

评论(0) 浏览(2961)

162021-7

jquery 延迟执行方法

前端达人

setTimeout方法使用时需注意：

//以下两种方式都行： setTimeout(function () { test(); }, 2000); //或者 setTimeout('test()',2000);
function test(){
 alert("aaaa");
} //以下是错误示例 setTimeout(test(),2000); //会马上执行，没有延迟效果

jQuery fadeToggle() 方法

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

语法：

$(selector).fadeToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeToggle() 方法：

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

评论(0) 浏览(3119)

162021-7

APP设计：小易移动端 | B端销售平台移动化

seo达人

2020年的湖北疫情对公司的业务造成了一定的影响，为了避免不可控情况下的业务损失，复工后公司启动了智能销售平台移动化项目（即小易APP）。经过近一年的试运行，在广州发生疫情的时候，小易APP已经能支持业务基础需求。

备注：
为避免不必要的误会（xiemi），所有的客户、销售顾问、部门、套餐的名称都是虚拟命名。所有数据均为虚构，请勿过度解读。
love&peace

收藏单图

原文地址：站酷

作者：牙线y2x

转载请注明：学UI网》APP设计：小易移动端 | B端销售平台移动化

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：站酷作者：陈皮Celia

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

评论(0) 浏览(1888)

162021-7

一招让你的作品集脱颖而出！

seo达人

转眼2021已经过半了，不知道大家今年都有哪些进步呢？设计作为需要随时补充新鲜养分的行业就要求设计师们随时走在最前端，时刻防止被时代抛下！年中我回顾了这半年一堆国内外设计师的作品，总结了一招可以让你的作品集在千篇一律的作品集中脱颖而出的方法 —— 2D转3D。

看到这你会不会觉得：就这？先别急。现在大家都知道为自己充电，大多会在作品集放一些C4D作品，这已经不是什么新鲜事了。然而怎么样才能凸显你的不同呢？如果单单放几张作品图可能还不够，你可以考虑把它结合在其它作品当中，这样不仅可以展现你的能力，还能凸显你的运用整合能力，整体的作品集质感立马提升一个档次！具体怎么结合？一起来看！

01.APP页面

首先你可以在APP页面当中穿插C4D的配图，如果实际项目当中不好结合就可以多做些概念稿。如果页面当中你实在结合不好，还可以在页面包装展示上面下功夫，巧妙地建一个手拿手机的模型，你的展示就会比别人的更加分。总之想尽办法提升含金量吧！

q

02.网页

为了展示全能型，很多设计师也会在作品集当中加入一些网页设计。之前流行的大多都是网页和插画的结合形式，然而现在大多设计师已经开始和C4D作品结合起来！

03.插画

之前很流行的办公系列插画，现在国内外大神已经升级到3D系列了，整体风格没有太大变化，整体质感却提升了很多！

04.图标

图标作品展示也是作品集当中常见的一部分内容，除了常规的图标展示外，你还可以做一些3D图标。

原文地址：设计师深海（公众号）

作者：设计师深海

转载请注明：学UIw网》一招让你的作品集脱颖而出！

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：站酷作者：陈皮Celia

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

评论(0) 浏览(2236)

162021-7

5个技巧，让你的做图效率翻10倍！

seo达人

相信很多设计师都会觉得每天时间不够用，没有效率，没有收获，那么今天分享5个时间管理的方法，帮助你提升效率的同时，个人也能得到成长。请看今天的分享，enjoy it。

如何做好时间管理？

网上流传一张王健林的行程单，可以看得出时间分配相当满，于是我就特别好奇，专门问了一些我们公司的高P，他们每天那么多工作，是如何去平衡生活和工作的，其中有一个很重要的点就是做好时间管理且自律。

比如今天晚上8点要和孩子去看一个音乐会，就会在8点之前把所有的工作全部搞定，然后去陪孩子！是呀，厉害的人，能在某一个点把事情全部搞定，本身就是超强的能力，那么作为职场人，我们该怎么合理管理时间呢，今天分享6个小方法给大家。

方法一：番茄工作法

番茄工作法是由弗朗西斯科·西里洛于1992年创立的一种相对于GTD更微观的时间管理方法。因为创始人使用番茄定时器，所以叫番茄工作法。

如何使用？

选择一个待完成的任务，将番茄时间设为25分钟，专注工作，中途不允许做任何与该任务无关的事，直到番茄时钟响起，然后在短暂休息一会（5分钟就行），每4个番茄时段多休息一会儿。

这个方法为什么好用呢？我相信很多设计师和我一样，每次工作几分钟后就会玩玩手机，看看微信，一边听歌，刷着网站，同时做着几件事情。

这个就是明显的一心多用，不够聚焦，番茄时钟好处就是督促你在这个25分钟内，专心只做一件事情。充分利用大脑的集中注意力去高效完成一件事，然后休息5分钟，再开始下一个番茄时间。

当然你也可以根据你个人习惯来调整时间，我将番茄时间的25分钟改成了45分钟，这样有助于我更好的聚焦。比如我有一个需求时，我会花45分钟看完交互流程，45分钟去和开发还原开发细节，45分钟去收集设计灵感，45分钟去把页面框架搭建好，或者设计好一个局部等等，然后休息5分钟，让自己短暂休息下。

合理拆解需求

学会拆解任务，设计师的需求有大有小，大的比如一个首页改版，一个设计语言的建立，小的有一个弹窗设计，一个图标绘制等等，那么运用番茄时间的第一步就是你需要对工作任务进行合理的拆解，才能用多个番茄时间段来覆盖整个项目，比如需要做一个首页改版，那么我就需要进行拆解任务。

首页改版可以分成四个大的关键节点，需求讨论，设计风格探索，视觉设计，交付开发，然后每个大的模块下再细分小的任务，然后进行番茄时钟的评估，比如色彩收集我可能需要2个45分钟，那么就2个番茄时钟去完成它。

所以我们要学会合理的去拆分你的需求任务！明确到可执行的番茄时钟。

及时提醒

每个25分钟或者45分钟的时间点提醒一定要及时，闹钟响了，停下手上工作，短暂的休息调整下，切忌继续一直工作下去，因为只有适当休息，我们才能更加高效，高质量的完成接下来任务。

听听白噪音

很多同学在工作时，喜欢戴着耳机听着音乐，但是在使用番茄时钟时，我不太建议这样做，原因在于音乐会干扰我们思考，有时候音乐还会影响你的情绪，所以这个时候建议大家听听舒缓的白噪音，比如海浪声音、风声、雨声，我个人比较喜欢听海浪拍打的声音，能够让自己静下心来。

这里推荐一个番茄时钟的MAC工具，叫番茄钟，里面除了设置番茄钟外，还自带很多白噪音，非常好用！

方法二：四象限时间法

美国的管理学家科维提出的一个时间管理的理论，把工作按照重要和紧急两个不同的程度进行了划分，基本上可以分为四个“象限”：

1.既紧急又重要：

如同事投诉、即将到期的任务、上线危机等

2.重要但不紧急：

建立人际关系、设计培训、制定设计规范等

3.紧急但不重要：

如取快递、部门会议等

4.既不紧急也不重要：

如网购、闲谈、邮件、发朋友圈等

我们需要把每天工作任务，按处理顺序划分：先是既紧急又重要的，接着是重要但不紧急的，再到紧急但不重要的，最后才是既不紧急也不重要的。我们具体来看看设计工作中的一些场景。

既紧急又重要

设计师工作场景：比如项目上线前的设计更改，明天和主管汇报的PPT，需求设计评审，这是我们每天工作的核心，大多数设计师在公司中日常任务就是产品的迭代，那么重要的事都是不能一拖再拖，都是迫在眉睫。

因为整个产品是赶时间点的，比如双11那天必须上线，那么无论如何都要按时保质量的完成，所以这时候是考验我们经验、判断力的时刻，如果没有做好，很有可能影响你的考核和晋升。

我自己的方法是每晚睡前给自己列出明天最重要的必须完成的3件事情，并用工具软件记录下来！

重要但不紧急

这里主要是和你个人成长发展有关，比如学习英语、提升动效技能、掌握C4D、理财等等，这些很重要，但是很多时候我们每天都在处理重要又紧急的事情，特别是互联网公司，每天都在做需求，对于自己的个人规划，根本没有时间处理，就会导致你个人的提升这些事情完全没有时间做，多把精力放在这个领域去提升自己，必须主动去做，这是对于你个人成长最有帮助的。

比如你未来3年希望去大厂工作，那么你就要列出来大厂设计师的技能有哪些，比如科学设计方法、设计思维、动效、数据能力，然后都放在你重要不紧急事情里。在精力有限的基础上多做投入和提升，慢慢才能达到目标，否则就一直成为流水线设计，或者项目里面一个资源方，个人成长永远没有！

紧急但不重要

比如PM找你聊需求，当然正常需求该聊还是聊，但是工作中经常有的聊，真的只是陪聊，很多时候真的在没有必要，没有结果的开会，聊需求真的是浪费时间，表面看似第一象限紧急事情里，因为迫切的呼声会让我们产生“这件事很重要”的错觉——实际上就算重要也是对别人而言。我们花很多时间在这个里面打转，其实不过是在满足别人的期望与标准。

设计师经常遇见的，改文案啊，产品会议，开发排期这种会议在我看来，出来关键节点有结果的需要参加，更多事情能少参与就少参与。

既不紧急也不重要

这里的既不紧急也不重要就是每天你花费时间最多的地方，比如群里聊天，刷朋友圈，抖音，看八卦新闻，当然人都是需要一些无聊消遣的，但不值得花很多时间在这个象限。刚开始时也许有滋有味，到后来你就会发现其实是很空虚的。

我经常给大家说，你怎么比别人进步更快，就是设计之外的8小时你在做什么。别人工作时间外8小时都在学设计，学各种课程，而你在做些无聊事情，一年下去差别就出来了，不是说我们不应该去娱乐，而是需要注意时间分配。

总之，关于时间的4象限，需要大家多多的关注，多把精力放在重要又紧急，然后允许情况下，多提升重要不紧急事情的投入，长期坚持下去，你会有巨大的改变。

方法三：先思考再动手

在接到需求时候，多问自己几个为什么，这个页面为什么要改版？改版是为了提升用户留存，还是活跃度？还是提升页面转化？还是优化了什么？了解清楚，梳理清楚逻辑、流程关系以后再动手，这才是一个正确的做事方式，同时也需要思考，你在这中间做了哪些有价值的事！

这个道理很简单，但是很多人都没有做到，我也有很多时候，做着做着掉进一个坑里，所以做之前想清楚，想好了再做会更好！

方法四：避免重复造轮子

避免重复，经常总结积累

做一件事情，学会举一反三，学会从点到面，在很多公司面试晋升过程中，比如阿里，P6资深设计师和P7专家设计师，很重要的一个技能点就是，如何从点做到面。

我们在做很多需求时候，需要思考，这次做的这个需求后续如果遇见类似的，能不能快速解决，而不至于浪费时间和精力投入进去没有成长！比如说按钮设计，我们随便抓一个市场上的按钮，你会发现按钮的样式、大小颜色就是各种不统一，浪费开发资源和设计资源！如果你每天的工作都是做这种浪费精力没有存在感的事情，对于个人是很不利的，平时做项目多留心下，比如我做一个专题页面是不是可以去思考下，这个页面做完哪些控件我可以沉淀下来，复用到其他的场景中，赋能给其他设计师呢，这个是很重要的！

同样的，比如我们最近在研究一个弹窗，那么是不是我做这次弹窗，我就把弹窗彻底研究透彻，弹窗尺寸大小、颜色、按钮、状态都研究彻底，彻底掌握了这个知识点，后面再做弹窗信手拈来，深刻搞定一个任务，避免反复，经常总结和积累，也是提升效率很重要的方法。

当你觉得很难的时候其实是在上坡

这是我很有感触的一句话，人的成长体现在同样的事情上，万事开头难，但后面会越来越顺手，因为在这个过程中你已经掌握了方法，我们需要做的就是不要半途而废，要学就学透学完整，后面工作效率就上来了。

我们的专业知识就像这4个空杯子，一个代表AE，一个是C4D，一个是UI，一个是插画，很多东西都想掌握，于是每天学习一次就往这个杯子浇水一点，但是坚持10天就坚持不下去了，要么学别的，要么没有动力了，然后导致最后什么都没学到。

正确做法是把一件事情学透了，学彻底了再去学下一件事情，你学AE就彻底把AE掌握了，再去学下一个，这样避免反复，彻底掌握不仅能加速你的成长，更能让你专业更深！

方法五：放下手机，定时间点

最后这个方法对我来说很有效，学会放下手机，放下干扰，中国口香糖的营业额持续下降，大家知道为什么吗？口香糖一般都会摆在收银台的旁边，因为用户在超市收银台排队的时候，都在玩手机，没有人去看前面的货台！可见手机对我们影响有多大，所以当你准备学习时候，或者去完成一个任务时候，最有效就是手机放起来，至少一个番茄时间不要去看，这样保证你的效率变高。

另外一个方法就是定时间点，定结束时间点很重要，人对于时间点都是有天然遵守的，比如地铁错过末班车就回不了家，火车飞机晚点你也回不去，所以我们做事情时候可以立一个最晚完成时间，然后去做，比如我写作，定的时间就是每周末必须写完，所以我周末再忙，都会去抽空写完。

最后

今天分享的这些经验，都是我实践过并有效的方法，希望可以帮助到大家一同实践起来，照着做下去，你会发现能压缩至少1/3的时间出来，让我们都把时间花在正确的事情，和正确的人身上，快乐工作，快乐成长，快乐生活！

原文地址：我们的设计日记（公众号）

作者：sky

转载请注明：学UI网》5个技巧，让你的做图效率翻10倍！

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：站酷作者：陈皮Celia

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

评论(0) 浏览(1978)

162021-7

设计沉思录 | 直播带岗的新体验之路

seo达人

2020年互联网行业最火热的关键词就是“直播”了,据中国网络视听节目服务协会发布的《2020中国网络视听发展研究报告》显示，截止2020年6月我国网络直播用户规模达5.62亿。每天观看直播已经成为了越来越多人的习惯。

a

01.变化与契机

2020年互联网行业最火热的关键词就是“直播”了,据中国网络视听节目服务协会发布的《2020中国网络视听发展研究报告》显示，截止2020年6月我国网络直播用户规模达5.62亿。每天观看直播已经成为了越来越多人的习惯。

随着用户习惯的变化，我们也洞察到用户对求职场景也在发生着变化，为此，58招聘也为用户开启“直播待岗”的新招聘场景。同传统招聘相比，直播招聘有许多明显的优势：

1、传统招聘都是单一枯燥文字展示，信息有限且缺乏引导及号召力。而直播招聘是主播生动详尽讲解职位及企业信息，多维度展示的基础上激发引导求职者兴趣并触发投递行为。

2、传统招聘开展面试有门槛，互动机制不健全不及时。直播招聘可便捷进入直播间参与即时互动沟通，高效便捷无门槛。

s

02.洞察问题

我们用最短的时间上线了第一期的版本，主要内容在于基础框架及功能的搭建，设计上借鉴其他业务的经验及规范，快速跑通整个流程。一期上线后，数据情况还是比较一般，我们和产品交互同学一起对数据进行了分析，并且对用户路径进行了体验走查，梳理出了造成用户流失的几个主要原因：

1、找不到合适的职位，当用户进入直播广场后，筛选直播间成本非常高，无法从卡片片现有信息的呈现上分辨出有什么职位，导致用户直接流失。

2、整体氛围冷清，情绪上较低落，无法激发用户的投递热情，也不想和主播互动导致主播情绪也低落，形成了一个恶性循环，从而不能达成连接

3、互动形式单一，只能留言、点赞和投递，对一部分有输入障碍的用户有影响

w

03.设计策略

基于此，我们针对各个环节中用户流失的原因，总结了提升直播连接转化的3个方向，在信息传递上，重点突出直播间的职位信息，让用户可以第一时间获取到最想看的内容；在氛围的营造上给用户营造一种热闹、很多人投递的感觉，打破用户的心理防备，激发用户的投递欲望；在互动方式上增加一些新的便捷互动形式和互动反馈来降低用户参与的难度。

1、帮助用户更好的获取直播内容

用户对于直播信息的甄选，主要来自直播广场。因此，在2.0中在直播广场增加了列表的标签筛选功能，让用户能够进行快速的初步筛选。

并且统一了直播中、预约、回放3种卡片的结构，降低用户的认知成本，提高的用户的操作效率，让用户在此场景中保持足够的专注，快速找到想看的直播间。

在技术上也有了进一步的能力，直播间可以实现实时透传，为用户的决策提供了又一个依据。

2、氛围营造

热闹

初期的直播间整体上还比较冷清，在色彩的运用上比较保守，在改版中，我们增加的更多饱和度较高颜色，提高整体的氛围感。例如在“谁进入直播”，由单一的文字弹幕变身为动态的彩色弹幕，并配上可爱的表情符号，营造了出超级热闹的景象。

大家都在投

直播间临时将各种不同的用户聚集在一起，形成了一个小集体。有集体，就有从众效应。我们对他人投递简历的情况也反应在弹幕上，给用户形成一种心理暗示，促进用户简历的投递。

游戏

直播是一件比较花时间事情，为了让用户能够停留在直播间的时间长一些，在直播间增加红包的游戏运营能力，让用户愿意花时间来兑换一些事情。

3、互动方式

在互动形式上，除了已有的点赞、留言、投递简历外，增加了快捷提问的功能，方便用户的提问，提升互动效率。当用户投递了简历后给用户一个动画效果的强反馈，给用户一种受到重视的感受。

通过以上优化的推进上线，整体数据达到预期，我们将持续关注数据变化找到用户的卡点，解决用户的问题；持续优化功能，给用户更好的服务和体验。

s

04.写在最后

通过直播的形式将企业信息、职位信息介绍给求职者，一方面加强求职者对企业的关注度，另一方面增加求职者对职位的信任度从而促进求职者进行简历投递或马上微聊企业。新颖的直播形式不仅可以帮助企业解决招聘问题，还可以助力企业的品牌推广，树立雇主品牌形象。

“直播带岗”作为招聘新场景的一个尝试，一切才刚刚开始，随着产品的逐步完善和成熟，未来的招聘直播定会带给用户更好的体验和更高的效率。

原文地址： 58UXD（公众号）

作者：环铁艺术家

转载请注明：学UI网》设计沉思录 | 直播带岗的新体验之路

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：站酷作者：陈皮Celia

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

评论(0) 浏览(2124)

162021-7

没想到用这个方法，原来小白也可以做动效！

seo达人

本文会给大家分享直播pk状态的小动效制作感悟了，细节磨了很久，希望能给大家一点启发。今天会从过程稿和最终稿的效果展示、主体动画、修饰元素动画等方面进行分享。

下图是直播pk的状态设计效果：

如果只是静态的，我认为还不够有亮点，如果能加上一点动效设计，就比较好了。

实不相瞒，这是一次需求方没有提需求，设计侧主动反推的逆向需求。

今天的分享大纲如下：

1. 几个过程稿和最终稿的效果展示

先来展示几个过程稿，了解以下整体动效细节的调整。

第一稿效果如下：

稍微有点生硬，氛围感不够强烈，于是第二版加了一些氛围元素，加长了主体位移的距离，效果如下：

比之前好一点，但是有同事反馈说稍微有点快，然后效果不够霸气干脆，于是我又咔咔一顿调整，让主体出来之后稍微停顿一小会，然后垂直落下：

这样就会干脆很多，而且加了一个闪光和高光的效果，让整体更加有氛围一些。

大概的三个版本优化过程是这样的，其他小的微调优化就不展示了，接下来我们拆分来剖析下这个动效。

2. 先完成主体动画

我们先来看下主体的动画效果：

可以分成2个属性来看：

位移：

主体物先从下到上，然后再往下位移一小段！

缩放：

缩放很简单，就是从小到大的一个简单缩放，但这里有个层次的细节，边缘的外圈和小皇冠是等主体缩放完成之后再依次出来的，这样会让整体层次感更佳。

3. 翅膀的小动画

小翅膀的动画算是一个小亮点吧，我加了一个拖影的效果，其实从制作层面也很简单，固定一个锚点：

然后依次进行旋转即可。这里注意下，因为三个翅膀是拖影效果，所以依次是原来越大，然后透明度依次降低。

动画效果如下：

翅膀做一个合成（类似智能对象），然后复制对称就可以了，这样改翅膀的动画改一个就可以。

4. 加上修饰元素动画

整个主体翅膀的动画已完成，就可以想办法加点修饰元素了，我这里一共加了三个触点：

第一个：放射线条

让整体有一种放射光芒的感觉

第二个：星星光圈

因为星星的设定是有一点反射材质的，所以最后让星星再次产生一个光圈扩散：

第三个：反射高光

最后动画结束，再加一个简单的高光位移：

很简单，就是白色矩形加上透明度和位移即可。

总结

好了，以上就是这个小动效的制作感悟了，细节磨了很久，希望能给大家一点启发。

原文地址：菜心设计铺（公众号）

作者：菜心设计铺

转载请注明：学UI网》没想到用这个方法，原来小白也可以做动效！

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：站酷作者：陈皮Celia

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

评论(0) 浏览(2230)

162021-7

没想到过程稿这么丑，结果用了两招就把效果改好了！

seo达人

上次我们分享了左面的等级相关的，今天我们接着来分享第二张任务相关的。本文会从引导页的3个方面讲解：一个好的创意非常重要、元素一定要有细节、搞一些灵动的小亮点，做好这3点能给作品加不少分。

最近做的引导页，效果如下：

1.一个好的创意非常重要

很多时候，一个好的创意非常关键，可以让设计产生亮点，等级这个页面，我个人还蛮喜欢这个创意的。

因为这个页面讲的是每周任务，我从“周”这个字眼想到了时间又想到了日历，所以我想用一个大的日历作为整体外轮廓，然后日历里面的结构是一些相关的礼物元素。

但是最开始的效果并不理想：

看不太出来是日历，那怎么样才能一眼就看出来是日历呢？

那就是有一种翻页的感觉，比如下面这种：

这样就可以看出来是日历了。

除了日历，刚才也说了，还要有一些相关元素，礼物呀、升级的火箭呀、直播的小电视呀等等：

这样有大的框架，再加上修饰的元素，整体的创意就差不多了。

2.元素一定要有细节

每一个元素都会影响画面精致度，比如之前说的那个礼盒，之前没倒角，倒角之后，和整个更搭一些：

再比如，我之前画的电视有点太简单粗暴了：

于是找了几个电视的参考:

加了一些细节和优化，优化后效果如下：

这样就比之前精致一些。

当每一个单体做到位了，组合起来就不会差太多，否则就会影响整体质量。

3.搞一些灵动的小亮点

其实让画面变灵动的方法有很多种，我个人特别喜欢使用一些可爱的表情、或者小形象。

比如之前在做任务头图的时候，字体上加了一个小微笑的表情：

再比如这次，在日历外面加了一个黑子，偷偷看里面礼物的细节：

让用户感觉里面确实有很多好东西。

再比如日历里面的星星也加入了表情：

让其更加有生命力。

这些都是我喜欢使用的小技巧。

总结

今天就先分享这么多啦，每次做引导页都是比较开心的，因为可发挥空间会比较大一点，也可以使用自己比较喜欢的3D手法，希望过程中的小感悟可以给大家来点灵感！

下期见，么么扔！

原文地址：菜心设计铺（公众号）

作者：菜心设计铺

转载请注明：学UI网》没想到过程稿这么丑，结果用了两招就把效果改好了！

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：站酷作者：陈皮Celia

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

评论(0) 浏览(1865)

首页

『 Ant Design是什么 』

『 Ant Design设计原则是什么 』

① Ant Design设计原则的由来

② Ant Design设计原则的适用范围

1. 我们先说说『Ant Design 』的适用范围：

2. 再说说 『 Ant Design 设计原则 』的适用范围：

③ Ant Design设计原则的内容

『 如何运用Ant Design的设计原则 』

① 视觉层级清晰

1. 亲密

1.1 纵向间距关系

1.2 横向间距关系

2. 对齐

2.1 文案类对齐

2.2 表单类对齐

2.3 数字类对齐

3. 对比

3.1 主次关系对比

3.2 总分关系对比

3.3 状态关系对比

4.重复

4.1 重复元素

② 交互操作高效

1. 减少打断

2.缩短步骤

3.避免回忆

4.信息降噪

③ 系统反馈即时

1.实时反馈

2.过渡反馈

3.结果反馈

④ 用户自由可控

1.未来预判

2.自主决策

3.准许反悔

『 Ant Design的优点与缺点 』

① 优点

1.助初创团队快速产品快速上线

2.减少设计和开发的不确定性。

3.节省设计与开发的人力成本

② 缺点

1.无法根据业务场景定制组件，灵活度不够

2.组件细节深入度不够，只能“将就”使用

3.竞品同质化严重，视觉上无法脱颖而出

『 总结 』

前言

一、体验度量怎么做？

二、度量模型怎么选？

三、HEART模型简介

1.什么是HEART模型？

2.HEART模型的特性与应用场景

四、HEART模型的详细拆解指南

第一步：确定体验目标

1.确定业务目标

2.拆解产品链路

3.分析触点并提取决定性因素

4.体验目标的提取与表述

第二步：确定度量维度

第三步：确定信号

以度量维度为标准并引用体验目标确定信号

寻找体验变量

确定信号的注意事项

第四步：确定指标

对数据进行处理

五、总结

jQuery fadeToggle() 方法

语法：

01.APP页面

02.网页

03.插画

04.图标

如何做好时间管理？

方法一：番茄工作法

方法二：四象限时间法

方法三：先思考再动手

方法四：避免重复造轮子

方法五：放下手机，定时间点

最后

01.变化与契机

『 Ant Design是什么』

『 Ant Design设计原则是什么』

2. 再说说『 Ant Design 设计原则』的适用范围：

『如何运用Ant Design的设计原则』

『 Ant Design的优点与缺点』

『总结』