当前位置: 首页 > news >正文

[翻译]Axure-Page Properties-原型设计工具Axure学习-第1.2节

Working with Page Properties

在本章当中,学习使用页面样式,在原型当中增加背景或居中页面,应用素描效果和新建参考线。

视频:下载MP4格式


Page Formatting

Page Formatting 允许你编辑个人Pages的格式。同时,也可以选择应用默认的page样式或者自定义的page样式。Page Formatting设置选项在Page Properties 面板的第三个选项卡里面。

Format Page Properties

 

页面设置有以下属性

  • Page Style:如widgets,你可以定义页面的样式。点击右边的图标(或者 Wireframe-> 主菜单里面的 Page Style Editor ),可以编辑默认样式或者新建自定义样式。如果你想在你默认的原型中居中你的每一个页面并设置默认的背景图片,编辑Default Page样式的设置并应用到page中。
  • Page Align:将原型在页面当中靠左或居中布局。这只会应用到HTML中,所以 在Axure RP的wireframe中看不到这种变化。居中依赖于widget在页面当中并且假设widget的左边不在“x=0”的位置。你可以设置page的左边据为100px,但是页面依然会在浏览器中居中显示,这是由于widget居左还是居右造成的。
  • Back Color:设置Page的背景色
  • Back Image:设置Page的背景图片,可以选择是否平铺图片。
  • Horiz Align and Vert Align:设置背景图片水平和垂直方向的位置。
  • Repeat:设置背景图片的平铺方向,垂直,水平,或者垂直和水平。

 


Sketch Effects

 

Sketch Effects能快速将项目的线条拥有数偶会效果。这样可以帮助人们将注意力集中到结构,联系和功能当中,如果你需要的话。

Sketch Effects功能是属于Page Formatting的一部分(所以你可以将其设置在页面样式当中),它拥有以下选项:

  • Sketchiness:随着Sketchiness的增加,widgets会变得越来越波浪形。我们习惯性将其设置在50附近。
  • Color:改变整个项目的灰度,包括图片,填充色,背景和字体颜色。
  • Font:统一页面中所有widget的字体。可以选择使用手写字体,譬如Axure Handwriting,Scoder Hand,Lucida Handwriting或者Bradley hand ITC。
  • Line Width:增加widget 边框的宽度以至于看上去更像手写。我们习惯性使用“+1”。

Global and Page Guides

Guides/参考线 在保持布局的一致性或widget对齐上面有极大帮助。你可以在个人页面和全局页面当中新建参考线。全局页面当中的参考系在其他页面上都起作用。

Add guides

在wireframe的水平或垂直标尺当中拖动,就可以在当前Page新建参考线。绿色线是被当前选中的线。释放鼠标线条颜色会变成蓝色。

按住“Cmd键”(如果是mac)或“Ctrl键”(如果是PC),在标尺当中拖动线条就会创建应用在所有页面当中的全局参考线。在全局的参考线是粉红色的。

右键wireframe,在菜单当中选择Grid and Guides,可以选择隐藏或者锁定参考线。

在菜单当中选择“Wireframe-> Gridd and Cuides-> Create Guides”或者右键Wireframe Grid并选择内容菜单,会弹出“Create Guides”对话框。

有两个网格设置供选择:960 Grid 12 Column和 960 Grid 16 Column。或者选择自己定义特殊的网格。如果你想参考线出现在所有页面中,选中选项框“Create as Global Guides“。

你可以在这里学习更更多关于”960 Grid System“的内容。

相关文章:

  • jquery--递增--年份的选择
  • 并发数据结构-1.4 池
  • [TestLink]搭建指南(ubuntu)
  • iOS版本、iPhone版本、Xcode版本比对
  • 设计模式--享元模式
  • KVO 键值观察者
  • 复制含有随机指针节点的链表
  • Android 文件式数据库Realm
  • mobAndroid免费验证短信
  • 【css3】浏览器内核及其兼容性
  • 一个苹果开发者的苹果表体验报告
  • 责任链模式
  • C 数据结构与算法系列 插入排序
  • spring-001-Ioc 顶层容器
  • Android自动化测试之Monkeyrunner使用方法及实例
  • JS中 map, filter, some, every, forEach, for in, for of 用法总结
  • 分享一款快速APP功能测试工具
  • 【402天】跃迁之路——程序员高效学习方法论探索系列(实验阶段159-2018.03.14)...
  • 2018天猫双11|这就是阿里云!不止有新技术,更有温暖的社会力量
  • android图片蒙层
  • const let
  • Consul Config 使用Git做版本控制的实现
  • C语言笔记(第一章:C语言编程)
  • express.js的介绍及使用
  • Java 最常见的 200+ 面试题:面试必备
  • Js基础知识(四) - js运行原理与机制
  • Just for fun——迅速写完快速排序
  • LeetCode算法系列_0891_子序列宽度之和
  • MaxCompute访问TableStore(OTS) 数据
  • MySQL几个简单SQL的优化
  • SSH 免密登录
  • 复杂数据处理
  • 基于Volley网络库实现加载多种网络图片(包括GIF动态图片、圆形图片、普通图片)...
  • 坑!为什么View.startAnimation不起作用?
  • 聊聊spring cloud的LoadBalancerAutoConfiguration
  • 七牛云 DV OV EV SSL 证书上线,限时折扣低至 6.75 折!
  • 前端面试之闭包
  • 浅谈Kotlin实战篇之自定义View图片圆角简单应用(一)
  • 消息队列系列二(IOT中消息队列的应用)
  • 协程
  • 一些基于React、Vue、Node.js、MongoDB技术栈的实践项目
  • 在GitHub多个账号上使用不同的SSH的配置方法
  • 字符串匹配基础上
  • 最近的计划
  • PostgreSQL 快速给指定表每个字段创建索引 - 1
  • 阿里云ACE认证之理解CDN技术
  • 资深实践篇 | 基于Kubernetes 1.61的Kubernetes Scheduler 调度详解 ...
  • ​决定德拉瓦州地区版图的关键历史事件
  • ​软考-高级-系统架构设计师教程(清华第2版)【第9章 软件可靠性基础知识(P320~344)-思维导图】​
  • $jQuery 重写Alert样式方法
  • (2)(2.10) LTM telemetry
  • (补)B+树一些思想
  • (附源码)ssm智慧社区管理系统 毕业设计 101635
  • (三) prometheus + grafana + alertmanager 配置Redis监控
  • (太强大了) - Linux 性能监控、测试、优化工具