交互设计之基础篇

什么是交互设计？

·历史

交互设计作为一门关注用户体验的新学科产生于上世纪八十年代，它是由IDEO的一位创始人比尔·莫格里奇在1984年的一次会计会议上提出，他u 一开始给它命名为“软面（SoftFace）”，由于名字容易让人想起当时流行的玩具“椰菜娃娃（CabbagePatchdoll）”，后来他把名字改为“InteractionDensign”-----交互设计。

·定义

交互设计，又称互动设计，（英文Interaction Design, 缩写IxD或者IaD），是定义、设计人造系统的行为的设计领域。人造物，即人工制成物品，例如，移动设备，人造环境，服务，软件，多媒体设备以及系统的组织结构。交互设计在于定义人造物的行为方式相关的界面。

它定义了两个或多个互动的个体之间交流的内容和结构，使之互相配合，共同达成某种目的。交互设计努力去创造和建立的是人与产品及服务之间有意义的关系，以“在充满社会复杂性的物质世界中嵌入信息技术”为中心。

从用户角度说，交互设计是一种如何让产品易用，有效而让人愉悦的技术，他致力于了解目标用户和他们的期望，了解用户在同产品交互时彼此的行为，了解“人”本身的心理和行为特点，同时，还包括了解各种有效的交互方式，并对他们进行增强和扩充。

·现状

从第一台用来容纳静态副本以外信息的屏幕被设计出来的那天开始，交互设计就开始了。从按钮，链接到表单的一切都是交互设计的一部分。在过去的几十年里，有许多相关的书已经出版了，这些书解释了交互设计的方方面面，并探索了交互设计与体验设计间交叉和重叠的多种方式．

交互设计的发展帮助和促进了人和他们所在的环境之间的相互作用。不像用户体验设计那样占据所有面向用户的系统，交互设计师只关心用户和屏幕之间的特定相互作用。当然，在实际中从来不会如此清楚地划分开来。

交互设计师要做什么

·交互设计师产出交互原型

要知道交互设计师要做什么，就必须现知道设计师的在用户体验五层要素中的角色，用户体验五层要素包括战略层（strategy），范围层（scope），结构层（structure），框架层（skeleton），表现层（surface），这里涉及三个岗位，战略层和范围层对应产品经理（pm），需要输出产品需求稿，结构层和框架层对应交互设计师（ux），需要输出信息流程图，页面布局原型，统一称作交互原型；表现层对应视觉设计师（UI），需要输出最终视觉界面。

·交互设计师具体工作方法

一个移动产品的上线，无外乎要经过“产品需求-交互原型-研发-测试-上线”流程，交互设计是其中重要的一环，很多公司把这一任务都交给了产品经理，或者是ui设计师，这一环节实际是需要专业的交互设计师来完成的，好的交互设计稿的输出能够大大的提升开发效率和产品的用户体验。

第一步产品需求

首先是产品经理（pm）通过对公司战略、运营目标的分析，用户需求的调研，整理出产品所需的功能，内容信息，形成需求文档，

第二步交互原型

交互设计师按产品需求进行层级划分，定位出一级菜单是什么，二级菜单是什么，每个子菜单下的功能是什么，以及用户完成某项任务正常的流程，也包括异常流程。形成完整信息架构和交互流程图文档。

接下来根据信息架构和交互流程，绘制原型图，包括低保真原型和交互动效，输出给UI设计师和程序开发人员，为什么要输出给程序呢？因为这样做可以让程序员不必等到UI出了视觉稿才开始着手工作，程序开发工作可以和UI设计师工作同步进行，程序拿到交互原型可以了解产品的整体框架和交互流程，进而根据原型搭建初步程序框架。

另一边输出给UI设计师，如果交互原型做的够标准就可以很大程度上提高ui设计师的效率，这个标准一是要全面，所有状态都要考虑到；二是专注细节，小到每一个图标大小，间距；三是遵循移动平台的交互规范，和用户的行为习惯。

第三步研发

这个阶段包括UI设计和程序开发，程序根据交互原型开始搭建程序框架，另一边UI设计师根据交互原型，遵循多种设计和视觉规范设计出精美的界面，并配合程序切图，同时整理出设计规范文档，一并给到开发，然后程序再进行细致的代码编写。

第四步测试

程序开发好后，测试工程师对测试版本功能和交互流程进行测试，交互设计师对测试版本的交互实现进行测试，UI设计师对界面与设计稿对比，把测试结果反馈给程序，程序根据反馈信息进行代码编写修复问题。

第五步上线

上线阶段需要UI设计师正对不同应用市场提供相对应尺寸的审核图，上架人员到各个应用市场提交审核上架。

交互设计要用到哪些工具

·sketch

产出：低保真原型，高保真原型

·mind note（xmind,mindmanager）

产出：思维导图

·omnigraffle（Visio）

产出：线框流程图

·principle

产出：产出可交互原型

移动平台的设计规范

现移动平台所用的系统大致有ios，Android，wp。iOS系统是苹果的，内核是Unix，只在苹果的设备上运行；android系统是目前市场份额占有最大的，它是由谷歌开发，然后开源的系统，基于免费开源，所以很多公司会开发自己的操作系统，比如锤子的Smartisan OS，小米的miui，魅族的flyme。安卓手机市场的鱼龙混杂导致没有哪个是统一的规范，只能说最好可以参考谷歌官方发布的规范。

在这里就讲讲iOS的设计规范

·iOS

以前一般会在sketch里面建375*667的画板进行原型和UI界面设计，具体原理网上很多文章都解释的比较清楚，现在自从iPhone x出来以后，基本都是按375*812的尺寸画板做设计了，这里我着重解释下：iPhone X的分辨率为2436*1125，相比较iPhone 7plus发生了变化，但变化仅限于物理像素层面。在真正决定屏幕内容的逻辑像素层面，新版的iPhone X与过去我们熟知的''iPhone 4.7''、''iPhone 5.5'' 放大模式宽度相同。通俗的说，iPhone X可看做是''iPhone 4.7'' 的加长版

但需要注意的是，页面内容不能超出安全区域

（Safe Area）

ios规范文档

ios的交互规范文档可以打开网址www.developer.apple.com/design，里面有详细的设计交互规范。

写到这里，这篇文章就基本写完了，下一篇文章将和大家一起探讨交互设计师需要输出的信息架构、流程图两部份，具体会讲到设计信息架构和流程图需要从哪几个方面思考，包括哪些内容，具体软件设计演示，以及设计需要注意的事项。