史上最全面的界面设计模式、APP和Web交互流程图整理

这一次，设计夹的主编-晓黑同学为大家整理了史上最全面的APP和Web交互流程图的标准画法，非常的全面，结合的自己的项目经验，把交互流程图做的更加清晰，在后面，还为大家整理一般的web设计模式及APP设计模式，以便使得我们的设计过程更加的高效。

信息架构图对于一个产品起到了至关重要的作品，产品越复杂，信息架构越重要，比如淘宝APP这种体量的产品，信息架构做的是否合理，直接关系着产品的逻辑，及运行效率，所以对于产品的信息架构在做创意设计阶段就需要考虑去清楚。

▨APP交互流程表达

APP 交互流程图的表达方式，在这里包括了界面的之间的信息流动连接，还有非常的重要的交互设计说明，我们在平时的做设计的时候，一定要养成良好的标注习惯，设计的过程中，需要把所有用户操作的可能性都要考虑清楚才行。

▨Web交互流程图表达

对于Web呢，信息架构一般会比APP信息架构要复杂的多，因为Web端能够承载的信息量更大，可兼容的程序更加的复杂，所以对于企业级的网站或者软件，比如微软的OFFICE办公软件，就是一个非常非常复杂的信息架构图，每一个功能组件的交互逻辑，构成了整体，而且要是每一块的内容协调好，这是相当的不容易的。

下面这些图，都是我们一般性的交互流程表达，同样的情况，也是需要表达清楚信息流之间的关系，及每一部分信息说明，这个在平时接触项目时就应该养成规范的习惯，绘制交互流程图的时候。