本章包括3小节：交互设计概述、设计工具Axure、设计规范与设计模式

1、交互设计概述

1.1、走进交互设计

交互定义：交互是指产品和他的使用者之间的互动过程。交互设计就是利用用户的场景、用户的心理去设计用户的行为，从而使用户能用、易用、爱用我们的产品。

能力要求：需求分析、信息架构、流程设计、原型设计、测试评估、用户体验。逻辑思维、表达、沟通协调、熟悉技术、相关岗位。

行业需求：天气、购物、出行、医疗、银行、音乐、视频、游戏等行业。

1.2、产品开发流程

第一步：确定目标、需求挖掘。

由产品经理和用户研究员去市场上挖掘需求，挖掘产品要做什么、产品的商业模式。（产品要服务哪些用户，要解决什么用户需求）

产出物：基于用户调研结果，输出用户画像。线上竞品分析。线下相关商业模式分析。

第二步：定义产品。

基于前期研究结果，由产品经理和交互设计师进一步定义产品。例如产品形态，是一个移动端产品还是移动端和pc共有的产品，产品会有怎样的功能。

产出物：首先产品来定义产品，通过树状结构图，输出产品大概会包含的功能。之后产品和交互一起定义产品，输出功能流程图，说明产品具体会包含哪些功能。

第三步：交互设计和ui设计

交互设计比ui设计更前置。两者相互影响，相互穿插。

产出物：交互拿到产品需求后，先快速做一些纸面原型图，和产品经理进行深入讨论，确定设计方向。确认纸面线框图后，再去绘制交互线框图。视觉基于交互线框图输出视觉稿、设计规范、切图。

第四步：产品开发

具体的产品开发，也就是代码阶段，由前端工程师、开发工程师完成。

第五步：测试优化

由用户研究员、测试，来测试优化产品。一是代码性能的测试优化，二是用户体验层面的优化。

交互需要参与进来，检查产品体验上的问题。

第六步：正式发布

正式发布后，由运营、运维、产品经理继续跟进，寻找产品在线上发布后遇到的问题，寻找产品中可优化的点，规划后续的产品迭代。一个好的互联网产品就是在不停的迭代中变得越来越优秀。

交互需要做数据分析，搜集用户反馈。了解产品存在的问题，以及用户对产品的反映。

交互和上游产品的配合

产品经理，侧重需求讨论和用户调研，确认产品到底要做什么，目标用户是什么，目标用户到底需要什么。

交互设计师，侧重于落地需求，形成真正的功能流程和界面原型。

交互和下游ui、前段开发的配合

交互设计师需要输出交互原型图和交互设计文档给下游。审核视觉稿，是否完成了用户体验目标。走查开发出的产品，用户是否能顺利使用。

1.3、交互设计关键着用户体验

用户体验定义

举例：不能共用两个插孔的插座。而160度插座，多功能扩展插座，就可以解决前面的问题。用户体验涉及到我们生活的方方面面，衣 食 住 行。用户体验，是用户对于使用或期望使用的产品、系统或者服务的主观感受和反应。它强调的是用户的心理主观感受和反应。

影响用户体验的三个因素

系统：产品所运行的软硬件环境。用户：使用产品的人群和对象。环境：用户使用产品所处在的自然环境、社会环境

交互设计影响着用户体验

举例：网易云音乐。向用户推荐歌曲，向朋友分享歌曲，操作体验。向用户推荐歌曲：私人FM，根据用户平时听歌类型给予个性化推荐；歌单、电台，采用瀑布流的形式支持用户自己发现内容。听歌识曲，在任何有歌曲播放的环境，识别播放的是哪首歌。向朋友分享歌曲：长按歌词，直接分享歌词；通过朋友圈分享歌曲。操作体验：播放歌曲时，仿真黑胶唱片开始随着音乐旋转，唱针开始摆动，带来很强的临场即视感；切歌时，向左或向右滑动黑胶唱片，直接切换，是个很有意思很生活化的用户交互的手势设计。

交互设计处于用户体验的那些层面

从Garrett提出的五个用户体验层次出发，交互设计主要关注框架层、结构层。

框架层，主要关注结构的布局设计。例如网易云音乐的首页，界面布局清晰，主功能突出，用户一进入软件，想要做的事情就可以在最快时间内做好。例如音乐播放界面，按操作的频繁程度、人体视觉习惯程度设计出层次，避免用户误操作。结构层，主要关注功能和信息层次的设计。例如网易云音乐的注册交互。好的设计师还要和其他部门进行沟通和配合，关注到表现层、范围层、战略层的设计。

2、设计工具Axure

2.1、使用基础

软件界面包括工具栏、页面、元件库、检视、母板、概要几个部分。页面，就是交互稿的目录。元件库，就是一个素材库，界面上的所有元素都是从元件库拖出来，经过一些改变得到的。检视：就是属性面板，可以控制页面或元素的属性。共享功能，因为Axure的服务器在国外，访问速度很慢，不建议使用。

2.2、实例演示

一个交互界面包括：界面标题、界面、流程线、交互说明（标记和文字说明）。

这一节主要讲了页面绘制技巧。

绘制交互稿之前会先画一些草图。可以把草图拖进axure，参照绘制。

绘制时，先拖一个底板，加上投影。（x=0，y=1，模糊=8，透明度=15）

接着绘制导航栏，边框可见性中隐藏左、右、上边框。

导航栏标题字号为17号、加粗。导航栏两侧文字字号及正文字号为15、不加粗。

按住option，可以拖动复制导航栏、文字，修改后得到其他部分。

按住option+shift键，可以垂直复制。

超出页面的形状，可以通过布尔运算裁剪。

列表行内的文字，左边距为16。

置灰按钮，通过修改透明度实现，设置为30%。可用状态，设置为100%

弹窗中的标题文字，和导航栏中的标题文字样式相同。

长页面可以转化为动态面板，从而裁剪到一屏高度。

2.3、交互文档攥写

一个交互稿文档包括：封面、更新日志、设计过程、交互稿主体、废纸篓。

封面。交待当前交互稿的版本信息，例如版本名称、版本号、交互日期、相关人员。

更新日志。包括日期、终端、所在页面（做一个链接索引）、变更内容、变更原因（例如需求变更、交互考虑不周）、设计师、备注。

设计过程。包括产品需求（需求呈现形式举例：列表、截图）、需求分析、用户调研、竞品情况、功能树形图。

交互稿主体。层级一为各个端，Android、iOS、windows、Mac、Web。层级二为功能模块，模块1、模块2...。功能模块上方为全局交互说明。层级三为用户角色。层级四为功能、子功能。

交互页面。背景为浅灰色，显示并对齐网格，网格间距为40。顶部显示页面标题，标题右侧显示作者姓名和联系方式，转化为动态面板，固定到浏览器顶部，尺寸为1920*40。一个页面只放一个流程。每个界面显示界面标题。流程线沿着网格串起来，纵向贴第一个网格线，横向对齐界面顶部。交互说明纵向在界面底部排列，间距一格，可以横向扩展，间距两格。

2.4、可交互原型

可交互原型一般用于：演示新功能，设计阶段的‘用户测试’。

Axure可交互原型功能的缺陷：操作相对复杂、动效支持较弱。

其他主流可交互原型软件：principle、flinto、origami、hype3。

以网易新闻客户端为例，演示底部tab切换（内容区域可滚动）、顶部二级tab切换（手势侧滑切换）、页面的切换（列表和详情页间切换）。

页面切换，主要通过动态面板来实现。过程动画，时长设置为300ms。

2.5、实用干货

交互稿模版、实用元件库、iconfont网站（Axhub官网可下载chrome插件）、托管平台（Axhub、摹客、产品大牛）、Ant Design（便后台，有代码的DPL，design pattern library 设计库）、Element。

第3节    设计规范与设计模式

3.1、iOS与Android设计规范

平台布局规范

不同平台设计不同，例如网易云音乐、知乎。

iOS端，经典的延续。

页眉--导航栏，用于实现在应用不同信息层级结构间的导航，有时候也可用于管理当前屏幕内容。

页脚—工具栏，用于放置操作当前屏幕中各个对象的控件。

页脚—标签栏，让用户在不同的任务、界面和模式中进行切换。

安卓端，变化与统一。

2009年，安卓推出1.5系统。

2010.12，安卓推出2.3版本，此时的按键缺少规范，比较混乱。

2011.2，安卓推出3.0版本，第一次为平板而设计的安卓系统，第一次在平板上出现了虚拟按钮。

2011.10，安卓推出4.0版本，统一了手机和平板规范，在3.0的基础上延续了虚拟导航的存在。

2014.10，安卓推出5.0版本，《material design》一个更详细的设计规范，并且影响了后续每个版本的安卓开发。

2015.9，安卓推出6.0。Marshmallow 棉花糖。

2016.8，安卓推出7.0。Nougat 牛轧糖。

2017.8，安卓推出8.0。Oreo 奥利奥。

2018.8，安卓推出9.0。Pie 派。

4.0是一个标志性的时刻，谷歌在安卓系统上实现了平板和手机的统一，将虚拟按钮作为4.0的标配。从4.0开始，没有配备硬件按钮的设备将显示导航栏这一虚拟的系统栏。页眉—操作栏（Action Bar）操作栏用于实现App内视图的切换和层级间的导航（返回上层），还会放置一些重要控件。

5.0扁平化时代下的material design。页眉—应用栏（APP Bar）应用栏在以前的版本中叫做操作栏，是用来显示应用的标识、应用导航、内容搜索以及其他操作。

常见控件。控件，用户通过控件来操作界面状态或设定状态。

常见手势。手势操作大多源于生活。例如APP翻页效果。

3.2、移动端设计模式—导航

导航，就像是一本书的目录。

底部标签式导航。

iOS中最为常见。如果APP有多个重要功能且相互之间切换频繁，这是可以采用标签式导航。特点：入口扁平化；导航控件占据面积大，能够轻松进行点击操作，进行功能间快速切换。

顶部标签式导航

被大量应用在安卓设计里面，可以避免导航与底部虚拟按钮之间发生冲突，引发误操作。

滚动式标签导航

用在标签个数超过5个的情况。需要给用户一定提示，说明页面外导航的存在。

分段式导航

由分段式控件所控制的一种导航模式。尺寸较小，能轻松地融入界面，不占用空间。一般会分成两段或三段。他只是iOS的标准控件。不适合作为一级导航，往往作为二级导航与标签导航嵌套使用。

舵式导航

App有多个重要功能且相互之间切换频繁，但是有一个功能最为重要，是App的核心功能或操作，这是可以使用舵式导航。底部标签式导航的变体。

抽屉式导航

App有多个功能，但是只有一个功能特别重要。特点：隐藏不重要功能，让用户更专注核心功能。能够大大减少主界面中的导航控件数量。例如打车软件。

下拉菜单导航

安卓4.0。特点：收起时体积小巧，节省空间；展开时能显示丰富的导航条目；往往没有关闭按钮。

滚动标签：显示数目有限，但是能够快速切换下拉菜单：可以显示很多条目，但是切换麻烦两者结合，可以优势互补。

3.3、移动端设计模式—列表

大多内容都是通过列表进行展示。

垂直列表

纵向罗列多个条目，这是一个最基本的列表形式。要做好列表条目详细程度和页面展示条目数量之间的平衡。例如外卖订单列表、联系人列表。常见的垂直列表有标准模式、图文结合式、控制模式。垂直列表还有两种特殊模式：时间轴形式、对话框形式。

横向轮播面板

有大图展示型、小图展示型。轮播面板需要指示器，来提示用户，表示屏幕外面还有着内容。

网格列表

以图片展示为主，有时也会配合文字说明。适合集中展示大量图片。网格列表更加富有情感化，让界面富有感染力。而垂直列表，大多用于展示文字，显得很清晰干净。网格列表的变种，瀑布流。田字格在排版上比较严谨。瀑布流的排布比较随意。

小结

垂直列表，冷静清晰。轮播面板，隐藏很多内容，充分利用空间。网格列表，可以显示大量图片，提高界面魅力。

垂直列表导航

垂直列表应用于导航模式。简单清晰，易于理解。可以帮助用户快速定位到对应的内容。常见于App的二级导航、多级导航。如果App功能层级比较浅，且功能间切换不频繁，也可以作为一级导航。例如邮箱。

宫格导航

宫格列表应用于导航模式。在睫毛上平铺显示使用频率相近，但是彼此又相互独立的功能条目。宫格导航，相比较于列表导航，可以充分利用屏幕空间。

3.4、web端设计模式

网页布局

搜索类网站，例如谷歌。

右上角显示网页内容及登录。中间模块显示了logo、搜索模块。底部放置一些其他信息。

博客类网站，例如微博。

顶部显示网页一级导航和目录。左侧有二级树状导航。中间显示微博发文、他人发布的博客内容。下面显示详细微博内容。右侧显示不太重要的博主信息、推荐广告位、其他信息。

商场网站，例如淘宝。

顶部显示用户信息、网页大的布局情况、导航。下面一行左侧显示logo，中间显示主要的搜索功能。搜索下方显示一级导航，淘宝旗下的子品牌。页面左侧显示二级栏目。中间是首页的首推位置，显示网站热卖商品、活动。页面右侧显示不太重要的其余信息、网格导航，公告、论坛、安全等。最右侧是三级导航，我常逛的一些品类细分。

图片类网站，例如pinterest。

顶部显示搜索栏、个人信息。下面是网站的主体，图片展示区域。右下角显示网站的其他辅助功能。

新闻类网站，例如凤凰网。

左上角显示logo。右上角显示个人信息，登录、搜索。下面是网站导航。接下来是banner广告位。下面是新闻网站的主体。

产品类网站，例如苹果。

顶部放整个网站的导航，以端来划分。中间是公司产品的主要内容，首推热卖产品。

其他新颖的形式。

卡片式布局。滚动视图布局。动态效果。

页面设计

首先，网站上有什么需要展示的。logo，导航，用户信息，推广信息，广告，其他。

其次，网站布局通常会把logo放在左上角。顶部放置网站的一级导航。如果页面很复杂或功能很复杂，左侧会放一个二级导航。

然后，结合自身情况考虑。

自适应设计

自适应网页设计，可以自动识别屏幕宽度，并作出相应调整的网页设计。

3.5、移动端交互规范解读

每次更新应该关注那些内容？

关注差异性和兼容型。

关注技术和落地应用。

关注设计细节。