即时设计目前支持个人免费使用,用户可以自由创建项目和文件,并邀请团队成员在线合作。即时设计支持网页端、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设计小白,那么你选择即时设计作为设计工具,这是完美的。您可以点击即时设计工作台的[帮助]进入学习和探索模块,内置视频教程、教程文档、帮助中心、最新功能等学习资源。学习资源+社区资源+强大的设计工具,小白也能成为大神!