### 本文目录
基础51. 生成部分原型页面
基础52. 为原型添加标志
基础53. 发布原型到AxShare
基础54. 重新生成当前页面
基础55. 移动设备设置
基础56. Web字体设置
### 正文
### 基础51. 生成部分原型页面
发布原型时,如果不需要将所有页面生成或发布,可以在生成HTML的设置中打开【页面】的设置,取消【生成所有页面】的勾选,则可以设置生成指定的页面。注意,子级页面无法单独发布,勾选子级页面时会自动勾选父级页面。如果需要单独发布子级页面,需要在页面管理面板中将子级页面的级别调整到一级页面。(图6-4)
[![6-4](http://files.iaxure.com/wp-content/uploads/2016/06/6-4.png)](http://files.iaxure.com/wp-content/uploads/2016/06/6-4.png)
### 基础52. 为原型添加标志
在生成HTML的设置中有【标志】的设置,可以为原型添加图片标识或文字标题。原型发布后会显示在工具栏的页面面板中。(图6-5)
[![6-5](http://files.iaxure.com/wp-content/uploads/2016/06/6-5.png)](http://files.iaxure.com/wp-content/uploads/2016/06/6-5.png)
### 基础53. 发布原型到AxShare
发布原型到AxShare是指将做好的原型发布到Axure官方提供的空间中,通过自动生成的网址进行访问。发布到AxShare的快捷键为键。发布到AxShare需要预先注册AxureShare账号,注册地址:https://share.axure.com/。(图6-6)
[![6-6](http://files.iaxure.com/wp-content/uploads/2016/06/6-6.png)](http://files.iaxure.com/wp-content/uploads/2016/06/6-6.png)
发布完成后,将会自动生成一个网址。可以通过在PC或手机浏览器中打开该网址查看原型。(图6-7)
[![6-7](http://files.iaxure.com/wp-content/uploads/2016/06/6-7.png)](http://files.iaxure.com/wp-content/uploads/2016/06/6-7.png)
### 基础54. 重新生成当前页面
修改某个页面无需将整个原型HTML文件都重新生成一遍,只需要在【发布】的选项列表中,选择【在HTML文件中重新生成当前页面】即可。(图6-8)
[![6-8](http://files.iaxure.com/wp-content/uploads/2016/06/6-8.png)](http://files.iaxure.com/wp-content/uploads/2016/06/6-8.png)
### 基础55. 移动设备设置
制作移动设备原型需要遵循规范将原型制作成标准尺寸。移动设备原型尺寸计算工具:http://www.iaxure.com/share/yxcc/(个别移动设备可能会有出入,仅供参考!)
除了制作成标准原型尺寸,还需要在生成HTML文件配置中,进行【移动设备】的设置,让生成的HTML文件【包含视口标签】,这样才能够正常显示。(图6-9)
[![6-9](http://files.iaxure.com/wp-content/uploads/2016/06/6-9.png)](http://files.iaxure.com/wp-content/uploads/2016/06/6-9.png)
### 基础56. Web字体设置
当原型使用一些特殊字体时,在没有安装该字体的设备上将无法正常显示。Web字体可以较好地解决这个问题。Web字体的使用包含两种方式。
方式一、链接“.CSS”文件(图6-10)
优点:设置简单。
缺点:需要网络以及在线CSS文件支持。
以FontAwesome字体为例。在Web字体设置中,点击【+】添加新的配置,勾选【链接到“.CSS”文件】选项,将该字体官方网站提供的“.CSS”文件地址填入超链接中即可。这样只要浏览原型时有网络支持,即可正常显示字体。
[![6-10](http://files.iaxure.com/wp-content/uploads/2016/06/6-10.png)](http://files.iaxure.com/wp-content/uploads/2016/06/6-10.png)
图中为Fontawesome4.4.0字体的配置方法。该字体CSS文件的官方链接地址为: https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css
方式二、@font-face(图6-11)
优点:支持本地字体与在线字体
缺点:设置略有复杂
仍以FontAwesome字体为例。新建Web字体配置后,选择【@font-face选项】并填写代码。
在线字体代码如下:
font-family:FontAwesome;
src:url(‘http://7xl7jg.com1.z0.glb.clouddn.com/fontawesome-webfont.ttf’) format(‘truetype’);
本地字体代码如下:
font-family:FontAwesome;
src:url(‘fontawesome-webfont.ttf ‘) format(‘truetype’);
**注意:使用本地字体需要将字体文件(.ttf)拷贝到生成的HTML文件夹中。**
[![6-11](http://files.iaxure.com/wp-content/uploads/2016/06/6-11.png)](http://files.iaxure.com/wp-content/uploads/2016/06/6-11.png)
通过以上方式处理后,未安装该字体的设备中查看原型时即可正常显示字体。
注意:在Axure RP 8的元件库中,提供了FontAwesome图标元件库,该元件库可以直接使用,无需进行上述设置。但是,官方提供的FontAwesome图标元件库与上述元件库有很大区别,官方元件库中的图标并不是文字,而是形状。在之后的案例中,我们需要将一些图标字体放入文本编辑界面进行编辑 ,这是官方元件无法做到的。
- PHP学习
- PHP应用
- PHP函数总结整理
- 39个对初学者非常有用的PHP技巧
- 深入浅出之Smarty模板引擎工作机制
- 数组操作
- file操作的常用方法
- PHP字符串输出之Heredoc说明
- require(_once)和include(_once)的理解
- PHP提高效率的几点
- php无限遍历目录
- 53个要点提高PHP编程效率
- THINKPHP
- THINKPHP 常见的问题
- 微信
- 微信公众号接口
- 微信小程序开发资料收集
- 微信小程序开发:MINA
- 通过微信小程序看前端
- 微信小程序开发初体验
- 微信小程序 Demo(豆瓣电影)
- API应用
- 支付宝
- 二维码转换
- 前端开发
- HTML5
- CSS
- 七种css方式让一个容器水平垂直居中
- JavaScript
- JavaScript奇技淫巧44招
- JavaScript笔记
- 后端开发
- Node
- SQL数据库
- 服务维护
- git使用
- Git入门私房菜
- MAC终端维护
- VIM命令大全
- 开发规范
- 智能手机屏幕的秘密
- 超实用六步透视网易设计规范(附完整PDF下载)
- UI设计常用字体规范
- APP界面切图命名和文件整理规范
- 网页UI视觉设计规范
- ios视觉设计规范说明
- 开发APP时需要注意的原则
- 移动端APP设计初步入门
- Axure
- 基础操作
- 基础1-10
- 基础11-20
- 基础21-30
- 基础31-40
- 基础41-50
- 基础51-60
- Sketch
- 软件使用
- sublime3_用户设置
- sublime下如何修改自动补全 后lang=zh-cn?
- 运营理念
- 新人指导心得体会
- 从一次活动设计,聊聊交互设计师的3个阶段
- 详情页优化那些不得不说的细节
- 店铺装修浅析
- 淘宝店铺装修之宝贝详情页的布局教程
- 宝贝详情页 客户需求调研及总结
- 宝贝描述样板房