第三章 交互设计中的架构与顶层设计
3.1 了解什么是顶层设计与架构设计
1.什么是顶层设计
顶层设计师运用系统的方法，从全局角度对某项任务或者某个项目的各方面、各层次、各要素统筹规划，以集中有效资源，高效快捷地实现目标。
顶层设计是通往架构方向的，所以不用关心具体的实现细节，而是想好未来及当前的产品架构、产品链条、产品后台支撑体系等，这相当于在开始做产品之前将整个想法在脑中过了一遍，不要做可以明显预见会失败的事情，用一句话解释顶层设计：自顶部往下的设计方式。
2.交互设计与顶层设计的关系
在交互设计中包含顶层设计，在顶层设计中又包含交互设计。其含义如下：
交互设计包含顶层设计是指：在业务逻辑层面上的交互和在架构上的交互不同，此处指的是架构交互设计包含顶层设计部分。在开展交互设计之前，需要先明确这个产品的架构、逻辑等，这个过程就是交互设计的过程，但是这个过程中进行交互设计的脚骨、逻辑等系统性的工作则属于顶层设计的范畴。
顶层设计中包含的交互设计指的是业务逻辑层面上的交互。顶层设计好之后开展一系列的细节设计，即需求形成之后开展的原型等设计，这时候关心的是细节，而不是全局。
3.什么是架构设计
系统的各个重要组成部分及其关系构成了系统的架构，这些组成部分可以使具体的功能模块，也可以是肺功能模块的设计与决策，他们相互关系组成一个整体，共通构成了软件系统的架构。
4.架构设计与顶层设计的关系
先要有实现生态体系的方案，根据体系方案规划需要多少个业务系统支持，针对业务系统再进行各业务系统的架构设计。
3.2 怎么进行顶层设计
进行顶层设计的时候，需要明确的信息如下：
项目各条业务线与产品希望达成的目标；
项目启动需要的全局资源（例如没有钱或者找不到钱就实现不了）；
项目个系统的关联体系对接方案；
项目各层面的管理手段与工作体系；
运营策略等。
3.3 为什么交互设计师要学会顶层设计
交互设计将在未来一段时期内成为产品竞争的关键因素。用户体验、交互体验的突出则是产品生存下来的制胜法宝，而到那时的交互设计师就可以更多参与到真正的产品顶层设计里面去。
3.4 实例：顶层设计图例
1.项目背景
这里需要写出市场调研、背景介绍、当前现状、竞品分析等。
背景介绍：建立一个交互设计专业知识分享的网站。
项目名称：IAMUE网项目。
项目简介：交互设计垂直资料分享。
2.项目总体设计
①需求分析分解，在进行顶层设计时先要做的就是明确需求
②总体框架
在架构设计里需要考虑服务用户的数量，合理构建服务器环境，搭建服务平台等工作。
③服务框架
服务框架则表示展现形式与服务接口，这些是产品的血肉，是直接展现于用户的界面。
④应用框架
由于每一条业务线中的应用情况都不一样，所以不再展开讨论，下图仅作为示意图。
3.5 顶层设计注意事项
交互设计师在参与公司战略级的策划过程就参与其中，需要注意一下几点：
·关心项目延展性
·关心项目可行性
·关心具体实施方案
一个优秀的IT项目顶层设计方案的大纲应该具有如下内容：
·概述
·背景
·项目目标
·项目架构
·项目服务框架
·项目执行计划方案
·项目验收计划方案
·总结
第四章 业务流程与交互设计
4.1 业务流程图
4.1.1 流程图的概念
流程图是利用图表的形式展现出工作整体过程的一种方式，它能让人直观地理解业务步骤，所以一般也成为业务流。
对于流程图的概念一般认为流程图是流程设计的图形化展示，还有一种说法是流程（flow）+图（chart）的概念，流程图是用来展示项目组件的输入项与特定输出项的一系列作业。
4.1.2 流程图的种类
一般有程序设计上的UML流程图、工业建筑上的工作流程图、企业内部门的跨职能流程图、还有UED常说的页面流程图。交互设计关心的是业务流程图和逻辑流程图，其中每一种类型的流程图又可以细分为很多具体的流程，如UML流程里的用例图、类图等。作为交互设计师，最好对这些流程图都会画，不全会也没关系，只需学习其中一种，其他的就触类旁通了。
重点需要掌握制作流程图的核心——设计流程。只要设计好流程，至于用什么图形展示都没有太大问题。Visio官方就有不少模板可用。
4.2 业务梳理与功能设计
案例介绍实际的流程与功能模块的设计。
1.需要提前确认的注意事项
·案例是一个APP项目，需要进行业务流程设计与交互设计。
·选取APP的平台（安卓、ios还是WP），本案例选用安卓平台。
·确认项目采用安卓系统版本，本案例采用安卓4.4版本。
·确认项目核心需求。
2.本案例的核心需求
·多用户协作办公平台APP端的即时通信。
·打卡签到功能。
·我的任务管理：增、删、改、查。
·查看任务详情。
·更新任务进度。
·任务帖子内的评论与回复（@功能）
·登录与管理员注册验证。
·通知提醒服务。
4.2.1 业务抽象流程图
在对一个项目进行交互设计之前，要先有项目需求，根据需求抽象出业务流程图。
再设计流程的同时，功能模块也要一起列出来，否则没有业务功能哪有流程？如图所示是一个功能图表 的模板。
1.设计功能模块
根据上面的核心需求提示找出几个重要的模块作为主要模块。设计出核心模块如下：
·即时通信模块
·任务管理模块
·登录注册模块
·通知消息模块
2.根据模块顺藤摸瓜设计功能点
在一级模块下进行细分功能点设计。
（1）即时通信模块
·通信录功能
·消息聊天
·发送图片
·表情聊天
·传送文档支持DOC、PPT、XLS、ZIP格式
·聊天自动同步功能
·查看联系人详细资料
（2）任务管理模块
·发布新任务
·发布任务进度状态
·查看任务详情
（3）登录注册模块
·企业邮箱登录功能
·注册功能
（4）消息通知模块
·阅读消息通知
·编辑消息通知状态
4.2.2 功能组织图
根据4.1.1中的内容可以看出功能模块、功能点以及功能组织架构，也可以大致看清楚整个项目的形态，这时再去制作包含业务逻辑的流程图
4.3 交互设计中的流程图制作
4.3.1 流程图绘制工具
产品经理或技术经理通常需要画一些技术性的逻辑流程图，这里推荐使用Visio、Mindjet Mindmanager。
用户体验和产品设计或交互设计师需要画一些界面流程图，则可以使用如：Axure、Justinmind、Visio、Balsamiq等原型设计工具来设计可交互的流程。
也有一些在线的流程协作工具如：Gliffy、Processon。
4.3.2 部门流程图
部门工作流程图是在多部门写作的时候可能会遇到的一种图，利用它可以方便地将各个业务线需求理清楚。
4.3.3 业务流程图
业务流程图是交互设计的核心，交互设计师需要根据需求设计出的功能进行布局，根据也无需求来提取出其中的核心流程。
4.3.4 逻辑流程图
逻辑流程图是在业务流程图确定之后根据每一个功能点进行的逻辑梳理。
4.3.5 交互页面流程图
当完成逻辑流程图之后，得出具体的功能走向，开展原型设计，此时就要把逻辑套入到业务当中来，把每个流程点用线框图或高保真原型界面替换，形成页面流转图。
4.4 业务流程案例
略。
4.5 流程设计技巧
4.5.1 技巧一：充分理解需求
设计功能的目的是满足需求，但不能仅满足功能需求，还要注重体验，体验不好，使用率和转化率始终上不去也注定是一个失败的产品。
4.5.2 技巧二：提取核心业务流
需要再设计之初就要想好什么是产品特色，怎么体现出产品特色功能，这就需要根据核心需求提取出核心业务需求，并根据核心业务需求设计出产品的功能业务流程。
4.5.3 技巧三：逻辑描述清晰
逻辑的清晰是基于流程设计而言的，在做设计的时候要严格遵守已经确认的逻辑流程。
第五章 原型设计
5.1 原型和原型设计的概念
1.原型的概念
在交互领域讲的原型是指根据产品需求，进行产品具体化形态设计后形成的Demo,我们称这儿Demo为原型。
2.原型设计的概念
针对产品需求做出的具体形态展示的作业过程，一般理解为框架、结构、页面地图的设计展示。
（1）线框图
（2）低保真原型
（3）高保真原型
5.2 原型设计的历史
略。
5.3 原型设计未来发展趋势
web服务+APP展示+pc端的跨平台服务模式。
5.4 原型设计与产品设计的关系
产品设计也包含原型设计。产品设计师主要负责：需求整理、框架搭建、系统架构的设计和PRD的编写。
5.5 常用原型设计工具
①需求调研阶段会用到：XMind、Mindjet、Excel、Visio等
②原型设计阶段会用到：Axure、Justinmind、Visio、AI、PS、Sketch等矢量图制作工具。
5.5.1 需求与逻辑：使用思维导图理清产品细节
5.5.2 Axure原型设计工具
略。
第六章 高保真原型设计
6.1 什么是高保真原型设计
高保真原型是指一个利用原型设计工具做出的交互原型+UI设计师切图，形成一个与真实产品一致或高度相似的原型Demo。
6.2 关于高保真的争论
（1）需要的场景一：以项目为导向
（2）需要的场景二：以UI视觉界面为导向
6.3 实例：制作高保真原型
略。
第七章 测试并评估交互设计原型
1.什么是测试并评估交互原型
原型评估是指描述用来确认脚骨、逻辑、使用场景的交互设计方案的正确性、完整性、安全性和质量的过程。
2.为什么要测试并评估交互设计原型
为了确保交互原型是一个可以被项目组执行、被用户所接受的设计方案。需要测试和评估交互原型。
7.1 常用的测试方法
1.通过建立用户模型进行内部自测
用户模型测试是指由设计师虚构出一个典型用户，来代表一个用户群，用户模型的内容包括消费习惯、产品使用习惯、生活习惯、性别、年龄、收入、地域、情感、上网方式、搜索历史、名片关键词等。
根据项目情况设计3-6个用户模型就足够代表所有的用户群体。
2.进行可行性分析测试
可行性分析测试是产品规划阶段必不可少的步骤之一，如果你的方案是一个不可实现的方案，那就最好不要浪费别人的时间来阅读和执行它。
虽然我们的工作时间和资源有限，但你设计的产品是给真实的人所使用的，因此，也应该在真实的用户身上进行测试。
3.组织焦点小组
焦点小组的说法源于国外，这个说法和“用户访谈”类似，可以理解为用户访谈就是焦点小组，其目的就是把目标用户、已有用户、相关专家等人员组织起来由一个主持人给出话题进行讨论，并记录大家发言，然后总结出有用的信息来帮助整理需求和设计产品。
4.专家把关
在产品原型测试和评估阶段，找经验丰富的产品经理、交互设计师等UED专业人员对产品进行测试，发现可用性问题并给出解决方案。
7.2设计测试用例
测试用例是一个文档，用来描述交互动作中的输入数据、点击或滑动等动作、等待时间等，用户根据交互动作，测试所期望的结果是否能正确呈现。
7.2.1确定用户场景
7.2.2明确任务
设计测试用例时要明确产品设计中每个功能的使用场景，并为测试人员解释清楚，明确任务后要给具体的人分配具体的任务，并根据任务搜集测试结果。
汇总问题和讨论解决方案。
7.3测试和评估交互原型总结
略。
第八章 交互设计说明书的制作
8.1 交互设计说明书的类型
交互设计说明书是用来梳理交互事件、页面流程逻辑和跳转等交互懂的文字+图标的描述文档，并分别提供给UI设计团队、研发团队及测试团队，甚至有些还需要提供给老板等人查看。
8.1.1 正式版交互设计说明书
正式版交互设计说明书多以文字为主，其中主要页面的交互界面截图、注释、文案等都要写清楚。
8.1.2 Visio版页面逻辑流程交互设计说明书
页面逻辑流程交互设计说明书注重界面交互逻辑，并有清晰的文案注释，这样可以很方便地将页面介绍清楚，但是只做起来比较繁琐。
8.1.3 Axure版本PRD或交互设计说明书
是指在Axure里制作完成后生成的HTML页面，采用这种方式不仅修改方便，而且支持多人在线协作编辑。
8.2 如何编辑交互设计说明书
8.2.1 交互设计说明书的阅读对象
1.产品经理场景：交互逻辑、功能架构、交互事件、界面页面流转与内容布局等。
2.UI设计师场景：具体页面数量。
3.研发工程师场景：明确表示出关于功能设计、页面逻辑、组件交互等信息的细节。
4.测试与需求场景：每一个功能的交互动作与事件，配合说明性文字解释交互设计的思路与实现路径。功能点、业务逻辑、界面元素、交互过程分解步骤。
8.2.2 交互设计说明书包含的内容
1.写什么
其实交互文档就是页面文档，把原型截图或原型直接化成一个文档即可，所有的软件页面、状态都分离出页面进行展现，然后加入页面流程和交互动作说明文字、箭头指示线条灯。
关键点：逻辑结构、页面跳转、交互状态的文字说明，统一交互体验动作，确保页面组件的一致性。
2.怎么写
一般的交互设计说明书的文档结构如下：
文档封皮与版本信息；
目录页；
log修订记录页；
交互行为逻辑图+文字说明；
页面展开图+逻辑+文字；
详细介绍其他单独的交互动作。
第九章 组织交互设计评审会
略。
第十章 产品与交互设计都要懂
略。
