一个交互项目通常需要几个阶段?

一个完整的交互作品需要经过多少步骤？

线框图、原型、模型都应该在什么时候创建？

又有哪些设计工具可以更好得提高设计效率呢？

今天，小编就将为大家总结一下交互项目所需的设计阶段，转交互，或对交互设计还无从下手的同学一定不能错过。

Inspiration-灵感

作为一名（未来的）交互设计师，我们总是需要有创意和时尚的灵感，但如果我们没有从其他设计网站上获得灵感的话，就很难在每个项目设计中产生新的创意。因此，在这个阶段，我们需要大量寻找网站案例资源，来获得更多灵感，这样更加有助于我们了解之后的设计/成长路径。

但值得注意的是，我们可以借鉴这些设计网站，但不能直接复制，让自己的设计看起来像其中的任何一个。

以下是一些优秀的设计网站，可供大家进行参考并汲取灵感来源。

Awwwards

Awwwards是一个专业的网页设计和竞赛开发机构，它旨在认可和推广最好的网页创新设计。在这里，我们可以寻找灵感、分享知识和经验、与他人建立联系并提高设计技能。此外，Web开发者也可以将他们的网站提交到该平台，以赢得全年最佳提名奖。

目前，Awwwards也在不断增加其网页设计的收藏数量，它每年都会展示全球最好的365个网站，以帮助我们寻找到无尽的创意灵感。

Webdesign Inspiration

Webdesign Inspiration发布了来自世界各地不同风格和行业的精选网页设计灵感。其界面可以使我们轻松地在PC端和移动端之间导航。此外，它所展示的设计是根据网站类型（公司、电子商务、活动、博客、移动应用程序、作品集及产品）、颜色、行业以及风格进行分类的，进而帮助我们轻松搜索。

Webdesign Inspiration旨在寻找并展示最好的网页设计灵感和趋势，并保持每日更新最新的创意网站。

想要获得更多设计灵感，同学们可以点击下方图片跳转链接，内含多个设计网页分享与介绍。

Ideation-构思

在这一步中，我们已经确切地知道用户在寻找什么、竞争对手网站提供的内容以及相关领域流行的设计风格。接下来，我们需要进行构思。通常，我们会进行头脑风暴，不断输出新奇的idea。而FigJam是扩展我们创意的最佳平台，它对于我们的项目成员也是同样适用。

Sitemap-网站地图

在我们开始任何设计之前，都必须表明自己从项目研究中得到了什么，而这将会通过站点地图显示。

顾名思义，视觉站点地图非常直观。它以用户为中心，并以一种人们非常容易理解的方式来说明网站的结构。视觉站点地图对我们的设计有很多帮助，同时它对站点规划特别有用。

User Flow-用户流

在创建站点地图后，通过用户流程图，我们可以显示从 A 点到 B 点的路线。用户流程与流程图的不同之处在于，它们可以非常简单地开始确定关键的用户旅程。

因此，为了设计最佳的用户流程，大家应该尽可能地了解自己的用户。在决定如何让用户以类似流程的状态与产品进行交互时，了解用户的需求和动机可以帮助我们做出明智的选择。

Wireframe-线框图

在这个阶段，我们必须通过线框图的三个步骤将我们的想法转向最初的框架：

Low-fidelity wireframes (低保真线框)

如果我们在项目讨论时存在利益相关者或客户，并且我们想用笔简单勾勒出一些东西，那么低保真线框是理想的选择。

Mid-fidelity wireframes (中保真线框)

中保真线框具有更全面、更逼真的 UI 组件，但如果我们没有足够的时间处理每个设计过程，则可以跳过这一步骤。

High-fidelity wireframes (高保真线框)

最后，高保真线框拥有特定于像素的布局。低保真线框可能包括伪拉丁文本填充物和用“X”填充以表示图像的灰色框，而高保真线框可能包括实际的特色图像和相关的书面内容。

低保真线框图

中保真线框图

高保真线框图

Mockup-模型

当我们完成高保真线框图的创建后，制作模型便是下一个阶段。想要创建模型，我们可以从线框中获取基本布局，并添加内容、品牌和样式。同样在这里，我们也将收到利益相关者的反馈，并在继续制作原型之前迭代目前的模型设计。

Prototype-原型

在原型设计中，模型被转换为网站的交互式演示。虽然这不是最终编码的网站，但原型尽可能地模拟了网站的外观和行为。因此，我们可以使用原型完成之后的用户测试，进而接收有关网站可用性的宝贵反馈。在这一阶段，大家可以通过使用Figma、Invision Studio、Origami等工具进行原型设计。

User Test-用户测试

在这一阶段，我们会从用户那里获得反馈。接下来，我们就需要用不同的用户组测试我们的原型，同时进行可用性测试并创建用户故事。用户测试是验证解决方案是否适合用户的过程。此外，我们也可以在每个流程步骤中都进行用户测试，以获得更好且更理想的结果。

Design System-设计系统

最后，当我们的设计运行良好时，就应该创建一种视觉设计语言。视觉设计语言是设计系统的核心，并由四个主要类别组成，大家应该考虑这些设计元素在屏幕组件中所扮演的角色。

颜色：设计系统中的常见颜色可以用我们项目中的1-3种原色来代表。
排版：大多数设计系统只包括2种字体：一种是用于标题和正文的字体，一种是用于代码的等宽字体。我们需要保持字体简单以及字体使用的数量。这不仅是排版设计的最佳实践，而且还可以防止因过度使用网络字体而为用户带来糟糕的体验。
尺寸和间距：目前，基于4的比例作为推荐比例变得越来越受欢迎。
图像：视觉设计语言中图像成功的关键是为插图和图标设置指南，并根据情况使用最佳图像格式。

相信大家一定听说过Material，它是Google创建的一个设计系统，旨在帮助团队为Android、iOS、Flutter和Web构建高质量的数字体验。同时，在开源代码的支持下，Material简化了设计师和开发人员之间的协作。目前，最新版本的Material 3已可用于Android。

想要了解更多关于Material 3的同学，可以点击下方图片跳转链接，进一步阅读。