《H5页面与交互动画设计》课件——H5页面的交互设计.pptxVIP

;学习要点：不同于传统互联网产品“有用—能用—好用”的评价体系，融媒体产品用

户从一开始，就对产品体验非常重视。也就是说相比其他类型的互联网产品，融媒体产品用户会更多地在无明显任务或目的时去体验产品。融媒体产品的设计初衷就是通过为用户创造或独特、或惊喜、或快乐的体验历程，吸引用户的注意力与参与性，通过用户社交分享从而形成传播裂变，因此融媒体产品的用户体验成为产品设计的重要评价标准。

“用户体验”这个词最早被广泛认知是在20世纪90年代中期，由设计师唐纳德·诺

曼（DonaldNorman）提出。它被定义为“一个良好的产品能同时增强心灵和思想的感受，使用户拥有愉悦的感觉去欣赏、使用和拥有它”。

对融媒体产品而言，要加强用户体验的满足感，不仅要遵循通用的用户体验原则如有用性、效率性、易学性、容错性、吸引力等，更需要在交互、动效、动画、音效等细节设计上，精益求精、独具匠心，才能在纷繁杂乱的产品海洋中脱颖而出，打动用户。;20世纪80年代中期，比尔·莫格里奇（BillMoggridge）和比尔·韦普朗克（Bill

Verplank）着手设计了第一台笔记本电脑GRiDCompass。他们为自己所做的工作创造了“交互设计”一词。

百度百科将之解释为“交互设计是定义设计人造系统的行为的设计领域，它定义了两个或多个互动的个体之间交流的内容和结构，使之互相配合，共同达成某种目的。”通过交互，用户不仅可以获得相关资讯、信息或服务，用户与用户之间或用户与产品之间也能相互交流与互动，从而碰撞出更多的创意、思想和需求等。交互设计在数字内容产品中不仅提升了效率与易用性，更为用户提供了快乐和有趣。交互设计与UI设计的区别，如表所示;在一个产品启动后，交互设计师首先要协同产品经理确定目标，包括产品目标、设计

目标和体验目标。产品目标通常指通过需求或者功能的设计，达到某些业务的目的。设计

目标是在产品目标的基础上，按照用户现阶段的经历，能够接受的产品形式。体验目标指

在设计目标的基础上，用户通过使用该产品，所获得的感受总和。

交互设计师可通过???户体验地图、用户画像、用户调研（线上、线下、电话调研等），

去了解用户真正需要的是什么。

通过用户调研，需要解决以下几个问题，从而得出设计策略。

●你的目标用户是谁？你的设计是为谁而设计的？

●你可以为用户解决什么问题？

●有哪些策略可以帮用户解决这些问题？;互联网产品的设计不是单纯的造物，需要更多地关心人与产品、系统、环境的关系。

通俗地说交互设计师的工作就是处理现实生活中，人与外界（如手机、PC、平板电脑、

智能手表、VR眼镜、汽车智能显示屏、无人车、自助快递机等）在一定场景下操作而发

生的连锁反应，因此交互设计师必须全面了解目标用户。

每个产品面对的目标用户都是不一样的，设计师在设计的时候需要思考产品（APP、

小程序、H5、PC的Web页面等）针对哪些用户，然后分析目标用户，了解他们使用产品的习惯，站在他们的角度去思考。当有了这样的思维后，接下来就是要解决任何一个用户在面对一款产品时的3个问题，如图所示。;要解决上面的问题，一般会通过绘制交互稿来完成流程。交互稿的绘制会经历草稿、

初稿、成稿三个阶段，软件可以选择Axure、Sketch、XD、墨刀、Protopie等。一般而言Sketch/Axure使用得最多，两者各有优势。Axure版本更新比较快，支持多种快捷键操作、样式编辑丰富、页面布局也比较简洁美观，支持高保真原型制作，网上也有很多项目的原型分享、组件库分享，对于项目的原型制作效率提高很有帮助。而Sketch插件多，软件运行快，可以直接与其他动效软件协同制作高保真原型，其缺点是只支持Mac。XD作为Adobe家族软件，是原型软件界一颗冉冉新星，原型功能越来越完善，线上也越来越多组件和插件资源可用，相信未来也会成为像PS、AI一样强大的工具。界面制作与PS、AI类似，源文件可直接导入使用。;一、H5中的交互设计

H5作为移动端高效、即时、传播广的融媒体类产品，交互设计时要注意符合移动端

的交互原则。首先要降低阅读门槛，减少认知成本，同时也要在设计上注意简化页面层

级，使H5结构扁平化。

结构扁平化是交互设计在移动端上常用的手段，任务层级越浅的H5，反而越能引导用户看到更多内容。H5页面层级减少，交互步骤也会减少，无疑会让用户的使用效率提高。移动端由于设备本身的限制，没有足够的空间来展示路径。如果没有清晰的层级关系，或者需要进入层级更深的页面才能找到用户想要的信息，会让用户迷失方向，其解决措施有以