为什么用户体验很重要？之所以现在的互联网越来越强调以用户为中心的产品设计，是因为市场激烈，产品同质化越来越严重，并且产品的用户获取成本也越来越高。在一个高速发展、变化迅速的市场下，很难有第二次机会去接触用户。所以当你的用户因为产品的用户体验而造成流失，并且习惯了竞品的话，就很难再回来……

交互设计中的一些重要原则

在做产品的交互设计时应遵循一些基本的准则，我们平常聊到比较多的理论有像菲茨法则（Fitts’ Law）、 席克定律（Hick’s Law ）、尼尔森(Jakob Nielsen)提出的【十大可用性原则】等等……得益于这些方法论，如今的互联网产品的交互设计也越来越人性化。

这里总结梳理了一些重要的基本原则：

1、一致性原则

一致性原则，是指包括视觉和交互的一致。无论是视觉风格、组件样式还是图形文字等都应做到统一。保持交互样式的一致，能让用户在使用过程中有一种掌控感，降低用户的认知和学习的成本。

布局结构/组件的一致性：保持页面结构布局及相关组件的一致性，有助于适应用户的使用习惯。以企业微信和钉钉的【工作台】页面为例，企业微信的各项功能入口都统一使用了“九宫格”的这种image lists的形式，界面布局清爽直接。而相较之下钉钉工作台就显杂乱了一些，钉钉的工作台里使用了多种元素。布局中也用到了banner、lists item这些组件，并且不同类型的功能icon，尺寸和样式也有差异。复杂的布就导致了用户学习成本的增加。

（企业微信工作台）

（钉钉工作台）

页面布局尽量保持一种类似的结构，使页面组织简洁有层次感。复杂的结构变化会让用户思考，规则的排列顺序能减轻用户的思考负担。

操作的一致性：操作的一致性是指用户在界面上的操作及收到的反馈，符合交互操作的一些基本统一规范。以下图的图片详情页为例：左右滑动图片可进行切换；双指拉动，可以缩放图片……不要另辟蹊径，通过一些不常用的手势来实现交互，一些基本的操作，要符合大众的一致性。即基本操作的交互反馈，应该符合交互统一规范，符合用户已养成的操作习惯。

（对图片的操作，符合操作统一的规范）

样式的一致性：样式的一致性，就包括了界面组件的风格、色彩色调、文字的一致性。举个简单的例子：

同一个组件你不能在你的APP中，在某一个页面是Ios Interface Design的设计风格，另一个页面又变成了MaterialDesign的设计风格；

APP的主色调是蓝色，不同的页面又换成了其他色系。

……

样式和视觉的一致性，会让使用者更觉得舒服。

（京东的主题色系以红色系为基准）

（各个层级页面的标签、文字样式都同样基于主题色）

2、主次原则

“什么都突出，等于什么都不突出”

在我们的应用中，页面、入口等一定要有层级，而且要根据用户的使用习惯、调用频次有层级的主次之分。

在页面内容比较多，可放空间比较少的情况下，主要的内容优先显示，次要的内容搁置在更深层级的页面中。

以Apple Music的播放器为例，为了让页面简洁，层次清晰，播放器页只保留了基本的【播放模式】、【歌词】、【更多】的一级入口。而像歌手信息、专辑信息、歌单操作、音质选择等等，通过点击一级入口【更多】，在下拉显示的二级菜单中来统一显示。通过主次划分，让界面更清爽。

（不同的功能入口，按主次层级分级显示）

3、防错原则

防错原则的定义是：通过系统的设计、重组或特别安排，防止用户出错。即在我们的重要、关键的操作/交互中，尽可能的设置一些防错机制，以帮助用户减少犯错。

举一个简单的例子，在web或APP中凡是有表单数据提交的地方，我们一般都会对用户填写的表单数据进行前端的JS 正则校验。通过正则验证，来保证用户提交到服务器数据的完整性、正确性。

（在App登陆注册场景，当手机号正则不匹配，发送button是禁用状态，用户不能执行表单提交操作）

通过设置防错的机制，在用户操作动作发生之前，提醒或防止用户混淆和做出错误的操作。

（微信群中陌生人加入安全提醒）

4、希克定律

一个人面临的选择越多，所需要作出决定的时间就越长。同样的，在人机交互中界面中选项越多，意味着用户做出决定的时间越长。因此在这类交互场景下，要提高用户的引导性。

比如在菜单栏的设计过程中，对选项进行同类分组和多层级布局，这样用户事件操作所用时间会更短、使用效率会更高。通过关联归类，让菜单层次清晰，来提高引导性，帮助用户快速定位。

（电商导航菜单中加入多层级菜单聚类分布）

5、直接原则

在人机交互界面中，菜单、页面的多层级意味着入口的变深，但我们可以通过一些组件、规则来满足用户快速操作的需求。让用户在用户当前所在的位置可以直接去操作，而不用去跳转链接、多层级加载页面，从而直接向反馈用户结果。

（通过3D touch组件，可直接跳转收付款等页面，减少用户层级跳转的操作）

（爱奇艺影视列表中，当鼠标hover在影视卡片上时，影视卡片会自动播放该影视的宣传短片并显示影视的类型、主演、故事概要等基本信息）

6、少做原则

类似于直接原则，即在人机交互过程中，让用户选择大于让用户输入，尽可能的减少用户的操作负担。通过揣摩用户的心理预期，尽量地成让用户做选择，而不是更主观的去做操作。

一个例子是搜索引擎，比较常用的策略是在搜索页面上会展示用户的搜索记录或根据用户输入的关键字进行匹配，帮助用户快速查询。

（展示搜索历史）

（关键字匹配）

再比如滴滴的一键打车功能，通过对用户的出行记录、常去目的地进行分析，提供打车的快捷入口，简化了用户的约车流程，使用户的使用更高效。

（滴滴根据用户习惯提供的一键打车功能）

7、反馈原则（状态可见原则）

产品想要做到人性化，一个基本要求就是要对用户在人机交互中的每一步操作进行及时的反馈（响应），让用户知道目前的状态，减少疑虑。

产品界面中通过合适的反馈（如弹窗、toast提示、动画、状态标签颜色变化等），让用户时刻清楚当前发生了什么事情。也就是快速的让用户在交互中了解自己处于何种状态、对数据未来去向有所了解。成功就进行成功的提示，失败了就告知失败。总之一定要让用户知道系统运行良好稳定，做到适时明确的反馈，营造和谐的人机对话环境。

（对用户人机交互给予清晰的结果反馈）

（web页面，根据用户的鼠标当前的操作事件，反馈一定交互效果向用户显示当前所处的状态）

8、减少等待原则

上面说到要及时向用户反馈人机交互的结果，如果在等待状态怎么办？

减少等待，才能帮我们留住用户。

许多研究都表明，用户能够忍受的最长等待时间的中位数在 6～8 秒之间。这就是说，8 秒是一个临界值，如果你的页面打开速度、操作响应等待在 8 秒以上，都会增加用户的焦躁情绪，甚至因此而导致用户放弃产品。

一个思路是在产品中的相关业务逻辑尽可能通过异步的方式实现，让用户在结果响应之前可以做额外其他的事情。比如用户在微博点击【上传视频】后直接跳转首页，可以马上转而做其他操作。通过这种异步的形式，可以在设置一些人机交互的小组件让用户实时知道事件进展，或只需在结束这个事件后告知用户结果即可。

（微博用户在选择上传短视频后，可以并行进行其他的操作）

另外一个思路是让用户在等待中转移注意力。比如在等待状态下通过动画、进度条来展示实时情况，而不是通过直白的文字来显示。

（通过有趣的动画，让用户在枯燥的等待过程中产生惊喜感）

9、引导性原则

没有用户会喜欢阅读使用说明书

用户只会越来越懒，没有用户愿意为了使用一个产品而去阅读使用说明。因此我们的产品一定要减少用户的学习成本，并且增强用户的使用引导性。

增强引导性，举个简单的示例说明：在移动应用中，当用户首次安装或应用更新新增了功能、页面布局发生了变化时……通过【遮罩】这种小组件来向用户展示新的内容。相较于使用说明文档、视频，可交互的、直观的引导说明，能让用户更快地熟悉产品。

（通过【遮罩】展示应用新内容）

10、纯粹原则

产品的使用属性永远第一位

在做交互设计中，还有很重要的一点是要纯粹。交互设计要遵循用户的需求，不要为了设计而设计，要为使用而设计。

雨伞是用来遮雨的，但如果为了美观将雨伞设计成镂空、加上蕾丝……那它就只能用来遮阳，失去了遮雨的本质初衷。交互设计也一样的，如果脱离了产品功能、产品业务，再有创意的设计只会让人觉得华而不实。所以在做交互设计时不要忘了纯粹的准则，人机交互的本质还是需要回归产品和用户本身。

总结

以上就是我们平时在做产品设计时需要时刻考虑到交互规范。

好的交互是一种在人机操作、信息流动过程中很自然、舒服的掌控感（sense）。

而这种设计能力需要自己在各类产品的不断体验中来得到锻炼和提升，这也就是为什么很多大厂在招聘PM中总会提问：你的手机中装了多少应用。

同时，我们也必须要积极地去关注行业的设计趋势和理念。像今年的WWDC2020，以前我们谈到苹果的设计理念，就会想到扁平、极简。而从即将推出的 IOS 14 和 macOS Big Sur 上我们可以看到，苹果也在尝试变革。在一些地方的设计中加入了阴影、纹理的元素，也在更多地向展示视觉物理层级感做尝试…

努力去培养自己的那种 sense 掌控感吧，与君共勉！

免责声明：本文版权归原作者所有，文章系作者个人观点不代表蜗牛派立场，如若转载请联系原作者；本站仅提供信息存储空间服务，内容仅为传递更多信息之目的，如涉及作品内容、版权等其它问题都请联系kefu@woniupai.net反馈！

为了对交互设计有更深入的理解，我决定在Coursera上开始更加系统的学习。Coursera是大型在线课程教育社区，有点类似于中国大学MOOC幕课，有非常多的名校名师在上面开授在线课程，涵盖多个领域的专业内容。

我会通过整理课程内容笔记的方式巩固和梳理每节课所学内容，对人机交互感兴趣的同学可以选择加入课程，我们一起同步学习，共同进步。

这节课的内容是有效的设计评估，这种方法可以称之为启发式评估或者基于启发式的反馈。评估设计的方法有很多种，可以凭借以往的经验、使用一些标准模型或者是自动化的程序。我们在这里主要讨论的是利用专业知识和启发式评估法，我之所以喜欢这个方法，是因为它可以应用到整个设计过程中。所以，不需要等到软件开发出来之后再进行评估。从最初的纸质模型开始，你可以将启发式评估的标准告诉用户、你的领导或者团队中的成员，这样他们就可以用这些词汇来描述哪些设计是有效的。

而且它还可以应用在软件重设计中，在软件发布之后，如果你想制作一个新的版本，那么启发式评估可以帮助你分析接下来要做的事。启发式评估最初是由Jacob Nielsen于1990年提出来的，他们最初是让用户在界面中寻找违反这些法则的案例，然后把它们整理到一起，然后再决定从哪里入手去进行修改。

我们看到的这十条标准，涵盖了用户界面的不同特性，我相信它会为你提供一些新的思路。但是其实它们并没有什么神奇之处，我根据自己的经验对Jacob Nielsen最初提出的版本进行了改进，如果你做的是不同类型的产品，那么你可以在我和Jacob的基础上，随意进行改动来满足你的需求。但是它是一个评估用户界面的基础标准，包含十个好设计原则。

我们将会把它们分为三个部分：理解（Understanding）、行动（Action）、反馈（Feedback）来帮助用户理解您的设计，从而产生用户行为，然后给出反馈。

启发式评估：理解

那么我们接下来就看看如何将你的用户界面变得更直观易懂吧。

一致性

我们基于过往经验来构建心理模型和预期结果，所以在你的产品中保证设计的一致性是非常重要的，同时也要与用户已经熟悉的类似产品保持一致。

这是一个违反设计一致性的案例，在这个版本的Microsoft Visual Basic中，有四种对话框的排列方式，有些时候你是可以适当的打破一致性原则，但是在这里，你完全没有理由这么做。

在Verizon的用户服务页中，联系人和客户服务中使用的名词都是商业词汇，所以用户很难理解它们的意思。

这个例子是Adobe许可证修复程序，你可以看到下方我遮住了一部分信息，你认为这里会出现什么呢？通常可能会是”继续”，但是事实上它说的是”你想退出吗？”第一次我打开这个界面的时候，想都没想就直接点了”Yes”，然后我就退出了程序，不得不再重来一次。

使用相同的比喻或者语言

这里有一个应用一致性的好案例，它在对话框中向你提出了一个问题，下面的按钮没有用让人迷惑的”Yes”和”No”而是采用了上方题目中的选项，这就引出了我们第二个启发式评估原则：使用相同的比喻或者语言。

这里有一个来自Adobe Acrobat的非常好的例子，在打印的时候弹出的打印对话框中，右下角可以显示真实的打印效果，图形化界面加入现实元素后会变得更有力，在这个对话框中我们可以看到一个微缩的打印版本，这个页面的尺寸应该是标准尺寸，但是我们选择了信件尺寸的纸张，所以底部的灰色是给我们的一个提示。

其他你比较熟悉的比喻有桌子、文件夹和购物车。这些都是我们在现实生活中比较熟悉的物品，同时它们也在设计中也拥有相同的含义。

如果你在为某一个特定的用户群体做设计，那么最好使用他们的语言。这是一个非常好的儿童网站的案例，其中的文案都是模仿的儿童语气，对孩子们来说更加友好。

这是我在办理去印度的签证时找到的一个案例，，这个签证网站列出了50多个美国的州，它把加利福尼亚州分为了南加利福尼亚和北加利福尼亚。我在这两个地方都生活过，我想说的是确实有很多加利福尼亚州的人希望这两个州可以分开相互独立，目前来说它还是一体的，我们中的很多人非常清楚自己住在哪个部分，但是还有一部分两个地方都生活过，这个时候你就不知道改选择哪个选项了。所以为了避免这种困惑，很多这种下拉列表都会使用邮编来进行选择。这就引出了我们下一个评估原则：清晰的、具有功能性的设计。

清晰的、具有功能性的设计

Le Corbusier 有一句名言是：”形式追随功能。”所以你展示出来的信息应该是用户真正想要的。

这里有一个2012年天气网站的案例，你想查询旧金山的天气是因为你想去旧金山，但是所有你想知道的内容都被折叠起来了。

这是一个非常令人震惊的案例，它实在是烂的太彻底了。但是说实话我觉得它”还不错”，但不是真正意义上的不错。这是一个租车网站，它集合了很多疯狂的设计。当然，这个案例比较极端，但是如果你稍不留神，可能就会操作失误，用户没有办法集中精力去解决他们的需求。

另一个有这种视觉干扰的案例是2010年的一个Google表单，这些单元格周围的网页框都是视觉垃圾，你真正关心的其实是表单里面的内容。把这些多余的线框都去掉，让真正有价值的部分体现出来，有时它会影响到用户的核心需求。

例如在这个学生贷款的网站上，你希望做的是找到贷款余额、支付贷款、确保你的联系地址是最新的。有人认为添加Widget是一个好的想法，但是没有人会在学生贷款的网站上花时间和精力去想添加什么样的Widget。

以上就是我们启发式评估的第一个部分，理解。下面一个章节我们会介绍到第二部分：行动。

启发式评估：行动

欢迎来到启发式评估第二阶段，我们本节的研究内容是用户行为。

自由度

首先就是用户控制和自由度，当我进入到一个网站，首先需要明确的事情是，我对于自己的目标是否清晰？网站中的信息入口是否足够醒目？我知道该如何操作吗？这其中涵盖了很多方面，包括如果我错误操作了是否可以退出？是否可以重新进入？不要妄想强制用户按照固定的步骤操作，例如当我打开一个电商网站时，我希望的是在强制登录并且添加收货地址之前先逛一逛。

用户界面的类型取决于你想要完成的任务，所以一些我几年才会用到一次的功能，例如设置路由、打印机或者其他配置类的不常用操作可以隐藏的比较深一些。相反，一些常用操作就需要做的足够显眼，同时可以提供多个入口，而且越是针对专业型的用户，这种开放式的设计就越有必要。越是针对新手用户，就越要设施多一些限制。

举一个好的结账系统的例子，在人们刚开始逛电商网站的时候，这些想买那也想买，往购物车中添加了一大堆的东西，当你进入最后的结账系统时，选择就结束了，商家鼓励你开始付款。

我认为亚马逊在这方面的设计还不错，因为在结账之前你可以对购物车中的物品进行增删操作，这就是在开放和限制之间一个比较平衡的自由度，如果你强迫用户买下购物车中的所有东西，那么用户可能会选择放弃付款，直接退出。当然如果你将这个过程设计的太过于开放，那么用户可能又会被其他的内容吸引，从而忘记付款，所以最重要的就是把握好平衡。

还有一个关于给用户提供自由度的好案例就是订票网站，我喜欢这个界面的地方在于，有很多浏览选项的方式，尤其是你还可以看到你选择的日期之外的价格，它会给你提供相邻日期的机票信息。例如我选择了一个出发日期，它会提示你如果提前一天出发价格就会便宜一半，或者给你提供一些其他的灵活方案，给用户提供多种选择，才能得到最满意的方案。

灵活性

接下啦我们要讲到的就是灵活性，好的用户界面会为高级用户提供更灵活、编辑的操作路径。

典型的例子就是快捷方式，例如复制粘贴命令，通常它会被放置在菜单列表中，但是我们更愿意通过快捷键来实现这个功能。

在不让新手用户感到不知所措的情况下提供灵活性的好方法就是先提供一些默认选项，这里举一个Expedia旅馆搜索引擎的案例，你可以在其中输入任何一个城市，它非常的灵活。但是它将旧金山、波士顿、华盛顿等热门目的地单独列了出来。

同时这种灵活性也可以体现在提供相关信息，如果用户对接下来即将发生的事情有一个大概的了解，那么就可以更好的做出决策。例如这个日历行程应用，它会在头部菜单栏中显示每天的天气，那么它就可以帮助你判断今天要骑车出门还是开车，是否要带一件雨衣，以上这些都可以帮助你更好的解决问题。

我们使用的产品也可以帮助我们防止信息过载，一个比较好的案例就是Googl 的Gmail，如果你点击取消订阅，它会给你提供三个选项，第一个是”取消订阅并举报垃圾邮件”，第二个是”举报垃圾邮件”，第三个是”取消”。如果你选择了第二个”举报垃圾邮件”按钮，Google就会知道你只是不喜欢这种类型的邮件，之后就不会再给你继续推送了。Google知道你是想取消订阅，但是同时它也意识到你可能还有别的想法，比如只是不想看这一类的信息，但是如果质量比较好或者没有打扰到你的情况下还是可以继续订阅。

以上几个案例，我们分别提到了航空公司为用户提供多种选择，帮助用户选择更合适的价格和出行方式；日历应用显示相关的天气信息；Google提供不同的操作方式给用户更大的灵活性。所以它背后的原理就是，如果你喜欢这种苏打饮料，那么也可能喜欢与它相似的东西。

对于这种”猜你喜欢”的功能有一个建议就是一定要提升算法的精准度，不然就会像一些尴尬的电商网站，推荐的都是不相关的东西，看起来就像是随机生成的，有的时候还会令用户很苦恼，SAP在这方面做的还不错。然而推荐的很多内容其实都差不多，如果你已经有一个特定的目标了，那么这些推荐就会变成一种干扰，所以在解决用户特定需求和推荐相关内容之间一定要有一个平衡，在设计中很难做到这一点。

这边再举一个时尚订阅的例子，如果你觉得这个时尚网站发的邮件太频繁了，你想取消订阅，点击进去后有一个选项是仍然订阅，但是发送的频率不要那么频繁，这就为用户提供了多一种选择。

所见即所得

第三点就是所见即所得，它是用户界面设计的基础。它的意思是你能做的操作已经清清楚楚的展示在界面上了，你不需要再去做额外的猜测，例如这个红色的按钮是什么意思，或者这个部分是什么意思。

我们拿来了一个三明治，用锡纸把它卷好，用数字标记出每一层分别都是什么东西，虽然看上去是一个比较傻的实验，但是确是非常有意义的一次教学。你得把三明治拆成清晰的每一部分，这样你才能了解它的组成。用户界面也是这样的，光从表面上看很难理解它们都代表什么功能，这些按钮、链接可以实现什么。例如导航系统中的链接应该做的更醒目一些，而不是试图削弱它，那么它就会提供更好的用户体验，这就是所见即所得的好处。所以当你在制作导航的时候，它需要提供清晰的信息，告诉你它会跳转到哪里。这并不意味着你需要赘述很多或者提供一些额外的操作步骤。所以有些失败的导航案例就是因为它的步骤太多了，而且没有意义。

拿这个电影购票系统来说，为什么要把买今天的票和买以后的票分开？直接放上一个日历就好了，你可以设定一个默认日期，比如说就是今天，然后让用户自己修改。

另一个让用户知道他们正在查看文件内容的方式是提供预览，这样就可以在打开之前让用户知道这是否是他们想找的文件。

以上就是我们关于行动(Action)一节的内容，下面我们将讲到反馈(Feedback)部分。

启发式评估：反馈

显示状态

当我们使用产品的时候，如何从系统的反馈中获得信息呢？在现实世界中，反馈是自然发生的，例如你拍一个球，你会看到它弹起来了。

但是在计算机世界，我们需要设计用户看到和听到的东西，这就需要我们花费时间和精力在好的反馈设计上。想要做好这项工作有几个比较关键的要素，首先要显示系统的状态，如果它是立即发生的，那么就显示它操作之后的状态，如果我现在正在进行一项操作，它的状态显示取决于它的响应时间，如果是不到一秒钟，那么就直接展示结果。

如果是一秒钟左右，那么最好是增加一些提示，让用户知道程序没有卡住。例如在浏览器中，可以用一个旋转图标来表示网页正在加载，也可以是沙漏、旋转球、进度球或者其他的动态元素，让用户知道程序正在运转。

如果超过一秒钟，那么就需要有一些进度条指示器，使用百分比来表示进度，也可以是倒计时。如果需要更长的时间，那么提供真实的倒计时是比较好的方式，因为用户知道进度条与时间并不是线性相关的，所以用户需要对时间有一个预估，我是继续等待十秒还是先去吃个午饭。

在80年代末期的时候我开始使用第一版Photoshop，在早期的彩色MAC上，一个图像操作可能需要花费20分钟的时间。所以我得知道哪些操作是比较快的，哪些操作是比较花费时间的。其实真的是这样，在等待的过程中我就先去吃午饭，然后回来的时候就差不多完成了，然后再继续工作。

类似于时间，同样存储空间也需要显示。如果你的邮箱系统显示你已经使用了多少存储空间，在快到达边界的时候你就会考虑是否该进行一些操作了，但是如果突然提示你空间不足，那就比较郁闷了。

显示状态的一种方式是根据我所做的这个操作，给出后续的选项。例如，我点击关闭一个文档，那么可以显示：”文档已经被修改。”在这个对话框中会给出三个选项，界面中还有一个好的设计点是”保存”按钮是蓝色的，这意味着它是一个默认按钮，当你直接在键盘上敲击回车的时候选择的就是它。同时”保存”的后面还有一个三个点的省略号，它意味着你点击这个按钮之后还有后续操作会发生。而其他两个选项：”不保存”和”取消”就没有。

交通信号灯也是一个显示状态的例子，它不仅仅是通过颜色来显示状态，而且还有它的位置，防止有些时候颜色不是很显眼或者有色盲用户无法区分颜色。而且就算其中某一项故障，还可以通过另一个状态来判断此时亮的是哪盏灯。

反馈与行动比较好的连接方式是让用户知道当前状态以及下一步该进行什么操作。如果你注册了一个邮箱，通常它提示”注册成功”之后都会再接一句：”接下来你可以进行某某某操作。”这会帮助用户继续前进，因为用户通常不会知道之后发生的事。

这里有一个视频工具名字叫”HandBrake”，它会在完成一个比较长时间的交互流程之后给用户弹出一个对话框提示。

减少错误

好的反馈信息可以帮助用户避免错误。

我们再来看一个保存对话框的案例，如果你要保存的文件已经存在，弹出的对话框提供了如下几个选项：”覆盖源文件”、”跳过”、”取消”、”重命名”，这是一个非常好的设计，因为它不仅仅给你提供了多种选择，而且它的选项解释的也非常清晰，同时你也可以在对话框中给出两个图片的预览，方便用户判断和选择。

但是当在MAC上建立一个有相同名称的文件夹时，它并没有像Adobe一样为我提供多个选项，只是弹出一个警告对话框，告诉你你不能进行这个操作。

另一个提供好的反馈的方法是不要使用一些太模糊的词汇，上一章节中我们说到了语音导航系统，使用语意更明确的词汇搭配上icon图标可以帮助用户加深理解。

这个对话框有三个选项，它询问你是否要保存更改，提供的选项有：”不要保存”、”取消”和”保存”。”保存”是比较好理解的，同时它也是默认选项。但是”不保存”和”取消”之间有什么区别呢？一开始我对此感到非常困惑，我相信还有很多人有同样的感受，”取消”到底是意味着”不要保存并且直接关闭”还是”不要保存，关闭对话框”，如果是前者那么它的功能和”不要保存”是一样的，如果是后者那么我们可以直接退出对话框再回到当前页面。

反馈的另一个重要之处在于，系统期望或者允许我去填写哪些内容。查找功能就是一个典型的例子，如果我想查找一个词，并且将它进行替换，那么我们只需要在相应的输入框内填写内容就好，这就是图形化用户界面的优势。如果是在终端中，它虽然也可以实现查找替换这个功能，但是你需要去使用相应的语法，这对于非专业用户来说就显得十分困难了，图形化界面将这个过程变得更加简单易懂。同时也可以避免语法错误，因为在图形化界面中，即使你输入了一些错误的字符它也不会报错，但是在终端中，一旦你的语法出现错误，系统就会停止运行并报错。所以从反馈的角度来说，虽然还是会有出错的情况产生，但是图形化用户界面还是有效的减少了语法错误的几率。

但是这并不意味着需要提供尽可能多的限制条件，下面是一个反面案例，过多的约束反而阻碍了任务的进行。我希望搜索我朋友Dan Olson的一本书，所以我在搜索框中输入了Olson，然后按下了搜索键，我希望它能给我提供一系列Olson的书，但是接下来出现的是出版商列表，虽然作者通常会比较在意出版商，但是对于读者来说这并不是什么关键因素，在我得到书的搜索结果之前我必须得先选择一个出版商，其实这个功能是不必要的。所以应该合理使用限制条件，让它们尽可能的为用户提供帮助，而不是阻碍用户。你所设置的限制条件应该符合语法规则，并且在特定情境中是成立的。

这是一个预定会议的日历界面，如果你忘记填写开始和结束时间，系统会提示你：”你没有指定日期。”在这种情况下更好的做法是直接弹出日历组件，让用户去选择，或者直接在一开始的时候设定一个默认时间，如果用户需要的话再进行修改。在航班订票网站，如果某一天没有航班，那么用户就无法选择。类似于这种情况，如果某一天没有空的会议室，那么这个选项应该无法选择，可以直接删掉这个选项，或者置灰处理。

支持错误恢复

好的用户界面和反馈应该可以帮助用户避免90%的错误，但是你没有办法保证100%的不出错，它总是会发生。所以当出错的时候，一定要注意清晰的去表述，这样你可以帮助用户去修正它。

这个报错在我看来并没有多大的帮助，它上面说：”创建虚拟目录出错。”后面跟了一个十六进制的代码。它稍微好一点的地方在于可以去搜索一下这个代码代表的含义，然后看看有什么解决方案。在这个场景中，你至少需要提供一些关于代码的解释，方便用户理解错误是怎么发生的。

在填写表单的时候，这种错误信息更为明显。我相信大家可能见过这种界面，它提示我们说：”你需要填写所有信息。”通常当用户看到这种警告的时候，他们并没有意识到自己漏填了哪一项，所以当我点击提交按钮的时候，实际上我觉得我已经填完了所有的内容，或者我已经填完了我需要填写的内容和我知道答案的内容。如果我真的有漏填的信息，只是简单的提示：”你没有填写所有信息”是毫无帮助的，所以为了改善它，我们可以将用户漏填的一项加粗或者高亮显示，意思就是让它更显眼一些。或者在它旁边添加一个错误标志，提示用户需要填写这部分的内容。有很多种方法帮助用户去完成填写任务，而不只是在出错的时候单纯的告诉用户，你做的不对。

Facebook的注册页面就是一个很好的例子，如果我在什么都不填的情况下直接点击注册按钮，那么它就会把我没填的输入框用红色高亮显示出来，同时还会显示一个红色的感叹号，所以如果我们用这两种方式来显示的话用户就不会注意不到它们了，同时它还用一个大大的红色箭头告诉我应该从哪里开始。

这个对话框显示的是文件无法创建，这可能是大家都不想看到的状况，但是它做的比较好的地方是给了我一个操作指导：关闭应用程序，重新启动，然后再次压缩安装。所以给出操作提示是非常重要的。

对于搜索界面来说，当你查不到想要的东西时最好是去检查下自己的拼写，尝试使用更加通俗的词汇，或者使用一些近义词。这就是一个比较好的提示页面，当你查找Scot(只有一个t)的时候，你可能得不到什么搜索结果，所以它会给你提供其他选项，你是否想搜索Scott(两个t)。或者如果你搜索的是比较特定的内容，它会给你提供一些更宽泛的信息。例如你在做地理信息查询时，它会自动帮你扩大一些搜索范围或者自动帮我们搜索同义词。

所以当系统可以帮助我们提供更多信息的时候，这其实是一个非常好的错误恢复机制，因为有很多错误是我们没有察觉到的。

提供帮助

对于这一点火狐和一些浏览器做的非常好，如果我们不小心进入了一个钓鱼网站，例如Facebok(只有一个”o”)，浏览器就会显示提示信息，这个网站可能存在潜在危险，当然它也会在角落里显示一个选项：”我知道我正在浏览什么网站。”但是更为明显的还是：”退出浏览”和”为什么我会进入钓鱼网站”。

现在就让我们进入到启发式评估：反馈的最后一节：提供帮助。在开发团队中，很容易将提供帮助视为某个人的责任和义务，而不是应用程序中的一部分，我认为我们是幸运的，因为近年来这个情况有所好转。网站、文档和应用程序结合的越来越紧密了，所以它不像是桌面端软件时代那么糟糕了，但是某些帮助信息还是不够及时，像是一种马后炮。

我认为科学技术中帮助信息这块做的比较好的是编程开发领域，例如PHP编程语言这些年来所做的事，他们并不是只给出代码语法，而是会通过一些案例来展示它的功能特性，例如它应该如何组合在一起，如何设置参数，所有的这些都是很棒的帮助信息。

这边有一个好的案例是Adobe 的Lightroom，用户在帮助信息中搜索如何提升照片的曝光度，然后系统直接展示了最相关的菜单路径。

相比之下，有一种情况看起来是在提供帮助信息，但是实际上却是在破坏我们的最终用户许可协议。我认为软件对待用户许可协议的方式不符合道德标准，这无疑是可用性的灾难，甚至可能是有意而为之。问题就是当用户许可协议完全展示出来的时候，没有人会逐字逐句去认真研究阅读，里面有很多看不懂的专业术语，人们只是为了完成某项任务，所以他们也不是很关心这个协议里面的内容。这时候系统就鸡贼的向你展示这一长篇的内容，然后强迫你勾选同意，之后他们就可以说你已经同意了我们的许可协议，所以我们就可以做任何我们想做的事。我觉得这太疯狂了！

这边列举一个来自Creative Commons的关于用户许可协议的正面案例，它是一个非盈利性的组织，创建用户许可协议真的是一个很庞大的工程，这就是为什么它有那么多的内容，但是这并不意味着用户一次性需要看到所有的信息。所以Creative Commons做的是从中提取了九条用户最关心的内容，并且它们也有一个更长的法律版本，在用户操作的过程中可以自主选择查看哪个版本，我认为这是一种更好的设计方案。

最后我们再提供一个正面的设计案例，这是一家酒店网站，在枕头选项中，如果你有过敏症不想使用酒店的枕头，那么你可以选择”一个同情的肩膀”。

这些有趣的小彩蛋会让你的产品或服务变得更加人性化，人们发现越来越多的网站开始做这样的事情，我认为我们的设计会发展的越来越好，越来越智能。

现在你已经掌握了十种启发式评估的方法，你可以用它们来思考你会尝试什么样的设计并且如何评估它的优缺点。这些方法在团队讨论中非常有帮助，同时在你向客户提出不同的方案时，它也是一种有力的工具。我发现在我的职业生涯中它们非常有帮助，我希望你也能从中获得启发，享受设计的过程。

免责声明：本文版权归原作者所有，文章系作者个人观点不代表蜗牛派立场，如若转载请联系原作者；本站仅提供信息存储空间服务，内容仅为传递更多信息之目的，如涉及作品内容、版权等其它问题都请联系kefu@woniupai.net反馈！

一个设计究竟为什么这样做，一个人职业水平的提高，如果只是在“别人这样做了”“以前这么做过”“感觉”，也就只能让自己长期停在了“野路子产品经理“上。一个人的职业能力跃迁的基础，就是思维方式是否是基于方法论上的，因为模型、框架、方法论背后是经过了时间考验形成的高确定性范式。

在工作中应该有意识的提高自己在这个体系的积累。产品设计并不是一个依赖于所谓“网感”的灵感创意性工作，随着互联网进入到下半场，这个工作也从“写意”过渡到需要通过”科学“的方式进行设计谋划，越来越需要通过心理学、社会学、经济学的体系配合数据分析的方法步步为营的进行打造和优化。

就连感觉上最偏为”视觉系“的交互设计，背后，也有着科学的方法论。

例如，抖音这个经典的界面，如果你做了这样的设计，进行需求评审的时候，如果有人diss你，为什么要把互动相关的几个按钮竖向排布，也许你会说，”因为下面基本是放主导航的，不是放功能按钮的“，也许你会说”用户习惯这样的操作“，都似乎没错，但似乎又都没有说出这件事情的原理。

在用户的交互设计中，有一个公式叫做费茨定律，说的是光标到达一个目标的时间，与当前光标所在的位置和目标位置的距离（D）和目标大小（S）有关。它的数学公式是：时间T = a + b log2(D/S+1)。

我们利用费茨定律估算用户移动光标到链接或者按钮所需的时间，时间越短越高效。

比如有一个按钮在左下角，我们的操作可以细分为两个阶段：

第一个阶段大范围移动到左下方向，然后再做微调到达这个按钮之上。所以这个时间受按钮和链接所在位置与按钮和链接大小影响，也就是说我们在做设计时要考虑光标默认会放在哪里、我们的链接按钮是不是太小了。简单来讲，我们可以利用费茨定律估算用户移动光标到链接或者按钮所需的时间，时间越短越高效。

基于这样的定律，我们就可以解释抖音的交互button放在右侧的科学理由：90%的用户是右利手（右撇子），所以作为高频使用的交互按钮放在右侧，用户点击所需的成本最低。

而关注、转、评、赞这组交互按钮本身对于产品和用户建立深度连接有着很重大意义（比如极大提高了facebook用户留存率的ahamoment就是一个用户加了六个好友）  所以提高用户和内容之间的关联是产品应该更多引导的操作。

在这四个操作中，尽管加关注的意义最大，但由于成为好友之后，重复操作的意义不大，所以，放在相对操作距离最远的最高的位置。后续这个按钮还可以增加功能，成为直播的导流入口。

而转评赞三个按钮，相对来讲，赞对用户的成本最低，而对产品的相对价值也最低，评论由于可以产生内容成品和价值相对“赞”都更高，而分享，由于可以带来用户的自传播和自增长，对产品本身的价值度最高，而相对对用户的成本也最高，因此就要把价值高，成本高的分享放在用户交互成本最低的最下侧，而上面依次是评论和赞的按扭

交互设计还有很多类似的模型。这里也把几个常用的框架做一些介绍。

1、希克定律

一个人面临的选择（n）越多，所需要作出决定的时间（T）就越长。

数学公式：反应时间T=a+blog2（n）

人们确实是有选择困难症的，越多的选择，意味着越为严重的选择恐惧，所以，让用户在每一次选择中，减少选项是有实际意义的。所以我们就要在设计中减少一次选择中的选项个数，可以通过选择的层次深度，多次交互的方式来减少综合选择成本。

2、7±2法则

年轻人的记忆广度大约为5到9个单位之间。

太多的内容会让人出现认知超载，成为一种记忆负担。所以很多经典产品的主导航都把自己的选项严格控制在这个范围之内。

3、古腾堡法则

由EdmundC. Arnold提出，他是一名报纸设计师，被公认为现代报纸设计之父。他设计了超过一千种报纸，包括波士顿环球报，国家观察报，今日报，多伦多星报，堪萨斯城之星报等等。

20世纪 50年代，他在设计报纸的过程中，提出了一项原则，认为人的阅读方式应该是遵循某种习惯进行的，好像读书一样，除了从左到右，还有从上到下的方式。

但这里面蕴含着什么信息呢？经过多方研究，他最终得出了被后人熟知的「古腾堡原则」，并附上了一张图，名为「古腾堡图表」。整个阅读方式由左向右方向前进，读者倾向于关注整个页面的开始与结束区域，至于段落的起始与结尾则较少被关注到，也就是闲置区。这个原则的支撑点为「阅读重心」，由人们一直以来的阅读习惯形成。将图表的设计与阅读的重心相协调，能帮助读者梳理阅读的逻辑。据研究发现，这么做能提高读者阅读的节奏和理解能力。

基于这样的视觉动线逻辑，衍生出三种导航设计方法。

Z型动线，针对于平行的导航体系，进行同级别的列表

Zig-Zag 型动线眼动按照1-2-3-1的逻辑，针对于有二级导航体系，可以有更清晰的层次结构

F 型动线，针对内容更丰富更复杂的二级甚至三级导航体系，有更大的内容容纳能力。

4、格式塔定理

「格式塔」源自德语「Gestalt」，意即「整体」、「完形」的意思。格式塔心理学认为，我们在观察的时候会自动脑补出一些逻辑和含义来，会让观察对象变成一个完整的、整体的、常见的形状。

格式塔心理学认为，人们认知事物的时候，会依靠它们的距离来判断它们之间的关系。两个元素越近就说明它们之间关系更强。但是接近也是有对比的，在复杂的设计中，我们要一边考虑它们之间内部的逻辑关系一边来排版。

格式塔定理中，主要包含5种关系

A：接近律law ofproximity，元素越接近说明关系越强，UE设计主要有两个要点，交互逻辑和信息架构。而在信息架构中，就要考虑信息板块之间的关系，根据接近率，就要把相关性高的信息板块尽量接近，甚至在整体的信息中，有起承转合的逻辑结构。

例如淘宝的首页首屏设计，就分为了五个板块，并且秉承着信息获取的逻辑进行组成：如果有明确的目标，用顶部的搜索进行直达；焦点图是产品主要引导用户做内容推荐的部分，放在视觉最集中的位置；在向下依然是用户比较有明确需求的的，通过不同的导航让用户进入自己的需求部分；然后是用户已经没有明确的需求，所以通过推荐系统的千人千面激发用户需求；最下侧是符合用户习惯的主导航系统。

B：相似律lawof similarity，类似的功能和交互应该用，相似的相互方式。

在交互逻辑中，应该尽量符合用户习惯和用户预期，不要给用户“惊吓”以提高学习和使用成本。认知事物时，刺激要素（比如大小、色彩、形状等要素）相似的元素我们倾向于把它们联合在一起或者认为它们是一个种类。

还是淘宝的首页，我们会认为每个相似板块进行点击操作，应该有类似的反馈结果（类似也页面切换，弹出层等），而如果一个板块中有多种不同的交互反馈，会给用户很强的”踩雷“感，增加体验负荷。

C：闭合律lawof closure，是指我们会自己脑补出一个完整的图形形状。

例如下面的这两个”残缺“的圆，我们很正常的会脑补出这是圆形。

这个特质的经典应用是app设计中的”半页“设计，隐藏告诉用户，这后面还有东西，可以通过滑动的方式看到更多内容。

D：连续律lawofcontinuity，在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线，使曲线继续成为曲线，会出现短暂的认知和动作惯性。

比如，一组连续提示框的操作，如果前几个都是有利用户的点击确认之后，如果最后一个做有损用户利益的内容，由于连续率的作用，用户还是会点击”确定“

E：成员特性律lawof membershipcharacter。如果我们有很多同样的按钮，如何让某个更重要的按钮突出但是仍然让用户感知还是按钮呢？那就要用到成员特性律了。成员特性律赋予了集体中某一个元素特殊的一些刺激元素从而突出它。

例如：拨号键盘，拨出键和数字键的功能有明确区别，这就需要用一个不同的颜色使之脱离成员特性。很多ugc类产品也是通过这样的方式，将对产品有高价值的创建内容的按钮做突出显示的。

所以，从这些定律就可以看出，每一件事情的背后，藏着的都是用户深层的需求，只有洞察这些需求本源，基于底层进行理解和设计，才能创作出有”道”的产品，这是优术的高级方式。

免责声明：本文版权归原作者所有，文章系作者个人观点不代表蜗牛派立场，如若转载请联系原作者；本站仅提供信息存储空间服务，内容仅为传递更多信息之目的，如涉及作品内容、版权等其它问题都请联系kefu@woniupai.net反馈！

面试是面试官和面试者的一场双向选择，那么站在面试官的角度来想，面试官在面试中往往会问什么问题呢？同时又希望听到面试者什么样的回答呢？本文作者基于以往对交互设计岗位进行招聘面试的经历，分享给大家一些面试官的综合考察点，希望能够对大家的面试有帮助。

我在爱奇艺和字节跳动期间，都曾对实习生和社招的交互设计岗位进行过招聘面试，这里我也分享下我作为面试官时的一些综合考察点。

首先，我招人是为了满足业务的需求，那么候选人的某些特定经验或特长必须与业务需求足够匹配。

举个例子，假设我同时为A、B、C三个业务方招聘交互设计师，那么我得首先了解不同业务的产品性质，从来界定其需求内容，如下分析：

• 业务线A：主要产品为创新型的2C硬件产品，因此会更需要具备创新能力、多模态交互设计经验、关注设计前沿趋势的交互设计师。
• 业务线B：主要产品为提供业务能力支持的中台产品，因此会更需要具备审美（中台产品通常不设置UI岗）和复杂逻辑理解能力的交互设计师。
• 业务线C：主要产品为B/C通吃的多端应用产品，因此会更需要具备桌面端/移动端的设计经验、喜欢研究产品、有竞品分析产出能力的交互设计师。

基于以上各业务线的需求点，我的考察点也会发生不同的侧重，本着谨慎的原则，我会提前草拟一份提纲，以保证对候选人提出的问题不会偏离提问目标。

我的问卷内容会包含三个侧重点的考察：专业能力、学习力和团队契合度。

一、专业能力考察

1. 请简单介绍下自己的个人情况和项目经历

这是暖场问题。

2. 请简单介绍一下XX项目，你在其中扮演了什么角色以及做了哪些事情

不做提示，观察描述中是否会涉及到以下几点，考察项目经历真实性和表述逻辑，我个人会期望回答的内容能够覆盖以下至少4点：

• 业务背景
• 目标用户
• 用户需求（通过怎样的调研方式得出）
• 怎样通过设计来满足用户需求的（设计思考）
• 设计的对接和实现流程
• 如何来验证设计效果
• 数据意识

3. 选取案例中出现的一些控件，提问基础控件的特性和用法，如导航控件的使用场景和区分

了解其对基础规范的熟悉度，目的是为了考察工作的上手度。

• 了解基础控件规范
• 有组件化意识
• 有思考延伸

4. 选取案例中的一个点，提出质疑或询问为何要这么做

考察设计时是否有自我思考，以及相应的抗压和沟通能力，规避杠精或玻璃心。

• 能讲出合理的思考和缘由
• 自信冷静

5. 你在这份项目工作中遇到的最大的问题是什么？你怎样来解决这个问题的

• 考察在项目流程中的沟通和解决问题的能力；
• 有清晰合理的项目问题解决案例；
• 若没有问题或者没有案例，则由我提出假设性问题，如下例子：
  1） 研发同学告诉你，你的设计方案太复杂没办法实现，这时候你会怎么做？
  2）产品经理发给你一份需求，希望你明天下班前完成设计交付，这时候你会怎么做？
  3）UI设计师未与你进行沟通，私自更改了你的界面信息层级，这时候你会怎么做？

二、学习力考察

1. 向我推荐1到2个你平时喜欢的产品

为下个问题进行铺垫，若无则跳过。

2. 你认为这些产品好在哪里

考察其对优秀产品的理解，以及对设计细节的洞察能力和关注度，以及是否具备竞品分析的习惯或能力。

我个人期望回答的内容能够覆盖以下至少3点：

• 业务/市场/行业背景
• 人群特征
• 信息架构
• 界面体验
• 流程体验
• 创新点

三、团队契合度考察

1. 你平时有什么兴趣爱好吗

考察性格和爱好，判断能否与团队氛围契合。

• 活泼外向
• 深沉内向

2. 你为什么想来我们公司

考察动机，以及期望的团队。

3. 你有什么想问我的

考察关注点。

如是候选人是实习生的话，我还会追加一个实习时长和到岗时间的问询。

以上三点，首先专业能力和需求岗位的匹配度是必须慎重考量的，这决定了你招聘的人能否胜任业务方的岗位需求。

比如候选人A有丰富的C端交互设计经验，也具备缜密的逻辑思考能力和用户场景分析能力，但与目前任何业务方的岗位需求不匹配（比如只需要B端设计师，且急招要求可以立即上手的那种），那么我会倾向于将候选人A归属于待定类别，或转推给其他在招的C端岗位。

所以有时候面试被拒也不必灰心，不是你不够优秀，只是与当下的岗位不够匹配。

学习能力则代表了一个人未来的成长潜力，这对团队的活动和整体发展也是尤为重要的，活泼上进的人会像“鲶鱼”一样让整个“沙丁鱼”团队充满活力。

团队契合度的考察则是为了避免“刺头”的加入，同上道理，活泼上进的人会刺激团队成员的进步，情商低的人也会影响上下游的沟通效率，而高效顺畅的沟通能力对交互岗位而言是基础必备能力。

免责声明：本文版权归原作者所有，文章系作者个人观点不代表蜗牛派立场，如若转载请联系原作者；本站仅提供信息存储空间服务，内容仅为传递更多信息之目的，如涉及作品内容、版权等其它问题都请联系kefu@woniupai.net反馈！

文章作者从用户体验的视角出发，评价和总结了折叠屏的硬件形态、软件特性，并提出了针对多任务管理的设计原则。

2018-2019年后，人们对于移动生产力的思考生了极大的转变。苹果、微软和 Android 制造商推出了一系列新设备，提出了新的工作方式，颠覆了在过去十年中移动智能设备主导“一次运行一个应用”的主流原则。层出不穷的新设计都是为了解决一个亘古不变的问题：如何提高手机的生产力？

目录

1. 画布第一：硬件
2. 过去和现在：软件
3. 大浪淘沙
4. 提高移动生产力的合理建议

1、画布第一：硬件

正如在画布上作画，软件也是在硬件的限制和规范下运行。所以必须最大化硬件的优势的同时最小化其局限性。这意味着没有万能的解决方案。当前有很多不错的新形态可供我们选择，每一种提供了解决问题的方向。原型实现如下：·

内折手机（例如摩托罗拉Razr）这类设备有一个小型外屏，展开之后将会呈现一个常规尺寸的内屏。尽管高度便携，但与其他智能手机相比，它们没有提供附加的屏幕。

内折大屏手机（例如三星Galaxy Fold）这类设备有一个较小或正常屏幕大小的外屏，在展开之后则会有一个更大的平板级别的内屏。手机和平板的尺寸相似，也有很大的屏幕空间可以扩展。但是展开完整屏幕则需要笨拙的转换。

双屏幕（例如微软 Surface Duo）这类设备有两个紧密排列的屏幕。这种形态允许用户可以从便携的手机形态和更高效的大屏幕之间切换。但是软件在两个分离屏幕间的适配会存在问题。

外折屏手机（例如华为 Mate X）这种手机有一个环绕在外部的单个屏幕，在外折后即可达到平板尺寸。这是最少妥协的硬件应用，因为它可以在各种状态之间的转换更为自然，在不需要较大的屏幕时可以选择切换为便携的屏幕形式。

提炼上述设备的最佳设计元素，一个优秀的折叠设备需要非常便携，能够无缝切换至屏幕更大、更具生产力的形态。在这种情况下我们也可以畅想在这种硬件支持下的软件适配与实现。

2、软件的过去和现在

一些公司也开始为这种新的硬件形式设计了新的软件特性，Google 在 Android 10 上支持折叠屏手机，其中主要有三项特性：

“翻开书本”式交互（Open Book）的应用连续性：允许app的界面在设备的屏幕扩展时，响应式地切换界面（UI）的大小或布局，以适应屏幕的变化。对于应用来说，这种解决方案可以很好地利用屏幕的扩展空间，但不是所有应用都需要这种拓展，也不是所有应用都能充分利用这一特性。

“内折展开”式交互（Fold Out）的应用连续性：这种连续性允许应用在不同的屏幕间进行 UI 布局响应，通常是从小的外屏转移到更大的内屏（Galaxy Fold）。这种转换稍显尴尬因为它强迫用户必须离开当前场景，也不能看到页面元素的重新排列。由于缺少转换，导航型的心智模型也会受到破坏。

多窗口：多窗口能力允许2-3个甚至更多的应用通过 2D 网格的形式来运行。这种适配方式非常先进，但也存在一些缺陷：无论是移动硬件本身还是软件运行时的“桌面模式”都布局杂乱、难以排列、缺少延展性，这些都让其难以成为一个真正高效的解决方案。用户不是股票经纪人，也不能通过手机也强迫他们用证券交易所一样复杂的软件来提升使用效率。

iPadOS 也提供了一些强调移动生产力的新特性，例如：

底部导航手势（Home Bar Gestures）：底部导航手势令用户可以流畅、简单地在应用程序之间快速切换。对应的软件顺序都以时间轴进行排列。但用户的记忆力有限，不应该要求他们去记住打开应用的顺序。

侧拉（SlideOver）：侧拉使应用可以在一个小窗中运行，通过手势可随时呼出和取消小窗口。侧拉可以支持多个应用同时运行，用户可以通过和底部导航相同的操作手势切换不同应用；这种特性让侧拉成为了一个运行在顶部的另一部微型 iPadOS。这是一种强大有效的产品特性，为用户的微交互及快速的操作任务提供了支持，例如切换歌曲、查看短消息等。

微软也在 Windows 10 和 Surface Duo 的安卓皮肤中提供了一些灵活适配的特性demo。这种特性还没有被命名，所以我将在文章里展示一些创意特性：

屏幕拓展：屏幕拓展让应用在两块屏幕中展示不同的视图内容。在介绍视频中，微软展示了Outlook（收发邮件应用）如何从单屏转换为双屏模式，一块屏幕展示了收件箱、另一块则展示了下一级的邮件详情信息。对于某些软件程序（尤其是具有明显的多模式视图的软件，例如 Outlook）有较高的应用价值，这展示了Android实现“翻开书本” 的应用连续性。

线性工作流：这种形式允许新打开的应用占领当前屏幕空间，将其父级页面/应用推到左边。举个例子，如果在当前屏幕中的Outlook邮件详情页面中再打开PPT文档链接，这个文档将会出现在屏幕的最右侧，同时将刚才那个邮件页面推向左边，以此保证情景的延续性。

在最后，让我们讨论一下这些形式的开创者：Palm 的 WebOS ，过于超前的时代悲剧。

堆栈（Stacks）：堆栈将不同应用的不同界面组合成为工作集合，用户可以快速地从多任务界面中切换。当一个应用需要打开另一个应用，新的应用会在相同的集合中打开。堆栈可以按照用户的需求随意调整顺序。Dieter Bohn 精准的介绍了这个特性的好处：“你会真实地感知到你的应用所处的位置…用这种方式来按照所想安排应用内容会让你感觉到无与伦比的便捷。”

3、大浪淘沙

从软件这个纬度的学习汲取经验后，可以创建一些显而易见的指导原则。

1.不同的应用需要不同的拓展方式。Outlook 在 Windows 10X 上提供了多态视图，而对于像地图这样的应用，在更大的工作区域直接展示也许更好。音乐和信息不一定需要始终在顶部展示，但是需要更容易触达，那么像侧拉这种形式可能最合适。

2.复杂的工作流需要简易的导航形式。移动设备应该最大程度地减少用户在不同任务流之间的体验中断。导航应该是提升生产力的一种手段，而不是一种中断任务流的形式。

3.动态的工作流。重新安排工作集合应该是非常简单的，因为即使在同一任务下，工作集合也很少相同。应用的多个界面应该可以被提前生成并且快速调整和追踪。

提高移动生产力的合理建议

当前大多数硬件中最大的障碍是在“电话”和“平板电脑”形态之间的笨拙转换。因此，本文的解决方案专为 Mate X 样式的设备量身定制，该设备可为这种转换提供最小的阻碍和中断。同样，折叠屏软件的最大问题都存在于转换到生产力模式和进入生产力模式后。我创建了三套交互范例来解决这个问题，每一个都基于前文的指导原则。

不同的应用需要不同的拓展方式

我调查了不同种类的应用并将它们的过渡形式整理成三种：

1.静态应用即使在屏幕大小调整后也不会跟随调整大小。这种应用应该是结构简单、列表式的布局，就像 to-do lists 或者天气应用。

2.多态应用非常适合拓展，因为它们提供多种视图的展示，或者展示不同类型的信息。电子邮件，信息，社交应用是多态应用的有力候选者。

3.有拓展视图的应用在沉浸式的屏幕空间中体验更佳。在提供了更大的拓展屏幕空间后，具有复杂布局的地图，照片或应用程序将非常强大。

复杂的工作流需要简易的导航形式

iPadOS 的底部导航条为这个原则提供了非常强的支撑。它创建了一个简单的二维心智模型，帮助用户不需要离开当前的情景即可进行导航。然而，对于复杂的工作流而言，这种形式太过简单难以支撑；因为它只能前进或后退。我们需要一种既能保证简单性也能允许按照逻辑排序的方式来提升生产力。webOS 为我们提供了一些思考。

堆栈集合允许用户去创建有实际意义的工作区域：第一在单一的堆栈集合内，第二是堆栈本身的顺序。在这里我称呼这些堆栈为域（Space）。

域（Space）是用户自定义的应用集合。一个域最少可以由一个应用构成，不设上限。应用在域中的排序可以按照用户的意愿来进行排序。应用程序的不同界面、从应用唤起的其他应用在它们被调用的同一域中显示为相邻卡。

侧拉（SlideOver）在 iPadOS 中已经体现出了强大的适配性。在本文中，它的功能不变，但是不提供将侧拉中的应用转移到域中的能力。这样可以保持导航的简易性，也避免了两个模块内的应用重复。侧拉仍然保证可以快速轻松回访之前的任务和相关内容。无论用户处于哪一个域，侧拉提供的应用和逻辑都相同。

4、动态的工作流

在域内的应用间导航采用 iPadOS 一致的底部导航方式。无论该应用是否占据整个屏幕，用户可以在域中调整应用的左右位置。这让用户可以在较小的应用程序之间快速切换和预览，同时保留当前的任务情景。

在域之间的导航同样采用底部导航方式。在划到域的尽头会有些“粘性”——也就是说，想从一个域切换到另一个域，需要更长的手势动作。这使得域的边缘宽容度更高，避免用户意外脱离域。域的排列与 webOS 中的堆栈一致。

底部导航栏反映了域和应用程序的顺序。它被拆分开来，提供了应用和域的鸟瞰图。按住它可以提供更详细的视图，因此用户不必离开当前的场景，就可以了解应用和域的布局；在此处，用户可以快速在域之间进行切换，焦点应用被放大，提供一目了然的导航信息。

重要的是要认识到扩展视图后的应用程序本质上并不是更有效率。有时，较小的视图更有用—毕竟工作域是动态的—因此将应用缩回未展开状态的能力至关重要。用户可以在底部导航栏上向下滑动来展开或收缩焦点应用。我考虑过用捏的手势来实现这个功能（我相信这是一个更好的隐喻），但我认为这增加了不必要的阻碍，因为在有限的空间里的操作对误差更为敏感。通过结合域和底部导航栏，我们可以让用户在保证当前情景不退出的同时快速构建、维护、重整和切换它们的空间。

免责声明：本文版权归原作者所有，文章系作者个人观点不代表蜗牛派立场，如若转载请联系原作者；本站仅提供信息存储空间服务，内容仅为传递更多信息之目的，如涉及作品内容、版权等其它问题都请联系kefu@woniupai.net反馈！

凭借对细分文化市场的敏锐把控，以“小众”+“社交”的标签挤入市场的网易云音乐，在红利期借势大环境获得了高质量的阶段增长。虽然进入到拼渠道、拼版权、拼资源的关键时期后，网易云音乐显然已有些力不从心，但网易云音乐APP设计无疑是国内主流音乐播放器设计的一股清流，兼具质感与内涵，配色和整体设计也有着自己的情怀和风格。对于产品的独到理解，让网易云音乐始终保持着自己独特的小众设计感。

接下来我们从层级结构、界面设计和交互设计三个方面来分析一下网易云音乐APP的设计亮点。

层级结构

网易云的产品定位是音乐社交，从功能结构可以看出，除了基础的播放功能、评论功能、收藏功能等，网易云音乐还有独立的社交模块，歌曲评论处有热评分享功能，除了普通用户之间的交流，同时加强了普通用户与音乐人之间的交流分享。

“发现”为网易云音乐的首屏，网易云音乐将歌单列表入口和推荐歌单放在发现页，用户可以更方便地发现新音乐，符合其发现与分享的产品定位。

“我的”页面导航逻辑十分清晰，在这一界面，用户可以对下载的音乐、最近播放以及创建和收藏的歌单等进行统一管理。

“云村”是网易云音乐独立的社交模块，主要用于查看和发布动态，用户可以在广场查看热门动态，也可以查看关注的动态。

网易云音乐针对视频设置了一个单独的模块，点击可查看不同的视频分类。可以看出网易云音乐比较注重音乐视频功能。

“菜单栏”则主要包含了相关设置功能和一些使用率相对较低的功能，包括“演出”和“商场”等。从这里也可以看出网易云音乐并不局限于音乐播放器的功能，而是想打造一个综合类的音乐社交平台。此外，在菜单栏可以切换“日间模式”和“夜间模式”。

对于功能点较多的APP来说，杂乱的信息及其容易让用户迷失其中，因此在设计上尤其需要重视层级结构。网易云音乐对于层级结构的处理较为妥帖，可以清晰地传达出主次信息。

界面设计

网易云音乐的配色以高亮红为主打色，与黑色和灰色搭配，比同类型APP配色更加细腻，设计感十足，营造出低调、个性、热情的产品氛围。

经过改版后的网易云音乐，去掉了原来大面积的红色背景，将整体背景颜色改为了纯白色，搭配亮红色图标，使整个页面更有呼吸感，显得更加清爽通透。

结构上采用了音乐播放类APP顶部一级Tab导航+底部播放器的结构，保证了产品页面利用率。各板块之间采用留白分割，使用户的操作更加顺畅。

此外，改版后的网易云音乐，将之前的矩形图片全部改为了圆角图片，结合大量使用的圆形图标，在视觉呈现上也更为柔和。

在歌单广场等页面，主要以“小图＋文字标题”的形式进行呈现，形成统一风格的同时，又突出了歌单页特色功能。除部分官方发布歌单外，其余歌单均为用户产出，歌单封面多为用户精心挑选。而网易云音乐提供了封面图下载的功能，因此，如果需要图片素材，也不妨来网易云音乐的歌单广场转转。

歌曲播放界面，随音乐缓缓转动的黑胶唱片，更好地呈现了音乐播放的氛围，也为网易云音乐圈粉无数。

点击歌曲播放界面右上角的分享按钮，可以生成极具设计感的分享卡片。在评论界面，也可以将当前页面快速转为图片分享。突出了网易云音乐极为重要的社交功能。

交互设计

网易云音乐在操作过程中，播放器始终位于页面底部，符合用户的操作习惯。此外，对于一些细节的交互处理也非常细致，可以让用户使用起来更加顺畅。

1.转场交互

网易云音乐在页面切换的过程中，增加了滑动、渐入等效果进行过渡，使用户切换页面的过程变得更加流畅。

2.刷新效果

在使用下拉手势刷新页面时，会呈现红色的动态图标，与网易云音乐主色调一致，具有整体性。此外，在刷新后，首页歌单会改变，来帮助用户确认当前页面已是最新状态。

3.加载符号

在打开歌单、打开评论或打开专辑等需要加载的环节，网易云音乐都采用了“音波符号”的动态效果，来增强用户体验。

4.正在播放效果

在音乐播放界面，除了标志性的黑胶唱片设计，网易云音乐还提供了多种随着音乐律动的动态效果，可以让用户在更好的视觉氛围中欣赏音乐。

5.滑动交互控制

除了页面切换时可以采用滑动交互效果，在歌单广场、签到等界面，也大量运用了左右滑动的交互来进行控制，增加了用户操作的趣味性。

6.hover状态

在动态列表等界面，点击或长按停留在其中一条动态时，会出现覆盖整条动态的热区，来提示用户此处是可以操作的。

7.图标点击动效

用户在App进行任何操作时都需要给予正确的反馈，如用户在为歌曲标记红心时，点击图标，图标会产生微交互动画。此类情感化的设计会让用户觉得有温度，从而收获好心情。

以上是小摹从层级结构、界面设计和交互设计三个方面对网易云音乐进行的大致分析，如果展开来讲，还有更多细节值得我们参考和学习。当然，对于一款音乐播放类产品来说，资源无疑是最重要的。如果解决了版权这一痛点，相信网易云音乐能进一步获得大众的喜爱。

免责声明：本文版权归原作者所有，文章系作者个人观点不代表蜗牛派立场，如若转载请联系原作者；本站仅提供信息存储空间服务，内容仅为传递更多信息之目的，如涉及作品内容、版权等其它问题都请联系kefu@woniupai.net反馈！

今天小编给大家带来的文章是超干货交互设计知识总结–下篇，由于本篇文章太长，小编特意分成上下两篇分享给大家，一起来看看吧！

七个交互设计定律

1、菲兹定律

点击一个目标的时间同以下两个因素有关：

（1）设备当前位置和目标位置的距离（D）。距离越长，所用时间越长；

（2）目标的大小（S）。目标越大，所用时间越短。

该定律经常运用于鼠标从点A到点B的运动。

例如常用按钮的尺寸设计等。

2、希克定律

一个人面临的选择（n）越多，所需要作出决定的时间（T）就越长。

交互设计中要合理设置选项，以免用户使用中决策时间过长，降低使用效率。

3、米勒7±2定律

乔治米勒对短时记忆能力进行了定量研究，他发现人类头脑最好的状态能记忆含有7（±2）项信息块，在记忆了 5-9 项信息后人类的头脑就开始出错。

例如：手机号码的分位显示、应用中标签栏数量等

4、邻近性法则

人们通常将距离近的事物划分为一组。

界面设计中可以用对象间的相对距离来区分信息层级。

5、复杂性守恒定律

每个应用程序都具有其内在的、无法简化的复杂度。无论在产品开发环节还是在用户与产品的交互环节，这一固有的复杂度都无法依照我们的意愿去除，只能设法调整、平衡。

例如：在智能手机出现之前，手机上的操作按钮都是实体按钮。在智能手机出现手，手机被整个屏幕占据后，所有的操作都集合在了手机系统之中，等于把物理操作转移到了系统操作中，其本身的功能复杂程度并没有发生改变，只是转移了而已。

6、防错原则

大部分的意外都是由设计的疏忽，而不是人为操作疏忽。因此，在设计中要有必要的防错机制；在此，特别要注意在用户操作具有毁灭性效果的功能时要有提示，防止用户犯不可挽回的错误。

例如：登录时用户名校验，手机号码位数限制等。

7、奥卡姆剃刀原则

“切勿浪费较多东西去做，用较少的东西，同样可以做好的事情。

”这个原理称为“如无必要，勿增实体”，即“简单有效原理”。

在设计中可以使用户关注最主要的信息而非其它无关紧要的事物，从而提升使用效率。

交互设计如何开展工作

首先在交互设计师拿到需求后不要急着打开软件开始绘制线框图，而是要先分析需求，了解产品的战略层和范围层的业务目标。把握产品设计大方向，只有方向对了后面的工作才是有价值的。

把握了产品方向，下面就该进行需求的分析，

首先针对需求考虑5个问题：

1、为什么要做这个功能？（业务需求）

2、产品期望得到怎样的成果？（业务目标）

3、谁来使用？（目标用户）

4、他们要怎样使用？（用户需求）

5、如何让他们都来使用？（将业务目标转化为用户行为）

清楚这5个问题后，再根据交互设计流程进行一步一步的进行

这实际上就是对需求的战略层分析。

我们进一步分析业务需求（业务目的、业务目标）和用户需求（目标用户、用户体验目标），把握关键因素（用户的动机、担忧和影响目标达成的障碍）。

归纳这些需求，明确设计策略。

将“业务目标”转化为“用户行为”，通过引导用户的使用来帮助产品实现目标。

从设计“用户行为”到设计“用户界面”，用户行为决定了用户界面，用户界面也导致了用户会出现什么样的行为。

设计需求分析方法就是要帮助用户创造动机、排除担忧、解决障碍。

如何进行用户研究，方法有哪些

评估的形式及方法

常见的评估形式分为三类：

1、评估主体：根据评估的主体不同来进行区分，即谁来做评估。

按照评估主体来区分主要有两个主体：用户和专家

用户评估主要靠收集用户使用数据，也就是用户测试，它的数据相对客观，但时间和费用较多，评估范围较窄。

专家评估是让工程师及设计师等专家基于自身的专业知识和经验进行评估的一种方式。专家评估相对主观，但费时少、费用少、评估范围窄。

两种评估方法可以相互补充，并结合使用。

2、评估性质：例如定性评估、定量评估或着其它方式。

按照评估的性质来区分可以分为定量评估和定性评估。

定量评估是指对可以计量的部分进行评价，如点击量、使用率等，可以用数据来说明。

定性评估是指对非计量性的部分进行评价，如流畅度、舒适性、创造性等进行评价。它只能表示一个度，无法准确用数据来说明问题。

3、评估过程：按照评估的过程来进行区分。

从评估的过程来区分可以分为理性评估和感性评估。

理性评估相对客观，从客观的角度出发判断客观事物。

感性评估更为主观，评估结果并没有客观规律。

在实际应用中也需要将理性评估和感性评估结合使用，才能完整的完成我们的任务，达到我们的目标。

常见的评估方法有四种：

1、原型评估方法：在产品研发过程中，对于界面设计以及程序的测试来获得用户的反馈是至关重要的。以用户为中心和交互式设计的重要因素之一就是原型方法，原型方法的目的是将界面设计与用户的需求进行匹配。

一般来说原型评估方法分为三大类型：

（1）快速原型：原型迅速成型并分配实施，在原型实验收集的信息基础上，系统从草案中得以完善。

（2）增量原型：应用与大型系统，从系统的基本骨架开始，需要阶段性的安装，及系统的本质特征是在初次安装完成后允许阶段性测试，以减少遗漏的重要特征。

（3）演化原型：对前期的设计原型不断进行补充和优化，直到成为最后的系统。

2、简易测试评估方法

在条件不允许的情况下，可以采取简易的方法来对用户体验进行评价。步骤是：

（1）实验室环境准备：准备好测试用的电脑或其他媒介。两个房间，房间1用来对被测试者进行测试，房间2用于设计师和工程师的观察。

（2）被试选择：分为用户组和专家组。

（3）进行测试：房间1中被试者根据自己的选择进行操作和测试，同时说出自己的内心想法，观察员在调查表上记录被试者的每一次的操作情况，包括出错情况和被试者的口语描述，当被试者在测试过程中遇到困难或操作无法进行时，观察员要给予一定的客观提示。房间2中通过相关设备将房间1的情况传输到房间2，设计师和工程师实时观察和记录被试者的情况，以便今后对产品做进一步的修改和完善。

（4）结果分析：通过多次测试后，将测试结果汇总，提取出交互设计中存在的问题，以及对交互设计有益的建议形成测试报告。

3、眼动评估方法

眼动追踪可以用来评价对产品（包括硬件产品和软件产品）设计的感性意象，评测产品设计特征。眼动评估的主要指标有注视热点图、搜索过程测量指标、兴趣区域即用户视觉注意的焦点区。可以结合口语分析法了解用户的所想 和所做。

4、脑电评估方法

通过对脑电信号的分析，研究者可以探索大脑的认知加工过程和受试者的心理状况。近年来脑电评估方法在人机交互心理学等领域应用广泛，被用来评估交互设计、人机界面、产品设计等方面的内容。但是脑电评估也有一定的缺陷，例如空间分辨率上的局限性，因而对某些认知过程和脑区的定位并不是很准确。第二，在许多相似的实验研究中，由于研究者采用了不同的实验材料和方法等，实验结果也存在差异性。第三 ，由于采集记录时间的滞后性，脑电所记录的并不一定是当下被试者所想到的内容。

采取哪种方法来开展用户测试和评估，要根据不同的任务结合不同的环境来开展，比如：时间、成本、资源等。

启发式评估法

是专家评估法的一种，也被称为经验性评估，最初由Nielsen博士提出。简单来说，启发式评估是一种简易的可用性评估方法，使用一套相对简单、通用、有启发性的可用性原则，让几个评审根据专业知识和经验来进行评估，发现产品潜在的可用性问题。

启发式评估的两大要素：评估者和评估参照的原则。

对评估者的要求主要有四个方面：

（1）人数：推荐3-5人，有时会更少

（2）知识：最好同时具有可用性知识及设计知识

（3）身份：最好是非设计者本人，否者不具有客观性

（4）岗位：设计师或用户研究员

评估参照的原则有：尼尔森十大可用性原则、八项黄金法则、首页可用性指南、ios设计指南、拓展原则、HHS网页设计与可用性指南等。具体需要根据实际项目来选择，常用的是尼尔森十大交互原则。

什么时候适合使用启发式评估法？

交互设计和UI设计阶段、测试优化和产品发布后的阶段。

启发式评估的优缺点有哪些？

优点：成本低、效率高、发现大多数可用性问题，甚至是用户测试时不会出现的问题。

缺点：不能代表真实用户，相对主观、有时候发现问题过多、对评估人员知识背景要求较高。

什么时候适用？

（1）适合时间、资源有限的情况下快速发现可用性问题，降低风险及成本。

（2）版本变动不大的情况下，小成本检验。

（3）作为可用性测试的之前准备。

启发式评估流程是什么？

（1）准备阶段：确定范围、背景调查、参考评估原则、评委邀约、材料准备

（2）执行阶段：任务走查、整体走查、结果记录

（3）分析阶段：汇总讨论、报告总结、优化方案

可用性测试

先来看一下我们在平时工作中常常会听到这样的问题

产品经理：我们的用户觉得产品好不好用？使用过程中会不会遇到问题？他们是否满意？

设计师：设计的过程有一些纠结的地方，不知道实际用户是怎么理解和操作的怎么办？

产品开发后：想在大推前检验一下产品是否靠谱，适不适合大推？

当我们遇到这样的一些问题时，如何找到方法快速得到答案呢？

那就是接下来要介绍的可用性测试方法。

可用性测试是一种常用的、高效的方法。

它的定义是：通过观察具有代表性的用户，完成产品的典型任务，从而找出产品可用性问题并解决，目的是为了改善产品，让产品更容易使用。

什么时候适合做可用性测试呢？

一般是在：交互设计或UI设计、测试优化、正式发布三个阶段来做。当然是越早做越好，可以尽早发现问题并及时调整。

类型分为两种：形成式和总结式

形成式特点：小样本、发现问题为主、不能做定量对比。

总结式特点：大样本（30人以上）、定量的评估、可以做对比评估

可用性测试可以解决什么样的问题？

1、发现问题，产品在体验上是否存在问题

2、检验实现，期望的设计目的有没有达成，是否满足了用户的期望

3、产品评估，用户是否会满意

4、理解用户，了解用户行为习惯，了解用户认知，找到某些问题的原因

测试流程是什么？

整体上分为4个阶段：1、准备  2、测试  3、分析  4、优化

1、准备阶段要做的有哪些？

确定目标：确定测试目标决定了后面测试过程要怎样去设计

常见的测试目标有：

• 对整个产品做可用性评估
• 对新增的功能模块进行评估
• 提前观察新方案对新老用户有怎样的影响
• 提前检测改版是否达到预计目标
• 设计时存在争议，如何选择解决方案
• 某个环节流失率较高，检测是否为设计原因导致
• 需要拓展某一类特殊用户，测试针对这类用户在设计上是否需要作出调整

准备测试方案

方案中应当包含以下内容：

• 测试目的：明确测试的目的及范围，测试目的决定了测试方案
• 测试关注点：与负责的设计师一起梳理测试中要关注的问题
• 用户招募：招募要求，样本配比，招募渠道
• 经费预算：奖励的形式和额度
• 时间计划：用于把控时间计划

撰写测试脚本：设计测试任务，通过用户行为去观察提问来获得我们想要的内容

基本的流程有：

• 暖场：3min，简单聊天，消除用户的紧张情绪
• 测试说明：2min，对测试内容规则做说明
• 测试前访谈：10min，了解用户基本信息
• 简单试用：3min，让用户熟悉产品
• 测试执行：30-45min，提示任务并观察
• 事后访谈：15min，针对疑点问点追问，填写评价表
• 道别：5min，支付礼金，送用户离开

招募用户

招募什么样的用户呢？

• 根据测试目的来定，找出与测试目标有关的筛选纬度
• 特别考虑用户使用行为相关的特征，例如竞品使用经验，使用产品的目的，用户的活跃度等
• 挑选最核心的纬度，转化成用户招募的条件，并尽量客观化，具体化，可衡量
• 避免设置交叉条件过多，导致样本代表性降低
• 学会辨别真假的用户信息

招募多少用户合适？

• 以发现问题为目的快速可用性测试，6-8名即可
• 考虑产品的复杂性，覆盖人群差异性，适当做调整，拓展到10-15名

招募渠道有哪些？

• 公司内部
• 现有产品用户库
• 公司其他产品用户库
• 熟人，朋友等
• 推广渠道：官微、公众号、门户网等
• 社区，论坛，qq群等
• 第三方调研公司

准备测试素材：低保真或高保真原型，或线上已经可以使用的产品，也可以准备一些量表工具来辅助测试。在测试

过程中需要用到的电脑或手机设备，摄像头，纸，笔，桌椅等。

测试场地选择：

• 专业可用性测试实验室：一般对测试质量要求较高，旁听人数较多且需要采集丰富的数据的时候采用此方法。实验室有两个房间，一个测试间，一个观察间，中间有单向玻璃分隔。测试间中有多角度的摄像头，用来记录测试过程，观察间可以同步看到测试间里的情况，
• 普通测试环境：在观察人数较少（小于3人），条件有限时使用。

预测试阶段：正式测试前进行预测试，保证测试流程通畅

• 走查：记录可能出现的问题
• 预测试：找人先测试一下
• 调整：调整测试流程

正式测试阶段

测试参与人员有

• 主持人：引导整个测试流程
• 记录员：记录操作行为，访谈内容，发现问题等
• 产品团队：参与旁听，观察，结束后交流
• 用户：完成测试及访谈任务

测试过程中需要观察的要点：

• 用户是否独立完成了任务
• 是否存在无效操作或不知所措的情况
• 用户是否满意

结果分析

边测试边总结，越及时越好

• 测试完一个用户，做一次小结
• 测试结束当天写小结，与设计师当场讨论
• 重要问题反馈后再总结分析报告
• 边测边改，边改边测

结果分析4个步骤：1、对发现分类  2、整理不确定项  3、评定优先级  4、结果记录

撰写报告

从4个方面来写：

• 总体如何
• 有哪些问题
• 严重程度如何
• 建议是什么
• 除此之外，还可以围绕关注的问题，未满足需求补充分析

优化跟踪

在测试之后需要出优化的方案，测试优化的过程是循环的。

测试之后如果还有其他问题没有得到解决，可以结合其他的一些测试方法来得到。

免责声明：本文版权归原作者所有，文章系作者个人观点不代表蜗牛派立场，如若转载请联系原作者；本站仅提供信息存储空间服务，内容仅为传递更多信息之目的，如涉及作品内容、版权等其它问题都请联系kefu@woniupai.net反馈！

输入框在互联网产品中可能是最常用和常见的交互组件之一，对于输入框的定义相信大家都了解是用户输入文本内容的载体组件。但是对于一些细节交互的“潜规则”，一些新人设计师常常容易忽略。以下内容是我们对输入框交互细节的一些思考及需要注意问题，与大家分享：

根据不同的场景需求，我们大致可将输入框分为短文本输入框、长文本输入框、浮动型文本输入框、特定场景输入框（如应用在搜索、二维码校验等特定场景下）。我们今天不介绍每种类型的输入框具体的定义，就说说各个输入框容易被新手忽略的“潜规则”吧～

“潜”规则一：输入极限值如何处理？

不同的输入框类型对于极限场景的规则不同，通常以短文本与长文本两种输入框为典型。

我们来具体看一下：

1. 短文本输入的极限场景

短文本输入框意味着输入的内容都比较简短，如姓名等。一般的处理方式是会在逻辑层限制最大的字符数，但是不需要一开始就告知用户。在字符限制内允许用户无限向后输入，此时文本框显示最近输入的内容从右向左推进。只有当用户不小心误触或“调戏输入框”，输入超长文本时，才会出现对应的提示。

Trip.com 短文本输入极限👆

对应的提示方式我们认为可以根据具体的场景及设计规范去选择，属于兜底处理。可以是像Trip.com这样轻量精准的提示，也可以像美团外卖带有“趣味性”的提示

2. 长文本输入的极限场景

我们通常固定的设计思路是在超出字数限制时输入即无效，简而言之就是不让再输入了，同时加入提示告知用户不可再输入的原因（这里的提示尽量以轻量清晰的方式出现）。

假设用户输入恰好在字数限制的临界点的场景，用户原本的想要输入的文字是在字数范围内，但由于单个文字输入时是由拼音字母组成，此时输入的字数统计为字母数，导致用户的编辑无法生效——这对于用户来说是一个不好的体验点。

输入状态时会因为拼音字母个数而超出限制👆

虽说这是属于非常极端和细微的场景，考虑到设计的细致性，还是建议在超出字数的时候仍可允许用户输入；可在输入框下方显示提示文字以及置灰用户的下一步操作来告知用户，用户可在已输入的内容中自由对其进行删减顺利进入到下一步。

超出时仅以统计字数来告知用户，同时置灰下一步操作👆

关于字数统计这里有个小tips：

给开发小哥们是关于字数而不是字符数的统计，特别是在输入内容涉及多种语言的场景下，对于字数统计的规则会有所不同，如若需要，设计侧可以列出一个白名单（可计入字数的字符说明）或是黑名单（不可计入字数的字符说明）给开发小哥们，以此确保设计还原的准确性。

“潜”规则二：输入框是否支持伸展

不知大家是否试用过长文本输入框的极限场景，在没有做字数限制的情况下如果持续的输入文字，会发生什么？

1. 高度伸展

1）一种通常的设计是固定长文本输入框的高度。在此高度内向下输入，同时会出现滑动条或最上方的文字露出半行来告知用户这里有多行内容可以自行滑动查看，这种设计适用于内容比较多的页面，限制的高度不会影响页面的整体结构和美观度。

2）还有一种设计是当输入内容超出输入框高度时，输入框随着内容自动向下延伸。这样的设计能让用户清楚自动自己输入的所有内容，方便用户检查和删改，但高度的延伸会影响页面整体的结构，如果输入框下面还有其他的控件，也需要跟随着高度进行自适应的调整，因此这样的设计应用比较少，更适合用户页面结构比较简单且长文本输入框的内容很重要的场景。

输入框随着文本输入而伸展👆

2. 模式切换

输入框伸展还有一种方式是提供用户自主选择进入专注输入的模式，常见于用户可自由选择输入长文本或是超长文本的场景，如评论，若用户可做一番“长篇大论”，可自主进入专注编辑的模式，便于超长文本的输入。

点击进入评论编辑的页面👆

“潜”规则三：如何与微动效进行“合体”

输入框与微动效结合并应用的场景越来越广泛，这里的微动效出现在用户进入输入状态前和进行输入时。这样的输入框也就是我们前文所说的浮动型文本输入框。

1. 怎么「合体」？

这一类的输入框不固定出现标题，只有一行占位符文本，在用户激活输入框进行输入时，占位符文本上移成为小标题，用户在输入时和输入完成后，输入框的展示方式是小标题+输入的内容。

输入与动效结合👆

2. 为什么要「合体」？

浮动型文本输入框适用于多输入框的页面，因为它可以解决以下问题：

1）减少用户的认知障碍。在多输入框的页面，如果有固定标题的展示，用户进入页面后会看到很大篇幅的输入框，影响用户对页面信息的获取及关注。采用浮动型文本输入框可以减少文本信息对用户的干扰；

2）在第1点的基础上，可以辅助用户明确当下输入的内容是否正确有效，可以解决用户对当下输入的内容需要小标题去辅助其认知的场景。

3. 「合体」要注意什么？

1）注意浮动型输入框输入框的高度。在保证输入初始状态美观度的同时要考虑标题出现的空间。

2）注意错误反馈的出现方式及位置。如果是用户未输入内容，其提示可以高亮占位符文本及输入框告知用户；若是输入内容不符合规则时可以在输入框下方延伸错误提示的区域，同时高亮输入框。

3）注意键盘的处理。用户在进入输入状态时会拉起键盘，这时候可以把键盘「确认」的按钮改为「下一项」，即确认当前输入框的内容同时进入下一个内容输入，这个设计适用于多输入框的表单场景，可以减少用户操作。这里需要特别提醒，到最后一项输入时记得把这个按钮改为「完成」。

多项输入时键盘按钮的变化👆

“潜”规则四：披上马甲就是“新”的自己

前面我们有说到特殊场景的输入框，如输入验证码、输入密码、进行搜索等等。这样的输入框看起来像是一个输入框，又不像是输入框的范畴，根本原因在于其规则场景比普通的输入框多了许多限制或功能。

1. 验证码输入

验证码输入是限定了输入字数和字符类型，对输入内容的校验具有时效性，对此不展开多说，相信大家都不陌生。

2. 密码输入

密码输入通常也会有字数的限制和字符的规则限制，同时还带着密码可视的功能。

3. 搜索框

搜索框的场景规则可谓是相当复杂，给用户提供的搜索建议、搜索历史记录、搜索生效规则、再次编辑的规则等等，后续我会再写一篇文章进行具体分析。

简而言之，关于规则的定义永远是服务于当下的用户场景，我们需要思考在极限情况下可能会出现的偏差以及解决方案，特别是在C端的产品上，差之毫厘的设计可能造成失之千里的后果，结合场景的思考是一件很有意思的事情。

以上是我们的一点思考与总结，与大家共勉。

免责声明：本文版权归原作者所有，文章系作者个人观点不代表蜗牛派立场，如若转载请联系原作者；本站仅提供信息存储空间服务，内容仅为传递更多信息之目的，如涉及作品内容、版权等其它问题都请联系kefu@woniupai.net反馈！

即刻有许多有趣的设计细节，这些细节契合了产品有爱、调皮的气质，同时在发现它们的瞬间自己也有被小小地打动到。这篇从四个具有代表意义的交互细节，和你一同去窥见设计的力量。

花式点赞按钮

依据不同圈子的主题，点赞图标随着主题内容花式变化。

▲ 不同主题下花式点赞按钮

像这样的产品细节，上线前或许没人谁能说清楚它到底有没有用。增加的规则：依据主题内容打上相应的图标。这一小创意打破了固有的「点赞」图标样式，不仅让操作和内容有了更强的关联，也因这一小趣味，我更有去「点一下」的欲望了。（最近觉得「不言自明」这词越品越有味儿…你们也品品

底部tab隐藏入口

即刻底部共有四个tab加一个发布操作。所有tab项中的二次点击交互手势里都隐藏了页面刷新的操作，「通知」长按直接到子模块系统通知列表，「我的」长按快捷定位到「我的收藏」。

▲ 底部tab交互延伸

底部tab项通过增加长按和二次点击的交互手势来隐藏入口，在不制造界面信息噪点的前提下拓展了功能。

所选功能是否符合用户的认知、是否给到用户惊喜是设计的关键点。如果扩展的功能违和，则是事倍功半的效果。

违禁词萌换，违规内容隐藏显示

在即刻社区发布评论或在个人页面的编辑个人信息，系统自动监测敏感词。评论中检测到敏感词，系统会用轻量、中性的萌系词汇替换。个人设置中，系统会将内容隐藏显示。（这个不截图了，自己去试下吧…

社区做违禁词自动监控不足为奇，而产品设计者应当进一步思考：如何对其进行合理巧妙的处理，其处理的方式是否巧妙就好似人与人之间微妙相处关系。

情感化

我的模块，拖动我个人头像。拖住时提供了微震动反馈，头像底部出现爱心图标，松手回弹，顶部出现emoji。

▲ 头像下的红心

这个点反馈做的特别妙：回弹的动效、微震动和归位后顶部的表情。虽然这一来一回总觉得有一种机器专属的笨拙和机械感，可又莫名觉得可爱。

就像是在追妹子，变着法在暗地里给妹子示爱。

这次主要从交互层面，分享下这四个具有典型意义的设计细节。其实即刻当中还有很多类似的，来自不同维度的体验细节，比如系统页底部的小猫咪、倒置计时沙漏、音乐吸底播放器中的左右滑动手势、不同圈子的引导文案和圈子内的微文案等等，有机会我找到主题再展开聊。

希望可以通过细微的观察与思考分析，与你一起看到设计的力量和产品的用心。

免责声明：本文版权归原作者所有，文章系作者个人观点不代表蜗牛派立场，如若转载请联系原作者；本站仅提供信息存储空间服务，内容仅为传递更多信息之目的，如涉及作品内容、版权等其它问题都请联系kefu@woniupai.net反馈！

今天小编给大家带来的文章是【超干货】交互设计知识总结（上），由于本篇文章太长，小编特意分成上下两篇分享给大家，一起来看看吧！

一、什么是交互设计？

先来看一下百度百科的定义

交互设计（英文Interaction Design, 缩写IXD)，是定义、设计人造系统的行为的设计领域，它定义了两个或多个互动的个体之间交流的内容和结构，使之互相配合，共同达成某种目的。

——百度百科

交互设计努力去创造和建立的是人与产品及服务之间有意义的关系，以“在充满社会复杂性的物质世界中嵌入信息技术”为中心。交互系统设计的目标可以从“可用性”和”用户体验“两个层面上进行分析，关注以人为本的用户需求。简而言之，交互设计是解决特定场景下的人群如何高效使用机器或软件的目标行为。

为什么要做交互设计

在使用网站，软件，消费产品或各种服务的时候（实际上是在同它们交互），使用过程中的感觉就是一种交互体验。随着网络和新技术的发展，各种新产品和交互方式越来越多，人们也越来越重视对交互的体验。

当大型计算机刚刚研制出来的时候，可能为当初的使用者本身就是该行业的专家，没有人去关注使用者的感觉；相反，一切都围绕机器的需要来组织，程序员通过打孔卡片来输入机器语言，输出结果也是机器语言，那个时候同计算机交互的重心是机器本身。当计算机系统的用户越来越由普通大众组成的时候，对交互体验的关注也越来越迫切了。因此交互设计作为一门关注交互体验的新学科在二十世纪八十年代产生了。

从用户角度来说，交互设计是一种如何让产品易用，有效而让人愉悦的技术，它致力于了解目标用户和他们的期望，了解用户在同产品交互时彼此的行为，了解“人”本身的心理和行为特点，同时，还包括了解各种有效的交互方式，并对它们进行增强和扩充。

通过对产品的界面和行为进行交互设计，让产品和它的使用者之间建立一种有机关系，从而可以有效达到使用者的目标，这就是交互设计的目的。

二、交互设计常用原则和定律有哪些？

尼尔森十大可用性原则

1、状态可见原则

系统应该让用户时刻清楚当前发生了什么事情，也就是快速的让用户了解自己处于何种状态、对过去发生、当前目标、以及对未来去向有所了解，一般的方法是在合适的时间给用户适当的反馈，防止用户使用出现错误。

即在用户操作界面功能时给予实时反馈，例如：页面加载状态提示、按钮点击后的状态变化、进度条提示等。

2、环境贴切原则

设计的一切表现和表述，尽可能贴近用户所在的环境，将现实环境的操作功能巧妙的转化为线上功能，使其贴近用户。使用用户能听懂的专业术语，涉及到专业化语言时要转化成用户熟悉的语言。

即模拟真实的事物，使用户更容易理解。例如：天气应用中的天气插图、音乐播放器的胶片都是生活中熟悉的场景和物品，降低理解成本。

3、操作可控原则

对于用户的误操作，提供二次确认或者撤销的功能，这样可提高用户的操作可控性。

例如：删除联系人二次确认提示、消息可撤回操作。

4、一致性原则

遵循统一的产品设计规范／逻辑。这里的一致性包含产品和跨平台产品之间的一致性。

一致性包含视觉交互、文案描述、组建样式等，例如：微信小程序设计规范。

5、防错原则

设置防错的机制，减少用户犯错。在用户选择动作发生之前，就要防止用户容易混淆或者错误的选择。

例如：用户名称校验提示、手机号码位数限制等。

6、易取原则

减少用户记忆负荷，在适合的时机给用户需要获取的信息。

例如：验证码读取、找人转账提示等。

7、灵活高效原则

提供灵活的操作和高效的获取信息能力。

例如：手机号码一键登录、消息关键字识别等。

8、优美简约原则

保留产品最主要的信息，如果不是优先级最高，要尽一切可能避免去影响产品的简洁和美观。

9、容错原则

用户在使用产品过程中出现了问题，及时准确的告知用户出现问题的原因。

例如：信息输入提示、搜索无结果等。

10、提供人性化帮助

在用户需要的时候提供必要的帮助说明。

例如：新功能引导、解释说明文案等。

七个交互设计定律

1、菲兹定律

点击一个目标的时间同以下两个因素有关：

（1）设备当前位置和目标位置的距离（D）。距离越长，所用时间越长；

（2）目标的大小（S）。目标越大，所用时间越短。

该定律经常运用于鼠标从点A到点B的运动。

例如常用按钮的尺寸设计等。

2、希克定律

一个人面临的选择（n）越多，所需要作出决定的时间（T）就越长。

交互设计中要合理设置选项，以免用户使用中决策时间过长，降低使用效率。

3、米勒7±2定律

乔治米勒对短时记忆能力进行了定量研究，他发现人类头脑最好的状态能记忆含有7（±2）项信息块，在记忆了 5-9 项信息后人类的头脑就开始出错。

例如：手机号码的分位显示、应用中标签栏数量等

4、邻近性法则

人们通常将距离近的事物划分为一组。

界面设计中可以用对象间的相对距离来区分信息层级。

5、复杂性守恒定律

每个应用程序都具有其内在的、无法简化的复杂度。无论在产品开发环节还是在用户与产品的交互环节，这一固有的复杂度都无法依照我们的意愿去除，只能设法调整、平衡。

例如：在智能手机出现之前，手机上的操作按钮都是实体按钮。在智能手机出现手，手机被整个屏幕占据后，所有的操作都集合在了手机系统之中，等于把物理操作转移到了系统操作中，其本身的功能复杂程度并没有发生改变，只是转移了而已。

6、防错原则

大部分的意外都是由设计的疏忽，而不是人为操作疏忽。因此，在设计中要有必要的防错机制；在此，特别要注意在用户操作具有毁灭性效果的功能时要有提示，防止用户犯不可挽回的错误。

例如：登录时用户名校验，手机号码位数限制等。

7、奥卡姆剃刀原则

“切勿浪费较多东西去做，用较少的东西，同样可以做好的事情。

”这个原理称为“如无必要，勿增实体”，即“简单有效原理”。

在设计中可以使用户关注最主要的信息而非其它无关紧要的事物，从而提升使用效率。

免责声明：本文版权归原作者所有，文章系作者个人观点不代表蜗牛派立场，如若转载请联系原作者；本站仅提供信息存储空间服务，内容仅为传递更多信息之目的，如涉及作品内容、版权等其它问题都请联系kefu@woniupai.net反馈！