用户体验地图：从应用场景到绘制步骤

中级界面设计练习题及答案1、层级动效：用来反映页面之间或界面元素之间的层级关系，让用户知道当前所处页面的层级，以及页面之间的（）关系。

A、层次B、前后C、信息D、逻辑答案：D2、移动UI界面中，淡色调给人的感受是（）A、淡雅柔和B、生动真切C、沉稳厚重D、博大稳健答案：A3、网页布局就是指以最适合用户浏览的方式将图片和文字排放在页面的不同位置。

A、正确B、错误答案：A4、产品的设计规范基础组件包括按钮、加载、导航、单行文本框、多行文本框、搜索框、下拉框、段落文本等。

A、正确B、错误答案：B5、（）是产品在概念设计阶段，通过对它的同类竞争产品的主观和客观分析，列出竞品或自己的优势与劣势。

A、竞品分析B、产品分析C、策略分析D、优势分析答案：A6、 AE中的动画设置，是以（）作为基本单位进行操作的。

A、图层B、面板C、像素答案：A7、帧速也叫 () ，指每秒播放的画面数.。

A、帧频B、帧效C、帧数D、帧率答案：A8、手机界面更多的以文字表现而不是图形表现。

A、正确B、错误答案：B9、从网站的逻辑结构来看，网站由 () 所组成。

A、首页和子页面B、首页和导航页C、导航页和子页面D、以上都不对答案：A10、() 是网页上最活跃的元素。

A、动画B、文字C、表格D、图片答案：A11、在网页设计中，正文的常用字体大小一般为（）A、 12px－18px之间B、 14px－20px之间C、 16px－22px之间D、 18px－24px之间答案：A12、交互设计过程中的常用软件是（）。

A、 AxureB、 MysqlC、 BridgeD、 Light Room13、（）格式是Macintosh系统中常用的图像格式。

A、 PCXB、 PICTC、 PDFD、 PNG答案：B14、下面哪一条不属于2020年UI设计的趋势 () 。

A、使用鲜亮的色彩模式B、打破传统网格的局限，呈现个性化网格布局C、使用插画风格D、使用暗色调主题答案：A15、在Photoshop中，将前景色和背景色恢复为默认颜色的快捷键是（）A、 FB、 DC、 TabD、 R答案：B16、转为可编辑对象说法正确的是？A、转换之后可以在对象中调整相应的参数B、转换之后可以对编辑对象的点、边和多边形进行调整C、转换之后只能对点和边进行倒角、不能对面倒角D、转换之后的模型不可以更改形状答案：B17、交互设计需要通过设计影响用户的主观体验，从而使用户得到( )的满足。

使用微信小程序开发实现地图和定位功能随着互联网的快速发展和移动设备的普及，手机成为了人们日常生活中不可或缺的一部分。

而微信作为一个广泛应用于社交、购物和娱乐的平台，其小程序功能的推出进一步提升了其用户体验。

在这篇文章中，我们将探讨如何使用微信小程序开发实现地图和定位功能。

一、地图功能的意义及应用场景地图是现代社会人们生活中不可或缺的一部分，其具有广泛的应用场景。

比如，我们在旅行时需要查找目的地的位置，或者在陌生城市需要了解周边的商店和服务设施等。

而通过微信小程序开发实现地图功能，可以使用户在微信平台上方便地查找地点、规划路线等。

二、使用微信小程序开发地图功能的基本步骤1. 调用微信小程序开放接口微信小程序提供了一系列开放接口，包括地图接口，可以用于开发地图功能。

在小程序代码中，我们需要调用相应的接口来实现地图功能。

2. 获取地理位置为了在地图上标注位置，我们需要首先获取用户的地理位置。

小程序提供了获取当前位置的接口，我们可以通过调用该接口来获取用户的地理位置信息。

3. 在地图上标注位置获取到用户的地理位置信息后，我们可以将该位置在地图上进行标注。

小程序提供了地图标注的接口，我们可以通过调用该接口来在地图上添加标记点，并显示位置的具体信息。

4. 实现地图导航功能除了标注位置之外，地图还可以用于实现导航功能。

小程序提供了地图导航的接口，我们可以调用该接口，实现在地图上显示路线和导航指示等功能。

三、使用微信小程序开发定位功能的基本步骤1. 获取用户授权在小程序中使用定位功能之前，我们需要获取用户的授权。

小程序提供了获取用户授权的接口，我们可以通过调用该接口来请求用户的位置授权。

2. 获取并显示用户位置获取用户的定位信息后，我们可以将用户的位置信息在小程序中进行显示。

比如，可以在小程序界面中显示用户所在城市的天气情况等。

3. 实现位置共享功能在某些场景下，我们可能需要实现位置共享功能，即用户可以将自己的位置信息分享给其他用户。

身为设计师，大家应该对“用户体验地图”都不陌生，就算自己没搞过，也应该听说过。

说实话，我之前对这件事儿有些抵触。

总担心它比较形式化，花大量时间没有解决真正问题，得不出执行层面的结论，最终以贴贴便签纸拍拍照看起来很专业的样子，其实默默的画上句号为终止。

不过，最近在做产品整体体验优化时，我发现用户体验地图是一个非常有效的方法，它可以让我们更全局的发现用户痛点、挖掘需求、脑爆产品机会点、高效做出决策。

那么bb了这么多，该如何有效的制作属于自己产品的用户体验地图呢?就像打仗需要地形图，体验提升的战斗也需要一个蓝图来规划和指引。

用户体验地图(Experience Maps)也被称为使用者旅程图(User Journey Map)。

用直白的话来解释下：用户体验地图就是通过一张图，用一种讲故事的方式，从一个特定用户的视角出发，记录从用户来到你的产品到完成目标离开的全部过程，它包括：用户在这个场景中的触点、行为、痛点、爽点、以及内心OS。

通过直观地了解用户如何使用自己的产品，以及在此过程中的整体感受，帮助我们寻找新的机遇去建立更好的用户体验。

它的价值是什么?除了上面所说优点，用户体验地图对团队还有以下价值：1.用户视角很多产品工作人员都有一个通病，习惯性的沉浸在自己的逻辑世界中，以工作者的视角去做产品功能，从“我”的目的是什么，“我”有什么东西出发，然后把功能罗列上去。

一顿操作猛如虎自嗨的去设计，以为用户就会在这个规则完成任务，其实用户一脸懵逼，甚至想卸载了你。

如果运用体验地图，参与者需要切换成用户视角、小白模式去看产品体验问题，去观察用户在整个路径中是如何满足自己目标的，以及在满足自己目标时，是困难还是容易的，而不只停留在主观的自嗨。

2.全局思维身为设计师或产品经理，对“体验优化”应该再熟悉不过了，大家往往单纯从产品功能出发，通过数据或用户反馈层面的依据，割裂地去看每一个模块。

这样做的问题就在于，很难做到整体系统的提升体验，一直处于头痛医头，脚痛医脚的优化中，被问题牵着鼻子走，不能从全局视角出发，发现更多的潜在机会点。

用户体验旅程图用户交互设计学堂(Yumei) · 2015-05-11 19:37一、写在前面今天Yumei将会总结用户体验旅程图，本着短小精悍易阅读的原则，分成三部分来写，这样也能写的更细致。

Yumei认为在需求调研过程中有两个重要的产出，用户角色和用户旅程，而用户体验旅程图将这两者进行了很好地结合，能用更好地方式进行产出，方便团队内部交流，所以在此总结，欢迎交流。

需要强调在前面的是，用户体验旅程图在最终汇报的时候效果虽好，这是一种很好地呈现方式！但绘制却很浪费时间，如果你是小团队机动灵活，那就可以学习思路，外在的表现只是形式，项目快速推进才是正事，不要为了用方法而用方法。

二、用户体验旅程图1、为什么做用户体验旅程图？我们做用户需求调研，最重要的是经过需求筛选与排序之后，把用户的需求转化成功能，功能点转化为架构，进一步体现在任务流程和页面呈现中去。

需求到功能这是多么直接又多么有效率的方式，为什么又凭空出了用户角色？刚开始对于这个乱入的方法我是拒绝的。

（前期的方法实践总是希望立马看到成果，初学者很难避免的问题）。

做了几个“项目”之后，感受到了这个方法的好，有几点直接的感悟现在跟大家分享：1）呈现方式完整，方便交流。

将细分的用户的用户角色和用户旅程在一张大纸上进行展示。

直观的了解细分人群的特点，但是因为呈现方向相对模块化，所以具体呈现内容还是要先“动脑子”。

2）有效避免“把自己意淫成用户”。

这种情况的发生，做设计没有修炼到一定层次，就总是容易拿自己置换，但是设计师毕竟不是用户。

3）有助于快速推进项目，保持团队和睦。

前期做用户体验旅程图会浪费一些时间，但是在后期功能点讨论和页面呈现的时候有助于快速决定，用户体验旅程图就贴在墙上，所有的“我觉得”都可以用“***真的需要这个功能吗？”来解决。

4）够客观，旅程阶段清晰直观。

这一点和第二点还是有差别的，体验地图呈现了可以有的痛点和机会点，有助于组内讨论沿着一条正确地线前行。

中级界面设计习题库一、单选题（共70题，每题1分，共70分）1、下列哪种格式只支持 256 种颜色（）A、GIFB、JPEGC、SVGD、BMP正确答案：A2、css标签中background-color是什么意思（）。

A、透明模式B、背景颜色C、前景颜色D、灰色模式正确答案：B3、（）也是产品界面布局图，是产品较清晰的骨架。

A、产品线框图B、产品布局图C、产品骨架图D、产品信息图正确答案：A4、AE中的动画设置，是以 () 作为基本单位进行操作的。

A、图层B、面板C、像素D、素材正确答案：A5、下面软件中，哪个是目前行业内最常用的专业动效设计工具（）。

A、Power PointB、KeynoteC、After EffectsD、Animate正确答案：C6、Jakob Nielsen提出了将（）定义为可学习性. 效率. 可记忆性. 错误. 满意度五个指标。

A、程序性框架B、逻辑性框架C、适用性框架D、可用性框架正确答案：D7、动效参数文档是一种把动效参数（）的文档，它是动效设计师和前端开发人员沟通的重要工具。

A、数据化B、量化C、信息化D、可视化正确答案：B8、在Photoshop中，渐变工具有 () 种渐变形式。

A、2种B、5种C、3种D、4种正确答案：B9、母版指的是原型中一些（）出现的元素。

A、最少B、重复C、不能D、最多正确答案：B10、在Axure RP8中，同一个项目中可能会有（）母版。

A、3个B、8个C、多个D、1个正确答案：C11、AARRR模式不包括以下哪点 () 。

A、提高活跃度B、提高留存率C、提高转化率D、获取用户正确答案：C12、下面内容中可以制作成为母版的是（）。

A、宝贝图B、详情页C、广告D、导航正确答案：D13、显示定界框选项是哪个工具栏中的功能?A、画笔工具B、套索工具C、路径选择工具D、选框工具正确答案：C14、在制作网页时，如果文件中有大面积相同的颜色，最好存储为（）格式。

交互练习题一、基础概念理解1. 请简述交互设计的定义及其重要性。

2. 交互设计中有哪些主要原则？4. 描述交互设计中的五个基本元素。

5. 请列举三种常见的交互设计工具及其特点。

二、用户研究6. 请列举至少三种用户研究方法，并简要说明其应用场景。

7. 如何确定目标用户群体？8. 用户体验地图是什么？请简述其制作步骤。

9. 请简述用户访谈的基本流程。

10. 如何从用户反馈中提取有价值的信息？三、界面设计11. 请列举三种界面布局类型，并说明其适用场景。

12. 如何选择合适的颜色搭配？13. 请简述图标设计的要点。

14. 请列举三种常见的导航模式，并说明其优缺点。

15. 如何设计易读的文本？四、交互逻辑设计16. 请简述交互逻辑设计的基本原则。

17. 如何设计表单输入？18. 请列举三种常见的交互动效，并说明其应用场景。

19. 如何优化页面加载速度？20. 请简述响应式设计的基本概念。

五、交互原型设计21. 请简述原型设计的步骤。

22. 请列举三种原型设计工具，并简要说明其特点。

23. 如何评估原型的可用性？24. 请简述如何利用原型进行用户测试。

25. 如何根据用户反馈优化原型？六、交互实施与优化26. 请简述前端开发中的交互实现方法。

27. 如何进行跨浏览器兼容性测试？28. 请列举三种性能优化方法。

29. 如何利用数据分析优化交互设计？30. 请简述交互设计在项目迭代中的角色。

七、案例分析八、交互设计趋势与创新36. 请简述当前交互设计领域的热门趋势。

38. 请描述虚拟现实（VR）和增强现实（AR）在交互设计中的应用。

39. 请阐述语音交互设计的关键要素。

40. 请讨论物联网设备在交互设计中的挑战与机遇。

九、交互设计项目管理41. 请简述交互设计项目管理的流程。

42. 如何制定有效的交互设计项目计划？43. 请列举交互设计项目中常见的风险及应对策略。

44. 如何确保交互设计项目团队成员的沟通与协作？45. 请简述如何进行交互设计项目的质量控制。

1+x界面设计考试题及答案1、如果要连续向After Effects 中导入多个素材，应该选择下列哪个命令A、导入/文件夹B、 Project 窗口中双击C、导入/多个文件D、导入/文件答案：C2、网站中的导航都固定在特定的位置上。

（）A、正确B、错误答案：B3、人的短时记忆数量约为几个单位？A、 5B、 3C、 7D、 6答案：C4、连接用户研究与设计的有效工具是什么？（）A、人物画像B、计算机C、设计D、交互答案：A5、进入页面动效最常见的形式就是Logo图标动画。

（）A、正确B、错误答案：A6、网页最常见的加载动效是（）。

A、进度条B、图形旋转C、颜色变换D、以上都不对答案：A7、下面选项中，哪一条不是界面元素动效的原理原则（）。

A、智能交互B、自然流畅C、视觉连续D、速度适宜答案：A8、Photoshop中HSB模式中H，S，B分别代表色相，饱和度和明度。

（）A、正确B、错误答案：A9、等待和加载动效中，最常见的表现形式是进度条。

（）A、正确B、错误答案：A10、用户研究的目的是为什么？A、确定用户画像B、了解产品C、构建视觉D、展示产品答案：A11、以下哪个软件不能做交互？A、 AｘｕｒｅB、ＸDC、墨刀D、 AE答案：D12、设计步骤的五大步骤的正确排列顺序？（）A、定义-设想-共情-原型-测试B、共情-定义-设想-原型-测试C、定义-设想-共情-原型-测试D、定义-设想-共情-测试-原型答案：B13、对于互联网产品来说，通过（）有助于提升点击转化率，优化获客成本。

A、产品原型B、表单组件C、 A/B测试D、 KPI答案：C14、产品的设计规范基础组件包括按钮、加载、导航、单行文本框、多行文本框、搜索框、下拉框、段落文本等。

（）A、正确B、错误答案：B15、网页设计时，为了布局方便，我们通常会将内容区域用（）进行划分。

A、矩形工具B、标尺C、栅格D、参考线答案：C16、（）中做动效必须要用的模块是时间轴。

用户体验旅程图用户交互设计学堂(Yumei) · 2015-05-11 19:37一、写在前面今天Yumei将会总结用户体验旅程图，本着短小精悍易阅读的原则，分成三部分来写，这样也能写的更细致。

Yumei认为在需求调研过程中有两个重要的产出，用户角色和用户旅程，而用户体验旅程图将这两者进行了很好地结合，能用更好地方式进行产出，方便团队内部交流，所以在此总结，欢迎交流。

需要强调在前面的是，用户体验旅程图在最终汇报的时候效果虽好，这是一种很好地呈现方式！但绘制却很浪费时间，如果你是小团队机动灵活，那就可以学习思路，外在的表现只是形式，项目快速推进才是正事，不要为了用方法而用方法。

二、用户体验旅程图1、为什么做用户体验旅程图？我们做用户需求调研，最重要的是经过需求筛选与排序之后，把用户的需求转化成功能，功能点转化为架构，进一步体现在任务流程和页面呈现中去。

需求到功能这是多么直接又多么有效率的方式，为什么又凭空出了用户角色？刚开始对于这个乱入的方法我是拒绝的。

（前期的方法实践总是希望立马看到成果，初学者很难避免的问题）。

做了几个“项目”之后，感受到了这个方法的好，有几点直接的感悟现在跟大家分享：1）呈现方式完整，方便交流。

将细分的用户的用户角色和用户旅程在一张大纸上进行展示。

直观的了解细分人群的特点，但是因为呈现方向相对模块化，所以具体呈现内容还是要先“动脑子”。

2）有效避免“把自己意淫成用户”。

这种情况的发生，做设计没有修炼到一定层次，就总是容易拿自己置换，但是设计师毕竟不是用户。

3）有助于快速推进项目，保持团队和睦。

前期做用户体验旅程图会浪费一些时间，但是在后期功能点讨论和页面呈现的时候有助于快速决定，用户体验旅程图就贴在墙上，所有的“我觉得”都可以用“***真的需要这个功能吗？”来解决。

4）够客观，旅程阶段清晰直观。

这一点和第二点还是有差别的，体验地图呈现了可以有的痛点和机会点，有助于组内讨论沿着一条正确地线前行。

19 怎样绘制用户体验的地图这一节讲用户体验地图和用户故事。

用户体验地图就是通过画一张图，用一种讲故事的方式，从一个特定用户的角度出发，记录下他与产品或者服务进行接触、进入、互动的完整过程。

开始做产品经理的人容易犯的错误，就是用管理员的视角来规划产品。

我经常看到这种全局型的产品设计图，复杂、全面、没重点，这肯定是错的。

我一般会告诉这种产品经理，请按照一个用户使用的路径，把这个产品设计图再画一遍。

从一开始用户怎么进入，到每一步怎么体验，最后怎么离开。

这就是我们在《两套经典的用户画像》那节课里讲的，“第一只羊”怎么能够在你的“草地”上活下来，而且玩得很开心的过程。

画出“第一只羊”从开始到结束的完整体验，这就是用户体验地图。

怎么画用户体验地图1. 一个画像完整的人物角色：需要对“第一只羊”有完整地了解。

2. 清晰描述用户的目标和预期：他为什么来到你的草地上？他要什么？比如，用户买钻孔机，但是他的目标不是拥有钻孔机，而是需要在墙上打个洞。

比如吃饭，用户目标是吃饱？还是想要营造气氛？还是想获得一次交流机会？搞清楚用户的目标和预期到底是什么。

3. 服务触点：用户从接触你的服务，到实现他的目标之间，会跟你在产品上有哪些接触，你需要在这些地方服务用户。

4. 用户使用路径：使用路径与服务触点的关系是什么？用户在宜家逛的过程是使用路径；在宜家里向工作人员咨询，到盒子前拿免费的资料是服务触点。

5. 用户情绪曲线：场景是要触发情绪的。

在整个过程中，用户的情绪是如何变化的？把这个用户从接触你的服务开始，到达成自己的目标为止（或者放弃为止），整个流程画一个坐标图，横轴是用户的使用路径与触点；纵轴是用户情绪。

这样你就可以得到一条用户在与你的服务互动过程中的情绪波动曲线了。

为什么要画用户体验地图为了避免管理员视角，很多初级产品经理都是用管理员视角在设计产品，有什么产品罗列什么，而不是考虑用户要什么。

你要通过用户体验地图，让自己以用户视角来思考，用户能不能一步一步实现目标，这个过程是困难还是容易？比如，我的一个朋友闫辉做了一个中医养生类的Keep，叫一体。

电子地图开发与应用操作手册第1章产品概述与功能介绍 (4)1.1 电子地图简介 (4)1.2 产品功能特点 (4)1.3 系统要求与兼容性 (4)第2章电子地图界面操作 (5)2.1 地图界面布局 (5)2.2 地图缩放与平移 (5)2.2.1 缩放操作 (5)2.2.2 平移操作 (5)2.3 地图类型切换 (6)2.4 地图标注与信息查询 (6)2.4.1 地图标注 (6)2.4.2 信息查询 (6)第3章地图数据展示 (6)3.1 基础地图数据 (6)3.1.1 数据来源 (6)3.1.2 数据展示 (6)3.2 矢量地图数据 (7)3.2.1 数据来源 (7)3.2.2 数据展示 (7)3.3 卫星图像与地形图 (7)3.3.1 卫星图像 (7)3.3.2 地形图 (7)3.4 实时交通信息展示 (7)3.4.1 数据来源 (7)3.4.2 数据展示 (7)3.4.3 更新频率 (7)第4章地图搜索与定位 (7)4.1 关键词搜索 (7)4.1.1 打开电子地图应用，进入搜索界面。

(8)4.1.2 在搜索框中输入关键词，例如：“餐厅”、“医院”、“学校”等。

(8)4.1.3 搜索结果将根据关键词自动展示在地图上，并以列表形式呈现。

(8)4.1.4 用户可以搜索结果查看详细信息，如地址、电话、营业时间等。

(8)4.2 分类搜索 (8)4.2.1 在搜索界面选择分类标签，如“美食”、“购物”、“休闲娱乐”等。

(8)4.2.2 地图将自动显示该类别下的所有地点。

(8)4.2.3 用户可以进一步筛选地点，如按距离、评分、价格等排序。

(8)4.2.4 地点名称，查看详细信息。

(8)4.3 历史搜索记录 (8)4.3.1 在搜索界面“历史搜索”标签。

(8)4.3.2 查看并选择之前搜索过的关键词或地点。

(8)4.3.3 历史记录，即可快速定位至该地点。

(8)4.4 实时定位与导航 (8)4.4.1 打开地图应用，底部定位按钮，获取当前位置信息。