AxureRP教程–封装组件库

基本上每个公司或者说每个产品系列,都会有一套约定俗成的默认设计风格或者是经过长期设计积累的一套风格,用以保证相同系列的产品设计出来可以有一致的风格。这种设计风格的积累体现到原型设计上,就是有一套特定的设计模式,一套特有的风格组件库,再或者还有特殊的设计规约,除了组件库,其他两项都需要日积月累的设计经验来指导,并最终形成规则。前面有介绍过UI封装的,可参见《AxureRP教程—用模板封装UI标准》,这里主要介绍一下如何进行指定UI的效果的组件封装。

一般来说,特殊的UI效果都由视觉设计人员提供,然后产品设计人员自己进行组件库的封装,也有的一起做了,总之,需要先有UI,再有组件库的封装,如下图示例,我们就要讲这个UI如何封装成组件库。

如图所示是个图片,光有图片是很难进行封装的,一般都需要视觉设计人员切割一下,切割成单独的元素或者HTML页面,这样就能将每个元素或者页面抽出来作为一个主体来使用了。

在这里要说明的就是,一些有动态效果的元素是无法进行封装的,或者说封装之后做演示就不会有动态效果,只是静止的图片。如下拉列表框,列表框,单选框,复选框等等,其他的像滚动条之类的效果是要自己做的,最适宜用来封装的对象是按钮(文字要可改的),标签,图标以及Banner,这些本来就是不动的,封装之后加上交互效果后就一样了。

用AxureRP来封装UI效果,用到的基本就只有图片组件,有需要文字的地方,可能会需要文本块组件。因为我这里只有这样的一张图片,没有做任何切割,因此下面的讲解以这张图为主。上图中需要滑动效果的按钮开关,滚动条等都只能作为静止图片,其他的如输入框,缩小展开按钮等都可以用图片组件的形式进行封装,详细可参见《AxureRP教程–制作组件库》,五角星的可以扣出来做效果,之前我也做过,参见《AxureRP教程–淘宝评价效果》,只不过有的五角星样式不一样,这里灰白的可以用来做选中时的效果,黑色代表未选的,这里只讲解一下如何封装下拉式的组件效果。

首先要先将元素从图中截出来,再用PhotoShop将元素扣出来,去掉背景色,这里包含一个显示的下拉选项框和一个下拉选项列表,要保存成PNG格式的图片,才能保留背景透明,当然要扣的时候就把空余的地方扣透明了才行。然后用一个图片组件加载下拉选项框,用动态面板加载下拉选项列表,并设置动态面板默认隐藏,然后在图片组件上设置OnMouseEnter鼠标移入事件,控制动态面板显示,这样都设置好之后,把图片组件和动态面板组件设置成一个组合,这样就可以了,就封装成了一个整体,调用的时候会自动带入鼠标移入的如果,如下图所示:

这里因演示需要,还是做成了原型,如果是创建组件的话,只要建立一个新的组件库,然后把这个复制进去取个名字就可以了,示例比较简单,大家可以自己添加交互效果。

只要知道如何制作AxureRP组件库的方法,封装这样的UI组件风格就还是比较容易的,每个公司在设计自己的产品的时候都会有一套自己的风格,除非是像我这样用来做教程用的或者是制作公共的功能演示。

 

点此查看演示

点此下载源文件



无觅相关文章插件,快速提升流量

评论已关闭!