文章目录[隐藏]
前面咱们学过了怎么新建项目，怎么发布项目，怎么在手机端预览；接下来我们开始真正去使用画布制作原型，那么第一步，你先要会使用这些元件，我们按照官方软件自带元件库的顺序一个一个的讲解，全面了解之后你也许会发现这些基本元件其实可以做任何形状的原型。
免费版缺少部分元件
Pro版本基本元件库包含如下元件：
Free和Pro未激活版本会变成下面这个元件列表
一般人不对比不知道少了什么功能，但是动态面板大家可能都意识到免费没有不好用，所以最突出的就是动态面板了。其他少的三个分别是数据网格,摘要，索引，我们下面会挨个讲解，这里先按下不表。
-
要点：Justinmind的免费版和收费版的区别在于？
免费版不能使用：动态面板、数据网格、摘要、索引，这四个元件功能
文本、多行文本、图片、线段元件的使用
文本标签的使用
这个标签指的是一行文本也就是说短文本场景时适用。举个例子：我们APP的功能模块的标题就是一个短文本，此时用多行文本显然不行，所以这里用文本标签。然后可以根据你的使用情况设置它的标签属性，例如：颜色，大小，更换字体等。
文本标签使用小技巧：
1.单击选中文本标签之后可以出现上图界面 鼠标按住图标1的位置可以进行旋转操作
2.这些连接点是可以根据你使用范围进行拖放宽高，如果你的文字长度大于元件宽度则超出部分不显示，所以你需要拖动连接点把元件拖宽些，必须大于文字宽度，如果是多行文字则换“多行文本”元件使用。
多行文本的使用
多行文本是区别与上述单行文本的元件来说的，当你用到大段文字来演示填充区域时候可以直接拖放一个多行文本到工作区
例如下图：
每一个元件当你鼠标移动上去之后会有一个提示信息：通过拖放该元件链接到屏幕，这句话的意思是你希望点击当前这个元件跳转页面到那个屏幕去，这个可视化操作可以是说是非常方便的，比Axure系列软件更具有优良的用户体验，是Justinmind的创新点。
图片元件
Justinmind的图片元件是使用频率超高的元件之一，根据Justinmind的使用情况来看很多人用Justinmind设计高保真的原型，这个高保真原型就是利于图片来实现的。所以我们来看一下基本的图片元件用法
第一步拖放一个图片元件到工作区
第二步跳转位置与大小之后单击元件在弹出的选择框了找到希望填充的图片
这一点是决定你的源文件存储大小的根本之一，包含越多的图片打开源文件速度越慢。
上传成功之后依然可以进行调整大小与更换图片，如果你的图片大小是同一页面重复使用的时候可以直接再调整好尺寸的元件上直接复制粘贴之后更换其图片即可，更换方法就是在图片上单击选择图片，重复上述流程。
图片元件高级属性用法
你上传图片之后可以会需要设置方形图片为圆形，或透明度等自定义需求，那么Justinmind怎么支持的尼，我们来一起学习一下。
在下方的图片里我们展示了Justinmind的所有设置项目
除去图片元件的基本参数设置项如：ID、提示、隐藏元件、位置与大小之外其他的设置项目是一些不常用的高级属性设置。
【绝对位置】表示，这个图片不会跟着自适应网页进行变更位置
保持置顶这个是这么解释的：元件只会出现在预览中，编辑界面不显示。
透明度很好理解，就和PS里的透明度填充很相似，根据你选择的百分百显示不同级别的透明效果。
下图是边框的设置，红框标出的三个复选框是对应下方按钮的，这是三列复选框，意思是如果选中了适用于所有代表着四个边统一风格，如不不打勾则可以进行每一条边的设置。
圆角设置可以根据你的视觉随意调整，上述边框设置还可以设置边框的粗细以及更改边框样式
支持的样式是：无边框、单色实线、圆点组成的边框、蚂蚁虚线边框
需要注意的是图片边框设置无边框的时候，圆角是不生效的。如果你你希望设置圆角但是不希望设置带颜色的边框可以把边框的颜色设置为你当前背景色就可以使用圆角了。虽然有点麻烦但是也是个办法。
另一个方式是把边框的宽度改成0
下面是个演示视频：其实很简单
设置图片阴影
如遇到设置阴影出现了白色边框了可以把边框设置为0宽度
线段的使用
线段可以修改成箭头大家在制作流程图中常用到这个
开始标记和结束标记代表这个线段的左和右，也就是说你两个方向都可以设置为箭头指向←或者→ 或者←→。
还可以设置线段的样式：
一共支持3种样式，实线、圆点、虚线
本小节的练习题是使用文本+图片设计出一个APP快捷方式的展示效果
如下图：
需要讨论的加入文下方的QQ群或微信号订阅。
原创文章，作者：ioued，如若转载，请注明出处：https://www.iamue.com/9079/
