想了想分享一下交互知识，不过应该扩展成一整套的内容，包括各种组件、控件、行为的分析。基于我的分享习惯，我会尽量避免过于理论化和模糊化的讲解，而是着眼于具体的实战场景，帮助大家理解如何做出合理的交互决策。PS：精彩系列长文又来了。PART01什么是全球互动框架？交互设计本质上是设计产品使用方式的过程，如何填写账号；如何导出表格；如何过滤数据；如何排序列表等等等等。思考如何使用每个功能的基本原理可能需要很长时间。项目的交互是项目所有功能如何使用的总和。那么设计师如何开始项目的交互设计呢？直接进入细节开始跟着原型制定输入框的状态和下拉菜单的展开逻辑？这绝对不可能。项目的交互内容繁多复杂，设计师很快就会陷入这些细枝末节。头疼就医头疼脚，很容易造成项目细节不统一、不一致、体验碎片化。因此，要理解项目交互设计的正确思路，就要知道项目中有哪些交互内容，它们对应的层级和设计对象是什么。在这里，我将需要设计的交互对象分为4类，从大到小依次为：全局框架：项目主要模块的布局布局，产品使用的主要依据和步骤功能流程:moreoperationsarerequired一个完整的用户使用目标组件操作只需要完成几个步骤即可：完成一些复杂模块和业务组件的操作方法和状态。项目主要模块的排版和布局，为什么全局框架可以确定产品的主要依据和步骤。比如，如果你以前用过Adobe软件，你应该会有一种感觉，熟悉了其中一个之后，再去使用下一个，马上就可以上手，完成一些基本的操作。但是如果不是Adobe系列的软件，用起来会感觉很别扭，而且往往要从头学起，比如AffinityPhoto和Pixelmator，都是对标PS的。为什么会有这样的反差？正是因为Adobe在自己的生态系统中尽可能统一了整体的软件架构和操作方式，让全家桶用户能够以最快的方式适应不同的软件。包括顶部的属性栏，左侧的工具栏，中间的标签栏，创建区，以及右侧不同工作窗口的排列。除了主界面的布局框架外，一些副窗口的框架结构也是统一固定的。比如在PS中打开首选项设置和属性设置窗口，几乎和其他几个软件的属性设置窗口是一样的。在Affinity中，软件首选项设置并没有使用左侧导航，而是类似于Mac通用设置的快速进入分层模式。如果用惯了Adobe再改这个，会说不出的别扭。可能有同学会疑惑，Photoshop不只有这几种窗口吗，其他窗口的风格不都和上面的不一样吗？那是因为窗框要考虑功能和场景。即使使用了多种窗口类型，在操作方法相似的场景中也经常应用。回想一下PhotoShop的基本操作流程，就是创建一个文件后，通过左侧的工具在中间的画布区域添加图层元素进行排版，然后在属性栏中调整画布对象的图层顺序和属性正确的。作为图形领域的独角兽，PhotoShop直接影响了大多数同类设计软件的框架结构和排版方式。因为大多数设计师学习设计的入门级软件都是PS，如果想让用户更快上手自己的软件，就应该按照他们习惯的方式来做。所以，从Sketch开始，它的框架和操作流程与PhotoShop高度相似，然后是AdobeXD、Figma、instantdesign等，几乎都应用了同一个全局框架，你只需要掌握其中一个就可以了。立即熟悉其他人。软件的使用。然而，当实际功能与其他几款与UI设计软件高度相似的“办公应用”的结构框架不同时，上手就变得异常困难和尴尬。比如Axure、Keynote、PowerPoint，在学习这些软件之前学过设计软件的同学一定深有感触。至于其他行业的软件，如果没有绝对优势的产品作为标杆，那么每个公司的产品架构都会不一样。比如3D建模软件中的C4D、Blender、Rhino，视频剪辑工具中的Pr、Finalcut、DaVinci。你精通其中之一。专业术语和必要的功能逻辑掌握得很好，需要通过基础教学才能掌握。其他同类软件。这是框架带来的功能，是软件使用和运行过程的主要依据，其他细节的交互和操作都是附属于全局框架的子集。交互设计之所以从全局框架入手，是因为设计师需要：先确定产品的整体操作方式，再考虑按钮和表单的细节。PART02B端产品全局框架拆解虽然前面的例子都是软件案例，但只要细心留意就会发现，Web端管理系统的运行框架和通用的是一样的软件。只是相对于各种专业软件，B端管理系统的运行框架模式经过长期的演进，形成了几个固定的套路。因此，网上查到的管理界面案例，似乎只是围绕几个固定的布局改变颜色和图标。虽然看起来都差不多，但还是有很多交互细节需要设计师去注意和制定。设计一个满足项目需求的全局框架并不容易。那么，如何设计交互的全局框架呢？它不是一个个体，而是由多个组件、页面类型、适配方式组成的集合概念。如果你想有效地制定，你需要了解集合中包含的元素及其基本特征。1.全局框架中的组件在全局框架的范畴中，所包含的组件模块类型可以分为两类，全局组件和浮层元素。全局组件是指在项目的大部分页面中存在并交互的组件，其功能往往与当前页面没有直接关系，例如路径跳转、颜色切换、快捷操作等，其包含的浮层元素也是全局的本质上是组件，但它们的共同点是默认不会显示，需要特定条件触发才能被感知。比如断网提醒、删除确认、侧边抽屉等都是全局浮层元素，同样需要在前期进行规划。下面一一解释这两类组件。全局组件导航栏：导航栏不仅是B端管理系统，也是网站设计中最重要的组件。一个优秀的导航栏可以清晰的展示项目的页面层级，帮助用户高效的访问目标页面。制定全局框架的第一步是根据项目的具体情况选择合适的导航类型。导航栏主要使用了top、left、mix三种布局形式：topnavigation：适用于选项和内容较少，为内容区域预留较多的横向空间。左导航：适用于选项多、层次多的情况，方便折叠和上下滚动。混合导航：适用于需要有效区分不同功能块的场景。确定导航栏的类型，还需要确定导航的操作逻辑，包括几级菜单，以及默认、展开、选择、关闭的交互方式。顶栏：除了导航之外，另一个基础且必备的组件就是顶栏。除了最基本的用户和设置选项外，其角色定位要根据需要来确定。最常见的包括以下几种：标题栏：主要用于显示页面标题、副标题或面包屑控件。工具栏：包含更多操作元素，如搜索、添加、邀请、消息管理等。菜单栏：包含当前页面/模块的更多菜单选项和内容切换操作。当然，以上情况并不是绝对的。设计师需要从项目的实际需求出发，梳理项目包含哪些全局控件或操作，然后决定如何将它们分配给导航或顶部菜单，而不是先定义菜单类型，然后填充内容和领域。页面标签栏页面标签栏是一个类似于浏览器标签栏的组件，用于显示和关闭当前项目中打开的页面。tabbar的使用在古代的B端项目中很常见，因为当时已经被埋在土里的IE浏览器没有页面tab功能，导致在多个页面之间切换很麻烦.随着浏览器标签的流行，它已经不再适合大部分B端项目，但仍有小部分项目需要结合其优势，更好地提升运营效率。在一些需要不断打开和来回切换页面的项目中，比如客服系统、财务审计、合同审批等，因为打开一个新页面只需要加载内容区域而不需要加载全局，所以不会出现空白新窗口创建后的页面加载过程，可以带来更好的体验。内容模块内容模块是用来容纳和展示页面相关内容的模块。这是很多人忽略的组件类型，包括模块标题栏和操作区。成熟的B端项目会统一制定内容模块的组件结构，保证大量页面和模块之间的样式统一。例如下面的模块案例。如果只是简单的做一个标题，统一间距参数，那么这里就不用提这个组件了，因为这只是设计问题，而不是交互问题。内容模块的制定，就是尽可能的考虑各种内容场景，统一处理。比如应用一级分页标签、多级分页标签、动作按钮、内容折叠等。考虑得越全面，后续处理越整齐，否则会损害用户体验和运营效率，就像下面是淘宝卖家端的千牛案例。前期很难一口气完成所有的内容模块。不仅需要产品经理在前期给出详细的需求和产品原型，还要看设计师自己的经验和判断。因此，它的制定过程是根据前期的信息制定初始版本，然后在后续的页面中逐步补充、优化和替换。
