网页设计教程：学习交互设计的步骤是怎样?

近年来，交互设计在网页设计中起着非常重要的地位。什麽是交互设计?简单来说就是网页与人进行交流互动的设计，能帮助用户解决问题，满足他们的期望。

很多网页设计师在考虑交互设计时，要麽从书本上学到些皮毛，但出来的网页却非常空洞;要麽从竞品上只学到零散点，没有真正领悟到体系的基础知识。那麽，学习交互设计的步骤是怎样?

学习交互设计的步骤是怎样?

步骤一：界面基础

界面基础指的是控件、布局、流程，也就是网页设计原稿肉眼可见的内容，都属於界面基础的部分。入门时先学习界面基础，能让你了解交互设计的大概内容，并对交互设计建立些信心和兴趣。

1. 控件

网页设计教程

控件就是界面上最小的有效单元，如：搜索框、单选按钮、复选框、下拉框等。不同平台都有自己一套的官方设计规范，如：iOS、Android、MacOS、Windows等等，但web端没有官方规范，因为web端本身不属於平台，因此它的规范属於各自为政的状态。

大多数控件会有各自的一套的交互流程，亦有自己所属的属性。

比如APP设计中的文本框，当用户点击文本框後，会出现光标及键盘;输入第一个字符後，会出现「清空按钮」;输入很多字符後，会有截断效果……

这个便是文本框中的交互流程，了解控件的交互流程，能让自己更立体地了解一个控件，及更细致地描述空间的交互流程。

至於控件的属性就更好理解，你可以简单地理解为「可设置的参数」。

比如「列表」，大多数网页设计师都会将定义的属性有：排序规则、加载规则、刷新规则、适配规则、截断规则等。

控件属在交互设计中非常重要，因为它决定了你的网页是否细致，能否给网页带来极佳的易读性和易用性。

· 怎样使用控件?

了解控件的有关内容，接下来你就需要知道什麽时候该用什麽控件。

举个例子：当用户输入错误的手机号码时，网页需要给用户提供错误提示，而这个提示方式应该选用哪个控件呢?

提示方式所用的控件有很多种：弹窗、toast、行内提示、气泡提示等，至於使用哪个，这个没有硬性要求，具体看当时的环境以及设计师想营造哪种效果。

2.布局

网页设计教程

简单来说，布局就是将网页元素放到界面上合适的位置并赋予合适的视觉重量。关於网页布局的理论有很多，格式塔原理、网格系统、7±2法则、席克定律、费茨定律、奥卡姆剃刀原理、复杂性守恒定律。这些理论相对比较低层，很难直接告诉你布局设计怎样做，但会成为设计师心中的「标尺」和「依据」，并融入平时的设计当中。

· 布局的基本步骤

布局设计可简单分为以下四个步骤：

① 列举：将界面中所需的元素列举出来;

② 归类：将上述列举的元素归位积累，每类一个模块;

③ 排序：将上面归类好的模块进行排序，排序依据一般为：用户场景中的浏览顺序、元素的重要性、业务情网;

④ 调整：布局排布的影响因素很多，最後需要综合其他因素对布局进行调整，并对各元素调整其视觉重量。

学会布局基本步骤後，可对网页进行思考，留意哪个步骤被疏忽了。

3.流程

网页设计教程

界面元素看似很多，但归根到底只有两种：内容和功能。内容是静态，例如企业介绍、最新资讯等，功能则是动态的，主要用於描述内容的交互流程。

例如：社交平台APP中的「接受文件」功能，其交互流程可描述为：点开消息→看到文件→点击下载→下载完成并打开。

· 流程设计的步骤

① 确定「任务」;

② 将「任务」拆成「动作」;

③ 将「动作」对应成界面。

想要在设计交互流程时，可以让思路更加清晰，表达更加清楚，可以在绘制界面之前搭建「流程图」。

步骤二：设计内核

了解完交互设计中比较重要且简单的部分後，接下来我们将要讲解比较「虚」的内容，虽然这部分内容比较难理解，但却是在交互设计中最重要的部分。

交互设计的核心就是「以用户的角度思考」，也就是「用户」、「目标」、「场景」。

1.用户

网页设计教程

「用户」这个概念其实还算很容易理解的，即进入网站的使用者都可以统称为用户。但要真正了解用户却很难，毕竟有关用户的标签实在太多，如：年龄、地区、阶层以及文化差异等。

· 如何去了解用户?

要想网站满足用户的期望，首先要做的就是去了解网站的目标用户特徵，其方式有很多种：用户访谈、用户观察、问卷，这些方法都可以帮助你去收集到用户的基本信息。

接下来，就要对所有用户的基本信息进行分类，分类後就是制定用户画像(即将「一群人」的特徵抽象为「一个人」的特徵，并感同身受「他」的想法)。

2.目标

网页设计教程

目标同样会影响设计，就好比两个同样的社交平台APP，一个主要目标是「工作中的高效沟通」，因此APP设计的功能相对复杂，且干扰性强;至於另一个的主要目标是「生活中的轻松沟通」，因此APP设计的功能相对便捷，干扰性也比较弱。

· 如何定目标?

在交互设计中，目标可细分为「用户目标」、「业务目标」，设计师在考虑交互设计时，不应该仅考虑「为用户服务」，还需考虑「为公司服务」。

如果网页的使用过程非常愉悦，但公司并不能因此赚钱，这对公司的发展明显不是长久之计。

3.场景

网页设计教程

场景，其实方便设计师去理解用户需求的重要工具。用户的需求是很难感同身受的，但如果设计师不能感同身受，又如何为用户设计好的产品呢?

这时就需要设计师自己代入到「场景」当中，去感受用户在每个场景的各种各样想法，将所有想法和细节都融入到设计当中，从而设计出相对符合用户真实需求的产品。

· 如何考虑场景?

通常设计师考虑场景时，都会结合「用户」和「目标」这两点去探讨，也就是我们常说的「用户场景」。

在理解「用户场景」时，我们大多会思考以下几个问题：

① Who

② Where

③ When

④ How

⑤ Result

交互设计是一个知识体系非常丰富且完善的学科，基本上只要掌握好上述的基础知识，便可成为一个初级的交互网页设计师。但要想让自己的技能有更大的突破，开始攻克专业能力和赋能业务，但这两方面的内容相对较难，且需要理论搭配实践一步一步去摸索，才能更好地理解。