关闭

怎么样从零开始学好交互设计?(四)

前面给大家介绍了控件和布局的学习步骤,接下来就看看最后一个基本内容:流程。
前面给大家介绍了控件和布局的学习步骤,接下来就看看最后一个基本内容:流程。

1.3 流程

界面中的元素有2种:内容和功能。内容是静态的,比如商品描述就是一种内容。功能是动态的,比如“加入购物车”就是一个功能。在交互稿中,展示一个功能的方式往往是“描述其交互流程”。比如在聊天APP中“接收文件”的交互流程可以描述为:点开消息→看到文件→点击下载→下载完成并打开。

如下图所示:
交互设计流程1.3.1 流程设计的步骤

流程设计的基本步骤是:

确定“任务”;

将“任务”拆成“动作”;

将“动作”对应成界面。

举个例子,如下图。比如我们做一个“群聊”的功能,群聊功能中有一个“添加群成员”的小功能。我们可以把“添加1个成员”看做是一个“任务”,用户想要完成这个任务,就必须有一系列“动作”。比如:找到群、找到添加入口、找到要添加的人、确定添加、确认添加成功。列出这些动作后,我们再针对每个动作(或多个动作)设计相应的界面,这就得到了交互流程。
学习交互设计流程设计实际的交互流程会比这个例子复杂很多,不仅仅有“一条主流程”,还会有很多“支流程”。比如上述例子中,用户“找到群”的方式其实有很多,可以通过搜索,可以通过通讯录,也可以通过消息列表。用户“确认添加”过程中也不一定就会“添加成功”,也可能中途突然反悔了,也可能网络突然断了。这些都属于流程中的一部分,都需要体现在最终的交互稿中。
交互流程对于复杂的交互流程,需要在绘制界面前搭建“流程图”(如下图),这样可以让你思路更加清晰,表达更加清楚。流程图的绘制相对比较复杂,这里不展开讨论。(下图是移动端音视频通话的流程图的例子)
交互设计学习1.4 步骤1的小结

以上我们介绍了入门交互设计的第1步“界面基础”(信息量有点大哈),其中包含控件、布局、流程3个部分。

针对这3个部分笔者推荐一些实用的书籍(不是那种夸夸其谈的书):
学习交互设计步骤学会这些基础后,基本就算是大概入门了,能够自己画一些交互稿了。

接下来就是设计内核了,也就是核心内容,该怎么学习这些核心内容呢?包含哪些呢?下篇文章继续给大家讲解。

以上就是“怎么样从零开始学好交互设计?(四)”的内容了,如果你还想了解其他相关内容,可以来产品壹佰官方网站。

0条评论 添加新讨论

登录后参与讨论
Ctrl+Enter 发表