UI交互设计案例教程（第2版）全套教学课件

UIUI交互设计案例教程UIInteractionDesignCaseTutorialPLAY全套可编辑PPT课件01UI交互设计基础02UI交互设计规范和原则03使用AxureRP实现线框原型设计04用AfterEffects设计和实现UI交互动效05常见UI交互动效设计与实现（上）06常见UI交互动效设计与实现（下）UI目录01UI交互设计基础

随着互联网的发展，“UI交互设计”已在国内悄然走热。本章首先介绍UI设计与UI交互设计的基础知识，然后介绍UI交互设计的基本流程，最后介绍移动端App与网站交互设计的差异，便于学习者快速了解UI交互设计，为今后的设计之路打下坚实的基础。单元导读★了解UI设计、交互设计、UI交互设计的区别★了解UI交互设计的基本概念和常用工具★熟悉UI交互设计的工作要求与基本流程★了解移动端App和网站交互设计的区别知识目标★学会思考、规划未来的职业发展方向，树立正确的人生目标★培养自身细心、耐心、精益求精的学习和工作态度

思政目标★掌握交互设计说明文档的书写

技能目标学习目标1.1UI设计概述1.1.1初识UI设计UI

是userinterface（用户界面）的简称，UI设计又称为“用户界面设计”。从字面上看，它包括用户和界面两部分，但实际上还包括用户与界面之间的交互关系，

因此UI设计是指用户研究、交互设计、界面设计三方面的整体设计。移动端AppUI设计

网站UI设计网站UI设计软件UI设计移动端AppUI设计游戏UI设计UI1.1UI设计概述1.1.2UI设计相关岗位的工作职责

UI设计细分为用户研究、产品经理、UI交互设计师、UI视觉设计师、前端等岗位，他们之间的关系紧密，各司其职。1.1UI设计概述1.1.2UI设计相关岗位的工作职责1．用户研究（UR）（1）研究分析目标用户的需求、认知心理、操作行为等特性，（2）明确产品的概念和细节，使产品设计更符合用户的习惯和期待。2．产品经理（PM）（1）确定产品定位；（2）确定产品的规划与设计；（3）推进、跟踪产品的开发和上线；（4）对产品进行升级和迭代，负责产品生命周期。3．UI交互设计师（1）画流程图、线框图和做动效（2）对界面的交互行为进行设计（3）协助产品经理进行产品调研与分析，（4）输出原型图；（5）制定统一的设计规范及标准；（6）输出交互设计说明文档4．UI视觉设计师（1）设计软件产品的外形（2）有良好的沟通能力与创新能力1.2

UI交互设计入门1.2.1交互设计中的“交互”

交互：意为交流与互动，存在于我们的日常活动之中。交互可以是人与人之间的交互，也可以是人与物之间的交互。

交互设计：是对两个或多个个体之间的交互行为进行设计，属于定义、设计人造系统的行为的设计领域。

交互设计目的：注重创建人与产品及服务之间的有意义的关系，是通过对产品的界面和行为进行设计，让产品和它的使用者之间建立一种有机关系。

可用性：是交互设计的重要指标。交互设计不在于设计的交互方式有多么复杂与独特，而在于设计出的产品是可用的、好用的。1.2

UI交互设计入门1.2.1交互设计中的“交互”

网易云音乐助眠解压频道明星哄睡栏目，它根据用户选择的明星声音，将明星美照的全屏效果作为背景图，减少其他信息对用户的干扰，从用户体验角度出发，使用户更快地沉浸到当前的氛围情境下。网易云音乐助眠解压频道明星哄睡栏目1.2

UI交互设计入门1.2.1交互设计中的“交互”

高德地图App界面，当目的地是一个出入口比较复杂的地方时，会显示多个停靠地点，有的地方不能停车，只能下人；有的地方是接人的，可以停靠，用户可根据需要进行选择，非常方便。高德地图App界面1.2

UI交互设计入门1.2.2什么是UI交互设计

UI交互设计，是UI视觉设计与交互设计的结合，是将交互设计的理念运用在UI界面上所形成的新的设计方向。学习UI交互设计的同时还需要了解UI视觉设计与交互设计的知识，虽然三者之间存在不可分割的紧密联系，但它们又都有各自不同的特点。关系图课堂提示

早在2014年，手机上网的使用率就已超过了计算机，且每年都在持续上涨，随着智能机的发展，现在除专业需要电脑外，大部分人都只使用手机解决问题。由于用户使用手机和电脑的目的不同，导致移动端UI交互设计比网站交互设计更轻巧、更通俗易用，也使得移动端UI交互设计成了交互设计的入门级必学方向。因此，本课将以移动端UI交互设计为主，网站UI交互设计为辅进行讲解。1.2

UI交互设计入门1.2.3UI交互设计需要考虑的问题

1．是否遵循用户习惯用户在长期操作、浏览产品界面的过程中，会形成一种特定的习惯。遵循用户习惯会降低成本，提高用户对产品的信任度，但会失去趣味性；提升产品差异化，会给用户独特、深刻的体验，但会有因改动与用户习惯相差太大而失去用户的风险。因此，在实际设计工作中，最好在遵循用户习惯的基础上，在细节上进行创新。例如，用户在浏览界面时一般是从左到右、从上至下；如果界面边上有滚动条，用户就会自然而然地上下滑动界面等。1.2

UI交互设计入门1.2.3UI交互设计需要考虑的问题

2．注意用户群体的文化背景

在交互设计时，不能只考虑产品和公司要表达的内容及所处背景，还要综合考虑主体用户所处的地域、文化背景。

例如，红色在有的国家象征热情，而在有的国家则象征死亡例如，红色在有的国家象征热情，而在有的国家则象征死亡。所以在设计产品时，对用户进行调研是很有必要的。1.2

UI交互设计入门1.2.3UI交互设计需要考虑的问题

在交互设计发展趋于平缓，用户习惯、界面样式基本成形的今天，创新能力显得尤为重要。怎样在不破坏用户习惯和界面美观的情况下找到可以创新的点，并将交互设计案例教程这个点进行改进与完善以达到提高用户留存率的目的，是资深的UI交互设计师必须思考的问题。3．创新能力1.2

UI交互设计入门1.2.3UI交互设计需要考虑的问题

4．交互细节与方式

在进行交互设计时，确定一个方案必然是因为经过了深思熟虑，尝试了各种效果，并经过了深入了解和调研，只有这样才能保证你的设计是经得起推敲的，真正为公司和用户考虑的。不同的表现形式，如菜单栏采用抽屉式还是侧滑式，哪种更能表达问题并且不影响用户观看；某个功能是添加还是去掉；还有交互时采用何种效果，是完成交互就好，还是需要特殊的光效等，这些都是UI交互设计师在设计工作中需要考虑的细节。

1.2

UI交互设计入门1.2.3UI交互设计需要考虑的问题

4．交互细节与方式移动端微信和飞书聊天界面

例如：移动端微信和飞书聊天界面的布局图，在飞书之前，市面上常见的聊天软件都采用左右分布的形式，这样的形式会造成阅读时起点不断转换，影响效率。飞书大胆创新，采用了左对齐的布局方式，通过不同颜色的对话框底色辅助区分对话双方的身份，大大提高了阅读效率，并且在屏幕较大的PC端上这个改变更加明显。这样的布局虽然打破了用户习惯，却意外收获了不错的评价。1.2

UI交互设计入门1.2.4UI交互设计师常用工具1．脑图工具脑图工具可以用来梳理思路，记录头脑风暴，绘制思维导图、流程图和信息架构图，常见的脑图工具有Xmind、MindNode、MindMaster等。用工具来绘制思维导图不仅方便快捷、规整美观，还方便团队观看与分享。1.2

UI交互设计入门1.2.4UI交互设计师常用工具2．产品原型图工具

为了更直观、准确地传达项目设计的方向和流程，设计师需要绘制产品原型图，常用工具有AxureRP、Sketch、AdobeXD、AdobeIllustrator、Photoshop等。

AxureRP是Sketch出现之前最流行、应用最广泛的原型设计软件，它还具有制作可交互原型图的功能，可以快速验证交互动效的效果，是一款较为成熟的软件。

Sketch是一款新兴软件，适合没有美术功底和Photoshop基础的UI交互设计师使用。操作简单、强大的数据库、Symbol复用等可与AxureRP媲美的原因，但它只能在Mac上运行。软件图标1.2

UI交互设计入门1.2.4UI交互设计师常用工具3．交互动效原型工具

常用的交互动效制作软件有AfterEffects、Principle、Framer、Keynote等。

AfterEffects是一款影视后期制作软件，在制作交互动效和动画方面比较专业，本课将会着重讲解使用它制作交互动效的方法。

Principle可以直接导入Sketch文件进行交互动效原型设计，主要特点是易用和高效，非常适合初学者学习。此软件为Mac系统专用。

Framer功能强大，需要会写代码，所以不太适合刚入行的UI交互设计师使用。

在设计中，使用工具只起到了辅助作用，真正重要的还是设计师的想法。只有多看、多发现、多思考才能设计出富有创意的作品。软件图标1.2

UI交互设计入门1.2.5UI交互设计师常用网站1．国内常用网站

优秀设计作品网站有花瓣（/）和站酷（/）。花瓣网和站酷网首页界面1.2

UI交互设计入门1.2.5UI交互设计师常用网站UI中国（/）。

该网站专门发布与UI设计相关的作品，视觉设计、交互设计都有涉及网站功能丰富，通过它可以进行技术交流，参加设计竞赛和有奖征集设计作品活动，学习UI设计教程等。1．国内常用网站1.2

UI交互设计入门1.2.5UI交互设计师常用网站Awwwards网站

该网站每天都会票选出一个最佳设计，推荐的作品无论是从交互、视觉、创意哪方面来说都是行业顶尖的，通过该网站可以学习国内外优秀设计的思路和近期的设计趋势。

2．国外常用网站1.2

UI交互设计入门1.2.5UI交互设计师常用网站NounProject网站

该网站是一个免费的高质量的图标素材网，图标样式丰富，涉及内容广泛，而且该网站的图标支持PPT、PNG等多种格式，无须担心兼容问题。

2．国外常用网站1.2

UI交互设计入门1.2.6UI交互设计常用术语

交互设计是在1984年的一次设计会议上由比尔·摩格理吉提出的，迄今为止已在国外发展了三十几年，而国内的UI设计仅发展了十几年，甚至于近几年才对UI交互设计有了真正的重视和了解。

目前，国外的UI交互设计已经有了一套较为完整的规范，为便于学习和交流，加深对该领域的理解与认知，下面列举了一些有关UI交互设计的常用术语：1.2

UI交互设计入门1.2.7UI交互设计自查表

一般在产品设计基本完成后，为避免出错，还需要通过自查来确认有没有缺页、漏页等问题。为了更直观、更方便、更准确地进行检查，一般都会列一个UI交互设计自查表该表只是为刚入门的UI交互设计师做一个大致参考，具体项目还需要具体分析。1.2

UI交互设计入门1.2.7UI交互设计自查表

UI交互设计自查表涵盖广泛，从前期分析到后期测评等都有涉及，可以较为完整地分析整个交互设计流程。1.3

UI交互设计的基本流程

UI交互设计师的工作不仅仅是绘制原型图，还要参与前期的项目讨论和后期的测试验收等一系列环节。UI交互设计的基本流程包括需求分析、用户行为流程设计、产品信息架构设计、产品原型设计、编写交互设计说明文档、产品测评。★提示

UI交互设计的基本流程，在具体工作中可以根据项目要求进行适当调整，要确保每一步都是以用户和项目为前提进行的，不可主观臆断、生搬硬套。1.3UI交互设计的基本流程1.3.1需求分析1．用户需求1）构建用户角色

（1）确定目标用户

（2）构建用户角色2）熟悉用户使用场景：模拟构建一个代表性场景3）确定用户需求

（1）辨别用户需求的可信度

（2）客观对待用户需求1.3UI交互设计的基本流程1.3.1需求分析2．从用户需求到产品需求

产品需求来源于用户需求，但用户需求并不等于产品需求。产品需求是在提炼用户真实需要与动机，并理解业务、技术和市场的需求与限制的基础上，对产品进行分析，为用户需求提供产品设计方案，从而进行产品规划。

在确定产品需求时，需要考虑以下五个核心问题。（1）满足谁的需要？（2）他们有什么需要？（3）我们提供的是否能满足需要？（4）目标需要与产品的独特性如何结合？（5）如何有效地实现这些需要？例如，当用户诉求为需要拥有一匹快马时，福特没有去马场选马配种，而是转而制造了汽车以满足用户需求，发展至今，汽车已成为当今人们的主要出行方式，为人们生活带来了很大便利。由此可以看出，产品需求就是根据用户需求来描述应该设计什么样的产品。1.3UI交互设计的基本流程1.3.1需求分析3．明确设计目标

设计目标就是从用户和产品的角度出发，对用户需求与产品需求进行整合归纳，得出对产品的期望效果。设计目标指引着整个设计过程，为设计师指明方向。

通常在确立设计目标时，需要考虑以下两个问题。

（1）动机：可以满足用户或企业的什么需求，如提高盈利，扩大影响力等。

（2）障碍：用户在使用产品过程中可能会遇到的障碍。1.3UI交互设计的基本流程1.3.2用户行为流程设计

1．用户行为分析

用户行为是指用户与特定产品交互的方式。而用户行为分析就是通过对用户使用产品过程中的数据进行收集、整理、统计和分析，获取用户使用产品的规律，为流程设计和后期产品的发展、优化提供数据支撑。

用户行为分析的数据依据主要有：用户的下载量、使用频率、访问量；用户使用产品时的交互操作和停顿（其中有点击、手指滑动、鼠标滚动、在当前页面停留的时间等）；同类行为逻辑的产品使用情况。通过这些数据，可以分析出用户的基本信息、访问习惯、喜欢的产品和功能等。2．用户行为流程设计

流程是一系列连续有规律的活动的组合，流程设计则是对活动的具体顺序和步骤的安排，是对各交互点的梳理，是决定产品可用、易用的重要因素。

流程设计是依附于产品解决任务的过程而存在的，它可以加强设计师对产品实现过程和用户行为的理解，有利于开发人员把握产品的整体流程。1.3UI交互设计的基本流程1.3.2用户行为流程设计<知识链接>

流程图的主要作用是:帮助设计师理清思路，梳理活动的前后顺序；方便查缺补漏，将实际操作步骤与自己的思路进行对比；有利于与同事之间的沟通，避免文字描述和口头表达不清楚的情况发生。

为了更好地与项目组成员沟通，在绘制流程图时，需要遵守一定的规范。为便于理解，下面以App登录界面的操作流程图为例进行说明。企业形象广告更注重将企业的美好形象单方面地传递给公众。流程图及其绘制规范1.3UI交互设计的基本流程1.3.3产品信息架构设计1．概念:信息架构英文全称“informationarchitecture”，简称“IA”，是将信息从抽象转化为具体的产品形态。在交互设计中，产品信息架构设计专注于产品的内容设计和导航问题，即通过对信息进行统筹、规划、设计、安排等一系列处理，将产品信息内容有组织、有条理地呈现给用户，从而提高交互效率。

例如，在逛商场时，一般会有指示牌写着一楼是珠宝区、二楼是化妆品区、三楼是女装区、四楼是儿童装等，这样顾客就可以很清晰地知道每一层的商品类型，跟着指示牌很容易就能找到要买的商品。此处设计师的作用就是将楼层信息进行梳理和分类，并以具体形式呈现出来以指引用户行动。在互联网产品设计中，UI交互设计师的产品信息架构设计和商场的楼层指示有相通之处。1.3UI交互设计的基本流程1.3.3产品信息架构设计2．如何进行产品信息架构设计

设计师可以通过对产品的搜索系统、导航系统等进行组织分类来合理地呈现产品信息，使用户通过浏览、搜索、提问等方式快速找到自己所需要的信息。

在组织分类时，需要考虑以下四个方面的因素。

1）相似性

2）使用频率3）功能与功能之间的关系4）扩展性1.3UI交互设计的基本流程1.3.3产品信息架构设计

1）相似性将相似的功能进行分类并组织整合在一起，以大的类别为主要框架，大类别中小的类别或功能作为子框架，构成产品的整体框架。

民生银行App界面例如，民生银行App中将资产配置、理财、基金、保险等具有挣钱致富性质的功能都放到了“财富”大类别中；将手机充值、生活缴费、娱乐、买票等方便生活的功能都放到了“生活圈”大类别中。按照这种方式进行分类，不仅界面整齐还方便用户查找。1.3UI交互设计的基本流程1.3.3产品信息架构设计

2）使用频率使用频率越高，说明功能越重要，在进行信息架构设计时，就越要把这个功能放到用户容易触及和发现的地方，下面来看两个例子。

（一）高德地图App界面：它的主要功能是导航，因此在设计界面时，把地图作为首页界面的背景，并将搜索框放在界面顶部，方便用户打开界面就可以输入目的地。

（二）智行火车票App界面：火车票、机票、汽车票的购买肯定是它的重要功能，所以设计师将这些功能图标放在了界面上方，并在尺寸上与其他图标做了区分。高德地图App界面

智行火车票App界面1.3UI交互设计的基本流程1.3.3产品信息架构设计

3）功能与功能之间的关系产品的各个功能之间一般有并列、包含、互斥等关系，在进行信息架构设计时，可以根据功能之间的关系进行组织分类。如果功能之间为并列关系，则可以设置横向信息架构，如美团App分类界面的侧边导航栏。栏中的项目都是生活中的不同方面，属于并列关系。4）扩展性对一款新产品进行信息架构设计时，对产品功能的考虑肯定会有所欠缺，随着产品的迭代升级，往往会出现新的功能和需求，如果在进行信息架构设计时就考虑到了这一点，那就没必要在添加功能时推翻重来，可以大大节省时间、人力成本。美团App界面

例如，QQ和微信经历了这么多次的迭代和升级，添加了大大小小的功能，但是都没有影响到它们信息架构的核心。1.3UI交互设计的基本流程案例练习1-1 绘制微信信息架构图步骤1：登录微信之后的界面一般包括：微信、通讯录、发现、我四部分，仔细看的话，还会发现微信界面右上角的“搜索”和“加号”图标。步骤2：定下大致方向后，就可以开始提取界面的详细信息，在提取时要注意按照从左到右、从上到下的顺序进行，要细心，不得缺漏，有些信息还需要进行整理和归纳。步骤3：App中还会有二级、三级界面，在绘制架构图时，要考虑周全，越详细越好。微信界面

微信通讯录界面

微信小程序界面1.3UI交互设计的基本流程案例练习1-1 绘制微信信息架构图微信信息架构图

★提示绘制微信的信息架构图只是为了更加了解信息架构的构成和所要考虑的内容，在绘制时应该重点关注的是微信开发人员为什么要设置这些功能，为什么要按照这种方式将这些功能进行分类。例如，如果没有发现界面，那发现界面中的功能将堆到微信或通讯录界面，一是抢了主要功能的风头，分不清主次；二是会显得页面非常混乱，没有条理。1.3UI交互设计的基本流程1.3.4产品原型设计

1．低保真原型图

低保真原型图，即线框图，它描绘的是页面功能结构，关注的是内容、可用功能和预期的空间分布与优先级排序，有助于UI交互设计师和客户进行讨论，确定产品的层次与走向。

一般线框图由线条、方框、文本构成，颜色为灰色。

线框图的绘制比较简单，通过它可以尽早发现问题并及时修改。另外，使用灰色线框绘制图形，使设计师不受绚丽色彩和图像的限制，让其更容易关注到界面布局和交互方式上来。产品线框图1.3UI交互设计的基本流程1.3.4产品原型设计

2．高保真原型图

高保真原型图指的是动态可交互的原型图，我们平时所说的原型图也多指高保真原型图。它相比于线框图更加精细，不仅注重界面元素的视觉表达与细节问题，还要求尽量模拟真实的产品界面和功能上的交互，提供完整的产品模型。高保真原型图常用于产品正式开发前的原型测试，它的应用有利于节省改错时间和开发成本，但是其绘制耗时较长，难以上手。

可交互原型图1.3UI交互设计的基本流程1.3.5编写交互设计说明文档1．什么是交互设计说明文档

为了传达产品的开发需求，保证部门之间的有效沟通，保证产品质量有具体的标准控制，UI交互设计师需要在制作完原型图之后输出一份详细的交互设计说明文档。对于不同的人，交互设计说明文档具有不同的作用。在输出交互设计说明文档时，要充分考虑不同岗位对文档的不同需求。优秀的交互设计说明文档需要做到以下两点。

（1）简明扼要，逻辑清晰。在对内容进行说明时，文字要尽量简洁、保持思路清晰，能让人一眼看出要表达什么，不要有多余的废话。

（2）界面美观。UI交互设计师不仅要保持产品的美观，还要考虑交互设计说明文档视觉上的美观，一份赏心悦目的文档可以提高阅读效率，也更容易使产品获得认可。1.3UI交互设计的基本流程1.3.5编写交互设计说明文档2．交互设计说明文档的内容

1）封面：封面用于记录产品名称、版本信息、时间、参与设计的人员信息等。

2）项目背景和设计思路：主要是向相关人员展示前期的项目背景和设计思路，包括需求分析、流程图、产品信息架构图三部分。

（1）需求分析：不需要将前期分析全部放上去，毕竟有专门的需求分析文档，只需要从前期的调研分析中挑选重点内容进行总结和分类即可。

（2）流程图：一般需要包括任务流程图（用户的操作流程）和页面流程图（导航）。

（3）产品信息架构图：点明页面的排布、跳转及具体内容。1.3UI交互设计的基本流程1.3.5编写交互设计说明文档

3）原型图说明

原型图说明一般是将绘制的原型图放上去，然后对原型界面进行详细说明。对原型图的说明不同企业有不同的方法，可以将说明文字放到界面下方，也可以将说明文字放到界面旁边。1.3UI交互设计的基本流程1.3.5编写交互设计说明文档

3）原型图说明

除对界面的说明外，还需要添加一些特殊的情况说明，具体包括以下五类。特殊的情况说明适配不同载体、不同版本、不同场景等都会使产品发生变化，因此设计时都需要考虑并写进交互设计说明文档中。内容获取途径图片、数据、图标等的来源和裁剪方式。限制各种元素在界面中所占大小的范围值。状态包括正常状态、空状态、异常状态、操作方式和误操作等。加载状态需要注意的是，对加载页面的设计要考虑进流程设计和原型设计中。1.3UI交互设计的基本流程1.3.5编写交互设计说明文档

4）更新记录

在产品设计过程中，修改和优化是必不可少的，写更新记录可以清晰地记录产品做过哪些修改，修改之前的版本或元素也别急着删除，可以以链接或图片的形式放到对应的更新记录后面，这样成员就可以一目了然地了解到更新过的信息，见下表所列。

1.4

移动端App和网站的交互差异1.4.1交互和操作方式的不同

移动端App是直接使用手指触控屏幕进行交互操作，除点击外还支持多种手势，如滑动、调整等。而Web网站多以鼠标作为交互操作媒介，除鼠标点击外，也支持鼠标滑动、滚轮放大缩小等操作方式。具体有以下四点不同。

（1）相比鼠标，手指的触摸范围更大，没有鼠标那么精准，因此移动端界面中的元素尺寸和元素间距要设计得比较大，以免手指点击时出现误触。

（2）移动端App以单手操作为主，因此在设计时要注意左右手的习惯问题，还要考虑界面元素的摆放，使之基本处于单手的操作范围内。1.4

移动端App和网站的交互差异1.4.1交互和操作方式的不同

（3）Web网站支持鼠标滑到特定位置即展开或收起的交互方式，而移动端App则需要通过点击特定的图标或按钮来达到展开或收起的效果。

（4）移动端App相比于Web网站来说，在交互方式上较为灵活、多变，设计师有更多的设计空间。Web网站由于发展时间和交互媒介的限制，交互方式较为固定。例如，在移动端中，可以使用三指上滑截屏和倾斜手机以缩放图片。1.4

移动端App和网站的交互差异1.4.2使用环境的不同

移动端App可以做到在任意环境、用任意姿势使用，且使用时长不受限制。而Web网站，由于计算机一般较大，不好移动，大多数使用者都是在室内或固定位置使用。用户经常会在不同的环境中使用手机App，当处于嘈杂环境时，用户很容易被周边环境所影响，存在被打断浏览或误触的可能，这样设计收藏、稍后阅读和如何从错误操作中恢复等功能就比较实用了；而当用户处于安静的环境中时，就可以设计沉浸式阅读功能。而Web网站的使用环境一般比较稳定，因此环境对设计的影响较小。

1.4

移动端App和网站的交互差异1.4.3设备尺寸的不同

移动端App所用设备尺寸较小，支持竖屏和横屏的相互调转，而Web网站所用设备尺寸相对较大，浏览器窗口可缩放。在具体设计时，需要注意以下三点。（1）简化页面，突出重要信息。

使用优先级方法排列突出重点内容，将次要信息适当弱化或隐藏。（2）满足横屏、竖屏的转换（3）由于移动设备和Web网站显示器的分辨率有差异，设备尺寸也不尽相同，因此在界面设计时需要考虑不同设备的显示效果和页面内容的展示与布局。1.4

移动端App和网站的交互差异1.4.4网络环境的不同

移动端App的使用环境较为复杂，用户可能会从网络通畅的环境突然进入信号较差的环境；而Web网站的使用场所比较稳定，因此网络信号相对比较稳定。考虑到这个因素，在具体设计时需要注意以下三点。

（1）移动端用户经常于室外上网浏览，流量消耗较大。用户在进行一些消耗流量较大的操作时，可以设置流量提醒界面给予用户提醒。流量提醒1.4

移动端App和网站的交互差异1.4.4网络环境的不同

（2）使用移动端App时，经常会遭遇网络突然异常的情况，设计师应该重视这类情景下的异常状态提示，以及如何从错误中恢复。

（3）PC端用户的网络一般较为稳定，但也不能忽略网络异常状态下的异常提示。页面异常状态提醒本章总结1.UI交互设计的基础知识2.UI交互设计的基本流程3.移动端App和网站交互设计的差异佳作赏析

平时所见的移动端日历App主界面，都是似墙一般的静态日历表。

而Vantage日历App将界面设计成一个可以前后滚动的跑道，手指滑动跑道上所列日期时，界面中的跑道就会随之前后滚动，就像时间真的在流逝一样。这个交互动效的设计和创新使得这款App生动、直观、充满趣味性。日常日历界面Vantage日历的主界面课后作业

根据UI交互设计自查表，对手机微信App进行分析。步骤2按表中所示，一项项查看，如微信中支持什么手势动作，是否有冲突，是否容易混淆。步骤1从前期产品定位、用户需求开始，在网上查询并结合如今微信使用情况，判断产品是否符合定位。步骤3当分析完成之后，参照UI交互设计自查表将分析结果使用简洁的语言列出来。UI谢谢观看UIInteractionDesignCaseTutorialEND02UI交互设计规范和原则

UI交互设计需要基于现有的设备和技术，不同系统、不同尺寸的设备对UI交互设计有不同的要求，如果对现有设备的尺寸规范和交互方法不了解，那设计通常会事倍功半，设计出的作品也会漏洞百出。本章将介绍移动端UI交互设计的一些常用尺寸规范和交互设计方法，希望通过本章的学习，学习者能够制作出规范的作品。单元导读★了解iOS系统和Android系统UI设计规范★掌握5W2H交互设计方法论知识目标★紧跟科技发展的步伐，开拓视野，增强民族荣誉感和自豪感

思政目标★掌握UI交互设计的原则及其使用方法★学习相关设计规范，不断提高自身的专业技能

技能目标学习目标2.1iOS系统设计规范2.1.1有关iOS系统的基本概念iOS系统是由苹果公司开发的移动操作系统，最初应用于iPhone，后陆续套用到iPad、iPodtouch。操作界面美观简洁、设备反应迅速、操作流畅、安全性强等特点，使iOS系统受到了不少用户的喜欢。在学习相关设计规范之前，我们先来简单了解有关iOS系统的基本概念。UI（1）像素（px）：是构成图像的最小单位，可以将其看作一个小方格，无数个不同颜色的小方格就构成了画面。像素并没有固定的物理尺寸，其尺寸由载体决定。（2）屏幕尺寸：一般指屏幕的对角线长度，单位为英寸（in），1in=2.54cm。（3）物理分辨率：是指屏幕的最佳分辨率，是屏幕固有的参数，不能调节，其表示方法为设备屏幕在水平和垂直方向上所拥有的像素相乘的数学表达式。屏幕尺寸逻辑分辨率物理分辨率倍率PPI像素iOS系统基本概念2.1iOS系统设计规范2.1.1有关iOS系统的基本概念UI（4）PPI：英文全称pixelsperinch，是像素密度的简称，也是像素的密度单位；是连接数字世界与物理世界的桥梁，表示每英寸屏幕中排列的像素点数量。像素密度越高，屏幕显示效果越清晰，细节越丰富，如下图所示。（5）逻辑分辨率：是为使同样尺寸的图像在不同物理分辨率的设备上都能正常显示而发明的参数，其单位为pt。在物理分辨率不同的设备中，只要设备的逻辑分辨率相同，它们的显示效果就是相同的。1英寸，4px×4px

1英寸，8px×8px像素密度不同的两张图片2.1iOS系统设计规范2.1.1有关iOS系统的基本概念UI6）倍率：通俗一点讲就是指物理分辨率和逻辑分辨率之间的比例关系。如切图名称的后缀@2x、@3x就是指倍率的数值。

★提示：大多数物理分辨率都等于逻辑分辨率×倍率。在@1x倍率图中，1pt相当于1px，在@2x倍率图中，1pt相当于2px，在@3x倍率图中，1pt就相当于3px。2.1iOS系统设计规范2.1.2iOS系统UI设计规范UI

在工作中，设计师遇到的设计规范问题主要可以归结为界面、布局、字体、图标、按钮几类。

1．界面设计规范主要包括界面和界面元素的尺寸规范

1）常用设备尺寸

界面设计是基于设备的，界面尺寸由设备尺寸决定，只有先确定了界面大小才能深入去设计不同的界面元素。

通常设计师会以一种尺寸为基础进行设计，让开发去适配不同的设备。

例如，用Photoshop做设计稿或AfterEffects做UI交互动效，一般会选择750px×1334px或1125px×2436px，也可以选择1170px×2532px。2.1iOS系统设计规范2.1.2iOS系统UI设计规范UI

2）界面元素尺寸规范

（1）状态栏状态栏位于手机界面最上方，倍率相同，设备屏幕尺寸和分辨率不同时，状态栏的高度通常是相同的。而倍率不同，状态栏的高度也会不同，一般在@1x倍率图中，状态栏的高度为20px；在@2x倍率图中，状态栏的高度为40px；在@3x倍率图中，状态栏的高度为132px（个别型号的设备除外，如iPhone8Plus、7Plus、6Plus、6sPlus型号中状态栏的高度为60px，iPhone11、XR型号中状态栏的高度为88px）。状态栏是手机本身的显示，UI设计师无须改变，只需要将界面中状态栏的位置预留出来即可。状态栏2.1iOS系统设计规范2.1.2iOS系统UI设计规范UI（2）导航栏导航栏一般位于状态栏的下方，在@1x倍率图中，导航栏的高度为44px；在@2x倍率图中，导航栏的高度为88px；在@3x倍率图中，导航栏的高度为132px。（3）标签栏在@1x倍率图中，界面底部的标签栏高度为49px；在@2x倍率图中，标签栏的高度为98px；在@3x倍率图中，标签栏的高度为147px。底部标签栏中的内容可以根据不同的产品需求进行设计。总的来说，界面元素的尺寸随倍率的变化而变化，如下图所示。不同倍率下的控件尺寸2.1iOS系统设计规范2.1.2iOS系统UI设计规范2．布局规范

1）全局边距iPhone8Plus、7Plus、6Plus、6sPlus之后的型号与以往相比，由界面底部的主页指示器（灰色横杠）代替了以往的home键，因此在设计时也需要预留出主页指示器的位置。一般来说，@2x倍率图中需预留高约68px的位置，@3x倍率图中需预留100px～120px高的位置。有时为了使用户将注意力集中在图文本身，对视觉造成冲击，会不留全局边距。全局边距的界面

不设置全局边距的界面2.1iOS系统设计规范2.1.2iOS系统UI设计规范2．布局规范

2）间距间距一般指卡片之间的距离。卡片式布局是移动端界面的常见布局方式，卡片间距的大小由界面风格和卡片承载信息的多少决定，并没有固定的数值。常见间距有20px、24px、30px、40px等，通常不低于16px，过小的间距会使用户浏览时产生紧张情绪，而过大的间距又会使界面变得松散。初学者可以使用常见数值，也可以在平时多关注其他界面的间距设置。但也不可一味仿制，最好能根据具体情况灵活设置。界面中的卡片间距设置2.1iOS系统设计规范2.1.2iOS系统UI设计规范3．字体规范

1）字体在iOS9之后，苹果推出了新的官方中文字体——苹方，英文名为PingFangSC，专为中国用户打造，是iOS和Mac操作系统的默认中文字体。其具有现代感的外观和优美的字形有效提升了文字在手机和电脑屏幕上的清晰度和易读性。该字体有6种字重可供选择，同时支持中文简体和繁体的应用，极大地满足了设计师的设计需求。苹方字体及其字重2.1iOS系统设计规范2.1.2iOS系统UI设计规范3．字体规范

2）字号、字重、行距

iOS系统中不同文字的字号、字重和行距规范iOS操作系统界面中的文字一般都有规定的字号、字重和行距。2.1iOS系统设计规范2.1.2iOS系统UI设计规范3．字体规范

2）字号、字重、行距

表格中各文字在UI界面中的应用如图。

虽然界面文字有规定的字号与字重，但在进行特殊设计时可在其基础上适当放大或缩小。

设计面向老年人的界面时，可以适当加大每一层级文字的字号，在保证信息层级分明的情况下更便于老年人阅读。iOS系统UI界面中的文字2.1iOS系统设计规范2.1.2iOS系统UI设计规范3．字体规范

2）字号、字重、行距

另外，除了要注意iOS操作系统的文字规范，设计师在设计界面文字时还要注意以下三个问题。（1）界面中的字体类型不可太多。（3）强调重要信息，优先考虑内容

通过字体、字号、字重和文字颜色等突出重要信息（2）注意行距的应用。

★提示：在界面设计中，文字颜色一般不使用纯黑色，尤其是正文和大面积文字。在同色相、同明度下，一般纯度越高文字越突出，因此一些重点内容可以使用纯度高的颜色来突出，其中最常用的就是红色。2.1iOS系统设计规范2.1.2iOS系统UI设计规范4．图标规范

图标是UI中最常见的元素。iOS操作系统中的图标大致可分以下四种：

应用商店图标

应用程序图标

设置图标

通知图标2.1iOS系统设计规范2.1.2iOS系统UI设计规范4．图标规范

图标决定了用户对App的第一印象，同时也体现了产品调性和品牌形象。在iOS操作系统中，不同类型图标在不同倍率的界面上有不同的尺寸规范。

iOS系统中不同类型图标的尺寸规范2.1iOS系统设计规范2.1.2iOS系统UI设计规范4．图标规范

除上述图标外，导航栏、工具栏、标签栏中也常用到图标，在设计时要避免混淆，并保证图标风格、细节、样式等统一。在iOS系统中，对此类图标同样有一定的规范。iOS系统中不同功能图标的尺寸规范

苹果开发者网站提供了系统图标，在设计上述图标时，可以直接从系统图标中选择合适的图标来使用，也可以根据界面风格自己设计图标。2.1iOS系统设计规范2.1.2iOS系统UI设计规范5．按钮规范

1）按钮状态

iOS操作系统中的按钮主要有四种状态：正常状态（normal）、选中状态（selected）、高亮状态（highlighted）、禁用状态（disabled）。

为便于区分当前按钮所处状态，不同状态的按钮要有不同的样式。2.1iOS系统设计规范2.1.2iOS系统UI设计规范5．按钮规范

2）按钮样式

iOS操作系统中的按钮主要有以下三种样式：

当一个界面中同时出现两个及以上按钮时，可以使用不同的颜色或尺寸来体现按钮的不同功能，给用户传达不同的信息。

例如，在接听电话界面中，总是用红色的按钮表示拒绝，绿色的按钮表示接听，这样即便在紧急情况下也可以很容易地分辨出哪个是接听键，哪个是拒绝键。按钮设计

知识链接：Android系统中的按钮规范与iOS系统中的按钮规范大同小异。2.2Android系统设计规范2.2.1有关Android系统的基本概念

与iOS操作系统不同的是，Android系统是一个开放式系统，它允许任何移动终端厂商的加入，这也导致了设备的多样化与不统一性。针对Android系统的UI设计，也会涉及一些基本概念和常用单位，其中像素、屏幕尺寸、倍率等与iOS系统相同。除此之外，还有以下Android系统专用的概念与单位。DPI不同的两个图片（1）DPI：最初用来衡量打印机的打印精度，指打印物上每英寸的点数密度，一般来说DPI数值越大，打印机的打印精度越高，图片越精细。当用于计算机屏幕时，DPI的本质与PPI相同。（2）dp：全称deviceindependentpixels，意为密度独立像素，是Android系统专用的长度单位，与iOS系统中的pt相同。（3）sp：是Android系统中的专用字体单位。2.2Android系统设计规范2.2.2Android系统UI设计规范1．界面与布局规范

1）屏幕适配

Android系统的开源性使其涉及的设备类型繁多，没有固定的尺寸参考，这给UI设计带来了极大的挑战。为便于对Android系统设备进行管理，降低设计难度，提升适配度，官方根据屏幕的像素密度不同，将屏幕由低到高大致分为ldpi、mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi六类，不同密度屏幕对应的各项数值。2.2Android系统设计规范

与iOS系统一样，为Android设备设计界面也会以一种尺寸为基础，由开发去适配不同的设备，通常这个尺寸会选用720px×1280px或1080px×1920px。

另外，为了在不同密度的屏幕上统一显示元素，Android系统的UI设计规范常以dp和sp为单位，但在设计时，却统一使用px，因此需要自行计算px与dp和sp之间的转换关系。

在正常情况下，1dp等于像素密度为160的屏幕上的1个物理像素，因此dp和px之间的换算公式为：dp×dpi/160=px。

例如，当屏幕的像素密度为320dpi时，1dp×320dpi/160=2px。由此可以算出，当屏幕的密度为ldpi时，1dp=0.75px；为mdpi时，1dp=1px；为hdpi时，1dp=1.5px；为xhdpi时，1dp=2px；为xxhdpi时，441dp=3px；为xxxhdpi时，1dp=4px。sp和px之间的换算与dp和px相同。2.2Android系统设计规范2.2.2Android系统UI设计规范2）基准网格

网格系统给予设计师一种规范和约束，可以保证界面元素及界面与界面之间的一致性，同时又不会妨碍设计师的想法和界面布局，还可以提高设计师的工作效率，减少沟通成本。

Android系统对基准网格有着较为明确的规范，手机、平板等设备中的所有组件都与8dp的基准网格对齐；工具栏中的图标和文字则与4dp的基准网格对齐。2.2Android系统设计规范2.2.2Android系统UI设计规范3）间距与界面元素尺寸规范

在Android系统的手机界面中，全局边距一般为16dp；当头像和文本列表采取左对齐样式时，与图标、头像相关联的内容左边距为72dp。

状态栏的高度为24dp，顶部工具栏的高度为56dp，底部工具栏的高度为48dp，标题和列表栏的高度为72dp，副标题的高度为48dp，内容区域之间的间距为8dp。

Android系统的界面边距

Android系统界面元素尺寸2.2Android系统设计规范2.2.2Android系统UI设计规范2．字体规范Android系统语言文字English-like

typefacestypefaces（类英语文字）Densetypefaces（密集文字）Talltypefaces（高大文字）

主要指英语和类似英语的文字，如拉丁文、希腊文和西里尔文等。

Talltypefaces和Densetypefaces文字都需要额外的行高来适应不同的字体，前者主要包括南亚、东南亚及中东地区的文字，而后者主要包括中文、日文和韩文。2.2Android系统设计规范2.2.2Android系统UI设计规范2．字体规范1）字体

Roboto为Android系统上的首选字体，主要支持英文和类英文文字，该字体有六种字重用于匹配不同文本。

Noto是Roboto字体未涵盖的所有语言的默认字体，其中NotoSansCJK（CJK指中文、日文和韩文）为国内常用的Android系统字体，该字体有七种字重可供选择。Roboto字体

NotoSansCJK字体知识链接：NotoSansCJK是由Google和Adobe联合开发的开源字体，Adobe将其称为SourceHanSans（思源黑体），而Google将其称为NotoSansCJK，并纳入Noto字体家族。2.2Android系统设计规范2.2.2Android系统UI设计规范2．字体规范2）字号、字重、行距、字距

Android系统中字号的单位用sp表示，字与字之间的间距单位用dp表示，因此，在设计时需要将sp和dp转换为相应的px值。在Android系统界面中，文字的大小一般在12sp～24sp，不同文字的字体规范，见表所列。2.2Android系统设计规范2.2.2Android系统UI设计规范2．字体规范2）字号、字重、行距、字距

不同文字在UI界面中的位置。在具体应用时，设计师可以基于文字样式、产品属性有针对性地进行设置。2.2Android系统设计规范2.2.2Android系统UI设计规范3．图标规范Android系统中的图标类型应用程序图标系统图标应用快捷操作图标2.2Android系统设计规范2.2.2Android系统UI设计规范3．图标规范（1）应用程序图标：在Android系统中，应用程序图标的尺寸规范为48dp×48dp，边缘为1dp。但在创建图标时，要求以400%（192dp×192dp）的比例查看和编辑图标，此时的边缘为4dp。（2）系统图标：是系统提供的内置图标，可用作工具栏、标签栏和应用快捷操作图标，其尺寸规范为24dp×24dp，由于尺寸较小，在设计时要尽可能精简，以保证图标的可读性和清晰度。系统图标大多采用几何图形，外观较为对称。（3）应用快捷操作图标：应用快捷操作图标可以让用户轻松快速地访问应用。在通常情况下，应用快捷操作图标就是将一个系统图标放置在圆形的安全区域中心，它的尺寸规范为直径48dp的圆形，其中包括直径44dp的安全区域和安全区域周围的2dp边距。

Android系统的开放性使其设计较为灵活，对于应用商店图标、设置图标和通知图标等没有明确的规范，可在实际工作中根据情况灵活处理。2.2Android系统设计规范2.2.2Android系统UI设计规范4．色彩规范1）界面中的颜色界面中的颜色可分为主色和辅助色。主色指界面中出现最频繁的颜色。不同深浅的主色有助于区分界面中的不同区域，如区分状态栏和工具栏。辅助色用来强调UI中的关键部分，可以与主色互补，也可以与主色类似，但不能是基于主色的简单加深或变浅。用主色区分区域

用辅助色强调按钮2.2Android系统设计规范2.2.2Android系统UI设计规范4．色彩规范2）文本可读性

界面中的所有文本都应该是清晰易读的，而颜色在文本可读性中起着重要作用。在设置文本颜色时，建议在暗色背景中使用亮色文本，在亮色背景中使用暗色文本，并且文本颜色与背景要有足够的对比。

不同的文本要使用不同的不透明度，以增强界面层次感，不同背景中的文本不透明度。不同背景中的文本不透明度2.2Android系统设计规范2.2.2Android系统UI设计规范4．色彩规范2）文本可读性

在不同背景中，使用不同颜色文本的不透明度效果。不同背景中的文本不透明度★在设计iOS系统界面时，可参考上述色彩规范，也可到官网查看相关规范。知识链接

2019年8月9日，华为鸿蒙系统正式发布；2021年6月2日晚，华为正式发布了多款搭载HarmonyOS2的产品，这标志着中国科技的进步与崛起，也意味着我们有了自己的移动操作系统。相信在不久的将来，针对鸿蒙系统的设计规范和标准也将出现。科技之光2.2Android系统设计规范案例练习2-1对美团App首页界面进行剖析步骤2此时打开的美团界面会显示在画布中间，选择软件界面左侧工具栏中吸管工具组中的标尺工具，在要测量元素的一侧边界按住鼠标左键不放，并拖动鼠标至另一侧后释放，在拖动鼠标时可以按住快捷键“Shift”以保持其水平或垂直移动，此时起点和终点之间就会有一条线。步骤1首先启动Photoshop；然后按快捷键“Ctrl+O”，在弹出的“打开”对话框中选择配套素材“素材与实例/第2章/美团界面.png”；最后单击“打开”按钮，打开美团界面。提示：在使用标尺工具测量界面尺寸时，可以在元素边界添加辅助线（按快捷键“Ctrl+R”显示标尺，然后将光标移至标尺上，接着按住鼠标左键并拖动至元素边界后释放，即可添加一条参考线），这样在测量时方便标尺工具与元素边界对齐，以保证测量的准确性。2.2Android系统设计规范案例练习2-1对美团App首页界面进行剖析步骤3

选择“窗口/测量记录”菜单项，在画布下方会弹出测量记录界面，单击该界面左上角的“记录测量”按钮，就可以看到前面测量线的长度。

标尺工具图

使用标尺工具进行测量

选择“窗口/测量记录”菜单项查看测量记录2.2Android系统设计规范案例练习2-1对美团App首页界面进行剖析步骤4

用工具栏中的吸管工具在所要选取的颜色上单击，此时软件界面左侧的工具栏中会显示所选颜色，单击设置前景色工具会弹出“拾色器”对话框。“拾色器”对话框2.2Android系统设计规范案例练习2-1对美团App首页界面进行剖析步骤5

用工具栏中的文字工具在画布中单击并拖动鼠标，拖出一个文字框，在其中输入文字，利用工具属性栏（如图所示）改变文字字号，来判断首页界面不同文字的字号。工具属性栏提示：iOS系统的字号规范是基于@2x倍率的界面尺寸设定的，在@3x倍率图中需要进行简单的计算，当规定字号为28点时，它在@3x倍率图中的字号就应当是：28÷2×3=42点。2.2Android系统设计规范案例练习2-1对美团App首页界面进行剖析使用上述方法测量并总结得出以下五点结论。（1）主色：该美团App首页界面以“#f7d247”为主色。（2）字号：大标题为51点，标题为42点，副标题为33点。（3）文本不透明度：该界面为亮色背景，因此使用了暗色文本（#000000），标题和图标文字为主要文本，搜索框中的文字为辅助文本，界面中主要文本的不透明度明显高于辅助文本的不透明度。（4）界面布局：状态栏高度为132px，导航栏高度为132px，标签栏高度为147px，标签栏下方所预留的主页指示器的高度为112px，全局边距为45px。（5）图标：在正文中，图标大小为96px×96px；在标签栏中，图标大小为69px×69px。将上述数据与UI设计规范作对比，可以发现美团App的界面基本上是按照UI设计规范去设计的。例如，使用了规范的界面布局；在彩色背景中，使用了暗色文本（#000000），文本清晰易读；不同样式的文字使用了不同字号，界面主次分明。2.3交互设计方法论——5W2H2.3.15W2H分析法是什么

5W2H分析法又叫“七何分析法”，它简单、方便，易于理解，富有启发意义，有助于弥补考虑问题中的疏漏，被广泛应用于企业管理和技术活动中。

5W2H由5个以W开头的单词和两个以H开头的单词组成，它主要从7个方向进行设问，从中发现解决问题的线索，寻找设计思路，进行设计构思，从而对产品进行发明与创新。2.3交互设计方法论——5W2H2.3.15W2H分析法是什么

5W2H分析法是通过提问、反思，来解决问题，并进行创新。它的应用面较为广泛，应用方式比较灵活，在UI交互设计领域也非常适用。它的具体内容如下。（1）Who：谁？由谁来做？Who指用户和整个流程中所涉及的人员，需要考虑用户特征和用户需求，还要考虑由谁来设计、决策，能力是否足够，后期维护是否可以做到。（2）What：是什么？目的是什么？做什么工作？What指功能，具体要实现哪些功能，也就是用户使用产品可以实现哪些目标，完成哪些事情。（3）Why：为什么要做？可不可以不做？有没有代替方法？Why指寻找原因，为什么要做这个功能？此功能是否有做下去的价值？考虑产品功能是否需要优化、是否需要删减。2.3交互设计方法论——5W2H2.3.15W2H分析法是什么（4）When：何时？什么时间做？什么时机最合适？对于UI交互设计师来说，需要考虑产品上线时间，设计的功能是否可以在计划时间内完成，是否需要分批上线或删减内容；用户使用此功能需要多长时间，用户是否愿意花费时间来使用此功能。（5）Where：何处？在哪里做？对于UI交互设计师来说，需要考虑此产品是在PC端运行还是在移动端运行，此功能要放在哪个模块之下；用户在使用此产品或功能时，是在何种环境之下，有哪些影响产品运行环境的因素。（6）How：怎么做？如何提高效率？如何实施？方法是什么？How指真正了解用户是如何操作的，操作习惯；整体方案如何实施；产品的具体界面设计；设计的产品是否符合用户习惯。（7）Howmuch：多少？做到什么程度？数量如何？质量水平如何？费用产出如何？Howmuch指用户花费资金与产品功能是否等值；产品的开发成本，运营和维护成本。5W2H方法论意在指引同学们养成良好的、独立的思考习惯，培养发散性思维，它可以运用于交互设计流程的某一项目，也可以贯穿全程。但要注意的是，不同的设计项目需要提出不同的问题，这是需要设计师经过深思熟虑才能提出的，不可死记硬背并照搬他人，否则会变得没有意义。2.3交互设计方法论——5W2H2.3.25W2H分析法的重要性提出疑问是发现问题和解决问题的前提，而5W2H方法论的本质就是引导设计师提出疑问。5W2H方法论指导设计1.可以准确界定问题，清晰表述问题，提高工作效率。2.可以掌握产品和用户需求的本质，抓住产品的骨架，提高创新能力。3.有助于理清设计思路，更加全面地思考问题，避免在设计流程中遗漏项目。2.4交互设计的原则2.4.1人机交互界面设计的基本原则

出色的交互界面更容易吸引用户，受到用户青睐；人性化的设计，则可以增加用户对应用程序的黏性。而要想设计出吸引人的、逻辑清晰的交互界面，就需要了解并掌握以下几个原则。1．美学完整性

美学完整性并不是要求设计出的界面有多么好看，而是要求应用程序的视觉界面、交互行为和功能更加匹配。2．一致性

人机交互界面的一致性，指在设计时遵守有关系统的设计规范，尽量使用系统提供的界面元素、图标和文本样式，保持应用程序整体的风格统一，且包含人们所熟悉和期望的功能与行为。

例如，一款应用程序的目的是帮助用户完成某项任务，在设计时就应该使用一些标准化的控件和交互行为，或是一些不太明显的背景和图案作为点缀，旨在给用户传达清晰的信息，突出应用程序的目的，便于用户理解和操作。

2.4交互设计的原则2.4.1人机交互界面设计的基本原则3．直接操作

直接操作是指直接与屏幕上的对象进行交互，而非通过按钮交互，使用户更能理解自己的任务和操作结果，提高用户的参与感。

例如，用户直接旋转设备或通过滑动等手势即可影响屏幕中的内容，而不需要通过键盘、按钮等控制屏幕内容。又如，使用手指滑动模拟拆包装动效，有效提升了用户参与感与体验感。直接操作2.4交互设计的原则2.4.1人机交互界面设计的基本原则

4．隐喻

当虚拟的物品和操作行为与现实生活中的物品有相似性时，用户就可以快速学会此操作。

例如，在界面中，用户通过轻扫来翻阅书籍，就与现实生活中人们翻阅书籍的操作相似，因此用户可以很快理解并掌握这个操作。

交互设计中的隐喻可以不受现实生活的限制。例如，在现实生活中，文件夹可放内容是十分有限的，并且只能放纸质文件，而在计算机中则可以放入很多音乐、视频、文档等文件。5．用户控制

在交互设计中，让用户来控制操作行为，应用程序可以对用户提供建议，并对可能造成严重后果的操作行为发出警告，但不应该替用户做决定，好的设计可以在用户行为和不想要的结果之间做出平衡，巧妙化解错误的发生。在通常情况下，用户会希望在某些操作时可以进行确认，并且可以随时停止或取消操作，这都是交互设计中需要考虑的问题。2.4交互设计的原则2.4.2尼尔森十大原则

尼尔森十大原则由人机交互学博士雅各布·尼尔森（JakobNielsen）于1995年1月1日发表，该原则用于评价用户体验的好坏，交互设计师也可以根据这十大原则来指导设计和对产品进行自查。本节将结合案例深入讲解尼尔森十大原则的具体内容，帮助同学们更好地理解并应用到设计之中。1．系统状态可见原则

系统状态可见指用户在界面上的任何操作，无论是单击、滚动还是按下键盘，页面都应该及时给出反馈，让用户清楚当前处于什么状态。

2.4交互设计的原则2.4.2尼尔森十大原则

例如，在App界面中点击爱心，图案会由白色线条变为显眼的红色图形，界面下方也会有已收藏的提示字样，及时给予用户收藏成功的反馈；在App界面中点赞，会出现鼓励的文案和很多表情包，在给予用户清楚反馈的同时又兼具趣味性。App界面的及时反馈2.4交互设计的原则2.4.2尼尔森十大原则2．环境贴切原则

使用用户熟悉的语言、文字、短语及概念，而非系统术语，遵循现实世界的惯例和思考逻辑，使界面信息尽可能地贴近现实世界，以便用户理解和使用。3．可控原则

用户要能对当前情况有很好的了解和掌控，能够自由地操作软件。例如，当App遇到卡顿时，双击home键可以退出，消息发送错误可以撤回，订单下错可以申请取消，软件中设置有重做和撤销功能等。相机和时钟图标

撤销、重做功能

2.4交互设计的原则2.4.2尼尔森十大原则4．一致性原则

对于用户来说，相同的语言、按钮、操作行为应该触发相同的事件，所以在设计时要遵循平台惯例，从结构、色彩、操作、反馈、文字等方面保持一致。5．防错原则

比出现错误提示更好的设计是避免错误发生，设计师可以通过对产品界面的设计、重组与安排来防止用户产生混淆，导致错误操作的发生，或者将错误发生的可能性降到最低。

去哪儿旅行App中，用户在购票选择日期时，已过去的日期会变为灰色，不可被选中，这有效防止了用户因误操作导致选错日期而产生负面情绪。

2.4交互设计的原则2.4.2尼尔森十大原则6．易取原则

尽可能减少用户的记忆负担，将动作、选项和页面信息设计为可视化，应用程序的使用指南也应该是可见的，并且可以随时调用。7．灵活高效原则

中级用户的数量远高于初级和高级用户，在设计时要考虑大多数用户的需求，但也不能低估和轻视少数用户的需求，保持应用设计的灵活高效性，尽可能满足所有用户的需求。

微信表情包中的“最近使用”模块，将用户经常使用的表情包放到界面上方，大大缩短了用户寻找表情包的时间，体现出了交互设计的灵活高效性。2.4交互设计的原则2.4.2尼尔森十大原则8．易扫原则

易扫原则是指在界面设计中突出重点信息，弱化次要信息，让信息结构一目了然，使用户可以快速准确地获取重要信息。支付宝理财界面在这方面就做得很好。9．容错原则

容错原则是指能够帮助用户从错误状态中恢复，将损失降到最低，当无法恢复时，要提供详细说明和解决建议，只给一个简单的错误代码