Axure生成的html页面切换会闪烁该如何处理?

不知道小伙伴们有没有想过这样一个问题,AXURE导出的页面能否去掉左侧和顶部的导航(如下图所示),直接当做一个正式的网页来使用:

我有这个想法由来已久,就是不知道这里面的技术边界。

直到昨天看到浪子PRD的官网,我判断应该是用AXURE直接生成的,一看源码,果然是。

然后我在网上找了下,还真有大神分享这样的小技能,大神原文是:

3、复制第一个页面,改名为index.html。这里要有一定的HTML功底可以根据自己的需要来调整名字和链接。搞完这一步就算大功告成啦。

至于上传到服务器或者github的,先挖个坑,改天来填坑。

软件中有不完善的地方,要靠自己的经验来规避和克服,还算好用。

熟练了Axure,对软件设计文档的编写大有帮助,因为可以有一些界面图出来。

画界面图时多用Axure,画流程图时多用Visio,为的是熟练Axure,并且Axure画界面要简便许多,节约时间。

masters和sitemap面板很相似,文档操作也一样,它们的本质区别是,sitemap里的档是最终展示页面,masters里的文件却只是一个模块,是页面的一个部分。

masters的英文直译是主人或雇主,但是我认为这里可以叫做模板,或者复用模块。masters 的文件,是页面中重复的模块,由于在不同页面中这些模块是一样的,所以拿出来作为一个模块编辑,然后在不同页面中进行调用。

这个功能类似于网页程序开发中的程序复用,不同页面中调用同一段程序,一般把这段程序单独做成一段页面程序,然后用include命令进行调用。master的档就相当于这段被调用的页面程序。dreamweaver也有类似的功能,就是template,可以参照理解。

master的功能条功能基本和sitemap一模一样,功能也基本一样。唯一不同的是master可以创建档夹,可以通过档夹收纳不同的档,因此唯一不同的就是第一个功能按钮,功能作用是增加一个档夹。

behavior是行为的意思,这个功能是axure升级到4版本后加入的,是针对master的不同使用情况而添加的一个功能,也是要重点介绍的功能。

1、normal:普通档。就是一般的复用档。是默认创建的复用文件。

2、place in background:定位的复用模板,这类模板的特点是定位于页面的底层,并且锁定模板中的widgets在他原来创建的位置。这类复用模块主要用于创建head、foot、侧边栏等明确定位的复用模块。

这类模块与其它类型的复用模块的不同在于,其它模块与复用到页面的模块是完全相同的,模块的功能设置是什么,功能说明是什么,页面中的模块设置和功能说明就是什么。

而自定义模块与页面中被复用的模块是母子关系。自定义模块只决定了模块的功能和位置,但是进入到特定的页面中,模块中的各自部分的说明和功能可以重新定义。

充分理解三种不同类型的复用模块的区别,根据不同环境有效的选择,也是非常重要的。四、右键单击文件——其它

遍地开花,再加上在线工具,  或 ,思维导图工具 ,  或 ,在不同的细分领域给了我们很多的选择,那么,哪个才是最好的原型绘制工具呢?

在实际使用过程中,由于项目具体阶段、平台特性以及输出物展示对象的不同,并没有哪个工具受到设计师们一致认可,每个都有其各自的优势和缺陷,按照个人经验对比了一下常见的几款。

下面,详细介绍一下每一类软件的优劣。

作为设计师的看家技能,理论上可以通过它做出任何图形,但对于交互原型来说制作和改动成本略高,图层和组件的处理上比较死板,软件自身性能和模板库也很受挑战,容易过快进入细节讨论而忘记初衷,并非交互稿首选,当然也有设计师一开始就是朝着高保真 Demo 方向做的,用它最直观。

同胞兄弟 Illustrator 在矢量处理上表现的略好,不受画布大小和图层的困扰,也有丰富的模板库支持原型设计,但继承了 Adobe 家族一贯功能大而全导致操作很繁琐的特点,原型图制作效率也不高。

相比之下,干儿子 Fireworks 拥有更简单的界面,同样在图层处理方面的优势,尤其是可编辑 png 文件包含了图层和矢量信息这一点保证了文档的传承性,受到很多的设计团队的青睐而做为交互输出工具的首选,可惜 Adobe 对其支持有限,最新的 Adobe CC 家族中更是失去了它的踪影,未来 Fireworks 优化空间很有限。

作为非专业绘图工具,用 Keynote / PPT 来画交互稿算是曲线救国,丰富的交互动作和简单的使用流程解决了很多交互演示需求,CDC 的同事曾写过一篇《》 做了很好的解释,但问题也正如文章中所述,优缺点非常明显,模板库几乎为零,在没有其它工具辅助情况下自行绘制费时费力,在这里就不详细介绍了。

号称是互联网产品经理标配,国内有大量资料和讨论,其优势非常明显:操作复杂度介于 Keynote/PPT 和 Adobe 家族之间;拥有全套 web 控件库,直接拖拽即可快速制作网站原型;丰富的动态面板可以用来模拟各种复杂的交互效果;导出 HTML 后可以更加准确的传达信息架构和页面跳转。

但对移动产品原型支持不足,Axure 无法导出可在移动端演示的文件,只适合做信息结构和页面逻辑的展示。在对形状样式的处理上不够丰富,很多细节处理的不够好,做出来的线框图大多不够好看。

作为 Mac 平台下最好的原型设计工具,除了用来绘制普通图表、树状结构图、流程图、页面编排等,还可以试试规划电影剧本、 绘制公司组织结构,甚至是作为演示文稿来展示一个项目。

的表现那么亮眼,但由于其丰富的模板库、轻松的上手体验以及大量贴心的细节,战胜了其它所有竞争对手,成为我日常工作最主要的工具。

以上几个软件已经能涵盖大多数的使用场景,但工具毕竟只是纸和笔的延伸,在熟练掌握其中一个的基础上,不断尝试新工具不仅能发现更多有价值的技巧加快设计节奏,更是对自身能力短板的了解,互相结合使用让想法不受工具牵绊,努力让自己成为全栈设计师才是它们的价值。

另外,市面上较少介绍 OmniGraffle 技巧的文章,很多人感兴趣但不知道怎么用好它,下面分享10个有用的小技巧来加快上手。

1. 自定义你的工作界面

在 Omnigraffle 中,可以通过拖拽指示器到另一个组件上的方式将包括边框填充颜色等样式复制过去,也可以复制任意单一属性,大大节省了重复或近似组件的样式修改成本。

3. 网格、智能辅助线及参考线

除图示外,在画布空白处点击右键可以看到三个选项

  1. 对齐到网格,参考定义画布环节描述的网格设定,勾选这个选项后,调整形状大小就会使边缘贴近网格,拖拽位置时会根据形状大小让任意一边贴近网格。
  2. 智能对齐辅助线,勾选后,拖拽形状位置时,会自动寻找当前水平或垂直方向,边缘或中心能对齐的已有形状或画布中心线,推荐勾选
  3. 智能距离辅助线,勾选后,会自动寻找水平或垂直方向上临近的两个形状,在等距的时候给出提示,推荐勾选

在用 visio 画流程图过程中最受不了的就是连接线不能随意控制形状位置样式,只能画几种特定的图,新建节点的操作步骤也很繁琐,而这一缺陷直接导致各种思维导图软件的崛起。在 Omnigraffle 中这些都变得很容易,只要记住几个快捷键,画起流程图来轻松写意。

在制作交互模型时,加入对点击事件的处理能很方便的演示我们想要的效果,Omnigraffle 支持的脚本不多,没有鼠标滑过,没有动画,只有点击跳转和点击显示或隐藏图层两种,对于一般的原型演示足够用了,尤其是图层显示隐藏,例如可以像图中所示将浮层中的内容放在图层2上,用关闭按钮用来触发隐藏,来实现图示效果。

在演讲模式、导出为 pdf 或 html 后都可以用来演示设定好的交互点击效果。在演示移动原型的时,我通常的做法是制作和屏幕大小一致的文件,设置好点击效果后导出 pdf ,在手机上用任意支持读取 pdf 的应用打开。(这里推荐多看,无页面翻转动画,无多余留白)

和 Fireworks 一样,Omnigraffle 提供类似的画布和图层管理,方便将项目所有内容集中在一个文件中,每个画布可以单独设置页面背景、大小、单位、网格和参考线,并且可以通过共享图层让所有画布使用同一个母版,也就是说既可以当 Indesign 用,也可以当 PPT 用。

画布:Omnigraffle 默认使用 pt 来定义自身单位,在画布面板中用 1pt = 1xx 的方式来设置换算方式,目标单位可以是像素、厘米、英尺、千米等,意味着除了用来画用户界面,还支持用来画地图、家装平面图等任何大小的精准图形。

图层:可以将 Omnigraffle 中的图层理解为一个特殊的、可以批量隐藏或锁定的、可以直接转换为所有页面共享的群组,共享图层的名称会被标记为橙色,界面左下方的内容面板显示了每个图层内部的层叠顺序,如果文件导出时选择 psd,Omnigraffle 还会将图层内容合并成 photoshop 能读取的格式。

如图所示,利用共享图层这一特性,我们可以将画布设定为,并在共享图层的指定位置插入页码 (Edit→Insert Variable→Canvas Number) 等,模拟 PPT 的方式制作演示用文档。

点击 Help→Keyboard Shortcuts,查阅所有的系统快捷键,了解下面这几个就能满足大部分情景了

  1. 最常用的检查器面板,cmd+12345切换;
  2. 设置好一个常用的形状样式,右键点击加入收藏,以后按住 s 不放就可以直接画出来;
  3. 按住 t 不放点击空白处就可以直接新建一个文本块,双击任意形状也可以在里面插入文字;
  4. 放大缩小只能通过 cmd+shift+. 和 cmd+shift+, 右手需要离开鼠标不是很方便,我通常是按住 z 鼠标点屏幕来放大,option+z 点击屏幕来缩小(z这个操作在ps和ai里也通用);
  5. 快速复制一个形状 cmd+d,新的形状会在当前形状右下方一个网格的位置出现,比cmd+c之后在cmd+v省一步。

在 Omnigraffle 中,工作文档 .graffle和模板文档 .stencil 的表现和编辑是完全一样的,可以很方便的将已经编辑好的文档组织整理后,复制粘贴到模板文件中沉淀,作为后期复用规范,如果搭配云同步工具使用,小型设计团队统一设计规范不再是难事。

除软件自身提供的一堆模板外,全球 Omnigraffle 爱好者们搭建了  用来共享各自的模板 (部分收费),事实上如果你有足够的耐心和精力,所有的模板你都可以照猫画虎自己画出来。

9. 制作自己的图标库

Omnigraffle 自带的图形基本上能满足大部分需求,简单形状也可以用形状组合和钢笔工具来画, Graffletopia 上有很多其他人画好的形状图标,但面对具体项目的时候需要自己画图标时该怎么办呢?以下有几种方式可供大家选择

  1. 最快捷:直接粘贴图标图片进来,缺点是无法调整颜色,不可放大。
  2. 多色图标:从 AI 中直接拖拽图形进来,仍旧保持矢量可随意拖拽但不可调整颜色。

Mac 自带的取色器只能在已有的颜色集里选或是靠肉眼在色盘里选,非常不严谨,还好有爱心人士提供了  和  插件来帮助我们精准设定颜色。

  1. ,用来帮助从旧版本升级上来不知所措的老用户回到 Omnigraffle 的怀抱。
  2. ?如果需要手动安装,则只需要在 Omnigraffle 中点开模板库,任意选择一个模板后,点击模板名称右侧的齿轮,选择 Show In Finder 就可以看到全部的模板,将下载好 Stencil 文件拖进来即可。
  3. Mac 下另一款设计软件  也非常棒,五星推荐。

“优设网“是一个分享网页设计、无线端设计以及PS教程的干货网站。
PS礼仪手册:网页设计师必须修炼的内功技法,更是不可或缺的WEB设计指南。
设计微博:拥有粉丝量63万的人气微博 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

我要回帖

更多关于 html如何切换页面 的文章

 

随机推荐