1.axure(下载,汉化,简单的效果)

一、下载安装

官网https://www.axure.com/
image.png
image.png
也可以到我的百度网盘上下载,汉化,注册码,和元件汉化包全都有
链接:https://pan.baidu.com/s/1wecV5qZNLcfLRsEg0xzBxA 密码:gpn2
先安装Axure,安装完先别打开,打开了的话,就先关掉,才能汉化

把汉化包lang文件拽到你安装Axure的路径里面去,就OK了
至于元件库的汉化,如下图,把那两个元件,拖到目录defaultseting 的libraries里面去
image.png
以后你要是有自定义的元件库,也可以放到libraries里面去

二、Axure界面

1.站点地图。网页中的所有页面都在这里

2.页面设置
3.母版 做完一个母版样式,以后可以不用做了
4.元件
5.元件交互和注释 图片最好用英文命名
6. 元件属性和样式

三、做个简单的登录注册页面

image.png
1.背景色的获取
截取一小块背景,放到编辑界面,在页面样式里找到背景色,点取色器,再点一下你刚截的图,现在整个背景就是你要的颜色了
image.png

2.logo
拖入一个图片元件,在右上角可设置图片logo的位置,双击元件,找到一张logo图片
image.png

如果这张图片是已经裁剪好的,可以直接使用,如果还需要设置可以在右侧元件属性和样式里面,对图片践行裁剪,切片操作
切片的时候,设置好切片位置后,需再点击下别的地方,才能把他们分开

image.png
在我们把一个图片压缩的时候,他有时候会失真,不清晰,此时我们有一个小技巧,让图片及时压缩的很小,但是很清晰,那就是保留脚部,
勾选保留角部,然后把出现的小黑三角都挪到边上,把整个图片内容区域都包含进去
image.png

3.矩形
拖一个矩形到页面当白背景,设置好宽高后,拖拽矩形直到矩形和上面的logo中间出现一条垂直的线,那条线就是能让他俩对齐居中的线,松手就可以了

4.设置边框颜色,点一下矩形边框,在上面找到边框样式
image.png

5.拖入文本框和文本标签元件,可以在上面的功能区给文字设置颜色,字体大小
image.png
6.设置文字,当鼠标悬浮时,改变样式,在右侧,属性那里,找交互样式
image.png

7.预览
当你设置好交互效果后,你可以通过预览或者生成HTML文件来看效果
image.png

三、第一次交互,实现跳转页面

当我们在复制文字的时候呢,要注意如果样式不一样的话,那就选中文字在Ctrl+v ,否则样式也会跟着一块改变了

如果要做页面跳转的效果,你就点击事件源(可以是文字),然后点右侧的事件(单击事件),双击打开,在弹出的对话框 中第二步处选择当前窗口,在第四步处 选择你要跳转到的页面,或者在底下勾选链接到外部URL文件,然后输入要跳转到的网址

image.png

四、元件焦点的控制(获取焦点)

要求实现这样的效果:
1.当点击输入框上面的文字时,对应下面输入框获取焦点

2.当页面一加载进去的时候,就让第一个输入框获取焦点
密码框里输入的文字应该显示成黑点
3.当页面一加载进去的时候,就让第一个输入框获取焦点

先给输入框起名字,然后选中输入框上面的文字,点击单击事件,然后选择获取焦点,然后选择要获取焦点的输入框

image.png
这样当点击上面的文字时,下面的输入框就会获取焦点,那么怎么让页面一载入就让第一个输入框获取焦点呢,这就是页面交互的设置了
image.png
密码框里输入的文字应该显示成黑点,选中密码输入框,在右侧元件属性中更改文本框类型即可
image.png
此外,还提供了日期,选择文件等类型,非常方便
image.png

猜你喜欢

转载自blog.csdn.net/xuehangongzi/article/details/80872074