整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
家好！我是一名UX设计师，希望可以与共同喜欢探索用户体验的朋友们一起成长！我会不定期地更新一些有关用户体验方面的文章。本文主要分享：无需ui和前端制作个人网站，只需一个Axure就能搞定！
越来越多的人想要创建自己的个人网站，把自己平时工作的总结和收藏分享出来，整理到自己的个人网站中，不仅能帮助同行互相学习，更是自己能力的体现。我自己用axure做了一个个人网站，以本网站为例，来为大家讲解如何用axure做出高保真的个人网站。
如果后期维护量较频繁的，还是建议正常开发网站，并且需要有后台进行日后维护。axure制作网站只适合维护量较小且简单的网站。
在正文开始前，先给大家看一下网站的效果（http://uxgao.com），觉得不错的童鞋可以继续往下看哦！
所谓的后台维护指得就是需要开发一个官网后台，日常通过后台上传新文章、新内容等信息。axure只能做出展示效果，所以该场景下不适用axure制作网站。
首先axure制作的网站导出的html文件较大，相比正常前端开发出来的网站要大好多。如果网站整体页面较多，或单独某一个页面内容／图片较多。网站加载较慢，所以该场景下不适合用axure制作网站。
现在大多数复杂的动效和交互都是用h5、css3做的，过去我们可能还会看到网站上有flash或AE做的动效。目前大多数都是用flash、AE做出效果后，前端转换成代码实现。从而让网站浏览更加流畅。如果再axure里加复杂的动效和交互，那么绝对会影响网站的加载速度，从而大大降低了网站的浏览效率。
本网站做的效果是内容区域宽度固定，背景宽度自适应。
（1）内容区域宽度
考虑到主流的显示器分辨率，我设置的内容区域宽度为1200px。所有内容和图片都要放在这1200px以内。可在页面中拉一个参考线，拉到横坐标1200的位置。在做设计的时候从最左侧开始就可以了，不需要给左侧留出空间，下一条会讲到页面居中的方法。
（2）整体页面居中
之所以上一条说到不给左侧留空间，是因为我们要把页面设置成居中对齐。选择项目－页面样式编辑，在页面排版中选择第二个，居中对齐。选择这个选项后，在axure画图时页面依然是在最左侧，在浏览器预览时整个页面就会居中显示。
（3）背景宽度自适应
如果网站一个页面的背景都是同一个颜色，那么直接在当前页面点击一下空白处，然后选择样式－背景颜色，选择自己需要的颜色。
如果一个页面不同模块有不同的背景色，那么我们需要用动态面板来实现。首先拉一个动态面板，高度设置到你需要的高度，宽度随意，不过为了方便在这个模块上加内容，建议宽度拉倒跟网页内容宽度一样，比如1200px。然后在样式里设计你需要的背景颜色，然后勾选100%宽度。在浏览器预览后，该模块的背景色就是自适应各个分辨率了。
我做的导航效果是固定在浏览器顶部，之所以要固定在浏览器顶部，是因为页面内容较多时，用户滚动到下面后，直接就可以看到导航并进行操作。
制作过程：
（1）拉一个动态面板，导航的高度即为动态面板的高度，宽度拉到1200px。（宽度一定要拉倒内容区域的宽度，因为要在动态面板里面放导航的内容）
（2）设置动态面板背景颜色（即为导航背景颜色），勾选100%宽度。
（3）在属性中选择固定到浏览器，勾选固定到浏览器窗口，水平固定选择居中，垂直固定选择上。最下面的始终保持顶部，如果没有其它内容需要覆盖在导航上就勾选上，我的导航右侧有一个二维码需要覆盖在导航上，所以我的没有勾选。（没有勾选的要注意设计完所有页面时，要把导航的动态面板放到图层最上层。）
导航文字：导航的文字需要放在动态面板里，文字需要有3种状态，当前页面状态、鼠标悬停状态、正常状态。
banner的图是整个网站中最大的图片，这里不建议大家直接把banner图放到axure文件里，既不能自适应，又影响了加载速度。
纯色背景banner制作过程：
非纯色背景banner制作过程：
所有可点击的图形按钮、文字按钮都需要有3种状态，正常状态、鼠标悬停状态、鼠标按下状态。
在属性－交互样式设置中设置鼠标悬停和鼠标按下的效果。
我做的二维码效果是鼠标悬停在导航右侧二维码图标时，由上向下推出二维码，鼠标离开时，由下向上收回二维码。
制作过程：
（1）拉一个动态面板里面放二维码图片，放到图标下面的位置上。
（2）选择固定到浏览器，水平固定选择居中（根据网站尺寸，调整边距），垂直固定选择上，勾选始终保持顶部。
（3）给导航动态面板中的二维码图标加两个事件，如图：
网站中有一些文章、推荐等模块，点击后跳转的是非本网站中的链接，我们需要对可点击的区域加点击事件，链接到外部链接，并且在浏览器新窗口打开。具体操作如图：
1. 能用文本尽量少插入图片
比如banner上的文字，推荐里面的各种文字等，尽量不用以图片的形式放进来。尝试用axure进行排版。
2. 注意细节
既然是高保真，就不能做的像低保真那样粗糙，整个网站的字体、字号、间距、颜色等细节问题。都要像ui设计一样注重细节。
3. 交互效果统一
可点击的区域，比如文章，鼠标悬停的时候要有一个变化，比如外发光、描边等效果。要遵循设计原型，给用户每一个操作都有及时的反馈。
4. 图片压缩
尽量把用到的每一张图都进行压缩，前提是保证图片质量不会被看出来降低。
5. 购买域名
这个大家可以自行选择，去腾讯云、阿里云购买，哪个便宜买哪个。域名后缀尽量选择常见的，比如cn、com等。前面的字母可以以自己名字开头拼音或全拼来选择。
这个我也不太懂，是朋友帮忙搞的，用的是github，大家可以上网搜一下。不用花钱买服务器，这里有一个注册与使用的教学希望可以帮到大家，链接：https://blog.csdn.net/p10010/article/details/51336332
上传完去域名后台管理解析一下就可以喽！
作者：高杰，微信号公众号：UX设计师高杰，从事交互设计和用户体验工作。
本文由 @高杰 原创发布于人人都是产品经理。未经许可，禁止转载。
题图来自 Pexels，基于 CC0 协议
天的主题是网页编程中的水平线。
同学们好，今天我来分享一些免费的少儿编程知识。只要每天坚持学习一行代码，你也可以成为编程高手！今天我们要学习如何在HTML中插入一条水平线，使用的是HR标签。HR是一个自闭合标签，虽然它没有标准的属性，但我们可以通过CSS来控制它的外观。
先来看看我们的实例效果。在页面上，两行文字被一条直线分开。这条直线就是HR标签，效果已经展示出来了。现在我们来看看实现的代码。HR标签的写法非常简单，但在最开始的时候，它有四个属性，现在已经不被标准支持了。尽管如此，我们仍然可以使用它。
今天的实例中，我们已经将这些标签加入到了代码中。如果你感兴趣，可以查看下方的代码。按下空格键可以看到过时的属性不会被智能提示，但这并不影响代码的正确性。将注释取消后保存，然后回到浏览器刷新，可以看到属性仍然有效。线条的高度为3，宽度为400，并且居中显示。取消阴影后，线条将变为纯色。
这只是一个演示，你可以参考一下。从这个示例中，我们可以看到，HR标签的宽度是根据页面宽度自动调整的。当它的宽度达到整个浏览器时，它会自动换行。既然属性已经过时了，那么我们如何通过HTML来控制外观呢？CSS是我们今天要学习的内容。
先取消注释的代码，让HTML失效，然后保存。回到浏览器刷新，就可以看到线条变成了蓝色。
今天的分享就到这里，希望各位同学可以试着写三遍，不需要看视频也可以掌握这个技巧。如果你需要案例和相关文档，可以向我咨询。
我们下期再见，想学习编程的同学记得关注哦。
天分享 7 个冷门好用的在线工具，每一个都是自己精心挑选，每一个都足够惊艳，让你眼前一亮。
https://chartcube.alipay.com/
ChartCube 是蚂蚁金服数据可视化研发团队出品的一个在线图表制作工具，它让你只需要三步简单的操作，就可以快速制作出一个精美的图表。
它不需要登录注册，完全免费，操作简单，功能强大，不仅支持导出图表，还支持导出其它文件。
它整体体验下来非常流畅好用，值得尝试。
首先，第一步，你需要选择一个合适的图表，它按照图表类型和分析目的对图表进行了详细的分类。
每个图表都是非常精美。
图表类型分类包括：折线图类、条形图类、柱状图类、饼图类、面积图类、雷达图类。
分析目的分类包括：比较类、占比类、趋势类。
选择完图表，我们进行第二步配置图表，这里支持的配置包括：画布尺寸、标题、副标题，图例方位、水平位置，图形数据、图形属性、高度、宽度等。
它支持三通配置，包括图表、数据、配置三个画板，不管你在哪个画板做了修改，其它画板对应的选项也会同步变化。
它支持直接拖拽图形元素，让你配置图表变得如此简单有趣。
它还支持导入先前的配置文件。
最后完成配置，我们可以直接导出图表；它支持导出多种内容，包括：图片、数据、代码、配置文件。
导出图片包括：PNG 、SVG 、JPG 三种格式文件，导出数据是 CSV 格式文件，导出代码包括 JS 和 HTML 格式文件，你也可以直接复制代码内容。
配置文件下次可以再次导入到 ChartCube 中进行编辑操作。
https://jm.wps.cn/
极墨 PPT 是金山 WPS 出品的一个在线 PPT 制作网站，它让你只需要简单的操作，就可以轻松制作出精美的 PPT 。
它目前完全免费，仍处于内测版本，但是整体使用下来已经足够让人惊艳。
进入网站，我们需要进行登录，点击新建按钮，我们可以看到网站免费提供了很多精美的 PPT 模板，并且进行了详细的分类，包括：年终总结、答辩、宣传介绍、商业计划、述职报告、课件、发布会、简历、竞聘。
选择任意一个 PPT 模板，我们就进入了编辑界面。
我们不需要在 PPT 图片模板上编辑，直接在 PPT 模板下方的编辑界面就可以编辑内容，这里不仅可以编辑文字，还可以编辑图片。
编辑完毕，点击刷新按钮，我们会发现 PPT 上的内容已经同步修改，并且文字和图片的位置不会变化，图片的大小也不会发生改变。
它最让我惊艳的是它的智能排版功能。
它支持对某一页 PPT 进行智能排版，点击智能排版按钮，网站会自动 AI 识别你的内容，给出很多个同种风格但是不同样式的排版方案，你可以随意挑选，直接替换，让你的 PPT 变得无限可能。
它的智能排版功能不仅支持纯文字智能排版，还支持添加图片智能排版，你可以添加一张或多张图片，网站同样会自动生成多个图文混合排版方案。
我们点击网站右上方的更换风格可以重新选择 PPT 模板，点击右上方的播放按钮可以直接播放 PPT ，全屏演示 PPT 。
我们编辑完毕，可以直接导出 PPT 为 PPTX 格式，这个格式可以兼容任何版本的 Office 。
最后，这个网站目前仍处于内测阶段，很多功能有待完善，很多功能也还在开发，但是目前而言，就可以让你花少量的时间、少量的精力制作出不错的 PPT 。
https://www.sjtiantang.com/
设计天堂是一个免费的设计素材下载网站。
它支持下载的素材包括：PPT 模板、简历、图片、字体，其中 PPT 模板分类包括：动态模板、节假节日、论文答辩、相册图集、求职简历、晚会颁奖、总结汇报、商业计划书、企业宣传、教育培训、商务通用、婚礼爱情。
你不仅可以利用网站的分类功能找到自己需要的素材，还可以利用网站的搜索功能搜索自己需要的素材。
https://shulijp.com/
简捷工具是一个实用的多功能聚合网站。
它提供的工具分类包括：文字工具、图片工具、自媒体工具、计算工具、数据资讯、开发工具。
它提供了很多实用的具体工具，包括：短视频批量去水印、证件照改背景、手写文字识别、图片无损放大、黑白图片上色、图片压缩、图片对比度增强、图片变透明格式、二维码生成解码。
它支持一键更换证件照的背景颜色，并且提供白色、红色、蓝色三种底色供你选择，你可以直接上传你需要处理的证件照，选择任意一个底色就可以开始处理，处理效果比较出色。
https://taira-komori.jpn.org/freesoundcn.html
小森平的免费音效下载是一个完全免费并且非常良心的音效下载网站，它的作者是日本的一个音效制作者。
它提供的音效可以免费用于你想用的项目，可以用于商业加工，可以用于工业产品。
它提供了丰富并且全面的音效，进行了详细的分类，包括：日常生活、游戏动画片、体育大会学校、魔术幻想、饭菜吃饭厨房、格斗打击、街环境声音、开关、摒弃爆炸、交通工具、自然季节昆虫、恐怖、噪音空调、人动物脚步声、乐器。
它的每个分类提供了很多个具体音效，你不仅可以在线试听，也可以直接下载。
https://wallroom.io/
Wallroom 是一个不可多得的精品电脑壁纸网站。
它所有的壁纸都是站长人工收集上传，每一张壁纸的质量都是非常出色，每一张壁纸也都是非常唯美。
它的所有壁纸都可以免费下载。
它提供了多种分辨率的壁纸，从 1920 到 8K ，包括：1920 、2560 、2880 、4K 、5K 、8K ，你可以根据自己的需求下载对应分辨率的壁纸。
http://www.webhek.com/misc-res/species-in-pieces/
30 个 CSS 碎片拼图是一个唯美精致并且非常具有价值的网站，它通过 30 个 CSS 碎片拼图展示了 30 种濒临灭绝动物。
它的每个 CSS 碎片拼图，展示了一种濒临灭绝动物的样子，配上纯色的背景，舒缓的背景音乐，唯美的动态效果，带给你强烈的视觉冲击。
它非常具有教育价值，每一个展示页面都有一个 “它们有什么危机” 按钮，你可以点击它了解这些动物濒临灭绝的原因。
最后，我们除了欣赏，还可以截图保存这些唯美精致的图片用作电脑桌面壁纸。
下面我简单展示几个 CSS 碎片拼图，每一个都是精致唯美。
转自：微信公众号 木子淇
*请认真填写需求信息，我们会在24小时内与您取得联系。
