即时设计初学者指南,零基础轻松上手

嗨少哥软件 2024-07-11 10:34:48
1.1下载

即时设计目前支持个人免费使用,用户可以自由创建项目和文件,并邀请团队成员在线合作。即时设计支持网页端、macOS、Windows、Linux、iOS、Android 和微信小程序

1.2 安装

进入即时设计官网,点击免费使用即时设计或进入工作台,注册成功即可使用!

https://ad.js.design/online/ui/?source=tt&plan=btt710

1.3 登录并开始应用程序

进入应用程序界面,即时设计将引导您创建团队和项目。您也可以快速使用[新文件]夹。

1.4 主界面

与Sketch不同,即时设计的文件不存储在本地计算机上,而是存储在云中,您可以通过浏览器随时随地访问所有工作。

1.5 导入 Figma、 Axure、Sketch 文件

即时设计可以快速准确地导入Figma、 Axure、Sketch 文件,只需进入即时设计工作台,点击[导入文件],选择 Figma、 Axure、Sketch 文件上传类型

你也可以直接将 Figma、 Axure、Sketch 将文件拖到即时设计工作台上传。

2.1 建立新画板

与Sketch 操作相同,根据A或F检查右侧属性面板中的所有画板选项,选择要使用的尺寸或随意建立一个。从1倍的角度(实际像素尺寸)工作,因为在即时设计中调整尺寸不会损失图像质量,并在导出时选择合适的尺寸。

与传统的画板不同,画板可以相互嵌套,便于未来创造更复杂的交互设计。

2.2 快速建立网格和布局

移动端,可使用标准的8点格栅;在Web端,建立布局格栅非常重要,所以在设计之前,首先建立5栏引导格栅。调整右格栅属性菜单中的列和行,以及是否固定,并根据需要设置边距。

创建网格、列和行

即时设计网格、列、线的优点是可以设置多个网格并存储成样式。这是一个非常方便的功能,不仅使布局适应各种设备,而且可以与团队成员分享或在其他项目中简单地重复使用。

2.3 图层和组操作方便

与Sketch 同样,您可以在即时设计工作台界面的左侧找到图层面板。

左边的图层面板

图层:添加的每个新元素都会自动创建一个图层。您可以通过拖放重新排列图层或分组图层

组件:可在即时设计中添加,有利于原型设计

页面:设置设计的不同部分或区域,会添加不同的页面,不同页面之间可以添加交互

资源:可收集即时设计资源社区的资源,如图标、插图等,可直接拖动使用,节省大量重复劳动

https://js.design/community?category=explore&source=tt&plan=btt710

2.4 矢量形状设计

即时设计使用一种称为矢量网格的方法来创建复杂的形状。即时设计的矢量图形工具直接在画布中绘制矩形、直线、椭圆、多边形和星形五种常见的矢量图形。

选择顶部菜单,或按矩形选择(R)、直线(L)、箭头(shift+L)、原型(O)等待创造形状。按住 Shift 按键以保持形状比例不变。

绘制更复杂的形状,点击 P ,或者从顶部菜单中选择钢笔。在即时设计中,用钢笔工具创建的矢量网格没有方向,可以在不同方向分叉,轻松设计多边弧和饼图。

完成后按【Enter】在设计过程中,自动闭合路径可以通过右属性菜单随时更改属性,并操纵矢量形状。

2.5 设置图片样式

在即时设计中,您可以点击右属性窗口[填充],选择[图片]填充任何图片。

下拉菜单中的选项效果:

适应:当我们调整大小时,图像不会被切割或隐藏

填充:填充图片

剪裁:将图像剪裁为所需的尺寸和选择

平铺:根据需要重复原始图像,可调整平铺尺寸

即时设计允许调整图像的透明度。当用图像填充现有形状时,单击形状,转向填充,然后从下拉列表中选择图像。注意图片版权,建议使用 Plxabay、Pexels、Unsplash 图片网站,图片质量很高。

2.6 安装本地字体

即时设计内置了大量的字体样式,网页端的即时设计只包括中英文云字体。如果您更喜欢使用本地字体,您可以通过以下两种方法来实现。

方法一:如果需要使用本地字体,可以进入[帮助],点击[更多],选择[本地字体助手]

单击“字体助手”按钮,在计算机上安装“字体助手”程序。

方法二:您还可以进入即时设计官网首页的【下载】页面,下载本地字体助手,即时设计支持Windows、Mac版本。

如果你是一个UI设计小白,那么你选择即时设计作为设计工具,这是完美的。您可以点击即时设计工作台的[帮助]进入学习和探索模块,内置视频教程、教程文档、帮助中心、最新功能等学习资源。学习资源+社区资源+强大的设计工具,小白也能成为大神!

0 阅读:5

嗨少哥软件

简介:感谢大家的关注