⑴ 交互设计基础知识整理
交互设计： 人与产品（系统/应用/服务等）互动交流沟通的过程设计；产品的输入方式是否直观、简单、清晰、安全；产品的输出方式在不同环境中的适应性、以人类和嫌李宽文化角度表述而易于被理解。
交互设计所需要了解的知识体系包括：控件、布局、路程；用户、目标、场景；用户调研、竞品研究、设计方法、设计心理学；拓展类的知识：心理学、经济学、社会学、市场、运营……
易用性包括：易理解性、易学习性、易操作性。
·让用户容易理解： 层次清晰；功能区块的划分明确；区分可交互元素与不可交互元素；入口要明确，区分优先级；
·让用户操作简单： 符合常规的操作流程；符合平台的交互特性；产品自身操作的一致性；及时反馈；更短的交互路径；减少用户记忆；减少输入，帮助用户做选择；防错&容错（不可用置灰、格式限制、可撤销）；
1.状态可见原则
2.环境贴切原则
3.撤销重做原则
4.一致性原则
5.防错原则
6.易取原则
7.灵活高效原则
8.易扫原则
9.容错原则
10.人性化帮助原则
体验目标/本能层次 ——想给用户/用户想要什么样的感觉（激发情感、唤醒某种记忆、视觉/听觉/嗅觉等的刺激带来的情感
最终目标/行为层次 ——用户想做什芹亮么（使用产品的目的）
人生目标/反思层次 ——用户想要成为什么样的人（品牌形象）
减少用户输入/避免重复、过多的操作（减少页面跳转；重要信息前置-不需要点击就可以看到；先露出一部分，点击后展开，让跳转过程更加自然、顺滑；）
交互设计元素与非交互设计元素区分明显
防错&容错
帮助用户记忆
适当引导、提供帮助
交互路径清晰、让用户知道自己所处的位置
保持一致性
文案清晰易懂
直觉设计
网易设计师：快速掌握交互设计知识体系的4个步骤 | 优设网 - UISDC
奥卡姆剃刀原则： 如无必要，勿增实体。
菲兹定律： 到达目标的时间与移动距离成正比，与目标大小成反比。
希克定律： 选择越多，选择时间越长。对于设计而言，可以帮助用户选择（默认选择、不可选的情况置灰）、减少选项、或者将选项分类、区分权重、让用户分步选择等。让用户一次面对的选项较少。
特斯勒定律： 复杂性守恒定律。产品的复杂性守恒不变，想要让用户在使用中变得简单，需要将复杂性转移给程序来处理，减少用户的操作，提高输入效率，让人来做一些决策等简单但是具有控制权的事情。
美即好用效应： 当产品足够美观、吸引人时，用户可以容忍一些操作上的不方便。比较适合于文艺类、慢生活类的产品。不是故意做得难用，而是在设计决策时，可以为了美观牺牲一些操作效率，如增大留白/显示面积会让浏览效率降低。
多尔蒂门槛： 系统/产品对于用户的操作响应时间<400ms，才能让用户保持专注，提高沉浸感与效率。一方面对于动效设计而言，时间需要把控，不能过长。另一方面，对于网络、设备性能等引起的等待时间过长，可以考虑使用过渡方式（过渡动画、占位符）来减缓用户的焦虑情绪。
雅各布定律： 操作方式与主流产品或者同类型方式保持一致，可以让用户更快上手。没有更好的交互方式时，采用通用的方式会让人更容易接受。
简洁法则： 人的大脑会简化、归纳、过滤外在的信息，方便简单快速的理解外在的世界。
邻近原则&相似原则： 距离接近/具有相似性特点的对象会被认为是一组。模块内部、模块之间的距离、样式的一扰桥致/差异会区分不同的模块。
帕累托原则： 二八定律。对于大多数事件，80%影响由20%的因素造成。
帕金森定律： 任何任务都会拖延，直到可用的时间都用完为止。
同域原则 ： 元素在一个具有明显边界的区域内，会被认为是一组的。类似卡片风格，卡片内的内容被认为是一组。
米勒定律： 短时记忆，人平均能记住7±2个项目。对于信息展示而言，一次展示的条目不宜过多。
冯·雷斯托夫效应： 当存在多个相似的对象时，与众不同的那个容易被记住。对于设计而言，这也是“设计点”的所在。突出真正重要的内容。
蔡格尼克记忆效应： 人们对于未完成的任务的记忆比已完成的更深刻。对于任务的设计，需要同时关注已完成与未完成，促使、激励人们去完成未完成的任务。
人、动作、工具或媒介、目的和场景构成交互设计的五要素
·理解
·抽象
·架构
·呈现
·细节
该理论任务交互设计主要因素由围绕产品（PRODUCT）为中心的人（PEOPLE）、人的行（ACTIVITY）、环境（CONTEXT）、技术（TECHNOLOGY）所组成。
《用户体验要素》
网易设计师：快速掌握交互设计知识体系的4个步骤 | 优设网 - UISDC
《About Face 4: 交互设计精髓》
《交互设计：从物理逻辑到行为逻辑》
专业科班的答案！一个完整的交互设计流程是怎样的？
让PM无言以对！可能是最专业的交互设计流程
京东内部资料：超好用的用户体验提升模型
老年人家庭医疗保健产品交互设计研究
让设计更有说服力的20条经典原则：特斯勒定律 - 优设网 - UISDC
让设计更有说服力的20条经典原则：美即好用效应 - 优设网 - UISDC
让设计更有说服力的20条经典原则：多尔蒂门槛 - 优设网 - UISDC
让设计更有说服力的20条经典原则：希克定律 - 优设网 - UISDC
让设计更有说服力的20条经典原则：雅各布定律 - 优设网 - UISDC
让设计更有说服力的20条经典原则：简洁法则 - 优设网 - UISDC
让设计更有说服力的20条经典原则：帕累托原则 - 优设网 - UISDC
让设计更有说服力的20条经典原则：帕金森定律 - 优设网 - UISDC
让设计更有说服力的20条经典原则：同域原则、米勒定律 - 优设网 - UISDC
让设计更有说服力的20条经典原则：冯·雷斯托夫效应、蔡格尼克记忆效应 - 优设网 - UISDC
⑵ 交互、体验设计概念梳理
交互入门【 UISDC 】
交互设计是：以人的需求为导向，理解用户的期望、需求，理解商业、技术以及业内的机会与制约。基于以上的理解，创造出形式、内容、行为有用、易用，令用户满意且技术可行，具有商业利益的产品。
对需求的时候，必须要搞明白三个问题：为什么要做这个？（目标）；这个需求针对的用户群是什么？（用户）；什么场景下会使用到这个功能（场景）。
基础：设计的美学知识。交互设计的基本原则，如一致性、减少输入和减少操作步骤等；平台特性及设计规范；做交互设计方案的方法，如绘制流程图、原型图和撰写交互设计规范文档。
进阶：特定控件设计，如标签栏、列表界面和弹窗口，汇总已有设计的优缺点和设计规律；特定界面设计，界面中如何呈现特定的信息，如应用程序首页、个人资料或者数据流界面；独立常用功能设计，如注册登录、刷新和功能引导，需要了解功能背后的技术知识和产品策略，需要绘制流程图，组织线性的操作流。需要调研已有产品，并试图区分它们的优缺点。
中阶：多项功能设计，一个界面融合单独的功能，需要应用到设计方法和架构的思路。设计方法是挖掘用户需求和推动设计优先级的情景故事法、卡片分类、人物角色、访谈和问卷等；总结方法和已有的设计风格研究；竞品和优秀产品分析；最新的系统和产品分析；掌控技术。
高阶：产品架构；设计趋势研究；产品发展趋势。
理解什么是设计；学习关注人，而非仅仅是产品；读书更重要的是去感受和了解作者的体系是怎么样的；An architect knows something about everything. <101 Things I Learned in Architecture School>
交互设计师特质：逻辑思维能力强、数据分析能力好、同理心、激情、审美眼光、创新意识、良好的沟通能力、敏捷的执行能力、胆大心细、有大局观、善于观察、仔细倾听
要有自己信仰的设计原则，最好自己去总结，如“缩减、隐藏、附加、组织”。
要有自己的品牌意识
交互设计师定位【 】
交互指的是产品与它的使用者之间的互动过程，而交互设计师则是秉承以用户为中心的设计理念，以用户体验度为原则，对交互过程进行研究并开展设计的工作人员。
产品往往会给出一些故事，告诉大家用户到底需要什么样的东西，交互把东西长什么样告诉其他成员。 产品经理的核心是用户需求 ， 交互设计的核心是用户体验 。用户体验是用户对于使用或者期望使用的产品、系统或服务的主观感受和反应。用户体验五要素从表现、框架、结构、范围、到战略，划分为任务流、信息流。交互设计师主要围绕结构层和框架层，向上对接产品经理打通用户需求，如交互设计、动效设计、信息架构、信息设计、界面设计、导航设计等等。
情景化设计【 知乎 】
Contextual Design 是交互设计中以用户为中心的设计理论，是走到用户身边去，观察、发现用户在某一活动中的切实问题，并加以解决。其较少采用问卷调查的形式，主要是以观察用户的同时对其进行访谈和询问。
原则一：根本目的是提升用户体验，认清用户，包括但不限于用户的能力，目的，以及使用产品的场景，有针对性地改善用户体验。
原则二：用户很清楚要怎么做，但他们不一定能清楚地意识并描述他们行为的原因。切实观察整个行为过程，他们的动机、行为、策略、工作环境等，发现那些被忽略但是对整个行为过程起作用的细节。
原则三：好设计需要用户协作。及时向用户提问。
原则四：设计要整体化：注意整个产品过程中的连贯性，保持功能、结构、布局的连贯性。
原则五：设计需要明确地表现，及时用草图、图标的方式记录你的概念。
信息架构【 Quizlet 】
信息架构（Dillon）就是设计、落实、评估信息空间让其能够变得被潜在利益相关者从人性和社会层面接受。
设计是打造一款工具，让它能够契合具体的任务、执行人、还有使用的情景。
信息设计就是打造信息的呈现方式，契合具体任务、执行人、还有使用情景。
信息架构是一个让信息和功能可被高效获取并契合具体任务、执行人、使用情景的设计过程的应用。
UX专业名词翻译
交互原型设计：Accessibility 可达性、above the fold 首屏、motion design 动态设计、progressive disclosure 渐进式呈现、call-to-action buttons 行动召唤按钮、biometrical authorization 生物式授权、physical home button 物理主页按钮、decluttering 清楚杂乱、visual hierarchy 视觉层次、1/3 split view 三分之一屏、key color 主色调、color scheme 配色方案、flick 快速翻动、text fields 输入框/文本框、label 标题/标签、helper text 辅助说明/帮助文字、visibility icon 可见性切换图标、autofocus 自动获取焦点、text area 文本区域、soft/virtual keyboard 软键盘、placeholder/hint text 占位符文本、progress bar 进度条、picker 选择器、popover 弹出框、engaging 迷人的
原则与方法【 人人都是产品经理 】
3次点击原则：用户点击三次仍然无法方法他们想要的页面，他们将要离开。
5秒测试：向用户展示应用或者网站5秒，然后让其回想他们刚才看到的内容。这是评价关键视觉效果，以及评判用户的关注点是否符合预期影响的好方法。
二八法则：由帕累托原则 Pareto principle 引出 ，适用于任何网站，网页app或软件环境，即80％的结果是由20％的功能/特征所承担。
AB测试：将两个不同版本的线上内容提供给用户，来观察他们更倾向于哪一个。
Accessibility 可访问性：指网站或app是否可以被轻松使用和理解，以及该网站/app对残疾人或其他人群的特殊需要是否考虑完善，比如通过配色设计使色盲者也能轻松阅读。
主动倾听：一种采访技巧，即采访者通过认真倾听和及时地反应，来使交流更好地进行下去。
网页/应用数据分析：可以有效地提供你的网站/app的流量信息，它告诉你流量从何而来，以及用户主要在哪里停留。它为了解你的网站/app是否可行提供了一个很好的视角。
卡片分类法：一种帮助设计/评估网站信息架构的方法。在卡片分类活动中，参与者按自己的理解将细目分成不同的组，也可能需要给这些组贴上一定的标签。你可以使用卡片、纸张或在线卡片分类工具来进行卡片分类。
点击流分析：指在网站分析中收集和分析用户会去访问哪些页面，及以什么顺序去访问等数据的过程。访问者在网站访问的路径称为点击流。
竞品分析：对当前和潜在竞争对手的优势和劣势的评估。
使用情景分析：指收集和分析以下信息：目标用户、任务、支持其目标的工具、产品使用的物理环境、技术约束及其他会影响用户体验的因素。情境分析数据可以通过访谈、研讨、调查、站点访问、焦点小组座谈、观察性研究和情境调查来收集。
转换率：指在线完成目标交易的访问者所占比。在电子商务中，转化营销是指将网站访问者转化为付费客户的行为。提高转化率的过程称为转化率优化。
日记分析：指收集有关用户行为、活动和经验的 定性数据 的研究方法。通常情况下， 用户定期进行主动报告活动以创建活动日志 ，日记分析周期可以从几天到一个多月。
用户参与度：如何引起用户关注并保持其注意力的度量。任何吸引用户关注一个页面（无论是按钮还是菜单）的功能都是至关重要的。
错误分析：任务分析的一部分，用于标识每个指定的任务流集合出现错误的频率和类型。错误率是在给定的时间段内发生错误的频率。
人种志：通过用观察和面对面交流等方法，对人及其所处环境进行的一种研究。
眼球追踪：研究人的眼动观察屏幕或环境时产生的行为模式。通过眼动跟踪软件可以追踪用户眼睛在屏幕上的运动以了解用户频繁关注何处，并会以什么顺序浏览。
鱼骨图：旨在识别给定情况下因素之间因果关系的图表。它由一个指出了问题的“头”和代表了各种因素及其分类的延脊椎排列的骨骼组成。鱼骨有助于视觉化指出特定问题的潜在原因。
费兹定律：一个数学模型，根据目标大小和邻近度来预测指向目标所需的时间。目标越小离得越远，用户与之交互的时间越长。
焦点小组访谈：这是与参与者的一组讨论，主持人对特定主题引导出一系列的问题。其目的是获取有关用户、产品、概念、原型、任务、策略和环境的反馈。
格式塔原则：也被称为“简单原则”(Law of simplicity)，即每一种刺激都以其最简单的形式被察觉。人们不能孤立地去感知事物，而是将其作为更大的整体的一部分去观察该事物。
HEART框架：Google的HEART框架可以让你从更高的的维度去衡量用户体验。衡量的指标是：幸福感、参与度、采纳度、保留度和任务分析。
希克定律：描述了一个人对于他/她的选择作出决定所需的时间。增加选择次数将增加决策时间。
易学性：学会有效地使用一个系统或界面的难易程度。
心智模型：用户心智模型越接近网站的功能，网站的可用性就越高。
参与性设计：试图在设计过程中使所有利益相关者（如员工、合作伙伴、客户、最终用户）积极参与的设计方法，其目的是确保最终结果满足他们的需求。
人物画像：基于可用数据和用户访问所创建的代表性用户。虽然角色的个人资料可能是虚构的，但用于创建用户类型的信息不是。
定性研究：一种关注语境和言论，而不是数字或统计数据的人类行为学研究。
定量研究：一种关注数字和统计数据的人类行为学研究，可以通过民意调查，问卷调查和咨询来完成。
调查：针对特定群体提取特定数据的所产生的一个问题清单。调查可以通过电话、互联网、面对面等其他各种方式进行。
任务分析：用于识别和理解用户与网站/app交互行为的方法。
任务流程图：一种在网站上对任务及其相互关系的视觉表达方法。
出声思考：一种在可用性测试中收集数据的方法。在可用性测试期间，通过让用户思考并说出他们所见所为来收集有价值的信息。
可用性：用户与用户界面进行交互的有效性和满意度。
用户流：用户完成任务所执行的步骤。“顶部路径”是最常见的用户流。
用户研究：侧重于通过观察技术、任务分析和许多其他方法来了解用户需求、行为和动机。
【注意点】
注意用户做什么，而不是他们说什么
什么是交互设计【 知乎 】
交互设计师工作内容：定义用户特点、需求、目标；理清用户任务和流程；定义功能；整理信息/页面结构；提出设计方案草稿，制作原型，团队讨论；跟进设计和开发；跟进上线和迭代优化；循环
让人能够创造人造物、建立对人造物的基本认知、让人造物的使用符合创造的意图。
界定一个设计是否属于交互设计的范畴：
1、人造系统复杂与否？它是否能 被人脑快速理解 ？
2、人造系统的「对话机制」是物理界面还是 虚拟界面 ？
可用性+用户体验：构建简单有效的心理映射模型。
交互设计方法论【知乎魏海海】
研究方法论（操作流程）
1.定性研究--用研（人群调查，比如问卷，访谈...）
2.设定人物角色原型
3.问题脚本，情景化思考设计，角色在使用中遇到的问题（发现问题）
4.动作脚本（解决方法）
5.画线框图（草图）
6.制作原型（体现完整流程）
7.原型可用性测试
8.进入设计开发
测试方法论（列举了常用到的一些方法）
灰度测试（A/B test）、布尔逻辑（是+否=是？“or，and，not”）、尼尔森交互设计法则（About Face）
整体的统一、突出重点/合理的隐藏、从更高一层去考虑下层的设计，战略层>内容层>结构层>框架层>表现层、实体感即隐喻/系统符合世界的操作、鲜明/形象/深思熟虑（icon 颜色 位置 大小的细节）、有意义的‘动效’（合理的动效，有目的的）、符合用户习惯、可反悔原则、反馈原则、‘不走死胡同’原则
启发式评估：
过程：1)观察者解释评估对象、2)评估者了解或使用评估对象、3)评估者评估、4)集体讨论
原则：1)系统状态可见、2)系统与用户现实世界的匹配、3)用户控制与自由、4)一致性与标准化、5)错误预防、6)认知而不是记忆、7)使用的灵活性与效率、8)美观而精炼的设计、9)帮助用户识别、诊断和修正错误、10)帮助和文档
Android Material Design 的App的设计语言
动画效果、样式风格、布局结构、组件规范、纹理、可用性
交互设计的分析层面着重点有：
（人）人物原型、（事）要解决的需求、（物）所在的当下场景
再概括为：（什么人）了解你的目标用户、（什么事）了解用户要做的事情/同理心，（解决方法&为什么要这么做）用讲故事的方式描述解决方案、（实现解决方案）（心理模型 与 实际模型 的结合）用流程图，线框图来解决。
UXD【IxD Foundation】：
UX设计的七个因素标准：有用 useful、易用 usable、可寻 findable、可信 credible、合意 desirable、可达 accessible、有价值 valuable
交互设计是设计人机交互界面，包括五个维度：词句、视觉呈现、物理空间与实体、时间、行为。
数据分析的UX
以用户为中心设计——让终端用户参与进来
功能需求——优先列出功能列表
数据探索分析——理念产生设计要求
可视化编码——选择正确形式
交互设计——优化用户交互
颜色和展示设计——融合美学和科学
【每一个数字背后都有一个重要的故事，但这需要你给他们一个清晰的并有说服力的声音。——Stephen Few】
设计规范：
小程序：
苹果：
安卓/material design：
微软：
⑶ 交互设计相关理论
1.1 需求挖掘
1）内部挖掘 ：头脑风暴、业务需求、运营反馈、产品经理
2）外部挖掘：用户研究（可用性测试、焦点小组、问卷调查、A/B测试等）
1.2 需求分级
1）通用四象限法
适用场景：交互设计师收到很多需求时
①重要且紧急的需求：立即搞定
②重要但不紧急的需求：排期实察陵现
③不重要但紧急的需求：需要考虑
④不重要且不紧急：不用实现
2）kano模型
适用场景：收集到的需求当中，哪些需求能显著提升用户的满意度？
KANO 模型是东京理工大学教授狩野纪昭(Noriaki Kano)发明的对用户需求分类和优先排序的有用工具，以分析用户需求对用户满意的影响为基础，体现了产品性能和用户满意之间的非线性关系。
①必须具备的（Must-have）
②所期望的（Linear）
③超出预期的（Exciter）
3）马斯洛需求层次理论
适用场景：需求实现的价值有多大？
该理论是由美国心理学家亚伯拉罕·马斯洛在1943年在《人类激励理论》论文中提出，人类需求像阶梯一样从低到高按层次分为五种，分别是：生理需求、安全需求、社交需求、尊重需求和自我实现需求。
①生理需求
②安全需求
③社交/情感需求
④尊重需求
⑤自我实现需求
注：位于金字塔顶端的需求，能使利润最大化。
2.1 用户体验五要素
适用场景：采用五要素的方法，从不同层次指导产品的框架设计。
战略层：产品目标及其目标用户（做什么、为谁而做？）经营者和用户分别想从网站得到什么。
范围层：功能及其内容需求整合（需要做哪些？）
结构层：交互设计及其信息架构（怎样做？）
框架层：界面设计、导航设计和内容（信息）设计（要做成什么样子？）
表现层：功能及内容的视觉呈现（做成了什么样子？）
2.2 神奇数字7±2
1956 年乔治米勒对短时记忆能力进行了 定量研究 ，他发现人类头脑最好的状态能记忆含有7（±2）项信息块，在记忆了 5-9 项信息后人类的头脑就开始出错。与席克定律类似，神奇数字 7±2 法则也经常被应用在移动应用交互设计上，如应用的选项卡蠢手不会超过 5 个。
2.3 席克定律 Hick’s Law
定律内容：一个人面临的选择（n）越多，所需要作出决定的时间（T）就越长。用数学公式表达为反应时间 T=a+b log2（n）。多应用于软件/网站界面的菜单及子菜单的设计中，在移动设备中也比较适用。
2.4 Occam’s Razor 奥卡姆剃刀原理（简单有效原理）
这个原理被称为“如无必要，勿增实体”，即如有两个功能相等的设计，那么选择最简单的。
2.5 卡片分类法
适用场景：为我们设计导航、菜单以及分类提供帮助，例如，银行APP转账和查询余额两个功能是否放在一起？资金归集呢？
卡片分类法是一种规划和设计互联网产品或者软件产品的信息构架的方法。它属于用户研究中的一种方法，简单来说就是用户来对信息卡片（或者是菜单卡片）进行归类，从而得出信息关联性的一种方法。我们最后把关联性更强的菜单放在一起，就形成了较为科学的一套信息分组。
3.1 格式塔心理学
适用场景：界面设计时，选择有容易理解的形状，把相关联的元素组织在一起。
3.2 交互设计四策略
适用场景：界面设计元素组织
1）删除-去掉不必要的的按钮，直至减到不能再减
2）组织带没嫌-按照有意义的标准把按钮划分成组
3）隐藏-把那些不重要的功能隐藏，避免分散用户的注意力
4）转移-只在主要界面/设备保留最基本功能，将其他控制转移到其他界面/设备/用户里
3.3 尼尔森可用性十大原则
适用场景：产品设计与用户体验设计的重要参考指标。
1）Visibility of system status 系统可见性原则
2）Match between system and the real world 匹配系统与真实世界（环境贴切）
3）User control and freedom用户的控制性和自由度（撤销重作原则）
4）Consistency and standards一致性和标准化（一致性原则）
5）Error prevention 防错原则
6）Recognition rather than recall 识别比记忆好（易取原则）
7）Flexibility and efficiency of use使用的灵活高效（灵活高效原则）
8）Aesthetic and minimalist design 审美和简约的设计（易扫原则）
9）Help users recognize, diagnose, and recover from errors 帮助用户识别，诊断，并从错误中恢复（容错原则）
10）Help and documentation 帮助文档（人性化帮助原则）
3.4 费茨定律 Fitts’ Law
适用场景：菜单的设计，可点击对象的尺寸设计
定律内容：从一个起始位置移动到一个最终目标所需的时间由两个参数来决定，到目标的距离和目标的大小（上图中的 D与 W），用数学公式表达为时间 T = a + b log2(D/W+1)。
⑷ 交互总结篇（一）：框架布局篇
上篇文章里面简单介绍了一下关于交互设计分析的三维度，即框架、流程和状态；这里就不做特殊介绍了，详细内容请见 《三维度解析一个产品的交互设计》 。
而本文作为交互设计总结篇的第一篇——框架布局篇，主要是系统地整理一下交互框架设计所需要考虑到的方方面面。
首先我们要先理解一个概念：
什么是交互框架？ （主要是指互联网产品）
框架是整个或部分系统的可重用设计，表现为一组抽象构件 及构件实例间交互的方法
这是官方的定义，翻译成人话就是搭建一个产品能够使其可拓展，规范化，有条理，可快速迭代优化的方法。好像还是不好理解，让我们举一个通俗易懂的例子：假如我现在有个空房子，我要重新改造它，那么我首先要考虑的就是其房间结构（ 也就是框架 ），比如我要设计几个卧室，几个客厅，分别占多大面积，在什么位置等等（ 信息架构 ）；然后还要考虑如何设计门和窗户，怎么能够在不同房间互通（ 导航方式 ）；接着再思考每个房间里面分别需要怎么布局，分别需要哪些家居和电器，具体在什么位置（ 页面结构 ）；然后再不停的细分下去，直到考虑全每个细节，那么一个产品完整的框架就基本上搭建出来了~
理解了框架的概念后，可能我们还是会有疑问：
为什么要做框架设计？
还是上面房子的例子，假如我不考虑房间布局，随心所欲地将我的家具和电器到处摆放，我将卧室放在房子的最里面，我需要依次穿过客厅、厨房、洗手间才能到到达；我将马桶放在卧室，把床放在客厅，把厨具放在洗手间，把衣柜放在阳台，把洗衣机放在厨房……各位可以想象一下你的房子要是要被设计成这样你还想住吗？同理，一个框架结构混乱的产品你的用户也是不会用的。但凡在行业里有些影响力的互联网产品，其产品的框架和结构必定是由产品和设计人员精心思考并设计过的。框架是一个产品的骨骼和经脉，它是一个产品能用与否的基础所在，所以在开始产品设计之前先进行框架结构的梳理是非常非常重要的！
那么对于交互框架：
我们又该如何去思考和设计呢？
我将其总结为3个步骤：
对于产品和设计来说，这个词肯定是不陌生的，那么信息架构是个什么东西呢？
这就是某app产品的信息架构图，通过不同级别的分类，将其所有的功能点展示出来的一个功能信息框架图。一般来说这种架构图主要是由产品产出，而有些比较专业的交互前期也会参与其中，下面还是以设计房子为案例来探究一下信息架构到底该怎么做。
首先我们要想清楚房子有几个房间，分别需要哪些家居和设备闹春厅（液隐收集需求）
收集完需求后，我们需要开始对需求进行整理和分类，这里整理的规则可以参考 卡片分类法和卡诺模型 ：
整理完成后最后产出信息架构图：
信息架构完成后并没有结束，你还需进一步思考： 还有没有其他问题呢？有没有漏掉的功能？功能分类有没有问题？这个框架拓展性如何？结构是否足够扁平？ 等等……如果不考虑森世清楚那么就很有可能会出现马桶被摆放在卧室这种情况了。
当信息架构确定好了之后开始思考第二步：
导航就像是房子里面的门，是贯穿整个产品的入口，导航做的好的能让用户快速达到目标，导航做的不好会让用户迷失在茫茫的信息海洋中不知所措，目前在app业内主要的导航模式有3种： 选项卡式导航、抽屉式导航和跳板式导航。
选项卡导航：iOS上又叫Tab bar，典型代表像淘宝、微信，这类产品相对体量较大，产品结构和流程逻辑也都较为复杂多变；
抽屉式导航：代表如滴滴、摩拜等，这类产品都有一个很共性的特点就是“单线程”，即用户目标明确，操作流程单一，属于“强流程，弱框架”的类型。
跳板式导航：也叫9宫格式导航，典型代表如美图，这类产品也有着比较鲜明的特点“多线程单流程”，即功能入口较多（一般5个以上），操作流程单一，常用于美图类产品和一些B端类产品。
虽说不同的产品形态决定了其不同的导航模式，然而业内几乎90%的app都是采用选项卡导航，选项卡式导航的确拥有非常显著的优势：结构简洁清晰，操作便捷，拓展性强，稳定性好，确实是很多app首选的导航模式，然而并非一概而论， 你所选择的导航一定是跟你的产品类型和框架结构相互关联的，滴滴采用抽屉式导航而非选项卡导航是由其产品本身属性所决定，豆瓣一刻的导航采用抽屉式是因为本身产品框架结构较为简单的原因。 所以采用什么导航方式要灵活变通，没有最好的只有最适合的，比如下面3个例子：
片刻使用的是驼式导航，是选项卡导航的一种变形，强化了某一个重要或高频繁操作的功能，多用于博客类，直播类app中；
好奇心日报用了一种很罕见的悬浮导航，至于为什么会这么做，各位可以自己去思考；
Hyperlapse更是大胆，它根本就没有导航，这个产品全身上下就只有一个功能；
结合自己产品类型和框架结构，灵活选择导航，不要拘泥于形式，多尝试多思考，总会发现最合适的那个。
完成导航设计后，来到最后一个步骤：
页面结构即页面布局，是针对单个页面不同控件和元素的布局展示关系，就像房子的房间大小位置都设计好了，那么接下来就考虑每个房间里面该怎么添置家居了，比如卧室里面的床，衣柜，台灯，空调等等这些东西该怎么布置，分别放在什么方位，具体占多大位置，这样摆有什么影响等等，房间里面布局的好坏影响空间的运用，也影响了房间的美观整洁和整个房子的格局风格，同理， 页面的布局好坏就决定了用户的使用和阅读体验，决定了整个产品的调性和品位，最终影响了产品的转化。
那么一个优秀的页面布局具备哪些特点呢？
1、主次分明，结构清晰：
结构清晰的页面各个元素和控件处理的非常得当，相反结构混乱的用户的关注没有焦点，看了很长时间都不知道你的页面想表达什么，也不知道该如何操作，下面看两个例子：
12306的首页结构看起来似乎毫无层次感，页面结构就像是随意的信息排列，再看看智行的首页，卡片式结构视觉焦点更清晰，信息的排版和布局也更有层次感。
2、化繁为简，引导清晰：
特别是移动端产品，手机屏幕尺寸有限，如何在最短的时间里吸引用户的眼球， 设计师需要做的是做减法，删除干扰用户的不必要的内容，强化核心的操作流程，快速引导用户达成目标。
让我们再看一下上面12306的首页，可以发现它的查询页面包含了出发点、目的地、出发日期、出发时间、席位、车次筛选和添加乘客，也就是说用户需要浏览这些信息后然后再进行一步步的操作选择，等这些全部设置好了之后估计票早都抢完了，而智行就机智了很多，它将出发时间，席位，添加乘客等非重要信息进行了删减，就连车次筛选也只是用了开关设置，所以大大提升了用户的查询效率。操作指引方面，出发时间是一个非常重要的必填操作，智行对于时间选择有比较强的引导，而12306的出发时间根本看不出来是可以点击操作的。
3、操作方便：
这里操作方便更多适用于移动端，特别是现在手机尺寸普遍越来越大，用户单手操作越来越困难，所以我们在设计页面结构布局的时候也是要考虑到人体工程学的，特别是某些特殊场景使用的app，比如地图类应用，用户使用场景多在户外（步行、骑行、公交车），用户单手操作的场景非常之多，如下图所示：
左图是用户单手操作的触摸区域图，从图中可以看出界面的左上区域属于触摸困难区，下方是舒适触摸区，所以在处理页面信息布局的时候就可以考虑将重要展示类信息放在页面的头部和中部，而需要操作类的控件和按钮可以考虑放在下方用户容易操作到的区域。我们再看右图，是高德的首页，我们可以看到高德的头部有个搜索框，是属于重要按钮控件，然而却放在了头部用户难操作的区域，那么高德当然也意识到了这个问题，于是乎他们在页面的底部放了一个“路线”入口，能够让用户在单手操作的情况下同样也能快速完成路线查询。
其实关于页面结构，设计师们要考虑的点很多，也不仅仅单纯地用几个点就能完全涵盖进去的，不同的产品属性会决定其框架和导航，也决定了其页面的展示布局，比如网易新闻和淘宝的信息展示方式就完全不同，一个是浏览，一个是逛，两者间的使用场景和用户心理是完全不一样的。即使是同一属性的产品其页面结构和布局也是千差万别的，比如下面4个例子：
虽然都是互联网金融产品，也都是展示首页，然而可以看到每个产品的首页展示形态完全不同，有的主推产品和收益，有的引导登录购买，有的主推运营活动，有的主打社区互动， 究其背后形态各异的原因跟其产品定位与运营策略有重要的关联，设计师们分析产品的时候不仅仅需要从设计本身出发，还要思考更多背后潜在的原因，从而达到真正意义上的“闭环”。
好了说了这么多，最后总结一下，产品交互框架设计需要经历的3个步骤：
1、信息架构： 功能需求的筛选与分类，根据不同权重和属性进行级别的划分；
2、导航模式： 根据产品属性和产品架构来选择最为合适的导航方式；
3、页面结构： 结构主次分明、结构清晰、引导明确以及操作方便是一个优秀的页面结构的必要条件；
框架是死的，人是活的，设计的思维大多都是发散的，合适的方法论确实能够在关键的时候提供思考的方向，但不可固步自封，设计师需要不停地学习、思考、交流、总结、创新，因为这个过程本身才是设计最重要的意义~
（待续……）