Axure新手养成计划(连载02)

Axure书籍 小楼一夜听春语 40459℃ 0评论

3  元件库

小楼:结构搭建完了,就该往里面添加内容了。内容是通过元件来组成的。

苏苏:这个为什么叫元件呀?

小楼:这个呀!它是借用实物的命名,我们通常会把机器或者仪器的组成部分叫做元件,比如:电子元件,线路元件等等。

苏苏:那为什么不叫零件呢?

小楼:…..

3.1.  元件的使用

元件是软件界面左侧第二个功能模块,这个模块用于对所有元件进行管理。软件本身自带了两个元件库,一个是默认元件库一个是流程图元件库。前方的选项列表用来选择元件库,能够帮助我们方便的切换元件库或者显示全部的元件库。在我们进行线框图原型开发时,最常用的是默认元件库。(图26)

26

(图26)

后面的选项列表,用来管理元件库,在这里可以方便的载入和卸载元件库,也能够创建编辑自定义元件库。(图27)

27

(图27)

备注:卸载自定义元件库时需要先在前面的选项列表中选择自定义元件库,然后在后面的选项列表中选择【卸载元件库】进行卸载。

我们在进行原型页面制作时,只需要把元件库里面的元件用鼠标左键点住,然后拖动到主编辑区松开,元件就会被摆放在指定的位置上。

一个页面的内容就是通过一个一个元件来组成的,所以一般网站里面所显示的内容我们都能通过元件的组合搭配模拟出来。(图28)

28

(图28)

3.2.  元件的类别

在默认元件库里,有三组元件,分别是基本元件、表单元件、菜单和表格元件。

3.2.1.  基本元件

基本元件是组成各类原型的基本元素。(图29)

29

(图29)

前面十个是最常用的图片、文本标签、形状以及线段。

其中:

一级标题、二级标题还有文本段落其实都是文本标签的不同样式的变种;

占位符和按钮形状则是在矩形的基础上的改变。

线段有两种分别是水平和垂直。

备注:如果想要斜线的话按住键盘的Ctrl键把鼠标指针放在元件的边界点上就能够改变线段的角度(图30),这个方法也适用于大部分元件改变角度,如果想精确改变角度可以在元件的样式中去调整,这个在后面还会讲到。

30

(图30)

热区,也叫图片热区,网页开发中用于为图片的某个部分添加链接使用。原型制作中除上述作用,其透明的特性略有用处。

动态面板,一个容器元件,里面能够包含其他元件,它具备一些其它元件没有的特性,将在后文中着重讲到。

框架,它能够用来在页面中嵌入声音、视频、动画等媒体文件以及网页。

中继器,它是一个最特别的元件,通常用来实现重复的列表模块,但是灵活使用的话,还能实现很多让人意想不到的效果。

3.2.2.  表单元件

表单元件在编程开发中用于向页面中输入数据形成表单并提交到服务器,所以它们是表单元件。(图31)

31

(图31)

单行文本框和多行文本框,用于输入文字的;

下拉列表框和列表框,都是用来输入不同的选项;

复选框和单选按钮,分别用于多选和单选的输入;

提交按钮,这个按钮在编程开发中点击时能够完成表单的提交动作,但是在原型制作中不涉及与服务器的交互,所以显得多余,特别是它的样式不能调整又只有几个简单的触发事件,所以一般我们都会用自定义的形状按钮或图片按钮来代替它。

3.2.3.  菜单与表格元件

菜单与表格元件不是特别常用。(图32)

32

(图32)

树,或者叫树状菜单,它是一种比较常用的菜单形式,经常用于一些网站后台的功能列表。

表格,在页面中呈现数据表时会用到,但是Axure的表格不支持合并单元格的操作,一般遇到这种需求,通常是用一个矩形进行遮盖,达到看似合并的效果。

水平菜单和垂直菜单,用于网站导航栏或者分类标签等等。

{本节任务:浏览一些网站,熟悉网站上的内容都是用哪些元件组成的,并且总结出每种元件在网页原型制作中的用处。}


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » Axure新手养成计划(连载02)

喜欢 (175)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(8)个小伙伴在吐槽
  1. 好想知道图28线条标注工具是什么,这正是我们平时写文档所必须的得力助手啊,简洁美观。跪求答案!
    chaolongggg2015-08-30 14:38 回复
    • 小楼一夜听春语
      只是流程图做的连线
      小楼一夜听春语2015-08-31 14:18 回复
      • 用什么工具做的连线?Axure?还是什么,能说得具体点吗?感觉简洁美观,一目了然,特别好。
        芳芳2015-09-10 13:51 回复
        • 小楼一夜听春语
          Axure
          小楼一夜听春语2015-09-11 08:56 回复
          • 请问Axure的具体什么线条或者工具栏也好? 谢谢了!
            lsy2015-11-12 16:58
  2. 爱小楼
    妮妮2015-09-17 22:13 回复
  3. [谨遵楼嘱,好好练习] 使用widget, 画石墨注册,登录. 并熟悉其余元件.
    雪海2015-09-23 15:23 回复
  4. 文章后面没有链接到下一章内容的链接
    倔强的心2017-08-03 11:22 回复