axure rp编辑html模板,AxureRP教程—用模板封装UI标准
前面在介绍AxureRP的时候,有介绍到过它的模板管理面板(Masters),对模板管理面板善加利用能对设计起到事半功倍的效果,且能提高所设计页面生成原型后的加载速度。很多产品只需要利用现成的UI标准就可以画出原型,为了减少流程、降低沟通成本,直接利用现有UI标准进行原型的搭建,一般会用Photoshop来实现UI原型,但是效率和不可交互性还是存在很多问题,所以需要有一套完成封装的UI标准并且产生可交互的中高保真原型,这里最好是整体的统一风格,因为只应用于某一个体的,就失去了封装的意义。这里主要介绍AxureRP怎么使用模板管理面板来封装UI标准。
一、创建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都会自动加载,在组件选择面板里可以直接选择使用,不过这样就起不到提高加载速度的效果,后面会介绍。
axure rp编辑html模板,AxureRP教程—用模板封装UI标准相关推荐
- zblog首页模板修改php,【zblog】zblogphp主题模板修改教程 zblogphp模板怎么修改?
zblogphp主题模板修改教程 zblogphp模板怎么修改? 这一篇主要是介绍"zblogphp"的模板修改教程,zblogasp的模板修改教程请看本站之前发的一篇教程&quo ...
- php模板修改教程,商业模板修改高级教程
[TOC] ##前言 `商业模板详细修改教程会修改模板配置数据文件,涉及到模板配置数据的重置,请谨慎修改,修改前务必备份网站数据和模板文件.` **米拓官方不提供任何模板修改的技术支持和咨询服务,亦不 ...
- Axure RP 9母版使用说明【教程二】
一.母版介绍 Axure 的母版一个公共板块.也就是说可以将一些公共的页面,控件,元素放到母版.然后将这个母版分配到想要的页面中实现共享.主要目的就是实现重复使用. 二.母版创建 二.母版使用 这样设 ...
- Axure RP 8.0软件安装教程
简介: Axure RP是一款专业的快速原型设计工具.Axure(发音:Ack-sure),代表美国Axure公司:RP则是Rapid Prototyping(快速原型)的缩写. Axure RP ...
- AE软件+模板+教程+各种模板资料+安装教程(自己花钱买的)
学习AE的过程中,稳定的软件必不可少,在网上找的大多都特么的-,不说了反正很烦,所以花钱买了一套,为了服务大家,拯救那些个正在找软件学AE的朋友们,我把自己买的资料免费分享给大家,资料主要包括以下资料 ...
- php模板使用教程,TMDPHP 模板引擎使用教程_php模板_脚本之家
在讲解tmd_tpl的使用方法之前,我要先讲讲为什么要重新发明这个轮子.那我们要从这世界上所谓的PHP模板引擎都为大家做了哪些贡献说起 在PHP界谈模板引擎,必不可免的要拿Smarty开刀, 这个无比 ...
- Joomla模板制作教程:joomla模板组成
为了理解JOOMLA模板的目录结构, 我们将着眼于一个空白的JOOMLA模板. 不同的文件和文件夹组成了JOOMLA的一个具体模板. 这些文件必须被放置在 /templates 的JOOMLA安装目录 ...
- axure RP文件如何找回_AXURE教程:管理后台页面框架
今天,教大家如何用AXURE做一个管理后台页面框架. 本文以员工信息为案例,展示中继器增.删.改.查+导入+导出+排序的真实效果.包括直接在中继器修改和弹出页面修改两种模式,只需要导入数据,就可以直接 ...
- php模板初级教程,风格模板初级不完全修改教程
风格模板初级不完全修改教程 更新时间:2006年10月09日 00:00:00 作者: 就自己的一点点经验,希望能给初接触模版修改的朋友有个参考. 关于模版修改, 引用星星签名里的一句话" ...
- php网站模板制作教程,WordPress模板页制作教程(示例代码)
写在前面的话: 有很多WordPress小伙伴想制作不同风格的页面来满足自己的个性需求 但是大多数模板提供的页面模板非常有限,该如何手动制作属于自己风格的模板页呢? 其实,正如以上所说的,每个人都想拥 ...
最新文章
- Docker运行sonarqube (代码质量检测平台)
- js中new实例化对象内部过程
- servlet配置web.xml问题
- Python爬虫解析html:lxml的HtmlElement对象获取和设置inner html
- c++ 输出二进制_Python之输入输出(input_output)
- github本地文件和远端文件的协同
- 做 NLP 算法研究,去大公司还是创业公司?
- 通过分区在Kafka中实现订单保证人
- CesiumJS 2022^ 原理[2] 渲染架构之三维物体 - 创建并执行指令
- socket编程简单Demo讲解及源码分享(C# Winform 内网)
- linux shell脚本关于文件存在与否的判断
- 互联网金融监管平台、舆情监测、数据统计、预警、违规、企业中心、舆情概况、舆情报告、新增企业、栏目管理、年审企业、企业走势、推价位管理、新闻管理、账户管理、监管平台、金融监管、Axure原型、rp原型
- Linux运维 第三阶段 (九)NFS
- 一次防火墙无法重启的排查过程和总结
- 超详细图文介绍,华为桌面云解决方案
- Blender 基础 骨架-02 骨架的各种呈现方式
- Singularity 代码阅读笔记[结构: Struct_Microsoft_Singularity_BootInfo]
- 【知识兔】自学Excel之8:数据输入与编辑(基础操作)
- 20145212罗天晨 恶意代码分析
- OCR技术3-大批量生成文字训练集