一个交互项目通常需要几个阶段?
- By 本站 - 2023-10-23 14:43
- Read:556
一个完整的交互作品需要经过多少步骤?
线框图、原型、模型都应该在什么时候创建?
又有哪些设计工具可以更好得提高设计效率呢?
今天,小编就将为大家总结一下交互项目所需的设计阶段,转交互,或对交互设计还无从下手的同学一定不能错过。
灵感
作为一名(未来的)交互设计师,我们总是需要有创意和时尚的灵感,但如果我们没有从其他设计网站上获得灵感的话,就很难在每个项目设计中产生新的创意。因此,在这个阶段,我们需要大量寻找网站案例资源,来获得更多灵感,这样更加有助于我们了解之后的设计/成长路径。
但值得注意的是,我们可以借鉴这些设计网站,但不能直接复制,让自己的设计看起来像其中的任何一个。
以下是一些优秀的设计网站,可供大家进行参考并汲取灵感来源。
Awwwards是一个专业的网页设计和竞赛开发机构,它旨在认可和推广最好的网页创新设计。在这里,我们可以寻找灵感、分享知识和经验、与他人建立联系并提高设计技能。此外,Web开发者也可以将他们的网站提交到该平台,以赢得全年最佳提名奖。
目前,Awwwards也在不断增加其网页设计的收藏数量,它每年都会展示全球最好的365个网站,以帮助我们寻找到无尽的创意灵感。
发布了来自世界各地不同风格和行业的精选网页设计灵感。其界面可以使我们轻松地在PC端和移动端之间导航。此外,它所展示的设计是根据网站类型(公司、电子商务、活动、博客、移动应用程序、作品集及产品)、颜色、行业以及风格进行分类的,进而帮助我们轻松搜索。
旨在寻找并展示最好的网页设计灵感和趋势,并保持每日更新最新的创意网站。
想要获得更多设计灵感,同学们可以点击下方图片跳转链接,内含多个设计网页分享与介绍。
构思
在这一步中,我们已经确切地知道用户在寻找什么、竞争对手网站提供的内容以及相关领域流行的设计风格。接下来,我们需要进行构思。通常,我们会进行头脑风暴,不断输出新奇的idea。而FigJam是扩展我们创意的最佳平台,它对于我们的项目成员也是同样适用。
网站地图
在我们开始任何设计之前,都必须表明自己从项目研究中得到了什么,而这将会通过站点地图显示。
顾名思义,视觉站点地图非常直观。它以用户为中心,并以一种人们非常容易理解的方式来说明网站的结构。视觉站点地图对我们的设计有很多帮助,同时它对站点规划特别有用。
用户流
在创建站点地图后,通过用户流程图,我们可以显示从 A 点到 B 点的路线。用户流程与流程图的不同之处在于,它们可以非常简单地开始确定关键的用户旅程。
因此,为了设计最佳的用户流程,大家应该尽可能地了解自己的用户。在决定如何让用户以类似流程的状态与产品进行交互时,了解用户的需求和动机可以帮助我们做出明智的选择。
线框图
在这个阶段,我们必须通过线框图的三个步骤将我们的想法转向最初的框架:
(低保真线框)
如果我们在项目讨论时存在利益相关者或客户,并且我们想用笔简单勾勒出一些东西,那么低保真线框是理想的选择。Mid-fidelity wireframes (中保真线框)中保真线框具有更全面、更逼真的 UI 组件,但如果我们没有足够的时间处理每个设计过程,则可以跳过这一步骤。High-fidelity wireframes (高保真线框)最后,高保真线框拥有特定于像素的布局。低保真线框可能包括伪拉丁文本填充物和用“X”填充以表示图像的灰色框,而高保真线框可能包括实际的特色图像和相关的书面内容。
模型
当我们完成高保真线框图的创建后,制作模型便是下一个阶段。想要创建模型,我们可以从线框中获取基本布局,并添加内容、品牌和样式。同样在这里,我们也将收到利益相关者的反馈,并在继续制作原型之前迭代目前的模型设计。
原型
在原型设计中,模型被转换为网站的交互式演示。虽然这不是最终编码的网站,但原型尽可能地模拟了网站的外观和行为。因此,我们可以使用原型完成之后的用户测试,进而接收有关网站可用性的宝贵反馈。在这一阶段,大家可以通过使用Figma、Invision Studio、Origami等工具进行原型设计。
用户测试
在这一阶段,我们会从用户那里获得反馈。接下来,我们就需要用不同的用户组测试我们的原型,同时进行可用性测试并创建用户故事。用户测试是验证解决方案是否适合用户的过程。此外,我们也可以在每个流程步骤中都进行用户测试,以获得更好且更理想的结果。
设计系统
最后,当我们的设计运行良好时,就应该创建一种视觉设计语言。视觉设计语言是设计系统的核心,并由四个主要类别组成,大家应该考虑这些设计元素在屏幕组件中所扮演的角色。
颜色:设计系统中的常见颜色可以用我们项目中的1-3种原色来代表。
排版:大多数设计系统只包括2种字体:一种是用于标题和正文的字体,一种是用于代码的等宽字体。我们需要保持字体简单以及字体使用的数量。这不仅是排版设计的最佳实践,而且还可以防止因过度使用网络字体而为用户带来糟糕的体验。
尺寸和间距:目前,基于4的比例作为推荐比例变得越来越受欢迎。
图像:视觉设计语言中图像成功的关键是为插图和图标设置指南,并根据情况使用最佳图像格式。
相信大家一定听说过Material,它是Google创建的一个设计系统,旨在帮助团队为Android、iOS、Flutter和Web构建高质量的数字体验。同时,在开源代码的支持下,Material简化了设计师和开发人员之间的协作。目前,最新版本的Material 3已可用于Android。
想要了解更多关于Material 3的同学,可以点击下方图片跳转链接,进一步阅读。
在完成上述系列步骤后,我们便可以将自己的项目付诸于实际,进行更好的创建和设计。
另外,为了更好的帮助大家设计项目,小编还将为大家分享一些实用的交互设计工具,例如Figma、InVison、Adobe XD等,它们可用于创建原型、制作线框图等。感兴趣的同学可以点击下方图片跳转链接哦。
转载请保留出处及原文地址:https://www.shishangjue.com/article/565.html