如何用Axure制作一个高保真的个人网站

如何用Axure制作一个高保真的个人网站？越来越多的人想创建自己的个人网站，分享自己平时的工作总结和收藏，整理成自己的个人网站，既能帮助同行相互学习，又能体现自己的能力。我用axure做了一个个人网站。以这个网站为例，我们来看看如何用Axure制作一个高保真的个人网站！如果后期维护频繁，建议正常开发网站，以后维护需要一个后台。Axure的网站只适合维护量小，简单的网站。1.普通网站开发流程与axure网站的比较。1.正常流程。2.axure生产流程。2.什么样的个人网站不适合axure？1.需要后台维护。所谓后台维护，是指需要在官网开发一个后台，每天通过后台上传新文章、新内容等信息。Axure只能做展示效果，所以Axure不适合在这种场景下做网站。2.有很多页面和内容。首先axure的网站导出的html文件比较大，比正常前端开发的网站大很多。如果整个网站有很多页面，或者单个页面包含的内容/图片比较多。网站加载很慢，所以axure不适合在这种场景下制作网站。3.有复杂的动态效应和相互作用。目前，大多数复杂的动作和交互都是用h5和css3完成的。以前我们也可能在网站上看到flash或者AE做的动作。目前大部分都是用flash和AE把前端转换成代码实现的。让网站浏览更流畅。如果在axure中加入复杂的动态效果和交互，肯定会影响网站的加载速度，从而大大降低网站的浏览效率。3.解释制作axure网站的困难。1.整体尺寸控制。这个网站的效果是内容区域宽度固定，背景宽度自适应。(1)内容区域的宽度。考虑到主流的显示分辨率，我将内容区域的宽度设置为1200px。所有内容和图片都要放在1200px以内。可以在页面上拉一条参考线到横坐标1200的位置。设计的时候可以从最左边开始，不给左边留空间。接下来，我们将讨论页面居中的方法。(2)整页居中。之前的文章之所以说不能留空格，是因为我们要设置页面居中对齐。选择项目-页面样式编辑，然后选择页面布局中的第二个选项。选择此选项时，重要官方绘制时，页面仍在最左侧，浏览器预览时，整个页面将显示在中央。(3)自适应背景宽度。如果网站上某个页面的背景颜色相同，直接点击当前页面的空白处，然后选择样式-背景颜色，选择你需要的颜色。如果一个页面的不同模块有不同的背景颜色，那么我们就需要用动态面板来实现。首先拉一个动态面板，设置高度到你需要的高度，宽度可选。但是为了给这个模块添加内容，建议宽度要和网页内容的宽度一样，比如1200px。然后在样式中设计你需要的背景色，然后勾选宽度100%。在浏览器预览后，模块的背景颜色将根据每个分辨率进行调整。2.导航。我的导航效果是固定在浏览器顶部的。之所以要固定在浏览器的顶部，是因为当页面很多的时候，用户可以通过滚动到底部直接看到和操作导航。制造流程:(1)拉一个动态面板，导航高度是动态面板的高度，宽度拉至1200px。(Width必须下拉内容区域的宽度，因为导航内容要放在动态面板中)(2)设置动态面板的背景色(即导航背景色)，勾选宽度100%。(3)在属性中，选择固定到浏览器，并选择固定到浏览器窗口，水平和垂直。永远保持底部在顶部。如果没有其他内容覆盖导航，请检查。我的导航右侧有一个二维码需要覆盖，所以我的没有勾选。(如果没有勾选，设计所有页面的时候注意把导航动态面板放在最上面。导航文本:导航文本需要放在动态面板中，文本需要有三种状态:当前页面状态、鼠标悬停状态和正常状态。3.横幅处理。横幅的图片是整个网站最大的图片。不建议将banner图片直接放入axure文件中，这样会不具有自适应性，影响加载速度。纯色背景banner的制作技术:和上面的教学类似，使用动态面板实现banner背景颜色的自适应。尽量用斧头打字，少用图片。横幅的图片需要经过photoshop处理，最后保存为png格式，背景透明。然后把图片拉进axure文件。非实物背景banner的制作流程:需要将banner背景装饰成非常宽的画面，有条件的话设置为5000px。在动态面板样式中选择背景图片-导入图片。检查属性中100%的宽度。尽量用斧头打字，少用图片。(如有必要，可将文本处理成背景图像并导入)4 .按钮的效果。所有可点击的图形按钮和文本按钮都需要有三种状态:正常状态、鼠标悬停状态和鼠标按下状态。在属性交互样式设置中设置鼠标悬停和鼠标按压的效果。5.二维码的作用。我的二维码的效果是鼠标悬停在导航右侧的二维码图标上，从上到下推出二维码，鼠标从下到上离开并收回二维码。制作过程:(1)在动态面板中拉一个二维码图片，放在图标下方。(2)在浏览器上选择固定，选择水平居中(根据网站大小调整边距)，选择垂直固定。选中以始终保持顶部。(3)在导航动态面板中的二维码图标上添加两个事件，如图:6。跳转到本网站之外的链接。网站上有一些文章、推荐等模块。点击后，我们跳转到一个不在这个网站上的链接。我们需要向可点击区域添加点击事件，链接到外部链接，并在新的浏览器窗口中打开它们。具体操作如下:四、注意事项。1.尽量少插入图片和文字。比如横幅上的文字，里面的各种文字推荐，尽量不要以图片的形式放出来。试着用axure排版。2.注意细节。既然是高保真，就不能像低保真一样粗糙，整个网站的字体、大小、间距、颜色等细节。注意ui设计等细节。3.统一的交互效果。可点击的区域，比如文章，鼠标悬停的时候应该会有变化，比如外部灯光，笔画等效果。按照设计原型，每次操作都给用户及时反馈。4.图像压缩。在不降低图像质量的情况下，尽量压缩您使用的每张图片。5.买个域名。你可以选择从腾讯云和阿里云买哪个更便宜。尽量选择常见的域名后缀，如cn、com等。第一个字母可以用拼音选择，也可以用自己的名字拼写。5.在线发布。这就是如何用Axure制作一个高保真的个人网站。如果想学习更多Axure教程，可以来。课程体系完善:从软件入门到分类教程，从理论知识到职场实战，打造了一体化的学习和内容服务体系。