如何做交互设计
目录：
第一部分
一、什么是交互设计
二、交互设计的方法和步骤
· 基于业务分析操作动线
· 低保真、高保真、动效的目标分别是什么
· 如何筛选合适的软件做交互
第二部分
一、界面结构
二、功能设计
三、操作手势
四、组件和情感化设计
第一部分
一、什么是正确的交互设计
关键字：用户研究、交互、用户测试、迭代
判断交互有效图
交互的意义是在哪里呢？交互的意义在于，你要给你的用户提供一种体验你的软件的方式，这时候，用户就会给你回馈他的满意程度。
有时候我们可以看到，用户用完你的产品以后，要么破口大骂，要么把它卸载掉，有时候看到一些好玩的细节，有趣的细节、很酷的细节，用户会拍手叫好；这一个过程就是用户给你回馈他使用产品的满意程度。
那么如何判断这个交互做得好不好呢？从根本上来看，是由你的用户来决定交互做的好坏，进一步的，是通过用户行为数据取评判交互的好坏，是否是有效的。
交互设计的组成部分
如何理解这张图呢？
- 用户研究：做一个产品之前，我们需要研究我们的用户，研究用户是为了在做产品的时候提供一个数据支撑；而做用户研究的方法有很多，大家听得比较多的，有产品属性、用户画像等等；目标都是为了做数据支撑；
- 交互：有了前面的数据支撑之后，也就是我知道了使用我们产品的用户大概是一个什么状态，属于哪一类人；这时候我们就需要为他们设计一种体验方式，俗称交互；也就是我们基于用户数据，给用户定义一种使用产品的方法；所以我们以前所认为的低保真、高保真，并不是交互设计，而是交互设计的一种载体；
- 用户测试：当我们为用户定义完使用产品的方法之后，我们怎么验证这个方法可不可靠呢？是否精准呢？这个时候我们就需要做用户测试；我们不能主观地认为自己做的东西就是OK的；就好比艺术家画一张画，不管观众喜不喜欢，就自己觉得自己的画是好看的，这只是他站在自己的角度来看；但是我们做产品，是需要和用户打交道的，我们就需要对用户进行测试，来判断我们的产品做的好坏；用户测试也有很多方法，比如用户访谈、用户调查、A/B测试，可行性测试等等；必须记住，仅仅设计了一个方法，而没有经过用户测试的方法不是一个标准的交互；只有当这个方法经过测试之后，才可以说这是一个经得起推敲的方法；
- 迭代：互联网产品的迭代性很强；因此我们还需要考虑一个问题，就是需要快，因为我们做出来的交互，还需要大家一起去研究是否有效，甚至是明天之后我们就会把这个交互给迭代掉，所以一定要快；而不能等我们去把我们原型图画得很好看，否则黄花菜都凉了
以上几点就是交互设计的组成部分，它并不是一个方法，并不是我们所讲的哪些流程图，而是一定要有数据支撑，一定要有方法，然后还要让这个方法更加精准，最终，这个方法要能够迭代，这才是一个完整的交互设计的组成；
那么我们做这么多事情是为了什么呢？我们需要让这个app，这个软件快、准、狠，就是你设计的这个交互，一定要让用户体验得很爽；
二、交互设计的方法和步骤
当我们知道了交互设计的组成结构之后，我们就会问，交互设计是怎么做出来的？我们在市面上能看到很多软件，定义都是做交互的，比如Axure、principle、墨刀，sketch、origami、flinto等等
面对这么多的软件，我们需要问两个问题：
1、学会了这些软件之后，是不是就学会了交互呢？
2、我们应该使用哪个、哪些软件，这些软件是不是就可以对我们的交互工作进行支撑？
答案是：
1、就算我们会了这些软件，也不见得我们就会交互，就像我们会了Photoshop，我们一定能绘制得出来很好看的图；
2、这些软件虽然都是做交互的，但是他们在交互设计中扮演了不同的角色，这就需要我们去了解交互设计中到底有哪些步骤，我们在每个不同的步骤中去使用不同的软件；
对于步骤的理解，通常我们会听到：低保真、高保真、动效；这是我们耳熟能详的关键词；
但是在我们了解这些关键词之前，我们做一件非常重要的事情，就是了解这个产品的业务是什么，如果我们不了解我们的业务是什么，我们几乎没有办法做交互，很难做出让用户体验很好的交互；
动线
了解业务之后，我们还需要了解一个知识点，就是动线；
动线：用户处在什么位置，要往哪里去；
用户使用我们APP的时候，总是有一个明确地目标的；所以我们设计一条动线的时候，我们需要知道我们的产品是什么属性，产品的核心功能是什么；因此产生低保真，我们会使用低保真去描述我们的动线；
我们通过一个例子，来看看如何设计我们的动线，例如我们要做一个参加活动的APP，有几种思路：
1、程序化：登录页——>注册页——>列表——>活动详情——>表单页
弊端：设计的交互，会和你看到的app的交互完全一模一样，这就是我们讲的程序化，没有基于我们的产品设计一个属于我们自己的交互；以页面、表现去看待交互；
2、脑残化：注册——>登录——>筛选——>查看——>报名
绑架用户行为，完全是“下一步”、“下一步”...“完成”，根据设计的路线去走；以下一步、下一步的程序化的角度去看待；
3、人性化、筛选——>查看——>登录——>报名——>管理
从一个活动的场景去设计；用户还没报名之前，首先需要做的一个动作就是筛选，筛选这个交互，在被视觉化之后，就是我们的首页、列表页、筛选页、混合筛选页；这时候用户的身份是游客；当一个用户进入到我们的APP当中，我们已经赋予了用户一个ID，他不要登录和注册，登录和注册是用户对自己身份的一种管理；例如我们二次使用、三次使用、N次使用的时候，我需要注册一个账号，方便我们自己进行管理；所以当用户使用我们的app的时候，他已经有一个身份了，就是游客，他有浏览、阅读的权利；所以第一件事叫做筛选；筛选之后，用户需要去查看他筛选的结果；当用户查看之后，很感兴趣，需要报名了，这时候，我们可以让用户登录了，因为用户需要管理他的报名；报完名之后，我们需要让用户对他的报名结果进行管理；而有些app为什么没有登录功能，例如计算器，因为我们不需要进行管理；
以上的动线，适合一个商城类参加活动的APP，但是现在APP的类型那么多，我们在做这些APP的时候，该如何去下笔呢？我们应该做哪个动线？大家要记住一点就是，在我们了解我们产品的属性的时候，在做交互的时候，我们要设计的动线，是我们这个产品中对用户来说最重要分量最终的一个动线，剩下的东西都是次要的。我们看看以下几种不同的APP：
-
内容：发布——围绕事
例如QQ空间，微博，它最重要的功能就是发布，所以我们在做这个APP的时候，我们第一件要做的事情就是内容发布的动线 -
咨询：评论、收藏、转发——人与事
因为咨询类的内容不是你发布的，它可能是背后编辑发布的，可能APP采集的；你让用户做的，无非就是让用户基于这个咨询进行评论、收藏、转发； -
社交：发消息——人与人
例如微信、QQ、钉钉；这类产品，当我们把发布消息这条动线设计好，用户一定会觉得这个产品是好用的，我们需要把所有精力全部放在这里； -
商城：购买——人与物
商城类最重要的购买；有些商城里夜游评论，收藏，转发，点赞，但是这些东西都是次要的；一个商城可以没有这些次要的功能，但是不能没有购买；一个用户在使用商城类APP的时候，哪怕不能评论转发，只要他可以购买，那么这个产品就是没有问题的；但是如果他不能购买，哪怕你的评论做得再好，这也是一个失败的商城类APP；
以上，就是我们交互设计师，在面对不同产品属性的时候，我们应该下笔的第一个动作；所以我们在做交互的时候，我们不要一上来就先把软件打开，然后开始画登录注册，这是脑残化的思维；我们需要了解我们的产品的属性，它核心的功能是什么，我们基于它核心的功能区设计它交互的动线；
低保真——格式
当我们找到最重要的动线之后，就可以通过软件把我们这条动线梳理开。
我们通过下面的例子来看一下，在软件当中，我们一般是怎么样去做交互的，它的格式又是什么样子的。
首先，在整个动线上面有一个大标题，叫做“发布评论成功”，当标题设计完之后，我们要去布置，能完成这条动线的所产生的所有界面，然后进行优化；
我们要从左往右的顺序，把所有用到这条动线的界面一字排开；同时，我们还要满足一个条件，就是快速。
所以，交互设计师手里，都会存着我们一些UIkit，控件库；这样的话，我们就能在最短的时间内把这条动线界面排满。排满之后，我们才能考虑，当中的交互是否对用户是有一定的帮助的，怎么去设计它。
因此，这是一个反复修改、迭代的过程；甚至整个动线图排出来之后，是需要整个团队扑上去对他进行更新迭代的，所以我们没有太多时间等着你去把这个低保真做得非常好看，好看并不是我们做低保真的重点，而是要快速地表现出其中的交互的逻辑，和你设计中交互的亮点。
以上就是低保真的格式。
我们的用户群体虽然差不多，但是大部分人群对于互联网软件的使用，包括对互联网软件的素质，他是不太一样的。所以会导致，每个人的操作习惯，以及当下交互的反应，都会有他自己的理解。这时候，我们在做动线的时候，我们就需要为用户考虑一条，他们可能会发生的一条路径，例如在此例子中，你还需要为用户考虑一条：发布评论失败；如果你不设计这条动线，就有一点像大楼失火了，你却没有一个逃生的通道，用户就会很慌张；
我们想想一下一个APP当中，用户在发布评论的时候突然网没有了，这时候没有任何提示，因为你没有设计这条动线，用户是什么样的感觉？或者私手机卡在当前了，你依然没有任何提示，用户是什么感觉？
我们没有设计一条失败的动线，就会导致用户非常的迷茫，用户的迷茫就会导致他对你产品的用户体验非常失望。
失败，我们会考虑会不会出现以下的情况，比如说弹窗的失败，网络异常的失败；甚至有的人在填写表单的时候，比如说我在买个东西，点击购买之后，进入支付，但是付不了，因为没有填写地址，这也是支付失败的其中一条动线，这是需要大家去进行设计的。所以在这一块，你思考的越多，用户的体验就越好。
低保真——步骤
上面讲了低保真的格式，我们能够很清晰地了解到，低保真要满足两个条件，一个适合它主要是用于阐述你产品的业务逻辑的，我们在做产品之前，一定要把他的业务理解透，你的用户是谁等等，业务理解透你才能去阐述它的业务逻辑；然后就是我们讲的操作动线，操作动线一定要快，视觉不重要，我们要用极端的时间将页面排开，甚至有的交互设计师，使用纸和笔、语言能够描述出来，也是没有问题的。
所以我们通常用什么软件去做低保真呢？我们要用最方便、最简单的软件去做低保真，例如sketch、axure，或者是我们的纸和笔，都可以做低保，如何选择，主要看团队，大家都有什么的使用习惯。
这就是为什么会出现低保真这样的一种形态，因为它要阐述业务，去设计一个很好的体验；制作成本我们要降到最低，而设计交互的思路，我们要注入的更多；
高保真——互动方式与操作手势
当我们整个业务逻辑全部梳理清楚的时候，所有的内容体验设计完毕之后，大家会发现，有些东西，是和用户体验有关系的，但是没有办法用低保真去阐述的，例如一些鼠标悬停、滑动、按下、滑动等等的效果，这些会影响用户接下来对于体验的一种刚感知性，但是这么多东西是没有办法使用基础的低保真去表现的，所以，我们又需要一个新的东西去做这个动作，这就是我们的高保真。
例子：
不同栏目左右滑动进行切换
固定导航
上下翻滚，二级菜单被收拉回去
我们需要一个东西去阐述我们要做的动态效果，界面与界面、按钮与界面之间逻辑的组合，所以我们要用到高保真。
高保真运用到了两块比较重要的点，一个就是他的互动方式，是从左往右，还是从上到下，展开还是折叠；还有一个就是，你的操作方式有哪些，我们知道有点击、长按、滑动等，这些操作手势都会和你的互动方式进行结合，这就是我们要做高保真的内容。
当我们低保真中，具体到哪一个效果，是低保真无法完成的，就把中间这个效果做成高保真，发给开发，这就是为什么会出现高保真的原因。
情感化设计与动效交接
即使大家有了低保真，高保真，还有一块是大家无法做的。
例如MAC OS中这种涟漪的效果，这种效果非常吸引人。但是这些细腻的效果，在我们高保真中也无法完成。因为我们现在制作高保真的软件，通常是把一些简单的动作封装起来给你使用，但是却无法做到一些个性化的需求。
这时候出现了第三个步骤，这个步骤我们通常理解叫做，动效，这个动效和我们平时理解的动效有些区别，平时我们讲的动效，无非是弹弹跳跳，而现在讲的这个动效，是为了情感化设计，是为了让你的产品的体验的细节放大，例如我们在做一个点击确认的按钮的时候，它会有一个过度的效果，这个过度效果是有规律的，如果我们把这个效果的参数改变一下，用户体验感觉他是不一样的，所以它是服务于yi一些情感化设计的，就是让用户对你的细节鼓掌，这是第一点；
第二点，就是前端的对接文件。前面我们所说的无论是低保真，还是高保真，它都只是给我们开发的同学看的，开发看完之后，基于他的理解去编写代码，把这些东西编写出来；但是有时候，由于一些参数的原因，开发做出来的感觉是不一样，但是你又没有办法和开发进行编程语言上的交流，所以我们需要软件帮我们进行设计和开发之间的翻译。
所以这时候又出现很多软件比如上面的AE/AN等；AE导出来的是视频文件，还是需要开发去感受；AN能直接生成一些开发代码，开发就能直接那这些参数来用，AE在浏览器上预览，直接能在浏览器上查看代码，做出还原度为百分之一百的效果。
以上讲了我们通常理解的低保真、高保真、动效，他们之间的这么一个工作职能，我们发现它并不像我们想象当中的那么难以理解，完全是因为我们要基于一个共同协作下，产生出来的一个步骤。
在面对这么的软件，在挑选的时候，我们就给他归个类，哪些软件是适合做低保真的，哪些是高保真，他们的属性是什么，动效用哪些软件去用它，就能知道他们能处理哪些阶段性的问题。
第二部分（原生IOS/Android设计语言）
一、界面结构
IOS和Android在如今在交互设计上已经有很大的趋同性，在结构上大致从上往下分为状态栏、导航栏和底部的标签栏
二、功能设计
1、导航栏
以上是iOS导航栏的三种状态，我们发现一些共性，就是返回、添加等都在左边，这就是我们的导视系统；而右边，通常是放置功能，例如搜索、编辑、添加等；
所以我们大致把它分为，左边尽量地放置我们的操作动线，并且在ios中，它更建议你去把返回到上一层的地址放出来；中间放置标题；右边放置功能；
同时，我们还发现，这个头部和我们在屏幕上使用的网页结构非常相似，左边也是放置导视系统，返回、刷新、主页等，右侧放置标签、收藏等功能，逻辑两者是有一定共性的；
2、搜索
搜索框有两种类型，第一种搜索框有三种状态，当我们点击的时候，会出现输出光标，同时出现一个删除按钮；当搜索框输入文字的时候，会出现一个全部清除的按钮；这是一个搜索输入的完整体验；
这个时候Android和ios对于搜索框的设计；ios搜索框里面有一个“search”的英文，
淘宝将这个设计做成了一个钻石展位，这里边散发着“钱”的味道；
如果再发挥一下想象力，我们在搜索框里面放置一些小标签，不再需要打字也是不错滴。
三、操作手势
这是ISO中很常见的通栏列表，它有很多种状态，上面是第一种状态，什么都没有，就是一个标题；经常使用ios的用户就会知道，在这种状态下，它是可以往左滑动的，然后会出现一些功能，例如编辑、删除、订阅、分享等等功能，这些东西我们可以自定义；
通栏列表还有一种状态，就是它会有一个向右的箭头，点击之后，整个页面就会从右往左滑；
再看一下Android的通栏列表，点击之后出现下拉菜单；
iOS还做了一个叫做Z轴的状态，例如我们长按一个地方，这个地方就会向上弹起，这就是我们很时尚的【3D Touch】。我们可以扩展一下，在弹起的窗口放置一些确定、取消、跳转等按钮，增加灵活性；
四、组件和情感化设计
很多控件是可以从现实物品当中追溯过来的，因为设计师在设计这些控件的时候，大多数会使用一种隐喻的方法，例如我们电脑的桌面，实际上就是我们的工作台，这种层层叠加的方法，就像我们的文件夹，而下拉菜单就像我们的抽屉。
通过这种饮水思源的方法，可以加深我们对这些空间的理解。
当我们对控件不太理解的时候，或者没有把这些控件理解透彻的时候， 就会遇到接下来的这些状况：
这是让你输入生日年月日的三个输入框，虽然这里做了一些小交互，没有调用英文键盘，而是调用的数字键盘，但是这是体验是非常之糟糕的，因为我们应该还要知道一个控件，就这下面的这个滚轮控件：
使用这个控件填写生日，只需要一个通栏列表，点击这个按钮，就出现这个滚轮。
而前面那种设计，是带有一些网页的设计思想在里面的，因为我们可以使用tab键去进行输入。
打开ios的控件库，我们会发现很多键盘，有英文键盘，数字键盘，表情键盘，键盘上方还有些功能性的按键，这些键盘里的按钮都是可以自定义的。
当一个控件在发生改变的时候，它不仅仅是别的控件在发生改变，还有些人性化的设计、小思路、小方法在里面。例如上面的这个例子，当用户在点击“a”进行输入的时候，它时候有镜头感的，用户的视线是聚焦在这个模块上面的，当你点它的时候，你需要把它移到用户看他的位置，你需要让用户知道他在改哪里，你需要把它滚到用户看它的位置
在ios和Android的空间库当中，还有很多我们未知的控件，是值得我们去学习的，我们需要找到这些控件，使用上面的方法去学习，它的操作动线、互动方式都是需要我们去掌握的，以及它的情感化、人性化的东西也是需要我们去掌握的。
当我们把Android、iOS这些原生的、最基础的东西掌握之后，你才能真正的开始设计一个交互。
End.
