交互设计
<h2>交互设计</h2>
<h4>交互设计的定义</h4>
<p>交互设计，主要是指人和物之间的交互手段、交互行为、交互方式的设计。</p>
<h4>交互设计和用户体验的关系</h4>
<ul>
<li>用户体验研究的是用户使用产品时的感受</li>
<li>用户体验设计关注的是：产品形态、用户行为和要呈现的信息</li>
<li>交互设计研究的是人和产品互动的机制</li>
<li>交互设计关注：用户行为，以及对形态、信息的影响</li>
</ul>
<h4>交互设计要考虑的范围</h4>
<ul>
<li>【人】明确我们是为谁做设计，考虑角色和认知程度</li>
<li>【场景】明确产生需求时的时间、空间环境。考虑主要场景、次要场景、异常场景</li>
<li>【目标】明确产生需求的原因。考虑核心目标、辅助目标、随机目标</li>
<li>【媒介】明确和什么实体产生交互来完成目标。考虑实体上各元素的文案和视觉表达</li>
<li>【行为】指的是用户如何操作最终达成了他的目标，考虑交互时的情绪和反应，要符合用户预期</li>
</ul>
<h3>交互设计的原则</h3>
<h4>目标驱动设计</h4>
<ul>
<li>设计第一，程序第二</li>
<li>将设计责任和编程责任分开</li>
<li>对产品质量和用户满意度负责</li>
<li>为产品找到匹配的用户画像</li>
<li>发挥团队的力量</li>
</ul>
<h4>可用性</h4>
<ul>
<li>状态可见</li>
<li>贴近真实世界</li>
<li>用户可控</li>
<li>一致性</li>
<li>防错防呆</li>
<li>所见即所得</li>
<li>灵活高效</li>
<li>美观极简，一目了然</li>
<li>容错性</li>
<li>人性化帮助</li>
</ul>
<h3>为什么要制定交互规范</h3>
<ul>
<li>提高产出效率：利于新人学习， 快速上手项目；解放重复工作，迅速搭建项目</li>
<li>保证产出质量：提升产品方案的可读性，提高项目实施效率；确保产品方案的全面性，提现产品经理的专业性</li>
<li>统一产品体验</li>
</ul>
<h3>交互设计的工作流程</h3>
<ul>
<li>明确业务目标</li>
<li>明确需求范围</li>
<li>明确产品架构</li>
<li>规划页面层级结构</li>
<li>搭建页面布局框架</li>
<li>页面填充组件元素 </li>
<li>标注组件静态逻辑</li>
<li>标注动态触发逻辑</li>
<li>标注页面关联逻辑</li>
<li>自查&评审，补充遗漏细节</li>
</ul>
<h4>交互设计的页面结构</h4>
<ul>
<li>评审说明</li>
<li>评审问题说明</li>
<li>流程和全局逻辑说明</li>
<li>一级页面，二级页面</li>
</ul>
<h4>页面布局框架</h4>
<ul>
<li>导航布局</li>
<li>列表布局</li>
</ul>
<h4>组件元素</h4>
<ul>
<li>基础元组件</li>
<li>通用复合组件</li>
<li>业务复合组件</li>
<li>页面模板组件</li>
</ul>
<h4>标注逻辑</h4>
<ul>
<li>静态元素标注</li>
<li>动态交互标注</li>
</ul>
<h4>页面关联逻辑</h4>
<ul>
<li>同一页面，根据用户触发和返回状态，呈现不同结果</li>
<li>同一需求，设计不同页面跳转、关联页面样式改变</li>
</ul>
<h2>交互原型文档</h2>
<h4>定义</h4>
<p>交互原型文档是一套用来承载产品设计思路、设计方案、信息架构、原型线框、交互说明等内容的可视化页面</p>
<h4>价值</h4>
<ul>
<li>帮助产品经理理清产品思路、记录设计过程</li>
<li>帮会组产品经理提高沟通效率、证明专业能力</li>
<li>是产品需求文档的重要组成部分，升值可以替代产品需求文档</li>
</ul>
<h4>给谁看</h4>
<ul>
<li>【UI设计师】便于了解产品业务背景、分析用户心理，产出匹配的视觉效果</li>
<li>【开发工程师】便于理解业务逻辑、信息结构和用户操作流程，从而能提前搭好代码框架，约定好分工</li>
<li>【测试工程师】便于准备好测试用例，能快速按照交互原型复现问题</li>
</ul>
<h3>写交互文档的注意事项</h3>
<ul>
<li>页面要有一定的层级结构</li>
<li>页面元素以灰、白、黑为主，标注尽量用一种亮色</li>
<li>页面展示内容尽量仿真，包括页面尺寸、页面排布样式、页面显示字数和文案</li>
<li>排版对齐、线头闭合无重叠交叉、元素使用统一、文案前后一致</li>
<li>不要所有子页面交互跳转都放到一个页面中，按模块切分，辅助以超链接跳转</li>
<li>用结构化、程序化语言描述逻辑，防止遗漏</li>
</ul>
<h3>写交互原型文档的步骤</h3>
<ul>
<li>撰写项目说明</li>
<li>编写全局逻辑和全局策略</li>
<li>编写产品架构图和业务流程图</li>
<li>按需求编写子页面交互流程+页面线框图</li>
<li>复盘、评审、记录问题和项目排期</li>
</ul>