CT前瞻(三):Adobe系列XD软件绘制简单的原型图与交互设计

news/2024/7/19 11:36:44 标签: adobe, XD, 原型图, 交互, 设计

文章目录


在这里插入图片描述

📋前言

Adobe XD是一个协作式易用平台,可帮助团队为网站、移动应用程序、语音界面、游戏等创建设计。还可以用于绘制原型图、UI 设计交互设计等任务。


🎯关于原型图绘制

在使用 XD 进行设计时,可以使用其提供的丰富的设计工具和功能,如矢量绘图工具、颜色选择器、形状工具、图层面板、交互面板等等,来实现各种设计任务。

同时,XD 还支持与其他 Adobe 工具进行协作,如 PhotoshopIllustratorAfter Effects 等等,可以在不同工具之间方便地切换和导入导出设计文件。

下面是一个简单的 XD 原型图绘制流程

  • 确定项目需求和目标:在进行设计前,首先需要明确项目的目标和需求,理解用户需求和产品或服务的核心功能。
  • 构建框架:根据项目需求和目标,设计出逻辑框架和信息架构,创建原型设计的基本框架。
  • 设计页面:在框架的基础上,开始对各个页面进行设计,并将它们组合成完整的原型图
  • 添加交互元素:添加各种交互元素,如按钮、链接、滑块等。
  • 完善细节:在设计完成后,检查和完善各个细节,包括字体样式、颜色、排版、图像等等。
  • 迭代和改进:根据测试和反馈意见,不断迭代和改进设计,直到达到预期目标。

XD_22">🎯XD绘制原型图交互设计

接下来讲讲XD交互原型上面的一些功能。以实际案例,来详细讲解如何用该软件做简单的原型。为了让大家更好的理解,首先从两个非常简单的界面开始入手。

1️⃣ 以 iPhone 12 尺寸大小创建一个文档,然后使用快捷键A,插入一个相同尺寸的画板,界面上有两个 iPhone 12 尺寸画板了。

2️⃣ 分别填充不同颜色,以便区分。
在这里插入图片描述
3️⃣ 选择原型板块,任意选中一个画板,可以看到被选中的画板左上角有一个房子的图标,单击该图标,图标变成蓝色,则表示将该画板设置为封面。
在这里插入图片描述
4️⃣ 按住此处的蓝色小箭头,并拖动鼠标,可以看到会产生一条带箭头的曲线,用于连接跳转到的界面,释放鼠标,则会创建两个界面间的连接线,具体设计看右手边的对话框。

在这里插入图片描述
❗注意:对话框可以设置跳转的属性,第一个是Taget,用于设置跳转到的目标图层。第二个是Segue用于设置跳转的方式,可以设置从左滑、右滑、上滑、下滑和溶解效果。第三个是Easing可以设置缓动曲线类型,最后一个是Duration,用于设置跳转时间,根据经验,交互动效的时间一般最长不应超过1秒钟。

5️⃣ 设置好第一个后,然后选中第二个画板,按住右侧的曲线并拖动到第一个,这样就形成了一个交互的闭环,进行交互设计很重要的一点就是让界面的跳转形成闭环,用户必须可以从任何界面跳转到任意界面并能跳回到任何界面。

在这里插入图片描述
在这里插入图片描述
5️⃣ 设置好界面之间的跳转,一般需要实时进行预览,一方面看看设置的跳转效果和时间是否合理,另外一方面也是为了检查跳转的设置是否已经闭环。XD提供了非常方便的预览功能,大家可以看到在XD的共更能选择栏的右侧,有一个播放按钮,单击该按钮即可打开预览界面。

在这里插入图片描述


XD_45">🎯关于XD软件其他功能

XD 是一款功能强大的设计工具,还有其他很多值得介绍的功能。

  • 重复网格:可以使用重复网格功能来快速创建表格、图标等多个重复的元素。
  • 切片工具:切片工具可以将整个设计图分割成多个部分,方便制作网页和移动端应用。
  • 符号库:符号库可以将设计元素保存为组件,并在需要时进行重复使用,提高设计效率。
  • 自动动画XD 可以根据交互元素之间的关联关系自动生成动画效果,让设计更加生动。
  • 原型测试XD 还可以生成原型测试链接,方便用户进行交互测试和反馈。
  • 组件状态XD 可以通过组件状态功能,快速制作不同状态下的 UI 元素,例如按钮的正常状态、悬停状态、按下状态等。
  • 互动设计XD 提供了非常丰富的组件和工具,可以帮助用户快速制作各种交互效果,例如下拉菜单、模态框、轮播图等。
  • 设计规范XD 提供了完整的设计规范库,包括 iOS、Android、Material Design 等标准,并且支持用户自定义规范。
  • 多平台支持XD 支持在不同平台和设备上进行设计,包括 Windows、Mac、iOS、Android 等。
  • 云同步XD 可以将设计文件和资源保存到 Adobe Creative Cloud 中,方便用户在多个设备之间同步和协作。
  • 等等…

❗🔥 具体功能和使用指南,还请移步到官网(欢迎使用 XD 用户指南)进行学习和查询。


📝最后

总的来说,XD 是一款非常实用的设计工具,可以帮助设计师快速精确地制作原型图,并提供了丰富的工具和功能,使得设计工作变得更加高效,同时还支持与其他 Adobe 工具进行无缝协作,是设计领域中不可或缺的工具之一。
在这里插入图片描述


http://www.niftyadmin.cn/n/248501.html

相关文章

cgroup配合tc工具对进程的上下行(出口入口)速度,附测试脚本

在开始之前,如果不熟悉cgroup、tc、以及ifb虚拟网卡,建议先了解一下再进行试验 注:为什么会用到ifb虚拟网卡呢,因为Linux自带的tc是一套控发不控收的框架。具体ifb详细原理,自行研究,网上资料多的很。 对出…

Linux多线程-4

在了解完多线程的绝大部分概念之后,我们本篇博客作为Linux多线程中的最后一篇博客,来对其中剩余内进行一个收尾。 目录 1.线程池 1.1引入 1.2原理 1.3优点 1.4实现 2.单例模式 2.1内容 2.2原理 2.3实现 2.3.1饿汉模式实现 2.3.2懒汉模式实现…

打造高效Android应用,从Hilt注入框架开始

概述 在 Android 开发中,注入解耦是一种设计模式,用于解决代码耦合的问题。通过使用注入技术,可以将应用程序中的不同部分解耦,从而使得代码更加灵活、易于维护和升级。 在 Android 中,注入解耦通常使用依赖注入&…

网络安全-网站后台的寻找+网页JS文件信息收集

网络安全-网站后台的寻找网页JS文件信息收集 前言 一,我也是初学者记录的笔记 二,可能有错误的地方,请谨慎 三,欢迎各路大神指教 四,任何文章仅作为学习使用 五,学习网络安全知识请勿适用于违法行为 学习网…

基于机器学习的疾病预测系统的设计与实现

在本文中,我们将使用一个基于决策树算法的机器学习模型,对糖尿病患病风险进行预测。我们将使用 Python 编写一个基于 Flask 框架的 RESTful API,用于接收特征数据,并进行预测。同时,我们将使用 Java 编写一个简单的前端…

上海亚商投顾:沪指逼近3400点 CPO概念股再度爆发

上海亚商投顾前言:无惧大盘涨跌,解密龙虎榜资金,跟踪一线游资和机构资金动向,识别短期热点和强势个股。 市场情绪 沪指今日震荡反弹,午后逼近3400点关口,创业板指则小幅调整。CPO概念股再度爆发&#xff0c…

蓝精灵协会 (The Smurfs‘ Society) 宣布与著名艺术家展开一系列的合作,打造传奇 PFP 系列

4 月 18 日,The Smurfs Society 将推出第一个由 Smurfs 品牌支持的官方 PFP 系列。该系列建立在链上游戏的基础之上,该游戏聚集了超过 85,000 名玩家,并在设计、创意和与著名艺术家的合作方面设立了新标准。 而最近,蓝精灵官方&am…

python删除csv文件中的某几列或行

1. 读取数据 用pandas中的read_csv()函数读取出csv文件中的数据: import pandas as pddf pd.read_csv("comments.csv") df.head(2)用drop函数进行文件中数据的删除行或者删除列操作。 2. 删除列操作 方法一:假设我们要删除的列的名称为 ‘观众ID’,‘…