• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >axure > Axure教程:如何制作炫酷高效的元件库?

Axure教程:如何制作炫酷高效的元件库?

作者: @那只猫的鱼 字体:[增加 减小] 来源:互联网 时间:2017-06-13

本文主要包含axure8.0元件库汉化,axure8.0元件库,axure元件库下载,axure元件库,axure8.0元件库下载等相关知识, @那只猫的鱼 希望在学习及工作中可以帮助到您

本文根据作者的经验,梳理出如何制作出炫酷高效的元件库,希望能给大家带来一些帮助。

经常做高保真原型图的童鞋们应该都有这种感觉:原型图中的元件是高度重复的。比如搜索框,做好一个,在其他页面上直接复制粘贴,然后改一下搜索关键字就可以了。虽然复制粘贴的速度是挺快的,但是相对于快速方便的元件库来说,还是稍微弱了一些,特别是多个项目的时候。本文根据作者的经验,梳理出如何制作出炫酷高效的元件库,希望能给大家带来一些帮助。

一、?如何为元件库分类?

制作元件库之前,首先我们要想清楚元件库的分类标准,比如我们可以按照Web端、手机端两个大类来创建元件库,也可以把Web端细分为登录页、列表页、详情页、编辑页等页面级元件库,也可以按照按钮类、输入类、修饰类等分类方式来创建元件库。

元件库的分类没有具体的标准,你感觉哪种分类更合理更易于你更新维护和使用,就可以按照哪种思路去创建多个元件库。当然,如果你喜欢,也可以只创建一个元件库,把所有你经常用的元件都创建在里面,不过数量多的时候,就会增加你查找的时间成本。

二、?如何创建元件库?

  1. 打开Axure软件,在元件库面板中,点击快捷菜单按钮,选择“创建元件库”,如下图所示:

2. 选择了“创建元件库”后,就会弹出一个界面,你需要选择一下元件库的保存路径(不选择的话,会存在默认路径下),而后为你的元件库起一个名字,在本示例中,我按照Web端、手机端两个大类来创建元件库,如下图所示,点击“保存”则系统将自动打开你所创建的元件库。(若未打开,你就自己去双击打开吧~~~)

3. 在元件库创建页面中,操作跟平时没什么本质区别,但是要记得,在这里,一个页面就是一个元件,不要把所有元件都创建在一个页面里。

三、?元件创建示例

如果本文到这里就结束了,实在对不起文章标题~~~哈哈,来吧,正式开启炫酷之旅~~~

下面我以Web端使用频率较高的搜索栏为例,来简单讲解一下如何做出美貌(至少比默认元件库美貌。。。)的元件。

1.?元件效果

点击前:

点击后:

2.?所需元件

所需元件:两个矩形、一个文本框。

为了方便大家理解,我把其中一个矩形命名为搜索框,文本框命名为输入框,另外一个矩形命名为按钮。

3.?实现步骤

按照图片中的文字,对图片上方的元件进行操作,即可得到图片下方的元件。

然后将元件拼在一起,就可以得到带有交互效果的搜索栏了。

按照以上思路,将你常用的元件,比如收藏、下拉列表等制作在元件库中,保存该元件库文件,即可。

元件库是可以随时添加的,建议大家工作闲暇时间,可以将使用频率很高的元件添加到自己的元件库中,方便以后随用随拖。

四、?如何使用元件库

元件库创建完成了,那么怎么用呢?

首先,我们需要将元件库加载到Axure中,如下图所示:

然后,在每次使用的时候,直接选择该元件库(如下图所示),拖取你要用的元件,就可以了,如果颜色或者大小不合适,调整一下就好啦,至少省去了一大半的重复工作。

PS:大家如果看英文版的Axure比较吃力,记得一定要在安装的时候进行汉化!!!不要像我,没有及时汉化,又懒得卸载了再安装,就Axure和有道来回切换,被迫学会了里面所有的单词~~~~

您可能想查找下面的文章:

  • Axure教程:如何制作炫酷高效的元件库?
  • Axure教程丨制作自己的Axure元件库

相关文章

  • 2017-06-14Axure教程:滑动鼠标页面自动切换(一)
  • 2017-06-13Axure教程:原型设计之水泡导航栏
  • 2017-06-13Axure教程:12306图片验证码的实现(随机可验证)
  • 2017-06-14Axure8.0小案例:手把手教你画挖掘机
  • 2017-06-13Axure教程丨制作自己的Axure元件库
  • 2017-06-13Axure RP8 动态面板之轮播图设置
  • 2017-06-13Axure 8.0实例:复选框的应用
  • 2017-06-14Axure教程|如何制作”返回顶部”原型功能?
  • 2017-06-14如何优雅的用Axure装逼?高保真原型心得分享
  • 2017-06-14Axure实现两种滑动的方式(附源文件下载)

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Axure教程——页面载入进度条
    • Axure教程-体验一下 iPhone 6
    • Axure 原型 | 关于中继器的简单使用及应用的场景
    • Axure教程:验证码原型制作实例
    • Axure教程:用中继器和日期函数实现万年历
    • 用Axure 实现“打飞机”,骚年,来一发(上)
    • Axure8.0教程:“百度一下,你就知道”搜索首页原型设计
    • Axure教程:用Axure实现晚会抽奖程序
    • Axure教程:微信聊天列表原型制作(一)
    • Axure实例:顶栏和侧边栏的固定和窗口自适应

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有