liukai 发表于 2023-11-16 14:52:30

懂得:axure rp编辑html模板,AxureRP教程—用模板封装UI标准


  前面在介绍AxureRP的时候,有介绍到过它的模板管理面板(Masters),对模板管理面板善加利用能对设计起到事半功倍的效果,且能提高所设计页面生成原型后的加载速度。很多产品只需要利用现成的UI标准就可以画出原型,为了减少流程、降低沟通成本,直接利用现有UI标准进行原型的搭建,一般会用Photoshop来实现UI原型,但是效率和不可交互性还是存在很多问题,所以需要有一套完成封装的UI标准并且产生可交互的中高保真原型,这里最好是整体的统一风格,因为只应用于某一个体的,就失去了封装的意义。这里主要介绍AxureRP怎么使用模板管理面板来封装UI标准。axure模板https://www.axure9.comAxure模板网为产品经理提供各种软件开发Axure RP产品原型模板下载,Axure组件及素材免费下载,为产品经理提高设计效率,保持产品一致性。
https://img.axure9.com/static/axure/images/logo-new.png

  一、创建UI零件库

  1、把UI标准中的元素进行提取。一般UI标准的形式是以图片的形式提供的,所要做的就是把每个元素单独切割出来保存成图片文件,最好背景是透明的,而且把图片上的文字都去掉保持可扩展性,然后按照自己需要来分类。

  2、在AxureRP里面的模板管理面板中新建一个文件夹并命名,在文件夹下面新建一个模板文件。如果已经分好类了,就在对应类别文件夹下建。

  3、双击打开这个模板,在组件里面把图片组件拖动到中间的操作区域中,双击找到已经保存好的图片文件,这样一个UI组件就加到AxureRP里面了。

  4、如果这个UI组件本身需要文字元素,那么在组件里面把文字组件放到UI零件上的相应位置,然后根据UI标准调整文字样式。注意,因为AxureRP不支持中文,所以他的字体和html中的px是不同的,html中的12px字体在AxureRP里面要设置为9,14px的要设置为11,以此类推。

  5、在AxureRP中模板可区分为可单独编辑和不可单独编辑(正常及作为背景),默认是不可单独编辑,也就是只要改动模板的样式,这个模板在所应用到的地方都会改变。若需要单独编辑,特别是在编辑文字的时候,可以右键点击模板,选择行为下的自定义组件即可。

  6、保存并重复2~4的步骤,就可以完成所有UI组件的转换。

  二、结构库构建

  有时候需要可以直接使用的模块,类似于网站的头部和底部是可以直接调用不需要再设计的。类似于这类的结构,利用现有UI组件进行搭配。方法和搭建UI组件类似,只要新建一个文件夹然后新建模板,再把相应的UI零件拖放到指定位置便可以完成。

  这里要注意几点:

  1、要把一些基本交互加上去,保证原型的可交互性。

  2、模块是属于统一的内容,一般不需要转换成可单独编辑的模式,也可以根据个人需要自行转换。

  三、UI标准的更新

  要记住一点:不断更新,要定期把新的UI组件加入到AxureRP中。

  完成一、二两大步骤其实已经可以开始工作了,每次使用这套封装的组件时只需要导入这个rp文件,并选择第二项“Masters”,以及Check All所有组件,点击确定完成就可以直接使用了。

  其实这里也可以用创建RP的库文件来实现,把上面所述的所有模板做成库里面的一个个组件,然后生成库文件,把这个库文件放在AxureRP安装目录下的库文件夹,这样每次打开AxureRP都会自动加载,在组件选择面板里可以直接选择使用,不过这样就起不到提高加载速度的效果,后面会介绍。

爱心你我他 发表于 2024-2-23 11:49:51

我是来刷分的,嘿嘿

苦浪漫 发表于 2024-2-23 12:33:14

为自己家乡的社区网贡献点力量,回个帖子

铁木真 发表于 2024-2-23 12:36:01

不错不错,楼主您辛苦了。。。

飞豹游侠 发表于 2024-2-23 12:37:52

看帖回帖是美德!:lol

狄更斯 发表于 2024-2-23 12:44:31

找到好贴不容易,我顶你了,谢了

失去记忆的人 发表于 2024-2-23 12:45:20

过来看看的
页: [1]
查看完整版本: 懂得:axure rp编辑html模板,AxureRP教程—用模板封装UI标准