这一次,设计夹的主编-晓黑同学为大家整理了史上最全面的APP和Web交互流程图的标准画法,非常的全面,结合的自己的项目经验,把交互流程图做的更加清晰,在后面,还为大家整理一般的web设计模式及APP设计模式,以便使得我们的设计过程更加的高效。
信息架构图对于一个产品起到了至关重要的作品,产品越复杂,信息架构越重要,比如淘宝APP这种体量的产品,信息架构做的是否合理,直接关系着产品的逻辑,及运行效率,所以对于产品的信息架构在做创意设计阶段就需要考虑去清楚。
▨APP交互流程表达
APP 交互流程图的表达方式,在这里包括了界面的之间的信息流动连接,还有非常的重要的交互设计说明,我们在平时的做设计的时候,一定要养成良好的标注习惯,设计的过程中,需要把所有用户操作的可能性都要考虑清楚才行。


























































▨Web交互流程图表达
对于Web呢,信息架构一般会比APP信息架构要复杂的多,因为Web端能够承载的信息量更大,可兼容的程序更加的复杂,所以对于企业级的网站或者软件,比如微软的OFFICE办公软件,就是一个非常非常复杂的信息架构图,每一个功能组件的交互逻辑,构成了整体,而且要是每一块的内容协调好,这是相当的不容易的。
下面这些图,都是我们一般性的交互流程表达,同样的情况,也是需要表达清楚信息流之间的关系,及每一部分信息说明,这个在平时接触项目时就应该养成规范的习惯,绘制交互流程图的时候。




















网友评论
而且最后也没链接