《交互设计》课件-4 交互设计案例分析

同学们，这节课基于交互设计岗位工作流程，我们一起来欣赏两个交互设计案例。交互设计项目一

交互设计概述·案例分析CATALOGUE目录高德地图时间戳

我们将主要探讨高德地图和时间戳这两款app，01高德地图

首先一起来欣赏高德地图app的设计是怎样基于工作流程完成的。开发app应用程序的工作流程需求分析原型设计视觉设计开发测试用户反馈首先让我们一起回忆一下开发一款app应用程序有哪些工作流程呢？包含以上5个步骤，对产品进行需求分析，根据需求分析进行原型设计，再在原型设计的基础上完成丰富的视觉设计，接着交由开发测试人员经过一系列的开发测试，最后收集用户的使用反馈，经过反复的几轮修改直至产品上线或者被淘汰。

高德是中国领先的数字地图内容、导航和位置服务解决方案提供商。数量庞大的位置信息和数据是高德地图的核心价值，同时高德还拥有导航和地图市场领先的市场份额。高德图的核心功能是定位导航，过去用户想要去哪里只需打开导航，参考我们提供的路线导航行驶即可，但用户在查找位置时也会因为选择什么样的交通工具，选择哪个方向而显得比较茫然，同时也导致导航工具好的功能排不上用场。高德凭借自身的技术优势和多年的地圆经验优势，利用导航和地图可以将多维度的数据和关系结合起来，给人们带来更多创新的体验。产品介绍好，让我们一起看看关于高德地图的产品介绍，高德地图是中国领先的数字地图内容、导航和位置服务解决方案提供商。它拥有庞大的位置信息和数据，在导航和地图市场占据重要份额。用户需求分析基本需求：定位、地点查找、路线查询、路径导航、路径规划等交通出行必备需求。期待型需求：生活服务设施推荐、打车或者共享单车的接入、违章信息查询等生活服务需求。兴奋型需求：智能导游、LBS+社交、室内定位等。高德地图：极大化的满足用户的基本需求，在此基础上通过“附近”等生活服务功能提升用户的体验。根据Kano模型将用户需求分为三类：在用户需求阶段，需要我们利用问卷调查、竞品分析、用户画像等方法归纳总结出用户体验需求，如高德地图通过Kano模型将用户需求分为三类，包含基本需求、期待性需求、兴奋型需求总结该用户群体的体验性需求。信息架构图根据需求分析，产品经理会整理出高德地图app的信息架构图，我们能够看到清晰明确的信息架构图能够在界面层面清楚的表达产品的功能模块和整体的逻辑路径，有利于产品设计者从宏观角度审视。原型设计高德在产品的结构上很符合当下主流的设计，底部标签栏划分了四大板块，在用户切换软件时降低了学习成本;首页推拉式标签栏在保证功能的同时又保证整体简洁的空间;附近页对一些生活功能进行了整合，分担了用户在首页的查找时间;消息和我的页面为基础的社交和个人信息页，可查看出行、车辆及订单信息等。根据用户需求，高德地图在原图设计阶段，产品结构设计上，高德地图遵循简洁易用的原则，底部四大板块清晰划分，让用户能够轻松切换不同功能模块，降低了学习成本。首页的推拉式标签栏独具匠心，既保证了功能的完整性，又营造出简洁大气的视觉效果。附近页整合各类生活功能，有效分担了首页的信息压力，提升了用户查找信息的效率。消息和我的页面则为用户提供了便捷的社交互动和个人信息管理渠道。视觉设计-色彩分析在视觉风格方面，高德在页面的色彩上偏于蓝色和绿色，蓝色多用于界面，绿色多用于导航，其中还有少量的红和黄，用于提醒事件(拥堵等);卡片风格对页面进行分割，简洁干练，视觉上也有层次感。高德大部分为面性icon，颜色多样，比较活跃，设计更加醒目多用于金刚区;小部分的线性icon比较低调，颜色为深蓝或黑色，用于点缀使用。视觉设计-功能分析首页采用类似于抽屉式的推拉交互，使地图与功能有了一个空间的层次感，有助于用户理解产品，提升了用户体验。添加了一些情感化设计，偶尔给用户带来发现的惊喜。用户关注的公交路线，能实时显示，减化用户等车过程中操作流程。常去地点记录及路程拥堵情况简化条形图，提升操作效率。产品功能分析打车页顶部会有价格区间选择，优化了操作流程;也可以一口价或者选择某平台，防止司机绕路堵车等增加费用。驾车页提供了多种路线，每个路线会标有时间、公里及红路灯，还会预测出未来的通行时间，以及AR导航，可视化道路指引，降低错道几率，提高用户体验。公交页也会提供多种方案，并提供时间、车辆、站数及金额，选择路线后会提供步行导航至公交站，公交不仅可以实时查看位置信息，也可以到站提醒，减低用户在路程以及等车中的焦虑，提高产品使用效率。附近页可以满足用户的吃、住、行、游、生活、玩和购，可以说高德几乎兼并了美团、滴滴、大众点评、携程等软件的功能，体现出了用户期待型需求(Kano模型)，让用户一个软件“通吃”，并且融入的不错，比如去哪里玩或住酒店吃饭等，会显示价格及评价，搜索停车场会在地图显示附近所有停车场及停车费用等，免去了其他软件的学习成本，提高用户使用效率，增加产品粘性。视觉设计-功能分析我的页面高德运用卡片的风格对功能区进行了划分，每片对应一类内容，用户可以直观找到所需功能;高德在此页可以查看你的足迹以及出行的记录，极大程度的增加了用户粘度，满足用户的成就感;有车用户可以添加车子，方便查看违章、交罚单、加油、保养、洗车等，用户在平台内付款或预约，到店享受相对应的服务，让用户操作起来更加方便便捷视觉设计-功能分析实时天气可提醒用户出门时及时带伞及路面情况，提前做好准备，情感化设计，给用户发现的惊喜，提升用户满意度。景区旅游地图、筛选、导览图语音导游、热力图，带你畅游景区。给每一位用户带来的是最全方位的出行服务体验。此外，高德地图还设计了自动避开限行区域的功能，驾车出行，用户可以添加车牌，在规划导航路线时会自动避开限行区域，避免用户因限行或限号而扣分，简化用户操作流程，提升效率。在道路情况聊天室页面用户可以了解路线堵车的原因以及处理情况，缓解堵车带来的负面情绪。视觉设计-功能分析高德在地图上不仅有基础的卫星、公交和标准的类型，也有比较偏向于特殊功能的地图，天气地图下会显示出当天的天气变化;出游地图可以查看用户导航次数进行排名;充电站地图会显示附近所有充电桩，并且会显示空余位置及价格和停车费;关怀地图则会显示一些公共区域。这类地图大大提升了用户体验，满足了用户兴奋性需求，也就是kano模型，同时也提高了操作效率。视觉设计-功能分析用户可选择自己喜欢主播或明星的语音包，或者录制自己的语音，让导航语音不在机械化，增加旅行趣味性,不仅能提高体验，也能消除驾车的负面情绪。语音包功能更是打破了传统导航语音的单调，用户可根据个人喜好选择明星或主播语音，甚至录制自己的语音，为出行增添了一份独特的乐趣。视觉设计-功能分析

最后阶段交由开发测试人员进行开发测试直至上线。开发测试用户反馈开发测试经过以上流程，最终我们将app交由开发测试人员进行开发测试直至上线，然后获取用户反馈总结出行方式的导航丰富高德地图致力于成为用户“出行”的首选APP。从各种交通方式的导航、延伸到出行过程中的具体问题的解决，如限行、电子眼的提醒、打车、公交乘车码等，丰富用户出行场景。兼具住宿、美食生活需求

具备酒店、美食等附近地点的查找和推荐，进一步解决用户只有需求无明确地点场景下的出行问题。满足各年龄段不同用户的不同出行需求。总的来说，高德地图凭借丰富的功能和良好的用户体验，成为用户活跃量最大的地图app之一。建议智能规划推荐充电桩随着以后越来越多的新能源汽车，可以结合充电桩位置、距离远近，为用户智能规划、推荐，从而减少用户的操作步骤和决策成本。普通出行和旅游用户体验普通出行方式、旅游的用户，高德则需要，在文案策划、用户细节处做文章，提高更细微的用户体验;以此来提防滴滴等企业的跨软件分羹，保护自己的私有用户群数量。专属IP形象

可以打造自己的专属IP形象，扩大影响力，吸引年轻群体。为了进一步发展，建议结合新能源汽车趋势，智能规划推荐充电桩；在文案策划和用户细节处优化，提升普通出行和旅游用户体验；打造专属IP形象，吸引年轻群体，提防跨软件竞争，保护用户群。时间戳接下来，我们一起来看一看第二个案例，时间戳02时间戳app旨在帮助用户抓住时间、管理时间和驾驭时间，让时间有迹可循，用户可以记录思考、寻求帮助、管理资源并创建灵感资源库。产品介绍时间戳便是以时间为引导线，为大家抓住时间、管理时间和更好的驾驭时间，让你的时间有迹可循。在这里你可以更好的记录自己的思考和寻求帮助，也可以管理自己的资源形成时间轨迹，还可以创建私有化的灵感资源库。只有不负光阴，光阴才不会辜负你我。下面我们从设计内容的构思和规划来赏析时间戳app。信息结构的设计上，时间戳从发现问题到解决问题，设置了与之对应的功能。功能结构图展示了时间戳app的部分示意，包括已登录和未登录状态下的不同模块，如首页的Banner/金刚区、文件管理、发布、发现、我的等模块，每个模块有相应的功能详情。交互原型设计交互原型设计上，首页根据登录状态呈现不同内容，方便用户操作。例如，未登录时展示权益包、课程等吸引用户注册登录；登录后用户可进入文件管理，方便管理各类文件，还可在发现模块探索时空隧道、时间裂缝等功能。品牌设计启动图标是一个带有微笑表情的卡通角色，角色头顶有一个小球状物体，背景为浅蓝色，整体设计风格清新、简洁，色彩柔和，给人一种愉快且富有创意的感觉。并根据启动图标设计了一系列生动、可爱的表情。色彩设计在色彩搭配上，背景色采用一种非常浅的蓝色，接近白色，它给人一种干净、简洁和专业的感觉，能够提供一个柔和的视觉基础，不会对其他颜色造成干扰。品牌色选用明亮的蓝色和青绿色，具有高饱和度和亮度，这种颜色非常醒目，能够立即吸引注意力，适合用于品牌标识和重要的交互元素，传达出活力和专业感。字体色选用明度不同的深蓝色，使文字在不同的背景上都能够具有良好的可读性，同时又不会过于突出，保持了视觉上的平衡。辅助色和图标配色选用较高的饱和度和亮度的颜色，用于图标、按钮或其他需要突出显示的元素，它们能够为界面增添活力和色彩，同时保持整体视觉风格的一致性。界面设计登录页设计保留用户头像位置，用户登录过将以头像作为记录保存，新用户以IP形象作为默认头像设计。相较于过于生硬直接的形式来说不仅可以突出品牌感，也能带来更为情感化的感官体验。根据用户输入的习惯重新设计了输入法键盘，分为纯数字键盘和综合输入键盘，以此提高用户的输入体验。登录页的头像保留设计独具匠心，已登录用户的头像显示增强了归属感，新用户的IP形象默认头像则传递出品牌的亲和力。重新设计的输入法键盘根据用户输入习惯进行分类，提高了输入效率，同时也体现了对用户体验的细致关注。界面设计时间戳首页根据登录/未登录设计了两种不同的状态，带给用户定制化的体验；设计风格以轻质感呈现年轻化感官体验，运用了玻璃质感和粘土拟态风格等趋势；界面布局以卡片式设计为主，强化信息归纳感和层级感。首页根据登录状态的定制化设计，满足了用户不同阶段的需求。轻质感的设计风格，融入玻璃质感和粘土拟态元素，营造出年轻、时尚的视觉氛围。界面设计卡片式布局的广泛应用使信息呈现更加清晰有序，强化了信息的归纳感和层级感，方便用户快速获取关键信息。界面设计文件模块方便用户管理图片、视频、音频、文档、PDF等；解决跨平台采集与管理的问题，带来一站式的管理体验；私域化和云端化的文件管理满足不同用户的操作需求。文件模块的设计充分考虑了用户对不同类型文件的管理需求，无论是图片、视频还是文档，都能在一个平台上实现高效管理。跨平台采集和管理功能打破了设备限制，为用户提供了极大的便利。私域化和云端化的存储方式确保了文件的安全性和可访问性，满足了不同用户的多样化操作需求。界面设计文件操作流程清晰明了，方便用户使用。界面设计在时间裂缝里面你可以探索未知，找到想要的答案，也可以进入时空隧道，找到感兴趣的组织；这是一个发现未知和探索迷茫的空间，找到时间的归属。时间裂缝和时空隧道是时间戳APP的社交互动核心区域。在时间裂缝里面你可以探索未知，找到想要的答案，时空隧道则通过打造不同主题的传送门，如摄影打卡隧道、求职隧道等，帮助用户找到志同道合的群体，拓展社交圈子，共同探索兴趣爱好。界面设计以头像为焦点发散背景图形设计，强化个人中心顶部区域视觉感；功能图标以品牌色点缀，突出品牌感和图标表达的设计感；强化时间裂缝模块，方便用户及时获取消息反馈。我的页面以头像为视觉焦点，通过背景图形的发散设计吸引用户注意力，强化了顶部区域的视觉效果。功能图标的品牌色点缀不仅突出了品牌标识，还提升了图标的识别度和设计感。时间裂缝模块的强化设计使用户能够及时获取问题的解答和反馈，增强了用户与平台之间的互动性。界面设计积分专区结合IP形象强化情感化设计，也能增强块的视觉感；自