1、交互设计全流程解析EXPLANATION TO ALL PROCESSES OF INTERACTION DESIGN 步步为赢原型制作交互原型是设计师通过设计目标分析、竞品分析，找到设计思路以后，运用设计原则、交互控件，画出的展现设计方案的最终交付物。可以说，交互原型是设计前期所有准备的浓缩和精华。一份专业的交互原型，能够清晰地展现方案的各种细节。目录 什么是交互原型 交互原型的作用 交互原型的制作9.1 什么是交互原型交互原型是设计师在接到产品需求之后，经过一系列分析，将抽象的文字产品需求转化成具体的图形产品方案的产物。交互方案作为交互设计师日常最频繁的产出，会在产品、UI、开发、测试同事
2、中流转，因此也成为他们评判一个交互设计师能力的重要依据交互原型分为静态原型和动态原型9.1.1 静态交互原型静态原型的主要作用，是用于团队内部协作，它的作用是传达需求，本质上是一种沟通工具制作静态原型有两种工具可供使用：axure和sketchAxure因为可以使用站点地图来组织页面，因此比较适合于大型的、有多个页面的方案Sketch画原型效率高，输出PDF，美观、全局、不易看漏内容，无设备和网络限制，方便阅读。适合于小型的、功能单一的方案 剖面图阅读步骤：剖面图阅读步骤：1.读图名、比例；2.读各层内部构造；3.标高与高度方向尺寸标注；4.详图索引符号；5.其他。三、三、AutoCADAut
3、oCAD绘制剖面图绘制剖面图 （步骤）（步骤）1.设置绘图环境；2.绘制定位轴线、室外地坪线、楼面位置线；3.绘制墙体、楼板等构件；4.绘制门、窗并补充细节；5.标注；6.打印出图。用正投影的方法，以较大的绘图比例将房屋的细部详细的绘制出来的图样，称为建筑详图。索引符号和详图符号 详图与平、立、剖面图的索引关系是通过详图符号与详图索引符号来建立的。8详图编号详图编号12详图编号详图编号14详图所在图图号详图所在图图号（同一张图上）（不同图上）22图册编号图册编号25页号页号（用标准图集）98J6索引符号：索引符号：直径为直径为10毫米的细实线圆，细实线水平直径和引出线及编号。毫米的细实线圆，细
4、实线水平直径和引出线及编号。被剖切部位粗实线，被剖切部位粗实线，引出线表示剖切后投影方向引出线表示剖切后投影方向 剖面详图索引符号：剖面详图索引符号：详图符号：直径为14毫米的粗实线园，细实线水平直径及编号。512详图编号详图编号14基本图所在页号基本图所在页号（详图与基本图不在一张上）（详图与基本图不在一张上）（详图与基本图在一张上）（详图与基本图在一张上）外墙身详图的阅读外墙身详图的阅读.图名、比例;.墙体轴线、墙厚、墙体与轴线的关系;.各构件的断面形状、尺寸、材料及相 互连接方式等。.各部分做法;.标高与高度方向尺寸标注;.详图索引符号;.其他。二、楼梯详图二、楼梯详图 1.详图的名称、
5、比例详图的名称、比例;2.详图符号及其编号以及需另画详图的索引符号详图符号及其编号以及需另画详图的索引符号;3.建筑构配件的形状以及详细的构造、建筑构配件的形状以及详细的构造、层次，尺层次，尺寸寸;4.详细注明各部位和各层次的用料、做法、颜色详细注明各部位和各层次的用料、做法、颜色以及施工要求等以及施工要求等;5.必要的定位轴线及其编号必要的定位轴线及其编号;6.必要的标高（这里指相对标高）必要的标高（这里指相对标高）.三、三、AutoCADAutoCAD绘制楼梯详图（步骤）绘制楼梯详图（步骤）楼梯剖面详图的绘制：1.1.设置绘图环境;2.2.绘制定位轴线、室外地坪线、楼面位置线、梯段位置线等
6、;3.3.绘制墙体、楼板、梯段等构件;4.4.绘制门、窗并补充细节;5.5.标注;6.6.打印出图.小小 结结1.了解制图标准；2.掌握建筑施工图的阅读方法；3.掌握计算机绘制建筑施工图 的方法和技巧。9.1.2 动态交互原型动态原型的主要作用，是产品方案的动态演示和供可用性测试操作时使用，本质上是有一定功能局限的可操作模型苹果公司出品的Principle软件在线的动态交互稿制作网站：Flinto9.2 交互原型的作用交互原型文档的主要“目标用户”，是产品、UI、开发和测试。产品经理：主要关注设计方案是否满足业务和用户需求。交互设计师与他们讨论产品规划及业务需求后，结合用户需求，分解关键因素，
7、最终归纳出设计目标。而交互原型正是整个设计思路的阐述媒介。视觉设计师：他们需知道产品定位是怎样的？有哪些页面要设计？页面间的跳转是怎样的？各页面各元素包括什么状态？遇到特殊情况（数据加载、网络异常、极端情况等）如何设计？9.2 交互原型的作用交互原型文档的主要“目标用户”，是产品、UI、开发和测试。开发人员：他们需要知道，产品要实现多少功能？多少页面？页面间是怎么跳转的？异常情况怎如何处理？哪里需要动效？动效的效果是怎样的？页面的运行规则（如加载规则）是怎样的？测试人员：他们需参考交互原型梳理测试用例，测试用例需覆盖所有功能、使用场景、操作行为、产品细节，须保证上线无bug，或是少bug状态。
8、9.3 交互原型的制作交互原型主要包含以下3部分：项目概述方案展示设计分析（非必需）9.3.1 项目概述主要展示该需求的基本信息和迭代说明9.3.2 方案展示交互原型中必须包含以下信息：原型展现完整的流程；界面以及界面中的元素展现需求的所有功能点；界面中元素的各种状态说明；元素操作后的效果；异常、极限状态说明。9.3.2 方案展示Axure：一个页面只展现一个界面或分支流程9.3.2 方案展示Sketch：一个页面展现所有流程和界面9.3.2 方案展示高质量的交互原型的6点建议：1.同一页面的不同状态最好在一个页面展示（不要忽略极端情况）。2.页面之间要对齐，左右排列的页面顶端对齐，上下排列的
9、页面左对齐。3.界面绝大多数元素均使用黑白灰，界面色值不超3种。越深的部分代表这个部分越重要。特殊情况下需要强调某个元素，则可以使用彩色。4.界面中的控件，应遵守第八章中介绍的苹果和谷歌的控件规范。规范的控件会提升你的交互原型的专业度。9.3.2 方案展示高质量的交互原型的6点建议：5.界面中的图标，可以去iconfont（http:/ 方案展示高质量的交互原型的6点建议：6.如果是为手机应用绘制交互原型，则可以使用iPhone8的屏幕分辨率，即375px*667px；如果是为电脑网页绘制交互原型，则可以使用1920宽度的分辨率，然后考虑界面在更小的界面下应该如何呈现。9.3.3 设计分析对于一些需求本身比较庞大，涉及到的人员比较复杂的情况，可以在交互原型中加入设计分析的部分。思考题继续第六章中的需求：某APP要做一个红包活动，只要是最近30天内在APP内买过商品，就可以得到一个红包。把红包分享给5个好友，且好友都领取了红包，分享红包的人还可以再得到一张更大额度的代金券。红包的使用期限为7天。产品经理希望领红包的人数量越多越好，且领到红包的人中使用红包的比例越高越好。请结合第六章的答案，画出这个需求的交互原型。谢谢观看！
