兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
前面的文章我们分享了交互设计思维，这篇文章，我们来看看用户目标与交互目标。交互设计的核心，就是帮用户拆解这些目标并找到最优路径，让他们觉得“这事儿没那么难”。
编辑导语：很多产品在使用时，都会有“用户反馈”这一个设置，用户可以将自己的操作体验反馈给商家，但你真的了解“用户操作反馈”是怎样的一个机制吗？这篇文章详细讲解了“操作反馈”这一设置，一起来读一读吧。
前几天使用自己产品的时候，点击作业列表想要查看作业详情，点击之后没有反应，然后又连续点击了好几下，过了几秒钟，界面开始连续跳转。后来才知道，因为用户量比较大，产品稍微会有一些卡顿，导致用户点击后，产品没有实时的反馈给用户，使得用户也变得不知所措。
那为什么会出现这种情况呢？主要原因就是没有用户操作反馈。一个好的产品需要根据用户不同的行为操作，实时给出反馈，告知用户当前状态或建议，消除用户因为不确定性带来的不安感和焦躁感。
可以将用户整个操作流程简化为：用户输入—平台反馈—结果反馈。可以看出反馈其实分为两种：过程反馈（平台反馈）和结果反馈。
可以看到无论Google公司推出的Material Design，还是苹果公司的iOS设计规范，都对用户过程反馈做了细致的设计规范。
国内也有很多体验很好的APP对于用户反馈方面也做的不错，例如QQ、飞书。
当然也有很多的产品并没有做很细致的反馈设计，操作反馈作为交互设计中一个很细小的部分不会影响用户正常使用产品，但是会提升用户使用产品的体验。好的用户体验在B端对于用户来说不仅降低了学习成本，也提升了工作效率。那么如何来设计操作反馈呢？
当用户触发界面时，也就是人机交互时，界面给出的变化，这是过程反馈。
当触发结果页面不能及时告知用户时，例如点击操作区域需要跳转新页面，或者需要展示弹窗等这一类都需要经过一段时间才可以让用户看到结果的场景，需要考虑给触发反馈。
那什么时候不需要给触发反馈呢？例如点击收藏，收藏的icon会变成填充样式，用户可以实时的感受到触发结果，即不需要再给用户触发反馈。
过程反馈的方式主要分为三种。
（1）视觉反馈
用户操作界面之后，界面通过视觉的变化对用户进行反馈，比如：颜色、形状、动画等。
对于iOS系统，以及一些体验较好的应用程序分析得出主要使用场景包含：列表、宫格、操作Icon、按钮（控件）。
场景是根据样式的不同进行分类的。
a. 列表
样式：当用户点击时给列表一个灰度的背景色，让用户知道自己已经点击了触发区域。也告知用户在当前背景色块上，点击任何地方都是可以触发的。
b. 宫格
样式：当用户点击时给宫格一个灰度的遮罩，或者是一个灰度的背景色。
c. 操作Icon
样式：当用户点击时，Icon降低透明度。
d. 控件
只根据控件样式来进行举例说明，例如actionsheet，在样式上可以根据列表样式做统一规范。
Button样式：当用户点击时，按钮变色，如果是次级描边按钮，也可以增加填充的色块。
e. 步进器
样式：给点击区域一个背景色。
f. 键盘
样式：在点击时，会给一个填充的背景色、或者进行反色处理。
（2）触觉反馈
（3） 听觉反馈
用户操作界面后，界面通过声音对用户进行反馈。
iOS设置手机铃声时，选择不同的铃声时，会自动播放铃声。
过程反馈设计规范可根据产品界面的不同元素制定反馈样式。这本身是一件比较细致的工作，可能花费较大的工作量，所以在实际工作中也可根据产品功能的优先级，安排迭代顺序。
当系统对用户的操作，或因用户的行为导致的变化结果，给出的反馈就是结果反馈。
由于结果反馈的文章讲解特别多，这里就不再过多赘述，简单的总结一些常用的结果反馈方式。
结果反馈方式可分为4种样式：
弹窗分为模态弹窗和非模态弹窗。
模态弹窗会打断用户当前操作流程，也是一种强提示，用户必须和弹窗进行交互，才能进行之后的操作。
非模态弹窗一般出现2-3秒之后，自动消失，不会对用户造成干扰，属于轻量级提示。
例如当新建表单时，点击提交按钮，toast提示提交成功，这就是使用了非模态弹窗对用户的操作进行了轻量级反馈。
若删除文件时，一般会弹出一个对话框，让用户再次确认删除后的一些影响，是否删除？这就是使用了模态弹窗对用户的操作进行的强反馈。
一般用做表单的校验，让用户知道自己所填写项的状态，例如输入内容是否合理，该如何填写等提示。
页面反馈，相较于弹窗会更重一些。一般也用于比较重要的操作流程的结果页面，例如淘宝买完东西的结果页面、饿了么下单完成后的结果页面。
动画的合理使用不仅可以告知当前状态，还会将用户带入当前场景，吸引用户注意力。例如，微博的点赞，会出现一个点赞的动画，让点赞变得更加有趣。
微信图书，点击进入书本详情时会出现一个打开书本的动画，让用户带入实际看书场景，增强沉浸感。
音效的反馈也比较常见，例如ios下载时，会有叮咚一声，声音的反馈不仅提升了用户体验，对于加强品牌认知也很有帮助。
以上是我对于操作反馈的一些整理和复盘，其中也借鉴了一些大神的佳作，不到之处，希望和大家一起探讨交流。
在实际项目的运用中，也会根据实际的研发情况，逐步的去调整，不断地完善产品细节。
本文由 @小太阳不爱吃辣椒 原创发布于人人都是产品经理，未经许可，禁止转载。
题图来自 Unsplash，基于 CC0 协议。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
编辑导语：自适应设计指能使界面自适应显示在不同大小终端设备上的设计方式及技术。而内容自适应则需要对用户行为进行预判进而改变设计内容，本文作者将对自适应设计在内容上的应用进行分享，值得阅读学习。
我们一般说的自适应设计，多半指的是界面自适应，即为不同的终端设计不同的界面布局与操作流程。而内容自适应，是一种根据用户标签与操作行为预判用户目标所需页面内容的方式，他的优点是既能预测交互意图，实现信息量的智能输出，同时也能满足不同交互需求，改变界面样式，达到降低人机交互负荷的目的。
以下，是道乐UED团队 基于查阅的资料以及行业的积累，带来的一篇关于内容自适应的分享。
目录：
目前自适应界面在内容上的呈现大致包括两种类型：
顾名思义，就是根据用户当下的操作，实时判断用户所需，从而调整不同的信息展示与布局，他的优势在于能尽量减少页面上与用户目标不相关信息的展示，从而提升用户操作的效率与准确度
通过用户标签与过往数据的分析，调整页面内容的展示数量与优先级，仅展示用户感兴趣或可能感兴趣的内容，从而提高用户在使用产品中的转化率。
总的来说，内容自适应更趋向于对用户行为轨迹的纵向思考，将“用户寻找信息”的被动服务模式转化为“信息寻找用户”主动服务模式。满足差异化的用户需求，提升企业系统的用户体验和人性化服务水平。
（1）搜索
① Google搜索
自适应设计在搜索上的应用意味着针对每个用户的每一次搜索，都会产生一个定制的界面，该界面将自身塑造成所显示的信息。请看以下示例：如何根据不同的用例更改搜索结果页面。
最近，Google搜索的设计重点是在用户点击搜索结果之前传递信息。为此，Google采用了一种称为自适应设计的方法。
Google搜索适应用户需求的第一种方法是重新安排导航以适应结果。
Google有362,880种独特的方式来排列导航，以适应搜索查询。然而，自适应设计的最大例子是搜索结果本身的布局。结果页面是完全模块化的：根据搜索结果，不同的元素出现在不同的配置中。
例如，音乐家Lizzo的搜索结果集中在媒体上：一组模块以本机格式显示视频，图片和歌曲。还显示最近的新闻，推文和即将举行的活动，以及指向Lizzo在YouTube、Twitter、Facebook、Instagram和SoundCloud上的个人资料链接。直到页面底部，我们才能看到看起来像传统搜索结果的元素。
另一方面，以色列特拉维夫市的搜索结果为旅行者提供优先信息。图片、地图、当地天气以及与旅行有关的问题（“特拉维夫对游客安全吗？”、“特拉维夫以什么闻名？”）优先于传统搜索结果。模块促进了特拉维夫的活动以及对附近其他城市的推荐。搜索结果页上可能会出现数千个不同的模块，从简单的布局驱动模块到完全独立的应用程序。
例如，“aapl”的搜索结果页上，股票代码模块显示了当前价格和交互式历史价格图。
通过自适应设计，所有有关内容、格式和顺序的决策都是由算法决定的。设计人员的作用不再是创建明确的外部布局。
如今，尖端产品的设计者，以及未来日常产品的设计者，正在就生成这些布局的规则做出决策。
② 淘宝搜索
淘宝搜索结果页，当用户往下滑动查看更多时，系统判断你根据当前搜索页没有找到想要的内容，则根据不同物品展示物品的更细分的筛选，如啤酒会c展示“德国进口啤、国产精酿、比利时精酿”，方便用户找到目标物品。
③ OTA平台PC端（去哪儿、携程等）
携程/去哪儿pc端中，Tab前置条件是国内/国际，在选择国内机票时，默认单程。在选择“国际/港澳台机票”时，则默认机票往返。
这样的功能设置是基于对用户需求的深入研究得出的，主要有以下几个原因：
基于以上充分的原因，这个自适应功能设计就得以开发并成功提高用户的使用效率。
（2）根据用户静态标签优化结果
静态标签：用户主动提供的数据, 指用户不变的基础信息，多为用户固定数据，如姓名、性别、年龄、身高、体重、职业、地区、设备信息、来源渠道等。
定位地区：大众点评——切换城市
大众点评的这个功能经常被拿出来说，当你到另一个城市，通过获取定位申请，判断你是来这座城市旅游的场景，从而页面展示中入口就改成了跟旅游相关，这其实也有点内容自适应的意思，通过用户不同的操作展示不同的内容。
历史自适应主要集中在特定领域的个性化界面定制和推荐等方面。针对不同用户呈现不同界面，根据用户的类型、任务特点、喜好等提供不同的界面样式。
（1）根据用户动态/预测标签算法推荐定制内容
预测标签：平台介入的数据，指根据用户在平台内的行为数据对用户未来行为或喜好进行预测；是设计千人千面和运营策略的关键；比如某电商平台，根据用户A“月均消费5单，且有数额过万的运动商品”的购物数据，平台会给用户A打“高频、品质敏感性、运动”的标签，后期会更多推荐高品质运动商品及相关运动品牌活动的精准推送。
用户标签是构成用户画像的核心因素，是将用户在平台内所产生的行为数据，分析提炼后生成具有差异性特征的形容词。即用户通过平台，在什么时间什么场景下做了什么行为，平台将用户所有行为数据提炼出来形成支撑业务实现的可视化信息。
① 用户生产内容（UGC）
互联网上的许多站点开始广泛使用用户生成内容的方式提供服务，许多图片、视频、博客、播客、论坛、评论、社交、Wiki、问答、新闻、研究类的网站都使用了这种方式。
② 电商平台
这种平台一般会随着用户的使用，网站会积累及不断修正及展示最贴近用户喜好的产品，从而进行推荐。功能上适应了用户的喜好，会大大增加用户的粘性。
③ APP Store 应用页面大变动：不同用户可看到不同功能与内容
自定义产品页功能让开发者可以面向不同用户展示 App 的不同功能，产品页优化功能则让开发者们能够测试不同的截屏、预览视频，甚至 App 图标。
苹果指出，得益于 App Store Connect 详实且注重隐私的分析，开发者可以了解自己用户的偏好，从而决定产品页的展示内容。
④ SoulAPP创始人：Sou了APP功能符合不同场景的用户需求
SoulAPP多种匹配机制,功能符合不同场景的客户需求。Soul利用AI大数据，依照性格、兴趣等因素,划分用户。通过这种精准的方式分类用户,以便用户之间能够更高效地建立连接。第一次注册SoulAPP，用户需要通过系统的一些答题测试,以便于生成符合自己的性格报告。接着就是通过上述数据采集，划分专属圈子，这里就是大家经常说的“星球“，这些都是基于SoulAPP的AI功能。
自适应界面同样有一些“小缺点”，违背了一些众所周知的可用性原则：
内容自适应的核心在于，基于用户过往的操作以及行为路径的分析，提前预判用户下一步需要的内容，从而让用户能更便捷的使用产品。但是在金融产品的设计中比较特殊，往往用户在使用产品的一个核心需求是安全感，产品安全、资产安全、操作安全等都是用户着重关注的点，所以如果一味的进行内容自适应设计，会让用户产生“信息泄露”的担忧，从而失去对该产品的信任。
基于以上内容自适应的分析以及金融产品设计的特殊性，我们来看看有哪些可以运用到金融产品的设计中来。
（1）金融应用的[截图]功能
截图功能可以根据用户场景与用户目标两个维度进行分析。截图操作的发生几乎会发生在用户使用金融应用的各个场景，比如浏览金融产品、查看产品详情、查看持仓资产、收益等等，而不同的场景用户的目标也有所不同，我们可以根据用户不同的操作目标，为用户提供自适应的内容来方便用户的操作。
截图常见的用户目标大致分为两类：报错与分享。我们可以为这两个用户目标做一些内容上设计。
报错一般会关联产品的在线客服功能，那么我们在用户截图操作发生后，提供在线客服的入口，同时分析报错自身的用户行为，如可能是针对页面的哪个点或者哪个区域报错，那我们可以针对这一点再提供编辑截图的功能等等。
如此根据用户目标拆解用户行为，设计对应的功能来满足用户操作，从而减少用户的操作路径。
分享可根据用户场景设计不同的内容，如：
（2）金融应用的[内容管理]功能
买衣服的时候，绝大多数人在意的是是否合身，对于数字产品，同样是如此。在一个金融应用的内容管理功能当中，会推送大量的内容给用户，绝大多数的用户几乎没有时间来掌控所有的信息，导致部分对用户有用的信息被忽略，这样意味着内容的可定制化是极其重要的。
内容的可定制化体现在不同用户的分层上，基于分层，我们可以为相同类型用户推送内容。如持有私募基金的用户，我们可能会更多为其推送关于此类产品的信息以及高端用户的优惠、活动、资产报告等信息。
（3） 金融应用的[搜索]功能
金融产品的搜索，除了具备一般应用该有的内容，如最近搜索、热门搜索、搜索排行榜等，也需要基于产品特性来思考还有哪些可以展示的内容。
根据用户行为与数据分析，一般搜索的关键词为基金名称或者基金代码，而搜索的目的是查看该产品的信息以及收益情况，那么基于此类目的，我们可以当用户输入基金名称后，展示该基金最近的净值走势等内容，这样用户就可以提前了解部分基金信息，可以提前做一个判断，需不需要进入搜索结果页进一步的了解。
除了提前展示该基金部分产品信息以外，我们也可以展示相类似基金，防止用户因提前获知产品部分信息而带来的流失率，当用户不满意该只基金的近期表现，我们可以为其提供表现良好的基金供其选择，从而提高产品的转化率。
通过对自适应设计在内容上的应用探究，我们对内容自适应的设计手法及应用场景有了初步的理解，也会继续的探究并运用到实际的工作中来，希望这些思考能为大家带来一些帮助。
作者：道乐UED全体成员
原文链接：https://www.ui.cn/detail/610302.html
本文由 @道乐科技设计中心 授权发布于人人都是产品经理。未经许可，禁止转载。
题图来自Unsplash，基于CC0协议。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
编辑导语：智能手机现在对于大家来说都并不陌生，而“陀螺仪”作为手机上的一种先进硬件，可以增强手机的使用感，本文作者介绍了一些运用陀螺仪让人身临其境的设计，让我们一起来看看吧！
iPhone率先将先进硬件（如陀螺仪、重力感应等传感器）引入手机，让智能手机的硬件参数和升级成为用户的重要选购参考，设计师们也会在设计时关注到硬件的应用和潜力挖掘。今天我们浅聊一下“陀螺仪”在增强交互体验、丰富交互反馈上的实际应用。
▲ 智能手机有丰富的硬件能力
在我们的自然交互场景中，视野的变化（如观察四周）和速度的感受（如拍打摇晃）是和五感非常紧密的体验。手机中的陀螺仪和加速度传感器就是这样的硬件，可以感知我们在使用设备时的角度、位置和速度变化。
▲ 陀螺仪可测量设备的方向和角速度
通过陀螺仪传感器，手机应用能感知用户设备的角度变化并触发相应的动作和交互，拓展平面屏幕空间，实现更加有空间操纵感的体验。比如，最常见的就是的手机横/竖屏自动切换、导航指路、手机摇一摇等功能。
▲ 手机横竖自动切换
▲ 地图方向感知
通常背景氛围图片的展示区域最多只有屏幕宽度，但是结合陀螺仪的角度感知，通过视差变化可以将视图延展到原先被限制的空间之外，给用户更多的视觉信息，形成类3D的空间效果。淘宝人生的套装展示页中，当转动手机时背景图和人物模型也会跟随变化，让人物及服装的展示更加生动和有冲击力。
▲淘宝人生套装展示
当将多帧图片匹配视角变化时，甚至能带来裸眼3D的效果。
▲类裸眼3D效果
根据陀螺仪旋转视角，静态图片可以不仅仅固定在单一位置上，还可以升级为交互性内容，模拟现实空间里物品的抛、弹、跳，让信息交互更有惊喜感，让用户身临其境更有控制欲，不知不觉反复把玩。
▲ 好好住徽章动态交互
很多应用中，陀螺仪承载了其核心的能力，给用户带来突破屏幕的360度的全景体验。比如在星图类APP中，跟随陀螺仪的变化，可以将浪漫的星空变得可识别和触手可及。
▲ 星空APP–即时星图体验
陀螺仪在体感类手游游中可以说是标配，几乎所有需要感知三维空间变化的游戏都需要用到它。尤其是赛车、飞机或者体育类游戏，对角色控制和视角变化有高精准度要求。通过调整手机姿势、上下左右摆动，模拟真实空间的操控性反馈，增强了游戏空间的3D体感，用户跟随视角变化在游戏里上下翻飞，有强烈的代入感和沉浸感。
▲ 狂野飙车的镜头视角变化
▲ 和平精英体感操作
VR体感游戏中的陀螺仪跟随用户肢体的动作，实现虚拟空间物品距离和空间视角的变化。
▲ AR体感游戏
除了可以操控平面元素，在我们使用3D AR交互功能时，陀螺仪也可以增强与现实空间交互的真实感。和现实世界的自然交互一样，当相机靠近被跟踪的3D模型时，3D形象需按比例放大，并跟随相机的视角调整3D模型的展示视角。
▲ 3D应用
▲ AR跟随并触发功能
而且，在有多维空间切换诉求的场景中，可以通过监测手机的角度变化，在2D/3D两种空间中快速轻便切换。比如高德地图的步行导航，当用户抬起手机能迅速进入AR导航模式，轻松获得3D实景指引，让用户想迷路都难。
▲抬起唤醒AR导航
▲放下恢复平面导航
▲高德地图唤醒AR实景导航
在智能玩具中也会用到陀螺仪，例如Smart Car教育机器人。在它的手势控制手表上就装有陀螺仪，可以根据手势控制机器人移动。
▲ 陀螺仪体感控制
陀螺仪还能植入其他生活用品中，比如在这款潮人喜爱的LED鞋中，它跟随你脚步的速度和角度，展示炫目的灯光颜色和模式，让你成为人群的焦点。
▲ 发光的鞋子通过陀螺仪
陀螺仪除了可以带来视觉和体感上的空间感和操纵感，在音频上也能实现更真实极致的环绕声体验。比如，AirPods Pro内置的陀螺仪和加速度传感器会对佩戴者的头部进行追踪，即使你的位置变化也能使环绕音效保持在固定位置，让环境音会根据人的移动而移动，创造沉浸式的声音体验。
▲ Airpods环绕声定位
Airpods的空间音频能力，也可以应用到界面交互上。通过把头部角度变化映射到图片视角变化，形成视差效果，转动头部就能看到更多内容。
▲ Airpods跟随示例
除了陀螺仪，移动设备还有很多丰富的传感器硬件能力，如压力传感器、光学传感器、震动传感器、NFC等，各种令人印象深刻的交互表达中都有它们的身影。例如，zenly的bump功能通过近场互动快速添加好友和查看信息，字体设计网站通过屏幕多指触控可以让设计更自由和可控。
▲zenly近场互动
▲多指触屏设计字体
在体验设计中，我们可以在合适的场景使用硬件能力集成更丰富的功能，创造更加匹配自然行为和有创意的交互和反馈，为用户带来更多直接有趣的体验~
作者：能操纵空间的；
原文链接：https://mp.weixin.qq.com/s/qAz5WK9zQ7JPhgpBqmgorw
本文由 @淘宝设计 授权发布于人人都是产品经理。未经许可，禁止转载。
题图来自 Unsplash，基于CC0协议
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
编辑导语：交互设计本质上就是设计产品的使用方式的过程，“如何才能做出合理的B端交互决策”是很多人都在思考的问题。在这篇文章里，作者聚焦具体的实战场景，分享了一些自己做B端交互设计的经验，一起看看吧。
这阵子想了想关于交互知识的分享，还是应该要拓展成一整个系列的内容，包含各类组件、控件和行为的解析。
基于我的分享习惯，我会尽量避免使用太过理论还是空泛的方式进行讲解，而是聚焦具体的实战场景，帮助大家理解如何做出合理的交互决策。
交互设计本质上就是设计产品的使用方式的过程，账号怎么填写，表单怎么导出，数据怎么筛选，列表怎么排序等等……针对每个功能的使用方式，都可以花很长的时间去考虑其合理性。一个项目的交互，就是这个项目所有功能使用方式的总和。
那设计师如何开始项目的交互设计？直接进入细节，开始跟着原型制定输入框的状态，下拉菜单的展开逻辑吗？
这样肯定是不行的，项目的交互内容又多又杂，设计师会很快陷入这些细枝末节中疲于奔命。头疼医头脚疼医脚，容易造成项目细节缺乏统一性，前后矛盾，体验割裂。
所以，理解项目交互设计的正确思路，就要知道在项目中有哪些交互内容，它们对应的层级和设计对象是什么。
在这里，我把需要设计的交互对象拆分成4个种类，它们从大到小依次为：
我们先围绕在全局框架这个类型进行解释，什么是项目的主要模块排版和布局，以及为什么全局框架可以决定产品的主要使用依据和步骤。
比如大家都用过 Adobe 的软件，应该会有个感觉，就是熟悉了其中一款后用下一个，立马就能上手，完成一些最基本的操作。而如果不是 Adobe 系列的软件，用起来感觉就感觉非常别扭，往往要从头开始学起，比如对标 PS 的 Affinity Photo、Pixelmator。
为什么会出现这样的反差？就是因为 Adobe 尽可能统一了自己生态内的软件全局框架，操作方式，让全家桶用户可以用最快的方法适应不同的软件。
包括顶部的属性栏，左侧的工具栏，中间的标签栏、创作区域，右侧的不同工作窗口排列形式。
除了主要界面的布局框架外，还包含一些二级窗口的框架结构也是统一和固定的。比如打开 PS 内的首选项设置和属性设置窗口，和其它几个软件的属性设置窗口几乎一致。
而在 Affinity 中，软件首选项设置就没有使用左侧导航，而是类似 Mac 通用设置的快速入口分层模式，用惯了 Adobe 再换这个就会有股说不出的别扭。
可能有同学有疑问，Photoshop 并不是只有这几种窗口，其它窗口不就样式和上面这类不一样嘛？那是因为窗口的框架肯定是要考虑功能和场景的，即使使用了多种窗口类型，那也是有规律的应用在操作方式相近的场景中。
再回想一下 PhotoShop 的基本操作流程，就是在创建文件以后，通过左侧工具添加图层元素到中间画布区域进行排版，再在右侧属性栏中调节画布对象的图层顺序、属性。
PhotoShop 作为平面领域中的独角兽，直接影响了绝大多数同类设计软件的框架结构和布局方法。因为绝大多数设计师学习设计的入门软件都是 PS，想要让用户更快上手自己的软件，那就应该顺着他们已经习惯的方式来。
所以，从 Sketch 开始，它的框架和操作流程都和 PhotoShop 高度相似，再之后的 Adobe XD、Figma、即时设计等，都应用了几乎相同的全局框架，所以你只要掌握其中一个就能立马熟悉其它软件的使用。
而当实际功能和 UI 设计软件高度相似的其它几个 “办公应用” 结构框架不同时，上手就变得异常的困难和别扭。比如 Axure、Keynote、PowerPoint，先学了设计软件再去学这几个软件的同学一定深有感触。
而其它行业的软件，如果没有一个具备绝对主导性的产品作为标杆，那么每家公司的产品框架就各不相同。比如 3D 建模软件中的 C4D、Blender、犀牛，视频剪辑工具中的 Pr、Finalcut、达芬奇，你就是熟练掌握其中一款，对专业术语和必要功能逻辑了如指掌，也需要通过基本教学才能掌握其它同类软件。
这就是框架带来的作用，它是软件使用方式和操作流程的主要依据，其它细节的交互和操作都是附着于全局框架下的子集内容。之所以交互设计要从全局框架开始，原因就是设计师要：
先确定产品整体操作的方式，再去考虑按钮和表单那些细节的处理。
虽然前面举例的都是软件案例，但只要仔细留意，你们就会发现网页端管理系统的操作框架和一般软件别无二致。只不过相比较五花八门的专业软件来说，B 端管理系统的操作框架模式经过了长期的演化形成了固定的几种套路。所以网上找到的管理界面案例，看起来只是围绕几个固定的布局翻来覆去的改颜色和图标。
虽然它们看起来都很像，但依旧包含很多交互细节是需要设计师留意和制定的，不是简单照搬就能设计出符合项目需要的全局框架。
所以，交互的全局框架到底怎么设计？
它不是一个个体，而是一个由多个组件、页面类型、适配方式组成的合集概念。想要有效制定，就需要先了解合集中包含的要素有哪些，以及它们的基本特点。
在全局框架的范畴中，包含的组件模块类型可以分成两个大类，全局组件和浮层元素。
全局组件是指在项目多数页面中都会存在并进行交互的组件，功能往往和当前页面没有直接联系，比如路径跳转、色彩切换、快捷操作等。
而包含的浮层元素，本质上也是全局组件，只是它们的共性是不会默认展示，需要被特定条件触发才能被感知。比如断网提示、删除确认、侧边抽屉等都是全局化的浮层要素，也是需要在前期做好规划的内容。
下面就针对这个两种类型的组件一一展开解释。
（1）全局组件
a. 导航栏
导航栏不仅仅是 B 端管理系统，也是网站设计中最重要的组件。优秀的导航栏可以清晰的展示项目的页面层级结构，帮助用户高效的访问目标页面。全局框架制定的一步，就是根据项目的具体情况，选择合适的导航类型。
导航栏主要使用上方、左侧、混合型三种布局形式：
确定导航栏的类型，还需要确定导航的操作逻辑，包含几级菜单，默认、展开、选中、关闭的交互。
b. 顶部栏
除了导航外，另一个基本必备的组件，就是顶部栏，除了放最基础的用户和设置选项外，它的角色定位要根据需求决定，最常见的包含下方几种：
当然，以上几种情况并不是绝对的。设计师需要根据项目的实际需求出发，去梳理项目包含哪些全局控件或操作，然后再决定如何分配到导航或者顶部菜单上，而不是先定义菜单的类型再往里面填内容和字段。
c. 页面标签栏
页面标签栏是一个类似浏览器标签栏的组件，用来展示和关闭当前项目内打开的页面。
标签栏的使用在远古时期的 B 端项目应用非常普遍，因为已经入土的 IE 浏览在那个年代是没有页面标签功能的，导致开启多个页面的切换非常麻烦。
随着浏览器标签的普及，它已经不适用于多数 B 端项目，但依旧有一小部分项目是需要结合它的优势才可以更好的提升操作效率。
在一些需要持续打开和来回切换页面的项目，如客服系统、财务审核、合同审批，因为打开新页面仅仅需要加载内容区域而不是全局，没有新建窗口后的空白页面加载过程，就能带来更好的体验。
d. 内容模块
内容模块是用来容纳和显示页面相关内容的模块，这是个被很多人忽略的组件类型，包含模块标题栏和操作区域。
一个成熟的 B 端项目会统一制定内容模块的组件结构，保证大量页面和模块之间样式的统一性。比如下面的模块案例。
如果只是简单做个标题再统一间距参数，那么这个组件也就没必要在这里提了，因为这仅仅是设计问题而不是交互问题。内容模块的制定是为了尽可能考虑各种内容场景，并进行统一处理。
例如要应用一级分页标签、多层级分页标签、操作按钮、内容折叠等。考虑的越全，后面处理起来越工整，否则就像下方淘宝卖家端千牛的案例一样，损害用户的体验和操作效率。
内容模块是很难在初期一口气全部定完，不仅需要产品经理前期给出详尽的需求和产品原型，还依赖设计师自身的经验判断。
所以，它的制定流程是在前期先根据掌握的信息制定出最初的版本，然后在完成后续的页面中逐渐进行补充、优化并替换。
作者：酸梅干超人；
本文由 @超人的电话亭 原创发布于人人都是产品经理，未经许可，禁止转载。
题图来自Unsplash ，基于 CC0 协议。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
蓝蓝设计的小编 http://www.lanlanwork.com