Axure 教程:web网站原型设计技巧的分享


?

17: 25: 07每个人都是产品经理

在绘制PC端网站的交互式原型时,分享一些个人的设计技巧,享受

05374b55aeb779eca6eccd667c0c14c3.jpeg

技巧1:构建导航框架页面

当你仍然有点白,当你开始设计网页界面时,最常见的错误是每个页面的基本绘图是顶部导航,左侧导航,右侧是页面内容。

如下图所示:

594995812fa2bb1287225d40fc996ad4.jpeg

在设计大量页面时,一旦改变侧面导航的名称或改变跳转链接,就必须更换所有页面的导航,并且操作非常复杂和冗余。

在课外学习后学习后,我学会了如何使用[内联框架]在页面内容之间切换。只需构建一个框架页面,无需重复复制和粘贴。

布局如下:

04895fa10d5ecc4806c61065157d7c6a.jpeg

只需将[鼠标单击]添加到导航中的模块名称,链接到内嵌框架中的页面,设置如下:

c9ffa0201ce547fe8a0273b5a94bc4c0.jpeg

技巧2:响应式布局设计

在绘制原型时,我们可以先设置介质屏幕1366 X 768的高度,然后将“加载时”大小更改交互事件添加到组件。在上面的框架页面中,我们可以将背景框架的宽度设置为:[[Window.width]],它直接扩展到窗口的大小,并且它的高度不会改变。

同时,将[侧面导航]的高度设置为:[[Window.height - 顶部栏的高度]],宽度不变,并将[内联框架]的宽度设置为:[[Window.width - 侧导航宽度]],高度设置为:[[Window.height - 顶栏的高度]]。

这样,当您加载框架页面时,您可以使用组件的大小填充预览全屏。

提示3:将页面标题框转换为主页

b1b0b5c360f1a5032282f58cdbbdb986.jpeg

我们可以将“加载”文本交互事件添加到“页面标题框”,设置为:组件“设置文本”检查“当前组件”,将文本值设置为[[PageName]],这样就可以直接获取它列表左侧的页面标题保存了手动重新输入的繁琐任务。

同时,它将被转换为master,以便你以后想要改变标题导航框的样式,你只需要在master中更改一次,也就是说,你可以改变“标题导航框” “所有其他页面引用的样式在一起。

设置如下:

cdd858a7c86e47110d0b892a8a70cdf1.jpeg

技巧4:将弹出提示转换为主提示。

最常用的弹出窗口是提交和删除的操作提示。我们可以把它变成一个动态面板,然后弹出垂直水平居中浏览器,然后变成主节点,以便引用整个电台的所有删除提示弹出窗口。这个主提示弹出窗口,后来的优化调整非常方便快捷。

27f72194a9e7258caf3bc97086f44a88.gif

以同样的方式,我们可以将页面的其他共享弹出窗口和模块(例如页脚)转换为主管理。

作者:火星冰,公共号码:冰峡谷的Axure

本文由