交互课程-交付与发展

交互交付与发展导师@杨超（微信公众号：互联网设计狮）introduction导师介绍杨超

东华大学硕士微信公众号@互联网设计狮现任上市公司UED团队负责人，曾任职网易、携程、中国移动，负责过亿级用户量产品，也做过还没面市就夭折的产品。起点学院讲师，设计夹、浙大特邀分享嘉宾，爱民谣也爱骑行，骑车环过中国最南的岛，亚洲最美的湖...我的口号：为中华之崛起而努力填坑31如何撰写交互说明输出大家满意的交互文档怎么说服大家接受你的方案24交互作品整理与面试35交互设计趋势4为什么撰写交互说明交互说明产品经理交互设计APP开发视觉设计前端开发后台开发项目经理测试工程师项目经理运营人员5如何撰写交互说明全局性单独性6全局性交互说明沉淀全局性元件库提高统一性及效率，避免重复绘制8交互说明原则由大到小明确细节务求全面9常见单独性交互说明①隐藏的动态面板如：弹窗，隐藏的操作等。10常见单独性交互说明②一个部件多种状态需要在交互注释中说明，并且罗列出多种交互样式，便于明确细节。可操作不可操作11常见单独性交互说明③异常状态对于空数据、错误、加载等，可以在单独交互注释中标注，也可以归纳到全局性交互注释中进行描述。12交互说明样式一般页面特殊页面13交互说明样式14页面交互动作交互动作是指用户与界面交互时的手势15页面交互动画交互动画是指手动或被动触发的界面动效16交互说明示例17交互说明维度表交互说明定义前置条件默认值/状态列举枚举值动作/动画页面流转异常流程状态业务规则极限情况视觉描述该元件的概念描述清楚当前软件存在的前置条件描述默认值内容（提示文案、按钮的默认状态、页面的初始情况等）在原型元件中，列举全部枚举值，如果元件无法列举全部枚举值，在注释中说明描述是操作那个元件以及操作的动作，写清该操作产生的动态效果和结果一般和操作动作动画一起，用线标注页面的流转关系完成的描述异常流程的过程情况描述元件的各种状态描述清楚页面上的数据书写、数据校验、业务逻辑等规则描述当出现极限情况时的处理方案写清视觉需要注意的而一些点如：该按钮为订单提交按钮如：用户可点击提交按钮的前提是用户已点击确认阅读如：选择地址时，默认选择最近一次使用的地址。如：账单状态有：已支付、待支付、已过期等。如：点击按钮，从屏幕下方弹出支付确认弹框，耗时0.3s如：点击下一步，从右方划入订单确认页面如：点击支付按钮，case1：当余额不足时，XXXXX；case2当网络异常时，XXXXX如：当输入文案后，该按钮状态变为可用如：日期格式：YYYMMMDDD；错误提示：密码需要包含数字、大写字母、小写字母三种如：提交订单时，提交瞬间最后一件物品被人购买，系统提示无法购买如：购买成功页需加入品牌元素，传达庆祝喜悦的情绪181如何撰写交互说明输出大家满意的交互文档怎么说服大家接受你的方案24交互作品整理与面试35交互设计趋势19为什么撰写交互文档专业性效率20交互文档-封面交互文档的第一页，由标题、时间、联系人构成●标题：产品名称_版本号_交互文档。版本号：主版本号_子版本号_编译版本号（修正版本号）；●更新时间：示例：2017-03-01；●联系人：撰写人+工号+QQ号（根据实际沟通方式来写）21交互文档-文档信息交互文档的第二页，由需求列表和修改记录构成需求列表主要由更新版本、上线时间、更新时间和需求概述四部分构成。此部分由产品经理提出确认并呈现在交互文档中。修改记录●由修改日期、原因、内容三部分构成。22交互文档-信息架构交互文档的第三页●信息架构主要由功能及相关落地页构成；信息架构中的名称应保持简洁明了，避免虚字，并保证前后功能页名称一致。信息架构一般通过脑图工具绘制，如MindManager、Freemind等；标题前应添加数字进行区分，子标题根据父标题进行标注，如父标题为1，子标题应为1-123交互文档-用户流程交互文档的第四页用户流程为在此产品中的主要用户流程，不用涵盖全部子流程；●用户流程包含了用户看到什么和做了什么。用户流程24交互文档-目录交互文档的第五页●一般由总标题、福标题（如有）、分标题（如有）构成；●标题应与信息架构中的名称对应，简洁明了，少用虚字；标题应添加链接，当鼠标点击时在当前窗口打开标题链接。页码对应标题，标于标题的右侧。25交互文档-界面流程交互文档的第六到...页包括了交互页面、交互说明、交互逻辑。26交互文档-附录对交互文档内容进行解释说明的文件置于附录，并在相关页面进行备注。iOS与Android区别

系统间存在差异的页面及元素进行不同设计，并置于附录。如：附录：iOS与Android区别引用

如产品规则、其他版本等信息。如：附录：引用参考

如设计元素涉及参考，需截屏或录屏给出参考信息。如：附录：参考27交互文档交互规范文档链接

281如何撰写交互说明输出大家满意的交互文档怎么说服大家接受你的方案24交互作品整理与面试35交互设计趋势29少年交互之烦恼感觉产品的用户体验这里不好那里不好，可拿着自己改进后的概念稿去找业务方时，却经常碰一鼻子灰，被无限拖延甚至直接否掉。30少年交互之烦恼感觉产品的用户体验这里不好那里不好，可拿着自己改进后的概念稿去找业务方时，却经常碰一鼻子灰，被无限拖延甚至直接否掉。Why？这鸟人是不是针对我，心中千万个某泥马奔腾而过怎么去说服大家接受你的方案呢？▎保持目标一致首先，主动关注业务动态，再基于业务阶段目标去寻找设计机会点；其次，通过用研报告和接触用户发现真实用户痛点，如发现与阶段目标有出入，与团队协商调整目标；最后，良好的心态看待和接受中途调整，只要它符合产品定位、有利于业务长期发展，但要注意有限时间内目标优先级的分配，不要同时向多个大目标出击最后却顾此失彼。▎做个PPT展现完整的思考过程并可视化，和设计稿本身相比，前期的各种调研、分析、发散、推导过程同等甚至更加重要。在组织呈现给业务方时需要注意逻辑串联和可读性，推导过程论据充分、环环相扣，描述不过多使用UX专业术语，而是大家都能理解的用户语言（简单来讲就是说人话）。▎群体决策内部Review，到外部评审。用户体验设计师在整个设计提案过程中需要全程跟踪参与，但是全程参与不等于全程负责，把事情适当交由更专业的人去完成效果会更好，共创式的思维碰撞带来的灵感启发远多于一个人闷头执行。邀请利益相关方和组内其他设计师共同脑暴、共同绘制草图、共同进行设计比稿……让大家的想法在Demo未完全成型的早期阶段得到充分的考虑与参与，与一个人闷头画完交互稿甚至高保真，再拿去一一说服众人接受，更加容易通过。▎注意商业技术平衡我们通常习惯从用户视角去思考和提案，但仅仅站在用户视角是远远不够的，也需要在前期的时候就充分考虑和沟通诠释清楚设计方案的商业价值和技术可行性。同样，不要把开发当成实现你想法的工具，他们同样也会有很多有价值的想法和建议，帮助我们把设计做得更好。▎掌握必要的沟通技巧做设计提案的过程本质是以不同的侧重角度向不同角色（老板、PD、业务方、开发、用户）讲好同一个故事。第一阶段和PD等合作伙伴，用完美的逻辑讲通产品闭环；第二阶段和老板、客户，表达核心价值和实现方案；第三阶段和用户，简单易理解的用户场景为先。371如何撰写交互说明输出大家满意的交互文档怎么说服大家接受你的方案24交互作品整理与面试35交互设计趋势动效设计能够提高产品的品质感40新技术融合交互-AR&VR背后是技术的进步与基础设施的完善从PokemonGo到支付宝实景红包41多平台一体化设计42对话式交互43情感化设计44交互UX化UEUIUX45行业资深缺口大交互24份、UI204份、其他93份符合要求进入面试28人321份应聘高级以上的简历461如何撰写交互说明输出大家满意的交互文档怎么说服大家接受你的方案24交互作品整理与面试35交互设计趋势47把面试当一个需求来处理如果是学生，请把面试当成最后一门课程别挂科。无论怎样请提前了解岗位要求、面试评价、面试流程...知己知彼是面试第一步48大牛，不要忘了简历作品是硬实力，经历是你的软实力。基本信息（头像、姓名、年龄、性别、手机邮箱、城市、职称、作品链接）能力业绩（近期的成功经历及成绩等）工作经历（由近及远，起止时间、岗位名称、工作内容及成绩）求学经历（由近及远，起止时间、专业名）其他（爱好、专利、分享、作品集链接）49、别发300MB的视觉稿交互的作品集里面可适当放一部分视觉效果，特别是视觉转交互的同学，但不能拿视觉上的成功来反推交互设计上的成功。大的文件下载需要实践，易被遗忘。大小控制在30MB以内.XX作品集（300MB）50、多年前的作品就算了为什么要把自己所有的作品都给我看，有些明显是多年前的作品，质量很差，不能体现目前的设计水平。可按时间、重要程度进行排序。51、交互作品可不仅仅是线框稿主要交互作品呈现需求发现、用户画像、设计目标、信息架构、用户流程、交互页面、跟进与反馈、其他项（交互专利、